@wilshop/dashboard 3.5.2

package/src/lib/components/data-table/data-table-utils.ts

@@ -0,0 +1,291 @@
+import { AccessorFnColumnDef, ExpandedState } from '@tanstack/react-table';
+import { AccessorKeyColumnDef } from '@tanstack/table-core';
+
+/**
+ * Returns the default column visibility configuration.
+ *
+ * @example
+ * ```ts
+ * const columnVisibility = getColumnVisibility(fields, {
+ *     id: false,
+ *     createdAt: false,
+ *     updatedAt: false,
+ * });
+ * ```
+ */
+export function getColumnVisibility(
+    columns: Array<AccessorKeyColumnDef<any> | AccessorFnColumnDef<any>>,
+    defaultVisibility?: Record<string, boolean | undefined>,
+    customFieldColumnNames?: string[],
+): Record<string, boolean> {
+    const allDefaultsTrue = defaultVisibility && Object.values(defaultVisibility).every(v => v === true);
+    const allDefaultsFalse = defaultVisibility && Object.values(defaultVisibility).every(v => v === false);
+    return {
+        id: false,
+        createdAt: false,
+        updatedAt: false,
+        ...(allDefaultsTrue ? { ...Object.fromEntries(columns.map(f => [f.id, false])) } : {}),
+        ...(allDefaultsFalse ? { ...Object.fromEntries(columns.map(f => [f.id, true])) } : {}),
+        // Make custom fields hidden by default unless overridden
+        ...(customFieldColumnNames
+            ? { ...Object.fromEntries(customFieldColumnNames.map(f => [f, false])) }
+            : {}),
+        ...defaultVisibility,
+        selection: true,
+        actions: true,
+    };
+}
+
+/**
+ * Ensures that the default column order always starts with `id`, `createdAt`, `deletedAt`
+ */
+export function getStandardizedDefaultColumnOrder<T extends string | number | symbol>(
+    defaultColumnOrder?: T[],
+): T[] {
+    const standardFirstColumns = new Set(['id', 'createdAt', 'updatedAt']);
+    if (!defaultColumnOrder) {
+        return [...standardFirstColumns] as T[];
+    }
+    const rest = defaultColumnOrder.filter(c => !standardFirstColumns.has(c as string));
+    return [...standardFirstColumns, ...rest] as T[];
+}
+
+/**
+ * Hierarchical item type with parent-child relationships
+ */
+export interface HierarchicalItem {
+    id: string;
+    parentId?: string | null;
+    breadcrumbs?: Array<{ id: string }>;
+    children?: Array<{ id: string }> | null;
+}
+
+/**
+ * Gets the parent ID of a hierarchical item
+ */
+export function getItemParentId<T extends HierarchicalItem>(
+    item: T | null | undefined,
+): string | null | undefined {
+    return item?.parentId || item?.breadcrumbs?.[0]?.id;
+}
+
+/**
+ * Gets all siblings (items with the same parent) for a given parent ID
+ */
+export function getItemSiblings<T extends HierarchicalItem>(
+    items: T[],
+    parentId: string | null | undefined,
+): T[] {
+    return items.filter(item => getItemParentId(item) === parentId);
+}
+
+/**
+ * Checks if moving an item to a new parent would create a circular reference
+ */
+export function isCircularReference<T extends HierarchicalItem>(
+    item: T,
+    targetParentId: string,
+    items: T[],
+): boolean {
+    const targetParentItem = items.find(i => i.id === targetParentId);
+    return (
+        item.children?.some(child => {
+            if (child.id === targetParentId) return true;
+            const targetBreadcrumbIds = targetParentItem?.breadcrumbs?.map(b => b.id) || [];
+            return targetBreadcrumbIds.includes(item.id);
+        }) ?? false
+    );
+}
+
+/**
+ * Result of calculating the target position for a drag and drop operation
+ */
+export interface TargetPosition {
+    targetParentId: string;
+    adjustedIndex: number;
+}
+
+/**
+ * Context for drag and drop position calculation
+ */
+interface DragContext<T extends HierarchicalItem> {
+    item: T;
+    targetItem: T | undefined;
+    previousItem: T | null;
+    isDraggingDown: boolean;
+    isTargetExpanded: boolean;
+    isPreviousExpanded: boolean;
+    sourceParentId: string;
+    items: T[];
+}
+
+/**
+ * Checks if dragging down directly onto an expanded item
+ */
+function isDroppingIntoExpandedTarget<T extends HierarchicalItem>(context: DragContext<T>): boolean {
+    const { isDraggingDown, targetItem, item, isTargetExpanded } = context;
+    return isDraggingDown && targetItem?.id !== item.id && isTargetExpanded;
+}
+
+/**
+ * Checks if dragging down into an expanded item's children area
+ */
+function isDroppingIntoExpandedPreviousChildren<T extends HierarchicalItem>(
+    context: DragContext<T>,
+): boolean {
+    const { isDraggingDown, targetItem, previousItem, item, isPreviousExpanded } = context;
+    return (
+        isDraggingDown &&
+        previousItem !== null &&
+        targetItem?.id !== item.id &&
+        isPreviousExpanded &&
+        targetItem?.parentId === previousItem.id
+    );
+}
+
+/**
+ * Checks if dragging up into an expanded item's children area
+ */
+function isDroppingIntoExpandedPreviousWhenDraggingUp<T extends HierarchicalItem>(
+    context: DragContext<T>,
+): boolean {
+    const { isDraggingDown, previousItem, isPreviousExpanded } = context;
+    return !isDraggingDown && previousItem !== null && isPreviousExpanded;
+}
+
+/**
+ * Creates a position for dropping into an expanded item as first child
+ */
+function createFirstChildPosition(parentId: string): TargetPosition {
+    return { targetParentId: parentId, adjustedIndex: 0 };
+}
+
+/**
+ * Calculates position for cross-parent drag operations
+ */
+function calculateCrossParentPosition<T extends HierarchicalItem>(
+    targetItem: T,
+    sourceParentId: string,
+    items: T[],
+): TargetPosition | null {
+    const targetItemParentId = getItemParentId(targetItem);
+
+    if (!targetItemParentId || targetItemParentId === sourceParentId) {
+        return null;
+    }
+
+    const targetSiblings = getItemSiblings(items, targetItemParentId);
+    const adjustedIndex = targetSiblings.findIndex(i => i.id === targetItem.id);
+
+    return { targetParentId: targetItemParentId, adjustedIndex };
+}
+
+/**
+ * Calculates position when dropping at the end of the list
+ */
+function calculateDropAtEndPosition<T extends HierarchicalItem>(
+    previousItem: T | null,
+    sourceParentId: string,
+    items: T[],
+): TargetPosition | null {
+    if (!previousItem) {
+        return null;
+    }
+
+    const previousItemParentId = getItemParentId(previousItem);
+
+    if (!previousItemParentId || previousItemParentId === sourceParentId) {
+        return null;
+    }
+
+    const targetSiblings = getItemSiblings(items, previousItemParentId);
+    return { targetParentId: previousItemParentId, adjustedIndex: targetSiblings.length };
+}
+
+/**
+ * Determines the target parent and index for a hierarchical drag and drop operation
+ */
+export function calculateDragTargetPosition<T extends HierarchicalItem>(params: {
+    item: T;
+    oldIndex: number;
+    newIndex: number;
+    items: T[];
+    sourceParentId: string;
+    expanded: ExpandedState;
+}): TargetPosition {
+    const { item, oldIndex, newIndex, items, sourceParentId, expanded } = params;
+
+    const targetItem = items[newIndex];
+    const previousItem = newIndex > 0 ? items[newIndex - 1] : null;
+
+    const context: DragContext<T> = {
+        item,
+        targetItem,
+        previousItem,
+        isDraggingDown: oldIndex < newIndex,
+        isTargetExpanded: targetItem ? !!expanded[targetItem.id as keyof ExpandedState] : false,
+        isPreviousExpanded: previousItem ? !!expanded[previousItem.id as keyof ExpandedState] : false,
+        sourceParentId,
+        items,
+    };
+
+    // Handle dropping into expanded items (becomes first child)
+    if (isDroppingIntoExpandedTarget(context)) {
+        return createFirstChildPosition(targetItem.id);
+    }
+
+    if (previousItem && isDroppingIntoExpandedPreviousChildren(context)) {
+        return createFirstChildPosition(previousItem.id);
+    }
+
+    if (previousItem && isDroppingIntoExpandedPreviousWhenDraggingUp(context)) {
+        return createFirstChildPosition(previousItem.id);
+    }
+
+    // Handle cross-parent drag operations
+    if (targetItem?.id !== item.id) {
+        const crossParentPosition = calculateCrossParentPosition(targetItem, sourceParentId, items);
+        if (crossParentPosition) {
+            return crossParentPosition;
+        }
+    }
+
+    // Handle dropping at the end of the list
+    if (!targetItem && previousItem) {
+        const dropAtEndPosition = calculateDropAtEndPosition(previousItem, sourceParentId, items);
+        if (dropAtEndPosition) {
+            return dropAtEndPosition;
+        }
+    }
+
+    // Default: stay in the same parent at the beginning
+    return { targetParentId: sourceParentId, adjustedIndex: 0 };
+}
+
+/**
+ * Calculates the adjusted sibling index when reordering within the same parent
+ */
+export function calculateSiblingIndex<T extends HierarchicalItem>(params: {
+    item: T;
+    oldIndex: number;
+    newIndex: number;
+    items: T[];
+    parentId: string;
+}): number {
+    const { item, oldIndex, newIndex, items, parentId } = params;
+
+    const siblings = getItemSiblings(items, parentId);
+    const oldSiblingIndex = siblings.findIndex(i => i.id === item.id);
+    const isDraggingDown = oldIndex < newIndex;
+
+    let newSiblingIndex = oldSiblingIndex;
+    const [start, end] = isDraggingDown ? [oldIndex + 1, newIndex] : [newIndex, oldIndex - 1];
+
+    for (let i = start; i <= end; i++) {
+        if (getItemParentId(items[i]) === parentId) {
+            newSiblingIndex += isDraggingDown ? 1 : -1;
+        }
+    }
+
+    return newSiblingIndex;
+}

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { closestCenter, DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Table } from '@tanstack/react-table';
+import { GripVertical, Settings2 } from 'lucide-react';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@lingui/react/macro';
+
+interface DataTableViewOptionsProps<TData> {
+    table: Table<TData>;
+}
+
+function SortableItem({ id, children }: { id: string; children: React.ReactNode }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <div ref={setNodeRef} style={style} className="flex items-center gap-.5">
+            <div {...attributes} {...listeners} className="cursor-grab">
+                <GripVertical className="h-4 w-4 text-muted-foreground" />
+            </div>
+            {children}
+        </div>
+    );
+}
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+    const { setTableSettings } = useUserSettings();
+    const { getTranslatedFieldName } = useDynamicTranslations();
+    const page = usePage();
+    const columns = table
+        .getAllColumns()
+        .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide());
+
+    const handleDragEnd = (event: any) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const activeIndex = columns.findIndex(col => col.id === active.id);
+            const overIndex = columns.findIndex(col => col.id === over.id);
+            // update the column order in the `columns` array
+            const newColumns = [...columns];
+            newColumns.splice(overIndex, 0, newColumns.splice(activeIndex, 1)[0]);
+            if (page?.pageId) {
+                setTableSettings(
+                    page.pageId,
+                    'columnOrder',
+                    newColumns.map(col => col.id),
+                );
+            }
+        }
+    };
+
+    const handleReset = () => {
+        if (page?.pageId) {
+            setTableSettings(page.pageId, 'columnOrder', undefined);
+            setTableSettings(page.pageId, 'columnVisibility', undefined);
+        }
+    };
+
+    return (
+        <div className="flex items-center gap-2">
+            <DropdownMenu modal={false}>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+                                <Settings2 />
+                            </Button>
+                        </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <Trans>Column settings</Trans>
+                    </TooltipContent>
+                </Tooltip>
+                <DropdownMenuContent align="end" className="overflow-auto">
+                    <ScrollArea className="max-h-[60vh]" type="always">
+                        <DndContext
+                            collisionDetection={closestCenter}
+                            onDragEnd={handleDragEnd}
+                            modifiers={[restrictToVerticalAxis]}
+                        >
+                            <SortableContext
+                                items={columns.map(col => col.id)}
+                                strategy={verticalListSortingStrategy}
+                            >
+                                {columns.map(column => (
+                                    <SortableItem key={column.id} id={column.id}>
+                                        <DropdownMenuCheckboxItem
+                                            className="capitalize"
+                                            checked={column.getIsVisible()}
+                                            onCheckedChange={value => column.toggleVisibility(value)}
+                                            onSelect={e => e.preventDefault()}
+                                        >
+                                            {getTranslatedFieldName(column.id)}
+                                        </DropdownMenuCheckboxItem>
+                                    </SortableItem>
+                                ))}
+                            </SortableContext>
+                        </DndContext>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onClick={handleReset}>
+                            <Trans>Reset</Trans>
+                        </DropdownMenuItem>
+                    </ScrollArea>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/lib/components/data-table/data-table.stories.tsx

@@ -0,0 +1,249 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { FullWidthPageBlock, Page, PageLayout } from '@/vdb/framework/layout-engine/page-layout.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { withDescription } from '../../../../.storybook/with-description.js';
+import { DataTable } from './data-table.js';
+
+// Sample data type
+interface Product {
+    id: string;
+    name: string;
+    category: string;
+    price: number;
+    stock: number;
+    status: 'active' | 'inactive' | 'discontinued';
+    createdAt: string;
+}
+
+// Sample data
+const sampleData: Product[] = Array.from({ length: 100 }, (_, i) => ({
+    id: `product-${i + 1}`,
+    name: `Product ${i + 1}`,
+    category: ['Electronics', 'Clothing', 'Home & Garden', 'Sports', 'Books'][i % 5],
+    price: Math.floor(Math.random() * 1000) + 10,
+    stock: Math.floor(Math.random() * 100),
+    status: (['active', 'inactive', 'discontinued'] as const)[i % 3],
+    createdAt: new Date(Date.now() - Math.random() * 10000000000).toISOString(),
+}));
+
+const meta = {
+    title: 'Framework/DataTable',
+    component: DataTable,
+    ...withDescription(import.meta.url, './data-table.js'),
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => {
+        const [page, setPage] = useState(1);
+        const [pageSize, setPageSize] = useState(10);
+        const [sorting, setSorting] = useState<SortingState>([{ id: 'name', desc: false }]);
+        const [filters, setFilters] = useState<ColumnFiltersState>([]);
+        const [searchTerm, setSearchTerm] = useState('');
+
+        // Define columns
+        const columns: ColumnDef<Product>[] = [
+            {
+                id: 'name',
+                accessorKey: 'name',
+                header: 'Product Name',
+                cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+            },
+            {
+                id: 'category',
+                accessorKey: 'category',
+                header: 'Category',
+                cell: ({ row }) => <span>{row.original.category}</span>,
+            },
+            {
+                id: 'price',
+                accessorKey: 'price',
+                header: 'Price',
+                cell: ({ row }) => <span>${row.original.price.toFixed(2)}</span>,
+            },
+            {
+                id: 'stock',
+                accessorKey: 'stock',
+                header: 'Stock',
+                cell: ({ row }) => {
+                    const stock = row.original.stock;
+                    return (
+                        <Badge variant={stock > 50 ? 'default' : stock > 20 ? 'secondary' : 'destructive'}>
+                            {stock}
+                        </Badge>
+                    );
+                },
+            },
+            {
+                id: 'status',
+                accessorKey: 'status',
+                header: 'Status',
+                cell: ({ row }) => {
+                    const status = row.original.status;
+                    return (
+                        <Badge
+                            variant={
+                                status === 'active'
+                                    ? 'default'
+                                    : status === 'inactive'
+                                      ? 'secondary'
+                                      : 'outline'
+                            }
+                        >
+                            {status}
+                        </Badge>
+                    );
+                },
+            },
+            {
+                id: 'createdAt',
+                accessorKey: 'createdAt',
+                header: 'Created',
+                cell: ({ row }) => new Date(row.original.createdAt).toLocaleDateString(),
+            },
+            {
+                id: 'actions',
+                header: 'Actions',
+                cell: ({ row }) => (
+                    <div className="flex gap-2">
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => console.log('Edit', row.original.id)}
+                        >
+                            Edit
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => console.log('Delete', row.original.id)}
+                        >
+                            Delete
+                        </Button>
+                    </div>
+                ),
+            },
+        ];
+
+        // Filter and sort data based on state
+        let filteredData = [...sampleData];
+
+        // Apply search filter
+        if (searchTerm) {
+            filteredData = filteredData.filter(item =>
+                item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+            );
+        }
+
+        // Apply column filters
+        filters.forEach(filter => {
+            if (filter.id === 'status' && Array.isArray(filter.value)) {
+                filteredData = filteredData.filter(item => filter.value.includes(item.status));
+            }
+            if (filter.id === 'category' && Array.isArray(filter.value)) {
+                filteredData = filteredData.filter(item => filter.value.includes(item.category));
+            }
+        });
+
+        // Apply sorting
+        if (sorting.length > 0) {
+            const sort = sorting[0];
+            filteredData.sort((a, b) => {
+                const aValue = a[sort.id as keyof Product];
+                const bValue = b[sort.id as keyof Product];
+                if (aValue < bValue) return sort.desc ? 1 : -1;
+                if (aValue > bValue) return sort.desc ? -1 : 1;
+                return 0;
+            });
+        }
+
+        const totalItems = filteredData.length;
+        const paginatedData = filteredData.slice((page - 1) * pageSize, page * pageSize);
+
+        return (
+            <div className="p-6">
+                <Page pageId="test-page">
+                    <PageLayout>
+                        <FullWidthPageBlock blockId="test-block">
+                            <DataTable
+                                columns={columns}
+                                data={paginatedData}
+                                totalItems={totalItems}
+                                page={page}
+                                itemsPerPage={pageSize}
+                                sorting={sorting}
+                                columnFilters={filters}
+                                defaultColumnVisibility={{
+                                    createdAt: false,
+                                }}
+                                onPageChange={(_, newPage, newPageSize) => {
+                                    setPage(newPage);
+                                    setPageSize(newPageSize);
+                                }}
+                                onSortChange={(_, newSorting) => {
+                                    setSorting(newSorting);
+                                }}
+                                onFilterChange={(_, newFilters) => {
+                                    setFilters(newFilters);
+                                    setPage(1); // Reset to first page when filters change
+                                }}
+                                onSearchTermChange={term => {
+                                    setSearchTerm(term);
+                                    setPage(1); // Reset to first page when search changes
+                                }}
+                                facetedFilters={{
+                                    status: {
+                                        title: 'Status',
+                                        options: [
+                                            { label: 'Active', value: 'active' },
+                                            { label: 'Inactive', value: 'inactive' },
+                                            { label: 'Discontinued', value: 'discontinued' },
+                                        ],
+                                    },
+                                    category: {
+                                        title: 'Category',
+                                        options: [
+                                            { label: 'Electronics', value: 'Electronics' },
+                                            { label: 'Clothing', value: 'Clothing' },
+                                            { label: 'Home & Garden', value: 'Home & Garden' },
+                                            { label: 'Sports', value: 'Sports' },
+                                            { label: 'Books', value: 'Books' },
+                                        ],
+                                    },
+                                }}
+                                bulkActions={[
+                                    {
+                                        label: 'Delete selected',
+                                        icon: 'trash',
+                                        onClick: (selectedItems: Product[]) => {
+                                            console.log('Delete selected:', selectedItems);
+                                        },
+                                    },
+                                    {
+                                        label: 'Export selected',
+                                        icon: 'download',
+                                        onClick: (selectedItems: Product[]) => {
+                                            console.log('Export selected:', selectedItems);
+                                        },
+                                    },
+                                ]}
+                                onRefresh={() => {
+                                    console.log('Refresh data');
+                                }}
+                            />
+                        </FullWidthPageBlock>
+                    </PageLayout>
+                </Page>
+            </div>
+        );
+    },
+};