@tribepad/themis 1.0.0

package/src/elements/Table/Table.stories.tsx

@@ -0,0 +1,790 @@
+/**
+ * Table Component - Storybook Stories
+ *
+ * Interactive examples and documentation for the Table component
+ * Built with React Aria primitives for WCAG 2.2 AAA compliance
+ *
+ * @see table-prd.md DOC-002 (Storybook Stories Requirements)
+ * @see ADR 0007 (Accessibility Decisions)
+ * @see Storybook (when running)
+ */
+
+import { useState, type ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  Column,
+  Row,
+  Cell,
+  type SortDescriptor,
+} from './Table';
+import { Button } from '../Button';
+
+// Sample data for all stories
+const sampleFiles = [
+  { id: '1', name: 'Documents', type: 'Folder', size: '--', date: '2024-01-15' },
+  { id: '2', name: 'Photos', type: 'Folder', size: '--', date: '2024-02-20' },
+  { id: '3', name: 'report.pdf', type: 'PDF', size: '2.4 MB', date: '2024-03-10' },
+  { id: '4', name: 'budget.xlsx', type: 'Excel', size: '156 KB', date: '2024-03-12' },
+  { id: '5', name: 'presentation.pptx', type: 'PowerPoint', size: '4.2 MB', date: '2024-03-15' },
+];
+
+const candidatesData = [
+  { id: '1', name: 'John Smith', role: 'Software Engineer', status: 'Interview', score: 92 },
+  { id: '2', name: 'Jane Doe', role: 'Product Manager', status: 'Screening', score: 85 },
+  { id: '3', name: 'Bob Wilson', role: 'UX Designer', status: 'Offer', score: 88 },
+  { id: '4', name: 'Alice Brown', role: 'Data Analyst', status: 'Rejected', score: 72 },
+  { id: '5', name: 'Charlie Davis', role: 'DevOps Engineer', status: 'Hired', score: 95 },
+];
+
+const meta = {
+  title: 'Elements/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Accessible data table component built with React Aria primitives following the ARIA grid pattern. Supports selection, sorting, and keyboard navigation for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'bordered', 'striped'],
+      description: 'Visual variant of the table',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size of table cells',
+    },
+    selectionMode: {
+      control: 'select',
+      options: ['none', 'single', 'multiple'],
+      description: 'Selection mode for rows',
+    },
+    stickyHeader: {
+      control: 'boolean',
+      description: 'Whether the header sticks to the top when scrolling',
+    },
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Default Story
+// ============================================================================
+
+/**
+ * Default Table
+ * Basic table with header and body
+ */
+export const Default: Story = {
+  render: () => (
+    <Table aria-label="Files">
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column>Size</Column>
+        <Column>Date Modified</Column>
+      </TableHeader>
+      <TableBody items={sampleFiles}>
+        {(item) => (
+          <Row key={item.id}>
+            <Cell>{item.name}</Cell>
+            <Cell>{item.type}</Cell>
+            <Cell>{item.size}</Cell>
+            <Cell>{item.date}</Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+// ============================================================================
+// Variant Stories
+// ============================================================================
+
+/**
+ * Bordered Variant
+ * Table with border around the entire container
+ */
+export const Bordered: Story = {
+  render: () => (
+    <Table aria-label="Files" variant="bordered">
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column>Size</Column>
+      </TableHeader>
+      <TableBody items={sampleFiles}>
+        {(item) => (
+          <Row key={item.id}>
+            <Cell>{item.name}</Cell>
+            <Cell>{item.type}</Cell>
+            <Cell>{item.size}</Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+/**
+ * Striped Variant
+ * Table with alternating row colors for better readability
+ */
+export const Striped: Story = {
+  render: () => (
+    <Table aria-label="Files" variant="striped">
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column>Size</Column>
+      </TableHeader>
+      <TableBody items={sampleFiles}>
+        {(item) => (
+          <Row key={item.id}>
+            <Cell>{item.name}</Cell>
+            <Cell>{item.type}</Cell>
+            <Cell>{item.size}</Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+// ============================================================================
+// Size Stories
+// ============================================================================
+
+/**
+ * Small Size
+ * Compact table for dense data display
+ */
+export const SizeSmall: Story = {
+  render: () => (
+    <Table aria-label="Files" size="sm">
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column>Size</Column>
+      </TableHeader>
+      <TableBody items={sampleFiles}>
+        {(item) => (
+          <Row key={item.id}>
+            <Cell>{item.name}</Cell>
+            <Cell>{item.type}</Cell>
+            <Cell>{item.size}</Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+/**
+ * Large Size
+ * Spacious table for improved touch targets
+ */
+export const SizeLarge: Story = {
+  render: () => (
+    <Table aria-label="Files" size="lg">
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column>Size</Column>
+      </TableHeader>
+      <TableBody items={sampleFiles}>
+        {(item) => (
+          <Row key={item.id}>
+            <Cell>{item.name}</Cell>
+            <Cell>{item.type}</Cell>
+            <Cell>{item.size}</Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+// ============================================================================
+// Selection Stories
+// ============================================================================
+
+/**
+ * Single Selection
+ * Only one row can be selected at a time
+ */
+export const SingleSelection: Story = {
+  render: function SingleSelectionTable(): ReactElement {
+    const [selectedKeys, setSelectedKeys] = useState<'all' | Set<string>>(new Set());
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Selected: {selectedKeys === 'all' ? 'All' : Array.from(selectedKeys).join(', ') || 'None'}
+        </p>
+        <Table
+          aria-label="Candidates"
+          selectionMode="single"
+          selectedKeys={selectedKeys}
+          onSelectionChange={(keys) => setSelectedKeys(keys as 'all' | Set<string>)}
+        >
+          <TableHeader>
+            <Column isRowHeader>Name</Column>
+            <Column>Role</Column>
+            <Column>Status</Column>
+          </TableHeader>
+          <TableBody items={candidatesData}>
+            {(item) => (
+              <Row key={item.id}>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.role}</Cell>
+                <Cell>{item.status}</Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+};
+
+/**
+ * Multiple Selection
+ * Multiple rows can be selected, includes "Select All" checkbox
+ */
+export const MultipleSelection: Story = {
+  render: function MultipleSelectionTable(): ReactElement {
+    const [selectedKeys, setSelectedKeys] = useState<'all' | Set<string>>(new Set());
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Selected: {selectedKeys === 'all' ? 'All' : `${(selectedKeys as Set<string>).size} items`}
+        </p>
+        <Table
+          aria-label="Candidates"
+          selectionMode="multiple"
+          selectedKeys={selectedKeys}
+          onSelectionChange={(keys) => setSelectedKeys(keys as 'all' | Set<string>)}
+        >
+          <TableHeader>
+            <Column isRowHeader>Name</Column>
+            <Column>Role</Column>
+            <Column>Status</Column>
+            <Column>Score</Column>
+          </TableHeader>
+          <TableBody items={candidatesData}>
+            {(item) => (
+              <Row key={item.id}>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.role}</Cell>
+                <Cell>{item.status}</Cell>
+                <Cell>{item.score}</Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Sorting Stories
+// ============================================================================
+
+/**
+ * Sortable Columns
+ * Click column headers to sort ascending/descending
+ */
+export const Sorting: Story = {
+  render: function SortingTable(): ReactElement {
+    const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>();
+
+    const sortedData = [...candidatesData].sort((a, b) => {
+      if (!sortDescriptor) return 0;
+      const column = sortDescriptor.column as keyof typeof a;
+      const direction = sortDescriptor.direction === 'ascending' ? 1 : -1;
+
+      if (typeof a[column] === 'number' && typeof b[column] === 'number') {
+        return (a[column] as number - (b[column] as number)) * direction;
+      }
+      return String(a[column]).localeCompare(String(b[column])) * direction;
+    });
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Sorted by: {sortDescriptor?.column ?? 'None'} ({sortDescriptor?.direction ?? 'N/A'})
+        </p>
+        <Table
+          aria-label="Candidates"
+          sortDescriptor={sortDescriptor}
+          onSortChange={(descriptor) => setSortDescriptor(descriptor)}
+        >
+          <TableHeader>
+            <Column id="name" isRowHeader allowsSorting>Name</Column>
+            <Column id="role" allowsSorting>Role</Column>
+            <Column id="status" allowsSorting>Status</Column>
+            <Column id="score" allowsSorting align="end">Score</Column>
+          </TableHeader>
+          <TableBody items={sortedData}>
+            {(item) => (
+              <Row key={item.id}>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.role}</Cell>
+                <Cell>{item.status}</Cell>
+                <Cell align="end">{item.score}</Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Sticky Header
+// ============================================================================
+
+/**
+ * Sticky Header
+ * Header remains visible when scrolling through long tables
+ */
+export const StickyHeader: Story = {
+  render: () => {
+    const manyItems = Array.from({ length: 30 }, (_, i) => ({
+      id: String(i + 1),
+      name: `Item ${i + 1}`,
+      type: i % 3 === 0 ? 'Type A' : i % 3 === 1 ? 'Type B' : 'Type C',
+      value: Math.floor(Math.random() * 1000),
+    }));
+
+    return (
+      <div className="h-[400px] overflow-auto border rounded">
+        <Table aria-label="Long list" stickyHeader>
+          <TableHeader>
+            <Column isRowHeader>Name</Column>
+            <Column>Type</Column>
+            <Column align="end">Value</Column>
+          </TableHeader>
+          <TableBody items={manyItems}>
+            {(item) => (
+              <Row key={item.id}>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.type}</Cell>
+                <Cell align="end">{item.value}</Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Empty State
+// ============================================================================
+
+/**
+ * Empty State
+ * Custom message when no data is available
+ */
+export const EmptyState: Story = {
+  render: () => (
+    <Table aria-label="Empty table">
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column>Size</Column>
+      </TableHeader>
+      <TableBody
+        items={[]}
+        renderEmptyState={() => (
+          <div className="text-center py-8 text-[var(--muted-foreground)]">
+            <p className="text-lg font-medium">No files found</p>
+            <p className="text-sm">Upload some files to get started</p>
+          </div>
+        )}
+      >
+        {() => (
+          <Row>
+            <Cell>Never rendered</Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+// ============================================================================
+// Disabled Rows
+// ============================================================================
+
+/**
+ * Disabled Rows
+ * Some rows are disabled and cannot be selected
+ */
+export const DisabledRows: Story = {
+  render: () => (
+    <Table aria-label="Candidates" selectionMode="multiple" disabledKeys={['2', '4']}>
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Role</Column>
+        <Column>Status</Column>
+      </TableHeader>
+      <TableBody items={candidatesData}>
+        {(item) => (
+          <Row key={item.id}>
+            <Cell>{item.name}</Cell>
+            <Cell>{item.role}</Cell>
+            <Cell>
+              {item.status}
+              {['2', '4'].includes(item.id) && (
+                <span className="ml-2 text-xs text-[var(--muted-foreground)]">(disabled)</span>
+              )}
+            </Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+// ============================================================================
+// Row Actions
+// ============================================================================
+
+/**
+ * Row Actions
+ * Click or press Enter on a row to trigger an action
+ */
+export const RowActions: Story = {
+  render: function RowActionsTable(): ReactElement {
+    const [lastAction, setLastAction] = useState<string | null>(null);
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Last action: {lastAction ?? 'None'}
+        </p>
+        <Table
+          aria-label="Files"
+          onRowAction={(key) => setLastAction(`Opened file: ${key}`)}
+        >
+          <TableHeader>
+            <Column isRowHeader>Name</Column>
+            <Column>Type</Column>
+            <Column>Date</Column>
+          </TableHeader>
+          <TableBody items={sampleFiles}>
+            {(item) => (
+              <Row key={item.id}>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.type}</Cell>
+                <Cell>{item.date}</Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Column Alignment
+// ============================================================================
+
+/**
+ * Column Alignment
+ * Different text alignments for columns
+ */
+export const ColumnAlignment: Story = {
+  render: () => (
+    <Table aria-label="Sales data" variant="bordered">
+      <TableHeader>
+        <Column isRowHeader align="start">Product</Column>
+        <Column align="center">Category</Column>
+        <Column align="end">Price</Column>
+        <Column align="end">Quantity</Column>
+      </TableHeader>
+      <TableBody>
+        <Row>
+          <Cell>Widget Pro</Cell>
+          <Cell align="center">Electronics</Cell>
+          <Cell align="end">$99.99</Cell>
+          <Cell align="end">150</Cell>
+        </Row>
+        <Row>
+          <Cell>Gadget Plus</Cell>
+          <Cell align="center">Electronics</Cell>
+          <Cell align="end">$149.99</Cell>
+          <Cell align="end">75</Cell>
+        </Row>
+        <Row>
+          <Cell>Super Tool</Cell>
+          <Cell align="center">Tools</Cell>
+          <Cell align="end">$24.99</Cell>
+          <Cell align="end">500</Cell>
+        </Row>
+      </TableBody>
+    </Table>
+  ),
+};
+
+// ============================================================================
+// Interactive with Actions Column
+// ============================================================================
+
+/**
+ * With Action Buttons
+ * Table with interactive action buttons in each row
+ */
+export const WithActionButtons: Story = {
+  render: function ActionButtonsTable(): ReactElement {
+    const [message, setMessage] = useState<string | null>(null);
+
+    return (
+      <div className="space-y-4">
+        {message && (
+          <div className="p-2 bg-[var(--accent)] rounded text-sm">{message}</div>
+        )}
+        <Table aria-label="Candidates">
+          <TableHeader>
+            <Column isRowHeader>Name</Column>
+            <Column>Role</Column>
+            <Column>Status</Column>
+            <Column align="end">Actions</Column>
+          </TableHeader>
+          <TableBody items={candidatesData}>
+            {(item) => (
+              <Row key={item.id}>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.role}</Cell>
+                <Cell>{item.status}</Cell>
+                <Cell align="end">
+                  <div className="flex gap-2 justify-end">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setMessage(`Viewing ${item.name}`)}
+                    >
+                      View
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setMessage(`Editing ${item.name}`)}
+                    >
+                      Edit
+                    </Button>
+                  </div>
+                </Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Combined Features
+// ============================================================================
+
+/**
+ * Full Featured Table
+ * Demonstrates selection, sorting, and striped variant together
+ */
+export const FullFeatured: Story = {
+  render: function FullFeaturedTable(): ReactElement {
+    const [selectedKeys, setSelectedKeys] = useState<'all' | Set<string>>(new Set());
+    const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>();
+
+    const sortedData = [...candidatesData].sort((a, b) => {
+      if (!sortDescriptor) return 0;
+      const column = sortDescriptor.column as keyof typeof a;
+      const direction = sortDescriptor.direction === 'ascending' ? 1 : -1;
+
+      if (typeof a[column] === 'number' && typeof b[column] === 'number') {
+        return (a[column] as number - (b[column] as number)) * direction;
+      }
+      return String(a[column]).localeCompare(String(b[column])) * direction;
+    });
+
+    return (
+      <div className="space-y-4">
+        <div className="flex justify-between items-center">
+          <p className="text-sm text-[var(--muted-foreground)]">
+            {selectedKeys === 'all'
+              ? 'All selected'
+              : `${(selectedKeys as Set<string>).size} selected`}
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setSelectedKeys(new Set())}
+            disabled={(selectedKeys as Set<string>).size === 0}
+          >
+            Clear Selection
+          </Button>
+        </div>
+        <Table
+          aria-label="Candidates"
+          variant="striped"
+          selectionMode="multiple"
+          selectedKeys={selectedKeys}
+          onSelectionChange={(keys) => setSelectedKeys(keys as 'all' | Set<string>)}
+          sortDescriptor={sortDescriptor}
+          onSortChange={(descriptor) => setSortDescriptor(descriptor)}
+        >
+          <TableHeader>
+            <Column id="name" isRowHeader allowsSorting>Name</Column>
+            <Column id="role" allowsSorting>Role</Column>
+            <Column id="status" allowsSorting>Status</Column>
+            <Column id="score" allowsSorting align="end">Score</Column>
+          </TableHeader>
+          <TableBody items={sortedData}>
+            {(item) => (
+              <Row key={item.id}>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.role}</Cell>
+                <Cell>{item.status}</Cell>
+                <Cell align="end">{item.score}</Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Keyboard Navigation Demo
+// ============================================================================
+
+/**
+ * Keyboard Navigation
+ * Use arrow keys, Home/End, and Enter/Space to navigate and interact
+ */
+export const KeyboardNavigation: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="p-4 bg-[var(--muted)] rounded text-sm space-y-2">
+        <p className="font-semibold">Keyboard Controls:</p>
+        <ul className="list-disc pl-4 space-y-1">
+          <li><kbd className="px-1 bg-[var(--background)] rounded">Tab</kbd> - Enter/exit table</li>
+          <li><kbd className="px-1 bg-[var(--background)] rounded">Arrow Up/Down</kbd> - Navigate rows</li>
+          <li><kbd className="px-1 bg-[var(--background)] rounded">Space</kbd> - Toggle selection</li>
+          <li><kbd className="px-1 bg-[var(--background)] rounded">Enter</kbd> - Activate row</li>
+          <li><kbd className="px-1 bg-[var(--background)] rounded">Home/End</kbd> - Jump to first/last row</li>
+        </ul>
+      </div>
+      <Table aria-label="Files" selectionMode="multiple">
+        <TableHeader>
+          <Column isRowHeader>Name</Column>
+          <Column>Type</Column>
+          <Column>Size</Column>
+        </TableHeader>
+        <TableBody items={sampleFiles}>
+          {(item) => (
+            <Row key={item.id}>
+              <Cell>{item.name}</Cell>
+              <Cell>{item.type}</Cell>
+              <Cell>{item.size}</Cell>
+            </Row>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};
+
+// ============================================================================
+// All Variants Matrix
+// ============================================================================
+
+/**
+ * All Variants
+ * Side-by-side comparison of all table variants
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {(['default', 'bordered', 'striped'] as const).map((variant) => (
+        <div key={variant} className="space-y-2">
+          <h3 className="font-semibold capitalize">{variant} Variant</h3>
+          <Table aria-label={`${variant} table`} variant={variant}>
+            <TableHeader>
+              <Column isRowHeader>Name</Column>
+              <Column>Type</Column>
+              <Column>Size</Column>
+            </TableHeader>
+            <TableBody items={sampleFiles.slice(0, 3)}>
+              {(item) => (
+                <Row key={item.id}>
+                  <Cell>{item.name}</Cell>
+                  <Cell>{item.type}</Cell>
+                  <Cell>{item.size}</Cell>
+                </Row>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+// ============================================================================
+// All Sizes Matrix
+// ============================================================================
+
+/**
+ * All Sizes
+ * Comparison of all table sizes
+ */
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {(['sm', 'default', 'lg'] as const).map((size) => (
+        <div key={size} className="space-y-2">
+          <h3 className="font-semibold capitalize">{size === 'default' ? 'Default' : size.toUpperCase()} Size</h3>
+          <Table aria-label={`${size} table`} size={size}>
+            <TableHeader>
+              <Column isRowHeader>Name</Column>
+              <Column>Type</Column>
+              <Column>Size</Column>
+            </TableHeader>
+            <TableBody items={sampleFiles.slice(0, 3)}>
+              {(item) => (
+                <Row key={item.id}>
+                  <Cell>{item.name}</Cell>
+                  <Cell>{item.type}</Cell>
+                  <Cell>{item.size}</Cell>
+                </Row>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      ))}
+    </div>
+  ),
+};