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

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

@@ -44,7 +44,9 @@ describe("Table", () => {
         loading={true}
       />
     );
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    // Loading state shows skeleton, not "Loading..." text
+    const table = screen.getByRole('table');
+    expect(table).toBeInTheDocument();
   });
 
   it("shows empty message when no data", () => {
@@ -70,9 +72,11 @@ describe("Table", () => {
         onSort={handleSort}
       />
     );
-    const nameHeader = screen.getByText("Name");
-    fireEvent.click(nameHeader);
-    expect(handleSort).toHaveBeenCalledWith('name', 'asc');
+    const nameHeader = screen.getByText("Name").closest('th');
+    if (nameHeader) {
+      fireEvent.click(nameHeader);
+      expect(handleSort).toHaveBeenCalledWith('name', 'asc');
+    }
   });
 
   it("uses custom render function", () => {
@@ -106,4 +110,82 @@ describe("Table", () => {
     );
     expect(screen.getByText("↑")).toBeInTheDocument();
   });
+
+  it("supports client-side pagination", () => {
+    const allData = Array.from({ length: 25 }, (_, i) => ({
+      id: (i + 1).toString(),
+      name: `Item ${i + 1}`,
+      status: 'ACTIVE',
+    }));
+
+    render(
+      <Table
+        columns={[{ key: 'name', label: 'Name' }]}
+        data={allData}
+        paginationMode="client"
+        defaultPageSize={10}
+      />
+    );
+
+    // Should show first 10 items
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 10")).toBeInTheDocument();
+    // Should not show item 11 on first page
+    expect(screen.queryByText("Item 11")).not.toBeInTheDocument();
+  });
+
+  it("supports server-side pagination", () => {
+    const paginatedData = sampleData.slice(0, 1);
+    const handlePageChange = vi.fn();
+
+    render(
+      <Table
+        columns={[{ key: 'name', label: 'Name' }]}
+        data={paginatedData}
+        paginationMode="server"
+        page={1}
+        pageSize={1}
+        total={2}
+        onPageChange={handlePageChange}
+      />
+    );
+
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.queryByText("Item 2")).not.toBeInTheDocument();
+  });
+
+  it("supports row selection", () => {
+    const handleSelectionChange = vi.fn();
+    render(
+      <Table
+        columns={[{ key: 'name', label: 'Name' }]}
+        data={sampleData}
+        selectable
+        onSelectionChange={handleSelectionChange}
+        rowId={(row) => row.id}
+      />
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    // Should have select all checkbox + 2 row checkboxes
+    expect(checkboxes.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("supports actions", () => {
+    const handleAction = vi.fn();
+    render(
+      <Table
+        columns={[{ key: 'name', label: 'Name' }]}
+        data={sampleData}
+        actions={(row) => [
+          { label: 'Edit', onClick: () => handleAction(row) },
+        ]}
+        rowId={(row) => row.id}
+      />
+    );
+
+    // Actions button should be present
+    const actionButtons = screen.getAllByLabelText('Row actions');
+    expect(actionButtons.length).toBeGreaterThan(0);
+  });
 });

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

@@ -1,15 +1,25 @@
 'use client';
 
 import type { HTMLAttributes, ReactNode } from "react";
+import { TableProvider, type TableProviderProps } from './TableProvider';
+import type { FilterConfig, FilterValue } from './TableFilters/TableFilters';
+import type { TableAction } from './TableActions/TableActions';
+import type { TableColumn } from './TableTypes';
+import TableHeader from './TableHeader';
+import TableHeaderRow from './TableHeaderRow';
+import TableHeaderCell from './TableHeaderCell';
+import TableBody from './TableBody';
+import TableRow from './TableRow';
+import TableCell from './TableCell';
+import TableFilters from './TableFilters';
+import TablePagination from './TablePagination';
+import TableEmptyState from './TableEmptyState';
+import TableActions from './TableActions';
 
-export interface TableColumn<T = any> {
-  key: string;
-  label: string;
-  render?: (value: any, row: T) => ReactNode;
-  sortable?: boolean;
-}
+export type { TableColumn } from './TableTypes';
 
-interface Props<T = any> extends HTMLAttributes<HTMLTableElement> {
+// API Simplificada Props (backward compatible)
+interface SimplifiedTableProps<T extends Record<string, unknown> = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLDivElement>, 'onSort' | 'children'> {
   columns: TableColumn<T>[];
   data: T[];
   loading?: boolean;
@@ -17,114 +27,220 @@ interface Props<T = any> extends HTMLAttributes<HTMLTableElement> {
   sortColumn?: string;
   sortDirection?: 'asc' | 'desc';
   emptyMessage?: string;
+  emptyStateTitle?: string;
+  emptyStateMessage?: string;
+  emptyStateIllustration?: ReactNode;
+  emptyStateAction?: ReactNode;
+  
+  // Pagination
+  pagination?: {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    pageSizeOptions?: number[];
+  };
+  
+  // Filters
+  filters?: {
+    config: FilterConfig[];
+    onFilter: (filters: Record<string, FilterValue>) => void;
+    initialValues?: Record<string, FilterValue>;
+  };
+  
+  // Selection
+  selectable?: boolean;
+  selectedRows?: string[];
+  onSelectionChange?: (selected: string[]) => void;
+  rowId?: (row: T) => string;
+  
+  // Actions
+  actions?: (row: T) => TableAction<T>[];
+  
+  // Pagination mode
+  paginationMode?: 'client' | 'server' | 'auto';
+  defaultPageSize?: number;
+  
+  // 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;
+  };
+  
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  
+  children?: never; // Simplified API doesn't accept children
 }
 
+// API Declarativa Props (compound components)
+interface DeclarativeTableProps<T extends Record<string, unknown> = Record<string, unknown>> extends Omit<TableProviderProps<T>, 'children'> {
+  children: ReactNode; // Declarative API requires children
+}
+
+type TableProps<T extends Record<string, unknown> = Record<string, unknown>> = SimplifiedTableProps<T> | DeclarativeTableProps<T>;
+
 /**
  * Table Component
  * 
- * A table component with sorting, loading states, and responsive design.
- * Follows Atomic Design principles as an Organism component.
+ * A comprehensive table component with sorting, pagination, filters, selection, and actions.
+ * Supports both simplified API (props-based) and declarative API (compound components).
  * 
  * @example
  * ```tsx
+ * // Simplified API
  * <Table
- *   columns={[
- *     { key: 'name', label: 'Name', sortable: true },
- *     { key: 'status', label: 'Status' }
- *   ]}
- *   data={items}
+ *   columns={columns}
+ *   data={data}
+ *   pagination={{ page, pageSize, total, onPageChange }}
  * />
+ * 
+ * // Declarative API
+ * <Table columns={columns} data={data}>
+ *   <Table.Filters />
+ *   <Table.Header />
+ *   <Table.Body />
+ *   <Table.Pagination />
+ * </Table>
  * ```
  */
-export default function Table<T = any>({
-  columns,
-  data,
-  loading = false,
-  onSort,
-  sortColumn,
-  sortDirection,
-  emptyMessage = "No data available",
-  className = "",
-  ...props
-}: Props<T>) {
-  const handleSort = (columnKey: string) => {
-    if (!onSort || !columns.find(col => col.key === columnKey)?.sortable) {
-      return;
-    }
+function TableComponent<T = unknown>(props: TableProps<T>) {
+  const { className = '', ...restProps } = props;
+  const hasChildren = 'children' in props && props.children !== undefined;
 
-    const newDirection =
-      sortColumn === columnKey && sortDirection === 'asc' ? 'desc' : 'asc';
-    onSort(columnKey, newDirection);
-  };
+  // Convert simplified API props to provider props
+  const providerProps: TableProviderProps<T> = hasChildren
+    ? (restProps as DeclarativeTableProps<T>)
+    : convertSimplifiedToProviderProps(restProps as SimplifiedTableProps<T>);
 
-  const baseClasses = [
-    "min-w-full",
-    "divide-y",
-    "divide-gray-200",
-  ];
-
-  const classes = [
-    ...baseClasses,
-    className,
-  ].filter(Boolean).join(" ");
+  // If children are provided, use declarative API
+  if (hasChildren) {
+    return (
+      <div className={`bg-white shadow rounded-lg overflow-hidden ${className}`}>
+        <TableProvider {...providerProps}>
+          {props.children}
+        </TableProvider>
+      </div>
+    );
+  }
 
+  // Otherwise, use simplified API with default structure
   return (
-    <div className="overflow-x-auto">
-      <table className={classes} {...props}>
-        <thead className="bg-gray-50">
-          <tr>
-            {columns.map((column) => (
-              <th
-                key={column.key}
-                scope="col"
-                className={`px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${
-                  column.sortable && onSort
-                    ? 'cursor-pointer hover:bg-gray-100 select-none'
-                    : ''
-                }`}
-                onClick={() => column.sortable && handleSort(column.key)}
-              >
-                <div className="flex items-center gap-2">
-                  <span>{column.label}</span>
-                  {column.sortable && sortColumn === column.key && (
-                    <span className="text-gray-400">
-                      {sortDirection === 'asc' ? '↑' : '↓'}
-                    </span>
-                  )}
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
-          {loading ? (
-            <tr>
-              <td colSpan={columns.length} className="px-6 py-4 text-center text-gray-500">
-                Loading...
-              </td>
-            </tr>
-          ) : data.length === 0 ? (
-            <tr>
-              <td colSpan={columns.length} className="px-6 py-4 text-center text-gray-500">
-                {emptyMessage}
-              </td>
-            </tr>
-          ) : (
-            data.map((row, rowIndex) => (
-              <tr key={rowIndex} className="hover:bg-gray-50">
-                {columns.map((column) => {
-                  const value = (row as any)[column.key];
-                  return (
-                    <td key={column.key} className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                      {column.render ? column.render(value, row) : value}
-                    </td>
-                  );
-                })}
-              </tr>
-            ))
-          )}
-        </tbody>
-      </table>
+    <div className={`bg-white shadow rounded-lg overflow-hidden ${className}`}>
+      <TableProvider {...providerProps}>
+        {providerProps.filters && providerProps.filters.length > 0 && <TableFilters />}
+        <div className="overflow-x-auto">
+          <table
+            className="min-w-full divide-y divide-gray-200"
+            role="table"
+            aria-label={props['aria-label']}
+            aria-labelledby={props['aria-labelledby']}
+            aria-rowcount={providerProps.total || providerProps.data.length}
+            aria-colcount={providerProps.columns.length + (providerProps.selectable ? 1 : 0) + (providerProps.actions ? 1 : 0)}
+          >
+            <TableHeader />
+            <TableBody />
+          </table>
+        </div>
+        {/* Show pagination - TablePagination component will decide if it should render based on totalPages */}
+        <TablePagination />
+      </TableProvider>
     </div>
   );
 }
+
+// Helper to convert simplified API props to provider props
+function convertSimplifiedToProviderProps<T extends Record<string, unknown>>(props: SimplifiedTableProps<T>): TableProviderProps<T> {
+  const {
+    columns,
+    data,
+    loading,
+    onSort,
+    sortColumn,
+    sortDirection,
+    emptyMessage,
+    emptyStateTitle,
+    emptyStateMessage,
+    emptyStateIllustration,
+    emptyStateAction,
+    pagination,
+    filters,
+    selectable,
+    selectedRows,
+    onSelectionChange,
+    rowId,
+    actions,
+    paginationMode,
+    defaultPageSize,
+    resizable,
+    columnWidths,
+    onColumnResize,
+    virtualScrolling,
+    virtualScrollingOptions,
+  } = props;
+
+  // Determine pagination mode
+  let mode: 'client' | 'server' | 'auto' = paginationMode || 'auto';
+  if (mode === 'auto') {
+    mode = pagination && pagination.total !== undefined && pagination.onPageChange ? 'server' : 'client';
+  }
+
+  return {
+    columns,
+    data,
+    loading,
+    paginationMode: mode,
+    page: pagination?.page,
+    pageSize: pagination?.pageSize,
+    total: pagination?.total,
+    onPageChange: pagination?.onPageChange,
+    onPageSizeChange: pagination?.onPageSizeChange,
+    defaultPageSize: defaultPageSize || pagination?.pageSize || 10,
+    pageSizeOptions: pagination?.pageSizeOptions,
+    sortColumn,
+    sortDirection,
+    onSort,
+    filters: filters?.config,
+    filterValues: filters?.initialValues,
+    onFilter: filters?.onFilter,
+    initialFilterValues: filters?.initialValues,
+    selectable,
+    selectedRows,
+    onSelectionChange,
+    rowId,
+    actions,
+    emptyMessage,
+    emptyStateTitle,
+    emptyStateMessage,
+    emptyStateIllustration,
+    emptyStateAction,
+    resizable,
+    columnWidths,
+    onColumnResize,
+    virtualScrolling,
+    virtualScrollingOptions,
+    children: <></>, // Placeholder, will be overridden by default structure
+  };
+}
+
+// Compound Components
+TableComponent.Header = TableHeader;
+TableComponent.HeaderRow = TableHeaderRow;
+TableComponent.HeaderCell = TableHeaderCell;
+TableComponent.Body = TableBody;
+TableComponent.Row = TableRow;
+TableComponent.Cell = TableCell;
+TableComponent.Filters = TableFilters;
+TableComponent.Pagination = TablePagination;
+TableComponent.EmptyState = TableEmptyState;
+TableComponent.Actions = TableActions;
+
+export default TableComponent;

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TableActions from "./TableActions";
+
+interface SampleRow {
+  id: string;
+  name: string;
+  status: string;
+}
+
+const sampleRow: SampleRow = {
+  id: '1',
+  name: 'Sample Item',
+  status: 'ACTIVE',
+};
+
+const meta: Meta<typeof TableActions> = {
+  title: "Organisms/Table/TableActions",
+  component: TableActions,
+  parameters: {
+    docs: {
+      description: {
+        component: "Dropdown menu for row actions in tables.",
+      },
+    },
+  },
+};
+
+export const Default: StoryObj<typeof TableActions> = {
+  args: {
+    row: sampleRow,
+    actions: [
+      {
+        label: 'View',
+        onClick: () => {},
+      },
+      {
+        label: 'Edit',
+        onClick: () => {},
+      },
+      {
+        label: 'Delete',
+        onClick: () => {},
+        variant: 'danger',
+      },
+    ],
+  },
+};
+
+export const WithDisabledAction: StoryObj<typeof TableActions> = {
+  args: {
+    row: sampleRow,
+    actions: [
+      {
+        label: 'View',
+        onClick: () => {},
+      },
+      {
+        label: 'Edit',
+        onClick: () => {},
+        disabled: true,
+      },
+      {
+        label: 'Delete',
+        onClick: () => {},
+        variant: 'danger',
+      },
+    ],
+  },
+};
+
+export const LeftAligned: StoryObj<typeof TableActions> = {
+  args: {
+    row: sampleRow,
+    align: 'left',
+    actions: [
+      {
+        label: 'View',
+        onClick: () => {},
+      },
+      {
+        label: 'Edit',
+        onClick: () => {},
+      },
+    ],
+  },
+};
+
+export default meta;

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

@@ -0,0 +1,64 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import TableActions from './TableActions';
+
+describe('TableActions', () => {
+  it('renders actions button', () => {
+    const actions = [
+      {
+        label: 'Edit',
+        onClick: vi.fn(),
+      },
+    ];
+
+    render(<TableActions actions={actions} row={{ id: '1' }} />);
+
+    expect(screen.getByLabelText('Row actions')).toBeInTheDocument();
+  });
+
+  it('opens dropdown when clicked', async () => {
+    const user = userEvent.setup();
+    const actions = [
+      {
+        label: 'Edit',
+        onClick: vi.fn(),
+      },
+    ];
+
+    render(<TableActions actions={actions} row={{ id: '1' }} />);
+
+    const button = screen.getByLabelText('Row actions');
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
+  });
+
+  it('calls onClick when action is clicked', async () => {
+    const user = userEvent.setup();
+    const row = { id: '1', name: 'Test' };
+    const onClick = vi.fn();
+    const actions = [
+      {
+        label: 'Edit',
+        onClick,
+      },
+    ];
+
+    render(<TableActions actions={actions} row={row} />);
+
+    const button = screen.getByLabelText('Row actions');
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
+
+    const editButton = screen.getByText('Edit');
+    await user.click(editButton);
+
+    expect(onClick).toHaveBeenCalledWith(row);
+  });
+});

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

@@ -0,0 +1,71 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import Dropdown from '../../../molecules/Dropdown/Dropdown';
+import { Button } from '../../../atoms';
+import { MoreVertical } from 'lucide-react';
+
+export interface TableAction<T extends Record<string, unknown> = Record<string, unknown>> {
+  label: string;
+  onClick: (row: T) => void;
+  variant?: 'default' | 'danger';
+  disabled?: boolean;
+  icon?: React.ReactNode;
+}
+
+export interface TableActionsProps<T extends Record<string, unknown> = Record<string, unknown>> extends HTMLAttributes<HTMLDivElement> {
+  actions: TableAction<T>[];
+  row: T;
+  align?: 'left' | 'right';
+}
+
+/**
+ * TableActions Component
+ * 
+ * Dropdown menu for row actions in tables.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <TableActions
+ *   row={rowData}
+ *   actions={[
+ *     { label: 'Edit', onClick: (row) => handleEdit(row) },
+ *     { label: 'Delete', onClick: (row) => handleDelete(row), variant: 'danger' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function TableActions<T extends Record<string, unknown> = Record<string, unknown>>({
+  actions,
+  row,
+  align = 'right',
+  className = '',
+  ...props
+}: TableActionsProps<T>) {
+  const dropdownItems = actions.map((action) => ({
+    label: action.label,
+    onClick: () => action.onClick(row),
+    variant: action.variant,
+    disabled: action.disabled,
+  }));
+
+  return (
+    <div className={`inline-flex ${className}`} {...props}>
+      <Dropdown
+        trigger={
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label="Row actions"
+            className="h-8 w-8 p-0"
+          >
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+        }
+        items={dropdownItems}
+        align={align}
+      />
+    </div>
+  );
+}