@sia-ui/cli 0.2.1 → 0.3.0

package/dist/registry/package/components/DataTable/query.ts

@@ -0,0 +1,68 @@
+import { useMemo } from "react";
+import {
+  useTableQuery,
+  type TableQuery,
+  type TableQueryState,
+  type TableQueryStorage,
+} from "@sia-ui/headless";
+
+/**
+ * L'état du tableau dans la barre d'adresse.
+ *
+ * `history.replaceState` plutôt que `pushState` : trier une colonne trois
+ * fois de suite ne doit pas demander trois retours en arrière pour revenir
+ * d'où l'on vient.
+ */
+export function createUrlTableStorage(
+  mode: "replace" | "push" = "replace",
+): TableQueryStorage {
+  return {
+    read: () => (typeof window === "undefined" ? "" : window.location.search),
+    write: (value) => {
+      if (typeof window === "undefined") return;
+      const url = `${window.location.pathname}${value ? `?${value}` : ""}${window.location.hash}`;
+      if (mode === "push") window.history.pushState(null, "", url);
+      else window.history.replaceState(null, "", url);
+    },
+    subscribe: (listener) => {
+      if (typeof window === "undefined") return () => {};
+      window.addEventListener("popstate", listener);
+      return () => window.removeEventListener("popstate", listener);
+    },
+  };
+}
+
+export interface UseDataTableQueryOptions {
+  defaultState?: Partial<TableQueryState>;
+  /** `false` garde l'état en mémoire — utile dans une modale. */
+  syncUrl?: boolean;
+  /** Empile une entrée d'historique à chaque changement. */
+  history?: "replace" | "push";
+  /** Préfixe des clés, pour deux tableaux sur la même page. */
+  prefix?: string;
+}
+
+/**
+ * Tri, filtres et pagination d'un tableau, synchronisés avec l'URL.
+ *
+ * Le calcul vit dans `@sia-ui/headless`; il n'y a ici que le branchement sur
+ * la barre d'adresse, qui est la seule partie propre au navigateur.
+ */
+export function useDataTableQuery(
+  options: UseDataTableQueryOptions = {},
+): TableQuery {
+  const { defaultState, syncUrl = true, history = "replace", prefix } = options;
+
+  // Créé une fois : un objet reconstruit à chaque rendu réabonnerait
+  // l'écouteur `popstate` en boucle.
+  const storage = useMemo(
+    () => (syncUrl ? createUrlTableStorage(history) : undefined),
+    [history, syncUrl],
+  );
+
+  return useTableQuery({
+    ...(defaultState ? { defaultState } : {}),
+    ...(storage ? { storage } : {}),
+    ...(prefix ? { prefix } : {}),
+  });
+}

package/dist/registry/package/components/DataTable/row-actions.tsx

