kelt-ui-kit-react 2.0.3 → 2.0.4

package/src/form/Form.tsx

@@ -9,12 +9,41 @@ import { Button } from "../button/Button";
 import { Icon } from "../icon/Icon";
 import { Select } from "../select/Select"; // <--- ton composant
 import "./form.css";
-import { FormInterface, FormValuesInterface } from "./form.interface";
+import {
+  FormInterface,
+  FormMode,
+  FormSection,
+  FormValuesInterface,
+} from "./form.interface";
 import { Input } from "./input/Input";
+import { InputPrice } from "./inputPrice/InputPrice";
 import { TextArea } from "./textArea/TextArea";
+import { Col } from "../grid/col/Col";
+import { Row } from "../grid/row/Row";
+import { GridBreakpoints, GridResponsive } from "../grid/grid.interface";
+import { TypeInputEnum } from "./form.enum";
+import { AddressSearch } from "../addressSearch/AddressSearch";
+
+const euroFormatter = new Intl.NumberFormat("fr-FR", {
+  style: "currency",
+  currency: "EUR",
+});
+
+type FormFieldContainerProps = {
+  field: FormInterface;
+  gridEnabled: boolean;
+  children: React.ReactNode;
+};
+
+const FormFieldContainer = ({
+  field,
+  gridEnabled,
+  children,
+}: FormFieldContainerProps) =>
+  gridEnabled ? <Col {...field.col}>{children}</Col> : <>{children}</>;
 
 export type FormProps<
-  T extends { [key: string]: string | number | boolean | Date | string[] },
+  T extends { [key: string]: string | number | boolean | Date | string[] }
 > = {
   id?: string;
   className?: string;
@@ -22,8 +51,15 @@ export type FormProps<
   hideSubmit?: boolean;
   autoComplete?: string;
   children?: React.ReactNode;
-  initialForm: FormInterface[];
+  initialForm?: FormInterface[];
+  sections?: FormSection[];
   disabledSubmit?: boolean;
+  mode?: FormMode;
+  /** Largeur sur laquelle se basent les breakpoints des champs (col), défaut : "app" */
+  responsive?: GridResponsive;
+  /** Place le bouton submit dans la grid (dernière ligne) avec ces tailles de col.
+   *  Ignoré si les champs n'utilisent pas la grid : le bouton reste dans le footer. */
+  submitCol?: GridBreakpoints;
   onSubmit?: (values: FormValuesInterface<T>) => void;
   onChange?: (values: FormValuesInterface<T>) => void;
 };
