kelt-ui-kit-react 2.0.0 → 2.0.2

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -7,6 +7,7 @@ type DataTableRowProps = {
   idx: number;
   rowIndex: number;
   row: any;
+  container?: "cell" | "card";
   onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
 };
 export const DataTableRow = ({
@@ -14,6 +15,7 @@ export const DataTableRow = ({
   idx,
   rowIndex,
   row,
+  container = "cell",
   onEnterNextColumn,
 }: DataTableRowProps) => {
   const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
@@ -24,12 +26,12 @@ export const DataTableRow = ({
     typeof column.showStepButtons === "function"
       ? column.showStepButtons(row)
       : (column.showStepButtons ??
-          (typeof column.stepControls === "function"
-            ? column.stepControls(row)
-            : (column.stepControls ??
-                (typeof column.withStepControls === "function"
-                  ? column.withStepControls(row)
-                  : column.withStepControls)))),
+        (typeof column.stepControls === "function"
+          ? column.stepControls(row)
+          : (column.stepControls ??
+            (typeof column.withStepControls === "function"
+              ? column.withStepControls(row)
+              : column.withStepControls)))),
   );
 
   const handleStep = (direction: "plus" | "minus", e: React.MouseEvent) => {
@@ -50,8 +52,10 @@ export const DataTableRow = ({
     }
   };
 
+  const Container = container === "card" ? "div" : "td";
+
   return (
-    <td
+    <Container
       className={`${isDisabled ? "disabled" : ""}`}
       data-column-index={idx}
       data-row-index={rowIndex}
@@ -93,42 +97,83 @@ export const DataTableRow = ({
             />
           </div>
         ) : (
-        hasStepButtons ? (
-          <div
-            className="data-table-input-number-wrapper"
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-              justifyContent:
-                column.align === "right"
-                  ? "flex-end"
-                  : column.align === "center"
-                    ? "center"
-                    : "flex-start",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <button
-              type="button"
-              className="data-table-step-btn data-table-step-btn--minus"
-              disabled={
-                isDisabled ||
-                (column.min !== undefined && Number(value) <= column.min)
-              }
-              onClick={(e) => handleStep("minus", e)}
+          hasStepButtons ? (
+            <div
+              className="data-table-input-number-wrapper"
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "4px",
+                justifyContent:
+                  column.align === "right"
+                    ? "flex-end"
+                    : column.align === "center"
+                      ? "center"
+                      : "flex-start",
+              }}
+              onClick={(e) => e.stopPropagation()}
             >
-              <Icon classIcon="bi-dash-lg" />
-            </button>
+              <button
+                type="button"
+                className="data-table-step-btn data-table-step-btn--minus"
+                disabled={
+                  isDisabled ||
+                  (column.min !== undefined && Number(value) <= column.min)
+                }
+                onClick={(e) => handleStep("minus", e)}
+              >
+                <Icon classIcon="bi-dash-lg" />
+              </button>
+              <input
+                type={column.type}
+                value={value}
+                step={column.step ?? "0.01"}
+                min={column.min}
+                max={column.max}
+                disabled={isDisabled}
+                style={{
+                  textAlign: column.align || "center",
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  width: column.width,
+                }}
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    if (column.onEnter) {
+                      column.onEnter(e.currentTarget.value, row);
+                    }
+                    if (column.enterToNextColumn) {
+                      e.preventDefault();
+                      onEnterNextColumn?.(idx, rowIndex);
+                    }
+                  }
+                }}
+                onChange={(e) => {
+                  if (column.onEdit) {
+                    column.onEdit(e.target.value, row);
+                  }
+                }}
+              />
+              <button
+                type="button"
+                className="data-table-step-btn data-table-step-btn--plus"
+                disabled={
+                  isDisabled ||
+                  (column.max !== undefined && Number(value) >= column.max)
+                }
+                onClick={(e) => handleStep("plus", e)}
+              >
+                <Icon classIcon="bi-plus-lg" />
+              </button>
+            </div>
+          ) : (
             <input
               type={column.type}
               value={value}
-              step={column.step ?? "0.01"}
-              min={column.min}
-              max={column.max}
-              disabled={isDisabled}
+              step="0.01"
               style={{
-                textAlign: column.align || "center",
+                textAlign: column.align || "left",
                 minWidth: column.minWidth,
                 maxWidth: column.maxWidth,
                 width: column.width,
@@ -151,54 +196,13 @@ export const DataTableRow = ({
                 }
               }}
             />
-            <button
-              type="button"
-              className="data-table-step-btn data-table-step-btn--plus"
-              disabled={
-                isDisabled ||
-                (column.max !== undefined && Number(value) >= column.max)
-              }
-              onClick={(e) => handleStep("plus", e)}
-            >
-              <Icon classIcon="bi-plus-lg" />
-            </button>
-          </div>
-        ) : (
-          <input
-            type={column.type}
-            value={value}
-            step="0.01"
-            style={{
-              textAlign: column.align || "left",
-              minWidth: column.minWidth,
-              maxWidth: column.maxWidth,
-              width: column.width,
-            }}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                if (column.onEnter) {
-                  column.onEnter(e.currentTarget.value, row);
-                }
-                if (column.enterToNextColumn) {
-                  e.preventDefault();
-                  onEnterNextColumn?.(idx, rowIndex);
-                }
-              }
-            }}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e.target.value, row);
-              }
-            }}
-          />
-        )
+          )
         )
       ) : column.format ? (
         column.format(value)
       ) : (
         value
       )}
