@alveole/components 1.8.4 → 1.10.0

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

@@ -0,0 +1,499 @@
+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 { 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 { useStyles } from './DataTable.styles';
+import { DataTableFooter } from './DataTableFooter';
+import { DataTablePagination } from './DataTablePagination';
+export default {
+    title: 'DataTable',
+    tags: ['ui'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1037-750',
+    description: `Tableau de données inspiré du [DataTable de Primer](https://primer.style/product/components/data-table/).
+
+Comme chez Primer, l'API est déclarative : on décrit les \`columns\` (\`id\`, \`header\`, \`renderCell\`, \`align\`, \`sortable\`, \`width\`) et on fournit les \`data\`, le composant se charge de la mise en page (bordures, alternance des cellules, alignement).
+
+- **Tri** : cliquer sur l'en-tête d'une colonne \`sortable\` fait cycler asc → desc → aucun tri. Le tri peut être piloté par le parent via \`sort\`/\`onSortChange\` (comme Primer, le tri des données reste à la charge du parent), ou laissé en gestion interne pour un simple affichage.
+- **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\`.`,
+    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' });
+    const sortedData = React.useMemo(() => {
+        if (!sort)
+            return repositories;
+        const sorted = [...repositories].sort((a, b) => {
+            const left = a[sort.columnId];
+            const right = b[sort.columnId];
+            return String(left).localeCompare(String(right));
+        });
+        return sort.direction === 'asc' ? sorted : sorted.reverse();
+    }, [sort]);
+    return (_jsx(DataTable, { data: sortedData, columns: baseColumns, keyExtractor: repo => repo.id, sort: sort, onSortChange: setSort }));
+};
+export const WithCustomCells = () => {
+    const columns = [
+        {
+            id: 'name',
+            header: 'Repository',
+            renderCell: repo => (_jsxs(_Fragment, { children: [_jsx(Avatar, { size: "xs", fallbackText: repo.owner }), _jsx(Typography, { style: { marginLeft: 8 }, children: repo.name })] })),
+        },
+        {
+            id: 'owner',
+            header: 'Propriétaire',
+            renderCell: repo => _jsx(Typography, { children: repo.owner }),
+        },
+        {
+            id: 'description',
+            header: 'Description',
+            renderCell: repo => _jsx(Typography, { children: repo.description }),
+        },
+        {
+            id: 'visibility',
+            header: 'Visibilité',
+            align: 'end',
+            renderCell: repo => (_jsx(Badge, { variant: repo.visibility === 'Public' ? 'info' : 'default', size: "sm", children: repo.visibility })),
+        },
+    ];
+    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 }));
+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
+ * "..." de chaque ligne, et `Popover` sur la date pour afficher le détail (temps relatif + horodatage
+ * UTC et fuseau local), comme chez Vercel. Le pied de page est ici un simple slot `footer` (pas
+ * `DataTableFooter`, qui sert au duo compteur+pagination) : un bouton pleine largeur, puis une note de
+ * rétention accompagnée d'une action.
+ */
+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" })) }));
+export * as Sources from './DataTable.stories.sources';

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

@@ -0,0 +1,25 @@
+export declare const Default: () => string;
+export declare const WithSelection: () => string;
+export declare const Sizes: () => string;
+export declare const ManyColumns: () => string;
+export declare const WithSorting: () => string;
+export declare const WithCustomCells: () => string;
+export declare const WithoutHeader: () => string;
+export declare const WithPagination: () => string;
+export declare const AsDeploymentList: () => string;
+export declare const Empty: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly WithSelection: () => string;
+    readonly Sizes: () => string;
+    readonly ManyColumns: () => string;
+    readonly WithSorting: () => string;
+    readonly WithCustomCells: () => string;
+    readonly WithoutHeader: () => string;
+    readonly WithPagination: () => string;
+    readonly AsDeploymentList: () => string;
+    readonly Empty: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
+//# sourceMappingURL=DataTable.stories.sources.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/DataTable/DataTable.stories.tsx
+export const Default = () => "export const Default = () => <DataTable data={repositories} columns={baseColumns} keyExtractor={repo => repo.id} />;";
+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 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 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 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,
+    WithSelection,
+    Sizes,
+    ManyColumns,
+    WithSorting,
+    WithCustomCells,
+    WithoutHeader,
+    WithPagination,
+    AsDeploymentList,
+    Empty,
+};
+export const storyDescriptions = {
+    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.",
+};