@alveole/components 1.9.0 → 2.0.0-alpha

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

@@ -0,0 +1,211 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    shortDescription: string;
+    component: <Row>(props: import("./DataTable").DataTableProps<Row>) => React.JSX.Element;
+    styleFn: () => {
+        headerSelectionCell: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        headerSelectionCellSm: {
+            width: number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        headerSelectionCellMd: {
+            width: number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        headerSelectionCellLg: {
+            width: number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        selectionCell: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        selectionCellSm: {
+            width: number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        selectionCellMd: {
+            width: number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        selectionCellLg: {
+            width: number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        cell: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            minWidth: number;
+        };
+        cellSm: {
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        cellMd: {
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        cellLg: {
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        cellAlignEnd: {
+            justifyContent: "flex-end";
+        };
+        row: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "stretch";
+            backgroundColor: string;
+            borderBottomWidth: number;
+            borderBottomColor: string;
+        };
+        rowSm: {
+            minHeight: number;
+        };
+        rowMd: {
+            minHeight: number;
+        };
+        rowLg: {
+            minHeight: number;
+        };
+        rowHoverable: {
+            cursor: "pointer";
+        };
+        rowHover: {
+            backgroundColor: string;
+        };
+        rowSelected: {
+            backgroundColor: string;
+        };
+        headerRow: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "stretch";
+            backgroundColor: string;
+            borderBottomWidth: number;
+            borderBottomColor: string;
+        };
+        headerRowSm: {
+            minHeight: number;
+        };
+        headerRowMd: {
+            minHeight: number;
+        };
+        headerRowLg: {
+            minHeight: number;
+        };
+        headerRowSticky: {
+            position?: "sticky" | undefined;
+            top?: number | undefined;
+            zIndex?: number | undefined;
+        };
+        headerCell: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            gap: string | number;
+        };
+        headerCellSm: {
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        headerCellMd: {
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        headerCellLg: {
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        headerLabel: {
+            color: string;
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        headerLabelActive: {
+            color: string;
+        };
+        table: {
+            display: "flex";
+            flexDirection: "column";
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: import("@alveole/theme").Radius;
+            overflow: "hidden";
+            backgroundColor: string;
+        };
+        scrollContent: {
+            display: "flex";
+            flexDirection: "column";
+            flexGrow: number;
+            minWidth: string;
+        };
+        emptyState: {
+            display: "flex";
+            alignItems: "center";
+            justifyContent: "center";
+            padding: string | number;
+        };
+        emptyStateLabel: {
+            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithSelection: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const ManyColumns: () => React.JSX.Element;
+export declare const WithSorting: () => React.JSX.Element;
+export declare const WithCustomCells: () => React.JSX.Element;
+export declare const WithoutHeader: () => React.JSX.Element;
+/**
+ * `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 declare const StickyHeader: () => React.JSX.Element;
+export declare const WithPagination: () => React.JSX.Element;
+/**
+ * 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 declare const AsDeploymentList: () => React.JSX.Element;
+export declare const Empty: () => React.JSX.Element;
+export * as Sources from './DataTable.stories.sources';
+//# sourceMappingURL=DataTable.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwB1B,wBAkBkB;AAElB,eAAO,MAAM,OAAO,yBAA+F,CAAC;AAEpH,eAAO,MAAM,aAAa,yBAEzB,CAAC;AAEF,eAAO,MAAM,KAAK,yBAejB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAEvB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAsBvB,CAAC;AAEF,eAAO,MAAM,eAAe,yBAmC3B,CAAC;AAEF,eAAO,MAAM,aAAa,yBAEzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,yBAIxB,CAAC;AAEF,eAAO,MAAM,cAAc,yBAe1B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,yBA4B5B,CAAC;AAEF,eAAO,MAAM,KAAK,yBAajB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+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 { 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';
+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\`.
+- **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,
+};
+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" })] })] }));
+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 = 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();
+    }, [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 }));
+/**
+ * `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 }) }) }));
+};
+/**
+ * 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();
+    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,27 @@
+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 StickyHeader: () => 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 StickyHeader: () => 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,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

@@ -0,0 +1,30 @@
+// 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 = 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  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,
+    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.",
+};

package/dist/ui/DataTable/DataTable.styles.d.ts

@@ -0,0 +1,172 @@
+export declare const useStyles: () => {
+    headerSelectionCell: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    headerSelectionCellSm: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerSelectionCellMd: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerSelectionCellLg: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    selectionCell: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    selectionCellSm: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    selectionCellMd: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    selectionCellLg: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    cell: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        minWidth: number;
+    };
+    cellSm: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    cellMd: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    cellLg: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    cellAlignEnd: {
+        justifyContent: "flex-end";
+    };
+    row: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "stretch";
+        backgroundColor: string;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    rowSm: {
+        minHeight: number;
+    };
+    rowMd: {
+        minHeight: number;
+    };
+    rowLg: {
+        minHeight: number;
+    };
+    rowHoverable: {
+        cursor: "pointer";
+    };
+    rowHover: {
+        backgroundColor: string;
+    };
+    rowSelected: {
+        backgroundColor: string;
+    };
+    headerRow: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "stretch";
+        backgroundColor: string;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    headerRowSm: {
+        minHeight: number;
+    };
+    headerRowMd: {
+        minHeight: number;
+    };
+    headerRowLg: {
+        minHeight: number;
+    };
+    headerRowSticky: {
+        position?: "sticky" | undefined;
+        top?: number | undefined;
+        zIndex?: number | undefined;
+    };
+    headerCell: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: string | number;
+    };
+    headerCellSm: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerCellMd: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerCellLg: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerLabel: {
+        color: string;
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    headerLabelActive: {
+        color: string;
+    };
+    table: {
+        display: "flex";
+        flexDirection: "column";
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: import("@alveole/theme").Radius;
+        overflow: "hidden";
+        backgroundColor: string;
+    };
+    scrollContent: {
+        display: "flex";
+        flexDirection: "column";
+        flexGrow: number;
+        minWidth: string;
+    };
+    emptyState: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        padding: string | number;
+    };
+    emptyStateLabel: {
+        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+};
+//# sourceMappingURL=DataTable.styles.d.ts.map

package/dist/ui/DataTable/DataTable.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.styles.ts"],"names":[],"mappings":"AA+LA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}