-    </td>
+    </Container>
   );
 };

package/src/expands/expands.css

@@ -39,10 +39,12 @@
       height: 300px;
       flex: 1;
       min-height: 200px;
+
       .expand-header {
-        background-color: #1d3758;
+        background-color: color-mix(in srgb, var(--primary-color), white 5%);
         color: #fff;
       }
+
       .expand-header-custom {
         .expand-header--children {
           display: flex;
@@ -65,6 +67,7 @@
       padding: 15px;
       color: #333;
       background-color: #fff;
+
       &.expand-header-custom {
         margin-bottom: 1rem;
       }
@@ -81,9 +84,11 @@
         font-weight: 500;
       }
     }
+
     & .expand-footer {
       padding: 15px;
     }
+
     & .expand-body {
       display: none;
       flex: 1;
@@ -94,4 +99,4 @@
       flex-direction: column;
     }
   }
-}
+}

package/src/form/Form.tsx

@@ -12,6 +12,7 @@ import "./form.css";
 import {
   FormInterface,
   FormMode,
+  FormSection,
   FormValuesInterface,
 } from "./form.interface";
 import { Input } from "./input/Input";
@@ -20,6 +21,7 @@ import { TextArea } from "./textArea/TextArea";
 import { Col } from "../grid/col/Col";
 import { Row } from "../grid/row/Row";
 import { TypeInputEnum } from "./form.enum";
+import { AddressSearch } from "../addressSearch/AddressSearch";
 
 const euroFormatter = new Intl.NumberFormat("fr-FR", {
   style: "currency",
@@ -48,7 +50,8 @@ export type FormProps<
   hideSubmit?: boolean;
   autoComplete?: string;
   children?: React.ReactNode;
-  initialForm: FormInterface[];
+  initialForm?: FormInterface[];
+  sections?: FormSection[];
   disabledSubmit?: boolean;
   mode?: FormMode;
   onSubmit?: (values: FormValuesInterface<T>) => void;
@@ -59,6 +62,7 @@ export const DynamicForm = forwardRef(
   <T extends { [key: string]: string | number | boolean | Date | string[] }>(
     {
       initialForm,
+      sections,
       title,
       onSubmit,
       id,
@@ -79,11 +83,17 @@ export const DynamicForm = forwardRef(
       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;
@@ -164,7 +174,7 @@ export const DynamicForm = forwardRef(
       setValues(() => {
         const resetValues: FormValuesInterface<T> =
           {} as FormValuesInterface<T>;
-        initialForm.forEach((field) => {
+        formFields.forEach((field) => {
           (resetValues as any)[field.name] = field.value ?? "";
         });
         return resetValues;
@@ -179,7 +189,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();
@@ -198,6 +208,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,
@@ -207,8 +228,6 @@ export const DynamicForm = forwardRef(
       setBtnDisabledSubmit,
     }));
 
-    const gridEnabled = initialForm.some((field) => field.col !== undefined);
-    const FieldsContainer = gridEnabled ? Row : React.Fragment;
     const getReadValue = (field: FormInterface): React.ReactNode => {
       const value = values[field.name];
 
@@ -253,15 +272,13 @@ export const DynamicForm = forwardRef(
         : String(value);
     };
 
-    return (
-      <form
-        autoComplete={autoComplete ?? "off"}
-        onSubmit={handleSubmit}
-        className={className ?? ""}
-      >
-        <div className="form-content">
-          <FieldsContainer>
-          {initialForm.map((v, key) => {
+    const renderFields = (fields: FormInterface[]) => {
+      const gridEnabled = fields.some((field) => field.col !== undefined);
+      const FieldsContainer = gridEnabled ? Row : React.Fragment;
+
+      return (
+        <FieldsContainer>
+          {fields.map((v, key) => {
             const required = v.onRequired
               ? v.onRequired(v.value)
               : v.required ?? false;
@@ -270,102 +287,150 @@ export const DynamicForm = forwardRef(
               : v.disabled ?? false;
 
             return (
-              <FormFieldContainer key={key} field={v} gridEnabled={gridEnabled}>
+              <FormFieldContainer
+                key={v.name || key}
+                field={v}
+                gridEnabled={gridEnabled}
+              >
                 <div
-                  className={`d-flex flex-column ${
-                    v.className ?? ""
-                  } form-group form-group-${v.type}`}
+                  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} />}
+                  {v.label && <label>{v.label}</label>}
+                  {v.icon && <Icon classIcon={v.icon} />}
 
-                {mode === "read" ? (
-                  <div
-                    className={`form-read-value ${
-                      v.type === TypeInputEnum.TEXTAREA
+                  {mode === "read" ? (
+                    <div
+                      className={`form-read-value ${v.type === TypeInputEnum.TEXTAREA
                         ? "form-read-value--textarea"
                         : ""
-                    }`}
-                  >
-                    {getReadValue(v)}
-                  </div>
-                ) : v.type === "select" ? (
-                  <Select
-                    id={v.id ?? v.name}
-                    label={undefined}
-                    name={v.name}
-                    options={v.options ?? []}
-                    disabled={disabled}
-                    multiple={v.multiple}
-                    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}
-                  />
-                )}
+                        }`}
+                    >
+                      {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}
+                      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>
             );
           })}
+        </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)}
+              </section>
+            ))
+            : renderFields(initialForm ?? [])}
           {children}
-          </FieldsContainer>
         </div>
         <div className="d-flex justify-content-end form-footer">
           {mode === "edit" && !hideSubmit && (