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

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

@@ -0,0 +1,85 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useTableContext } from './TableContext';
+import { Checkbox } from '../../atoms';
+import TableCell from './TableCell';
+import TableActions from './TableActions';
+
+export interface TableRowProps<T extends Record<string, unknown> = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'style'> {
+  row: T;
+  rowIndex: number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+/**
+ * TableRow Component
+ * 
+ * Renders a table row (tr) with cells.
+ * Supports selection and row click.
+ * Must be used within a Table component.
+ */
+export default function TableRow<T extends Record<string, unknown> = Record<string, unknown>>({
+  row,
+  rowIndex,
+  className = '',
+  onClick,
+  style,
+  ...props
+}: TableRowProps<T>) {
+  const {
+    columns,
+    selectable,
+    selectionState,
+    toggleRowSelection,
+    getRowId,
+    actions,
+    onRowClick,
+  } = useTableContext<T>();
+
+  const id = getRowId(row, rowIndex);
+  const isSelected = selectionState.selectedRows.includes(id);
+
+  const handleClick = (e: React.MouseEvent<HTMLTableRowElement>) => {
+    if (onClick) {
+      onClick(e);
+    }
+    if (onRowClick) {
+      onRowClick(row);
+    }
+  };
+
+  return (
+    <tr
+      role="row"
+      aria-selected={selectable ? isSelected : undefined}
+      aria-rowindex={rowIndex + 1}
+      className={`hover:bg-gray-50 ${isSelected ? 'bg-indigo-50' : ''} ${className}`}
+      onClick={handleClick}
+      style={style}
+      {...props}
+    >
+      {selectable && (
+        <td className="px-6 py-4">
+          <Checkbox
+            checked={isSelected}
+            onChange={() => toggleRowSelection(id)}
+            aria-label={`Select row ${id}`}
+            className="my-0"
+          />
+        </td>
+      )}
+      
+      {columns.map((column) => (
+        <TableCell key={column.key} column={column} row={row} />
+      ))}
+      
+      {actions && (
+        <td className="px-6 py-4 text-right">
+          <TableActions row={row} />
+        </td>
+      )}
+    </tr>
+  );
+}

package/src/ui/organisms/Table/TableTypes.ts

@@ -0,0 +1,11 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+export interface TableColumn<T = Record<string, unknown>> {
+  key: keyof T | string;
+  label: string;
+  render?: (value: unknown, row: T) => ReactNode;
+  sortable?: boolean;
+  hiddenOnMobile?: boolean;
+}

package/src/ui/organisms/Table/index.ts

@@ -0,0 +1,55 @@
+// Main Table component
+export { default as Table } from './Table';
+export type { TableColumn } from './TableTypes';
+
+// Context
+export { TableContext, useTableContext, useTableContextOptional } from './TableContext';
+export type {
+  TableContextValue,
+  PaginationMode,
+  PaginationState,
+  SortState,
+  FilterState,
+  SelectionState,
+} from './TableContext';
+
+// Provider
+export { TableProvider } from './TableProvider';
+export type { TableProviderProps } from './TableProvider';
+
+// Compound Components
+export { default as TableHeader } from './TableHeader';
+export type { TableHeaderProps } from './TableHeader';
+
+export { default as TableHeaderRow } from './TableHeaderRow';
+export type { TableHeaderRowProps } from './TableHeaderRow';
+
+export { default as TableHeaderCell } from './TableHeaderCell';
+export type { TableHeaderCellProps } from './TableHeaderCell';
+
+export { default as TableBody } from './TableBody';
+export type { TableBodyProps } from './TableBody';
+
+export { default as TableRow } from './TableRow';
+export type { TableRowProps } from './TableRow';
+
+export { default as TableCell } from './TableCell';
+export type { TableCellProps } from './TableCell';
+
+export { default as TableFilters } from './TableFilters';
+export type { TableFiltersProps } from './TableFilters';
+
+export { default as TablePagination } from './TablePagination';
+export type { TablePaginationProps } from './TablePagination';
+
+export { default as TableEmptyState } from './TableEmptyState';
+export type { TableEmptyStateProps } from './TableEmptyState';
+
+export { default as TableActions } from './TableActions';
+export type { TableActionsProps } from './TableActions';
+
+// Hooks
+export { useVirtualScrolling } from './useVirtualScrolling';
+export { useColumnResizing } from './useColumnResizing';
+export type { UseVirtualScrollingOptions, VirtualScrollingResult } from './useVirtualScrolling';
+export type { UseColumnResizingOptions, UseColumnResizingResult } from './useColumnResizing';

package/src/ui/organisms/Table/useColumnResizing.ts

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+
+export interface ColumnWidth {
+  [key: string]: number;
+}
+
+export interface UseColumnResizingOptions {
+  defaultWidths?: ColumnWidth;
+  minWidth?: number;
+  maxWidth?: number;
+  resizable?: boolean;
+}
+
+export interface UseColumnResizingResult {
+  columnWidths: ColumnWidth;
+  setColumnWidth: (columnKey: string, width: number) => void;
+  resetColumnWidths: () => void;
+  isResizing: boolean;
+  resizingColumn: string | null;
+  startResize: (columnKey: string, startX: number, startWidth: number) => void;
+  handleResize: (currentX: number) => void;
+  endResize: () => void;
+}
+
+/**
+ * useColumnResizing Hook
+ * 
+ * Hook for managing column resizing in tables.
+ * 
+ * @example
+ * ```tsx
+ * const {
+ *   columnWidths,
+ *   setColumnWidth,
+ *   startResize,
+ *   handleResize,
+ *   endResize,
+ * } = useColumnResizing({
+ *   defaultWidths: { name: 200, email: 250 },
+ *   minWidth: 100,
+ * });
+ * ```
+ */
+export function useColumnResizing(
+  options: UseColumnResizingOptions = {}
+): UseColumnResizingResult {
+  const {
+    defaultWidths = {},
+    minWidth = 50,
+    maxWidth,
+    resizable = true,
+  } = options;
+
+  const [columnWidths, setColumnWidths] = useState<ColumnWidth>(defaultWidths);
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizingColumn, setResizingColumn] = useState<string | null>(null);
+  const resizeStateRef = useRef<{ startX: number; startWidth: number } | null>(null);
+
+  const setColumnWidth = useCallback((columnKey: string, width: number) => {
+    const clampedWidth = Math.max(minWidth, maxWidth ? Math.min(width, maxWidth) : width);
+    setColumnWidths((prev) => ({
+      ...prev,
+      [columnKey]: clampedWidth,
+    }));
+  }, [minWidth, maxWidth]);
+
+  const resetColumnWidths = useCallback(() => {
+    setColumnWidths(defaultWidths);
+  }, [defaultWidths]);
+
+  const startResize = useCallback((columnKey: string, startX: number, startWidth: number) => {
+    if (!resizable) return;
+    setIsResizing(true);
+    setResizingColumn(columnKey);
+    resizeStateRef.current = { startX, startWidth };
+  }, [resizable]);
+
+  const handleResize = useCallback((currentX: number) => {
+    if (!isResizing || !resizingColumn || !resizeStateRef.current) return;
+    
+    const deltaX = currentX - resizeStateRef.current.startX;
+    const newWidth = resizeStateRef.current.startWidth + deltaX;
+    setColumnWidth(resizingColumn, newWidth);
+  }, [isResizing, resizingColumn, setColumnWidth]);
+
+  const endResize = useCallback(() => {
+    setIsResizing(false);
+    setResizingColumn(null);
+    resizeStateRef.current = null;
+  }, []);
+
+  // Handle mouse move and mouse up globally during resize
+  const handleMouseMoveRef = useRef<(e: MouseEvent) => void>();
+  const handleMouseUpRef = useRef<() => void>();
+
+  if (typeof window !== 'undefined') {
+    handleMouseMoveRef.current = (e: MouseEvent) => {
+      if (isResizing) {
+        handleResize(e.clientX);
+      }
+    };
+
+    handleMouseUpRef.current = () => {
+      if (isResizing) {
+        endResize();
+      }
+    };
+
+    if (isResizing) {
+      document.addEventListener('mousemove', handleMouseMoveRef.current);
+      document.addEventListener('mouseup', handleMouseUpRef.current);
+    } else {
+      if (handleMouseMoveRef.current) {
+        document.removeEventListener('mousemove', handleMouseMoveRef.current);
+      }
+      if (handleMouseUpRef.current) {
+        document.removeEventListener('mouseup', handleMouseUpRef.current);
+      }
+    }
+  }
+
+  return {
+    columnWidths,
+    setColumnWidth,
+    resetColumnWidths,
+    isResizing,
+    resizingColumn,
+    startResize,
+    handleResize,
+    endResize,
+  };
+}

