kelt-ui-kit-react 2.1.8 → 2.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "private": false,
   "repository": {
     "type": "git",

package/src/damier/Damier.tsx

@@ -49,7 +49,7 @@ export const Damier = ({
       );
     }
     return rowsArray;
-  }, [nbCols, nbRows, currentPage]);
+  }, [nbCols, nbRows, currentPage, damierCells, onClick]);
 
   const damierStyle = useMemo(
     () => ({ "--rows": String(nbRows) }) as CSSProperties,

package/src/damier/Damier.view.tsx

@@ -2,9 +2,12 @@ import { useState } from "react";
 import { Button } from "../button/Button";
 import { Damier } from "./Damier";
 import { DamierCellInterface } from "./damierCell/damierCell.interface";
+import { DamierEditor } from "./damierEditor/DamierEditor";
+import { DamierPageInterface } from "./damierPage/damierPage.interface";
 
 export const DamierView = () => {
   const [page, setPage] = useState(1);
+  const [lastAction, setLastAction] = useState("");
   const items: DamierCellInterface[] = [
     {
       position: 2,
@@ -19,13 +22,56 @@ export const DamierView = () => {
       child: <div>82</div>,
     },
   ];
+  // État stable : un nouveau tableau à chaque rendu réinitialiserait l'éditeur
+  const [pages] = useState<DamierPageInterface[]>(() => [
+    {
+      id: 1,
+      title: "Sommaire",
+      cols: 6,
+      rows: 4,
+      cells: [
+        { id: 1, position: 1, label: "Accessoires", linkPageId: 2 },
+        { id: 2, position: 2, label: "Cheveux", linkPageId: 3 },
+        { id: 3, position: 8, label: "Sacs" },
+      ],
+    },
+    {
+      id: 2,
+      title: "Accessoires",
+      cols: 6,
+      rows: 4,
+      cells: [{ id: 4, position: 1, label: "Chouchous", linkPageId: 4 }],
+    },
+    { id: 3, title: "Cheveux", cols: 6, rows: 4, cells: [] },
+    { id: 4, title: "Chouchous", cols: 6, rows: 4, cells: [] },
+    { id: 5, title: "Non associé", cols: 6, rows: 4, cells: [] },
+  ]);
 
   return (
     <>
+      <h3>Affichage</h3>
       <Button onClick={() => setPage(page - 1)} title="previous" />
       <Button onClick={() => setPage(page + 1)} title="next" />
 
       <Damier damierCells={items} page={page} />
+
+      <h3>Édition (glisser-déposer)</h3>
+      <p>{lastAction || "Glissez une case, cliquez sur un emplacement vide..."}</p>
+      <DamierEditor
+        pages={pages}
+        onAddPage={(added) => setLastAction(`Page ajoutée : ${added.title}`)}
+        onAddCell={(cell) => setLastAction(`Case ajoutée en ${cell.position}`)}
+        onMoveCells={(cells) =>
+          setLastAction(
+            `Déplacement : ${cells.map((c) => `${c.label} → ${c.position}`).join(", ")}`,
+          )
+        }
+        onClickCell={(cell) => setLastAction(`Clic sur ${cell.label}`)}
+        onDeleteCell={(cell) => setLastAction(`Case supprimée : ${cell.label}`)}
+      />
+
+      <h3>Édition avec init par défaut</h3>
+      <DamierEditor defaultCols={5} defaultRows={3} />
     </>
   );
 };

package/src/damier/damierCell/DamierCell.tsx

@@ -12,7 +12,7 @@ export const DamierCell = ({ cell, onClick }: DamierCellProps) => {
   };
   return (
     <div className="cell" onClick={handleClick}>
-      {cell.child}
+      {cell.child ?? cell.label}
     </div>
   );
 };

package/src/damier/damierCell/damierCell.interface.tsx

@@ -1,5 +1,8 @@
 export interface DamierCellInterface {
   child?: JSX.Element;
+  label?: string;
   position?: number;
   id?: number;
+  /** Page ouverte par la case : sert à construire l'arborescence des pages */
+  linkPageId?: number;
 }

package/src/damier/damierEditor/DamierEditor.tsx

@@ -0,0 +1,346 @@
+import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
+import { DamierCellInterface } from "../damierCell/damierCell.interface";
+import { DamierPageInterface } from "../damierPage/damierPage.interface";
+import { createDefaultDamierPage } from "../utils/createDefaultDamierPage";
+import { DAMIER_DEFAULT_SIZE } from "../utils/damierDefaultSize";
+import { getFirstFreePosition } from "../utils/getFirstFreePosition";
+import { moveDamierCell } from "../utils/moveDamierCell";
+import { DamierEditorCell } from "./damierEditorCell/DamierEditorCell";
+import { DamierEditorTree } from "./damierEditorTree/DamierEditorTree";
+import { DamierEditorToolbar } from "./damierEditorToolbar/DamierEditorToolbar";
+import "./damierEditor.css";
+import { MaybePromise } from "./maybePromise.interface";
+
+export type DamierEditorProps = {
+  /** Pages du damier ; sans valeur, le composant démarre sur une page "Sommaire" vide */
+  pages?: DamierPageInterface[];
+  /** Page affichée (contrôlée) */
+  currentPageId?: number;
+  /** Masque le champ d'ajout de page de l'arborescence (ajout géré par le parent) */
+  hideAddPage?: boolean;
+  /** Racine de l'arborescence des pages (ex. sommaire), la première page par défaut */
+  rootPageId?: number;
+  /** Dimension de la page créée par défaut, 9 x 9 par défaut */
+  defaultCols?: number;
+  defaultRows?: number;
+  /** Dimension maximale autorisée (colonnes et lignes), 30 par défaut */
+  maxSize?: number;
+  className?: string;
+  onChangePage?: (page: DamierPageInterface) => void;
+  /** Retourner la page enregistrée (id définitif) pour remplacer l'id temporaire (négatif) */
+  onAddPage?: (
+    page: DamierPageInterface,
+  ) => MaybePromise<DamierPageInterface | void>;
+  /** Sans callback, la suppression de page n'est pas proposée */
+  onDeletePage?: (page: DamierPageInterface) => MaybePromise<void>;
+  onChangeDimension?: (
+    page: DamierPageInterface,
+  ) => MaybePromise<DamierPageInterface | void>;
+  /** Retourner la case enregistrée (id définitif) pour remplacer l'id temporaire (négatif) */
+  onAddCell?: (
+    cell: DamierCellInterface,
+    page: DamierPageInterface,
+  ) => MaybePromise<DamierCellInterface | void>;
+  /** Cases dont la position a changé (2 cases en cas d'échange) */
+  onMoveCells?: (
+    cells: DamierCellInterface[],
+    page: DamierPageInterface,
+  ) => MaybePromise<void>;
+  /** Sans callback, la suppression de case n'est pas proposée */
+  onDeleteCell?: (
+    cell: DamierCellInterface,
+    page: DamierPageInterface,
+  ) => MaybePromise<void>;
+  onClickCell?: (cell: DamierCellInterface, page: DamierPageInterface) => void;
+};
+
+export const DamierEditor = ({
+  pages: initialPages,
+  currentPageId,
+  rootPageId,
+  hideAddPage = false,
+  defaultCols = DAMIER_DEFAULT_SIZE,
+  defaultRows = DAMIER_DEFAULT_SIZE,
+  maxSize = 30,
+  className = "",
+  onChangePage,
+  onAddPage,
+  onDeletePage,
+  onChangeDimension,
+  onAddCell,
+  onMoveCells,
+  onDeleteCell,
+  onClickCell,
+}: DamierEditorProps) => {
+  const [pages, setPages] = useState<DamierPageInterface[]>(() =>
+    initialPages?.length
+      ? initialPages
+      : [createDefaultDamierPage(defaultCols, defaultRows)],
+  );
+  const [activeId, setActiveId] = useState<number>(
+    currentPageId ?? rootPageId ?? pages[0].id,
+  );
+  const [dragFrom, setDragFrom] = useState<number>();
+  const [dragOver, setDragOver] = useState<number>();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  // Ids temporaires négatifs pour les éléments pas encore enregistrés (-1 = page par défaut)
+  const tempId = useRef(-1);
+  const nextTempId = () => --tempId.current;
+  const propsRef = useRef(initialPages);
+  propsRef.current = initialPages;
+
+  useEffect(() => {
+    if (initialPages?.length) setPages(initialPages);
+  }, [initialPages]);
+  useEffect(() => {
+    if (currentPageId !== undefined) setActiveId(currentPageId);
+  }, [currentPageId]);
+
+  // Page active introuvable (pages rechargées, page par défaut remplacée...) : on revient à la racine
+  const page =
+    pages.find((item) => item.id === activeId) ??
+    pages.find((item) => item.id === rootPageId) ??
+    pages[0];
+  const freePosition = getFirstFreePosition(page);
+
+  const replacePage = (id: number, next: DamierPageInterface) => {
+    setPages((prev) => prev.map((item) => (item.id === id ? next : item)));
+    setActiveId((current) => (current === id ? next.id : current));
+  };
+
+  // Applique la modification localement, appelle l'API puis annule en cas d'échec
+  const run = async (
+    optimistic: DamierPageInterface[],
+    action: () => MaybePromise<void>,
+  ) => {
+    const previous = pages;
+    const propsAtStart = propsRef.current;
+    setPages(optimistic);
+    setBusy(true);
+    setError("");
+    try {
+      await action();
+    } catch (e) {
+      console.error("Damier : enregistrement impossible", e);
+      // Si le parent a rechargé les pages entre-temps, elles font foi
+      const reloaded = propsRef.current;
+      setPages(
+        reloaded?.length && reloaded !== propsAtStart ? reloaded : previous,
+      );
+      setError("La modification n'a pas pu être enregistrée.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // Une page temporaire (ex. page par défaut) est enregistrée avant d'y ajouter quoi que ce soit
+  const persistPage = async (
+    target: DamierPageInterface,
+  ): Promise<DamierPageInterface> => {
+    if (target.id >= 0 || !onAddPage) return target;
+    const saved = await onAddPage(target);
+    if (!saved) return target;
+    const next = { ...saved, cells: target.cells };
+    replacePage(target.id, next);
+    return next;
+  };
+
+  const selectPage = (next: DamierPageInterface) => {
+    setActiveId(next.id);
+    onChangePage?.(next);
+  };
+
+  const addPage = (title: string) => {
+    const created = createDefaultDamierPage(
+      page.cols,
+      page.rows,
+      nextTempId(),
+      title,
+    );
+    setActiveId(created.id);
+    run([...pages, created], async () => {
+      const saved = await onAddPage?.(created);
+      if (saved) replacePage(created.id, { ...saved, cells: [] });
+    });
+  };
+
+  const deletePage = (target: DamierPageInterface) => {
+    const remaining = pages.filter((item) => item.id !== target.id);
+    setActiveId(remaining[0].id);
+    run(remaining, async () => {
+      if (target.id >= 0) await onDeletePage?.(target);
+    });
+  };
+
+  const changeDimension = (cols: number, rows: number) => {
+    if (
+      !Number.isInteger(cols) ||
+      !Number.isInteger(rows) ||
+      cols < 1 ||
+      rows < 1 ||
+      cols > maxSize ||
+      rows > maxSize
+    ) {
+      setError(`La dimension doit être comprise entre 1 et ${maxSize}.`);
+      return;
+    }
+    const lastPosition = Math.max(0, ...page.cells.map((c) => c.position ?? 0));
+    if (cols * rows < lastPosition) {
+      setError(
+        "Impossible de réduire le damier : des cases sont placées au-delà de la nouvelle dimension.",
+      );
+      return;
+    }
+    const updated = { ...page, cols, rows };
+    run(
+      pages.map((item) => (item.id === page.id ? updated : item)),
+      async () => {
+        const persisted = await persistPage(updated);
+        if (persisted.id === updated.id) {
+          const saved = await onChangeDimension?.(updated);
+          if (saved)
+            replacePage(updated.id, { ...saved, cells: updated.cells });
+        }
+      },
+    );
+  };
+
+  const addCell = (position: number) => {
+    const cell: DamierCellInterface = {
+      id: nextTempId(),
+      position,
+      label: "Nouvelle case",
+    };
+    const updated = { ...page, cells: [...page.cells, cell] };
+    run(
+      pages.map((item) => (item.id === page.id ? updated : item)),
+      async () => {
+        const persisted = await persistPage(updated);
+        const saved = await onAddCell?.(cell, persisted);
+        if (!saved) return;
+        setPages((prev) =>
+          prev.map((item) =>
+            item.id !== persisted.id
+              ? item
+              : {
+                  ...item,
+                  cells: item.cells.map((c) => (c.id === cell.id ? saved : c)),
+                },
+          ),
+        );
+      },
+    );
+  };
+
+  const moveCell = (from: number, to: number) => {
+    setDragFrom(undefined);
+    setDragOver(undefined);
+    if (from === to) return;
+    const cells = moveDamierCell(page.cells, from, to);
+    const moved = cells.filter(
+      (cell, index) => cell.position !== page.cells[index].position,
+    );
+    if (!moved.length) return;
+    const updated = { ...page, cells };
+    run(
+      pages.map((item) => (item.id === page.id ? updated : item)),
+      async () => {
+        await onMoveCells?.(moved, updated);
+      },
+    );
+  };
+
+  const deleteCell = (cell: DamierCellInterface) => {
+    const updated = {
+      ...page,
+      cells: page.cells.filter((c) => c.position !== cell.position),
+    };
+    run(
+      pages.map((item) => (item.id === page.id ? updated : item)),
+      async () => {
+        if ((cell.id ?? -1) >= 0) await onDeleteCell?.(cell, updated);
+      },
+    );
+  };
+
+  const clickCell = (position: number, cell?: DamierCellInterface) => {
+    if (cell) onClickCell?.(cell, page);
+    else addCell(position);
+  };
+
+  const cellsByPosition = useMemo(
+    () => new Map(page.cells.map((cell) => [cell.position, cell])),
+    [page.cells],
+  );
+  const gridStyle = useMemo(
+    () =>
+      ({
+        "--damier-cols": String(page.cols),
+        "--damier-rows": String(page.rows),
+      }) as CSSProperties,
+    [page.cols, page.rows],
+  );
+
+  return (
+    <div className={`damier-editor ${className}`}>
+      <DamierEditorToolbar
+        page={page}
+        disabled={busy}
+        canAddCell={freePosition !== undefined}
+        onChangeDimension={changeDimension}
+        onAddCell={() => freePosition && addCell(freePosition)}
+      />
+      <div>
+        <DamierEditorTree
+          pages={pages}
+          currentPageId={page.id}
+          rootPageId={rootPageId}
+          disabled={busy}
+          onSelect={selectPage}
+          onAdd={hideAddPage ? undefined : addPage}
+          onDelete={onDeletePage ? deletePage : undefined}
+        />
+        <div className="damier-editor-main">
+          {error && (
+            <p role="alert" className="damier-editor-error">
+              {error}
+            </p>
+          )}
+          <div
+            className="damier-editor-grid"
+            style={gridStyle}
+            onDragLeave={(e) => {
+              if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+                setDragOver(undefined);
+              }
+            }}
+          >
+            {Array.from({ length: page.cols * page.rows }, (_, index) => {
+              const position = index + 1;
+              return (
+                <DamierEditorCell
+                  key={position}
+                  position={position}
+                  cell={cellsByPosition.get(position)}
+                  disabled={busy}
+                  dragging={dragFrom === position}
+                  dragOver={dragFrom !== undefined && dragOver === position}
+                  onDragStart={setDragFrom}
+                  onDragEnd={() => {
+                    setDragFrom(undefined);
+                    setDragOver(undefined);
+                  }}
+                  onDragOver={(over) => over !== dragOver && setDragOver(over)}
+                  onDrop={moveCell}
+                  onClick={clickCell}
+                  onDelete={onDeleteCell ? deleteCell : undefined}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/damier/damierEditor/damierEditor.css

@@ -0,0 +1,255 @@
+/* La hauteur est fixée par la grille (taille de case bornée) ; l'arbre défile dans cette hauteur.
+   --damier-editor-offset : hauteur occupée autour du damier (en-têtes, barre d'outils...) */
+.damier-editor {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+
+  .damier-editor-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .damier-editor-title {
+    margin: 0;
+  }
+
+  .damier-editor-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.5rem;
+  }
+
+  /* Arborescence des pages */
+  .damier-tree {
+    flex: 0 0 260px;
+    width: 260px;
+    min-width: 0;
+    min-height: 0;
+    /* Le contenu de l'arbre (potentiellement des milliers de pages) n'agrandit pas le damier */
+    contain: size;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-right: 0.75rem;
+    border-right: 1px solid #d1c1c1;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  .damier-tree-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    .input-container {
+      flex: 1;
+    }
+  }
+
+  .damier-tree-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  /* Neutralise le style global des <button> (largeur mini, centrage, taille) */
+  .damier-tree-toggle,
+  .damier-tree-label,
+  .damier-editor-cell-delete {
+    min-width: 0;
+    max-height: none;
+    border-radius: 0;
+    font-size: 0.95rem;
+    font-weight: normal;
+    justify-content: flex-start;
+  }
+
+  .damier-tree-item {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--light-color);
+    }
+
+    &.damier-tree-item--active,
+    &.damier-tree-item--active:hover {
+      background: var(--primary-color);
+
+      .damier-tree-label,
+      .damier-tree-toggle {
+        color: var(--white-color);
+        font-weight: bold;
+      }
+    }
+  }
+
+  .damier-tree-toggle {
+    flex: 0 0 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3rem 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  .damier-tree-label {
+    flex: 1;
+    min-width: 0;
+    padding: 0.3rem 0.25rem;
+    border: 0;
+    background: transparent;
+    color: #1e293b;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+
+  .damier-tree-empty {
+    padding: 0.3rem;
+    opacity: 0.6;
+  }
+
+  .damier-editor-dimension {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.85rem;
+    width: 6rem;
+  }
+
+  .damier-editor-danger {
+    background-color: var(--danger-color);
+  }
+
+  .damier-editor-error {
+    margin: 0;
+    color: var(--danger-color);
+  }
+
+  /* Hauteur de ligne bornée : le damier tient dans l'écran, sans dépasser 6rem par case */
+  .damier-editor-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--damier-cols, 9), minmax(0, 1fr));
+    grid-template-rows: repeat(
+      var(--damier-rows, 9),
+      clamp(
+        2.5rem,
+        calc(
+          (100vh - var(--damier-editor-offset, 16rem)) / var(--damier-rows, 9)
+        ),
+        6rem
+      )
+    );
+    gap: 0.3rem;
+  }
+
+  .damier-editor-cell {
+    position: relative;
+    box-sizing: border-box;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d1c1c1;
+    border-radius: 4px;
+    background-color: var(--white-color);
+    cursor: grab;
+    user-select: none;
+    transition: transform 0.1s, box-shadow 0.1s;
+
+    &.damier-editor-cell--empty {
+      border-style: dashed;
+      background: #f9f9f9;
+      cursor: pointer;
+
+      .damier-editor-cell-add {
+        opacity: 0;
+        color: var(--primary-color);
+      }
+
+      &:hover .damier-editor-cell-add {
+        opacity: 0.6;
+      }
+    }
+
+    &.damier-editor-cell--dragging {
+      opacity: 0.4;
+    }
+
+    &.damier-editor-cell--over {
+      border: 2px solid var(--tertiary-color);
+      box-shadow: 0 0 0 3px rgba(48, 184, 194, 0.25);
+      transform: scale(1.03);
+    }
+
+    &:hover .damier-editor-cell-delete {
+      opacity: 1;
+    }
+  }
+
+  .damier-editor-cell-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 0.85rem;
+    /* Les images/enfants ne doivent pas capter le glisser natif */
+    pointer-events: none;
+  }
+
+  .damier-editor-cell-delete {
+    position: absolute;
+    justify-content: center;
+    top: 2px;
+    right: 2px;
+    z-index: 9;
+    display: flex;
+    padding: 0.15rem;
+    border: 0;
+    border-radius: 50%;
+    background: var(--white-color);
+    color: var(--danger-color);
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .damier-editor {
+    flex-direction: column;
+
+    .damier-tree {
+      contain: none;
+      flex-basis: auto;
+      width: 100%;
+      max-height: 40vh;
+      padding-right: 0;
+      border-right: 0;
+      border-bottom: 1px solid #d1c1c1;
+    }
+  }
+}