@k3-universe/react-kit 0.0.1

package/src/kit/builder/data-table/components/DataTable.tsx

@@ -0,0 +1,375 @@
+import * as React from 'react';
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  useReactTable,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type Table as ReactTable,
+  type SortingState,
+  type VisibilityState,
+  type PaginationState,
+} from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../shadcn/ui/table';
+import { cn } from '../../../../shadcn/lib/utils';
+import { Checkbox } from '../../../../shadcn/ui/checkbox';
+import { Button } from '../../../../shadcn/ui/button';
+import { Skeleton } from '../../../../shadcn/ui/skeleton';
+import { FormBuilder, type FormBuilderSectionConfig } from '../../form/components/FormBuilder';
+import type { DataTableFiltersProp, DataTableAction, DataTableBatchAction } from '../types';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../../shadcn/ui/accordion';
+import { RefreshCw, Loader2 } from 'lucide-react';
+import { DataTablePagination } from './DataTablePagination';
+import { DataTableViewOptions } from './DataTableViewOptions';
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  // Optional controlled states
+  loading: boolean;
+  sorting?: boolean;
+  sortingState?: SortingState;
+  onSortingChange?: (newState: SortingState) => void;
+  columnFilters?: boolean;
+  columnFiltersState?: ColumnFiltersState;
+  onColumnFiltersChange?: (newState: ColumnFiltersState) => void;
+  rowCount?: number;
+  pagination?: boolean;
+  paginationState?: PaginationState;
+  onPaginationChange?: (newState: PaginationState) => void;
+  columnVisibility?: boolean;
+  columnVisibilityState?: VisibilityState;
+  onColumnVisibilityChange?: (newState: VisibilityState) => void;
+  // Expose table instance
+  onTable?: (table: ReactTable<TData>) => void;
+  // UI
+  className?: string;
+  emptyText?: string;
+  // Filters UI (section-based or simple)
+  formFilters?: DataTableFiltersProp;
+  formFilterValues?: Record<string, unknown> | null;
+  onFormFilterChange?: (values: Record<string, unknown>) => void;
+  // Selection & Actions
+  selectable?: boolean;
+  actions?: DataTableAction[];
+  batchActions?: DataTableBatchAction<TData>[];
+  // Standard actions
+  showStandardActions?: boolean;
+  onRefresh?: () => void | Promise<void>;
+  // Row interactions
+  onRowClick?: (row: TData) => void;
+}
+
+export default function DataTable<TData, TValue>({
+  columns,
+  data,
+  loading,
+  sorting,
+  sortingState,
+  onSortingChange,
+  columnFilters,
+  columnFiltersState,
+  onColumnFiltersChange,
+  rowCount,
+  pagination,
+  onPaginationChange,
+  paginationState,
+  columnVisibility,
+  columnVisibilityState,
+  onColumnVisibilityChange,
+  onTable,
+  className,
+  emptyText = 'No results.',
+  formFilters,
+  formFilterValues,
+  onFormFilterChange,
+  selectable,
+  actions,
+  batchActions,
+  showStandardActions,
+  onRefresh,
+  onRowClick,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({});
+  const [internalSortingState, setInternalSortingState] = React.useState<SortingState>([]);
+  const [internalFiltersState, setInternalFiltersState] = React.useState<ColumnFiltersState>([]);
+  const [internalPaginationState, setInternalPaginationState] = React.useState<PaginationState>({ pageIndex: 0, pageSize: 10 });
+  const [internalVisibilityState, setInternalVisibilityState] = React.useState<VisibilityState>({});
+
+  const effectiveSortingState = sortingState ?? internalSortingState;
+  const effectiveFiltersState = columnFiltersState ?? internalFiltersState;
+  const effectiveVisibilityState = columnVisibilityState ?? internalVisibilityState;
+  const effectivePaginationState = paginationState ?? internalPaginationState;
+
+  const isPaginationEnabled = pagination;
+  const isManualPaginationEnabled = paginationState !== undefined && onPaginationChange !== undefined;
+  const isSortingEnabled = sorting;
+  const isColumnFiltersEnabled = columnFilters;
+  const isColumnVisibilityEnabled = columnVisibility;
+
+  // Build selection-aware columns by injecting a selection column at the start
+  const selectionColumn = React.useMemo<ColumnDef<TData, unknown>>(() => ({
+    id: '__select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={val => table.toggleAllPageRowsSelected(!!val)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={val => row.toggleSelected(!!val)}
+        aria-label="Select row"
+        onClick={e => e.stopPropagation()}
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    size: 32,
+    minSize: 32,
+    maxSize: 32,
+  }), []);
+
+  const renderedColumns = React.useMemo(
+    () => (selectable ? [selectionColumn as unknown as ColumnDef<TData, TValue>, ...columns] : columns),
+    [selectable, selectionColumn, columns]
+  );
+
+  const table = useReactTable({
+    data,
+    columns: renderedColumns,
+    initialState: {
+      pagination: effectivePaginationState,
+    },
+    rowCount,
+    state: {
+      sorting: effectiveSortingState,
+      columnFilters: effectiveFiltersState,
+      pagination: effectivePaginationState,
+      columnVisibility: effectiveVisibilityState,
+      ...(selectable ? { rowSelection } : {}),
+    },
+    enableRowSelection: !!selectable,
+    onRowSelectionChange: selectable ? setRowSelection : undefined,
+    manualPagination: isManualPaginationEnabled,
+    enableSorting: isSortingEnabled,
+    enableColumnFilters: isColumnFiltersEnabled,
+    onSortingChange: isSortingEnabled ? updater => {
+      const next = typeof updater === 'function' ? (updater as (old: SortingState) => SortingState)(effectiveSortingState) : updater;
+      setInternalSortingState(next);
+      onSortingChange?.(next);
+    } : undefined,
+    onColumnFiltersChange: isColumnFiltersEnabled ? updater => {
+      const next = typeof updater === 'function' ? (updater as (old: ColumnFiltersState) => ColumnFiltersState)(effectiveFiltersState) : updater;
+      setInternalFiltersState(next);
+      onColumnFiltersChange?.(next);
+    } : undefined,
+    onPaginationChange: isPaginationEnabled ? updater => {
+      const next = typeof updater === 'function' ? (updater as (old: PaginationState) => PaginationState)(effectivePaginationState) : updater;
+      setInternalPaginationState(next);
+      onPaginationChange?.(next);
+    } : undefined,
+    onColumnVisibilityChange: updater => {
+      const next = typeof updater === 'function' ? (updater as (old: VisibilityState) => VisibilityState)(effectiveVisibilityState) : updater;
+      setInternalVisibilityState(next);
+      onColumnVisibilityChange?.(next);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  // Notify parent of table instance
+  React.useEffect(() => {
+    if (onTable) onTable(table);
+  }, [onTable, table]);
+
+  // Selected rows convenience
+  const selectedRows = table.getSelectedRowModel().rows.map(r => r.original as TData);
+
+  // Safe action arrays to avoid array literal defaults in props
+  const safeActions = React.useMemo(() => actions ?? [], [actions]);
+  const safeBatchActions = React.useMemo(() => batchActions ?? [], [batchActions]);
+
+  // Skeleton row keys (avoid using array index as key)
+  const skeletonRowKeys = React.useMemo(
+    () => Array.from({ length: Math.max(3, effectivePaginationState.pageSize ?? 10) }, () => Math.random().toString(36).slice(2)),
+    [effectivePaginationState.pageSize]
+  );
+
+  // Standard actions state
+  const handleRefresh = React.useCallback(async () => {
+    if (!onRefresh) return;
+    await onRefresh();
+  }, [onRefresh]);
+
+  // Render a button from action definition
+  const renderActionButton = (action: DataTableAction, key: React.Key) => {
+    if (action.element) return <React.Fragment key={key}>{action.element}</React.Fragment>;
+    const content = (
+      <>
+        {action.icon && action.iconPosition !== 'right' && <span className="mr-2">{action.icon}</span>}
+        {action.label}
+        {action.icon && action.iconPosition === 'right' && <span className="ml-2">{action.icon}</span>}
+      </>
+    );
+    return (
+      <Button
+        key={key}
+        size="sm"
+        variant={action.variant ?? 'default'}
+        disabled={action.disabled}
+        onClick={action.onClick}
+        className="h-8"
+      >
+        {content}
+      </Button>
+    );
+  };
+
+  const renderBatchButton = (action: DataTableBatchAction<TData>, key: React.Key) => {
+    if (action.element) return <React.Fragment key={key}>{action.element}</React.Fragment>;
+    const onClick = () => action.onClick?.({ selectedRows, clearSelection: () => table.resetRowSelection() });
+    const content = (
+      <>
+        {action.icon && action.iconPosition !== 'right' && <span className="mr-2">{action.icon}</span>}
+        {action.label}
+        {action.icon && action.iconPosition === 'right' && <span className="ml-2">{action.icon}</span>}
+      </>
+    );
+    return (
+      <Button
+        key={key}
+        size="sm"
+        variant={action.variant ?? 'default'}
+        disabled={action.disabled}
+        onClick={onClick}
+        className="h-8"
+      >
+        {content}
+      </Button>
+    );
+  };
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {formFilters && formFilters.length && (
+        <div className="rounded-md border">
+          <Accordion type="single" collapsible className="w-full" defaultValue="filters">
+            <AccordionItem value="filters">
+              <AccordionTrigger className="px-4 py-3 border-b text-md">Filters</AccordionTrigger>
+              <AccordionContent className="px-4 pb-4 pt-5">
+                <FormBuilder
+                  key={JSON.stringify(formFilterValues ?? {})}
+                  sections={formFilters as FormBuilderSectionConfig[]}
+                  defaultValues={formFilterValues}
+                  onSubmit={data => onFormFilterChange?.(data as Record<string, unknown>)}
+                  onReset={() => onFormFilterChange?.({})}
+                  showActions
+                  submitLabel="Apply"
+                  resetLabel="Clear"
+                />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      )}
+      {/* Actions Bar */}
+      {(safeActions.length || showStandardActions || (selectable && table.getSelectedRowModel().rows.length > 0 && safeBatchActions.length)) && (
+        <div className="rounded-md border p-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              {selectable && table.getSelectedRowModel().rows.length > 0 && safeBatchActions.map((a) => renderBatchButton(a, a.key))}
+            </div>
+            <div className="flex items-center gap-2">
+              {showStandardActions && onRefresh && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleRefresh}
+                  disabled={loading}
+                  className="h-8"
+                  title="Refresh"
+                >
+                  <RefreshCw className={cn('h-4 w-4', loading && 'animate-spin')} /> Refresh
+                </Button>
+              )}
+              {isColumnVisibilityEnabled ? (
+                <DataTableViewOptions table={table} />
+              ) : null}
+              {safeActions.map((a) => renderActionButton(a, a.key))}
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="relative overflow-hidden rounded-md border" aria-busy={loading || undefined}>
+        {loading && (
+          <div className="pointer-events-none absolute inset-0 z-10 flex items-start justify-end p-2">
+            <span className="inline-flex items-center gap-2 rounded bg-background/80 px-2 py-1 text-xs shadow-sm ring-1 ring-border">
+              <Loader2 className="h-3.5 w-3.5 animate-spin" /> Loading...
+            </span>
+          </div>
+        )}
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map(header => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              skeletonRowKeys.map((rowKey) => (
+                <TableRow key={`skeleton-${rowKey}`}>
+                  {table.getVisibleLeafColumns().map((col) => (
+                    <TableCell key={`skeleton-cell-${rowKey}-${col.id}`}>
+                      <Skeleton className="h-4 w-full" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className={cn(onRowClick && 'cursor-pointer hover:bg-muted/50')}
+                  onClick={onRowClick ? () => onRowClick(row.original as TData) : undefined}
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
+                  {emptyText}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {isPaginationEnabled && (
+        <DataTablePagination table={table} />
+      )}
+    </div>
+  );
+}

package/src/kit/builder/data-table/components/DataTableColumnHeader.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { type Column } from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react';
+import { cn } from '../../../../shadcn/lib/utils';
+import { Button } from '../../../../shadcn/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../../shadcn/ui/dropdown-menu';
+
+export interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  label?: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  label,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  label = (column.columnDef.meta as { label?: string })?.label ?? label;
+  
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{label}</div>;
+  }
+
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="data-[state=open]:bg-accent -ml-3 h-8">
+            <span>{label}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDown className="ml-2 size-4" />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUp className="ml-2 size-4" />
+            ) : (
+              <ChevronsUpDown className="ml-2 size-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp className="mr-2 size-4" /> Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown className="mr-2 size-4" /> Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {column.getCanHide() && (
+            <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+              <EyeOff className="mr-2 size-4" /> Hide
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/kit/builder/data-table/components/DataTablePagination.tsx

@@ -0,0 +1,86 @@
+import { type Table } from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { Button } from '../../../../shadcn/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../shadcn/ui/select';
+
+export interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+  const pagination = table.getState().pagination ?? { pageIndex: 0, pageSize: 10 };
+
+  return (
+    <div className="flex items-center justify-between px-2">
+      <div className="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} of{' '}
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+      </div>
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${pagination.pageSize}`}
+            onValueChange={(value) => table.setPageSize(Number(value))}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 25, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {pagination.pageIndex + 1} of {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft className="size-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft className="size-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight className="size-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/kit/builder/data-table/components/DataTableViewOptions.tsx

@@ -0,0 +1,42 @@
+import { type Table } from '@tanstack/react-table';
+import { Settings2 } from 'lucide-react';
+import { Button } from '../../../../shadcn/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../../shadcn/ui/dropdown-menu';
+
+export function DataTableViewOptions<TData>({ table }: { table: Table<TData> }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+          <Settings2 className="mr-2 size-4" /> View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[180px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter((column) => column.getCanHide())
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {(column?.columnDef.meta as { label?: string })?.label ?? column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/kit/builder/data-table/index.ts

@@ -0,0 +1,5 @@
+export { default as DataTable } from './components/DataTable';
+export { DataTableColumnHeader } from './components/DataTableColumnHeader';
+export { DataTablePagination } from './components/DataTablePagination';
+export { DataTableViewOptions } from './components/DataTableViewOptions';
+export { dotAccessor } from './utils/dotAccessor';

package/src/kit/builder/data-table/types.ts

@@ -0,0 +1,29 @@
+import type { FormBuilderSectionConfig } from '../form/components/FormBuilder';
+
+export type DataTableFiltersProp = FormBuilderSectionConfig[];
+
+export type IconPosition = 'left' | 'right';
+
+export interface DataTableAction {
+  key: string;
+  label?: React.ReactNode; // string or component
+  icon?: React.ReactNode;
+  iconPosition?: IconPosition;
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  disabled?: boolean;
+  onClick?: () => void | Promise<void>;
+  // If provided, this element will be rendered directly instead of constructing a Button
+  element?: React.ReactNode;
+}
+
+export interface DataTableBatchAction<TData = unknown> {
+  key: string;
+  label?: React.ReactNode;
+  icon?: React.ReactNode;
+  iconPosition?: IconPosition;
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  disabled?: boolean;
+  // Receives selected rows and helpers
+  onClick?: (args: { selectedRows: TData[]; clearSelection: () => void }) => void | Promise<void>;
+  element?: React.ReactNode;
+}

package/src/kit/builder/data-table/utils/dotAccessor.ts

@@ -0,0 +1,6 @@
+import { get } from 'lodash';
+
+export function dotAccessor<TData, TValue = unknown>(path: string) {
+  return (row: TData) =>
+    get(row as unknown as Record<string, unknown>, path) as TValue;
+}

package/src/kit/builder/dialog/index.ts

@@ -0,0 +1,2 @@
+export { default as DialogProvider, useDialog, useDialogController } from './provider';
+export type { ConfirmOptions, CustomModalOptions } from './provider';