kelt-ui-kit-react 2.1.7 → 2.1.9

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;
+    }
+  }
+}

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;