kelt-ui-kit-react 2.0.2 → 2.0.3

package/src/expands/expands.css

@@ -39,12 +39,10 @@
       height: 300px;
       flex: 1;
       min-height: 200px;
-
       .expand-header {
-        background-color: color-mix(in srgb, var(--primary-color), white 5%);
+        background-color: #1d3758;
         color: #fff;
       }
-
       .expand-header-custom {
         .expand-header--children {
           display: flex;
@@ -67,7 +65,6 @@
       padding: 15px;
       color: #333;
       background-color: #fff;
-
       &.expand-header-custom {
         margin-bottom: 1rem;
       }
@@ -80,15 +77,13 @@
       .expand-header-title-left {
         margin-right: 0.5rem;
         text-transform: uppercase;
-        font-size: 18px;
+        font-size: 14px;
         font-weight: 500;
       }
     }
-
     & .expand-footer {
       padding: 15px;
     }
-
     & .expand-body {
       display: none;
       flex: 1;
@@ -99,4 +94,4 @@
       flex-direction: column;
     }
   }
-}
+}

package/src/form/Form.tsx

@@ -9,40 +9,12 @@ import { Button } from "../button/Button";
 import { Icon } from "../icon/Icon";
 import { Select } from "../select/Select"; // <--- ton composant
 import "./form.css";
