@superdangerous/app-framework 4.16.35 → 4.16.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdangerous/app-framework",
-  "version": "4.16.35",
+  "version": "4.16.37",
   "description": "Opinionated TypeScript framework for structured vibecoding - building internal web and desktop apps with batteries included",
   "type": "module",
   "main": "dist/index.js",
@@ -41,8 +41,9 @@
       "require": "./ui/dist/index.js"
     },
     "./data-table": {
-      "types": "./ui/data-table/index.ts",
-      "import": "./ui/data-table/index.ts"
+      "types": "./ui/dist/data-table.d.ts",
+      "import": "./ui/dist/data-table.mjs",
+      "require": "./ui/dist/data-table.js"
     },
     "./ui/utils": {
       "types": "./dist/ui/utils/index.d.ts",
@@ -153,7 +154,6 @@
     "dist/",
     "src/",
     "ui/dist/",
-    "ui/data-table/",
     "ui/styles/",
     "README.md",
     "LICENSE"

package/ui/dist/data-table.d.mts

@@ -0,0 +1,457 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { ReactNode } from 'react';
+
+interface UsePaginationOptions<T> {
+    data: T[];
+    pageSize?: number;
+    storageKey?: string;
+}
+interface UsePaginationResult<T> {
+    paginatedData: T[];
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalItems: number;
+    setPage: (page: number) => void;
+    setPageSize: (size: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    firstPage: () => void;
+    lastPage: () => void;
+    startIndex: number;
+    endIndex: number;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    pageSizeOptions: number[];
+}
+declare function usePagination<T>({ data, pageSize: initialPageSize, storageKey, }: UsePaginationOptions<T>): UsePaginationResult<T>;
+
+interface ColumnConfig$1 {
+    id: string;
+    label: string;
+    defaultVisible?: boolean;
+    locked?: boolean;
+}
+interface ColumnVisibilityState {
+    [key: string]: boolean;
+}
+interface UseColumnVisibilityOptions {
+    columns: ColumnConfig$1[];
+    storageKey: string;
+}
+interface UseColumnVisibilityReturn {
+    visibleColumns: ColumnVisibilityState;
+    isColumnVisible: (columnId: string) => boolean;
+    toggleColumn: (columnId: string) => void;
+    showAllColumns: () => void;
+    hideAllColumns: () => void;
+    columns: ColumnConfig$1[];
+}
+declare function useColumnVisibility({ columns, storageKey, }: UseColumnVisibilityOptions): UseColumnVisibilityReturn;
+
+interface ColumnConfig {
+    key: string;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+}
+interface UseResizableColumnsOptions {
+    tableId: string;
+    columns: ColumnConfig[];
+    storageKey?: string;
+}
+interface ResizableColumnResult {
+    widths: Record<string, number>;
+    isResizing: boolean;
+    totalWidth: number;
+    getResizeHandleProps: (columnKey: string) => {
+        onPointerDown: (e: React.PointerEvent) => void;
+        onMouseDown: (e: React.MouseEvent) => void;
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        className: string;
+        'data-resizing': boolean;
+    };
+    getColumnStyle: (columnKey: string) => React.CSSProperties;
+    getTableStyle: () => React.CSSProperties;
+    resetToDefaults: () => void;
+}
+declare function useResizableColumns({ tableId, columns, storageKey, }: UseResizableColumnsOptions): ResizableColumnResult;
+
+interface ColumnOrderConfig {
+    id: string;
+    label: string;
+    locked?: boolean;
+}
+interface UseColumnOrderOptions {
+    storageKey: string;
+    defaultOrder: string[];
+}
+interface UseColumnOrderReturn {
+    columnOrder: string[];
+    moveColumn: (fromIndex: number, toIndex: number) => void;
+    moveColumnById: (columnId: string, direction: 'left' | 'right') => void;
+    resetOrder: () => void;
+    getOrderedColumns: <T extends {
+        id: string;
+    }>(columns: T[]) => T[];
+}
+/**
+ * Hook for managing column order with localStorage persistence
+ */
+declare function useColumnOrder({ storageKey, defaultOrder, }: UseColumnOrderOptions): UseColumnOrderReturn;
+/**
+ * Drag and drop helpers for column reordering
+ */
+interface DragState {
+    isDragging: boolean;
+    draggedId: string | null;
+    dropIndex: number | null;
+}
+declare function useColumnDragDrop(columnOrder: string[], moveColumn: (from: number, to: number) => void, lockedColumns?: string[]): {
+    dragState: DragState;
+    getDragHandleProps: (columnId: string) => {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+    };
+    showDropIndicator: (columnId: string) => boolean;
+};
+
+/**
+ * Column width configuration
+ */
+interface ColumnWidth {
+    default: number;
+    min: number;
+    max?: number;
+}
+/**
+ * Column visibility configuration
+ */
+interface ColumnVisibility$1 {
+    default: boolean;
+    locked?: boolean;
+}
+/**
+ * Props passed to header cell render function
+ */
+interface HeaderCellProps {
+    columnId: string;
+    isSorted: boolean;
+    sortDirection?: 'asc' | 'desc';
+}
+/**
+ * Props passed to cell render function
+ */
+interface CellProps {
+    columnId: string;
+    isDragging: boolean;
+}
+/**
+ * Column definition for DataTable
+ */
+interface ColumnDef<T> {
+    /** Unique column identifier */
+    id: string;
+    /** Header content - string or render function */
+    header: string | ((props: HeaderCellProps) => ReactNode);
+    /** Cell content render function */
+    cell: (item: T, props: CellProps) => ReactNode;
+    /** Key to use for sorting (if sortable) */
+    sortKey?: string;
+    /** Width configuration */
+    width?: ColumnWidth;
+    /** Visibility configuration */
+    visibility?: ColumnVisibility$1;
+    /** Additional CSS class for cells */
+    className?: string;
+    /** Whether this column should use column style from resize hook */
+    resizable?: boolean;
+}
+/**
+ * External pagination state (from usePagination hook)
+ */
+interface ExternalPaginationState<T> {
+    paginatedData: T[];
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalItems: number;
+    startIndex: number;
+    endIndex: number;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    pageSizeOptions: number[];
+    setPage: (page: number) => void;
+    setPageSize: (size: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+}
+/**
+ * DataTable props
+ */
+interface DataTableProps<T> {
+    /** Data array to display */
+    data: T[];
+    /** Column definitions */
+    columns: ColumnDef<T>[];
+    /** Storage key for persisting table state (column widths, order, visibility) */
+    storageKey: string;
+    /** Function to get unique ID from item */
+    getRowId: (item: T) => string;
+    /** Enable row selection with checkboxes */
+    selectable?: boolean;
+    /** Set of selected row IDs */
+    selectedIds?: Set<string>;
+    /** Callback when selection changes */
+    onSelectionChange?: (ids: Set<string>) => void;
+    /** Callback when row is clicked */
+    onRowClick?: (item: T) => void;
+    /** Callback when row is right-clicked (for context menu) */
+    onRowContextMenu?: (item: T, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Current sort field */
+    sortField?: string;
+    /** Current sort order */
+    sortOrder?: 'asc' | 'desc';
+    /** Callback when sort changes */
+    onSort?: (field: string) => void;
+    /** Render function for actions column (always last, sticky) */
+    actionsColumn?: (item: T) => ReactNode;
+    /** Width for actions column */
+    actionsColumnWidth?: number;
+    /** Page size for pagination (used when no external pagination provided) */
+    pageSize?: number;
+    /** External pagination state from usePagination hook (overrides internal pagination) */
+    pagination?: ExternalPaginationState<T>;
+    /** Hide the built-in pagination controls (use when pagination is shown elsewhere) */
+    hidePagination?: boolean;
+    /** Additional CSS class for table container */
+    className?: string;
+    /** Function to compute row CSS class */
+    rowClassName?: (item: T) => string;
+    /** Enable header right-click for column visibility menu */
+    enableHeaderContextMenu?: boolean;
+    /** Columns that cannot be reordered */
+    lockedColumns?: string[];
+    /** Default column order (if not persisted) */
+    defaultColumnOrder?: string[];
+    /** Show loading indicator */
+    loading?: boolean;
+    /** Content to show when no data */
+    emptyState?: ReactNode;
+}
+/**
+ * Column config for visibility hook (for compatibility)
+ */
+interface ColumnConfigCompat {
+    id: string;
+    label: string;
+    defaultVisible?: boolean;
+    locked?: boolean;
+}
+/**
+ * Column config for resize hook (for compatibility)
+ */
+interface ColumnSizeConfig {
+    key: string;
+    defaultWidth: number;
+    minWidth: number;
+    maxWidth?: number;
+}
+
+/**
+ * DataTable - Generic data table with full feature set
+ *
+ * Features:
+ * - Column resizing (drag handles)
+ * - Column reordering (drag-drop)
+ * - Column visibility toggle
+ * - Row selection with checkboxes
+ * - Sorting
+ * - Pagination
+ * - Sticky actions column
+ * - Context menu support
+ * - Header context menu for column visibility
+ */
+declare function DataTable<T>({ data, columns, storageKey, getRowId, selectable, selectedIds, onSelectionChange, onRowClick, onRowContextMenu, sortField, sortOrder, onSort, actionsColumn, actionsColumnWidth, pageSize, pagination: externalPagination, hidePagination, className, rowClassName, enableHeaderContextMenu, lockedColumns, defaultColumnOrder, loading, emptyState, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * PaginationControls - Compact inline pagination for table headers
+ *
+ * A condensed version of pagination controls designed to sit alongside
+ * search/filter controls in a table header bar.
+ */
+interface PaginationControlsProps {
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalItems: number;
+    startIndex: number;
+    endIndex: number;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    pageSizeOptions: number[];
+    setPage: (page: number) => void;
+    setPageSize: (size: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    className?: string;
+}
+declare function PaginationControls({ page, pageSize, totalPages, totalItems, startIndex, endIndex, canGoNext, canGoPrev, pageSizeOptions, setPage: _setPage, setPageSize, nextPage, prevPage, className, }: PaginationControlsProps): react_jsx_runtime.JSX.Element | null;
+
+interface FilterOption$1 {
+    id: string;
+    label: string;
+    render: () => React__default.ReactNode;
+}
+interface DataTablePageProps {
+    /** Page title */
+    title: string;
+    /** Page description */
+    description?: string;
+    /** Search term */
+    search?: string;
+    /** Search change handler */
+    onSearchChange?: (value: string) => void;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Filter options for popover */
+    filters?: FilterOption$1[];
+    /** Number of active filters */
+    activeFilterCount?: number;
+    /** Clear all filters handler */
+    onClearFilters?: () => void;
+    /** Pagination props from usePagination hook */
+    pagination?: PaginationControlsProps;
+    /** Extra content to render next to the title (e.g. HelpTooltip) */
+    titleExtra?: React__default.ReactNode;
+    /** Action buttons to show in the header */
+    actions?: React__default.ReactNode;
+    /** Content before the table (e.g., BatchActionsBar) */
+    beforeTable?: React__default.ReactNode;
+    /** The DataTable component */
+    children: React__default.ReactNode;
+    /** Additional class for the container */
+    className?: string;
+    /** Whether to show a loading state */
+    loading?: boolean;
+    /** Loading component to show */
+    loadingComponent?: React__default.ReactNode;
+}
+declare function DataTablePage({ title, description, titleExtra, search, onSearchChange, searchPlaceholder, filters, activeFilterCount, onClearFilters, pagination, actions, beforeTable, children, className, loading, loadingComponent, }: DataTablePageProps): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalItems: number;
+    startIndex: number;
+    endIndex: number;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    pageSizeOptions: number[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    onFirstPage: () => void;
+    onLastPage: () => void;
+    className?: string;
+}
+declare function Pagination({ page, pageSize, totalPages, totalItems, startIndex, endIndex, canGoNext, canGoPrev, pageSizeOptions, onPageChange, onPageSizeChange, onNextPage, onPrevPage, onFirstPage, onLastPage, className, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+interface BatchActionsBarProps {
+    /** Number of selected items */
+    selectedCount: number;
+    /** Callback to clear selection */
+    onClear: () => void;
+    /** Action buttons to display on the right side */
+    children: ReactNode;
+    /** Label for the selected items (default: "item"/"items") */
+    itemLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A horizontal bar that appears when items are selected,
+ * showing the count and providing batch action buttons.
+ */
+declare function BatchActionsBar({ selectedCount, onClear, children, itemLabel, className, }: BatchActionsBarProps): react_jsx_runtime.JSX.Element | null;
+
+interface ColumnVisibilityProps {
+    columns: ColumnConfig$1[];
+    isColumnVisible: (columnId: string) => boolean;
+    toggleColumn: (columnId: string) => void;
+    showAllColumns: () => void;
+    hideAllColumns: () => void;
+}
+declare function ColumnVisibility({ columns, isColumnVisible, toggleColumn, showAllColumns, hideAllColumns, }: ColumnVisibilityProps): react_jsx_runtime.JSX.Element;
+
+interface FilterOption {
+    id: string;
+    label: string;
+    render: () => React__default.ReactNode;
+    /** Filter type - 'multi' filters get more horizontal space */
+    type?: 'single' | 'multi';
+}
+interface TableFiltersProps {
+    search?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    filters?: FilterOption[];
+    activeFilterCount?: number;
+    onClearFilters?: () => void;
+    className?: string;
+    children?: React__default.ReactNode;
+}
+/**
+ * TableFilters - Compact filter controls for data tables
+ *
+ * Features:
+ * - Search input
+ * - Popover filter menu with badge showing active count
+ * - Clear all filters button
+ * - Custom filter components via render prop
+ * - Children slot for additional action buttons
+ */
+declare function TableFilters({ search, onSearchChange, searchPlaceholder, filters, activeFilterCount, onClearFilters, className, children, }: TableFiltersProps): react_jsx_runtime.JSX.Element;
+
+interface MultiSelectOption<T extends string = string> {
+    /** Unique value for this option */
+    value: T;
+    /** Display label */
+    label: string;
+    /** Optional custom render for the label (e.g., with icon/flag) */
+    render?: () => React__default.ReactNode;
+}
+interface MultiSelectFilterProps<T extends string = string> {
+    /** Available options to select from */
+    options: MultiSelectOption<T>[];
+    /** Currently selected values */
+    selected: Set<T>;
+    /** Called when selection changes */
+    onChange: (selected: Set<T>) => void;
+    /** Maximum height before scrolling (default: 200px) */
+    maxHeight?: number;
+    /** Number of columns for grid layout (default: 2) */
+    columns?: 1 | 2 | 3;
+    /** Show select all / clear buttons */
+    showBulkActions?: boolean;
+    /** Optional className for the container */
+    className?: string;
+}
+/**
+ * MultiSelectFilter - A checkbox-based multi-select filter component
+ *
+ * Designed to work with the TableFilters popover for filtering data tables.
+ * Supports custom rendering per option (for flags, badges, icons, etc.)
+ */
+declare function MultiSelectFilter<T extends string = string>({ options, selected, onChange, maxHeight, columns, showBulkActions, className, }: MultiSelectFilterProps<T>): react_jsx_runtime.JSX.Element;
+
+export { BatchActionsBar, type BatchActionsBarProps, type CellProps, type ColumnConfig$1 as ColumnConfig, type ColumnConfigCompat, type ColumnDef, type ColumnOrderConfig, type ColumnSizeConfig, ColumnVisibility, type ColumnVisibility$1 as ColumnVisibilityConfig, type ColumnVisibilityState, type ColumnWidth, DataTable, DataTablePage, type DataTablePageProps, type DataTableProps, type DragState, type ExternalPaginationState, type FilterOption$1 as FilterOption, type HeaderCellProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectOption, Pagination, PaginationControls, type PaginationControlsProps, type ResizableColumnResult, type FilterOption as TableFilterOption, TableFilters, type TableFiltersProps, useColumnDragDrop, useColumnOrder, useColumnVisibility, usePagination, useResizableColumns };