package/src/ui/organisms/Table/useVirtualScrolling.ts

@@ -0,0 +1,116 @@
+'use client';
+
+import { useState, useEffect, useRef, useMemo } from 'react';
+
+export interface UseVirtualScrollingOptions {
+  itemHeight: number; // Height of each row in pixels
+  containerHeight?: number; // Height of visible container
+  overscan?: number; // Number of items to render outside visible area
+  enabled?: boolean; // Whether virtual scrolling is enabled
+}
+
+export interface VirtualScrollingResult {
+  virtualItems: Array<{
+    index: number;
+    start: number;
+    end: number;
+    size: number;
+  }>;
+  totalHeight: number;
+  scrollOffset: number;
+  setScrollOffset: (offset: number) => void;
+  scrollToIndex: (index: number) => void;
+  containerRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * useVirtualScrolling Hook
+ * 
+ * Hook for virtual scrolling to improve performance with large datasets.
+ * Only renders visible items plus overscan buffer.
+ * 
+ * @example
+ * ```tsx
+ * const { virtualItems, totalHeight, containerRef } = useVirtualScrolling({
+ *   itemHeight: 50,
+ *   containerHeight: 400,
+ *   overscan: 5,
+ * });
+ * ```
+ */
+export function useVirtualScrolling<T>(
+  items: T[],
+  options: UseVirtualScrollingOptions
+): VirtualScrollingResult {
+  const {
+    itemHeight,
+    containerHeight,
+    overscan = 5,
+    enabled = true,
+  } = options;
+
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Calculate visible range
+  const virtualItems = useMemo(() => {
+    if (!enabled || items.length === 0) {
+      return items.map((_, index) => ({
+        index,
+        start: index * itemHeight,
+        end: (index + 1) * itemHeight,
+        size: itemHeight,
+      }));
+    }
+
+    const visibleStart = Math.max(0, Math.floor(scrollOffset / itemHeight) - overscan);
+    const visibleEnd = containerHeight
+      ? Math.min(
+          items.length,
+          Math.ceil((scrollOffset + containerHeight) / itemHeight) + overscan
+        )
+      : items.length;
+
+    const result: Array<{ index: number; start: number; end: number; size: number }> = [];
+    for (let i = visibleStart; i < visibleEnd; i++) {
+      result.push({
+        index: i,
+        start: i * itemHeight,
+        end: (i + 1) * itemHeight,
+        size: itemHeight,
+      });
+    }
+    return result;
+  }, [items.length, itemHeight, scrollOffset, containerHeight, overscan, enabled]);
+
+  const totalHeight = items.length * itemHeight;
+
+  // Handle scroll events
+  useEffect(() => {
+    if (!enabled || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const handleScroll = () => {
+      setScrollOffset(container.scrollTop);
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [enabled]);
+
+  const scrollToIndex = (index: number) => {
+    if (!containerRef.current) return;
+    const offset = index * itemHeight;
+    containerRef.current.scrollTop = offset;
+    setScrollOffset(offset);
+  };
+
+  return {
+    virtualItems,
+    totalHeight,
+    scrollOffset,
+    setScrollOffset,
+    scrollToIndex,
+    containerRef,
+  };
+}

package/src/ui/organisms/Timeline/Timeline.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Timeline from './Timeline';
+import { CheckCircle2, XCircle, Package, Truck, CheckCircle } from 'lucide-react';
+
+const meta: Meta<typeof Timeline> = {
+  title: 'Organisms/Timeline',
+  component: Timeline,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+
+const basicItems = [
+  {
+    id: '1',
+    title: 'Order Placed',
+    description: 'Your order has been placed successfully',
+    timestamp: '2024-01-15 10:30 AM',
+    status: 'completed' as const,
+  },
+  {
+    id: '2',
+    title: 'Processing',
+    description: 'Your order is being processed',
+    timestamp: '2024-01-15 11:00 AM',
+    status: 'active' as const,
+  },
+  {
+    id: '3',
+    title: 'Shipped',
+    description: 'Your order has been shipped',
+    timestamp: '2024-01-16',
+    status: 'default' as const,
+  },
+  {
+    id: '4',
+    title: 'Delivered',
+    description: 'Your order has been delivered',
+    timestamp: '2024-01-18',
+    status: 'default' as const,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: basicItems,
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    items: basicItems,
+    orientation: 'horizontal',
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    items: [
+      {
+        id: '1',
+        title: 'Order Placed',
+        description: 'Your order has been placed',
+        timestamp: '2024-01-15',
+        icon: <CheckCircle2 className="h-5 w-5" />,
+        status: 'completed',
+      },
+      {
+        id: '2',
+        title: 'Processing',
+        description: 'Your order is being processed',
+        timestamp: '2024-01-16',
+        icon: <Package className="h-5 w-5" />,
+        status: 'active',
+      },
+      {
+        id: '3',
+        title: 'Shipped',
+        description: 'Your order has been shipped',
+        timestamp: '2024-01-17',
+        icon: <Truck className="h-5 w-5" />,
+        status: 'default',
+      },
+      {
+        id: '4',
+        title: 'Delivered',
+        description: 'Your order has been delivered',
+        timestamp: '2024-01-18',
+        icon: <CheckCircle className="h-5 w-5" />,
+        status: 'default',
+      },
+    ],
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    items: [
+      {
+        id: '1',
+        title: 'Project Started',
+        description: 'Initial project setup completed',
+        timestamp: '2024-01-01',
+        status: 'completed',
+        content: (
+          <div className="mt-2 p-3 bg-gray-50 rounded-md">
+            <p className="text-sm text-gray-700">
+              Repository created, initial dependencies installed, and project structure established.
+            </p>
+          </div>
+        ),
+      },
+      {
+        id: '2',
+        title: 'Design Phase',
+        description: 'UI/UX design completed',
+        timestamp: '2024-01-15',
+        status: 'active',
+        content: (
+          <div className="mt-2 p-3 bg-blue-50 rounded-md">
+            <p className="text-sm text-blue-700">
+              Design mockups approved, component library created, and style guide finalized.
+            </p>
+          </div>
+        ),
+      },
+      {
+        id: '3',
+        title: 'Development',
+        description: 'Core features in development',
+        timestamp: '2024-02-01',
+        status: 'default',
+      },
+    ],
+  },
+};
+
+export const WithErrors: Story = {
+  args: {
+    items: [
+      {
+        id: '1',
+        title: 'Step 1',
+        description: 'Completed successfully',
+        timestamp: '2024-01-01',
+        status: 'completed',
+      },
+      {
+        id: '2',
+        title: 'Step 2',
+        description: 'Failed with error',
+        timestamp: '2024-01-02',
+        status: 'error',
+        icon: <XCircle className="h-5 w-5" />,
+      },
+      {
+        id: '3',
+        title: 'Step 3',
+        description: 'Pending',
+        timestamp: '2024-01-03',
+        status: 'default',
+      },
+    ],
+  },
+};
+
+export const Simple: Story = {
+  args: {
+    items: [
+      { id: '1', title: 'Event 1' },
+      { id: '2', title: 'Event 2' },
+      { id: '3', title: 'Event 3' },
+    ],
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    items: [
+      {
+        id: '1',
+        title: 'Milestone 1',
+        description: 'First major milestone achieved',
+        timestamp: 'Q1 2024',
+        status: 'completed',
+        content: (
+          <div className="mt-3 space-y-2">
+            <ul className="list-disc list-inside text-sm text-gray-600 space-y-1">
+              <li>Feature A implemented</li>
+              <li>Feature B implemented</li>
+              <li>Testing completed</li>
+            </ul>
+          </div>
+        ),
+      },
+      {
+        id: '2',
+        title: 'Milestone 2',
+        description: 'Second major milestone in progress',
+        timestamp: 'Q2 2024',
+        status: 'active',
+        content: (
+          <div className="mt-3 space-y-2">
+            <ul className="list-disc list-inside text-sm text-gray-600 space-y-1">
+              <li>Feature C in development</li>
+              <li>Feature D planned</li>
+            </ul>
+          </div>
+        ),
+      },
+      {
+        id: '3',
+        title: 'Milestone 3',
+        description: 'Third major milestone planned',
+        timestamp: 'Q3 2024',
+        status: 'default',
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Timeline from './Timeline';
+
+const mockItems = [
+  { id: '1', title: 'Event 1', description: 'Description 1', timestamp: '2024-01-01' },
+  { id: '2', title: 'Event 2', description: 'Description 2', timestamp: '2024-01-02' },
+  { id: '3', title: 'Event 3', description: 'Description 3', timestamp: '2024-01-03' },
+];
+
+describe('Timeline', () => {
+  it('renders correctly', () => {
+    render(<Timeline items={mockItems} />);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+    expect(screen.getByText('Event 2')).toBeInTheDocument();
+  });
+
+  it('displays timestamps when provided', () => {
+    render(<Timeline items={mockItems} />);
+    expect(screen.getByText('2024-01-01')).toBeInTheDocument();
+  });
+
+  it('displays descriptions when provided', () => {
+    render(<Timeline items={mockItems} />);
+    expect(screen.getByText('Description 1')).toBeInTheDocument();
+  });
+
+  it('handles horizontal orientation', () => {
+    render(<Timeline items={mockItems} orientation="horizontal" />);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+  });
+
+  it('handles vertical orientation', () => {
+    render(<Timeline items={mockItems} orientation="vertical" />);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+  });
+
+  it('handles status prop', () => {
+    const itemsWithStatus = [
+      { ...mockItems[0], status: 'completed' as const },
+      { ...mockItems[1], status: 'active' as const },
+      { ...mockItems[2], status: 'error' as const },
+    ];
+    render(<Timeline items={itemsWithStatus} />);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+  });
+});