@superdangerous/app-framework 4.16.35 → 4.16.37

package/ui/data-table/components/PaginationControls.tsx

@@ -1,122 +0,0 @@
-/**
- * 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.
- */
-
-import {
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-react';
-import { Button } from '../../components/base/button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../components/base/select';
-import { cn } from '../../src/utils/cn';
-
-export 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;
-}
-
-export function PaginationControls({
-  page,
-  pageSize,
-  totalPages,
-  totalItems,
-  startIndex,
-  endIndex,
-  canGoNext,
-  canGoPrev,
-  pageSizeOptions,
-  setPage: _setPage,
-  setPageSize,
-  nextPage,
-  prevPage,
-  className,
-}: PaginationControlsProps) {
-  // Note: setPage is included for API compatibility with usePagination but not used
-  // as this component only provides prev/next navigation
-  void _setPage;
-  if (totalItems === 0) {
-    return null;
-  }
-
-  return (
-    <div className={cn('flex items-center gap-3 text-sm', className)}>
-      {/* Page size selector - hidden on small screens */}
-      <div className="hidden md:flex items-center gap-1.5">
-        <span className="text-muted-foreground hidden lg:inline">Rows:</span>
-        <Select
-          value={String(pageSize)}
-          onValueChange={(v) => setPageSize(Number(v))}
-        >
-          <SelectTrigger className="w-16 h-8 text-xs">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {pageSizeOptions.map((size) => (
-              <SelectItem key={size} value={String(size)}>
-                {size}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* Page navigation - always visible when there are multiple pages */}
-      {totalPages > 1 && (
-        <div className="flex items-center gap-1">
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8"
-            onClick={prevPage}
-            disabled={!canGoPrev}
-            title="Previous page"
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </Button>
-
-          {/* Page indicator - hidden on very small screens */}
-          <span className="hidden sm:inline px-2 text-muted-foreground tabular-nums min-w-[60px] text-center">
-            {page} / {totalPages}
-          </span>
-
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8"
-            onClick={nextPage}
-            disabled={!canGoNext}
-            title="Next page"
-          >
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-      )}
-
-      {/* Items info - hidden on smaller screens */}
-      <span className="text-muted-foreground whitespace-nowrap hidden lg:inline">
-        Showing {startIndex}–{endIndex} of {totalItems}
-      </span>
-    </div>
-  );
-}

package/ui/data-table/components/TableFilters.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import { Search, Filter, X } from 'lucide-react';
-import { Input } from '../../components/base/input';
-import { Button } from '../../components/base/button';
-import { Popover, PopoverContent, PopoverTrigger } from '../../components/base/popover';
-import { cn } from '../../src/utils/cn';
-
-export interface FilterOption {
-  id: string;
-  label: string;
-  render: () => React.ReactNode;
-  /** Filter type - 'multi' filters get more horizontal space */
-  type?: 'single' | 'multi';
-}
-
-export interface TableFiltersProps {
-  search?: string;
-  onSearchChange?: (value: string) => void;
-  searchPlaceholder?: string;
-  filters?: FilterOption[];
-  activeFilterCount?: number;
-  onClearFilters?: () => void;
-  className?: string;
-  children?: React.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
- */
-export function TableFilters({
-  search,
-  onSearchChange,
-  searchPlaceholder = 'Search...',
-  filters,
-  activeFilterCount = 0,
-  onClearFilters,
-  className,
-  children,
-}: TableFiltersProps) {
-  // Check if any filter needs wider layout (multi-select filters)
-  const hasMultiFilters = filters?.some(f => f.type === 'multi');
-  const popoverWidth = hasMultiFilters ? 'w-[420px]' : 'w-80';
-
-  return (
-    <div className={cn('flex items-center gap-3 flex-wrap', className)}>
-      {/* Search Input */}
-      {onSearchChange !== undefined && (
-        <div className="relative flex-1 min-w-[200px] max-w-xs">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-10" />
-          <Input
-            placeholder={searchPlaceholder}
-            value={search || ''}
-            onChange={(e) => onSearchChange(e.target.value)}
-            className="pl-9 h-9"
-          />
-          {search && (
-            <button
-              type="button"
-              onClick={() => onSearchChange('')}
-              className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 rounded-sm hover:bg-muted"
-            >
-              <X className="h-3 w-3 text-muted-foreground" />
-            </button>
-          )}
-        </div>
-      )}
-
-      {/* Filters Popover */}
-      {filters && filters.length > 0 && (
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline" size="sm" className="gap-2 h-9">
-              <Filter className="h-4 w-4" />
-              Filters
-              {activeFilterCount > 0 && (
-                <span className="ml-1 rounded-full bg-primary text-primary-foreground px-2 py-0.5 text-xs font-medium">
-                  {activeFilterCount}
-                </span>
-              )}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            className={cn(popoverWidth, 'overflow-y-auto')}
-            align="start"
-            collisionPadding={16}
-            style={{ maxHeight: 'var(--radix-popover-content-available-height)' }}
-          >
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <h4 className="font-medium text-sm">Filters</h4>
-                {activeFilterCount > 0 && onClearFilters && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={onClearFilters}
-                    className="h-auto p-0 text-xs text-destructive hover:text-destructive"
-                  >
-                    Clear all
-                  </Button>
-                )}
-              </div>
-
-              <div className="space-y-4">
-                {filters.map((filter) => (
-                  <div key={filter.id} className="space-y-1.5">
-                    <label className="text-xs font-medium text-muted-foreground">
-                      {filter.label}
-                    </label>
-                    {filter.render()}
-                  </div>
-                ))}
-              </div>
-            </div>
-          </PopoverContent>
-        </Popover>
-      )}
-
-      {/* Clear filters button (visible when filters are active, outside popover) */}
-      {activeFilterCount > 0 && onClearFilters && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onClearFilters}
-          className="h-9 gap-1.5 text-muted-foreground hover:text-foreground"
-        >
-          <X className="h-4 w-4" />
-          Clear
-        </Button>
-      )}
-
-      {/* Spacer to push children to the right */}
-      <div className="flex-1" />
-
-      {/* Custom children (e.g., export button, create button, etc.) */}
-      {children}
-    </div>
-  );
-}

