kelt-ui-kit-react 2.0.3 → 2.0.4

package/dist/tabs/Tabs.d.ts

@@ -14,6 +14,5 @@ export type TabsProps = {
     className?: string;
     tabClassName?: string;
     panelClassName?: string;
-    keepMountedVisited?: boolean;
 };
-export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, keepMountedVisited, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/toaster/store/useToasterStore.d.ts

@@ -12,6 +12,7 @@ type ToasterState = {
         severity?: "info" | "success" | "error" | "warning";
         duration?: number;
         children?: React.ReactNode;
+        close?: boolean;
     }) => void;
     hideToast: () => void;
 };

package/index.html

@@ -5,8 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
-    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite + React + TS</title>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/App.menu.tsx

@@ -1,5 +1,6 @@
 import { NavLink } from "react-router-dom";
 import { ActionView } from "./action/Action.view";
+import { AddressSearchView } from "./addressSearch/AddressSearch.view";
 import { BadgeView } from "./badge/Badge.view";
 import { ButtonView } from "./button/Button.view";
 import { ButtonFileView } from "./button/buttonFile/ButtonFile.view";
@@ -242,6 +243,13 @@ export const MenuList: MenuProps[] = [
     children: <NavLink to="/button-file">Button File</NavLink>,
     element: <ButtonFileView />,
   },
+  {
+    id: 30,
+    name: "Address search",
+    link: "/address-search",
+    children: <NavLink to="/address-search">Address search</NavLink>,
+    element: <AddressSearchView />,
+  },
 ];
 
 export const AppMenu = (): JSX.Element => {

package/src/addressSearch/AddressSearch.tsx

@@ -0,0 +1,246 @@
+import {
+    useCallback,
+    useEffect,
+    useId,
+    useRef,
+    useState,
+} from "react";
+import { Icon } from "../icon/Icon";
+import {
+    GeocodedAddress,
+    GeocodingProvider,
+} from "../geocoding/geocoding.interface";
+import { geocodingService } from "../geocoding/GeocodingService";
+import "./addressSearch.css";
+
+export interface AddressSearchProps {
+    id?: string;
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    minimumQueryLength?: number;
+    debounceTime?: number;
+    limit?: number;
+    provider?: GeocodingProvider;
+    allowManualEntry?: boolean;
+    manualEntryLabel?: string;
+    onChange?: (value: string) => void;
+    onManualEntry?: (addressLine: string) => void;
+    onSelect: (address: GeocodedAddress) => void;
+}
+
+export const AddressSearch = ({
+    id,
+    className,
+    label = "Rechercher une adresse",
+    placeholder = "Numéro, rue, code postal, ville",
+    value,
+    disabled = false,
+    minimumQueryLength = 3,
+    debounceTime = 300,
+    limit = 5,
+    provider = geocodingService,
+    allowManualEntry = true,
+    manualEntryLabel = "Je ne trouve pas mon adresse",
+    onChange,
+    onManualEntry,
+    onSelect,
+}: AddressSearchProps) => {
+    const generatedId = useId();
+    const inputId = id ?? `address-search-${generatedId}`;
+    const listboxId = `${inputId}-results`;
+    const [query, setQuery] = useState(value ?? "");
+    const [results, setResults] = useState<GeocodedAddress[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const requestRef = useRef<AbortController>();
+    const skipNextSearchRef = useRef(false);
+
+    useEffect(() => {
+        if (value !== undefined) setQuery(value);
+    }, [value]);
+
+    useEffect(() => {
+        const handlePointerDown = (event: PointerEvent) => {
+            if (!containerRef.current?.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, []);
+
+    useEffect(() => {
+        if (skipNextSearchRef.current) {
+            skipNextSearchRef.current = false;
+            return;
+        }
+
+        const normalizedQuery = query.trim();
+        if (normalizedQuery.length < minimumQueryLength || disabled) {
+            requestRef.current?.abort();
+            setResults([]);
+            setLoading(false);
+            setError(false);
+            setIsOpen(false);
+            return;
+        }
+
+        const timeout = window.setTimeout(async () => {
+            requestRef.current?.abort();
+            const controller = new AbortController();
+            requestRef.current = controller;
+            setLoading(true);
+            setError(false);
+
+            try {
+                const addresses = await provider.search(normalizedQuery, {
+                    limit,
+                    signal: controller.signal,
+                });
+                setResults(addresses);
+                setActiveIndex(-1);
+                setIsOpen(true);
+            } catch (requestError) {
+                if ((requestError as Error).name !== "AbortError") {
+                    setResults([]);
+                    setError(true);
+                    setIsOpen(true);
+                }
+            } finally {
+                if (!controller.signal.aborted) setLoading(false);
+            }
+        }, debounceTime);
+
+        return () => {
+            window.clearTimeout(timeout);
+            requestRef.current?.abort();
+        };
+    }, [debounceTime, disabled, limit, minimumQueryLength, provider, query]);
+
+    const selectAddress = useCallback(
+        (address: GeocodedAddress) => {
+            requestRef.current?.abort();
+            skipNextSearchRef.current = true;
+            setQuery(address.addressLine);
+            setResults([]);
+            setIsOpen(false);
+            setActiveIndex(-1);
+            onChange?.(address.addressLine);
+            onSelect(address);
+        },
+        [onChange, onSelect],
+    );
+
+    const selectManualAddress = useCallback(() => {
+        const addressLine = query.trim();
+        if (!addressLine) return;
+
+        requestRef.current?.abort();
+        skipNextSearchRef.current = true;
+        setQuery(addressLine);
+        setResults([]);
+        setIsOpen(false);
+        setActiveIndex(-1);
+        onChange?.(addressLine);
+        onManualEntry?.(addressLine);
+    }, [onChange, onManualEntry, query]);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (!isOpen || results.length === 0) return;
+
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex((index) => (index + 1) % results.length);
+        } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex((index) => (index <= 0 ? results.length - 1 : index - 1));
+        } else if (event.key === "Enter" && activeIndex >= 0) {
+            event.preventDefault();
+            selectAddress(results[activeIndex]);
+        } else if (event.key === "Escape") {
+            setIsOpen(false);
+        }
+    };
+
+    return (
+        <div ref={containerRef} className={`address-search ${className ?? ""}`}>
+            {label && <label htmlFor={inputId}>{label}</label>}
+            <div className="address-search-input">
+                <Icon classIcon="bi-geo-alt" />
+                <input
+                    id={inputId}
+                    type="search"
+                    role="combobox"
+                    aria-autocomplete="list"
+                    aria-expanded={isOpen}
+                    aria-controls={listboxId}
+                    aria-activedescendant={
+                        activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : undefined
+                    }
+                    autoComplete="off"
+                    disabled={disabled}
+                    value={query}
+                    placeholder={placeholder}
+                    onChange={(event) => {
+                        setQuery(event.target.value);
+                        onChange?.(event.target.value);
+                    }}
+                    onFocus={() => results.length > 0 && setIsOpen(true)}
+                    onKeyDown={handleKeyDown}
+                />
+                {loading && <span className="address-search-spinner" aria-hidden />}
+            </div>
+
+            {isOpen && (
+                <div className="address-search-results">
+                    <div id={listboxId} role="listbox">
+                        {error ? (
+                            <div className="address-search-status" role="alert">
+                                La recherche d'adresse est indisponible.
+                            </div>
+                        ) : results.length === 0 && !loading ? (
+                            <div className="address-search-status">Aucune adresse trouvée.</div>
+                        ) : (
+                            results.map((address, index) => (
+                                <button
+                                    id={`${inputId}-option-${index}`}
+                                    key={`${address.id}-${index}`}
+                                    type="button"
+                                    role="option"
+                                    aria-selected={activeIndex === index}
+                                    className={activeIndex === index ? "active" : ""}
+                                    onMouseDown={(event) => event.preventDefault()}
+                                    onMouseEnter={() => setActiveIndex(index)}
+                                    onClick={() => selectAddress(address)}
+                                >
+                                    <span>{address.addressLine}</span>
+                                    <small>
+                                        {address.postalCode} {address.city}
+                                    </small>
+                                </button>
+                            ))
+                        )}
+                    </div>
+                    {allowManualEntry && query.trim() && !loading && (
+                        <button
+                            type="button"
+                            className="address-search-manual"
+                            onMouseDown={(event) => event.preventDefault()}
+                            onClick={selectManualAddress}
+                        >
+                            <Icon classIcon="bi-pencil" />
+                            {manualEntryLabel}
+                        </button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/addressSearch/AddressSearch.view.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+import { DynamicForm } from "../form/Form";
+import { TypeInputEnum } from "../form/form.enum";
+import { FormInterface } from "../form/form.interface";
+
+export const AddressSearchView = () => {
+    const fields = useMemo<FormInterface[]>(
+        () => [
+            {
+                name: "adresse1",
+                label: "Adresse",
+                type: TypeInputEnum.ADDRESS,
+                value: "",
+                col: { xs: 12, md: 6 },
+                addressSearch: {
+                    mapAddress: (address) => ({
+                        adresse1: address.addressLine,
+                        codePostal: address.postalCode,
+                        ville: address.city,
+                        paysIso2: address.countryCode,
+                    }),
+                },
+            },
+            {
+                name: "codePostal",
+                label: "Code postal",
+                type: TypeInputEnum.TEXT,
+                value: "",
+                col: { xs: 12, md: 6 },
+            },
+            {
+                name: "ville",
+                label: "Ville",
+                type: TypeInputEnum.TEXT,
+                value: "",
+                col: { xs: 12, md: 6 },
+            },
+            {
+                name: "paysIso2",
+                label: "Pays",
+                type: TypeInputEnum.TEXT,
+                value: "FR",
+                col: { xs: 12, md: 6 },
+            },
+        ],
+        [],
+    );
+
+    return (
+        <DynamicForm initialForm={fields} hideSubmit />
+    );
+};

package/src/addressSearch/addressSearch.css

@@ -0,0 +1,133 @@
+.address-search {
+    position: relative;
+    width: 100%;
+
+    >label {
+        display: block;
+        padding-bottom: 0.15rem;
+        font-size: 0.85rem;
+        font-weight: 600;
+    }
+}
+
+.address-search-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    >.bi {
+        position: absolute;
+        left: 0.75rem;
+        z-index: 1;
+        color: var(--primary-color);
+    }
+
+    >input {
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        padding-left: 2.25rem;
+        padding-right: 2.25rem;
+    }
+}
+
+.address-search-spinner {
+    position: absolute;
+    right: 0.75rem;
+    width: 0.9rem;
+    height: 0.9rem;
+    border: 2px solid #dedede;
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: address-search-spin 0.7s linear infinite;
+}
+
+.address-search-results {
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    right: 0;
+    left: 0;
+    z-index: 20;
+    overflow: hidden;
+    border: 1px solid #cfbdbd;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
+
+    [role="listbox"] {
+        max-height: 15rem;
+        overflow-y: auto;
+    }
+
+    [role="listbox"]>button {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        max-height: none;
+        margin: 0;
+        padding: 0.65rem 0.75rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.2rem;
+        border: 0;
+        border-bottom: 1px solid #ece8e8;
+        border-radius: 0;
+        background: #fff;
+        color: inherit;
+        font-size: 0.85rem;
+        line-height: 1.3;
+        text-align: left;
+        overflow-wrap: anywhere;
+        cursor: pointer;
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        &:hover,
+        &.active {
+            background: color-mix(in srgb, var(--primary-color), white 92%);
+        }
+
+        >small {
+            color: #686868;
+        }
+    }
+}
+
+.address-search-manual {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-height: none;
+    margin: 0;
+    padding: 0.65rem 0.75rem;
+    align-items: center;
+    gap: 0.5rem;
+    border: 0;
+    border-top: 1px solid #dedede;
+    border-radius: 0;
+    background: #fff;
+    color: var(--primary-color);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+        background: color-mix(in srgb, var(--primary-color), white 92%);
+    }
+}
+
+.address-search-status {
+    padding: 0.75rem;
+    color: #686868;
+    font-size: 0.85rem;
+}
+
+@keyframes address-search-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/src/badge/Badge.tsx

@@ -6,17 +6,13 @@ export type BadgeInterface = {
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
   title?: string;
-  color?: string;
-  onRemove?: (e: React.MouseEvent) => void;
   sizeIcon?: IconSizeEnum;
   classIcon?: string;
 };
 export const Badge = ({
   className,
   onClick,
-  color,
   title,
-  onRemove,
   sizeIcon,
   classIcon,
 }: BadgeInterface) => {
@@ -29,14 +25,10 @@ export const Badge = ({
   return (
     <div
       onClick={handleClick}
-      style={{
-        ...(color ? { backgroundColor: color } : {}),
-      }}
-      className={`badge ${className ? className : ""} ${onRemove && "cursor-pointer"}`}
+      className={`badge ${className ? className : ""}`}
     >
       {classIcon && <Icon size={sizeIcon} classIcon={classIcon}></Icon>}
       <span>{title}</span>
-      {onRemove && <Icon classIcon="bi-x" onClick={onRemove} />}
     </div>
   );
 };

package/src/badge/badge.css

@@ -15,10 +15,6 @@
     font-size: 0.8rem;
     margin-right: 0.25rem;
   }
-  .bi-x {
-    font-size: 1rem;
-    margin-right: 0;
-  }
   &.badge-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);

package/src/button/Button.tsx

@@ -13,8 +13,9 @@ export const Button = ({
   classIcon,
   positionicon = 1,
   disabled = false,
+  style,
 }: ButtonInterface) => {
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (onClick) {
       onClick(e);
@@ -28,6 +29,7 @@ export const Button = ({
       type="submit"
       onClick={(e) => handleClick(e)}
       className={className}
+      style={style}
     >
       {badge && <Badge {...badge} />}
       {classIcon && positionicon == 1 && (

package/src/button/button.css

@@ -5,7 +5,7 @@ button {
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
   transition: background-color 0.3s;
   display: flex;
@@ -14,7 +14,7 @@ button {
   position: relative;
   align-items: center;
   justify-content: center;
-  font-family: "Raleway", sans-serif !important;
+  font-family: "Lexend", sans-serif;
   .badge {
     position: absolute;
     right: 10px;

package/src/button/button.interface.tsx

@@ -5,12 +5,13 @@ export interface ButtonInterface {
   className?: string;
   badge?: BadgeInterface;
   id?: string;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onClick?: (e: React.MouseEvent) => void;
   title: string;
   classIcon?: string;
   positionicon?: number;
   disabled?: boolean;
   sizeIcon?: IconSizeEnum;
+  style?: React.CSSProperties;
 }
 export interface buttonActionInterface {
   icon?: string;

package/src/card/Card.tsx

@@ -1,10 +1,12 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Icon } from "../icon/Icon";
 import { PositionOverlay } from "../overlayPanel/OverlayPanel";
 import "./card.css";
 import { CardInterface } from "./card.interface";
 import { CardActionInterface } from "./cardAction.interface";
 import { CardAction } from "./cardAction/CardAction";
+import { GridInterface, GridResponsive } from "../grid/grid.interface";
+import { Grid } from "../grid/Grid";
 type CardProps = {
   item: CardInterface;
   actions?: CardActionInterface[];
@@ -14,6 +16,8 @@ type CardProps = {
   children?: JSX.Element;
   customAction?: JSX.Element;
   positionOverlay?: PositionOverlay;
+  /** Largeur sur laquelle se basent les breakpoints du footer, défaut : "app" */
+  responsive?: GridResponsive;
 };
 
 // Composant Card modifié
@@ -25,6 +29,7 @@ export const Card = ({
   onClose,
   customAction,
   positionOverlay,
+  responsive = "app",
   children,
 }: CardProps): JSX.Element => {
   const [cliqueAction, setCliqueAction] = useState(false);
@@ -69,14 +74,38 @@ export const Card = ({
       cliqueAction,
     ]
   );
+  const customeActionGrid: GridInterface[] = useMemo(() => {
+    return customAction ? [
+      {
+        xs: 12,
+        md: 6,
+        children: (
+          <div className="card-custom-action">{customAction}</div>
+        ),
+      }
+    ] : [];
+  }, [customAction]);
 
+  const footerGrid: GridInterface[] = useMemo(() => {
+    return [
+      ...customeActionGrid,
+      {
+        xs: 12,
+        md: customAction ? 6 : 12,
+        children: (
+          <div className="d-flex flex-1 align-items-center">
+            {item.prix && <div className="card-prix">{item.prix}</div>}
+          </div>
+        ),
+      },
+    ];
+  }, [customAction, item.prix]);
   return (
     <div
       onContextMenu={(e) => e.preventDefault()}
       onMouseDown={(e) => onClickCard(e, item)}
-      className={`card ${className ?? ""} ${
-        cliqueAction ? "card--active" : ""
-      } `}
+      className={`card ${className ?? ""} ${cliqueAction ? "card--active" : ""
+        } `}
     >
       {children}
       {!children && (
@@ -92,14 +121,11 @@ export const Card = ({
               <div className="card-content">{item.description}</div>
             )}
           </div>
-          <div className="card-footer">
-            {customAction && (
-              <div className="card-custom-action">{customAction}</div>
-            )}
-            <div className="d-flex flex-1 align-items-center">
-              {item.prix && <div className="card-prix">{item.prix}</div>}
+          {footerGrid.length > 0 && (
+            <div className="card-footer">
+              <Grid items={footerGrid} responsive={responsive} />
             </div>
-          </div>
+          )}
           {onClose && (
             <div
               className="ml-2 cursor-pointer"