kelt-ui-kit-react 2.0.0 → 2.0.2

package/src/form/form.css

@@ -4,10 +4,12 @@ input {
   border-radius: 4px;
   margin: 0.25rem 0 0.25rem 0;
   min-width: 250px;
+
   &:focus-visible {
     outline: 1px solid #9696a7;
   }
 }
+
 input[type="checkbox"],
 input[type="radio"] {
   min-width: auto;
@@ -16,38 +18,59 @@ input[type="radio"] {
   height: 18px;
   width: 18px;
 }
+
 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;
     flex-wrap: wrap;
     align-items: center;
+
     .form-group {
       margin-right: 1rem;
       flex: 1;
       padding: 0;
+
       .input-container {
         min-width: auto;
+
         input {
           min-width: auto;
         }
       }
     }
   }
+
   label {
     font-weight: 600;
     font-size: 0.85rem;
     padding-bottom: 0.15rem;
   }
+
   .form-group-checkbox {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 0.5rem;
+
     label {
       margin-right: 1rem;
       padding: 0;
     }
+
     input {
       min-width: auto;
       padding: 0;
@@ -56,9 +79,11 @@ form {
       width: 18px;
     }
   }
+
   button {
     margin-top: 1rem;
   }
+
   .form-read-value {
     width: 100%;
     min-width: 250px;
@@ -67,13 +92,32 @@ 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;
   }
+
   .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,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/col/colStyled/ColStyled.tsx

@@ -10,6 +10,8 @@ type ColStyledProps = {
   $xl?: GridColumnSpan;
 };
 export const ColStyled = styled.div<ColStyledProps>`
+  box-sizing: border-box;
+  min-width: 0;
   padding: 0 15px;
   flex: 0 0 ${({ $xs }) => getColWidth($xs)};
   max-width: ${({ $xs }) => getColWidth($xs)};
@@ -18,7 +20,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $sm }) =>
     $sm &&
     css`
-      @container (min-width: 576px) {
+      @media (min-width: 576px) {
         flex: 0 0 ${getColWidth($sm)};
         max-width: ${getColWidth($sm)};
       }
@@ -27,7 +29,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $md }) =>
     $md &&
     css`
-      @container (min-width: 768px) {
+      @media (min-width: 768px) {
         flex: 0 0 ${getColWidth($md)};
         max-width: ${getColWidth($md)};
       }
@@ -36,7 +38,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $lg }) =>
     $lg &&
     css`
-      @container (min-width: 992px) {
+      @media (min-width: 992px) {
         flex: 0 0 ${getColWidth($lg)};
         max-width: ${getColWidth($lg)};
       }
@@ -45,7 +47,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $xl }) =>
     $xl &&
     css`
-      @container (min-width: 1200px) {
+      @media (min-width: 1200px) {
         flex: 0 0 ${getColWidth($xl)};
         max-width: ${getColWidth($xl)};
       }

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";