kelt-ui-kit-react 2.1.8 → 2.1.9

package/src/damier/damierEditor/damierEditorCell/DamierEditorCell.tsx

@@ -0,0 +1,91 @@
+import { DragEvent } from "react";
+import { Icon } from "../../../icon/Icon";
+import { DamierCellInterface } from "../../damierCell/damierCell.interface";
+
+interface DamierEditorCellProps {
+  position: number;
+  cell?: DamierCellInterface;
+  dragging?: boolean;
+  dragOver?: boolean;
+  disabled?: boolean;
+  onDragStart: (position: number) => void;
+  onDragEnd: () => void;
+  onDragOver: (position: number) => void;
+  onDrop: (from: number, to: number) => void;
+  onClick: (position: number, cell?: DamierCellInterface) => void;
+  onDelete?: (cell: DamierCellInterface) => void;
+}
+
+// Emplacement du damier en édition : cible de dépôt, et source de glisser si une case l'occupe
+export const DamierEditorCell = ({
+  position,
+  cell,
+  dragging = false,
+  dragOver = false,
+  disabled = false,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDrop,
+  onClick,
+  onDelete,
+}: DamierEditorCellProps) => {
+  const handleDragStart = (e: DragEvent<HTMLDivElement>) => {
+    e.dataTransfer.setData("text/plain", String(position));
+    e.dataTransfer.effectAllowed = "move";
+    onDragStart(position);
+  };
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    onDragOver(position);
+  };
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const from = Number(e.dataTransfer.getData("text/plain"));
+    if (from) onDrop(from, position);
+  };
+  const classNames = [
+    "damier-editor-cell",
+    cell ? "" : "damier-editor-cell--empty",
+    dragging ? "damier-editor-cell--dragging" : "",
+    dragOver ? "damier-editor-cell--over" : "",
+  ].join(" ");
+
+  return (
+    <div
+      className={classNames}
+      draggable={!!cell && !disabled}
+      title={cell ? cell.label : "Ajouter une case"}
+      onDragStart={handleDragStart}
+      onDragEnd={onDragEnd}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onClick={() => !disabled && onClick(position, cell)}
+    >
+      {cell ? (
+        <>
+          <div className="damier-editor-cell-content">
+            {cell.child ?? <span>{cell.label}</span>}
+          </div>
+          {onDelete && !disabled && (
+            <button
+              type="button"
+              className="damier-editor-cell-delete"
+              aria-label="Supprimer la case"
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete(cell);
+              }}
+            >
+              <Icon classIcon="bi-x-lg" />
+            </button>
+          )}
+        </>
+      ) : (
+        <Icon classIcon="bi-plus-lg damier-editor-cell-add" />
+      )}
+    </div>
+  );
+};

package/src/damier/damierEditor/damierEditorToolbar/DamierEditorToolbar.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { Button } from "../../../button/Button";
+import { TypeInputEnum } from "../../../form/form.enum";
+import { Input } from "../../../form/input/Input";
+import { DamierPageInterface } from "../../damierPage/damierPage.interface";
+
+interface DamierEditorToolbarProps {
+  page: DamierPageInterface;
+  disabled?: boolean;
+  canAddCell: boolean;
+  onChangeDimension: (cols: number, rows: number) => void;
+  onAddCell: () => void;
+}
+
+// Dimension de la page courante (colonnes x lignes) et ajout rapide d'une case
+export const DamierEditorToolbar = ({
+  page,
+  disabled = false,
+  canAddCell,
+  onChangeDimension,
+  onAddCell,
+}: DamierEditorToolbarProps) => {
+  const [cols, setCols] = useState(page.cols);
+  const [rows, setRows] = useState(page.rows);
+  useEffect(() => {
+    setCols(page.cols);
+    setRows(page.rows);
+  }, [page.id, page.cols, page.rows]);
+  const changed = cols !== page.cols || rows !== page.rows;
+
+  return (
+    <div className="damier-editor-toolbar">
+      <label className="damier-editor-dimension">
+        Colonnes
+        <Input
+          id="damier-editor-cols"
+          name="damier-editor-cols"
+          type={TypeInputEnum.NUMBER}
+          value={cols}
+          disabled={disabled}
+          disabledDebounce
+          onChange={(e) => setCols(Number(e.target.value))}
+        />
+      </label>
+      <label className="damier-editor-dimension">
+        Lignes
+        <Input
+          id="damier-editor-rows"
+          name="damier-editor-rows"
+          type={TypeInputEnum.NUMBER}
+          value={rows}
+          disabled={disabled}
+          disabledDebounce
+          onChange={(e) => setRows(Number(e.target.value))}
+        />
+      </label>
+      <Button
+        title="Appliquer la dimension"
+        classIcon="bi-aspect-ratio"
+        disabled={disabled || !changed}
+        onClick={() => onChangeDimension(cols, rows)}
+      />
+      <Button
+        title="Ajouter une case"
+        classIcon="bi-plus-square"
+        disabled={disabled || !canAddCell}
+        onClick={onAddCell}
+      />
+    </div>
+  );
+};

