4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 16:32:49 +02:00
commit adb800efc9
13 changed files with 251 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Components/DesignSystem/Form/BaseField.tsx
View File

@ -15,6 +15,7 @@ export type IProps = {
disableValidation?: boolean;
validationError?: ValidationError;
disabled?: boolean;
label?: string;
};
type IState = {
@ -107,7 +108,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.INPUT_ERROR}>
{value}
</Typography>,
);

2
src/front/Components/DesignSystem/Form/DateField/classes.module.scss
View File

@ -13,7 +13,7 @@
width: 100%;
height: 70px;
border: 1px solid var(--color-neutral-200);
font-family: var(--font-text-family);
&:disabled {
cursor: not-allowed;
}

130
src/front/Components/DesignSystem/Form/TextField/classes.module.scss
View File

@ -3,46 +3,85 @@
.root {
position: relative;
.input {
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
padding: 24px;
gap: 10px;
width: 100%;
height: 70px;
border: 1px solid var(--color-neutral-200);
&[data-is-disabled="true"] {
opacity: var(--opacity-disabled, 0.3);
.input-container {
cursor: not-allowed;
border: 1px solid var(--input-main-border-default, #d7dce0);
&::placeholder {
background: var(--input-background, #fff);
}
&:disabled {
&:hover {
border: 1px solid var(--input-main-border-default, #d7dce0);
}
.input {
cursor: not-allowed;
}
&:focus {
~ .fake-placeholder {
transform: translateY(-35px);
}
}
.label {
padding: 0px var(--spacing-2, 16px);
}
.input-container {
display: flex;
padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
align-items: center;
gap: var(--spacing-2, 16px);
border-radius: var(--input-radius, 0px);
border: 1px solid var(--input-main-border-default, #d7dce0);
background: var(--input-background, #fff);
&:hover {
border: 1px solid var(--input-main-border-hovered, #b4bec5);
}
&:not([data-value=""]) {
~ .fake-placeholder {
transform: translateY(-35px);
border: 1px solid var(--input-main-border-filled, #6d7e8a);
.input {
font-weight: var(--font-text-weight-semibold, 600);
}
}
&[data-is-errored="true"] {
border: 1px solid var(--input-error, #dc2625);
}
&:focus,
&:focus-within,
&:focus-visible {
border: 1px solid var(--input-main-border-focused, #005bcb);
.input {
font-weight: var(--font-text-weight-semibold, 600);
}
}
.input {
display: flex;
padding: 0px var(--spacing-2, 16px);
align-items: center;
gap: 8px;
flex: 1 0 0;
border: none;
&::placeholder {
color: var(--input-placeholder-empty, #6d7e8a);
/* text/md/regular */
font-family: var(--font-text-family, Poppins);
font-size: 16px;
font-style: normal;
font-weight: var(--font-text-weight-regular, 400);
line-height: normal;
letter-spacing: 0.08px;
}
&[type="number"] {
&:focus {
~ .fake-placeholder {
transform: translateY(-35px);
}
}
&:not([data-value=""]) {
~ .fake-placeholder {
transform: translateY(-35px);
}
}
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
@ -62,31 +101,6 @@
display: none;
}
}
&:not([data-value=""]) {
~ .fake-placeholder {
transform: translateY(-35px);
}
}
~ .fake-placeholder {
z-index: 2;
top: 35%;
margin-left: 8px;
padding: 0 16px;
pointer-events: none;
position: absolute;
background: var(--color-generic-white);
transition: transform 0.3s ease-in-out;
}
}
&[data-is-errored="true"] {
.input {
border: 1px solid var(--color-error-600);
~ .fake-placeholder {
color: var(--color-error-600);
}
}
}
@ -94,9 +108,9 @@
cursor: pointer;
height: 24px;
width: 24px;
position: absolute;
top: 50%;
right: 24px;
transform: translate(0, -50%);
}
.errors-container {
margin-top: 8px;
}
}

19
src/front/Components/DesignSystem/Form/TextField/index.tsx
View File

@ -21,13 +21,18 @@ export default class TextField extends BaseField<IProps> {
public override render(): ReactNode {
const value = this.state.value ?? "";
return (
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<div className={classes["root"]} data-is-disabled={this.props.disabled}>
<label>
{this.props.label && (
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
{this.props.label}
</Typography>
)}
<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
<input
onChange={this.onChange}
data-value={value}
data-has-validation-errors={(this.state.validationError === null).toString()}
className={classnames(classes["input"], this.props.className)}
placeholder={this.props.placeholder}
value={value}
onFocus={this.onFocus}
onBlur={this.onBlur}
@ -35,17 +40,15 @@ export default class TextField extends BaseField<IProps> {
disabled={this.props.disabled}
type={this.props.password ? "password" : "text"}
/>
<div className={classes["fake-placeholder"]}>
{this.props.placeholder} {!this.props.required && " (Facultatif)"}
</div>
{this.props.canCopy && (
<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
<Image src={CopyIcon} alt="Copy icon" />
</div>
)}
</div>
</label>
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
</Typography>
</div>
);
}

113
src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
View File

@ -3,61 +3,92 @@
.root {
position: relative;
.textarea {
resize: none;
height: auto;
box-sizing: border-box;
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
&[data-is-disabled="true"] {
opacity: var(--opacity-disabled, 0.3);
.input-container {
cursor: not-allowed;
border: 1px solid var(--input-main-border-default, #d7dce0);
&::placeholder {
background: var(--input-background, #fff);
}
&:read-only {
&:hover {
border: 1px solid var(--input-main-border-default, #d7dce0);
}
.input {
cursor: not-allowed;
}
z-index: 1;
}
}
.label {
padding: 0px var(--spacing-2, 16px);
}
.input-container {
display: flex;
flex-direction: row;
padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
align-items: center;
padding: 24px;
gap: 10px;
gap: var(--spacing-2, 16px);
width: 100%;
height: 100px;
border: 1px solid var(--color-neutral-200);
border-radius: var(--input-radius, 0px);
border: 1px solid var(--input-main-border-default, #d7dce0);
background: var(--input-background, #fff);
~ .fake-placeholder {
z-index: 2;
top: -12px;
margin-left: 8px;
padding: 0 16px;
pointer-events: none;
position: absolute;
background: var(--color-generic-white);
transform: translateY(35px);
transition: transform 0.3s ease-in-out;
}
&:focus {
~ .fake-placeholder {
transform: translateY(0px);
}
&:hover {
border: 1px solid var(--input-main-border-hovered, #b4bec5);
}
&:not([data-value=""]) {
~ .fake-placeholder {
transform: translateY(0px);
}
border: 1px solid var(--input-main-border-filled, #6d7e8a);
.input {
font-weight: var(--font-text-weight-semibold, 600);
}
}
&[data-is-errored="true"] {
.textarea {
border: 1px solid var(--color-error-600);
~ .fake-placeholder {
color: var(--color-error-600);
}
border: 1px solid var(--input-error, #dc2625);
}
&:focus,
&:focus-within,
&:focus-visible {
border: 1px solid var(--input-main-border-focused, #005bcb);
.input {
font-weight: var(--font-text-weight-semibold, 600);
}
}
.input {
display: flex;
padding: 0px var(--spacing-2, 16px);
align-items: center;
gap: 8px;
flex: 1 0 0;
border: none;
height: 94px;
&::placeholder {
color: var(--input-placeholder-empty, #6d7e8a);
/* text/md/regular */
font-family: var(--font-text-family, Poppins);
font-size: 16px;
font-style: normal;
font-weight: var(--font-text-weight-regular, 400);
line-height: normal;
letter-spacing: 0.08px;
}
color: var(--input-placeholder-filled, #24282e);
/* text/md/semibold */
font-family: var(--font-text-family, Poppins);
font-size: 16px;
font-style: normal;
font-weight: var(--font-text-weight-semibold, 600);
line-height: normal;
letter-spacing: 0.08px;
}
}
}

34
src/front/Components/DesignSystem/Form/TextareaField/index.tsx
View File

@ -1,8 +1,7 @@
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import { ReactNode } from "react";
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
import classes from "./classes.module.scss";
import classnames from "classnames";
@ -18,30 +17,29 @@ export default class TextAreaField extends BaseField<IProps> {
const value = this.state.value ?? "";
return (
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<div className={classes["root"]} data-is-disabled={this.props.disabled}>
<label>
{this.props.label && (
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
{this.props.label}
</Typography>
)}
<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
<textarea
name={this.props.name}
rows={4}
data-value={value}
onChange={this.onChange}
className={classnames(classes["textarea"], this.props.className)}
className={classnames(classes["input"], this.props.className)}
placeholder={this.props.placeholder}
value={value}
readOnly={this.props.readonly}
onFocus={this.onFocus}
onBlur={this.onBlur}
name={this.props.name}
disabled={this.props.disabled}
/>
<div className={classes["fake-placeholder"]}>
{this.props.placeholder} {!this.props.required && " (Facultatif)"}
</div>
</label>
</div>
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
</div>
</Typography>
);
}
public override componentDidMount() {
this.setState({
value: this.props.defaultValue ?? "",
});
}
}

3
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -144,6 +144,9 @@ export enum ETypoColor {
TABS_CONTRAST_DEFAULT = "--tabs-contrast-default",
TABS_CONTRAST_ACTIVATED = "--tabs-contrast-actived",
INPUT_LABEL = "--input-label",
INPUT_ERROR = "--input-error",
}
export default function Typography(props: IProps) {

10
src/front/Components/Elements/NumberPicker/classes.module.scss
View File

@ -4,16 +4,20 @@
align-items: center;
width: fit-content;
border: 1px solid #e7e7e7;
padding: 24px;
padding: var(--spacing-1-5, 12px) var(--spacing-md, 16px);
gap: var(--spacing-2, 16px);
.button {
border: none;
background: none;
padding: 0;
height: 24px;
width: 24px;
cursor: pointer;
}
.input {
width: 50px;
width: 40px;
height: 40px;
text-align: center;
border: none;
}

4
src/front/Components/Elements/NumberPicker/index.tsx
View File

@ -35,11 +35,11 @@ export default function NumberPicker(props: IProps) {
return (
<div className={classes["root"]}>
<button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}>
<MinusIcon width="20" height="20" />
<MinusIcon width="24" height="24" />
</button>
<input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} />
<button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}>
<PlusIcon width="20" height="20" />
<PlusIcon width="24" height="24" />
</button>
</div>
);

5
src/front/Components/Layouts/DesignSystem/classes.module.scss
View File

@ -3,6 +3,11 @@
flex-direction: column;
gap: 32px;
.components {
.inputs {
display: flex;
flex-direction: column;
gap: 24px;
}
display: flex;
flex-direction: column;
gap: 24px;

12
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -13,6 +13,9 @@ import classes from "./classes.module.scss";
import useOpenable from "@Front/Hooks/useOpenable";
import Modal from "@Front/Components/DesignSystem/Modal";
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
export default function DesignSystem() {
const { isOpen, open, close } = useOpenable();
@ -64,6 +67,15 @@ export default function DesignSystem() {
<Newsletter isOpen />
<div className={classes["root"]}>
<div className={classes["components"]}>
<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
<Form className={classes["inputs"]}>
<TextField label="Label" placeholder="Placeholder" canCopy />
<TextField label="Without copy" placeholder="Placeholder" />
<TextField label="Disabled" placeholder="Placeholder" disabled canCopy />
<TextField label="Disabled without copy" placeholder="Placeholder" disabled />
<TextAreaField label="Textarea" placeholder="Placeholder" />
</Form>
<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
<Button onClick={open}>Open Modal</Button>
<Modal

2
src/front/Components/Layouts/Folder/CreateFolder/index.tsx
View File

@ -5,8 +5,8 @@ import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
import Button from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";

2
src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
View File

@ -87,7 +87,7 @@ export default function UpdateFolderMetadata() {
const defaultValue = openingDate.toISOString().split("T")[0];
return (
<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage}>
<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage} showHeader>
<div className={classes["root"]}>
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />