kelt-ui-kit-react 2.0.3 → 2.0.4

package/src/form/form.interface.tsx

@@ -1,4 +1,11 @@
 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[] }
@@ -10,8 +17,14 @@ export interface FormCondition {
   regex: string;
 }
 
+export interface FormSection {
+  title?: React.ReactNode;
+  fields: FormInterface[];
+  className?: string;
+}
+
 export interface FormInterface {
-  value: string | number | boolean | Date;
+  value: string | number | boolean | Date | string[];
   id?: string;
   label?: string;
   focus?: boolean;
@@ -27,13 +40,28 @@ export interface FormInterface {
   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?: (
     value: string | number | boolean | Date | string[],
     name?: string
   ) => void;
-  onRequired?: (value: string | number | boolean | Date) => boolean;
-  onDisabled?: (value: string | number | boolean | Date) => boolean;
+  onRequired?: (value: string | number | boolean | Date | string[]) => boolean;
+  onDisabled?: (value: string | number | boolean | Date | string[]) => boolean;
   onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }

package/src/form/input/Input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useState } from "react";
 import { Icon } from "../../icon/Icon";
 import { TypeInputEnum } from "../form.enum";
 import "./input.css";
@@ -15,15 +15,12 @@ export interface InputProps {
   disabled?: boolean;
   autoFocus?: boolean;
   required?: boolean;
-  disabledDebounce?: boolean;
   minLength?: number;
   maxLength?: number;
-  width?: string;
   autoComplete?: string;
   step?: string;
   tabIndex?: number;
   checked?: boolean;
-  showClearButton?: boolean;
   handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
@@ -37,13 +34,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       name,
       type = TypeInputEnum.TEXT,
       value,
-      width,
       onInvalid,
       placeholder,
       className,
       inputMode,
       minLength,
-      disabledDebounce = false,
       maxLength,
       autoFocus = false,
       disabled = false,
@@ -52,61 +47,18 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       tabIndex = 0,
       step,
       checked,
-      showClearButton = false,
       onChange,
       onBlur,
       onClick,
       handleKeyDown,
     },
-    ref,
+    ref
   ) => {
     // Si le type est password, on utilise l'input de type password
     const [showPassword, setShowPassword] = useState(false);
-    const [localValue, setLocalValue] = useState(value ?? "");
-    const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    const triggerOnChange = (nextValue: string) => {
-      if (!onChange) return;
-
-      const syntheticEvent = {
-        target: { value: nextValue, name, id },
-        currentTarget: { value: nextValue, name, id },
-      } as unknown as React.ChangeEvent<HTMLInputElement>;
-
-      onChange(syntheticEvent);
-    };
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value; // 👈 capturer avant le setTimeout
-      setLocalValue(value);
-      if (!onChange) return;
-      if (disabledDebounce) {
-        onChange(e);
-        return;
-      }
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        onChange({ ...e, target: { ...e.target, value } }); // 👈 passer la valeur capturée
-      }, 300);
-    };
-
-    const handleClear = (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      setLocalValue("");
-      triggerOnChange("");
-    };
-
-    const hasValue = String(localValue ?? "").length > 0;
-    const hasClearButtonSlot = showClearButton && type === TypeInputEnum.TEXT;
-    const canShowClearButton =
-      showClearButton && hasValue && !disabled && type === TypeInputEnum.TEXT;
 
     return (
-      <div
-        className={`input-container ${`input-container-${type}`} `}
-        style={{ width }}
-      >
+      <div className={`input-container ${`input-container-${type}`} `}>
         <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
 
         <input
@@ -116,7 +68,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
           type={showPassword ? TypeInputEnum.TEXT : type}
           spellCheck="false"
-          value={localValue}
+          value={value}
           placeholder={placeholder}
           disabled={disabled}
           required={required}
@@ -126,7 +78,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           autoFocus={autoFocus}
           minLength={minLength}
           maxLength={maxLength}
-          onChange={handleChange}
+          onChange={onChange}
           checked={checked}
           onKeyDown={handleKeyDown}
           onBlur={onBlur}
@@ -134,16 +86,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             e.stopPropagation();
             onClick && onClick(e);
           }}
-          className={`input-field ${hasClearButtonSlot ? "with-clear-button" : ""} ${className ?? ""}`}
+          className={`input-field ${className ?? ""}`}
           onInvalid={onInvalid}
         />
 
-        {canShowClearButton && (
-          <div onClick={handleClear} className="input-clear-icon" role="button">
-            <Icon classIcon="bi-x-circle" />
-          </div>
-        )}
-
         {type === TypeInputEnum.PASSWORD && (
           <div
             onClick={() => setShowPassword(!showPassword)}
@@ -154,7 +100,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
       </div>
     );
-  },
+  }
 );
 
 Input.displayName = "Input";

package/src/form/input/input.css

@@ -9,7 +9,7 @@
     width: 10px;
 
     input {
-      width: 10px;
+      width: 20px;
       min-width: 10px;
     }
   }
@@ -23,26 +23,8 @@
     align-items: center;
   }
 
-  .input-clear-icon {
-    position: absolute;
-    right: 8px;
-    width: 24px;
-    height: 100%;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 2;
-  }
-
-  .with-clear-button {
-    padding-right: 40px;
-  }
-
   input {
     width: 100%;
     font-size: 0.8rem;
-    box-sizing: border-box;
   }
 }

package/src/form/inputNumber/InputNumber.tsx

@@ -8,8 +8,10 @@ export type InputNumberProps = {
   value?: string; // ⚠️ string pour gérer la saisie manuelle
   placeholder?: string;
   className?: string;
+  pattern?: string; // regex pour validation (ex: "^-?\\d*[.,]?\\d*$" pour nombre décimal)
   disabled?: boolean;
   required?: boolean;
+  inputMode?: "numeric" | "decimal";
   autoFocus?: boolean;
   maxLength?: number;
   autoComplete?: string;
@@ -17,7 +19,7 @@ export type InputNumberProps = {
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onChange?: (
     e: React.ChangeEvent<HTMLInputElement>,
-    valueFormat?: string
+    valueFormat?: string,
   ) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
@@ -38,13 +40,15 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       maxLength = 10,
       autoComplete = "off",
       tabIndex = 0,
+      inputMode = "numeric",
+      pattern,
       onChange,
       onBlur,
       onClick,
       onKeyDown,
       onFocus,
     },
-    ref
+    ref,
   ) => {
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -62,7 +66,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
 
         onChange?.(e, newValue);
       },
-      [onChange, maxLength]
+      [onChange, maxLength],
     );
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -72,7 +76,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       // ✅ Autoriser chiffres, contrôle, ., , et -
       const allowed =
         /[0-9]|Backspace|Delete|ArrowLeft|ArrowRight|Tab|Enter|Home|End/.test(
-          e.key
+          e.key,
         ) ||
         e.key === "." ||
         e.key === "," ||
@@ -105,8 +109,9 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
           required={required}
           autoFocus={autoFocus}
           autoComplete={autoComplete}
+          pattern={pattern}
           tabIndex={tabIndex}
-          inputMode="numeric" // mobile keyboard adaptatif
+          inputMode={inputMode} // mobile keyboard adaptatif
           spellCheck="false"
           className={`input-field ${className ?? ""}`}
           onChange={handleChange}
@@ -121,7 +126,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
         />
       </div>
     );
-  }
+  },
 );
 
 InputNumber.displayName = "InputNumber";

package/src/form/inputPrice/InputPrice.tsx

@@ -18,7 +18,7 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       onChange,
       ...props
     },
-    ref
+    ref,
   ) => {
     const handleBlur = useCallback(() => {
       if (onChange) {
@@ -31,10 +31,12 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       <InputNumber
         {...props}
         ref={ref}
+        pattern="[0-9]*[.,]?[0-9]*"
+        inputMode="decimal" // mobile keyboard adaptatif
         value={value ?? ""}
         onChange={(e) => onChange?.(e.target.value)}
         onBlur={handleBlur} // Force le formatage à 2 décimales en sortie
       />
     );
-  }
+  },
 );

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/Grid.tsx

@@ -1,21 +1,34 @@
-import { Col } from "./col/Col";
-import { Container } from "./container/Container";
-import { GridInterface } from "./grid.interface";
-import { Row } from "./row/Row";
-type GridProps = {
-  items: GridInterface[];
-  className?: string;
-  scroll?: boolean;
-};
-
-export const Grid = ({ items, className, scroll }: GridProps) => {
-  return (
-    <Container>
-      <Row scroll={scroll} className={className}>
-        {items.map((item, id) => (
-          <Col key={id} {...item} />
-        ))}
-      </Row>
-    </Container>
-  );
-};
+import { Col } from "./col/Col";
+import { Container } from "./container/Container";
+import { GridInterface, GridResponsive } from "./grid.interface";
+import { GridGap, Row } from "./row/Row";
+type GridProps = {
+  items: GridInterface[];
+  className?: string;
+  scroll?: boolean;
+  gap?: GridGap;
+  responsive?: GridResponsive;
+};
+
+export const Grid = ({
+  items,
+  className,
+  scroll,
+  gap,
+  responsive,
+}: GridProps) => {
+  return (
+    <Container>
+      <Row
+        scroll={scroll}
+        className={className}
+        gap={gap}
+        responsive={responsive}
+      >
+        {items.map((item, id) => (
+          <Col key={id} {...item} />
+        ))}
+      </Row>
+    </Container>
+  );
+};

package/src/grid/col/Col.tsx

@@ -1,15 +1,24 @@
-import { ColStyled } from "./colStyled/ColStyled";
-type ColProps = {
-  xs?: number;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  children: React.ReactNode;
-};
-export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, children }) => {
-  return (
-    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg}>
-      {children}
-    </ColStyled>
-  );
-};
+import { useContext } from "react";
+import { ColStyled } from "./colStyled/ColStyled";
+import { GridBreakpoints } from "../grid.interface";
+import { RowResponsiveContext } from "../row/Row";
+import "./col.css"
+type ColProps = GridBreakpoints & {
+  children: React.ReactNode;
+};
+export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
+  const responsive = useContext(RowResponsiveContext);
+  return (
+    <ColStyled
+      className="col"
+      $responsive={responsive}
+      $xs={xs}
+      $sm={sm}
+      $md={md}
+      $lg={lg}
+      $xl={xl}
+    >
+      {children}
+    </ColStyled>
+  );
+};

package/src/grid/col/col.css

@@ -0,0 +1,3 @@
+.col {
+    padding: 0;
+}

package/src/grid/col/colStyled/ColStyled.tsx

@@ -1,41 +1,59 @@
-import styled, { css } from "styled-components";
-const getColWidth = (size = 12) => `${(size / 12) * 100}%`;
-type ColStyledProps = {
-  $xs?: number;
-  $sm?: number;
-  $md?: number;
-  $lg?: number;
-};
-export const ColStyled = styled.div<ColStyledProps>`
-  padding: 0 15px;
-  flex: 0 0 ${({ $xs }) => getColWidth($xs)};
-  max-width: ${({ $xs }) => getColWidth($xs)};
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  ${({ $sm }) =>
-    $sm &&
-    css`
-      @container (min-width: 576px) {
-        flex: 0 0 ${getColWidth($sm)};
-        max-width: ${getColWidth($sm)};
-      }
-    `}
-
-  ${({ $md }) =>
-    $md &&
-    css`
-      @container (min-width: 768px) {
-        flex: 0 0 ${getColWidth($md)};
-        max-width: ${getColWidth($md)};
-      }
-    `}
-
-  ${({ $lg }) =>
-    $lg &&
-    css`
-      @container (min-width: 992px) {
-        flex: 0 0 ${getColWidth($lg)};
-        max-width: ${getColWidth($lg)};
-      }
-    `}
-`;
+import styled, { css } from "styled-components";
+import { GridColumnSpan, GridResponsive } from "../../grid.interface";
+
+// Largeur = part de la ligne moins la part des gaps qui revient à la colonne.
+// Pour une ligne dont les spans font 12, la somme des largeurs + les gaps = 100%.
+const getColWidth = (size: number) =>
+  `calc(${(size / 12) * 100}% - var(--grid-gutter, 0px) * ${1 - size / 12})`;
+
+// "auto" : base 0 et grow 1, les colonnes "auto" d'une ligne se partagent
+// la place restante (gaps déduits) à parts égales.
+const colSize = (size: GridColumnSpan = 12) =>
+  size === "auto"
+    ? `flex: 1 1 0; max-width: 100%;`
+    : `flex: 0 0 ${getColWidth(size)}; max-width: ${getColWidth(size)};`;
+
+// Règle de breakpoint selon la largeur de référence choisie sur la Row
+const breakpoint = (responsive: GridResponsive, minWidth: number) => {
+  switch (responsive) {
+    case "viewport":
+      return `@media (min-width: ${minWidth}px)`;
+    case "row":
+      return `@container kelt-grid (min-width: ${minWidth}px)`;
+    default:
+      return `@container app-container (min-width: ${minWidth}px)`;
+  }
+};
+
+type ColStyledProps = {
+  $responsive: GridResponsive;
+  $xs?: GridColumnSpan;
+  $sm?: GridColumnSpan;
+  $md?: GridColumnSpan;
+  $lg?: GridColumnSpan;
+  $xl?: GridColumnSpan;
+};
+
+const colAt = (
+  responsive: GridResponsive,
+  minWidth: number,
+  size?: GridColumnSpan
+) =>
+  size &&
+  css`
+    ${breakpoint(responsive, minWidth)} {
+      ${colSize(size)}
+    }
+  `;
+
+export const ColStyled = styled.div<ColStyledProps>`
+  box-sizing: border-box;
+  min-width: 0;
+  ${({ $xs }) => colSize($xs)}
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  ${({ $responsive, $sm }) => colAt($responsive, 576, $sm)}
+  ${({ $responsive, $md }) => colAt($responsive, 768, $md)}
+  ${({ $responsive, $lg }) => colAt($responsive, 992, $lg)}
+  ${({ $responsive, $xl }) => colAt($responsive, 1200, $xl)}
+`;

package/src/grid/container/container.css

@@ -1,5 +1,5 @@
 .container {
   width: 100%;
   margin: 0 auto;
-  padding: 0 15px;
-}
+  box-sizing: border-box;
+}