package/ui/data-table/components/index.ts

@@ -1,44 +0,0 @@
-/**
- * Data Table Components
- *
- * Reusable components for building data tables:
- * - DataTable: Full-featured generic data table
- * - DataTablePage: Full-page layout with header controls
- * - PaginationControls: Compact inline pagination
- * - Pagination: Full pagination with page numbers
- * - BatchActionsBar: Multi-select action bar
- * - ColumnVisibility: Column toggle dropdown
- * - TableFilters: Search and filter controls
- */
-
-export { DataTable } from './DataTable';
-export type {
-  DataTableProps,
-  ColumnDef,
-  ColumnWidth,
-  ColumnVisibility as ColumnVisibilityConfig,
-  HeaderCellProps,
-  CellProps,
-  ExternalPaginationState,
-  ColumnConfigCompat,
-  ColumnSizeConfig,
-} from './types';
-
-export { DataTablePage } from './DataTablePage';
-export type { DataTablePageProps, FilterOption } from './DataTablePage';
-
-export { PaginationControls } from './PaginationControls';
-export type { PaginationControlsProps } from './PaginationControls';
-
-export { Pagination } from './Pagination';
-
-export { BatchActionsBar } from './BatchActionsBar';
-export type { BatchActionsBarProps } from './BatchActionsBar';
-
-export { ColumnVisibility } from './ColumnVisibility';
-
-export { TableFilters } from './TableFilters';
-export type { TableFiltersProps, FilterOption as TableFilterOption } from './TableFilters';
-
-export { MultiSelectFilter } from './MultiSelectFilter';
-export type { MultiSelectFilterProps, MultiSelectOption } from './MultiSelectFilter';

package/ui/data-table/components/types.ts

@@ -1,181 +0,0 @@
-import type { ReactNode } from 'react';
-
-/**
- * Column width configuration
- */
-export interface ColumnWidth {
-  default: number;
-  min: number;
-  max?: number;
-}
-
-/**
- * Column visibility configuration
- */
-export interface ColumnVisibility {
-  default: boolean;
-  locked?: boolean;  // If true, column cannot be hidden
-}
-
-/**
- * Props passed to header cell render function
- */
-export interface HeaderCellProps {
-  columnId: string;
-  isSorted: boolean;
-  sortDirection?: 'asc' | 'desc';
-}
-
-/**
- * Props passed to cell render function
- */
-export interface CellProps {
-  columnId: string;
-  isDragging: boolean;
-}
-
-/**
- * Column definition for DataTable
- */
-export 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;
-
-  /** Additional CSS class for cells */
-  className?: string;
-
-  /** Whether this column should use column style from resize hook */
-  resizable?: boolean;
-}
-
-// DragState is exported from ../hooks/useColumnOrder
-
-/**
- * External pagination state (from usePagination hook)
- */
-export 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
- */
-export 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;
-
-  // Selection
-  /** Enable row selection with checkboxes */
-  selectable?: boolean;
-  /** Set of selected row IDs */
-  selectedIds?: Set<string>;
-  /** Callback when selection changes */
-  onSelectionChange?: (ids: Set<string>) => void;
-
-  // Row interactions
-  /** 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;
-
-  // Sorting
-  /** Current sort field */
-  sortField?: string;
-  /** Current sort order */
-  sortOrder?: 'asc' | 'desc';
-  /** Callback when sort changes */
-  onSort?: (field: string) => void;
-
-  // Actions column
-  /** Render function for actions column (always last, sticky) */
-  actionsColumn?: (item: T) => ReactNode;
-  /** Width for actions column */
-  actionsColumnWidth?: number;
-
-  // Pagination
-  /** 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;
-
-  // Styling
-  /** Additional CSS class for table container */
-  className?: string;
-  /** Function to compute row CSS class */
-  rowClassName?: (item: T) => string;
-
-  // Features
-  /** 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[];
-
-  // Loading state
-  /** Show loading indicator */
-  loading?: boolean;
-
-  // Empty state
-  /** Content to show when no data */
-  emptyState?: ReactNode;
-}
-
-/**
- * Column config for visibility hook (for compatibility)
- */
-export interface ColumnConfigCompat {
-  id: string;
-  label: string;
-  defaultVisible?: boolean;
-  locked?: boolean;
-}
-
-/**
- * Column config for resize hook (for compatibility)
- */
-export interface ColumnSizeConfig {
-  key: string;
-  defaultWidth: number;
-  minWidth: number;
-  maxWidth?: number;
-}

package/ui/data-table/hooks/index.ts

@@ -1,17 +0,0 @@
-/**
- * Data Table Hooks
- *
- * Comprehensive hooks for building data tables with:
- * - Pagination with localStorage persistence
- * - Column visibility toggling
- * - Column resizing with drag handles
- * - Column reordering with drag-and-drop
- */
-
-export { usePagination } from './usePagination';
-export { useColumnVisibility } from './useColumnVisibility';
-export type { ColumnConfig, ColumnVisibilityState } from './useColumnVisibility';
-export { useResizableColumns } from './useResizableColumns';
-export type { ResizableColumnResult } from './useResizableColumns';
-export { useColumnOrder, useColumnDragDrop } from './useColumnOrder';
-export type { ColumnOrderConfig, DragState } from './useColumnOrder';