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

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

@@ -0,0 +1,46 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useTableContext } from './TableContext';
+import TableActionsComponent from './TableActions/TableActions';
+
+export interface TableActionsProps<T extends Record<string, unknown> = Record<string, unknown>> extends HTMLAttributes<HTMLDivElement> {
+  row: T;
+  align?: 'left' | 'right';
+}
+
+/**
+ * TableActions Component
+ * 
+ * Renders action dropdown menu for a table row.
+ * Uses actions configuration from Table context.
+ * Must be used within a Table component.
+ */
+export default function TableActions<T extends Record<string, unknown> = Record<string, unknown>>({
+  row,
+  align = 'right',
+  className = '',
+  ...props
+}: TableActionsProps<T>) {
+  const { actions } = useTableContext<T>();
+
+  if (!actions) {
+    return null;
+  }
+
+  const rowActions = actions(row);
+
+  if (rowActions.length === 0) {
+    return null;
+  }
+
+  return (
+    <TableActionsComponent
+      row={row}
+      actions={rowActions}
+      align={align}
+      className={className}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,137 @@
+'use client';
+
+import { useMemo, type HTMLAttributes, ReactNode } from 'react';
+import { useTableContext } from './TableContext';
+import { Skeleton } from '../../atoms';
+import TableRow from './TableRow';
+import TableEmptyState from './TableEmptyState';
+import { useVirtualScrolling } from './useVirtualScrolling';
+
+export interface TableBodyProps<T extends Record<string, unknown> = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> {
+  children?: (row: T, index: number) => ReactNode;
+  className?: string;
+}
+
+/**
+ * TableBody Component
+ * 
+ * Renders the table body (tbody) with rows.
+ * Can render loading skeleton, empty state, or data rows.
+ * Must be used within a Table component.
+ */
+export default function TableBody({
+  children,
+  className = '',
+  ...props
+}: TableBodyProps) {
+  const {
+    paginatedData,
+    loading,
+    columns,
+    selectable,
+    actions,
+    virtualScrolling,
+    virtualScrollingOptions,
+  } = useTableContext();
+
+  // Calculate total columns for colspan
+  const totalColumns = columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0);
+
+  // Virtual scrolling
+  const virtualScrollingResult = useVirtualScrolling(
+    paginatedData,
+    {
+      itemHeight: virtualScrollingOptions?.itemHeight || 50,
+      containerHeight: virtualScrollingOptions?.containerHeight,
+      overscan: virtualScrollingOptions?.overscan || 5,
+      enabled: virtualScrolling || false,
+    }
+  );
+
+  const rowsToRender = useMemo(() => {
+    if (virtualScrolling && virtualScrollingResult.virtualItems.length > 0) {
+      return virtualScrollingResult.virtualItems
+        .map((item) => ({
+          row: paginatedData[item.index],
+          index: item.index,
+        }))
+        .filter((item) => item.row !== undefined);
+    }
+    return paginatedData.map((row, index) => ({ row, index }));
+  }, [virtualScrolling, virtualScrollingResult.virtualItems, paginatedData]);
+
+  if (loading) {
+    return (
+      <tbody className={`bg-white divide-y divide-gray-200 ${className}`} {...props}>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <tr key={index}>
+            {Array.from({ length: totalColumns }).map((_, colIndex) => (
+              <td key={colIndex} className="px-6 py-4">
+                <Skeleton className="h-4 w-full" />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    );
+  }
+
+  if (paginatedData.length === 0) {
+    return (
+      <tbody className={`bg-white divide-y divide-gray-200 ${className}`} {...props}>
+        <tr>
+          <td colSpan={totalColumns} className="px-6 py-12">
+            <TableEmptyState />
+          </td>
+        </tr>
+      </tbody>
+    );
+  }
+
+  // If children is a render function, use it
+  if (typeof children === 'function') {
+    return (
+      <tbody className={`bg-white divide-y divide-gray-200 ${className}`} {...props}>
+        {paginatedData.map((row, index) => children(row, index))}
+      </tbody>
+    );
+  }
+
+  // Default: render TableRow for each data item
+  return (
+    <tbody
+      className={`bg-white divide-y divide-gray-200 ${className}`}
+      role="rowgroup"
+      {...props}
+    >
+      {virtualScrolling && virtualScrollingResult.virtualItems.length > 0 && rowsToRender.length > 0 ? (
+        // Virtual scrolling: render with spacer rows
+        <>
+          {virtualScrollingResult.virtualItems[0]?.start > 0 && (
+            <tr style={{ height: virtualScrollingResult.virtualItems[0].start }} aria-hidden="true">
+              <td colSpan={totalColumns} />
+            </tr>
+          )}
+          {rowsToRender.map(({ row, index }) => (
+            <TableRow key={index} row={row} rowIndex={index} />
+          ))}
+          {virtualScrollingResult.virtualItems.length > 0 && (
+            <tr
+              style={{
+                height: Math.max(0, virtualScrollingResult.totalHeight - (virtualScrollingResult.virtualItems[virtualScrollingResult.virtualItems.length - 1]?.end || 0)),
+              }}
+              aria-hidden="true"
+            >
+              <td colSpan={totalColumns} />
+            </tr>
+          )}
+        </>
+      ) : (
+        // Normal rendering
+        rowsToRender.map(({ row, index }) => (
+          <TableRow key={index} row={row} rowIndex={index} />
+        ))
+      )}
+    </tbody>
+  );
+}

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

@@ -0,0 +1,36 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import type { TableColumn } from './TableTypes';
+
+export interface TableCellProps<T = unknown> extends HTMLAttributes<HTMLTableCellElement> {
+  column: TableColumn<T>;
+  row: T;
+}
+
+/**
+ * TableCell Component
+ * 
+ * Renders a table cell (td) for a column.
+ * Uses column.render if available, otherwise renders the raw value.
+ * Must be used within a Table component.
+ */
+export default function TableCell<T extends Record<string, unknown> = Record<string, unknown>>({
+  column,
+  row,
+  className = '',
+  ...props
+}: TableCellProps<T>) {
+  const value = column.key in row ? row[column.key as keyof T] : undefined;
+
+  return (
+    <td
+      className={`px-6 py-4 whitespace-nowrap text-sm text-gray-900 ${
+        column.hiddenOnMobile ? 'hidden md:table-cell' : ''
+      } ${className}`}
+      {...props}
+    >
+      {column.render ? column.render(value, row) : String(value ?? '')}
+    </td>
+  );
+}

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

@@ -0,0 +1,111 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+import type { TableColumn } from './TableTypes';
+import type { FilterConfig } from './TableFilters/TableFilters';
+import type { TableAction } from './TableActions/TableActions';
+
+export type PaginationMode = 'client' | 'server' | 'auto';
+
+export interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+  totalPages: number;
+}
+
+export interface SortState {
+  column: string;
+  direction: 'asc' | 'desc';
+}
+
+import type { FilterValue } from './TableFilters/TableFilters';
+
+export interface FilterState {
+  values: Record<string, FilterValue>;
+  config: FilterConfig[];
+}
+
+export interface SelectionState {
+  selectedRows: string[];
+  isAllSelected: boolean;
+  isIndeterminate: boolean;
+}
+
+export interface TableContextValue<T extends Record<string, unknown> = Record<string, unknown>> {
+  // Data
+  columns: TableColumn<T>[];
+  data: T[];
+  paginatedData: T[];
+  loading: boolean;
+  
+  // State
+  paginationState: PaginationState;
+  sortState: SortState;
+  filterState: FilterState;
+  selectionState: SelectionState;
+  
+  // Configuration
+  paginationMode: PaginationMode;
+  selectable: boolean;
+  rowId?: (row: T) => string;
+  actions?: (row: T) => TableAction<T>[];
+  resizable?: boolean;
+  columnWidths?: Record<string, number>;
+  virtualScrolling?: boolean;
+  
+  // Empty state
+  emptyMessage?: string;
+  emptyStateTitle?: string;
+  emptyStateMessage?: string;
+  emptyStateIllustration?: ReactNode;
+  emptyStateAction?: ReactNode;
+  
+  // Methods
+  setPage: (page: number) => void;
+  setPageSize: (size: number) => void;
+  setSorting: (column: string, direction: 'asc' | 'desc') => void;
+  setFilters: (filters: Record<string, FilterValue>) => void;
+  setSelection: (selected: string[]) => void;
+  toggleRowSelection: (rowId: string) => void;
+  toggleSelectAll: () => void;
+  getRowId: (row: T, index: number) => string;
+  setColumnWidth?: (columnKey: string, width: number) => void;
+  
+  // Callbacks (for controlled components)
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  onSort?: (column: string, direction: 'asc' | 'desc') => void;
+  onFilter?: (filters: Record<string, FilterValue>) => void;
+  onSelectionChange?: (selected: string[]) => void;
+  onRowClick?: (row: T) => void;
+  onColumnResize?: (columnKey: string, width: number) => void;
+}
+
+const TableContext = createContext<TableContextValue<Record<string, unknown>> | undefined>(undefined);
+
+/**
+ * Hook to access Table context
+ * 
+ * @throws Error if used outside of Table component
+ */
+export function useTableContext<T extends Record<string, unknown> = Record<string, unknown>>(): TableContextValue<T> {
+  const context = useContext(TableContext);
+  
+  if (context === undefined) {
+    throw new Error('useTableContext must be used within a Table component');
+  }
+  
+  return context as unknown as TableContextValue<T>;
+}
+
+/**
+ * Hook to access Table context (optional, returns undefined if not in Table)
+ */
+export function useTableContextOptional<T extends Record<string, unknown> = Record<string, unknown>>(): TableContextValue<T> | undefined {
+  const context = useContext(TableContext);
+  return context ? (context as unknown as TableContextValue<T>) : undefined;
+}
+
+export { TableContext };

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

@@ -0,0 +1,51 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useTableContext } from './TableContext';
+import { EmptyState } from '../../molecules';
+
+export type TableEmptyStateProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * TableEmptyState Component
+ * 
+ * Renders empty state when table has no data.
+ * Uses empty state configuration from Table context.
+ * Must be used within a Table component.
+ */
+export default function TableEmptyState({
+  className = '',
+  ...props
+}: TableEmptyStateProps) {
+  const {
+    emptyMessage,
+    emptyStateTitle,
+    emptyStateMessage,
+    emptyStateIllustration,
+    emptyStateAction,
+  } = useTableContext();
+
+  if (emptyStateTitle || emptyStateMessage || emptyStateIllustration) {
+    return (
+      <div className={className} {...props}>
+        <EmptyState
+          title={emptyStateTitle || "No data available"}
+          message={emptyStateMessage || emptyMessage || "No data available"}
+          variant={emptyStateIllustration ? "withIllustration" : "default"}
+          illustration={emptyStateIllustration}
+        />
+        {emptyStateAction && (
+          <div className="mt-4 flex justify-center">
+            {emptyStateAction}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`text-center text-gray-500 ${className}`} {...props}>
+      {emptyMessage || "No data available"}
+    </div>
+  );
+}

package/src/ui/organisms/Table/TableFilters/TableFilters.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import TableFilters from "./TableFilters";
+
+const meta: Meta<typeof TableFilters> = {
+  title: "Organisms/Table/TableFilters",
+  component: TableFilters,
+  parameters: {
+    docs: {
+      description: {
+        component: "Filter controls for tables with support for text, select, and date filters.",
+      },
+    },
+  },
+};
+
+export const Default: StoryObj<typeof TableFilters> = {
+  render: () => {
+    const [_filters, setFilters] = useState<Record<string, string>>({});
+
+    return (
+      <TableFilters
+        filters={[
+          {
+            key: 'status',
+            label: 'Status',
+            type: 'select',
+            options: [
+              { value: 'ACTIVE', label: 'Active' },
+              { value: 'DRAFT', label: 'Draft' },
+              { value: 'COMPLETED', label: 'Completed' },
+            ],
+          },
+          {
+            key: 'priority',
+            label: 'Priority',
+            type: 'select',
+            options: [
+              { value: 'HIGH', label: 'High' },
+              { value: 'MEDIUM', label: 'Medium' },
+              { value: 'LOW', label: 'Low' },
+            ],
+          },
+          {
+            key: 'search',
+            label: 'Search',
+            type: 'text',
+            placeholder: 'Search by name...',
+          },
+        ]}
+        onFilter={(newFilters) => {
+          setFilters(newFilters);
+        }}
+      />
+    );
+  },
+};
+
+export const WithInitialValues: StoryObj<typeof TableFilters> = {
+  render: () => {
+    const [_filters, setFilters] = useState<Record<string, unknown>>({});
+
+    return (
+      <TableFilters
+        filters={[
+          {
+            key: 'status',
+            label: 'Status',
+            type: 'select',
+            options: [
+              { value: 'ACTIVE', label: 'Active' },
+              { value: 'DRAFT', label: 'Draft' },
+            ],
+          },
+        ]}
+        onFilter={(newFilters) => {
+          setFilters(newFilters);
+        }}
+        initialValues={{ status: 'ACTIVE' }}
+      />
+    );
+  },
+};
+
+export const WithDateFilter: StoryObj<typeof TableFilters> = {
+  render: () => {
+    const [_filters, setFilters] = useState<Record<string, string>>({});
+
+    return (
+      <TableFilters
+        filters={[
+          {
+            key: 'startDate',
+            label: 'Start Date',
+            type: 'date',
+          },
+          {
+            key: 'endDate',
+            label: 'End Date',
+            type: 'date',
+          },
+        ]}
+        onFilter={(newFilters) => {
+          setFilters(newFilters);
+        }}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/ui/organisms/Table/TableFilters/TableFilters.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import TableFilters from './TableFilters';
+
+describe('TableFilters', () => {
+  it('renders filter controls', () => {
+    const onFilter = vi.fn();
+
+    render(
+      <TableFilters
+        filters={[
+          {
+            key: 'status',
+            label: 'Status',
+            type: 'select',
+            options: [{ value: 'ACTIVE', label: 'Active' }],
+          },
+        ]}
+        onFilter={onFilter}
+      />
+    );
+
+    expect(screen.getByText('Filters')).toBeInTheDocument();
+  });
+
+  it('expands filters when clicked', () => {
+    const onFilter = vi.fn();
+
+    render(
+      <TableFilters
+        filters={[
+          {
+            key: 'status',
+            label: 'Status',
+            type: 'select',
+            options: [{ value: 'ACTIVE', label: 'Active' }],
+          },
+        ]}
+        onFilter={onFilter}
+      />
+    );
+
+    const filterButton = screen.getByText('Filters');
+    fireEvent.click(filterButton);
+
+    expect(screen.getByLabelText('Status')).toBeInTheDocument();
+  });
+
+  it('calls onFilter when filter value changes', () => {
+    const onFilter = vi.fn();
+
+    render(
+      <TableFilters
+        filters={[
+          {
+            key: 'status',
+            label: 'Status',
+            type: 'select',
+            options: [
+              { value: '', label: 'All Status' },
+              { value: 'ACTIVE', label: 'Active' },
+            ],
+          },
+        ]}
+        onFilter={onFilter}
+      />
+    );
+
+    const filterButton = screen.getByText('Filters');
+    fireEvent.click(filterButton);
+
+    const select = screen.getByLabelText('Status');
+    fireEvent.change(select, { target: { value: 'ACTIVE' } });
+
+    expect(onFilter).toHaveBeenCalledWith({ status: 'ACTIVE' });
+  });
+
+  it('clears all filters when clear all is clicked', () => {
+    const onFilter = vi.fn();
+
+    render(
+      <TableFilters
+        filters={[
+          {
+            key: 'status',
+            label: 'Status',
+            type: 'select',
+            options: [{ value: 'ACTIVE', label: 'Active' }],
+          },
+        ]}
+        onFilter={onFilter}
+        initialValues={{ status: 'ACTIVE' }}
+      />
+    );
+
+    const filterButton = screen.getByText('Filters');
+    fireEvent.click(filterButton);
+
+    const clearAllButton = screen.getByText('Clear all');
+    fireEvent.click(clearAllButton);
+
+    expect(onFilter).toHaveBeenCalledWith({ status: '' });
+  });
+});