@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/organisms/Table/TablePagination/TablePagination.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { Button, Select, Text } from '../../../atoms';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+  page: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  pageSizeOptions?: number[];
+  showPageSizeSelector?: boolean;
+  showPageInfo?: boolean;
+}
+
+/**
+ * TablePagination Component
+ * 
+ * Pagination controls for tables with page navigation and page size selection.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <TablePagination
+ *   page={1}
+ *   pageSize={10}
+ *   total={100}
+ *   onPageChange={(page) => setPage(page)}
+ *   onPageSizeChange={(size) => setPageSize(size)}
+ * />
+ * ```
+ */
+export default function TablePagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions = [10, 25, 50, 100],
+  showPageSizeSelector = true,
+  showPageInfo = true,
+  className = '',
+  ...props
+}: TablePaginationProps) {
+  const totalPages = Math.ceil(total / pageSize);
+  const startItem = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const endItem = Math.min(page * pageSize, total);
+
+  const handlePrevious = () => {
+    if (page > 1) {
+      onPageChange(page - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (page < totalPages) {
+      onPageChange(page + 1);
+    }
+  };
+
+  const handleFirst = () => {
+    if (page > 1) {
+      onPageChange(1);
+    }
+  };
+
+  const handleLast = () => {
+    if (page < totalPages) {
+      onPageChange(totalPages);
+    }
+  };
+
+  return (
+    <div
+      className={`flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200 sm:px-6 ${className}`}
+      {...props}
+    >
+      <div className="flex flex-1 justify-between sm:hidden">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handlePrevious}
+          disabled={page === 1}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleNext}
+          disabled={page >= totalPages}
+        >
+          Next
+        </Button>
+      </div>
+
+      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        {showPageInfo && (
+          <div>
+            <Text as="p" className="text-sm text-gray-700">
+              Showing <span className="font-medium">{startItem}</span> to{' '}
+              <span className="font-medium">{endItem}</span> of{' '}
+              <span className="font-medium">{total}</span> results
+            </Text>
+          </div>
+        )}
+
+        <div className="flex items-center gap-4">
+          {showPageSizeSelector && (
+            <div className="flex items-center gap-2">
+              <Text as="span" className="text-sm text-gray-700">
+                Show:
+              </Text>
+              <Select
+                options={pageSizeOptions.map(size => ({
+                  value: size.toString(),
+                  label: size.toString(),
+                }))}
+                value={pageSize.toString()}
+                onChange={(e) => {
+                  const newSize = parseInt(e.target.value);
+                  onPageSizeChange(newSize);
+                  // Reset to first page when changing page size
+                  onPageChange(1);
+                }}
+                className="w-20"
+              />
+            </div>
+          )}
+
+          <nav className="flex items-center gap-1" aria-label="Pagination">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleFirst}
+              disabled={page === 1}
+              aria-label="First page"
+            >
+              <ChevronLeft className="h-4 w-4" />
+              <ChevronLeft className="h-4 w-4 -ml-2" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handlePrevious}
+              disabled={page === 1}
+              aria-label="Previous page"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+
+            <div className="flex items-center gap-1">
+              {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                let pageNum: number;
+                if (totalPages <= 5) {
+                  pageNum = i + 1;
+                } else if (page <= 3) {
+                  pageNum = i + 1;
+                } else if (page >= totalPages - 2) {
+                  pageNum = totalPages - 4 + i;
+                } else {
+                  pageNum = page - 2 + i;
+                }
+
+                return (
+                  <Button
+                    key={pageNum}
+                    variant={page === pageNum ? 'primary' : 'ghost'}
+                    size="sm"
+                    onClick={() => onPageChange(pageNum)}
+                    className="min-w-[2.5rem]"
+                    aria-label={`Page ${pageNum}`}
+                    aria-current={page === pageNum ? 'page' : undefined}
+                  >
+                    {pageNum}
+                  </Button>
+                );
+              })}
+            </div>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleNext}
+              disabled={page >= totalPages}
+              aria-label="Next page"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleLast}
+              disabled={page >= totalPages}
+              aria-label="Last page"
+            >
+              <ChevronRight className="h-4 w-4" />
+              <ChevronRight className="h-4 w-4 -ml-2" />
+            </Button>
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/organisms/Table/TablePagination.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useTableContext } from './TableContext';
+import TablePaginationComponent from './TablePagination/TablePagination';
+
+export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+  showPageSizeSelector?: boolean;
+  showPageInfo?: boolean;
+  pageSizeOptions?: number[];
+}
+
+/**
+ * TablePagination Component
+ * 
+ * Renders pagination controls for the table.
+ * Uses pagination state from Table context.
+ * Must be used within a Table component.
+ */
+export default function TablePagination({
+  showPageSizeSelector = true,
+  showPageInfo = true,
+  pageSizeOptions,
+  className = '',
+  ...props
+}: TablePaginationProps) {
+  const { paginationState, setPage, setPageSize, paginationMode } = useTableContext();
+
+  // Only show pagination if there's more than one page or if in server mode
+  if (paginationMode === 'client' && paginationState.totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <TablePaginationComponent
+      page={paginationState.page}
+      pageSize={paginationState.pageSize}
+      total={paginationState.total}
+      onPageChange={setPage}
+      onPageSizeChange={setPageSize}
+      pageSizeOptions={pageSizeOptions}
+      showPageSizeSelector={showPageSizeSelector}
+      showPageInfo={showPageInfo}
+      className={className}
+      {...props}
+    />
+  );
+}

