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

package/src/ui/organisms/DataGrid/DataGrid.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { useState, useMemo, type ReactNode } from 'react';
+import { Download, ArrowUpDown } from 'lucide-react';
+import Table, { type TableColumn } from '../Table/Table';
+import Button from '../../atoms/Button/Button';
+import { getSpacingClass } from '../../tokens/spacing';
+import type { TableAction } from '../Table/TableActions/TableActions';
+
+export type DataGridColumn<T = unknown> = TableColumn<T> & {
+  groupable?: boolean;
+  exportable?: boolean;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+};
+
+export interface DataGridGroup {
+  column: string;
+  expanded?: boolean;
+}
+
+export interface DataGridProps<T extends Record<string, unknown> = Record<string, unknown>> {
+  columns: DataGridColumn<T>[];
+  data: T[];
+  loading?: boolean;
+  
+  // Sorting
+  onSort?: (columnKey: string, direction: 'asc' | 'desc') => void;
+  sortColumn?: string;
+  sortDirection?: 'asc' | 'desc';
+  multiSort?: boolean;
+  
+  // Grouping
+  groups?: DataGridGroup[];
+  onGroupChange?: (groups: DataGridGroup[]) => void;
+  groupable?: boolean;
+  
+  // Column Management
+  resizable?: boolean;
+  reorderable?: boolean;
+  onColumnReorder?: (columns: DataGridColumn<T>[]) => void;
+  columnWidths?: Record<string, number>;
+  onColumnResize?: (columnKey: string, width: number) => void;
+  
+  // Selection
+  selectable?: boolean;
+  selectedRows?: string[];
+  onSelectionChange?: (selected: string[]) => void;
+  rowId?: (row: T) => string;
+  
+  // Export
+  exportable?: boolean;
+  onExport?: (format: 'csv' | 'xlsx' | 'json') => void;
+  exportFormats?: ('csv' | 'xlsx' | 'json')[];
+  
+  // Pagination
+  pagination?: {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    pageSizeOptions?: number[];
+  };
+  
+  // Filters
+  filters?: {
+    config: unknown[];
+    onFilter: (filters: Record<string, unknown>) => void;
+    initialValues?: Record<string, unknown>;
+  };
+  
+  // Actions
+  actions?: (row: T) => TableAction<T>[];
+  toolbarActions?: ReactNode;
+  
+  // Virtual Scrolling
+  virtualScrolling?: boolean;
+  virtualScrollingOptions?: {
+    itemHeight?: number;
+    containerHeight?: number;
+    overscan?: number;
+  };
+  
+  // Empty State
+  emptyMessage?: string;
+  emptyStateTitle?: string;
+  emptyStateMessage?: string;
+  emptyStateIllustration?: ReactNode;
+  emptyStateAction?: ReactNode;
+  
+  className?: string;
+}
+
+/**
+ * DataGrid Component
+ * 
+ * An advanced data grid component with sorting, filtering, grouping, column management, and export.
+ * Extends the Table component with additional enterprise features.
+ * Follows Atomic Design principles as an Organism component.
+ * 
+ * @example
+ * ```tsx
+ * <DataGrid
+ *   columns={columns}
+ *   data={data}
+ *   groupable
+ *   exportable
+ *   onExport={(format) => console.log('Export as', format)}
+ * />
+ * ```
+ */
+export default function DataGrid<T extends Record<string, unknown> = Record<string, unknown>>({
+  columns,
+  data,
+  loading = false,
+  onSort,
+  sortColumn,
+  sortDirection,
+  multiSort: _multiSort = false,
+  groups = [],
+  onGroupChange,
+  groupable = false,
+  resizable = true,
+  reorderable: _reorderable = false,
+  onColumnReorder: _onColumnReorder,
+  columnWidths,
+  onColumnResize,
+  selectable = false,
+  selectedRows,
+  onSelectionChange,
+  rowId,
+  exportable = false,
+  onExport,
+  exportFormats = ['csv', 'xlsx', 'json'],
+  pagination,
+  filters,
+  actions,
+  toolbarActions,
+  virtualScrolling = false,
+  virtualScrollingOptions,
+  emptyMessage,
+  emptyStateTitle,
+  emptyStateMessage,
+  emptyStateIllustration,
+  emptyStateAction,
+  className = '',
+}: DataGridProps<T>) {
+  const [internalGroups, setInternalGroups] = useState<DataGridGroup[]>(groups);
+  const [internalColumnWidths, setInternalColumnWidths] = useState<Record<string, number>>(
+    columnWidths || {}
+  );
+
+  // Convert DataGrid columns to Table columns
+  const tableColumns: TableColumn<T>[] = useMemo(() => {
+    return columns.map((col) => ({
+      ...col,
+      width: internalColumnWidths[col.key] || col.defaultWidth,
+    }));
+  }, [columns, internalColumnWidths]);
+
+  const _handleGroupToggle = (columnKey: string) => {
+    const newGroups = internalGroups.map((g) =>
+      g.column === columnKey ? { ...g, expanded: !g.expanded } : g
+    );
+    setInternalGroups(newGroups);
+    onGroupChange?.(newGroups);
+  };
+
+  const handleExport = (format: 'csv' | 'xlsx' | 'json') => {
+    if (onExport) {
+      onExport(format);
+    } else {
+      // Default export implementation
+      if (format === 'csv') {
+        exportToCSV(data, columns);
+      } else if (format === 'json') {
+        exportToJSON(data);
+      }
+    }
+  };
+
+  const exportToCSV = (data: T[], cols: DataGridColumn<T>[]) => {
+    const headers = cols.filter((c) => c.exportable !== false).map((c) => c.label || c.key);
+    const rows = data.map((row) =>
+      cols
+        .filter((c) => c.exportable !== false)
+        .map((c) => {
+          const value = row[c.key];
+          return typeof value === 'string' && value.includes(',') ? `"${value}"` : value;
+        })
+    );
+
+    const csv = [headers.join(','), ...rows.map((r) => r.join(','))].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `export-${Date.now()}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const exportToJSON = (data: T[]) => {
+    const json = JSON.stringify(data, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `export-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      {/* Toolbar */}
+      {(exportable || groupable || toolbarActions) && (
+        <div className={`
+          flex
+          items-center
+          justify-between
+          ${getSpacingClass('base', 'p')}
+          bg-white
+          border
+          border-gray-200
+          rounded-lg
+        `}>
+          <div className="flex items-center gap-2">
+            {groupable && (
+              <Button
+                variant="outline"
+                size="sm"
+                leftIcon={<ArrowUpDown className="h-4 w-4" />}
+              >
+                Group
+              </Button>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-2">
+            {toolbarActions}
+            {exportable && (
+              <div className="flex items-center gap-1">
+                {exportFormats.map((format) => (
+                  <Button
+                    key={format}
+                    variant="outline"
+                    size="sm"
+                    leftIcon={<Download className="h-4 w-4" />}
+                    onClick={() => handleExport(format)}
+                  >
+                    {format.toUpperCase()}
+                  </Button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      <Table
+        columns={tableColumns}
+        data={data}
+        loading={loading}
+        onSort={onSort}
+        sortColumn={sortColumn}
+        sortDirection={sortDirection}
+        pagination={pagination}
+        filters={filters}
+        selectable={selectable}
+        selectedRows={selectedRows}
+        onSelectionChange={onSelectionChange}
+        rowId={rowId}
+        actions={actions}
+        resizable={resizable}
+        columnWidths={internalColumnWidths}
+        onColumnResize={(key, width) => {
+          setInternalColumnWidths((prev) => ({ ...prev, [key]: width }));
+          onColumnResize?.(key, width);
+        }}
+        virtualScrolling={virtualScrolling}
+        virtualScrollingOptions={virtualScrollingOptions}
+        emptyMessage={emptyMessage}
+        emptyStateTitle={emptyStateTitle}
+        emptyStateMessage={emptyStateMessage}
+        emptyStateIllustration={emptyStateIllustration}
+        emptyStateAction={emptyStateAction}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { default } from './DataGrid';
+export type { DataGridProps, DataGridColumn, DataGridGroup } from './DataGrid';

package/src/ui/organisms/Dialog/AlertDialog.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import Dialog from './Dialog';
+import { DialogContent } from './DialogContent';
+import { DialogHeader } from './DialogHeader';
+import { DialogFooter } from './DialogFooter';
+import Button from '../../atoms/Button/Button';
+
+export interface AlertDialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: 'default' | 'destructive';
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  children?: ReactNode;
+}
+
+/**
+ * AlertDialog Component
+ * 
+ * A specialized dialog for confirmations and alerts.
+ * Built on top of Dialog with pre-configured layout.
+ * 
+ * @example
+ * ```tsx
+ * <AlertDialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Delete Item"
+ *   description="Are you sure? This action cannot be undone."
+ *   variant="destructive"
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ */
+export function AlertDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'default',
+  onConfirm,
+  onCancel,
+  children,
+}: AlertDialogProps) {
+  const handleConfirm = () => {
+    onConfirm?.();
+    onOpenChange?.(false);
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+    onOpenChange?.(false);
+  };
+
+  return (
+    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      <DialogContent size="sm" closeOnOverlayClick={false}>
+        {children || (
+          <>
+            <DialogHeader>
+              <Dialog.Title>{title}</Dialog.Title>
+              {description && <Dialog.Description>{description}</Dialog.Description>}
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="outline" onClick={handleCancel}>
+                {cancelLabel}
+              </Button>
+              <Button
+                variant={variant === 'destructive' ? 'error' : 'primary'}
+                onClick={handleConfirm}
+              >
+                {confirmLabel}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default AlertDialog;

package/src/ui/organisms/Dialog/Dialog.mdx

@@ -0,0 +1,200 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Organisms/Dialog" />
+
+# Dialog
+
+A flexible and accessible dialog component using the compound components pattern. Supports both controlled and uncontrolled modes with full keyboard navigation and focus management.
+
+## Features
+
+- **Compound Components**: Flexible API with composable parts
+- **Controlled/Uncontrolled**: Works in both modes
+- **Focus Trap**: Automatically traps focus within dialog
+- **Portal Rendering**: Renders outside DOM hierarchy
+- **Accessibility**: Full ARIA support and keyboard navigation
+- **Sizes**: Multiple size options (sm, md, lg, xl, fullscreen)
+- **Body Scroll Lock**: Prevents background scrolling when open
+
+## Basic Usage
+
+### Uncontrolled Mode
+
+```tsx
+import { Dialog, Button } from '@fabio.caffarello/react-design-system';
+
+<Dialog>
+  <Dialog.Trigger>
+    <Button>Open Dialog</Button>
+  </Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Dialog Title</Dialog.Title>
+      <Dialog.Description>
+        Dialog description text
+      </Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Dialog.Close>
+        <Button variant="outline">Cancel</Button>
+      </Dialog.Close>
+      <Button>Confirm</Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog>
+```
+
+### Controlled Mode
+
+```tsx
+import { useState } from 'react';
+import { Dialog, Button } from '@fabio.caffarello/react-design-system';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <Dialog.Content>
+          <Dialog.Header>
+            <Dialog.Title>Dialog Title</Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Footer>
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setIsOpen(false)}>Confirm</Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+}
+```
+
+## Compound Components
+
+### Dialog.Trigger
+
+Opens the dialog when clicked:
+
+```tsx
+<Dialog.Trigger>
+  <Button>Open</Button>
+</Dialog.Trigger>
+```
+
+### Dialog.Content
+
+The main dialog container:
+
+```tsx
+<Dialog.Content size="lg" closeOnOverlayClick closeOnEscape>
+  {/* Content */}
+</Dialog.Content>
+```
+
+**Props:**
+- `size`: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
+- `closeOnOverlayClick`: Close when clicking overlay
+- `closeOnEscape`: Close on Escape key
+
+### Dialog.Header
+
+Container for title and description:
+
+```tsx
+<Dialog.Header>
+  <Dialog.Title>Title</Dialog.Title>
+  <Dialog.Description>Description</Dialog.Description>
+</Dialog.Header>
+```
+
+### Dialog.Title
+
+The dialog title (required for accessibility):
+
+```tsx
+<Dialog.Title>Dialog Title</Dialog.Title>
+```
+
+### Dialog.Description
+
+Optional description text:
+
+```tsx
+<Dialog.Description>
+  Additional context about the dialog
+</Dialog.Description>
+```
+
+### Dialog.Footer
+
+Container for action buttons:
+
+```tsx
+<Dialog.Footer>
+  <Button>Action</Button>
+</Dialog.Footer>
+```
+
+### Dialog.Close
+
+Closes the dialog when clicked:
+
+```tsx
+<Dialog.Close>
+  <Button variant="outline">Close</Button>
+</Dialog.Close>
+```
+
+## Sizes
+
+```tsx
+<Dialog.Content size="sm">Small Dialog</Dialog.Content>
+<Dialog.Content size="md">Medium Dialog</Dialog.Content>
+<Dialog.Content size="lg">Large Dialog</Dialog.Content>
+<Dialog.Content size="xl">Extra Large Dialog</Dialog.Content>
+<Dialog.Content size="fullscreen">Fullscreen Dialog</Dialog.Content>
+```
+
+## Focus Management
+
+The Dialog automatically:
+
+- Focuses the first focusable element when opened
+- Traps focus within the dialog
+- Restores focus to the trigger when closed
+- Prevents body scrolling when open
+
+## Keyboard Navigation
+
+- **Escape**: Closes the dialog (if `closeOnEscape` is true)
+- **Tab**: Navigates between focusable elements
+- **Shift+Tab**: Navigates backwards
+- Focus wraps within the dialog
+
+## Accessibility
+
+The Dialog component follows ARIA best practices:
+
+- Uses `role="dialog"` with `aria-modal="true"`
+- Associates title via `aria-labelledby`
+- Associates description via `aria-describedby`
+- Manages focus automatically
+- Supports screen readers
+
+### Required ARIA Attributes
+
+- **Title**: Always provide a `Dialog.Title` for `aria-labelledby`
+- **Description**: Optional but recommended for `aria-describedby`
+
+## Best Practices
+
+1. **Always provide a title**: Required for accessibility
+2. **Use descriptions**: Help users understand the dialog purpose
+3. **Clear actions**: Make button labels clear and actionable
+4. **Escape to close**: Allow users to close with Escape key
+5. **Focus management**: Let the component handle focus automatically