@alveole/components 1.10.0 → 2.0.0-alpha

package/dist/ui/DataTable/DataTable.stories.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
-import { format, formatDistanceToNowStrict } from 'date-fns';
-import { fr } from 'date-fns/locale';
 import React from 'react';
-import { Box, Typography } from '../../core';
-import { ActionMenu } from '../ActionMenu';
+import { ScrollView } from 'react-native';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Avatar } from '../Avatar';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
 import { EmptyState } from '../EmptyState';
-import { LucideIcon } from '../LucideIcon';
-import { Popover } from '../Popover';
-import { Tag } from '../Tag';
 import { DataTable } from './DataTable';
+import { deploymentColumns, deployments } from './DataTable.demo.deployments';
+import { baseColumns, manyColumns, manyRepositories, repositories, repositoriesDetailed, } from './DataTable.demo.repositories';
 import { useStyles } from './DataTable.styles';
 import { DataTableFooter } from './DataTableFooter';
 import { DataTablePagination } from './DataTablePagination';
@@ -29,252 +27,15 @@ Comme chez Primer, l'API est déclarative : on décrit les \`columns\` (\`id\`,
 - **Sélection** : \`selectable\` ajoute une colonne de case à cocher avec sélection multiple et case "tout sélectionner" (à 3 états). Contrôlable via \`selectedKeys\`/\`onSelectionChange\`, sinon gérée en interne.
 - **Pagination** : contrairement à Primer, le Figma Alveole intègre un pied de tableau avec compteur + pagination. On le fournit via le slot \`footer\`, avec les composants \`DataTableFooter\` et \`DataTablePagination\` exportés séparément — le tableau reste agnostique de la pagination (page côté serveur ou client).
 - **Densité** : \`size\` (\`sm\` par défaut, \`md\`, \`lg\`) fait varier les paddings des cellules (en-tête, corps, colonne de sélection) sans changer la mise en page.
-- **Beaucoup de colonnes** : l'en-tête et les lignes défilent horizontalement ensemble (via un \`ScrollView\` commun) dès que la somme des largeurs de colonnes dépasse l'espace disponible. Les colonnes sans \`width\` restent flexibles (elles se partagent l'espace restant) : pour garantir le défilement horizontal, donner une \`width\` fixe à chaque colonne, comme dans l'exemple \`ManyColumns\`.`,
+- **Beaucoup de colonnes** : l'en-tête et les lignes défilent horizontalement ensemble (via un \`ScrollView\` commun) dès que la somme des largeurs de colonnes dépasse l'espace disponible. Les colonnes sans \`width\` restent flexibles (elles se partagent l'espace restant) : pour garantir le défilement horizontal, donner une \`width\` fixe à chaque colonne, comme dans l'exemple \`ManyColumns\`.
+- **En-tête épinglé** : \`stickyHeader\` (web uniquement) garde la ligne d'en-têtes visible en haut de son ascendant scrollable pendant le défilement vertical — le tableau ne fournissant lui-même que le scroll horizontal, c'est au parent de borner sa hauteur et de défiler, comme dans l'exemple \`StickyHeader\`.`,
     shortDescription: 'Tableau de données avec tri, sélection multiple et pagination, inspiré de Primer.',
     component: DataTable,
     styleFn: useStyles,
 };
-const repositories = [
-    {
-        id: 'repo_1',
-        name: 'codeql-dca-worker',
-        description: 'Internal',
-        visibility: 'Internal',
-        updatedAt: '2 heures',
-        owner: 'Ana Martins',
-    },
-    {
-        id: 'repo_2',
-        name: 'aegir',
-        description: 'Outils de build',
-        visibility: 'Public',
-        updatedAt: '3 heures',
-        owner: 'Joe Dalton',
-    },
-    {
-        id: 'repo_3',
-        name: 'strapi',
-        description: 'CMS headless',
-        visibility: 'Public',
-        updatedAt: '8 heures',
-        owner: 'Peter Parker',
-    },
-    {
-        id: 'repo_4',
-        name: 'codeql-ci-nightlies',
-        description: 'Analyse de sécurité',
-        visibility: 'Public',
-        updatedAt: 'hier',
-        owner: 'John Snow',
-    },
-    {
-        id: 'repo_5',
-        name: 'dependabot-updates',
-        description: 'Mises à jour auto',
-        visibility: 'Public',
-        updatedAt: 'la semaine dernière',
-        owner: 'Ana Martins',
-    },
-];
-const baseColumns = [
-    {
-        id: 'name',
-        header: 'Repository',
-        sortable: true,
-        renderCell: repo => _jsx(Typography, { children: repo.name }),
-    },
-    {
-        id: 'visibility',
-        header: 'Visibilité',
-        sortable: true,
-        renderCell: repo => (_jsx(Badge, { variant: repo.visibility === 'Public' ? 'info' : 'default', size: "sm", children: repo.visibility })),
-    },
-    {
-        id: 'updatedAt',
-        header: 'Mis à jour',
-        sortable: true,
-        renderCell: repo => _jsx(Typography, { children: repo.updatedAt }),
-    },
-];
 export const Default = () => _jsx(DataTable, { data: repositories, columns: baseColumns, keyExtractor: repo => repo.id });
 export const WithSelection = () => (_jsx(DataTable, { data: repositories, columns: baseColumns, keyExtractor: repo => repo.id, selectable: true }));
 export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: '4W', children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: '1V', children: [_jsx(Typography, { style: { fontWeight: 600 }, children: "sm (d\u00E9faut)" }), _jsx(DataTable, { data: repositories, columns: baseColumns, keyExtractor: repo => repo.id, selectable: true, size: "sm" })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: '1V', children: [_jsx(Typography, { style: { fontWeight: 600 }, children: "md" }), _jsx(DataTable, { data: repositories, columns: baseColumns, keyExtractor: repo => repo.id, selectable: true, size: "md" })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: '1V', children: [_jsx(Typography, { style: { fontWeight: 600 }, children: "lg" }), _jsx(DataTable, { data: repositories, columns: baseColumns, keyExtractor: repo => repo.id, selectable: true, size: "lg" })] })] }));