@@ -32,6 +68,7 @@ export const DynamicForm = forwardRef(
   <T extends { [key: string]: string | number | boolean | Date | string[] }>(
     {
       initialForm,
+      sections,
       title,
       onSubmit,
       id,
@@ -40,7 +77,10 @@ export const DynamicForm = forwardRef(
       onChange,
       hideSubmit,
       disabledSubmit = false,
+      mode = "edit",
       className,
+      responsive,
+      submitCol,
     }: FormProps<T>,
     ref: React.Ref<{
       clearInput?: (name: string) => void;
@@ -49,13 +89,19 @@ export const DynamicForm = forwardRef(
       getValues?: () => FormValuesInterface<T>;
       updateFormValue?: (values: FormValuesInterface<T>) => void;
       setBtnDisabledSubmit?: (disabled: boolean) => void;
-    }>,
+    }>
   ) => {
+    const formFields = sections
+      ? sections.reduce<FormInterface[]>(
+        (fields, section) => fields.concat(section.fields),
+        [],
+      )
+      : (initialForm ?? []);
     const [btnDisabledSubmit, setBtnDisabledSubmit] = useState(disabledSubmit);
     const [values, setValues] = useState<FormValuesInterface<T>>(() => {
       const initialValues: FormValuesInterface<T> =
         {} as FormValuesInterface<T>;
-      initialForm.forEach((field) => {
+      formFields.forEach((field) => {
         (initialValues as any)[field.name] = field.value ?? "";
       });
       return initialValues;
@@ -67,7 +113,7 @@ export const DynamicForm = forwardRef(
     const handleChangeInput = useCallback(
       (
         event: React.ChangeEvent<HTMLInputElement>,
-        forminterface: FormInterface,
+        forminterface: FormInterface
       ) => {
         const { name, type, checked, value } = event.target;
         const newValue = type === "checkbox" ? checked : value;
@@ -84,7 +130,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange],
+      [onChange]
     );
     const handleChangeTextArea = useCallback(
       (name: string, value: string, forminterface: FormInterface) => {
@@ -100,14 +146,14 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange],
+      [onChange]
     );
     /** Gestion des <select> */
     const handleChangeSelect = useCallback(
       (
         newValue: string | string[],
         name: string,
-        forminterface: FormInterface,
+        forminterface: FormInterface
       ) => {
         if (forminterface.onChange) {
           forminterface.onChange(newValue, name);
@@ -119,7 +165,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange],
+      [onChange]
     );
 
     const handleSubmit = useCallback(
@@ -129,14 +175,14 @@ export const DynamicForm = forwardRef(
           onSubmit(values);
         }
       },
-      [onSubmit, values],
+      [onSubmit, values]
     );
 
     const resetForm = () => {
       setValues(() => {
         const resetValues: FormValuesInterface<T> =
           {} as FormValuesInterface<T>;
-        initialForm.forEach((field) => {
+        formFields.forEach((field) => {
           (resetValues as any)[field.name] = field.value ?? "";
         });
         return resetValues;
@@ -151,7 +197,7 @@ export const DynamicForm = forwardRef(
     }, []);
 
     const focusInitialElement = () => {
-      const focusedField = initialForm.find((field) => field.focus);
+      const focusedField = formFields.find((field) => field.focus);
       if (focusedField && inputRefs.current[focusedField.name]) {
         setTimeout(() => {
           inputRefs.current[focusedField.name]?.select();
@@ -162,7 +208,7 @@ export const DynamicForm = forwardRef(
     const getValues = () => values;
 
     const updateFormValue: (values: FormValuesInterface<T>) => void = (
-      values,
+      values
     ) => {
       setValues((prevValues) => ({
         ...prevValues,
@@ -170,6 +216,17 @@ export const DynamicForm = forwardRef(
       }));
     };
 
+    const updateValues = useCallback(
+      (updatedValues: FormValuesInterface<T>) => {
+        setValues((previousValues) => {
+          const nextValues = { ...previousValues, ...updatedValues };
+          onChange?.(nextValues);
+          return nextValues;
+        });
+      },
+      [onChange],
+    );
+
     useImperativeHandle(ref, () => ({
       resetForm,
       clearInput,
@@ -179,104 +236,242 @@ export const DynamicForm = forwardRef(
       setBtnDisabledSubmit,
     }));
 
-    return (
-      <form
-        autoComplete={autoComplete ?? "off"}
-        onSubmit={handleSubmit}
-        className={className ?? ""}
-      >
-        <div className="form-content">
-          {initialForm.map((v, key) => {
+    const getReadValue = (field: FormInterface): React.ReactNode => {
+      const value = values[field.name];
+
+      if (field.formatReadValue) {
+        return field.formatReadValue(value ?? "");
+      }
+
+      if (field.type === TypeInputEnum.SELECT) {
+        const selectedValues = Array.isArray(value) ? value : [value];
+        const labels = selectedValues
+          .map(
+            (selectedValue) =>
+              field.options?.find((option) => option.value === selectedValue)
+                ?.label ?? selectedValue,
+          )
+          .filter((selectedValue) => selectedValue !== undefined);
+
+        return labels.join(", ") || "-";
+      }
+
+      if (field.type === TypeInputEnum.PRICE) {
+        const amount = Number(value);
+        return value === "" || value === undefined || Number.isNaN(amount)
+          ? "-"
+          : euroFormatter.format(amount);
+      }
+
+      if (typeof value === "boolean") {
+        return value ? "Oui" : "Non";
+      }
+
+      if (value instanceof Date) {
+        return value.toLocaleDateString();
+      }
+
+      if (Array.isArray(value)) {
+        return value.join(", ") || "-";
+      }
+
+      return value === undefined || value === null || value === ""
+        ? "-"
+        : String(value);
+    };
+
+    const submitButton = mode === "edit" && !hideSubmit && (
+      <Button
+        id={`button-${id}`}
+        disabled={btnDisabledSubmit}
+        title={title || "submit"}
+      />
+    );
+    // Le bouton va dans la grid de la dernière liste de champs, si elle en a une
+    const lastFields = sections
+      ? sections[sections.length - 1]?.fields ?? []
+      : initialForm ?? [];
+    const submitInGrid =
+      !!submitCol && lastFields.some((field) => field.col !== undefined);
+
+    const renderFields = (fields: FormInterface[], withSubmit = false) => {
+      const gridEnabled = fields.some((field) => field.col !== undefined);
+      const FieldsContainer: React.ElementType = gridEnabled
+        ? Row
+        : React.Fragment;
+      // Un Fragment n'accepte pas de props : on ne les passe qu'à la Row
+      const containerProps = gridEnabled ? { responsive } : {};
+
+      return (
+        <FieldsContainer {...containerProps}>
+          {fields.map((v, key) => {
             const required = v.onRequired
               ? v.onRequired(v.value)
-              : (v.required ?? false);
+              : v.required ?? false;
             const disabled = v.onDisabled
               ? v.onDisabled(v.value)
-              : (v.disabled ?? false);
+              : v.disabled ?? false;
 
             return (
-              <div
-                key={key}
-                className={`d-flex flex-column ${
-                  v.className ?? ""
-                } form-group form-group-${v.type}`}
+              <FormFieldContainer
+                key={v.name || key}
+                field={v}
+                gridEnabled={gridEnabled}
               >
-                {v.label && <label>{v.label}</label>}
-                {v.icon && <Icon classIcon={v.icon} />}
-
-                {v.type === "select" ? (
-                  <Select
-                    id={v.id ?? v.name}
-                    label={undefined}
-                    name={v.name}
-                    options={v.options ?? []}
-                    disabled={disabled}
-                    multiple={v.multiple}
-                    usePortal={v.usePortal}
-                    searchable={v.searchable}
-                    value={values[v.name] as any}
-                    required={required}
-                    defaultValue={v.value as string | string[]}
-                    placeholder={v.placeholder}
-                    onChangeMultiple={(newValue) =>
-                      handleChangeSelect(newValue, v.name, v)
-                    }
-                    onChange={(newValue) =>
-                      handleChangeSelect(newValue, v.name, v)
-                    }
-                  />
-                ) : v.type === "textarea" ? (
-                  <TextArea
-                    id={v.id ?? v.name}
-                    name={v.name}
-                    className="textarea-input"
-                    placeholder={v.placeholder ?? ""}
-                    disabled={disabled}
-                    required={required}
-                    value={values[v.name] as string}
-                    onChange={(value, name) =>
-                      handleChangeTextArea(name, value, v)
-                    }
-                  />
-                ) : (
-                  <Input
-                    id={v.id ?? v.name}
-                    ref={(el) => (inputRefs.current[v.name] = el)}
-                    name={v.name}
-                    type={v.type}
-                    placeholder={v.placeholder ?? ""}
-                    autoComplete={v.autoComplete}
-                    tabIndex={0}
-                    disabled={disabled}
-                    autoFocus={v.focus ?? false}
-                    required={required}
-                    step={v.step ?? "0.01"}
-                    disabledDebounce={true}
-                    value={values[v.name] as string | number}
-                    checked={
-                      v.type === "checkbox" ? !!values[v.name] : undefined
-                    }
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      handleChangeInput(e, v)
-                    }
-                    onInvalid={v.onInvalid ? v.onInvalid : undefined}
-                  />
-                )}
-              </div>
+                <div
+                  className={`d-flex flex-column ${v.className ?? ""
+                    } form-group form-group-${v.type}`}
+                >
+                  {v.label && <label>{v.label}</label>}
+                  {v.icon && <Icon classIcon={v.icon} />}
+
+                  {mode === "read" ? (
+                    <div
+                      className={`form-read-value ${v.type === TypeInputEnum.TEXTAREA
+                        ? "form-read-value--textarea"
+                        : ""
+                        }`}
+                    >
+                      {getReadValue(v)}
+                    </div>
+                  ) : v.type === TypeInputEnum.ADDRESS ? (
+                    <AddressSearch
+                      id={v.id ?? v.name}
+                      label=""
+                      placeholder={v.placeholder}
+                      value={String(values[v.name] ?? "")}
+                      disabled={disabled}
+                      minimumQueryLength={v.addressSearch?.minimumQueryLength}
+                      debounceTime={v.addressSearch?.debounceTime}
+                      limit={v.addressSearch?.limit}
+                      provider={v.addressSearch?.provider}
+                      allowManualEntry
+                      manualEntryLabel={v.addressSearch?.manualEntryLabel}
+                      onChange={(value) =>
+                        updateValues({ [v.name]: value } as FormValuesInterface<T>)
+                      }
+                      onSelect={(address) => {
+                        const mappedValues =
+                          v.addressSearch?.mapAddress?.(address) ?? {};
+                        updateValues(mappedValues as FormValuesInterface<T>);
+                        v.addressSearch?.onSelect?.(address);
+                      }}
+                    />
+                  ) : v.type === "select" ? (
+                    <Select
+                      id={v.id ?? v.name}
+                      label={undefined}
+                      name={v.name}
+                      options={v.options ?? []}
+                      disabled={disabled}
+                      multiple={v.multiple}
+                      usePortal={v.usePortal}
+                      searchable={v.searchable}
+                      value={values[v.name] as any}
+                      required={required}
+                      defaultValue={v.value as string | string[]}
+                      placeholder={v.placeholder}
+                      onChangeMultiple={(newValue) =>
+                        handleChangeSelect(newValue, v.name, v)
+                      }
+                      onChange={(newValue) =>
+                        handleChangeSelect(newValue, v.name, v)
+                      }
+                    />
+                  ) : v.type === "textarea" ? (
+                    <TextArea
+                      id={v.id ?? v.name}
+                      name={v.name}
+                      className="textarea-input"
+                      placeholder={v.placeholder ?? ""}
+                      disabled={disabled}
+                      required={required}
+                      value={values[v.name] as string}
+                      onChange={(value, name) =>
+                        handleChangeTextArea(name, value, v)
+                      }
+                    />
+                  ) : v.type === TypeInputEnum.PRICE ? (
+                    <InputPrice
+                      id={v.id ?? v.name}
+                      ref={(el) => (inputRefs.current[v.name] = el)}
+                      name={v.name}
+                      placeholder={v.placeholder ?? ""}
+                      autoComplete={v.autoComplete}
+                      tabIndex={0}
+                      disabled={disabled}
+                      autoFocus={v.focus ?? false}
+                      required={required}
+                      value={String(values[v.name] ?? "")}
+                      onChange={(value) =>
+                        handleChangeTextArea(v.name, value, v)
+                      }
+                    />
+                  ) : (
+                    <Input
+                      id={v.id ?? v.name}
+                      ref={(el) => (inputRefs.current[v.name] = el)}
+                      name={v.name}
+                      type={v.type}
+                      placeholder={v.placeholder ?? ""}
+                      autoComplete={v.autoComplete}
+                      tabIndex={0}
+                      disabled={disabled}
+                      autoFocus={v.focus ?? false}
+                      required={required}
+                      step={v.step ?? "0.01"}
+                      value={values[v.name] as string | number}
+                      checked={
+                        v.type === "checkbox" ? !!values[v.name] : undefined
+                      }
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleChangeInput(e, v)
+                      }
+                      onInvalid={v.onInvalid ? v.onInvalid : undefined}
+                    />
+                  )}
+                </div>
+              </FormFieldContainer>
             );
           })}
+          {withSubmit && submitButton && (
+            <Col {...submitCol}>
+              <div className="form-submit-col">{submitButton}</div>
+            </Col>
+          )}
+        </FieldsContainer>
+      );
+    };
+
+    return (
+      <form
+        autoComplete={autoComplete ?? "off"}
+        onSubmit={handleSubmit}
+        className={className ?? ""}
+      >
+        <div className="form-content">
+          {sections
+            ? sections.map((section, index) => (
+              <section
+                className={`form-section ${section.className ?? ""}`}
+                key={index}
+              >
+                {section.title && (
+                  <h3 className="form-section-title">{section.title}</h3>
+                )}
+                {renderFields(
+                  section.fields,
+                  submitInGrid && index === sections.length - 1
+                )}
+              </section>
+            ))
+            : renderFields(initialForm ?? [], submitInGrid)}
           {children}
         </div>
         <div className="d-flex justify-content-end form-footer">
-          {!hideSubmit && (
-            <Button
-              id={`button-${id}`}
-              disabled={btnDisabledSubmit}
-              title={title || "submit"}
-            />
-          )}
+          {!submitInGrid && submitButton}
         </div>
       </form>
     );
-  },
+  }
 );

package/src/form/Form.view.tsx

@@ -18,12 +18,14 @@ export const FormView = (): JSX.Element => {
       name: "nom",
       type: TypeInputEnum.PASSWORD,
       required: true,
+      col: { xs: 12, md: 6 },
     },
     {
       value: 30,
       label: "Age",
       name: "age",
       type: TypeInputEnum.NUMBER,
+      col: { xs: 12, md: 6 },
     },
     {
       value: false,
@@ -55,5 +57,11 @@ export const FormView = (): JSX.Element => {
   const handleSubmit = (values: FormValuesInterface<FormData>) => {
     console.log("Form Submitted: ", values);
   };
-  return <DynamicForm onSubmit={handleSubmit} initialForm={initialValues} />;
+  return (
+    <DynamicForm
+      mode="edit"
+      onSubmit={handleSubmit}
+      initialForm={initialValues}
+    />
+  );
 };

package/src/form/form.css

@@ -6,7 +6,7 @@ input {
   min-width: 250px;
 
   &:focus-visible {
-    outline: 0px;
+    outline: 1px solid #9696a7;
   }
 }
 
@@ -20,6 +20,19 @@ input[type="radio"] {
 }
 
 form {
+  .form-section+.form-section {
+    margin-top: 1.25rem;
+  }
+
+  .form-section-title {
+    margin: 0 0 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #dedede;
+    color: var(--primary-color);
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
   &.form-row {
     display: flex;
     flex-direction: row;
@@ -70,4 +83,54 @@ form {
   button {
     margin-top: 1rem;
   }
+
+  .form-read-value {
+    width: 100%;
+    min-width: 250px;
+    min-height: 0px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    margin: 0.25rem 0;
+    padding: 0;
+    font-size: 0.8rem;
+    line-height: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .form-read-value--textarea {
+    min-height: 3.25rem;
+    white-space: pre-wrap;
+  }
+
+  .grid-row {
+
+    /* Bouton submit placé dans la grid (submitCol) : aligné en bas, sur les inputs */
+    .form-submit-col {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      height: 100%;
+
+      button {
+        margin-top: 0;
+        margin-bottom: 0.25rem;
+      }
+    }
+
+    .form-group,
+    .input-container,
+    .select-container,
+    .form-read-value {
+      min-width: 0;
+    }
+
+    input:not([type="checkbox"]):not([type="radio"]),
+    .form-control-textarea,
+    .form-read-value {
+      box-sizing: border-box;
+      min-width: 0;
+      width: 100%;
+    }
+  }
 }

package/src/form/form.enum.ts

@@ -1,4 +1,5 @@
 export enum TypeInputEnum {
+  ADDRESS = "address",
   TEXT = "text",
   BUTTON = "button",
   EMAIL = "email",
@@ -8,7 +9,7 @@ export enum TypeInputEnum {
   CHECKBOX = "checkbox",
   RADIO = "radio",
   DATE = "date",
-  DATERANGE = "daterange",
   SELECT = "select",
   TEXTAREA = "textarea",
+  PRICE = "price",
 }