@@ -0,0 +1,158 @@
+import { useState, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import type { PermissionRule } from "@sia-ui/headless";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { DropdownMenu } from "../DropdownMenu";
+import { ConfirmDialog } from "../ConfirmDialog";
+import { MoreHorizontalIcon } from "../Icons";
+import type { RowAction } from "./types";
+
+interface RowActionsProps<T> {
+  row: T;
+  index: number;
+  actions: Array<RowAction<T>>;
+  inlineLimit: number;
+  display: "icon" | "label";
+  can: ((rule: PermissionRule) => boolean) | undefined;
+}
+
+/**
+ * Ce qu'on peut faire d'une ligne.
+ *
+ * Trois choses se décident ici, et aucune n'est cosmétique : ce que la
+ * session a le droit de faire, ce qui demande confirmation, et ce qui ne
+ * tient plus dans la largeur et doit passer en menu.
+ */
+export function RowActions<T>({
+  row,
+  index,
+  actions,
+  inlineLimit,
+  display,
+  can,
+}: RowActionsProps<T>) {
+  // Une confirmation en attente. Une seule à la fois : deux dialogues
+  // superposés sur la même ligne n'ont aucun sens.
+  const [enAttente, setEnAttente] = useState<RowAction<T> | null>(null);
+
+  const visibles = actions.filter((action) => {
+    if (action.permission !== undefined && can && !can(action.permission)) {
+      return false;
+    }
+    return !action.hidden?.(row, index);
+  });
+
+  if (visibles.length === 0) return null;
+
+  const declencher = (action: RowAction<T>) => {
+    if (action.confirm) {
+      setEnAttente(action);
+      return;
+    }
+    void action.onSelect(row, index);
+  };
+
+  const enLigne = visibles.slice(0, inlineLimit);
+  const dansLeMenu = visibles.slice(inlineLimit);
+
+  return (
+    <div className="sia-table__actions" onClick={(e) => e.stopPropagation()}>
+      {enLigne.map((action) => {
+        const desactivee = action.disabled?.(row, index) ?? false;
+        const nom =
+          typeof action.label === "string" ? action.label : action.key;
+
+        // Sans icône, on retombe sur le libellé : un bouton vide ne se clique
+        // pas, quelle que soit la consigne d'affichage.
+        return display === "icon" && action.icon ? (
+          <IconButton
+            key={action.key}
+            label={nom}
+            icon={action.icon}
+            variant="ghost"
+            size="sm"
+            disabled={desactivee}
+            tooltip={{ content: action.label }}
+            onClick={() => declencher(action)}
+          />
+        ) : (
+          <Button
+            key={action.key}
+            variant="ghost"
+            size="sm"
+            {...(action.tone ? { tone: action.tone } : {})}
+            disabled={desactivee}
+            onClick={() => declencher(action)}
+          >
+            {action.icon}
+            {action.label}
+          </Button>
+        );
+      })}
+
+      {dansLeMenu.length > 0 && (
+        <DropdownMenu
+          placement="bottom-end"
+          items={dansLeMenu.map((action) => ({
+            key: action.key,
+            label: action.label,
+            ...(action.icon ? { icon: action.icon } : {}),
+            disabled: action.disabled?.(row, index) ?? false,
+            danger: action.tone === "danger",
+            onSelect: () => declencher(action),
+          }))}
+        >
+          <IconButton
+            label="Autres actions"
+            icon={<MoreHorizontalIcon />}
+            variant="ghost"
+            size="sm"
+          />
+        </DropdownMenu>
+      )}
+
+      {enAttente?.confirm && (
+        <ConfirmDialog
+          open
+          onOpenChange={(ouvert) => {
+            if (!ouvert) setEnAttente(null);
+          }}
+          title={enAttente.confirm.title}
+          {...(enAttente.confirm.description
+            ? { description: enAttente.confirm.description }
+            : {})}
+          {...(enAttente.confirm.confirmLabel
+            ? { confirmLabel: enAttente.confirm.confirmLabel }
+            : {})}
+          {...(enAttente.confirm.cancelLabel
+            ? { cancelLabel: enAttente.confirm.cancelLabel }
+            : {})}
+          tone={enAttente.confirm.destructive ? "danger" : "primary"}
+          onConfirm={async () => {
+            await enAttente.onSelect(row, index);
+            setEnAttente(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Une cellule de carte : libellé au-dessus, valeur en dessous. */
+export function CardMeta({
+  label,
+  value,
+  className,
+}: {
+  label: ReactNode;
+  value: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("sia-table-card__meta", className)}>
+      <span className="sia-table-card__label">{label}</span>
+      <span className="sia-table-card__value">{value}</span>
+    </div>
+  );
+}

package/dist/registry/package/components/DataTable/styles.css

@@ -1,98 +1,310 @@
-/* Waves 3 and 4: data, advanced date/time and application patterns */
-.sia-data-table { width:100%; overflow:auto; border:1px solid var(--sia-border); border-radius:var(--sia-radius); }
-.sia-data-table table { width:100%; border-collapse:collapse; }
-.sia-data-table caption { padding:.75rem; text-align:left; font-weight:700; }
-.sia-data-table th,.sia-data-table td { padding:.75rem 1rem; border-bottom:1px solid var(--sia-border); }
-.sia-data-table th { color:var(--sia-muted); background:var(--sia-surface); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
-.sia-data-table tbody tr:last-child td { border-bottom:0; }
-.sia-data-table__state { color:var(--sia-muted); text-align:center; }
-
-/* Les lignes répondent au survol et à la sélection : sans ça, un tableau de
-   trente lignes ne dit pas où se trouve le curseur. */
-.sia-data-table tbody tr {
+/**
+ * Le tableau de données.
+ *
+ * Une variable porte la hauteur de ligne — `--sia-table-row-height` — et les
+ * trois densités ne font que la redéfinir. Le reste du fichier ne la connaît
+ * pas : changer de densité ne touche donc à aucune autre règle.
+ */
+
+.sia-table {
+  --sia-table-row-height: 3rem;
+  --sia-table-pad-y: .75rem;
+  --sia-table-pad-x: .875rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+  min-width: 0;
+  font-size: .875rem;
+}
+
+.sia-table--compact {
+  --sia-table-row-height: 2.375rem;
+  --sia-table-pad-y: .45rem;
+  font-size: .825rem;
+}
+.sia-table--comfortable {
+  --sia-table-row-height: 3.75rem;
+  --sia-table-pad-y: 1.05rem;
+}
+
+/* ── L'en-tête ──────────────────────────────────────────────────────────── */
+
+.sia-table__header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.sia-table__heading { min-width: 0; display: grid; gap: .15rem; }
+.sia-table__title { margin: 0; font-size: 1.05rem; font-weight: 650; }
+.sia-table__description { margin: 0; color: var(--sia-muted); font-size: .85rem; }
+
+.sia-table__tools {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+.sia-table__actions-bar { display: flex; align-items: center; gap: .5rem; }
+
+/* Deux boutons dans un même sillon, avec un repère qui glisse dessous. */
+.sia-table__views {
+  display: inline-flex;
+  padding: .2rem;
+  border: 1px solid var(--sia-border);
+  border-radius: var(--sia-radius);
+  background: var(--sia-surface);
+}
+.sia-table__view {
+  display: grid;
+  place-items: center;
+  width: 1.9rem;
+  height: 1.9rem;
+  border: 0;
+  border-radius: calc(var(--sia-radius) - .15rem);
+  background: transparent;
+  color: var(--sia-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-table__view--active {
+  background: var(--sia-background);
+  color: var(--sia-foreground);
+  box-shadow: 0 1px 2px rgb(15 23 42 / .08);
+}
+
+/* ── La barre de sélection ──────────────────────────────────────────────── */
+
+.sia-table__selection {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  padding: .5rem .875rem;
+  border: 1px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
+  border-radius: var(--sia-radius);
+  background: color-mix(in srgb, var(--sia-primary) 8%, var(--sia-background));
+  /* Elle se glisse entre l'en-tête et le corps : la voir apparaître d'un bloc
+     donnerait l'impression que la page a sauté. */
+  animation: sia-table-selection var(--sia-duration-base) var(--sia-easing-spring);
+}
+@keyframes sia-table-selection {
+  from { opacity: 0; transform: translateY(-.35rem); }
+}
+.sia-table__selection-count {
+  color: var(--sia-primary);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Le tableau ─────────────────────────────────────────────────────────── */
+
+.sia-table__scroll {
+  min-width: 0;
+  overflow: auto;
+  border-radius: var(--sia-radius);
+}
+.sia-table--bordered .sia-table__scroll { border: 1px solid var(--sia-border); }
+
+.sia-table__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.sia-table__table th {
+  padding: var(--sia-table-pad-y) var(--sia-table-pad-x);
+  border-bottom: 1px solid var(--sia-border);
+  background: var(--sia-surface);
+  color: var(--sia-muted);
+  font-size: .75rem;
+  font-weight: 600;
+  letter-spacing: .03em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.sia-table__scroll--sticky th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.sia-table__table td {
+  height: var(--sia-table-row-height);
+  padding: var(--sia-table-pad-y) var(--sia-table-pad-x);
+  border-bottom: 1px solid var(--sia-border);
+  vertical-align: middle;
+}
+.sia-table__table tbody tr:last-child td { border-bottom: 0; }
+
+.sia-table--striped tbody tr:nth-child(even) td {
+  background: color-mix(in srgb, var(--sia-surface) 55%, transparent);
+}
+
+.sia-table__table tbody tr {
   transition: background-color var(--sia-duration-fast) var(--sia-easing-standard);
 }
+.sia-table__table tbody tr:hover td {
+  background: color-mix(in srgb, var(--sia-primary) 4%, var(--sia-surface));
+}
 
-.sia-data-table tbody tr:hover {
-  background: color-mix(in srgb, var(--sia-primary) 4%, transparent);
+.sia-table__row--clickable { cursor: pointer; }
+.sia-table__row--selected td {
+  background: color-mix(in srgb, var(--sia-primary) 7%, transparent);
 }
 
-.sia-data-table tbody tr[aria-selected="true"] {
-  background: color-mix(in srgb, var(--sia-primary) 9%, transparent);
+.sia-table__cell--center { text-align: center; }
+.sia-table__cell--end { text-align: right; }
+.sia-table__cell--truncate {
+  max-width: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+.sia-table__cell--select { width: 1px; padding-right: 0; }
+.sia-table__cell--actions { width: 1px; white-space: nowrap; text-align: right; }
+
+.sia-table__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: .15rem;
+  justify-content: flex-end;
+}
 
-/* ── Tri, servi par le serveur ─────────────────────────────────────────── */
+/* Les actions n'apparaissent qu'au survol de leur ligne : une colonne pleine
+   de boutons attire l'œil plus que les données. Elles restent visibles au
+   clavier, et sur tactile, où il n'y a pas de survol. */
+@media (hover: hover) and (pointer: fine) {
+  .sia-table__table tbody .sia-table__actions {
+    opacity: .35;
+    transition: opacity var(--sia-duration-fast) var(--sia-easing-standard);
+  }
+  .sia-table__table tbody tr:hover .sia-table__actions,
+  .sia-table__table tbody .sia-table__actions:focus-within { opacity: 1; }
+}
 
-.sia-data-table { position: relative; }
+/* ── Le tri ─────────────────────────────────────────────────────────────── */
 
-.sia-data-table__sort {
+.sia-table__sort {
   display: inline-flex;
   align-items: center;
-  gap: .35rem;
+  gap: .3rem;
   padding: 0;
   border: 0;
-  background: transparent;
+  background: none;
   color: inherit;
   font: inherit;
-  text-transform: inherit;
   letter-spacing: inherit;
+  text-transform: inherit;
   cursor: pointer;
-  transition: color var(--sia-duration-fast) var(--sia-easing-standard);
 }
-.sia-data-table__sort:hover { color: var(--sia-foreground); }
-.sia-data-table__sort[data-active] { color: var(--sia-primary); }
-
-/* La flèche n'apparaît qu'au survol ou quand le tri est actif : trois
-   chevrons gris en permanence dans un entête n'aident personne. */
-.sia-data-table__arrow {
+.sia-table__sort:hover { color: var(--sia-foreground); }
+.sia-table__sort-icon {
   display: grid;
   place-items: center;
-  font-size: .75rem;
-  opacity: 0;
-  transform: translateY(2px);
+  opacity: .35;
+  font-size: .7rem;
+  transition: opacity var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-table__sort:hover .sia-table__sort-icon { opacity: .7; }
+[aria-sort] .sia-table__sort { color: var(--sia-primary); }
+[aria-sort] .sia-table__sort-icon { opacity: 1; }
+
+/* ── L'apparition des lignes ────────────────────────────────────────────── */
+
+/**
+ * Chaque ligne arrive quelques millisecondes après la précédente.
+ *
+ * Le décalage est plafonné : au-delà d'une dizaine de lignes, l'escalier
+ * devient une attente. Les suivantes arrivent ensemble, et personne ne le
+ * remarque — on ne regarde jamais la vingtième ligne en premier.
+ */
+.sia-table__table tbody tr,
+.sia-table-card {
+  animation: sia-table-row var(--sia-duration-base) var(--sia-easing-standard) backwards;
+  animation-delay: calc(min(var(--sia-table-row, 0), 10) * 22ms);
+}
+@keyframes sia-table-row {
+  from { opacity: 0; transform: translateY(.35rem); }
+}
+
+.sia-table__row--skeleton { animation: none; }
+
+/* ── Les cartes ─────────────────────────────────────────────────────────── */
+
+.sia-table__cards {
+  display: grid;
+  gap: .75rem;
+  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+}
+
+.sia-table-card {
+  display: flex;
+  flex-direction: column;
+  gap: .6rem;
+  padding: .875rem 1rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) * 1.25);
+  background: var(--sia-background);
   transition:
-    opacity var(--sia-duration-fast) var(--sia-easing-standard),
-    transform var(--sia-duration-base) var(--sia-easing-spring);
+    border-color var(--sia-duration-fast) var(--sia-easing-standard),
+    box-shadow var(--sia-duration-base) var(--sia-easing-standard),
+    transform var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-table-card--clickable { cursor: pointer; }
+.sia-table-card--clickable:hover {
+  border-color: color-mix(in srgb, var(--sia-primary) 35%, var(--sia-border));
+  box-shadow: 0 6px 20px rgb(15 23 42 / .07);
+  transform: translateY(-2px);
 }
-.sia-data-table__sort:hover .sia-data-table__arrow { opacity: .45; transform: none; }
-.sia-data-table__sort[data-active] .sia-data-table__arrow { opacity: 1; transform: none; }
 
-.sia-data-table--sticky thead th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  /* Sans fond opaque, les lignes défilent visiblement sous l'entête. */
-  background: var(--sia-surface);
-  box-shadow: inset 0 -1px var(--sia-border);
-}
-
-.sia-data-table--clickable tbody tr { cursor: pointer; }
-
-/* ── Chargement ────────────────────────────────────────────────────────── */
-
-.sia-data-table__ghost-bar {
-  display: block;
-  height: .75rem;
-  border-radius: 999px;
-  background: linear-gradient(
-    90deg,
-    var(--sia-surface) 25%,
-    var(--sia-border) 37%,
-    var(--sia-surface) 63%
-  );
-  background-size: 400% 100%;
-  animation: sia-skeleton 1.4s ease infinite;
-}
-/* Chaque ligne fantôme est un peu plus courte : une colonne de barres
-   strictement identiques se lit comme un défaut d'affichage. */
-.sia-data-table__ghost:nth-child(2n) .sia-data-table__ghost-bar { width: 78%; }
-.sia-data-table__ghost:nth-child(3n) .sia-data-table__ghost-bar { width: 62%; }
-
-.sia-data-table__veil {
-  position: absolute;
-  inset: 0;
-  background: color-mix(in srgb, var(--sia-background) 55%, transparent);
-  animation: sia-fade-in var(--sia-duration-fast) var(--sia-easing-standard);
-  pointer-events: none;
+.sia-table-card__title {
+  font-weight: 650;
+  font-size: .95rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sia-table-card__body {
+  display: grid;
+  gap: .4rem .875rem;
+  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+}
+
+.sia-table-card__meta { display: grid; gap: .1rem; min-width: 0; }
+.sia-table-card__label {
+  color: var(--sia-muted);
+  font-size: .68rem;
+  letter-spacing: .03em;
+  text-transform: uppercase;
+}
+.sia-table-card__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sia-table-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: .35rem;
+  border-top: 1px solid var(--sia-border);
+}
+
+.sia-table-card--skeleton { gap: .5rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .sia-table__table tbody tr,
+  .sia-table-card,
+  .sia-table__selection { animation: none; }
+  .sia-table-card--clickable:hover { transform: none; }
 }