kelt-ui-kit-react 2.0.1 → 2.0.2

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 && (

package/src/form/form.css

@@ -20,6 +20,19 @@ 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;
@@ -79,7 +92,7 @@ form {
     border: 1px solid transparent;
     border-radius: 4px;
     margin: 0.25rem 0;
-    padding: 0.5rem 1rem;
+    padding: 0;
     font-size: 0.8rem;
     line-height: normal;
     overflow-wrap: anywhere;

package/src/form/form.enum.ts

@@ -1,4 +1,5 @@
 export enum TypeInputEnum {
+  ADDRESS = "address",
   TEXT = "text",
   BUTTON = "button",
   EMAIL = "email",

package/src/form/form.interface.tsx

@@ -1,5 +1,9 @@
 import { TypeInputEnum } from "./form.enum";
 import { GridBreakpoints } from "../grid/grid.interface";
+import {
+  GeocodedAddress,
+  GeocodingProvider,
+} from "../geocoding/geocoding.interface";
 
 export type FormMode = "read" | "edit";
 
@@ -13,6 +17,12 @@ 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;
@@ -29,6 +39,17 @@ export interface FormInterface {
   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;

package/src/geocoding/GeocodingService.ts

@@ -0,0 +1,89 @@
+import {
+    GeocodedAddress,
+    GeocodingProvider,
+    GeocodingSearchOptions,
+} from "./geocoding.interface";
+
+const DEFAULT_GEOCODING_URL = "https://data.geopf.fr/geocodage/search";
+
+interface GeocodingFeature {
+    geometry?: {
+        coordinates?: [number, number];
+    };
+    properties?: {
+        id?: string;
+        label?: string;
+        name?: string;
+        postcode?: string;
+        city?: string;
+        citycode?: string;
+        score?: number;
+        type?: string;
+    };
+}
+
+interface GeocodingResponse {
+    features?: GeocodingFeature[];
+}
+
+export interface GeocodingServiceOptions {
+    baseUrl?: string;
+    fetcher?: typeof fetch;
+}
+
+export class GeocodingService implements GeocodingProvider {
+    private readonly baseUrl: string;
+    private readonly fetcher: typeof fetch;
+
+    constructor(options: GeocodingServiceOptions = {}) {
+        this.baseUrl = options.baseUrl ?? DEFAULT_GEOCODING_URL;
+        this.fetcher = options.fetcher ?? globalThis.fetch.bind(globalThis);
+    }
+
+    async search(
+        query: string,
+        options: GeocodingSearchOptions = {},
+    ): Promise<GeocodedAddress[]> {
+        const normalizedQuery = query.trim();
+        if (!normalizedQuery) return [];
+
+        const params = new URLSearchParams({
+            q: normalizedQuery,
+            limit: String(options.limit ?? 5),
+            autocomplete: "1",
+            index: "address",
+        });
+        const response = await this.fetcher(`${this.baseUrl}?${params}`, {
+            signal: options.signal,
+        });
+
+        if (!response.ok) {
+            throw new Error(`Geocoding request failed (${response.status})`);
+        }
+
+        const data = (await response.json()) as GeocodingResponse;
+        return (data.features ?? []).flatMap((feature) => {
+            const properties = feature.properties;
+            const coordinates = feature.geometry?.coordinates;
+            if (!properties?.label || !coordinates) return [];
+
+            return [
+                {
+                    id: properties.id ?? properties.label,
+                    label: properties.label,
+                    addressLine: properties.name ?? properties.label,
+                    postalCode: properties.postcode ?? "",
+                    city: properties.city ?? "",
+                    cityCode: properties.citycode,
+                    countryCode: "FR",
+                    longitude: coordinates[0],
+                    latitude: coordinates[1],
+                    score: properties.score,
+                    type: properties.type,
+                },
+            ];
+        });
+    }
+}
+
+export const geocodingService = new GeocodingService();

package/src/geocoding/geocoding.interface.ts

@@ -0,0 +1,25 @@
+export interface GeocodedAddress {
+    id: string;
+    label: string;
+    addressLine: string;
+    postalCode: string;
+    city: string;
+    cityCode?: string;
+    countryCode: string;
+    longitude: number;
+    latitude: number;
+    score?: number;
+    type?: string;
+}
+
+export interface GeocodingSearchOptions {
+    limit?: number;
+    signal?: AbortSignal;
+}
+
+export interface GeocodingProvider {
+    search(
+        query: string,
+        options?: GeocodingSearchOptions,
+    ): Promise<GeocodedAddress[]>;
+}

package/src/grid/row/row.css

@@ -1,7 +1,7 @@
 .grid-row {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -15px;
+
   &.scroll {
     overflow-x: auto;
     flex-wrap: nowrap;
@@ -15,4 +15,4 @@
       flex-wrap: wrap;
     }
   }
-}
+}

package/src/index.ts

@@ -20,6 +20,8 @@ export { useToken } from "./_core/hooks/useToken";
 export { useValidate } from "./_core/hooks/useValidate";
 export { WidgetSupport } from "./_core/hooks/widgetSupport";
 export { ButtonAction } from "./action/ButtonAction";
+export { AddressSearch } from "./addressSearch/AddressSearch";
+export type { AddressSearchProps } from "./addressSearch/AddressSearch";
 export { Badge } from "./badge/Badge";
 export { Button } from "./button/Button";
 export { ButtonActions } from "./button/buttonActions/ButtonActions";
@@ -33,12 +35,21 @@ export { Expands } from "./expands/Expands";
 export { FilAriane } from "./filAriane/FilAriane";
 export { DynamicForm } from "./form/Form";
 export { TypeInputEnum } from "./form/form.enum";
-export type { FormMode } from "./form/form.interface";
+export type { FormMode, FormSection } from "./form/form.interface";
 export { Input } from "./form/input/Input";
 export { InputNumber } from "./form/inputNumber/InputNumber";
 export { InputPrice } from "./form/inputPrice/InputPrice";
 export { TextArea } from "./form/textArea/TextArea";
 export { Grid } from "./grid/Grid";
+export {
+  GeocodingService,
+  geocodingService,
+} from "./geocoding/GeocodingService";
+export type {
+  GeocodedAddress,
+  GeocodingProvider,
+  GeocodingSearchOptions,
+} from "./geocoding/geocoding.interface";
 export { Header } from "./header/Header";
 export { Icon } from "./icon/Icon";
 export { IconSizeEnum } from "./icon/iconSize.enum";