package/src/damier/damierEditor/damierEditorTree/DamierEditorTree.tsx

@@ -0,0 +1,134 @@
+import { useMemo, useState } from "react";
+import { Button } from "../../../button/Button";
+import { Input } from "../../../form/input/Input";
+import { DamierPageInterface } from "../../damierPage/damierPage.interface";
+import { buildDamierTree } from "../../utils/buildDamierTree";
+import { findDamierTreePath } from "../../utils/findDamierTreePath";
+import { DamierEditorTreeNode } from "./damierEditorTreeNode/DamierEditorTreeNode";
+
+interface DamierEditorTreeProps {
+  pages: DamierPageInterface[];
+  currentPageId: number;
+  rootPageId?: number;
+  disabled?: boolean;
+  onSelect: (page: DamierPageInterface) => void;
+  /** Sans callback, le champ d'ajout de page est masqué */
+  onAdd?: (title: string) => void;
+  onDelete?: (page: DamierPageInterface) => void;
+}
+
+// Arborescence des pages (à gauche du damier) + recherche, ajout et suppression de page
+export const DamierEditorTree = ({
+  pages,
+  currentPageId,
+  rootPageId,
+  disabled = false,
+  onSelect,
+  onAdd,
+  onDelete,
+}: DamierEditorTreeProps) => {
+  const [title, setTitle] = useState("");
+  const [search, setSearch] = useState("");
+  const tree = useMemo(
+    () => buildDamierTree(pages, rootPageId),
+    [pages, rootPageId],
+  );
+  const activePath = useMemo(
+    () => findDamierTreePath(tree, currentPageId),
+    [tree, currentPageId],
+  );
+  const term = search.trim().toLocaleLowerCase();
+  const results = term
+    ? pages.filter((page) => page.title.toLocaleLowerCase().includes(term))
+    : [];
+  const currentPage = pages.find((page) => page.id === currentPageId);
+  const add = () => {
+    if (!title.trim() || !onAdd) return;
+    onAdd(title.trim());
+    setTitle("");
+  };
+
+  return (
+    <nav className="damier-tree" aria-label="Pages du damier">
+      <div className="damier-tree-actions">
+        {onAdd && (
+          <>
+            <Input
+              id="damier-editor-page-title"
+              name="damier-editor-page-title"
+              placeholder="Nouvelle page"
+              value={title}
+              disabled={disabled}
+              disabledDebounce
+              onChange={(e) => setTitle(e.target.value)}
+              handleKeyDown={(e) => e.key === "Enter" && add()}
+            />
+            <Button
+              title=""
+              classIcon="bi-plus-lg"
+              disabled={disabled || !title.trim()}
+              onClick={add}
+            />
+          </>
+        )}
+        {onDelete && currentPage && pages.length > 1 && (
+          <Button
+            title=""
+            classIcon="bi-trash"
+            className="damier-editor-danger"
+            disabled={disabled}
+            onClick={() => onDelete(currentPage)}
+          />
+        )}
+      </div>
+      <Input
+        id="damier-editor-page-search"
+        name="damier-editor-page-search"
+        placeholder="Rechercher une page"
+        value={search}
+        disabledDebounce
+        showClearButton
+        onChange={(e) => setSearch(e.target.value)}
+      />
+      <div className="damier-tree-list">
+        {term ? (
+          <ul>
+            {results.map((page) => (
+              <li key={page.id}>
+                <div
+                  className={`damier-tree-item ${
+                    page.id === currentPageId ? "damier-tree-item--active" : ""
+                  }`}
+                >
+                  <button
+                    type="button"
+                    className="damier-tree-label"
+                    title={page.title}
+                    onClick={() => onSelect(page)}
+                  >
+                    {page.title}
+                  </button>
+                </div>
+              </li>
+            ))}
+            {!results.length && (
+              <li className="damier-tree-empty">Aucune page</li>
+            )}
+          </ul>
+        ) : (
+          <ul role="tree">
+            {tree.map((node) => (
+              <DamierEditorTreeNode
+                key={node.page.id}
+                node={node}
+                currentPageId={currentPageId}
+                activePath={activePath}
+                onSelect={onSelect}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+    </nav>
+  );
+};

package/src/damier/damierEditor/damierEditorTree/damierEditorTreeNode/DamierEditorTreeNode.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import { Icon } from "../../../../icon/Icon";
+import { DamierPageInterface } from "../../../damierPage/damierPage.interface";
+import { DamierTreeNodeInterface } from "../damierTreeNode.interface";
+
+interface DamierEditorTreeNodeProps {
+  node: DamierTreeNodeInterface;
+  currentPageId: number;
+  activePath: number[];
+  depth?: number;
+  onSelect: (page: DamierPageInterface) => void;
+}
+
+export const DamierEditorTreeNode = ({
+  node,
+  currentPageId,
+  activePath,
+  depth = 0,
+  onSelect,
+}: DamierEditorTreeNodeProps) => {
+  const inActivePath = activePath.includes(node.page.id);
+  const [expanded, setExpanded] = useState(depth === 0 || inActivePath);
+  // On déplie automatiquement le chemin vers la page sélectionnée
+  useEffect(() => {
+    if (inActivePath) setExpanded(true);
+  }, [inActivePath]);
+  const hasChildren = node.children.length > 0;
+  const active = node.page.id === currentPageId;
+
+  return (
+    <li
+      role="treeitem"
+      aria-expanded={hasChildren ? expanded : undefined}
+      aria-selected={active}
+    >
+      <div
+        className={`damier-tree-item ${active ? "damier-tree-item--active" : ""}`}
+        style={{ paddingLeft: `${depth * 0.9}rem` }}
+      >
+        <button
+          type="button"
+          className="damier-tree-toggle"
+          aria-label={expanded ? "Replier" : "Déplier"}
+          disabled={!hasChildren}
+          onClick={() => setExpanded(!expanded)}
+        >
+          {hasChildren && (
+            <Icon
+              classIcon={expanded ? "bi-chevron-down" : "bi-chevron-right"}
+            />
+          )}
+        </button>
+        <button
+          type="button"
+          className="damier-tree-label"
+          title={node.page.title}
+          onClick={() => onSelect(node.page)}
+        >
+          {node.page.title}
+        </button>
+      </div>
+      {hasChildren && expanded && (
+        <ul role="group">
+          {node.children.map((child) => (
+            <DamierEditorTreeNode
+              key={child.page.id}
+              node={child}
+              currentPageId={currentPageId}
+              activePath={activePath}
+              depth={depth + 1}
+              onSelect={onSelect}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+};

package/src/damier/damierEditor/damierEditorTree/damierTreeNode.interface.ts

@@ -0,0 +1,6 @@
+import { DamierPageInterface } from "../../damierPage/damierPage.interface";
+
+export interface DamierTreeNodeInterface {
+  page: DamierPageInterface;
+  children: DamierTreeNodeInterface[];
+}

package/src/damier/damierEditor/maybePromise.interface.ts

@@ -0,0 +1 @@
+export type MaybePromise<T> = T | Promise<T>;

package/src/damier/damierPage/damierPage.interface.tsx

@@ -0,0 +1,9 @@
+import { DamierCellInterface } from "../damierCell/damierCell.interface";
+
+export interface DamierPageInterface {
+  id: number;
+  title: string;
+  cols: number;
+  rows: number;
+  cells: DamierCellInterface[];
+}

package/src/damier/utils/buildDamierTree.ts

@@ -0,0 +1,31 @@
+import { DamierTreeNodeInterface } from "../damierEditor/damierEditorTree/damierTreeNode.interface";
+import { DamierPageInterface } from "../damierPage/damierPage.interface";
+
+// Arborescence des pages à partir des liens des cases (ordre des positions).
+// Chaque page n'apparaît qu'une fois (premier chemin trouvé, pas de cycle) ;
+// les pages non atteignables depuis la racine deviennent des racines à leur tour.
+export const buildDamierTree = (
+  pages: DamierPageInterface[],
+  rootPageId?: number,
+): DamierTreeNodeInterface[] => {
+  const byId = new Map(pages.map((page) => [page.id, page]));
+  const visited = new Set<number>();
+  const build = (page: DamierPageInterface): DamierTreeNodeInterface => {
+    visited.add(page.id);
+    const children: DamierPageInterface[] = [];
+    [...page.cells]
+      .sort((a, b) => (a.position ?? 0) - (b.position ?? 0))
+      .forEach((cell) => {
+        const child = cell.linkPageId ? byId.get(cell.linkPageId) : undefined;
+        if (child && !visited.has(child.id)) {
+          visited.add(child.id);
+          children.push(child);
+        }
+      });
+    return { page, children: children.map(build) };
+  };
+  const root =
+    (rootPageId !== undefined ? byId.get(rootPageId) : undefined) ?? pages[0];
+  const ordered = root ? [root, ...pages.filter((p) => p !== root)] : pages;
+  return ordered.flatMap((page) => (visited.has(page.id) ? [] : [build(page)]));
+};

package/src/damier/utils/createDefaultDamierPage.ts

@@ -0,0 +1,10 @@
+import { DamierPageInterface } from "../damierPage/damierPage.interface";
+import { DAMIER_DEFAULT_SIZE } from "./damierDefaultSize";
+
+// Page initiale utilisée quand aucun damier n'est fourni au composant
+export const createDefaultDamierPage = (
+  cols = DAMIER_DEFAULT_SIZE,
+  rows = DAMIER_DEFAULT_SIZE,
+  id = -1,
+  title = "Sommaire",
+): DamierPageInterface => ({ id, title, cols, rows, cells: [] });

package/src/damier/utils/damierDefaultSize.ts

@@ -0,0 +1 @@
+export const DAMIER_DEFAULT_SIZE = 9;

package/src/damier/utils/findDamierTreePath.ts

@@ -0,0 +1,14 @@
+import { DamierTreeNodeInterface } from "../damierEditor/damierEditorTree/damierTreeNode.interface";
+
+// Ids des pages ancêtres (incluse) menant à `pageId`, vide si absente de l'arbre
+export const findDamierTreePath = (
+  nodes: DamierTreeNodeInterface[],
+  pageId: number,
+): number[] => {
+  for (const node of nodes) {
+    if (node.page.id === pageId) return [node.page.id];
+    const path = findDamierTreePath(node.children, pageId);
+    if (path.length) return [node.page.id, ...path];
+  }
+  return [];
+};

package/src/damier/utils/getFirstFreePosition.ts

@@ -0,0 +1,12 @@
+import { DamierPageInterface } from "../damierPage/damierPage.interface";
+
+// Première position libre (base 1) de la page, undefined si la page est pleine
+export const getFirstFreePosition = (
+  page: DamierPageInterface,
+): number | undefined => {
+  const taken = new Set(page.cells.map((cell) => cell.position));
+  for (let position = 1; position <= page.cols * page.rows; position++) {
+    if (!taken.has(position)) return position;
+  }
+  return undefined;
+};

package/src/damier/utils/moveDamierCell.ts

@@ -0,0 +1,13 @@
+import { DamierCellInterface } from "../damierCell/damierCell.interface";
+
+// Déplace la case de `from` vers `to` ; si `to` est occupée, les deux cases sont échangées.
+export const moveDamierCell = (
+  cells: DamierCellInterface[],
+  from: number,
+  to: number,
+): DamierCellInterface[] =>
+  cells.map((cell) => {
+    if (cell.position === from) return { ...cell, position: to };
+    if (cell.position === to) return { ...cell, position: from };
+    return cell;
+  });

package/src/dataTable/DataTable.tsx

@@ -521,9 +521,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
       <DataTableFilters currentFilters={tableState.filters} setCurrentFilters={tableState.setFilters} />
-      {showMobileCardView && columns.some((column) => column.filterable || column.sortable) && (
+      {showMobileCardView && columns.some((column) => column.filterable) && (
         <div className="data-table-mobile-controls">
-          {columns.filter((column) => column.filterable || column.sortable).map((column, idx) => (
+          {columns.filter((column) => column.filterable).map((column, idx) => (
             <div key={column.id}>
               <table><thead><tr><DataTableColumn column={column} idx={idx}
                 isFilterVisible={tableState.visibleFilters.has(column.name ?? column.id)}

package/src/docs/catalog.ts

@@ -23,7 +23,7 @@ export const catalog: Record<string, { category: Category; description: string;
   "/expands": { category: "Affichage", icon: "arrows-expand", description: "Deplier des sections et organiser des contenus denses." },
   "/grid": { category: "Affichage", icon: "grid-3x3", description: "Construire une mise en page avec des colonnes responsives." },
   "/card": { category: "Affichage", icon: "card-heading", description: "Regrouper contenu, informations et actions dans une carte." },
-  "/damier": { category: "Affichage", icon: "grid", description: "Presenter des elements dans une grille de cellules." },
+  "/damier": { category: "Affichage", icon: "grid", description: "Presenter des elements dans une grille de cellules, et l'editer (pages, cases, glisser-deposer)." },
   "/carousel": { category: "Affichage", icon: "images", description: "Parcourir une collection de contenus." },
   "/badge": { category: "Affichage", icon: "patch-check", description: "Mettre en valeur un statut ou une information courte." },
   "/data-table": { category: "Affichage", icon: "table", description: "Afficher des donnees, selections, colonnes et actions." },

package/src/form/Form.tsx

@@ -23,6 +23,7 @@ import { Row } from "../grid/row/Row";
 import { GridBreakpoints, GridResponsive } from "../grid/grid.interface";
 import { TypeInputEnum } from "./form.enum";
 import { AddressSearch } from "../addressSearch/AddressSearch";
+import { getFieldError } from "./getFieldError";
 
 const euroFormatter = new Intl.NumberFormat("fr-FR", {
   style: "currency",
@@ -107,8 +108,34 @@ export const DynamicForm = forwardRef(
       return initialValues;
     });
 
+    const [errors, setErrors] = useState<Record<string, string | undefined>>(
+      {}
+    );
+
     const inputRefs = useRef<{ [key: string]: HTMLInputElement | null }>({});
 
+    /** Revalide le champ pendant la saisie uniquement s'il est déjà en erreur */
+    const revalidateField = useCallback(
+      (field: FormInterface, value: unknown) => {
+        setErrors((prevErrors) =>
+          prevErrors[field.name]
+            ? { ...prevErrors, [field.name]: getFieldError(field, value) }
+            : prevErrors
+        );
+      },
+      []
+    );
+
+    const validateField = useCallback(
+      (field: FormInterface, value: unknown) => {
+        setErrors((prevErrors) => ({
+          ...prevErrors,
+          [field.name]: getFieldError(field, value),
+        }));
+      },
+      []
+    );
+
     /** Gestion des <input> */
     const handleChangeInput = useCallback(
       (
@@ -116,11 +143,15 @@ export const DynamicForm = forwardRef(
         forminterface: FormInterface
       ) => {
         const { name, type, checked, value } = event.target;
-        const newValue = type === "checkbox" ? checked : value;
+        const newValue =
+          type === "checkbox"
+            ? checked
+            : (forminterface.formatOnChange?.(value) ?? value);
 
         if (forminterface.onChange) {
           forminterface.onChange(newValue, name);
         }
+        revalidateField(forminterface, newValue);
 
         setValues((prevValues) => {
           const updatedValues = { ...prevValues, [name]: newValue };
@@ -130,13 +161,14 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange]
+      [onChange, revalidateField]
     );
     const handleChangeTextArea = useCallback(
       (name: string, value: string, forminterface: FormInterface) => {
         if (forminterface.onChange) {
           forminterface.onChange(value, name);
         }
+        revalidateField(forminterface, value);
 
         setValues((prevValues) => {
           const updatedValues = { ...prevValues, [name]: value };
@@ -146,7 +178,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange]
+      [onChange, revalidateField]
     );
     /** Gestion des <select> */
     const handleChangeSelect = useCallback(
@@ -171,14 +203,31 @@ export const DynamicForm = forwardRef(
     const handleSubmit = useCallback(
       (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+        const submitErrors = formFields.reduce<
+          Record<string, string | undefined>
+        >((fieldErrors, field) => {
+          fieldErrors[field.name] = getFieldError(field, values[field.name]);
+          return fieldErrors;
+        }, {});
+        setErrors(submitErrors);
+        if (Object.values(submitErrors).some(Boolean)) {
+          const firstErrorField = formFields.find(
+            (field) => submitErrors[field.name]
+          );
+          if (firstErrorField) {
+            inputRefs.current[firstErrorField.name]?.focus();
+          }
+          return;
+        }
         if (onSubmit) {
           onSubmit(values);
         }
       },
-      [onSubmit, values]
+      [onSubmit, values, formFields]
     );
 
     const resetForm = () => {
+      setErrors({});
       setValues(() => {
         const resetValues: FormValuesInterface<T> =
           {} as FormValuesInterface<T>;
@@ -320,7 +369,8 @@ export const DynamicForm = forwardRef(
               >
                 <div
                   className={`d-flex flex-column ${v.className ?? ""
-                    } form-group form-group-${v.type}`}
+                    } form-group form-group-${v.type} ${errors[v.name] ? "form-group--error" : ""
+                    }`}
                 >
                   {v.label && <label>{v.label}</label>}
                   {v.icon && <Icon classIcon={v.icon} />}
@@ -351,12 +401,16 @@ export const DynamicForm = forwardRef(
                       required={required}
                       allowManualEntry
                       manualEntryLabel={v.addressSearch?.manualEntryLabel}
-                      onChange={(value) =>
-                        updateValues({ [v.name]: value } as FormValuesInterface<T>)
-                      }
+                      onChange={(value) => {
+                        revalidateField(v, value);
+                        updateValues({ [v.name]: value } as FormValuesInterface<T>);
+                      }}
                       onSelect={(address) => {
                         const mappedValues =
                           v.addressSearch?.mapAddress?.(address) ?? {};
+                        if (v.name in mappedValues) {
+                          revalidateField(v, mappedValues[v.name]);
+                        }
                         updateValues(mappedValues as FormValuesInterface<T>);
                         v.addressSearch?.onSelect?.(address);
                       }}
@@ -431,9 +485,15 @@ export const DynamicForm = forwardRef(
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                         handleChangeInput(e, v)
                       }
+                      onBlur={(e: React.FocusEvent<HTMLInputElement>) =>
+                        validateField(v, e.target.value)
+                      }
                       onInvalid={v.onInvalid ? v.onInvalid : undefined}
                     />
                   )}
+                  {mode !== "read" && errors[v.name] && (
+                    <small className="form-error">{errors[v.name]}</small>
+                  )}
                 </div>
               </FormFieldContainer>
             );