-import {
-  FormInterface,
-  FormMode,
-  FormSection,
-  FormValuesInterface,
-} from "./form.interface";
+import { FormInterface, 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 { 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;
@@ -50,10 +22,8 @@ export type FormProps<
   hideSubmit?: boolean;
   autoComplete?: string;
   children?: React.ReactNode;
-  initialForm?: FormInterface[];
-  sections?: FormSection[];
+  initialForm: FormInterface[];
   disabledSubmit?: boolean;
-  mode?: FormMode;
   onSubmit?: (values: FormValuesInterface<T>) => void;
   onChange?: (values: FormValuesInterface<T>) => void;
 };
@@ -62,7 +32,6 @@ export const DynamicForm = forwardRef(
   <T extends { [key: string]: string | number | boolean | Date | string[] }>(
     {
       initialForm,
-      sections,
       title,
       onSubmit,
       id,
@@ -71,7 +40,6 @@ export const DynamicForm = forwardRef(
       onChange,
       hideSubmit,
       disabledSubmit = false,
-      mode = "edit",
       className,
     }: FormProps<T>,
     ref: React.Ref<{
@@ -81,19 +49,13 @@ 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>;
-      formFields.forEach((field) => {
+      initialForm.forEach((field) => {
         (initialValues as any)[field.name] = field.value ?? "";
       });
       return initialValues;
@@ -105,7 +67,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;
@@ -122,7 +84,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange]
+      [onChange],
     );
     const handleChangeTextArea = useCallback(
       (name: string, value: string, forminterface: FormInterface) => {
@@ -138,14 +100,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);
@@ -157,7 +119,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange]
+      [onChange],
     );
 
     const handleSubmit = useCallback(
@@ -167,14 +129,14 @@ export const DynamicForm = forwardRef(
           onSubmit(values);
         }
       },
-      [onSubmit, values]
+      [onSubmit, values],
     );
 
     const resetForm = () => {
       setValues(() => {
         const resetValues: FormValuesInterface<T> =
           {} as FormValuesInterface<T>;
-        formFields.forEach((field) => {
+        initialForm.forEach((field) => {
           (resetValues as any)[field.name] = field.value ?? "";
         });
         return resetValues;
@@ -189,7 +151,7 @@ export const DynamicForm = forwardRef(
     }, []);
 
     const focusInitialElement = () => {
-      const focusedField = formFields.find((field) => field.focus);
+      const focusedField = initialForm.find((field) => field.focus);
       if (focusedField && inputRefs.current[focusedField.name]) {
         setTimeout(() => {
           inputRefs.current[focusedField.name]?.select();
@@ -200,7 +162,7 @@ export const DynamicForm = forwardRef(
     const getValues = () => values;
 
     const updateFormValue: (values: FormValuesInterface<T>) => void = (
-      values
+      values,
     ) => {
       setValues((prevValues) => ({
         ...prevValues,
@@ -208,17 +170,6 @@ 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,
@@ -228,188 +179,6 @@ export const DynamicForm = forwardRef(
       setBtnDisabledSubmit,
     }));
 
-    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 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;
-            const disabled = v.onDisabled
-              ? v.onDisabled(v.value)
-              : v.disabled ?? false;
-
-            return (
-              <FormFieldContainer
-                key={v.name || key}
-                field={v}
-                gridEnabled={gridEnabled}
-              >
-                <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}
-                      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"}
@@ -417,23 +186,89 @@ export const DynamicForm = forwardRef(
         className={className ?? ""}
       >
         <div className="form-content">
-          {sections
-            ? sections.map((section, index) => (
-              <section
-                className={`form-section ${section.className ?? ""}`}
-                key={index}
+          {initialForm.map((v, key) => {
+            const required = v.onRequired
+              ? v.onRequired(v.value)
+              : (v.required ?? false);
+            const disabled = v.onDisabled
+              ? v.onDisabled(v.value)
+              : (v.disabled ?? false);
+
+            return (
+              <div
+                key={key}
+                className={`d-flex flex-column ${
+                  v.className ?? ""
+                } form-group form-group-${v.type}`}
               >
-                {section.title && (
-                  <h3 className="form-section-title">{section.title}</h3>
+                {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}
+                  />
                 )}
-                {renderFields(section.fields)}
-              </section>
-            ))
-            : renderFields(initialForm ?? [])}
+              </div>
+            );
+          })}
           {children}
         </div>
         <div className="d-flex justify-content-end form-footer">
-          {mode === "edit" && !hideSubmit && (
+          {!hideSubmit && (
             <Button
               id={`button-${id}`}
               disabled={btnDisabledSubmit}
@@ -443,5 +278,5 @@ export const DynamicForm = forwardRef(
         </div>
       </form>
     );
-  }
+  },
 );

package/src/form/Form.view.tsx

@@ -18,14 +18,12 @@ 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,
@@ -57,11 +55,5 @@ export const FormView = (): JSX.Element => {
   const handleSubmit = (values: FormValuesInterface<FormData>) => {
     console.log("Form Submitted: ", values);
   };
-  return (
-    <DynamicForm
-      mode="edit"
-      onSubmit={handleSubmit}
-      initialForm={initialValues}
-    />
-  );
+  return <DynamicForm onSubmit={handleSubmit} initialForm={initialValues} />;
 };

package/src/form/form.css

@@ -6,7 +6,7 @@ input {
   min-width: 250px;
 
   &:focus-visible {
-    outline: 1px solid #9696a7;
+    outline: 0px;
   }
 }
 
@@ -20,19 +20,6 @@ input[type="radio"] {
 }
 
 form {
-  .form-section+.form-section {
-    margin-top: 1.25rem;
-  }
-
-  .form-section-title {
-    margin: 0 15px 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;
@@ -83,41 +70,4 @@ form {
   button {
     margin-top: 1rem;
   }
-
-  .form-read-value {
-    width: 100%;
-    min-width: 250px;
-    min-height: calc(1em + 1rem + 2px);
-    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 {
-
-    .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,5 +1,4 @@
 export enum TypeInputEnum {
-  ADDRESS = "address",
   TEXT = "text",
   BUTTON = "button",
   EMAIL = "email",
@@ -9,7 +8,7 @@ export enum TypeInputEnum {
   CHECKBOX = "checkbox",
   RADIO = "radio",
   DATE = "date",
+  DATERANGE = "daterange",
   SELECT = "select",
   TEXTAREA = "textarea",
-  PRICE = "price",
 }

package/src/form/form.interface.tsx

@@ -1,11 +1,4 @@
 import { TypeInputEnum } from "./form.enum";
-import { GridBreakpoints } from "../grid/grid.interface";
-import {
-  GeocodedAddress,
-  GeocodingProvider,
-} from "../geocoding/geocoding.interface";
-
-export type FormMode = "read" | "edit";
 
 export type FormValuesInterface<
   T extends { [key: string]: string | number | boolean | Date | string[] }
@@ -17,12 +10,6 @@ export interface FormCondition {
   regex: string;
 }
 
-export interface FormSection {
-  title?: React.ReactNode;
-  fields: FormInterface[];
-  className?: string;
-}
-
 export interface FormInterface {
   value: string | number | boolean | Date;
   id?: string;
@@ -36,23 +23,10 @@ export interface FormInterface {
   condition?: FormCondition;
   icon?: string;
   multiple?: boolean;
+  usePortal?: boolean;
+  searchable?: boolean;
   options?: { value: string; label: string }[]; // <--- pour les <option>
   className?: string;
-  col?: GridBreakpoints;
-  addressSearch?: {
-    minimumQueryLength?: number;
-    debounceTime?: number;
-    limit?: number;
-    provider?: GeocodingProvider;
-    manualEntryLabel?: string;
-    mapAddress?: (
-      address: GeocodedAddress,
-    ) => Record<string, string | number | boolean | Date | string[]>;
-    onSelect?: (address: GeocodedAddress) => void;
-  };
-  formatReadValue?: (
-    value: string | number | boolean | Date | string[]
-  ) => React.ReactNode;
   autoComplete?: string;
   step?: string;
   onChange?: (