-const repositoriesDetailed = [
-    {
-        id: 'repo_1',
-        name: 'codeql-dca-worker',
-        description: 'Internal',
-        visibility: 'Internal',
-        updatedAt: '2 heures',
-        owner: 'Ana Martins',
-        language: 'TypeScript',
-        stars: 128,
-        forks: 12,
-        openIssues: 4,
-        pullRequests: 2,
-        lastCommit: 'a1b2c3d',
-        ciStatus: 'success',
-        coverage: '92%',
-        license: 'MIT',
-        size: '4.2 Mo',
-    },
-    {
-        id: 'repo_2',
-        name: 'aegir',
-        description: 'Outils de build',
-        visibility: 'Public',
-        updatedAt: '3 heures',
-        owner: 'Joe Dalton',
-        language: 'JavaScript',
-        stars: 1042,
-        forks: 87,
-        openIssues: 21,
-        pullRequests: 6,
-        lastCommit: 'e4f5g6h',
-        ciStatus: 'success',
-        coverage: '78%',
-        license: 'Apache-2.0',
-        size: '12.8 Mo',
-    },
-    {
-        id: 'repo_3',
-        name: 'strapi',
-        description: 'CMS headless',
-        visibility: 'Public',
-        updatedAt: '8 heures',
-        owner: 'Peter Parker',
-        language: 'JavaScript',
-        stars: 58210,
-        forks: 7420,
-        openIssues: 312,
-        pullRequests: 48,
-        lastCommit: 'i7j8k9l',
-        ciStatus: 'failure',
-        coverage: '64%',
-        license: 'MIT',
-        size: '86.4 Mo',
-    },
-    {
-        id: 'repo_4',
-        name: 'codeql-ci-nightlies',
-        description: 'Analyse de sécurité',
-        visibility: 'Public',
-        updatedAt: 'hier',
-        owner: 'John Snow',
-        language: 'YAML',
-        stars: 34,
-        forks: 3,
-        openIssues: 1,
-        pullRequests: 0,
-        lastCommit: 'm1n2o3p',
-        ciStatus: 'pending',
-        coverage: '—',
-        license: 'MIT',
-        size: '0.8 Mo',
-    },
-    {
-        id: 'repo_5',
-        name: 'dependabot-updates',
-        description: 'Mises à jour auto',
-        visibility: 'Public',
-        updatedAt: 'la semaine dernière',
-        owner: 'Ana Martins',
-        language: 'Ruby',
-        stars: 210,
-        forks: 18,
-        openIssues: 9,
-        pullRequests: 3,
-        lastCommit: 'q4r5s6t',
-        ciStatus: 'success',
-        coverage: '85%',
-        license: 'BSD-3-Clause',
-        size: '2.1 Mo',
-    },
-];
-const ciStatusLabel = {
-    success: 'Succès',
-    failure: 'Échec',
-    pending: 'En cours',
-};
-const ciStatusVariant = {
-    success: 'success',
-    failure: 'error',
-    pending: 'warning',
-};
-const manyColumns = [
-    {
-        id: 'name',
-        header: 'Repository',
-        width: 200,
-        renderCell: repo => _jsx(Typography, { children: repo.name }),
-    },
-    { id: 'owner', header: 'Propriétaire', width: 140, renderCell: repo => _jsx(Typography, { children: repo.owner }) },
-    {
-        id: 'visibility',
-        header: 'Visibilité',
-        width: 110,
-        renderCell: repo => (_jsx(Badge, { variant: repo.visibility === 'Public' ? 'info' : 'default', size: "sm", children: repo.visibility })),
-    },
-    { id: 'language', header: 'Langage', width: 110, renderCell: repo => _jsx(Typography, { children: repo.language }) },
-    {
-        id: 'stars',
-        header: 'Étoiles',
-        width: 100,
-        align: 'end',
-        sortable: true,
-        renderCell: repo => _jsx(Typography, { children: repo.stars.toLocaleString('fr-FR') }),
-    },
-    {
-        id: 'forks',
-        header: 'Forks',
-        width: 90,
-        align: 'end',
-        sortable: true,
-        renderCell: repo => _jsx(Typography, { children: repo.forks.toLocaleString('fr-FR') }),
-    },
-    {
-        id: 'openIssues',
-        header: 'Issues ouvertes',
-        width: 130,
-        align: 'end',
-        renderCell: repo => _jsx(Typography, { children: repo.openIssues }),
-    },
-    {
-        id: 'pullRequests',
-        header: 'Pull requests',
-        width: 130,
-        align: 'end',
-        renderCell: repo => _jsx(Typography, { children: repo.pullRequests }),
-    },
-    {
-        id: 'ciStatus',
-        header: 'CI',
-        width: 110,
-        renderCell: repo => (_jsx(Badge, { variant: ciStatusVariant[repo.ciStatus], size: "sm", children: ciStatusLabel[repo.ciStatus] })),
-    },
-    {
-        id: 'coverage',
-        header: 'Couverture',
-        width: 110,
-        align: 'end',
-        renderCell: repo => _jsx(Typography, { children: repo.coverage }),
-    },
-    {
-        id: 'lastCommit',
-        header: 'Dernier commit',
-        width: 130,
-        renderCell: repo => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '1V', style: { alignItems: 'center' }, children: [_jsx(LucideIcon, { name: "GitCommitHorizontal", size: "xs" }), _jsx(Typography, { style: { fontFamily: 'monospace' }, children: repo.lastCommit })] })),
-    },
-    {
-        id: 'updatedAt',
-        header: 'Mis à jour',
-        width: 150,
-        sortable: true,
-        renderCell: repo => _jsx(Typography, { children: repo.updatedAt }),
-    },
-    { id: 'license', header: 'Licence', width: 130, renderCell: repo => _jsx(Typography, { children: repo.license }) },
-    { id: 'size', header: 'Taille', width: 100, align: 'end', renderCell: repo => _jsx(Typography, { children: repo.size }) },
-];
 export const ManyColumns = () => (_jsx(DataTable, { data: repositoriesDetailed, columns: manyColumns, keyExtractor: repo => repo.id, selectable: true }));
 export const WithSorting = () => {
     const [sort, setSort] = React.useState({ columnId: 'updatedAt', direction: 'desc' });
@@ -282,8 +43,8 @@ export const WithSorting = () => {
         if (!sort)
             return repositories;
         const sorted = [...repositories].sort((a, b) => {
-            const left = a[sort.columnId];
-            const right = b[sort.columnId];
+            const left = new Map(Object.entries(a)).get(sort.columnId);
+            const right = new Map(Object.entries(b)).get(sort.columnId);
             return String(left).localeCompare(String(right));
         });
         return sort.direction === 'asc' ? sorted : sorted.reverse();
@@ -317,116 +78,19 @@ export const WithCustomCells = () => {
     return _jsx(DataTable, { data: repositories, columns: columns, keyExtractor: repo => repo.id });
 };
 export const WithoutHeader = () => (_jsx(DataTable, { data: repositories, columns: baseColumns, keyExtractor: repo => repo.id, hideHeader: true }));
+/**
+ * `stickyHeader` épingle l'en-tête en haut de son ascendant scrollable (web uniquement) : le
+ * `DataTable` ne défile lui-même qu'à l'horizontale, c'est donc au parent de fournir le scroll
+ * vertical — ici un `ScrollView` borné en hauteur, comme le ferait un écran de logs ou une longue
+ * liste. `tabIndex={0}` rend cette région scrollable atteignable au clavier (règle axe
+ * `scrollable-region-focusable`), comme l'exige tout conteneur qui défile sans être lui-même
+ * focusable.
+ */
+export const StickyHeader = () => (_jsx(ScrollView, { style: { maxHeight: 280 }, tabIndex: 0, children: _jsx(DataTable, { data: manyRepositories, columns: baseColumns, keyExtractor: repo => repo.id, stickyHeader: true }) }));
 export const WithPagination = () => {
     const [page, setPage] = React.useState(1);
     return (_jsx(DataTable, { data: repositories, columns: baseColumns, keyExtractor: repo => repo.id, footer: _jsx(DataTableFooter, { counter: "1-5 sur 48", children: _jsx(DataTablePagination, { page: page, pageCount: 10, onPageChange: setPage }) }) }));
 };
-const deployments = [
-    {
-        id: 'd1',
-        message: 'Bump follow-redirects from 1.15.9 to 1.16.0',
-        status: 'error',
-        duration: '1m 51s',
-        environment: 'preview',
-        commit: 'f3c020f',
-        source: 'dependabot/npm_and_yarn/follow-redirects…',
-        date: new Date('2026-07-15T14:32:00Z'),
-        author: 'dependabot',
-    },
-    {
-        id: 'd2',
-        message: 'Bump axios from 1.8.4 to 1.15.0',
-        status: 'error',
-        duration: '1m 51s',
-        environment: 'preview',
-        commit: 'f0e960b',
-        source: 'dependabot/npm_and_yarn/axios-1.15.0',
-        date: new Date('2026-07-11T09:12:00Z'),
-        author: 'dependabot',
-    },
-    {
-        id: 'd3',
-        message: 'Bump serialize-javascript et terser-webpack-plugin',
-        status: 'error',
-        duration: '1m 43s',
-        environment: 'preview',
-        commit: '638473a',
-        source: 'dependabot/npm_and_yarn/multi-0d13b2d87f',
-        date: new Date('2026-06-29T18:47:00Z'),
-        author: 'dependabot',
-    },
-    {
-        id: 'd4',
-        message: 'Bump yaml',
-        status: 'error',
-        duration: '1m 55s',
-        environment: 'preview',
-        commit: 'd59cb81',
-        source: 'dependabot/npm_and_yarn/multi-c136cad177',
-        date: new Date('2026-06-26T07:58:00Z'),
-        author: 'dependabot',
-    },
-    {
-        id: 'd5',
-        message: '✨ Merge pull request #9 — mdast-util-to-hast 13.2.1',
-        status: 'ready',
-        duration: '2m 1s',
-        environment: 'production',
-        promoted: true,
-        commit: '9d71b6c',
-        source: 'main',
-        date: new Date('2025-12-02T14:04:32Z'),
-        author: 'cprodhomme',
-    },
-    {
-        id: 'd6',
-        message: 'Bump mdast-util-to-hast from 13.2.0 à 13.2.1',
-        status: 'ready',
-        duration: '1m 58s',
-        environment: 'preview',
-        commit: '9bdc055',
-        source: 'dependabot/npm_and_yarn/mdast-util-to-ha…',
-        date: new Date('2025-12-02T13:58:00Z'),
-        author: 'dependabot',
-    },
-    {
-        id: 'd7',
-        message: '🎨 Ajoute un style sur le blog',
-        status: 'ready',
-        duration: '51s',
-        environment: 'production',
-        commit: '7c70351',
-        source: 'main',
-        date: new Date('2026-04-18T10:21:00Z'),
-        author: 'cprodhomme',
-    },
-    {
-        id: 'd8',
-        message: '✨ feat(posts): add metaDescription field',
-        status: 'ready',
-        duration: '49s',
-        environment: 'production',
-        commit: 'ff3f424',
-        source: 'main',
-        date: new Date('2026-04-18T09:47:00Z'),
-        author: 'cprodhomme',
-    },
-];
-const localTimeZoneLabel = (() => {
-    const offsetMinutes = -new Date().getTimezoneOffset();
-    const sign = offsetMinutes >= 0 ? '+' : '-';
-    return `GMT${sign}${Math.abs(offsetMinutes) / 60}`;
-})();
-const formatTimestamp = (date, timeZone) => new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long', timeStyle: 'medium', timeZone }).format(date);
-const DeploymentDateCell = ({ deployment }) => {
-    const [open, setOpen] = React.useState(false);
-    const { text, color } = useTheme();
-    return (_jsx(Popover, { placement: "left", open: open, setOpen: setOpen, renderTrigger: () => (_jsx(Box, { onHoverIn: () => setOpen(true), onHoverOut: () => setOpen(false), children: _jsx(Typography, { style: { ...text['Corps de texte'].XS.Regular, color: color.light.text['mention-grey'] }, children: format(deployment.date, 'd MMM', { locale: fr }) }) })), children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: '1W', style: { minWidth: 260 }, onHoverIn: () => setOpen(true), onHoverOut: () => setOpen(false), children: [_jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatDistanceToNowStrict(deployment.date, { locale: fr, addSuffix: true }) }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', justify: "space-between", style: { alignItems: 'center' }, children: [_jsx(Tag, { color: "default", size: "sm", children: "UTC" }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatTimestamp(deployment.date, 'UTC') })] }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', justify: "space-between", style: { alignItems: 'center' }, children: [_jsx(Tag, { color: "default", size: "sm", children: localTimeZoneLabel }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatTimestamp(deployment.date) })] })] }) }));
-};
-const DeploymentActionsCell = () => {
-    const [open, setOpen] = React.useState(false);
-    return (_jsx(Box, { p: '1V', children: _jsxs(ActionMenu, { placement: "bottom-end", open: open, setOpen: setOpen, renderTrigger: () => (_jsx(Button, { variant: "tertiary", size: "sm", startIcon: "MoreHorizontal", accessibilityLabel: "Actions du d\u00E9ploiement" })), children: [_jsx(ActionMenu.Item, { title: "Voir les d\u00E9tails", icon: "Eye" }), _jsx(ActionMenu.Item, { title: "Red\u00E9ployer", icon: "RefreshCw" }), _jsx(ActionMenu.Item, { title: "Copier l'URL", icon: "Link" }), _jsx(ActionMenu.Item, { title: "Supprimer", icon: "Trash" })] }) }));
-};
 /**
  * Reproduction de la vue "Deployments" de Vercel avec nos composants : `Tag` pour les pastilles
  * d'environnement, `Badge` pour le statut, `Avatar` pour l'auteur, `ActionMenu` pour le menu contextuel
@@ -437,62 +101,6 @@ const DeploymentActionsCell = () => {
  */
 export const AsDeploymentList = () => {
     const { text, color } = useTheme();
-    const deploymentColumns = [
-        {
-            id: 'message',
-            header: 'Déploiement',
-            width: 400,
-            renderCell: deployment => _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: deployment.message }),
-        },
-        {
-            id: 'status',
-            header: 'Statut',
-            width: 140,
-            renderCell: deployment => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', style: { alignItems: 'center' }, children: [_jsx(Badge, { variant: deployment.status === 'error' ? 'error' : 'success', size: "sm", children: deployment.status === 'error' ? 'Error' : 'Ready' }), _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['mention-grey'] }, children: deployment.duration })] })),
-        },
-        {
-            id: 'environment',
-            header: 'Environnement',
-            width: 100,
-            renderCell: deployment => (_jsx(Tag, { color: deployment.promoted ? 'action' : 'default', size: "sm", children: deployment.environment === 'production' ? 'Production' : 'Preview' })),
-        },
-        {
-            id: 'commit',
-            header: 'Commit',
-            width: 110,
-            renderCell: deployment => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '1V', style: { alignItems: 'center' }, children: [_jsx(LucideIcon, { name: "GitCommitHorizontal", size: "sm" }), _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, fontFamily: 'monospace' }, children: deployment.commit })] })),
-        },
-        {
-            id: 'source',
-            header: 'Source',
-            width: 353,
-            renderCell: deployment => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '1V', style: { alignItems: 'center', minWidth: 0 }, children: [_jsx(LucideIcon, { name: "GitBranch", size: "sm" }), _jsx(Typography, { style: {
-                            ...text['Corps de texte'].SM.Regular,
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                        }, children: deployment.source })] })),
-        },
-        {
-            id: 'date',
-            header: 'Date',
-            width: 70,
-            renderCell: deployment => _jsx(DeploymentDateCell, { deployment: deployment }),
-        },
-        {
-            id: 'author',
-            header: '',
-            width: 56,
-            renderCell: deployment => _jsx(Avatar, { size: "sm", fallbackText: deployment.author }),
-        },
-        {
-            id: 'actions',
-            header: '',
-            width: 40,
-            align: 'end',
-            renderCell: () => _jsx(DeploymentActionsCell, {}),
-        },
-    ];
     return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: '3V', children: [_jsx(Typography, { style: { fontSize: 20, fontWeight: 700 }, children: "Deployments" }), _jsx(DataTable, { size: "md", data: deployments, columns: deploymentColumns, keyExtractor: deployment => deployment.id, hideHeader: true }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1W", children: [_jsx(Box, { children: _jsx(Button, { title: "Charger plus", variant: "secondary", size: "md", fullWidth: true }) }), _jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.Regular, color: color.light.text['mention-grey'] }, children: "La r\u00E9tention des d\u00E9ploiements est activ\u00E9e \u2014 certains seront supprim\u00E9s apr\u00E8s un d\u00E9lai." }), _jsx(Button, { title: "Voir les supprim\u00E9s", variant: "secondary", size: "sm" })] })] })] }));
 };
 export const Empty = () => (_jsx(DataTable, { data: [], columns: baseColumns, keyExtractor: repo => repo.id, renderNoContent: () => (_jsx(EmptyState, { title: "Aucun repository", description: "Cr\u00E9ez votre premier repository pour le voir appara\u00EEtre ici.", iconName: "FolderGit2" })) }));

package/dist/ui/DataTable/DataTable.stories.sources.d.ts

@@ -5,6 +5,7 @@ export declare const ManyColumns: () => string;
 export declare const WithSorting: () => string;
 export declare const WithCustomCells: () => string;
 export declare const WithoutHeader: () => string;
+export declare const StickyHeader: () => string;
 export declare const WithPagination: () => string;
 export declare const AsDeploymentList: () => string;
 export declare const Empty: () => string;
@@ -16,6 +17,7 @@ export declare const storySources: {
     readonly WithSorting: () => string;
     readonly WithCustomCells: () => string;
     readonly WithoutHeader: () => string;
+    readonly StickyHeader: () => string;
     readonly WithPagination: () => string;
     readonly AsDeploymentList: () => string;
     readonly Empty: () => string;

package/dist/ui/DataTable/DataTable.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+H,CAAC;AAEpJ,eAAO,MAAM,aAAa,cAAwJ,CAAC;AAEnL,eAAO,MAAM,KAAK,cAA43B,CAAC;AAE/4B,eAAO,MAAM,WAAW,cAA8J,CAAC;AAEvL,eAAO,MAAM,WAAW,cAA2uB,CAAC;AAEpwB,eAAO,MAAM,eAAe,cAAg/B,CAAC;AAE7gC,eAAO,MAAM,aAAa,cAAwJ,CAAC;AAEnL,eAAO,MAAM,cAAc,cAAwa,CAAC;AAEpc,eAAO,MAAM,gBAAgB,cAA+vH,CAAC;AAE7xH,eAAO,MAAM,KAAK,cAA0W,CAAC;AAE7X,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
+{"version":3,"file":"DataTable.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+H,CAAC;AAEpJ,eAAO,MAAM,aAAa,cAAwJ,CAAC;AAEnL,eAAO,MAAM,KAAK,cAA43B,CAAC;AAE/4B,eAAO,MAAM,WAAW,cAA8J,CAAC;AAEvL,eAAO,MAAM,WAAW,cAA6vB,CAAC;AAEtxB,eAAO,MAAM,eAAe,cAAg/B,CAAC;AAE7gC,eAAO,MAAM,aAAa,cAAwJ,CAAC;AAEnL,eAAO,MAAM,YAAY,cAAwO,CAAC;AAElQ,eAAO,MAAM,cAAc,cAAwa,CAAC;AAEpc,eAAO,MAAM,gBAAgB,cAAomC,CAAC;AAEloC,eAAO,MAAM,KAAK,cAA0W,CAAC;AAE7X,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}

package/dist/ui/DataTable/DataTable.stories.sources.js

@@ -4,11 +4,12 @@ export const Default = () => "export const Default = () => <DataTable data={repo
 export const WithSelection = () => "export const WithSelection = () => (\n  <DataTable data={repositories} columns={baseColumns} keyExtractor={repo => repo.id} selectable />\n);";
 export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={'4W'}>\n    <Box display=\"flex\" flexDirection=\"column\" gap={'1V'}>\n      <Typography style={{ fontWeight: 600 }}>sm (défaut)</Typography>\n      <DataTable data={repositories} columns={baseColumns} keyExtractor={repo => repo.id} selectable size=\"sm\" />\n    </Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={'1V'}>\n      <Typography style={{ fontWeight: 600 }}>md</Typography>\n      <DataTable data={repositories} columns={baseColumns} keyExtractor={repo => repo.id} selectable size=\"md\" />\n    </Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={'1V'}>\n      <Typography style={{ fontWeight: 600 }}>lg</Typography>\n      <DataTable data={repositories} columns={baseColumns} keyExtractor={repo => repo.id} selectable size=\"lg\" />\n    </Box>\n  </Box>\n);";
 export const ManyColumns = () => "export const ManyColumns = () => (\n  <DataTable data={repositoriesDetailed} columns={manyColumns} keyExtractor={repo => repo.id} selectable />\n);";
-export const WithSorting = () => "export const WithSorting = () => {\n  const [sort, setSort] = React.useState<DataTableSort | null>({ columnId: 'updatedAt', direction: 'desc' });\n\n  const sortedData = React.useMemo(() => {\n    if (!sort) return repositories;\n    const sorted = [...repositories].sort((a, b) => {\n      const left = a[sort.columnId as keyof Repository];\n      const right = b[sort.columnId as keyof Repository];\n      return String(left).localeCompare(String(right));\n    });\n    return sort.direction === 'asc' ? sorted : sorted.reverse();\n  }, [sort]);\n\n  return (\n    <DataTable\n      data={sortedData}\n      columns={baseColumns}\n      keyExtractor={repo => repo.id}\n      sort={sort}\n      onSortChange={setSort}\n    />\n  );\n};";
+export const WithSorting = () => "export const WithSorting = () => {\n  const [sort, setSort] = React.useState<DataTableSort | null>({ columnId: 'updatedAt', direction: 'desc' });\n\n  const sortedData = React.useMemo(() => {\n    if (!sort) return repositories;\n    const sorted = [...repositories].sort((a, b) => {\n      const left = new Map(Object.entries(a)).get(sort.columnId);\n      const right = new Map(Object.entries(b)).get(sort.columnId);\n      return String(left).localeCompare(String(right));\n    });\n    return sort.direction === 'asc' ? sorted : sorted.reverse();\n  }, [sort]);\n\n  return (\n    <DataTable\n      data={sortedData}\n      columns={baseColumns}\n      keyExtractor={repo => repo.id}\n      sort={sort}\n      onSortChange={setSort}\n    />\n  );\n};";
 export const WithCustomCells = () => "export const WithCustomCells = () => {\n  const columns: DataTableColumn<Repository>[] = [\n    {\n      id: 'name',\n      header: 'Repository',\n      renderCell: repo => (\n        <>\n          <Avatar size=\"xs\" fallbackText={repo.owner} />\n          <Typography style={{ marginLeft: 8 }}>{repo.name}</Typography>\n        </>\n      ),\n    },\n    {\n      id: 'owner',\n      header: 'Propriétaire',\n      renderCell: repo => <Typography>{repo.owner}</Typography>,\n    },\n    {\n      id: 'description',\n      header: 'Description',\n      renderCell: repo => <Typography>{repo.description}</Typography>,\n    },\n    {\n      id: 'visibility',\n      header: 'Visibilité',\n      align: 'end',\n      renderCell: repo => (\n        <Badge variant={repo.visibility === 'Public' ? 'info' : 'default'} size=\"sm\">\n          {repo.visibility}\n        </Badge>\n      ),\n    },\n  ];\n\n  return <DataTable data={repositories} columns={columns} keyExtractor={repo => repo.id} />;\n};";
 export const WithoutHeader = () => "export const WithoutHeader = () => (\n  <DataTable data={repositories} columns={baseColumns} keyExtractor={repo => repo.id} hideHeader />\n);";
+export const StickyHeader = () => "export const StickyHeader = () => (\n  <ScrollView style={{ maxHeight: 280 }} tabIndex={0}>\n    <DataTable data={manyRepositories} columns={baseColumns} keyExtractor={repo => repo.id} stickyHeader />\n  </ScrollView>\n);";
 export const WithPagination = () => "export const WithPagination = () => {\n  const [page, setPage] = React.useState(1);\n\n  return (\n    <DataTable\n      data={repositories}\n      columns={baseColumns}\n      keyExtractor={repo => repo.id}\n      footer={\n        <DataTableFooter counter=\"1-5 sur 48\">\n          <DataTablePagination page={page} pageCount={10} onPageChange={setPage} />\n        </DataTableFooter>\n      }\n    />\n  );\n};";
-export const AsDeploymentList = () => "export const AsDeploymentList = () => {\n  const { text, color } = useTheme();\n\n  const deploymentColumns: DataTableColumn<Deployment>[] = [\n    {\n      id: 'message',\n      header: 'Déploiement',\n      width: 400,\n      renderCell: deployment => <Typography style={text['Corps de texte'].SM.Regular}>{deployment.message}</Typography>,\n    },\n    {\n      id: 'status',\n      header: 'Statut',\n      width: 140,\n      renderCell: deployment => (\n        <Box display=\"flex\" flexDirection=\"row\" gap={'1W'} style={{ alignItems: 'center' }}>\n          <Badge variant={deployment.status === 'error' ? 'error' : 'success'} size=\"sm\">\n            {deployment.status === 'error' ? 'Error' : 'Ready'}\n          </Badge>\n          <Typography style={{ ...text['Corps de texte'].SM.Regular, color: color.light.text['mention-grey'] }}>\n            {deployment.duration}\n          </Typography>\n        </Box>\n      ),\n    },\n    {\n      id: 'environment',\n      header: 'Environnement',\n      width: 100,\n      renderCell: deployment => (\n        <Tag color={deployment.promoted ? 'action' : 'default'} size=\"sm\">\n          {deployment.environment === 'production' ? 'Production' : 'Preview'}\n        </Tag>\n      ),\n    },\n    {\n      id: 'commit',\n      header: 'Commit',\n      width: 110,\n      renderCell: deployment => (\n        <Box display=\"flex\" flexDirection=\"row\" gap={'1V'} style={{ alignItems: 'center' }}>\n          <LucideIcon name=\"GitCommitHorizontal\" size=\"sm\" />\n          <Typography style={{ ...text['Corps de texte'].SM.Regular, fontFamily: 'monospace' }}>\n            {deployment.commit}\n          </Typography>\n        </Box>\n      ),\n    },\n    {\n      id: 'source',\n      header: 'Source',\n      width: 353,\n      renderCell: deployment => (\n        <Box display=\"flex\" flexDirection=\"row\" gap={'1V'} style={{ alignItems: 'center', minWidth: 0 }}>\n          <LucideIcon name=\"GitBranch\" size=\"sm\" />\n          <Typography\n            style={{\n              ...text['Corps de texte'].SM.Regular,\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {deployment.source}\n          </Typography>\n        </Box>\n      ),\n    },\n    {\n      id: 'date',\n      header: 'Date',\n      width: 70,\n      renderCell: deployment => <DeploymentDateCell deployment={deployment} />,\n    },\n    {\n      id: 'author',\n      header: '',\n      width: 56,\n      renderCell: deployment => <Avatar size=\"sm\" fallbackText={deployment.author} />,\n    },\n    {\n      id: 'actions',\n      header: '',\n      width: 40,\n      align: 'end',\n      renderCell: () => <DeploymentActionsCell />,\n    },\n  ];\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={'3V'}>\n      <Typography style={{ fontSize: 20, fontWeight: 700 }}>Deployments</Typography>\n\n      <DataTable\n        size=\"md\"\n        data={deployments}\n        columns={deploymentColumns}\n        keyExtractor={deployment => deployment.id}\n        hideHeader\n      />\n\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"1W\">\n        <Box>\n          <Button title=\"Charger plus\" variant=\"secondary\" size=\"md\" fullWidth />\n        </Box>\n        <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center', justifyContent: 'space-between' }}>\n          <Typography style={{ ...text['Corps de texte'].XS.Regular, color: color.light.text['mention-grey'] }}>\n            La rétention des déploiements est activée — certains seront supprimés après un délai.\n          </Typography>\n          <Button title=\"Voir les supprimés\" variant=\"secondary\" size=\"sm\" />\n        </Box>\n      </Box>\n    </Box>\n  );\n};";
+export const AsDeploymentList = () => "export const AsDeploymentList = () => {\n  const { text, color } = useTheme();\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={'3V'}>\n      <Typography style={{ fontSize: 20, fontWeight: 700 }}>Deployments</Typography>\n\n      <DataTable\n        size=\"md\"\n        data={deployments}\n        columns={deploymentColumns}\n        keyExtractor={deployment => deployment.id}\n        hideHeader\n      />\n\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"1W\">\n        <Box>\n          <Button title=\"Charger plus\" variant=\"secondary\" size=\"md\" fullWidth />\n        </Box>\n        <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center', justifyContent: 'space-between' }}>\n          <Typography style={{ ...text['Corps de texte'].XS.Regular, color: color.light.text['mention-grey'] }}>\n            La rétention des déploiements est activée — certains seront supprimés après un délai.\n          </Typography>\n          <Button title=\"Voir les supprimés\" variant=\"secondary\" size=\"sm\" />\n        </Box>\n      </Box>\n    </Box>\n  );\n};";
 export const Empty = () => "export const Empty = () => (\n  <DataTable\n    data={[]}\n    columns={baseColumns}\n    keyExtractor={repo => repo.id}\n    renderNoContent={() => (\n      <EmptyState\n        title=\"Aucun repository\"\n        description=\"Créez votre premier repository pour le voir apparaître ici.\"\n        iconName=\"FolderGit2\"\n      />\n    )}\n  />\n);";
 export const storySources = {
     Default,
@@ -18,10 +19,12 @@ export const storySources = {
     WithSorting,
     WithCustomCells,
     WithoutHeader,
+    StickyHeader,
     WithPagination,
     AsDeploymentList,
     Empty,
 };
 export const storyDescriptions = {
+    StickyHeader: "`stickyHeader` épingle l'en-tête en haut de son ascendant scrollable (web uniquement) : le\n`DataTable` ne défile lui-même qu'à l'horizontale, c'est donc au parent de fournir le scroll\nvertical — ici un `ScrollView` borné en hauteur, comme le ferait un écran de logs ou une longue\nliste. `tabIndex={0}` rend cette région scrollable atteignable au clavier (règle axe\n`scrollable-region-focusable`), comme l'exige tout conteneur qui défile sans être lui-même\nfocusable.",
     AsDeploymentList: "Reproduction de la vue \"Deployments\" de Vercel avec nos composants : `Tag` pour les pastilles\nd'environnement, `Badge` pour le statut, `Avatar` pour l'auteur, `ActionMenu` pour le menu contextuel\n\"...\" de chaque ligne, et `Popover` sur la date pour afficher le détail (temps relatif + horodatage\nUTC et fuseau local), comme chez Vercel. Le pied de page est ici un simple slot `footer` (pas\n`DataTableFooter`, qui sert au duo compteur+pagination) : un bouton pleine largeur, puis une note de\nrétention accompagnée d'une action.",
 };