@cryptlex/web-components 5.2.0 → 5.3.0

package/dist/components/data-table/data-table-filter.d.ts

@@ -0,0 +1,27 @@
+import { type OperationKeys } from "lib/components/data-table/data-table";
+import { type ApiFilters } from "lib/components/data-table/table-commons";
+import type { MultiSelectProps } from "lib/components/inputs/multi-select";
+export declare const FILTER_COMPARISON_OPERATORS: readonly ["eq", "ne", "cn", "nc", "sw", "ew", "in", "nin", "gt", "gte", "lt", "lte"];
+export type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];
+export declare const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string>;
+export type FilterConfig = {
+    type: 'enum';
+    options: MultiSelectProps['items'];
+} | {
+    type: 'id-search';
+    search: () => Promise<{
+        id: string;
+        name: string;
+    }[]>;
+} | {
+    type: 'id';
+} | {
+    type: 'bool';
+} | {
+    type: 'string';
+} | {
+    type: 'date';
+};
+export type FilterType = FilterConfig['type'];
+export type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;
+export declare function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table-filter.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDataTable } from "lib/components/data-table/data-table";
+import { TfDatePicker } from "lib/components/inputs/date-picker";
+import { TfIdSearchInput } from "lib/components/inputs/id-search";
+import { Button } from "lib/components/ui/button";
+import { EasyMenu, MenuItem } from "lib/components/ui/menu";
+import { Popover, PopoverTrigger } from "lib/components/ui/popover";
+import { useAppForm } from "lib/utils/form-hook";
+import { cn } from "lib/utils/primitives";
+import { useResourceFormatter } from "lib/utils/resource-names";
+import { Filter, Trash } from "lucide-react";
+import { useRef } from "react";
+export const FILTER_COMPARISON_OPERATORS = [
+    'eq',
+    'ne',
+    'cn',
+    'nc',
+    'sw',
+    'ew',
+    'in',
+    'nin',
+    'gt',
+    'gte',
+    'lt',
+    'lte',
+];
+export const COMPARISON_OPERATOR_LABELS = {
+    eq: 'equal to',
+    ne: 'not equal to',
+    cn: 'contains',
+    nc: 'does not contain',
+    sw: 'starts with',
+    ew: 'ends with',
+    in: 'includes',
+    nin: 'does not include',
+    gt: 'greater than',
+    gte: 'greater than or equal to',
+    lt: 'less than',
+    lte: 'less than or equal to',
+};
+const FilterOperations = {
+    'bool': ['eq'],
+    'enum': ['in', 'nin'],
+    'id': ['in', 'nin'],
+    'id-search': ['in', 'nin'],
+    'string': ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],
+    'date': ['lt', 'gt'],
+};
+export function DataTableFilter({ className, ...props }) {
+    const { filters, query, setFilters, filterConfig } = useDataTable();
+    // TODO focus
+    // const localFilterRefs = useRef([]);
+    const addFilterButtonRef = useRef(null);
+    const resourceFormatter = useResourceFormatter();
+    const DEFAULT_VALUES = {
+        // TODO, initialize with filters from tableState
+        filters: []
+    };
+    const form = useAppForm({
+        defaultValues: DEFAULT_VALUES,
+        onSubmit: ({ value }) => {
+            // TODO, instead of generic transformation, use type based tranform()
+            setFilters(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } }; }));
+        }
+    });
+    // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870
+    const filterKeys = Object.keys(filterConfig).sort();
+    return (_jsx("section", { ...props, className: cn("flex gap-icon items-center", className), children: _jsxs(PopoverTrigger, { onOpenChange: (o) => {
+                // Set filters when the popover closes
+                if (!o) {
+                    form.handleSubmit();
+                }
+                else {
+                    addFilterButtonRef.current?.focus();
+                }
+            }, children: [_jsx(Button, { active: filters.length > 0, isDisabled: query.isPending || filterKeys.length === 0, type: "button", size: 'icon', variant: 'neutral', children: _jsx(Filter, {}) }), _jsx(Popover, { className: "w-full p-icon", children: _jsx("form", { onSubmit: (e) => { e.preventDefault(); }, className: "flex flex-col gap-icon max-h-table overflow-auto ", children: _jsx(form.Field, { mode: "array", name: "filters", children: (field) => {
+                                return _jsxs(_Fragment, { children: [field.state.value.map((lf, i) => {
+                                            return (_jsxs("div", { className: "flex gap-icon items-center justify-normal", children: [_jsx("span", { className: "text-sm", children: resourceFormatter(lf.property) }), _jsx(form.AppField, { name: `filters[${i}].operator`, children: (sf) => (_jsx(sf.TfSingleSelect, { items: FilterOperations[lf.type].map(op => ({ id: op, label: _jsx(_Fragment, { children: COMPARISON_OPERATOR_LABELS[op] }) })) })) }, lf.id), lf.type === 'bool' && _jsx(form.AppField, { name: `filters[${i}].value`, children: (sf) => (_jsx(sf.TfCheckbox, {})) }), lf.type === 'date' && _jsx(form.AppField, { name: `filters[${i}].value`, children: (_) => (_jsx(TfDatePicker, {})) }), lf.type === 'id' && _jsx(form.AppField, { name: `filters[${i}].value`, children: (sf) => (_jsx(sf.TfTextField, {})) }), lf.type === 'string' && _jsx(form.AppField, { name: `filters[${i}].value`, children: (sf) => (_jsx(sf.TfTextField, {})) }), lf.type === 'enum' && _jsx(form.AppField, { name: `filters[${i}].value`, children: (sf) => (_jsx(sf.TfMultiSelect, { items: filterConfig[lf.property].options })) }), lf.type === 'id-search' && _jsx(form.AppField, { name: `filters[${i}].value`, children: (_) => (_jsx(TfIdSearchInput, { multiple: true, accessor: "id", searchFn: filterConfig[lf.property].search })) }), _jsx(Button, { type: "button", variant: "destructive", size: "icon", onPress: () => field.removeValue(i), children: _jsx(Trash, {}) })] }, lf.id));
+                                        }), _jsxs("div", { className: "flex w-full items-center justify-end gap-2 not-first:mt-icon", children: [_jsx(EasyMenu, { label: "Add Filter", children: filterKeys.map(k => _jsx(MenuItem, { onAction: () => {
+                                                            //@ts-ignore
+                                                            const type = filterConfig[k].type;
+                                                            const defaultValue = (t) => {
+                                                                // TODO, ensure exhaustive???
+                                                                switch (t) {
+                                                                    case 'bool':
+                                                                        return true;
+                                                                    case 'string':
+                                                                        return '';
+                                                                    case 'date':
+                                                                        return new Date().toISOString();
+                                                                    case 'id':
+                                                                        return '';
+                                                                    case 'id-search':
+                                                                        return [];
+                                                                    case 'enum':
+                                                                        return [];
+                                                                }
+                                                            };
+                                                            const newFilter = {
+                                                                id: `${k}-${Date.now()}`,
+                                                                operator: FilterOperations[type][0],
+                                                                //@ts-ignore
+                                                                value: defaultValue(type),
+                                                                type: type,
+                                                                property: k,
+                                                            };
+                                                            field.pushValue(newFilter);
+                                                            // TODO Focus to ref
+                                                        }, className: "dropdown-item", children: resourceFormatter(k) }, k)) }), field.state.value.length > 0 ? (_jsx(Button, { type: "button", variant: "neutral", onPress: () => { field.setValue([]); }, children: "Reset filters" })) : null] })] });
+                            } }) }) })] }) }));
+}
+;

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

