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

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

@@ -0,0 +1,191 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
+import { Input, Select, Label, Button } from '../../../atoms';
+import { X, Filter } from 'lucide-react';
+
+export type FilterType = 'text' | 'select' | 'date';
+
+export interface FilterConfig {
+  key: string;
+  label: string;
+  type: FilterType;
+  options?: Array<{ value: string; label: string }>;
+  placeholder?: string;
+}
+
+export type FilterValue = string | number | boolean | null | undefined;
+
+export interface TableFiltersProps extends HTMLAttributes<HTMLDivElement> {
+  filters: FilterConfig[];
+  onFilter: (filters: Record<string, FilterValue>) => void;
+  initialValues?: Record<string, FilterValue>;
+  showClearAll?: boolean;
+}
+
+/**
+ * TableFilters Component
+ * 
+ * Filter controls for tables with support for text, select, and date filters.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <TableFilters
+ *   filters={[
+ *     { key: 'status', label: 'Status', type: 'select', options: [...] },
+ *     { key: 'search', label: 'Search', type: 'text', placeholder: 'Search...' }
+ *   ]}
+ *   onFilter={(filters) => handleFilter(filters)}
+ * />
+ * ```
+ */
+export default function TableFilters({
+  filters,
+  onFilter,
+  initialValues = {},
+  showClearAll = true,
+  className = '',
+  ...props
+}: TableFiltersProps) {
+  const [filterValues, setFilterValues] = useState<Record<string, FilterValue>>(initialValues);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const hasActiveFilters = Object.values(filterValues).some(
+    (value) => value !== '' && value !== null && value !== undefined
+  );
+
+  const handleFilterChange = (key: string, value: FilterValue) => {
+    const newFilters = { ...filterValues, [key]: value };
+    setFilterValues(newFilters);
+    onFilter(newFilters);
+  };
+
+  const handleClearAll = () => {
+    const clearedFilters: Record<string, FilterValue> = {};
+    filters.forEach((filter) => {
+      clearedFilters[filter.key] = '';
+    });
+    setFilterValues(clearedFilters);
+    onFilter(clearedFilters);
+  };
+
+  const handleClearFilter = (key: string) => {
+    const newFilters = { ...filterValues, [key]: '' };
+    setFilterValues(newFilters);
+    onFilter(newFilters);
+  };
+
+  const activeFilterCount = Object.values(filterValues).filter(
+    (value) => value !== '' && value !== null && value !== undefined
+  ).length;
+
+  return (
+    <div className={`bg-white border-b border-gray-200 ${className}`} {...props}>
+      <div className="px-4 py-3 sm:px-6">
+        <div className="flex items-center justify-between">
+          <button
+            type="button"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+          >
+            <Filter className="h-4 w-4" />
+            <span>Filters</span>
+            {activeFilterCount > 0 && (
+              <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
+                {activeFilterCount}
+              </span>
+            )}
+          </button>
+
+          {hasActiveFilters && showClearAll && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClearAll}
+              className="text-sm"
+            >
+              Clear all
+            </Button>
+          )}
+        </div>
+
+        {isExpanded && (
+          <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {filters.map((filter) => {
+              const value = filterValues[filter.key] || '';
+
+              return (
+                <div key={filter.key} className="space-y-1">
+                  <Label htmlFor={`filter-${filter.key}`} variant="optional">
+                    {filter.label}
+                  </Label>
+                  <div className="relative">
+                    {filter.type === 'text' && (
+                      <Input
+                        id={`filter-${filter.key}`}
+                        type="text"
+                        value={value}
+                        onChange={(e) => handleFilterChange(filter.key, e.target.value)}
+                        placeholder={filter.placeholder || `Filter by ${filter.label.toLowerCase()}`}
+                        size="sm"
+                        variant="outlined"
+                      />
+                    )}
+
+                    {filter.type === 'select' && (
+                      <div className="relative">
+                        <Select
+                          id={`filter-${filter.key}`}
+                          options={[
+                            { value: '', label: `All ${filter.label}` },
+                            ...(filter.options || []),
+                          ]}
+                          value={value}
+                          onChange={(e) => handleFilterChange(filter.key, e.target.value)}
+                        />
+                        {value && (
+                          <button
+                            type="button"
+                            onClick={() => handleClearFilter(filter.key)}
+                            className="absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                            aria-label={`Clear ${filter.label} filter`}
+                          >
+                            <X className="h-4 w-4" />
+                          </button>
+                        )}
+                      </div>
+                    )}
+
+                    {filter.type === 'date' && (
+                      <Input
+                        id={`filter-${filter.key}`}
+                        type="date"
+                        value={value}
+                        onChange={(e) => handleFilterChange(filter.key, e.target.value)}
+                        size="sm"
+                        variant="outlined"
+                      />
+                    )}
+
+                    {value && filter.type !== 'select' && (
+                      <button
+                        type="button"
+                        onClick={() => handleClearFilter(filter.key)}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                        aria-label={`Clear ${filter.label} filter`}
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useTableContext } from './TableContext';
+import TableFiltersComponent from './TableFilters/TableFilters';
+
+export interface TableFiltersProps extends HTMLAttributes<HTMLDivElement> {
+  showClearAll?: boolean;
+}
+
+/**
+ * TableFilters Component
+ * 
+ * Renders filter controls for the table.
+ * Uses filter configuration from Table context.
+ * Must be used within a Table component.
+ */
+export default function TableFilters({
+  showClearAll = true,
+  className = '',
+  ...props
+}: TableFiltersProps) {
+  const { filterState, setFilters } = useTableContext();
+
+  if (filterState.config.length === 0) {
+    return null;
+  }
+
+  return (
+    <TableFiltersComponent
+      filters={filterState.config}
+      onFilter={setFilters}
+      initialValues={filterState.values}
+      showClearAll={showClearAll}
+      className={className}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useTableContext } from './TableContext';
+import TableHeaderRow from './TableHeaderRow';
+
+export interface TableHeaderProps extends Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> {
+  className?: string;
+}
+
+/**
+ * TableHeader Component
+ * 
+ * Renders the table header (thead) with columns.
+ * Must be used within a Table component.
+ */
+export default function TableHeader({
+  className = '',
+  ...props
+}: TableHeaderProps) {
+  useTableContext(); // Ensure we're within Table context
+  // columns is accessed via TableHeaderRow which uses useTableContext
+
+  return (
+    <thead className={`bg-gray-50 sticky top-0 z-10 ${className}`} {...props}>
+      <TableHeaderRow />
+    </thead>
+  );
+}

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

@@ -0,0 +1,142 @@
+'use client';
+
+import { useRef, type HTMLAttributes, type MouseEvent, type KeyboardEvent } from 'react';
+import { useTableContext } from './TableContext';
+import type { TableColumn } from './TableTypes';
+
+export interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
+  column: TableColumn;
+  resizable?: boolean;
+  width?: number;
+  onResize?: (columnKey: string, width: number) => void;
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+/**
+ * TableHeaderCell Component
+ * 
+ * Renders a header cell (th) for a column.
+ * Supports sorting if column is sortable.
+ * Must be used within a Table component.
+ */
+export default function TableHeaderCell({
+  column,
+  resizable = false,
+  width,
+  onResize,
+  minWidth = 50,
+  maxWidth,
+  className = '',
+  ...props
+}: TableHeaderCellProps) {
+  const { sortState, setSorting, onSort } = useTableContext();
+  const resizeHandleRef = useRef<HTMLDivElement>(null);
+  const cellRef = useRef<HTMLTableCellElement>(null);
+  const resizeStartRef = useRef<{ x: number; width: number } | null>(null);
+
+  const handleSort = () => {
+    if (!column.sortable || (!onSort && !setSorting)) return;
+
+    const newDirection =
+      sortState.column === column.key && sortState.direction === 'asc' ? 'desc' : 'asc';
+    
+    if (onSort) {
+      onSort(column.key, newDirection);
+    } else {
+      setSorting(column.key, newDirection);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTableCellElement>) => {
+    if (!isSortable) return;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleSort();
+    }
+  };
+
+  const handleResizeStart = (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (!cellRef.current || !onResize) return;
+    
+    const currentWidth = width || cellRef.current.offsetWidth;
+    resizeStartRef.current = {
+      x: e.clientX,
+      width: currentWidth,
+    };
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      if (!resizeStartRef.current) return;
+      
+      const deltaX = moveEvent.clientX - resizeStartRef.current.x;
+      const newWidth = resizeStartRef.current.width + deltaX;
+      const clampedWidth = Math.max(minWidth, maxWidth ? Math.min(newWidth, maxWidth) : newWidth);
+      
+      onResize(column.key, clampedWidth);
+    };
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove as unknown);
+      document.removeEventListener('mouseup', handleMouseUp);
+      resizeStartRef.current = null;
+    };
+
+    document.addEventListener('mousemove', handleMouseMove as unknown);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const isSorted = sortState.column === column.key;
+  const isSortable = column.sortable && (onSort || setSorting);
+  const sortDirection = isSorted ? sortState.direction : undefined;
+
+  return (
+    <th
+      ref={cellRef}
+      scope="col"
+      role="columnheader"
+      aria-sort={
+        isSorted
+          ? sortDirection === 'asc'
+            ? 'ascending'
+            : 'descending'
+          : isSortable
+          ? 'none'
+          : undefined
+      }
+      className={`px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${
+        isSortable
+          ? 'cursor-pointer hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 select-none'
+          : ''
+      } ${column.hiddenOnMobile ? 'hidden md:table-cell' : ''} ${className}`}
+      onClick={isSortable ? handleSort : undefined}
+      onKeyDown={isSortable ? handleKeyDown : undefined}
+      tabIndex={isSortable ? 0 : undefined}
+      style={width ? { width: `${width}px`, minWidth: `${width}px` } : undefined}
+      {...props}
+    >
+      <div className="flex items-center gap-2 relative">
+        <span>{column.label}</span>
+        {isSorted && (
+          <span className="text-gray-400" aria-hidden="true">
+            {sortState.direction === 'asc' ? '↑' : '↓'}
+          </span>
+        )}
+        {resizable && onResize && (
+          <div
+            ref={resizeHandleRef}
+            className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-indigo-500 transition-colors"
+            onMouseDown={handleResizeStart}
+            role="separator"
+            aria-orientation="vertical"
+            aria-label={`Resize ${column.label} column`}
+            style={{ touchAction: 'none' }}
+          />
+        )}
+      </div>
+    </th>
+  );
+}

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

@@ -0,0 +1,72 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useTableContext } from './TableContext';
+import { Checkbox } from '../../atoms';
+import TableHeaderCell from './TableHeaderCell';
+
+export type TableHeaderRowProps = HTMLAttributes<HTMLTableRowElement>;
+
+/**
+ * TableHeaderRow Component
+ * 
+ * Renders a header row (tr) with header cells.
+ * Must be used within a Table component.
+ */
+export default function TableHeaderRow({
+  className = '',
+  ...props
+}: TableHeaderRowProps) {
+  const {
+    columns,
+    selectable,
+    selectionState,
+    toggleSelectAll,
+    actions,
+    resizable,
+    columnWidths,
+    setColumnWidth,
+  } = useTableContext();
+
+  return (
+    <tr role="row" className={className} {...props}>
+      {selectable && (
+        <th
+          scope="col"
+          role="columnheader"
+          className="px-6 py-3 w-12"
+          aria-label="Select all"
+        >
+          <Checkbox
+            checked={selectionState.isAllSelected}
+            onChange={toggleSelectAll}
+            aria-label="Select all rows"
+            className="my-0"
+            indeterminate={selectionState.isIndeterminate}
+          />
+        </th>
+      )}
+      
+      {columns.map((column) => (
+        <TableHeaderCell
+          key={column.key}
+          column={column}
+          resizable={resizable}
+          width={columnWidths?.[column.key]}
+          onResize={setColumnWidth}
+        />
+      ))}
+      
+      {actions && (
+        <th
+          scope="col"
+          role="columnheader"
+          className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-12"
+          aria-label="Actions"
+        >
+          <span className="sr-only">Actions</span>
+        </th>
+      )}
+    </tr>
+  );
+}

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import TablePagination from "./TablePagination";
+
+const meta: Meta<typeof TablePagination> = {
+  title: "Organisms/Table/TablePagination",
+  component: TablePagination,
+  parameters: {
+    docs: {
+      description: {
+        component: "Pagination controls for tables with page navigation and page size selection.",
+      },
+    },
+  },
+};
+
+export const Default: StoryObj<typeof TablePagination> = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+
+    return (
+      <TablePagination
+        page={page}
+        pageSize={pageSize}
+        total={100}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+      />
+    );
+  },
+};
+
+export const WithoutPageSizeSelector: StoryObj<typeof TablePagination> = {
+  render: () => {
+    const [page, setPage] = useState(1);
+
+    return (
+      <TablePagination
+        page={page}
+        pageSize={10}
+        total={100}
+        onPageChange={setPage}
+        onPageSizeChange={() => {}}
+        showPageSizeSelector={false}
+      />
+    );
+  },
+};
+
+export const WithoutPageInfo: StoryObj<typeof TablePagination> = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+
+    return (
+      <TablePagination
+        page={page}
+        pageSize={pageSize}
+        total={100}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        showPageInfo={false}
+      />
+    );
+  },
+};
+
+export const LargeDataset: StoryObj<typeof TablePagination> = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+
+    return (
+      <TablePagination
+        page={page}
+        pageSize={pageSize}
+        total={1250}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        pageSizeOptions={[10, 25, 50, 100, 250]}
+      />
+    );
+  },
+};
+
+export default meta;

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