package/src/ui/organisms/Table/TableProvider.tsx

@@ -0,0 +1,429 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import type { ReactNode } from 'react';
+import { TableContext, type TableContextValue, type PaginationMode } from './TableContext';
+import type { TableColumn } from './TableTypes';
+import type { FilterConfig, FilterValue } from './TableFilters/TableFilters';
+import type { TableAction } from './TableActions/TableActions';
+
+export interface TableProviderProps<T extends Record<string, unknown> = Record<string, unknown>> {
+  columns: TableColumn<T>[];
+  data: T[];
+  loading?: boolean;
+  
+  // Pagination
+  paginationMode?: PaginationMode;
+  page?: number; // controlled
+  pageSize?: number; // controlled
+  total?: number; // required for server mode
+  onPageChange?: (page: number) => void; // required for server mode
+  onPageSizeChange?: (size: number) => void;
+  defaultPageSize?: number;
+  pageSizeOptions?: number[];
+  
+  // Sorting
+  sortColumn?: string; // controlled
+  sortDirection?: 'asc' | 'desc'; // controlled
+  onSort?: (column: string, direction: 'asc' | 'desc') => void;
+  defaultSortColumn?: string;
+  defaultSortDirection?: 'asc' | 'desc';
+  
+  // Filters
+  filters?: FilterConfig[];
+  filterValues?: Record<string, FilterValue>; // controlled
+  onFilter?: (filters: Record<string, FilterValue>) => void;
+  initialFilterValues?: Record<string, FilterValue>;
+  
+  // Selection
+  selectable?: boolean;
+  selectedRows?: string[]; // controlled
+  onSelectionChange?: (selected: string[]) => void;
+  rowId?: (row: T) => string;
+  
+  // Actions
+  actions?: (row: T) => TableAction<T>[];
+  
+  // Empty state
+  emptyMessage?: string;
+  emptyStateTitle?: string;
+  emptyStateMessage?: string;
+  emptyStateIllustration?: ReactNode;
+  emptyStateAction?: ReactNode;
+  
+  // Callbacks
+  onRowClick?: (row: T) => void;
+  
+  // Column resizing
+  resizable?: boolean;
+  columnWidths?: Record<string, number>;
+  onColumnResize?: (columnKey: string, width: number) => void;
+  
+  // Virtual scrolling
+  virtualScrolling?: boolean;
+  virtualScrollingOptions?: {
+    itemHeight?: number;
+    containerHeight?: number;
+    overscan?: number;
+  };
+  
+  children: ReactNode;
+}
+
+/**
+ * TableProvider Component
+ * 
+ * Manages table state (pagination, sorting, filters, selection) and provides it via Context.
+ * Supports both client-side and server-side pagination with auto-detection.
+ */
+export function TableProvider<T extends Record<string, unknown> = Record<string, unknown>>({
+  columns,
+  data,
+  loading = false,
+  paginationMode: explicitMode,
+  page: controlledPage,
+  pageSize: controlledPageSize,
+  total: externalTotal,
+  onPageChange,
+  onPageSizeChange,
+  defaultPageSize = 10,
+  pageSizeOptions: _pageSizeOptions,
+  sortColumn: controlledSortColumn,
+  sortDirection: controlledSortDirection,
+  onSort,
+  defaultSortColumn,
+  defaultSortDirection = 'asc',
+  filters,
+  filterValues: controlledFilterValues,
+  onFilter,
+  initialFilterValues = {},
+  selectable = false,
+  selectedRows: controlledSelectedRows,
+  onSelectionChange,
+  rowId,
+  actions,
+  emptyMessage = "No data available",
+  emptyStateTitle,
+  emptyStateMessage,
+  emptyStateIllustration,
+  emptyStateAction,
+  onRowClick,
+  resizable = false,
+  columnWidths,
+  onColumnResize,
+  virtualScrolling,
+  virtualScrollingOptions: _virtualScrollingOptions,
+  children,
+}: TableProviderProps<T>) {
+  // Detect pagination mode
+  const paginationMode: PaginationMode = useMemo(() => {
+    if (explicitMode) return explicitMode;
+    
+    // Auto-detect: if total and onPageChange are provided, it's server-side
+    if (externalTotal !== undefined && onPageChange) {
+      return 'server';
+    }
+    
+    return 'client';
+  }, [explicitMode, externalTotal, onPageChange]);
+
+  // Pagination state
+  const isPaginationControlled = controlledPage !== undefined;
+  const [internalPage, setInternalPage] = useState(1);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  
+  const page = isPaginationControlled ? controlledPage! : internalPage;
+  const pageSize = controlledPageSize ?? internalPageSize;
+  
+  const total = useMemo(() => {
+    if (paginationMode === 'server') {
+      return externalTotal ?? 0;
+    }
+    return data.length;
+  }, [paginationMode, externalTotal, data.length]);
+  
+  const totalPages = useMemo(() => {
+    return Math.ceil(total / pageSize);
+  }, [total, pageSize]);
+
+  // Sorting state
+  const isSortingControlled = controlledSortColumn !== undefined;
+  const [internalSortColumn, setInternalSortColumn] = useState(defaultSortColumn || '');
+  const [internalSortDirection, setInternalSortDirection] = useState<'asc' | 'desc'>(defaultSortDirection);
+  
+  const sortColumn = isSortingControlled ? controlledSortColumn! : internalSortColumn;
+  const sortDirection = isSortingControlled ? (controlledSortDirection || 'asc') : internalSortDirection;
+
+  // Filter state
+  const isFilterControlled = controlledFilterValues !== undefined;
+  const [internalFilterValues, setInternalFilterValues] = useState<Record<string, unknown>>(initialFilterValues);
+  
+  const filterValues = isFilterControlled ? controlledFilterValues! : internalFilterValues;
+
+  // Selection state
+  const isSelectionControlled = controlledSelectedRows !== undefined;
+  const [internalSelectedRows, setInternalSelectedRows] = useState<string[]>([]);
+  
+  const selectedRows = isSelectionControlled ? controlledSelectedRows! : internalSelectedRows;
+
+  // Apply client-side filtering
+  const filteredData = useMemo(() => {
+    if (!filters || filters.length === 0) return data;
+    
+    return data.filter((row) => {
+      return filters.every((filter) => {
+        const value = filterValues[filter.key];
+        if (!value || value === '') return true;
+        
+        const rowValue = (row as unknown)[filter.key];
+        if (filter.type === 'text') {
+          return String(rowValue || '').toLowerCase().includes(String(value).toLowerCase());
+        }
+        return String(rowValue) === String(value);
+      });
+    });
+  }, [data, filters, filterValues]);
+
+  // Apply client-side sorting (only if not controlled externally)
+  const sortedData = useMemo(() => {
+    // If sorting is controlled externally (onSort provided), don't sort here
+    // The parent component should handle sorting on the server or before passing data
+    // However, we still apply sorting if sortColumn is set and no onSort callback
+    if (isSortingControlled && onSort) {
+      // When controlled, assume data is already sorted by parent
+      return filteredData;
+    }
+    
+    // Only apply internal sorting if sortColumn is set
+    if (!sortColumn) return filteredData;
+    
+    // Apply internal sorting
+    const sorted = [...filteredData];
+    sorted.sort((a, b) => {
+      const aValue = (a as unknown)[sortColumn];
+      const bValue = (b as unknown)[sortColumn];
+      const comparison = String(aValue || '').localeCompare(String(bValue || ''));
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+    
+    return sorted;
+  }, [filteredData, sortColumn, sortDirection, onSort, isSortingControlled]);
+
+  // Apply client-side pagination
+  const paginatedData = useMemo(() => {
+    if (paginationMode === 'server') {
+      return sortedData; // Server already paginated
+    }
+    
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return sortedData.slice(startIndex, endIndex);
+  }, [sortedData, paginationMode, page, pageSize]);
+
+  // Selection helpers
+  const getRowId = useCallback((row: T, index: number): string => {
+    if (rowId) {
+      return rowId(row);
+    }
+    return (row as unknown)?.id?.toString() || index.toString();
+  }, [rowId]);
+
+  const isAllSelected = useMemo(() => {
+    if (!selectable || paginatedData.length === 0) return false;
+    return paginatedData.every((row, index) => {
+      const id = getRowId(row, index);
+      return selectedRows.includes(id);
+    });
+  }, [selectable, paginatedData, selectedRows, getRowId]);
+
+  const isIndeterminate = useMemo(() => {
+    if (!selectable) return false;
+    const selectedCount = selectedRows.length;
+    return selectedCount > 0 && selectedCount < paginatedData.length;
+  }, [selectable, selectedRows.length, paginatedData.length]);
+
+  // Methods
+  const setPage = useCallback((newPage: number) => {
+    if (isPaginationControlled) {
+      onPageChange?.(newPage);
+    } else {
+      setInternalPage(newPage);
+    }
+  }, [isPaginationControlled, onPageChange]);
+
+  const setPageSize = useCallback((newSize: number) => {
+    if (onPageSizeChange) {
+      onPageSizeChange(newSize);
+    } else {
+      setInternalPageSize(newSize);
+    }
+    setPage(1); // Reset to first page
+  }, [onPageSizeChange, setPage]);
+
+  const setSorting = useCallback((column: string, direction: 'asc' | 'desc') => {
+    if (isSortingControlled) {
+      onSort?.(column, direction);
+    } else {
+      setInternalSortColumn(column);
+      setInternalSortDirection(direction);
+    }
+  }, [isSortingControlled, onSort]);
+
+  const setFilters = useCallback((newFilters: Record<string, FilterValue>) => {
+    if (isFilterControlled) {
+      onFilter?.(newFilters);
+    } else {
+      setInternalFilterValues(newFilters);
+    }
+    // Reset to first page when filters change
+    setPage(1);
+  }, [isFilterControlled, onFilter, setPage]);
+
+  const setSelection = useCallback((selected: string[]) => {
+    if (isSelectionControlled) {
+      onSelectionChange?.(selected);
+    } else {
+      setInternalSelectedRows(selected);
+    }
+  }, [isSelectionControlled, onSelectionChange]);
+
+  const toggleRowSelection = useCallback((rowId: string) => {
+    const newSelected = selectedRows.includes(rowId)
+      ? selectedRows.filter((id) => id !== rowId)
+      : [...selectedRows, rowId];
+    setSelection(newSelected);
+  }, [selectedRows, setSelection]);
+
+  const toggleSelectAll = useCallback(() => {
+    if (isAllSelected) {
+      setSelection([]);
+    } else {
+      const allIds = paginatedData.map((row, index) => getRowId(row, index));
+      setSelection(allIds);
+    }
+  }, [isAllSelected, paginatedData, getRowId, setSelection]);
+
+  // Column resizing state
+  const [internalColumnWidths, setInternalColumnWidths] = useState<Record<string, number>>({});
+  const isColumnWidthsControlled = columnWidths !== undefined;
+  const finalColumnWidths = isColumnWidthsControlled ? columnWidths! : internalColumnWidths;
+
+  const setColumnWidth = useCallback((columnKey: string, width: number) => {
+    if (isColumnWidthsControlled) {
+      onColumnResize?.(columnKey, width);
+    } else {
+      setInternalColumnWidths((prev) => ({
+        ...prev,
+        [columnKey]: width,
+      }));
+    }
+  }, [isColumnWidthsControlled, onColumnResize]);
+
+  // Use controlledColumnWidths from props if provided
+  const _controlledColumnWidths = columnWidths;
+
+  // Context value
+  const contextValue: TableContextValue<T> = useMemo(() => ({
+    columns,
+    data,
+    paginatedData,
+    loading,
+    paginationState: {
+      page,
+      pageSize,
+      total,
+      totalPages,
+    },
+    sortState: {
+      column: sortColumn,
+      direction: sortDirection,
+    },
+    filterState: {
+      values: filterValues,
+      config: filters || [],
+    },
+    selectionState: {
+      selectedRows,
+      isAllSelected,
+      isIndeterminate,
+    },
+    paginationMode,
+    selectable,
+    rowId,
+    actions,
+    resizable,
+    columnWidths: finalColumnWidths,
+    virtualScrolling,
+    emptyMessage,
+    emptyStateTitle,
+    emptyStateMessage,
+    emptyStateIllustration,
+    emptyStateAction,
+    setPage,
+    setPageSize,
+    setSorting,
+    setFilters,
+    setSelection,
+    toggleRowSelection,
+    toggleSelectAll,
+    getRowId,
+    setColumnWidth,
+    onPageChange,
+    onPageSizeChange,
+    onSort,
+    onFilter,
+    onSelectionChange,
+    onRowClick,
+    onColumnResize,
+  }), [
+    columns,
+    data,
+    paginatedData,
+    loading,
+    page,
+    pageSize,
+    total,
+    totalPages,
+    sortColumn,
+    sortDirection,
+    filterValues,
+    filters,
+    selectedRows,
+    isAllSelected,
+    isIndeterminate,
+    paginationMode,
+    selectable,
+    rowId,
+    actions,
+    emptyMessage,
+    emptyStateTitle,
+    emptyStateMessage,
+    emptyStateIllustration,
+    emptyStateAction,
+    setPage,
+    setPageSize,
+    setSorting,
+    setFilters,
+    setSelection,
+    toggleRowSelection,
+    toggleSelectAll,
+    getRowId,
+    setColumnWidth,
+    onPageChange,
+    onPageSizeChange,
+    onSort,
+    onFilter,
+    onSelectionChange,
+    onRowClick,
+    onColumnResize,
+    resizable,
+    columnWidths,
+    virtualScrolling,
+  ]);
+
+  return (
+    <TableContext.Provider value={contextValue}>
+      {children}
+    </TableContext.Provider>
+  );
+}