@@ -0,0 +1,73 @@
+import type { components, operations } from "@cryptlex/web-api-types";
+import { type ColumnDef, type TableState, type VisibilityState } from "@tanstack/react-table";
+import React from "react";
+/** Reserved name for actions column */
+export declare const ACTIONS_COLUMN_ID = "tableActions";
+export type Schemas = ApiSchema<keyof components['schemas']>;
+export type OperationKeys = keyof operations;
+type DataTableFactory<TData extends Schemas> = {
+    fetchFn: TableFetchFn<TData, OperationKeys>;
+    columns: ColumnDef<TData, any>[];
+    allowSelection?: boolean;
+    columnsToHideByDefault?: VisibilityState;
+    filterConfig: FiltersConfig<OperationKeys>;
+};
+type DataTableState = Pick<TableState, 'sorting' | 'rowSelection' | 'pagination'> & {};
+/**
+ * Hook for handling all data-table state. Used in DataTableContext
+ */
+export declare function useDataTableState<TData extends Schemas>({ columns, fetchFn, columnsToHideByDefault, allowSelection, filterConfig }: DataTableFactory<TData>): {
+    tableState: Pick<TableState, "sorting" | "rowSelection" | "pagination">;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: import("@tanstack/react-query").UseQueryResult<{
+        total: number;
+        data: TData[] | undefined;
+    }, Error>;
+    setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+    searchQuery: string;
+    tanTable: import("@tanstack/react-table").Table<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: React.Dispatch<React.SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, import("lib/components/data-table/data-table-filter").FilterConfig>>;
+};
+export declare const DataTableContext: React.Context<{
+    tableState: Pick<TableState, "sorting" | "rowSelection" | "pagination">;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: import("@tanstack/react-query").UseQueryResult<{
+        total: number;
+        data: Schemas[] | undefined;
+    }, Error>;
+    setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+    searchQuery: string;
+    tanTable: import("@tanstack/react-table").Table<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: React.Dispatch<React.SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, import("lib/components/data-table/data-table-filter").FilterConfig>>;
+} | null>;
+export declare const useDataTable: () => {
+    tableState: Pick<TableState, "sorting" | "rowSelection" | "pagination">;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: import("@tanstack/react-query").UseQueryResult<{
+        total: number;
+        data: Schemas[] | undefined;
+    }, Error>;
+    setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+    searchQuery: string;
+    tanTable: import("@tanstack/react-table").Table<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: React.Dispatch<React.SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, import("lib/components/data-table/data-table-filter").FilterConfig>>;
+};
+export declare function DataTableProvider({ children, ...props }: {
+    children: React.ReactNode;
+} & ReturnType<typeof useDataTableState>): import("react/jsx-runtime").JSX.Element;
+export type DataTableProps = React.ComponentProps<'section'> & {
+    tableActions: TableActions;
+};
+export declare function DataTable({ tableActions, className, ...props }: DataTableProps): import("react/jsx-runtime").JSX.Element;
+import { type FiltersConfig } from "lib/components/data-table/data-table-filter";
+import { type ApiFilters, type ApiSchema, type TableActions, type TableFetchFn } from "lib/components/data-table/table-commons";
+export {};