@@ -0,0 +1,90 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import TablePagination from './TablePagination';
+
+describe('TablePagination', () => {
+  it('renders pagination controls', () => {
+    const onPageChange = vi.fn();
+    const onPageSizeChange = vi.fn();
+
+    render(
+      <TablePagination
+        page={1}
+        pageSize={10}
+        total={100}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+      />
+    );
+
+    // The "Showing" text is inside a Text component that may be split across elements
+    expect(screen.getByText(/Showing/i)).toBeInTheDocument();
+    // Check for key parts of the pagination info text - use more specific queries
+    const showingText = screen.getByText(/Showing/i);
+    const container = showingText.closest('div');
+    expect(container?.textContent).toContain('1'); // startItem
+    expect(container?.textContent).toContain('10'); // endItem
+    expect(container?.textContent).toContain('of');
+    expect(container?.textContent).toContain('results');
+    expect(container?.textContent).toContain('100'); // total
+  });
+
+  it('calls onPageChange when clicking next', () => {
+    const onPageChange = vi.fn();
+    const onPageSizeChange = vi.fn();
+
+    render(
+      <TablePagination
+        page={1}
+        pageSize={10}
+        total={100}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+      />
+    );
+
+    const nextButton = screen.getByLabelText('Next page');
+    fireEvent.click(nextButton);
+
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it('disables previous button on first page', () => {
+    const onPageChange = vi.fn();
+    const onPageSizeChange = vi.fn();
+
+    render(
+      <TablePagination
+        page={1}
+        pageSize={10}
+        total={100}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+      />
+    );
+
+    const prevButton = screen.getByLabelText('Previous page');
+    expect(prevButton).toBeDisabled();
+  });
+
+  it('calls onPageSizeChange when changing page size', () => {
+    const onPageChange = vi.fn();
+    const onPageSizeChange = vi.fn();
+
+    render(
+      <TablePagination
+        page={1}
+        pageSize={10}
+        total={100}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+      />
+    );
+
+    const select = screen.getByDisplayValue('10');
+    fireEvent.change(select, { target: { value: '25' } });
+
+    expect(onPageSizeChange).toHaveBeenCalledWith(25);
+    expect(onPageChange).toHaveBeenCalledWith(1);
+  });
+});