@zevra/ui 0.7.0 → 0.8.0

package/dist/css-inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,qy5LAAqy5L,CAAA;AAEx05L;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}
+{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,mp8LAAmp8L,CAAA;AAEtr8L;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}

package/dist/data-table.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { type RowData, type Table as TableTanstack } from '@tanstack/react-table';
+declare module '@tanstack/react-table' {
+    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 declare function DataTable<T>({ table, vide, onRowClick, className }: DataTableProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../react/data-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAEL,KAAK,OAAO,EACZ,KAAK,KAAK,IAAI,aAAa,EAC5B,MAAM,uBAAuB,CAAA;AAM9B,OAAO,QAAQ,uBAAuB,CAAC;IAErC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD;sEAC8D;QAC9D,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;QACxB;6DACqD;QACrD,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,8CAA8C;QAC9C,KAAK,CAAC,EAAE,SAAS,CAAA;QACjB;6CACqC;QACrC,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB;CACF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAA;IACvB;;6EAEyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;8CAC0C;IAC1C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,+BA+FrF"}

package/dist/data-table.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender, } from '@tanstack/react-table';
+import { cx } from './cx.js';
+export function DataTable({ table, vide, onRowClick, className }) {
+    const colonnes = table.getVisibleLeafColumns();
+    const gabarit = colonnes
+        .map((c) => c.columnDef.meta?.largeur ?? 'minmax(0, 1fr)')
+        .join(' ');
+    const lignes = table.getRowModel().rows;
+    return (_jsxs("div", { className: cx('zv-table', className), style: { ['--zv-cols']: gabarit }, children: [table.getHeaderGroups().map((groupe) => (_jsx("div", { className: "zv-table__head", children: 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 (_jsx("div", { className: cx('zv-cell', registre === 'num' && 'zv-cell--num'), "aria-sort": sens === 'asc' ? 'ascending' : sens === 'desc' ? 'descending' : undefined, children: triable ? (_jsxs("button", { type: "button", className: "zv-sort", onClick: entete.column.getToggleSortingHandler(), children: [contenu, _jsx("span", { className: "zv-sort__mark", "aria-hidden": "true", children: sens === 'asc' ? '↑' : sens === 'desc' ? '↓' : '↕' })] })) : (contenu) }, entete.id));
+                }) }, groupe.id))), lignes.length === 0
+                ? vide
+                : lignes.map((ligne) => (_jsx("div", { 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, children: ligne.getVisibleCells().map((cellule) => {
+                        const meta = cellule.column.columnDef.meta;
+                        return (_jsxs("div", { className: cx('zv-cell', meta?.registre === 'nom' && 'zv-cell--name', meta?.registre === 'num' && 'zv-cell--num'), children: [meta?.label && _jsx("span", { className: "zv-cell__label", children: meta.label }), flexRender(cellule.column.columnDef.cell, cellule.getContext()), meta?.unite && _jsx("span", { className: "zv-cell__unit", children: meta.unite })] }, cellule.id));
+                    }) }, ligne.id)))] }));
+}
+//# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../react/data-table.tsx"],"names":[],"mappings":";AAkBA,OAAO,EACL,UAAU,GAGX,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAkC5B,MAAM,UAAU,SAAS,CAAI,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAqB;IACpF,MAAM,QAAQ,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAA;IAC9C,MAAM,OAAO,GAAG,QAAQ;SACrB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,IAAI,gBAAgB,CAAC;SACzD,IAAI,CAAC,GAAG,CAAC,CAAA;IACZ,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAA;IAEvC,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EACpC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,EAAyB,aAEvD,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvC,cAAK,SAAS,EAAC,gBAAgB,YAC5B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBAC7B,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAA;oBAC1C,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAA;oBACxC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAA;oBACvD,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa;wBAClC,CAAC,CAAC,IAAI;wBACN,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAA;oBACnE,OAAO,CACL,cAEE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,QAAQ,KAAK,KAAK,IAAI,cAAc,CAAC,eAI5D,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,YAG1E,OAAO,CAAC,CAAC,CAAC,CACT,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,aAE/C,OAAO,EACR,eAAM,SAAS,EAAC,eAAe,iBAAa,MAAM,YAC/C,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAC9C,IACA,CACV,CAAC,CAAC,CAAC,CACF,OAAO,CACR,IArBI,MAAM,CAAC,EAAE,CAsBV,CACP,CAAA;gBACH,CAAC,CAAC,IAlCiC,MAAM,CAAC,EAAE,CAmCxC,CACP,CAAC,EAED,MAAM,CAAC,MAAM,KAAK,CAAC;gBAClB,CAAC,CAAC,IAAI;gBACN,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpB,cAEE,SAAS,EAAC,QAAQ;oBAClB,8DAA8D;oBAC9D,sDAAsD;oBACtD,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACpC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EACrD,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,EAClE,SAAS,EACP,UAAU;wBACR,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;4BACJ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gCACvC,CAAC,CAAC,cAAc,EAAE,CAAA;gCAClB,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;4BAC5B,CAAC;wBACH,CAAC;wBACH,CAAC,CAAC,SAAS,YAGd,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;wBACvC,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAA;wBAC1C,OAAO,CACL,eAEE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,IAAI,EAAE,QAAQ,KAAK,KAAK,IAAI,eAAe,EAC3C,IAAI,EAAE,QAAQ,KAAK,KAAK,IAAI,cAAc,CAC3C,aAEA,IAAI,EAAE,KAAK,IAAI,eAAM,SAAS,EAAC,gBAAgB,YAAE,IAAI,CAAC,KAAK,GAAQ,EACnE,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,UAAU,EAAE,CAAC,EAC/D,IAAI,EAAE,KAAK,IAAI,eAAM,SAAS,EAAC,eAAe,YAAE,IAAI,CAAC,KAAK,GAAQ,KAT9D,OAAO,CAAC,EAAE,CAUX,CACP,CAAA;oBACH,CAAC,CAAC,IAnCG,KAAK,CAAC,EAAE,CAoCT,CACP,CAAC,IACF,CACP,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,
@@ -34,6 +34,10 @@
       "types": "./dist/css-inline.d.ts",
       "default": "./dist/css-inline.js"
     },
+    "./react/table": {
+      "types": "./dist/data-table.d.ts",
+      "default": "./dist/data-table.js"
+    },
     "./css": "./src/index.css",
     "./tokens.css": "./src/tokens.css",
     "./fonts.css": "./src/fonts.css",
@@ -66,14 +70,21 @@
   "scripts": {
     "build": "node scripts/build-icon-react.mjs && node scripts/build-css-bundle.mjs && tsc -p tsconfig.json",
     "test": "npm run build && vitest run",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "storybook": "npm run build && node scripts/build-stories.mjs && storybook dev -p 6006 --no-open",
+    "build:storybook": "npm run build && node scripts/build-stories.mjs && storybook build -o storybook-static"
   },
   "devDependencies": {
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
+    "@tanstack/react-table": "^8.21.3",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "storybook": "^10.5.10",
     "typescript": "^7.0.2",
+    "vite": "^7.3.6",
     "vitest": "^3.2.4"
   },
   "keywords": [
@@ -84,11 +95,15 @@
     "components"
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "@tanstack/react-table": ">=8"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
     }
   }
 }