package/dist/components/data-table/data-table.js

@@ -0,0 +1,265 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { ArrowDownNarrowWide, ArrowDownWideNarrow, ArrowUpDown, Columns3, GripVertical, Info } from "lucide-react";
+import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
+/** Reserved name for actions column */
+export const ACTIONS_COLUMN_ID = "tableActions";
+/**
+ * Hook for handling all data-table state. Used in DataTableContext
+ */
+export function useDataTableState({ columns, fetchFn, columnsToHideByDefault = {}, allowSelection = false, filterConfig }) {
+    const id = useId();
+    // TODO: Would it be better for this state to be more granular?
+    const [tableState, _setTableState] = useState({
+        /** TODO Reflect in URL  */
+        pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state
+        sorting: [], // Sorting state
+        /** Ephemeral */
+        rowSelection: {}, // Row selection state
+    });
+    /** TODO Reflect in URL  */
+    const [searchQuery, setSearchQuery] = useState('');
+    /** TODO Store on browser as preference */
+    const [columnOrder, setColumnOrder] = useState([]);
+    // TODO Store on browser
+    const [columnVisibility, setColumnVisibility] = useState({
+        id: false,
+        updatedAt: false,
+        ...columnsToHideByDefault,
+    });
+    const [filters, setFilters] = useState([]);
+    const mergedFilters = useMemo(() => {
+        return filters.reduce((acc, current) => {
+            return merge(acc, current);
+        }, {});
+    }, [filters]);
+    // Update table state with new values
+    const updateTableState = (updates) => {
+        _setTableState((prev) => ({ ...prev, ...updates }));
+    };
+    const { sorting, rowSelection, pagination, } = tableState;
+    const query = useQuery({
+        queryKey: [id, pagination, sorting, searchQuery],
+        queryFn: () => fetchFn(pagination, sorting, searchQuery, mergedFilters),
+        placeholderData: keepPreviousData, // Keep previous data while loading new data
+        retry: 0,
+        refetchOnWindowFocus: false,
+    });
+    useEffect(() => {
+        // TODO, store in localStorage
+    }, [columnVisibility]);
+    const columnHelper = useMemo(() => createColumnHelper(), []);
+    const metadataColumns = useMemo(() => {
+        const data = query.data?.data;
+        if (!data?.length)
+            return [];
+        const rowHasMetadata = (row) => row != null &&
+            typeof row === 'object' &&
+            'metadata' in row &&
+            Array.isArray((row).metadata);
+        const rowsWithMeta = data.filter(rowHasMetadata);
+        if (rowsWithMeta.length === 0)
+            return [];
+        const keys = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));
+        return keys.map(key => columnHelper.accessor((row) => {
+            if (rowHasMetadata(row)) {
+                return row?.metadata?.find(m => m.key === key)?.value ?? '';
+            }
+            return '';
+        }, {
+            id: key,
+            header: key, // tooltip header
+            enableSorting: false,
+            cell: (info) => {
+                const value = info.getValue();
+                // Handle null/undefined values
+                if (value === null || value === undefined)
+                    return "";
+                // For primitive types, return the string representation
+                return String(value);
+            },
+        }));
+    }, [query.data?.data]);
+    /**
+     * ID,createdAt and updatedAt will be added by default for all tables
+     * If selection is allowed, checkbox will be added
+     * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)
+     * If there are actions for the table, they will be placed fixed at the right side of table.
+     */
+    const cols = [
+        ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),
+        ...TABLE_ID_COLUMN,
+        ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),
+        ...(metadataColumns.length ? metadataColumns : []),
+        ...TABLE_DEFAULT_DATE_COLUMNS,
+        // Actions column
+        ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),
+    ];
+    // Type-guard for updater
+    function isUpdaterFunction(updater) {
+        return typeof updater === "function";
+    }
+    // Utility function to resolve updater
+    function resolveUpdater(updater, currentValue) {
+        if (isUpdaterFunction(updater)) {
+            return updater(currentValue);
+        }
+        return updater;
+    }
+    // Use react-table's hook to create the table instance
+    const tanTable = useReactTable({
+        data: query.data?.data ?? [],
+        columns: cols,
+        getCoreRowModel: getCoreRowModel(),
+        rowCount: query.data?.total,
+        manualPagination: true, // Handle pagination manually since pagination is done server side for data tables
+        onPaginationChange: (updater) => {
+            updateTableState({ pagination: resolveUpdater(updater, pagination) });
+        },
+        manualSorting: true, // Handle sorting manually since sorting is done server side for data tables
+        onSortingChange: (updater) => {
+            updateTableState({ sorting: [...resolveUpdater(updater, sorting)], rowSelection: {} }); // Reset selection when sorting.
+        },
+        manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables
+        onColumnVisibilityChange: (updater) => {
+            setColumnVisibility(resolveUpdater(updater, columnVisibility));
+        },
+        onRowSelectionChange: (updater) => {
+            updateTableState({ rowSelection: resolveUpdater(updater, rowSelection) });
+        },
+        onColumnOrderChange: (updater) => {
+            setColumnOrder(resolveUpdater(updater, columnOrder));
+        },
+        state: {
+            sorting: sorting,
+            columnVisibility: columnVisibility,
+            pagination: pagination,
+            rowSelection: rowSelection,
+            columnOrder: columnOrder
+        },
+        meta: {
+            refetch: query.refetch,
+        },
+    });
+    // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.
+    // This populates the columnIds in the columnOrder state
+    // TODO, add localStorage access layer for this. 
+    useEffect(() => {
+        setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);
+    }, []);
+    return { tableState, updateTableState, query, setSearchQuery, searchQuery, tanTable, mergedFilters, filters, setFilters, filterConfig };
+}
+export const DataTableContext = createContext(null);
+export const useDataTable = () => {
+    const ctx = useContext(DataTableContext);
+    if (!ctx) {
+        throw Error("DataTable should be used within DataTableProvider.");
+    }
+    return ctx;
+};
+export function DataTableProvider({ children, ...props }) {
+    return (_jsx(DataTableContext.Provider, { value: props, children: children }));
+}
+export function DataTable({ tableActions, className, ...props
+// filterableFields,
+ }) {
+    // State for managing table data and filters
+    const { query, tanTable } = useDataTable();
+    return (_jsx(_Fragment, { children: _jsxs("section", { ...props, className: cn("flex flex-col bg-card", className), children: [_jsx(Actions, { tableActions: tableActions }), _jsxs("div", { className: "w-full overflow-auto border-x grow min-h-table relative", tabIndex: 0, children: [query.isLoading && (_jsx(TableOverlay, { className: "cursor-wait", children: _jsx(Loader, {}) })), !query.isLoading && tanTable.getRowModel().rows.length === 0 && (
+                        // Empty table
+                        _jsx(TableOverlay, { className: "cursor-not-allowed", children: !query.isFetching &&
+                                (query.isError ? (_jsxs("span", { className: "flex gap-3 justify-center items-center", children: [_jsx(Info, {}), _jsx("span", { children: "You don't have the required permissions. Please contact your admin." })] })) : !query.data?.data ? (_jsx(_Fragment, { children: "No results found." })) : (_jsx(_Fragment, { children: "Unknown error. Please contact customer support." }))) })), !query.isLoading && tanTable.getRowModel().rows.length !== 0 &&
+                            _jsx(TableContent, { className: "size-full" })] }), _jsxs("div", { className: "flex w-full justify-between border gap-icon p-icon overflow-x-auto", children: [_jsxs("div", { className: "flex gap-icon", children: [_jsx(ColumnPicker, {}), _jsx(PageSize, {})] }), _jsx(Paginator, {})] })] }) }));
+}
+/** Table overlay to be shown for loaders or other messages */
+function TableOverlay({ children, className, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: cn(className, "absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center"), children: children }), _jsx("span", { className: "relative h-full w-0 block" })] }));
+}
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+function ColumnPicker() {
+    const { tanTable } = useDataTable();
+    const [activeId, setActiveId] = useState(null);
+    const resourceFormatter = useResourceFormatter();
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: (event) => {
+            const { active } = event;
+            setActiveId(active.id.toString());
+        }, onDragEnd: (event) => {
+            const { active, over } = event;
+            if (over && active.id !== over.id) {
+                const columnOrder = tanTable.getState().columnOrder;
+                const oldIndex = columnOrder.indexOf(active.id.toString());
+                const newIndex = columnOrder.indexOf(over.id.toString());
+                tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);
+            }
+            setActiveId(null);
+        }, children: _jsxs(SortableContext, { items: tanTable.getState().columnOrder, strategy: verticalListSortingStrategy, children: [_jsxs(EasyMenu, { label: _jsxs(_Fragment, { children: [_jsx(Columns3, {}), "Columns"] }), selectionMode: "multiple", items: tanTable.getAllFlatColumns(), selectedKeys: tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id), children: [_jsx(MenuItem, { onAction: () => tanTable.toggleAllColumnsVisible(), className: 'italic', children: "(select all)" }), tanTable.getState().columnOrder.map(colId => {
+                            const col = tanTable.getAllFlatColumns().find(c => c.id === colId);
+                            if (!col)
+                                return null;
+                            return _jsx(SortableItem, { column: col }, col.id);
+                        })] }), _jsx(DragOverlay, { children: activeId ? _jsx("div", { className: "dropdown-item opacity-70 border-2 border-primary", children: resourceFormatter(activeId) }) : null })] }) }));
+    function SortableItem({ column }) {
+        const { attributes, listeners, setNodeRef, transform, transition, } = useSortable({ id: column.id });
+        const style = {
+            transform: CSS.Transform.toString(transform),
+            transition,
+            zIndex: '999'
+        };
+        return _jsxs(MenuItem, { ref: setNodeRef, style: style, ...attributes, id: column.id, onAction: () => column.toggleVisibility(), isDisabled: !column.getCanHide(), className: "flex items-center", children: [_jsx(GripVertical, { ...listeners, className: "size-icon cursor-grab" }), resourceFormatter(column.id), column.getIsSorted() && _jsx(SortIcon, { className: "size-icon", direction: column.getIsSorted() })] });
+    }
+}
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, } from "lucide-react";
+function Paginator() {
+    const { tanTable, query } = useDataTable();
+    const rowCount = query.data?.total ?? 0;
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "whitespace-nowrap caption text-muted", children: `${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min((tanTable.getState().pagination.pageIndex + 1) *
+                    tanTable.getState().pagination.pageSize, rowCount)} of ${rowCount?.toLocaleString()}` }), _jsx(Button, { onPress: () => tanTable.firstPage(), isDisabled: !tanTable.getCanPreviousPage(), variant: "neutral", size: "icon", children: _jsx(ChevronFirst, {}) }), _jsx(Button, { onPress: () => tanTable.previousPage(), isDisabled: !tanTable.getCanPreviousPage(), variant: "neutral", size: "icon", children: _jsx(ChevronLeft, {}) }), _jsx(Button, { onPress: () => tanTable.nextPage(), isDisabled: !tanTable.getCanNextPage(), variant: "neutral", size: "icon", children: _jsx(ChevronRight, {}) }), _jsx(Button, { onClick: () => tanTable.lastPage(), isDisabled: !tanTable.getCanNextPage(), variant: "neutral", size: "icon", children: _jsx(ChevronLast, {}) })] }));
+}
+function PageSize() {
+    const { tanTable } = useDataTable();
+    const PAGE_SIZES = [10, 20, 30, 40, 50];
+    return (_jsx(EasyMenu, { label: tanTable.getState().pagination.pageSize.toString(), selectionMode: "single", selectedKeys: [tanTable.getState().pagination.pageSize.toString()], items: PAGE_SIZES.map(s => ({ id: s.toString(), value: s })), children: (items) => _jsx(MenuItem, { onAction: () => tanTable.setPageSize(items.value), children: items.value }) }));
+}
+import { RotateCw } from "lucide-react";
+function Actions({ tableActions }) {
+    const { query, tanTable, searchQuery, setSearchQuery } = useDataTable();
+    return (_jsxs("section", { className: "flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto", children: [_jsxs("div", { className: "flex gap-icon", children: [_jsx(Button, { isPending: query.isFetching, onClick: () => query.refetch(), variant: "neutral", size: "icon", children: _jsx(RotateCw, {}) }), tableActions
+                        .filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)
+                        .map((ta, i) => {
+                        const Icon = ta.icon;
+                        return (_jsx(Button, { type: "button", isDisabled: query.isFetching, className: "animate-in fade-in slide-in-from-left-15 duration-300 transition-transform", onPress: (e) => { ta.onClick(e, tanTable); }, size: 'icon', children: _jsx(Icon, {}) }, `${i}-${ta.bulk}`));
+                    })] }), _jsxs("div", { className: "flex gap-icon", children: [_jsx(DataTableFilter, {}), (_jsx(SearchField, { value: searchQuery, onChange: setSearchQuery }))] })] }));
+}
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+import { flexRender } from "@tanstack/react-table";
+import { DataTableFilter } from "lib/components/data-table/data-table-filter";
+import { TABLE_CHECK_BOX_COLUMN, TABLE_DEFAULT_DATE_COLUMNS, TABLE_ID_COLUMN } from "lib/components/data-table/table-commons";
+import { SearchField } from "lib/components/inputs/searchfield";
+import { Button } from "lib/components/ui/button";
+import { Loader } from "lib/components/ui/loader";
+import { EasyMenu, MenuItem } from "lib/components/ui/menu";
+import { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow, } from "lib/components/ui/table";
+import { cn } from "lib/utils/primitives";
+import { useResourceFormatter } from "lib/utils/resource-names";
+import { merge } from "lodash-es";
+function SortIcon({ direction, ...props }) {
+    if (direction === 'asc')
+        return _jsx(ArrowDownNarrowWide, { ...props });
+    else if (direction === 'desc')
+        return _jsx(ArrowDownWideNarrow, { ...props });
+    else
+        return _jsx(ArrowUpDown, { ...props });
+}
+// TODO, automate checking valid HTML
+function TableContent({ className }) {
+    const { tanTable } = useDataTable();
+    const tableCellStyle = (isSticky, className) => cn("animate-in fade-in slide-in-from-top-10", "px-icon py-2 text-left text-sm font-medium whitespace-nowrap", isSticky && "bg-card sticky right-0 z-50 text-center", className);
+    return (_jsxs(TableComponent, { className: cn(className), children: [_jsx(TableHeader, { className: "sticky top-0 z-10", children: tanTable.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: cn("h-input"), children: headerGroup.headers.map((header) => (_jsxs(TableHead, { className: tableCellStyle(false, "bg-card"), children: [!header.column.getCanSort() && !header.isPlaceholder
+                                && _jsx(_Fragment, { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && (_jsxs(Button, { variant: "ghost", className: "w-full !justify-start !px-1.5", onPress: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), _jsx(SortIcon, { direction: header.column.getIsSorted() })] }))] }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { className: "flex-1 overflow-y-auto relative", children: tanTable.getRowModel().rows.map((row) => (_jsx(TableRow, { className: cn("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"), "data-selected": row.getIsSelected(), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { className: tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }));
+}

package/dist/components/data-table/table-commons.d.ts

@@ -0,0 +1,56 @@
+import type { components, operations, paths } from "@cryptlex/web-api-types";
+import type { PaginationState, SortingState, Table } from "@tanstack/react-table";
+import type { LucideIcon } from "lucide-react";
+import type createClient from "openapi-fetch";
+import type { PressEvent } from "react-aria-components";
+export declare const TABLE_CHECK_BOX_COLUMN: import("@tanstack/react-table").AccessorKeyColumnDef<any, any>[];
+export declare const TABLE_ID_COLUMN: import("@tanstack/react-table").AccessorKeyColumnDef<any, any>[];
+export declare const TABLE_DEFAULT_DATE_COLUMNS: import("@tanstack/react-table").AccessorKeyColumnDef<any, any>[];
+export declare function formatDate(date: string | null | undefined): string | null;
+/**
+ * Format multiple license parameters (expired, suspended, revoked) into a single status
+ */
+export declare function getLicenseStatus(license: any): string;
+export declare function getValidityDisplay(validity: number | undefined): string;
+export declare function secondsToDuration(seconds: number): string;
+export declare function getValueFromData(data: any, accessor: string | number | symbol): any;
+export declare const ALL_OS: {
+    [key: string]: string;
+};
+export type VisibilityState<T> = {
+    [K in keyof T]?: boolean;
+};
+export type TableActions = ({
+    onClick: (e: PressEvent, t: Table<any>) => void;
+    bulk: boolean;
+    icon: LucideIcon;
+    tooltip?: string;
+})[];
+export type TableFetchFn<TData, TOperation extends keyof operations> = (p: PaginationState, s: SortingState, q: string, f: ApiFilters<TOperation>) => Promise<{
+    total: number;
+    data: TData[] | undefined;
+}>;
+/*** Type for hide some of the columns based on the dto of the particular page
+ ** `id`, `updatedAt` are by default hidden
+ */
+export type DefaultVisibilityState<T> = {
+    [K in keyof T]?: boolean;
+};
+type Client = ReturnType<typeof createClient<paths>>;
+type GetPaths = {
+    [P in keyof paths]: paths[P] extends {
+        get: any;
+    } ? P : never;
+}[keyof paths];
+export type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];
+export type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;
+export type ApiGetAllParameters = {
+    page: number;
+    limit: number;
+    search?: string;
+    sort?: string;
+};
+export type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>;
+export type ApiFilters<T extends keyof operations> = NonNullable<Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>>;
+export declare function createTableFetchFn<Return, Operation extends keyof operations>(ctxclient: Client, path: GetPaths): TableFetchFn<Return, Operation>;
+export {};