@zevra/ui 0.7.0 → 0.8.0

package/react/data-table.tsx

@@ -0,0 +1,153 @@
+// Tableau piloté par TanStack Table.
+//
+// ⚠️ CE FICHIER N'EST PAS DANS LE BARREL, et c'est délibéré :
+// `@tanstack/react-table` est une dépendance OPTIONNELLE. L'importer depuis
+// `@zevra/ui/react` casserait toutes les apps qui ne l'ont pas installée —
+// une landing n'a aucun tableau. D'où le sous-chemin dédié :
+//
+//     import { DataTable } from '@zevra/ui/react/table'
+//
+// POURQUOI TANSTACK plutôt que notre propre tri/pagination : tri multi-colonnes,
+// filtres, groupement, virtualisation, sélection de lignes — c'est un travail
+// de plusieurs mois que personne ici n'a envie de refaire, et mal. TanStack est
+// HEADLESS : il ne rend rien, il calcule des modèles de lignes. Ce fichier lui
+// donne l'apparence du paquet, exactement comme shadcn le fait avec ses
+// variables. Aucune classe nouvelle n'entre par cette porte : ce sont les
+// mêmes .zv-table / .zv-row / .zv-cell que le tableau écrit à la main.
+
+import type { ReactNode } from 'react'
+import {
+  flexRender,
+  type RowData,
+  type Table as TableTanstack,
+} from '@tanstack/react-table'
+import { cx } from './cx.js'
+
+// Le pont entre les deux mondes : une colonne déclare ici son registre
+// d'affichage, et le composant le traduit en classes du paquet. C'est ce qui
+// évite d'avoir à écrire une cellule sur mesure pour aligner un nombre.
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    /** `nom` : colonne d'identité, la seule en encre pleine.
+     *  `num` : chiffres alignés à droite, en chasse tabulaire. */
+    registre?: 'nom' | 'num'
+    /** Intitulé qui REMPLACE l'en-tête sous le point de rupture, où les
+     *  colonnes s'empilent et où l'en-tête disparaît. */
+    label?: string
+    /** Unité accolée au nombre, en plus petit. */
+    unite?: ReactNode
+    /** Largeur de la colonne dans la grille (syntaxe grid-template-columns).
+     *  Par défaut : `minmax(0, 1fr)`. */
+    largeur?: string
+  }
+}
+
+export interface DataTableProps<T> {
+  table: TableTanstack<T>
+  /** Rendu à la place des lignes quand le modèle est vide. ⚠️ C'est la LIGNE
+   *  d'absence qu'on attend ici (filtre trop étroit), pas l'écran d'absence :
+   *  l'en-tête doit rester visible pour qu'on puisse élargir le filtre. */
+  vide?: ReactNode
+  /** Appelé au clic sur une ligne. Sans lui, la ligne n'est pas cliquable —
+   *  et elle ne doit pas en avoir l'air. */
+  onRowClick?: (ligne: T) => void
+  className?: string
+}
+
+export function DataTable<T>({ table, vide, onRowClick, className }: DataTableProps<T>) {
+  const colonnes = table.getVisibleLeafColumns()
+  const gabarit = colonnes
+    .map((c) => c.columnDef.meta?.largeur ?? 'minmax(0, 1fr)')
+    .join(' ')
+  const lignes = table.getRowModel().rows
+
+  return (
+    <div
+      className={cx('zv-table', className)}
+      style={{ ['--zv-cols']: gabarit } as React.CSSProperties}
+    >
+      {table.getHeaderGroups().map((groupe) => (
+        <div className="zv-table__head" key={groupe.id}>
+          {groupe.headers.map((entete) => {
+            const triable = entete.column.getCanSort()
+            const sens = entete.column.getIsSorted()
+            const registre = entete.column.columnDef.meta?.registre
+            const contenu = entete.isPlaceholder
+              ? null
+              : flexRender(entete.column.columnDef.header, entete.getContext())
+            return (
+              <div
+                key={entete.id}
+                className={cx('zv-cell', registre === 'num' && 'zv-cell--num')}
+                // La colonne triée est annoncée : sans aria-sort, le tri est
+                // une information purement visuelle.
+                aria-sort={
+                  sens === 'asc' ? 'ascending' : sens === 'desc' ? 'descending' : undefined
+                }
+              >
+                {triable ? (
+                  <button
+                    type="button"
+                    className="zv-sort"
+                    onClick={entete.column.getToggleSortingHandler()}
+                  >
+                    {contenu}
+                    <span className="zv-sort__mark" aria-hidden="true">
+                      {sens === 'asc' ? '↑' : sens === 'desc' ? '↓' : '↕'}
+                    </span>
+                  </button>
+                ) : (
+                  contenu
+                )}
+              </div>
+            )
+          })}
+        </div>
+      ))}
+
+      {lignes.length === 0
+        ? vide
+        : lignes.map((ligne) => (
+            <div
+              key={ligne.id}
+              className="zv-row"
+              // Le clavier suit le clic : une ligne cliquable qui n'est pas
+              // atteignable au clavier est une action inaccessible.
+              role={onRowClick ? 'button' : undefined}
+              tabIndex={onRowClick ? 0 : undefined}
+              style={onRowClick ? undefined : { cursor: 'default' }}
+              onClick={onRowClick ? () => onRowClick(ligne.original) : undefined}
+              onKeyDown={
+                onRowClick
+                  ? (e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        onRowClick(ligne.original)
+                      }
+                    }
+                  : undefined
+              }
+            >
+              {ligne.getVisibleCells().map((cellule) => {
+                const meta = cellule.column.columnDef.meta
+                return (
+                  <div
+                    key={cellule.id}
+                    className={cx(
+                      'zv-cell',
+                      meta?.registre === 'nom' && 'zv-cell--name',
+                      meta?.registre === 'num' && 'zv-cell--num',
+                    )}
+                  >
+                    {meta?.label && <span className="zv-cell__label">{meta.label}</span>}
+                    {flexRender(cellule.column.columnDef.cell, cellule.getContext())}
+                    {meta?.unite && <span className="zv-cell__unit">{meta.unite}</span>}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+    </div>
+  )
+}

package/src/data.css

@@ -156,6 +156,51 @@
  * contient aucun, et les inventer ferait apparaître un fond de plus dans un
  * système qui n'en a que deux (blanc, survol). */
 
+/* ─── En-tête triable ──────────────────────────────────────────────────
+ * ⚠️ HORS RELEVÉ — ajouté le 25/08/2026 avec l'adaptateur TanStack Table.
+ * Aucun tableau de la production n'est triable ; l'intitulé y est du texte
+ * inerte. Un en-tête qui trie DOIT être un <button> — c'est la seule façon
+ * qu'il soit atteignable au clavier et annoncé comme actionnable.
+ *
+ * `font: inherit` plutôt qu'une police redite : l'en-tête a déjà la sienne
+ * (mono, capitales, interlettrée), et un <button> retomberait sur celle du
+ * navigateur. Hériter ne fait entrer aucune valeur nouvelle. */
+
+.zv-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.zv-sort:hover {
+  color: var(--accent);
+}
+
+.zv-sort:focus-visible {
+  /* L'en-tête colle au bord du cadre : l'anneau de base.css y serait rogné. */
+  outline-offset: -2px;
+}
+
+/* La marque de tri reste TOUJOURS posée, même sur une colonne non triée
+ * (elle vaut alors ↕) : si elle n'apparaissait qu'au tri, la largeur de la
+ * colonne changerait au clic et toute la ligne d'en-tête danserait. */
+.zv-sort__mark {
+  font-size: var(--mono-sm);
+  color: var(--label);
+}
+
+.zv-sort:hover .zv-sort__mark {
+  color: var(--accent);
+}
+
 /* ─── Cellules ─────────────────────────────────────────────────────────
  * Trois registres seulement : le texte courant, le nombre, et l'intitulé qui
  * remplace l'en-tête quand celui-ci disparaît. */