@alveole/components 1.8.4 → 1.10.0

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DataTableColumn, DataTableSize, DataTableSort } from './DataTable.types';
+export type DataTableProps<Row> = {
+    columns: DataTableColumn<Row>[];
+    data: Row[];
+    keyExtractor: (row: Row, index: number) => string;
+    /** Densité du tableau : influence les paddings des cellules. @default 'sm' */
+    size?: DataTableSize;
+    selectable?: boolean;
+    /** Contrôlé : clés des lignes sélectionnées. Sans valeur, la sélection est gérée en interne. */
+    selectedKeys?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+    /** Contrôlé : colonne/direction de tri actives. Sans valeur, le tri est géré en interne (non appliqué aux données, voir `onSortChange`). */
+    sort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    onRowPress?: (row: Row, index: number) => void;
+    /**
+     * Masque la ligne d'en-têtes de colonnes (labels, icônes de tri, case "tout sélectionner").
+     * Le tri reste utilisable via `sort`/`onSortChange` piloté depuis l'extérieur (ex. un menu).
+     */
+    hideHeader?: boolean;
+    renderNoContent?: () => React.ReactNode;
+    /** Rendu en bas du tableau, typiquement un <DataTableFooter/> avec compteur + <DataTablePagination/>. */
+    footer?: React.ReactNode;
+};
+export declare const DataTable: <Row>(props: DataTableProps<Row>) => React.JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAgBlF,MAAM,MAAM,cAAc,CAAC,GAAG,IAAI;IAChC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAElD,8EAA8E;IAC9E,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gGAAgG;IAChG,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE7C,4IAA4I;IAC5I,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IAEpD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAExC,yGAAyG;IACzG,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,GAAG,EAAG,OAAO,cAAc,CAAC,GAAG,CAAC,sBAiHzD,CAAC"}

package/dist/ui/DataTable/DataTable.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { Box, Typography } from '../../core';
+import { CheckboxContainer, CheckboxIndicator } from '../Checkbox';
+import { useStyles } from './DataTable.styles';
+import { DataTableHeaderCell } from './DataTableHeaderCell';
+import { DataTableRow } from './DataTableRow';
+const headerSelectionCellStyleBySize = {
+    sm: 'headerSelectionCellSm',
+    md: 'headerSelectionCellMd',
+    lg: 'headerSelectionCellLg',
+};
+const headerRowStyleBySize = {
+    sm: 'headerRowSm',
+    md: 'headerRowMd',
+    lg: 'headerRowLg',
+};
+export const DataTable = (props) => {
+    const { columns, data, keyExtractor, size = 'md', selectable = false, selectedKeys: controlledSelectedKeys, onSelectionChange, sort: controlledSort, onSortChange, onRowPress, hideHeader = false, renderNoContent, footer, } = props;
+    const styles = useStyles();
+    const [internalSelectedKeys, setInternalSelectedKeys] = React.useState([]);
+    const selectedKeys = controlledSelectedKeys ?? internalSelectedKeys;
+    const setSelectedKeys = (keys) => {
+        onSelectionChange?.(keys);
+        if (controlledSelectedKeys === undefined)
+            setInternalSelectedKeys(keys);
+    };
+    const [internalSort, setInternalSort] = React.useState(null);
+    const sort = controlledSort !== undefined ? controlledSort : internalSort;
+    const setSort = (next) => {
+        onSortChange?.(next);
+        if (controlledSort === undefined)
+            setInternalSort(next);
+    };
+    const rowKeys = React.useMemo(() => data.map((row, index) => keyExtractor(row, index)), [data, keyExtractor]);
+    const allSelected = selectable && rowKeys.length > 0 && rowKeys.every(key => selectedKeys.includes(key));
+    const someSelected = selectable && !allSelected && rowKeys.some(key => selectedKeys.includes(key));
+    const toggleAll = () => setSelectedKeys(allSelected ? [] : rowKeys);
+    const toggleRow = (rowKey, checked) => {
+        setSelectedKeys(checked ? [...selectedKeys, rowKey] : selectedKeys.filter(key => key !== rowKey));
+    };
+    const handleHeaderPress = (column) => {
+        if (sort?.columnId !== column.id) {
+            setSort({ columnId: column.id, direction: 'asc' });
+        }
+        else if (sort.direction === 'asc') {
+            setSort({ columnId: column.id, direction: 'desc' });
+        }
+        else {
+            setSort(null);
+        }
+    };
+    return (_jsxs(Box, { tag: "data-table", style: styles.table, children: [_jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: true, contentContainerStyle: styles.scrollContent, children: [!hideHeader && (_jsxs(Box, { tag: "data-table-header-row", style: [styles.headerRow, styles[headerRowStyleBySize[size]]], children: [selectable && (_jsx(Box, { tag: "data-table-header-selection-cell", style: [styles.headerSelectionCell, styles[headerSelectionCellStyleBySize[size]]], children: _jsx(CheckboxContainer, { id: "data-table--select-all", variant: "small", checked: someSelected ? 'indeterminate' : allSelected, onCheckedChange: toggleAll, children: _jsx(CheckboxIndicator, { variant: "small", indeterminate: someSelected }) }) })), columns.map(column => (_jsx(DataTableHeaderCell, { column: column, sortDirection: sort?.columnId === column.id ? sort.direction : undefined, size: size, onPress: () => handleHeaderPress(column) }, column.id)))] })), data.map((row, index) => {
+                        const rowKey = rowKeys[index];
+                        return (_jsx(DataTableRow, { row: row, rowIndex: index, rowKey: rowKey, columns: columns, selectable: selectable, selected: selectedKeys.includes(rowKey), size: size, noBorderBottom: !footer && index === data.length - 1, onSelectedChange: checked => toggleRow(rowKey, checked), onPress: onRowPress ? () => onRowPress(row, index) : undefined }, rowKey));
+                    })] }), data.length === 0 && (_jsx(Box, { tag: "data-table-empty", style: styles.emptyState, children: renderNoContent ? renderNoContent() : _jsx(Typography, { style: styles.emptyStateLabel, children: "Aucune donn\u00E9e" }) })), footer] }));
+};

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

@@ -0,0 +1,205 @@
+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: () => {
+        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;
+        };
+        headerRow: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "stretch";
+            backgroundColor: string;
+            borderBottomWidth: number;
+            borderBottomColor: string;
+        };
+        headerRowSm: {
+            minHeight: number;
+        };
+        headerRowMd: {
+            minHeight: number;
+        };
+        headerRowLg: {
+            minHeight: number;
+        };
+        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;
+        };
+        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;
+        };
+        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;
+        };
+        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";
+        };
+        cellText: {
+            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        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;
+        };
+        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;
+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":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiB1B,wBAiBkB;AA+ElB,eAAO,MAAM,OAAO,yBAA+F,CAAC;AAEpH,eAAO,MAAM,aAAa,yBAEzB,CAAC;AAEF,eAAO,MAAM,KAAK,yBAejB,CAAC;AAgNF,eAAO,MAAM,WAAW,yBAEvB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAsBvB,CAAC;AAEF,eAAO,MAAM,eAAe,yBAmC3B,CAAC;AAEF,eAAO,MAAM,aAAa,yBAEzB,CAAC;AAEF,eAAO,MAAM,cAAc,yBAe1B,CAAC;AAuLF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,yBAkH5B,CAAC;AAEF,eAAO,MAAM,KAAK,yBAajB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}