@proteos/ui 0.31.0

package/src/components/table/table.stories.tsx

@@ -0,0 +1,306 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Badge } from '../badge'
+import {
+  SortableHeaderCell,
+  type SortDirection,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableHeaderSpacer,
+  TableRow,
+} from './table'
+
+/* =========================================================================
+   Stories for the Table chrome — pure presentational primitives.
+   These render short, non-virtualized tables. The virtualized + infinite
+   variant lives in DataTable's own stories.
+   ========================================================================= */
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'inline-radio' },
+      options: ['panel', 'bare'],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1080px] h-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof Table>
+
+/* ---------- Sample data -------------------------------------------------- */
+
+type ShipmentRow = {
+  id: string
+  lane: string
+  carrier: string
+  status: string
+  variant: 'active' | 'success' | 'warning' | 'danger' | 'neutral'
+  rate: string
+}
+
+const ROWS: ShipmentRow[] = [
+  {
+    id: 'SH-10482',
+    lane: 'Dallas, TX → Atlanta, GA',
+    carrier: 'Blue Ridge',
+    status: 'in transit',
+    variant: 'active',
+    rate: '$3,420',
+  },
+  {
+    id: 'SH-10483',
+    lane: 'Chicago, IL → Minneapolis, MN',
+    carrier: 'North Star',
+    status: 'dispatching',
+    variant: 'warning',
+    rate: '$1,840',
+  },
+  {
+    id: 'SH-10484',
+    lane: 'Long Beach, CA → Phoenix, AZ',
+    carrier: 'Sunline',
+    status: 'picked up',
+    variant: 'active',
+    rate: '$2,140',
+  },
+  {
+    id: 'SH-10485',
+    lane: 'Seattle, WA → Boise, ID',
+    carrier: 'Cascade',
+    status: 'quoted',
+    variant: 'neutral',
+    rate: '$1,260',
+  },
+  {
+    id: 'SH-10486',
+    lane: 'Miami, FL → Newark, NJ',
+    carrier: 'Atlantic',
+    status: 'past due',
+    variant: 'danger',
+    rate: '$4,180',
+  },
+  {
+    id: 'SH-10487',
+    lane: 'Houston, TX → Denver, CO',
+    carrier: 'Frontier Haul',
+    status: 'in transit',
+    variant: 'active',
+    rate: '$2,720',
+  },
+  {
+    id: 'SH-10488',
+    lane: 'Boston, MA → Philadelphia, PA',
+    carrier: 'Atlantic',
+    status: 'delivered',
+    variant: 'success',
+    rate: '$960',
+  },
+]
+
+const COLUMN_WIDTHS = { id: 110, lane: 320, carrier: 180, status: 140, rate: 120 } as const
+
+/* ---------- Default ------------------------------------------------------ */
+
+export const Default: Story = {
+  render: (args) => (
+    <Table {...args} aria-label="Shipments">
+      <TableHeader sticky>
+        <TableHeaderCell width={COLUMN_WIDTHS.id}>Shipment</TableHeaderCell>
+        <TableHeaderCell width={COLUMN_WIDTHS.lane}>Lane</TableHeaderCell>
+        <TableHeaderCell width={COLUMN_WIDTHS.carrier}>Carrier</TableHeaderCell>
+        <TableHeaderCell width={COLUMN_WIDTHS.status}>Status</TableHeaderCell>
+        <TableHeaderCell width={COLUMN_WIDTHS.rate} align="right">
+          Rate
+        </TableHeaderCell>
+        <TableHeaderSpacer />
+      </TableHeader>
+      <TableBody>
+        {ROWS.map((row, i) => (
+          <TableRow key={row.id} alt={i % 2 === 1} style={{ height: 36 }}>
+            <TableCell width={COLUMN_WIDTHS.id} mono ink>
+              {row.id}
+            </TableCell>
+            <TableCell width={COLUMN_WIDTHS.lane}>{row.lane}</TableCell>
+            <TableCell width={COLUMN_WIDTHS.carrier}>{row.carrier}</TableCell>
+            <TableCell width={COLUMN_WIDTHS.status}>
+              <Badge variant={row.variant}>{row.status}</Badge>
+            </TableCell>
+            <TableCell width={COLUMN_WIDTHS.rate} align="right" mono>
+              {row.rate}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+/* ---------- Sortable header --------------------------------------------- */
+
+export const Sortable: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const [sortKey, setSortKey] = useState<keyof ShipmentRow>('id')
+    const [sortDir, setSortDir] = useState<SortDirection>('asc')
+
+    const dirFor = (key: keyof ShipmentRow): SortDirection => (key === sortKey ? sortDir : null)
+
+    const onSort = (key: keyof ShipmentRow) => {
+      if (sortKey === key) {
+        setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
+      } else {
+        setSortKey(key)
+        setSortDir('asc')
+      }
+    }
+
+    const sorted = [...ROWS].sort((a, b) => {
+      const av = a[sortKey]
+      const bv = b[sortKey]
+      const cmp = String(av).localeCompare(String(bv))
+      return sortDir === 'desc' ? -cmp : cmp
+    })
+
+    return (
+      <Table aria-label="Shipments — sortable">
+        <TableHeader sticky>
+          <SortableHeaderCell
+            width={COLUMN_WIDTHS.id}
+            sortDirection={dirFor('id')}
+            onPress={() => onSort('id')}
+          >
+            Shipment
+          </SortableHeaderCell>
+          <SortableHeaderCell
+            width={COLUMN_WIDTHS.lane}
+            sortDirection={dirFor('lane')}
+            onPress={() => onSort('lane')}
+          >
+            Lane
+          </SortableHeaderCell>
+          <SortableHeaderCell
+            width={COLUMN_WIDTHS.carrier}
+            sortDirection={dirFor('carrier')}
+            onPress={() => onSort('carrier')}
+          >
+            Carrier
+          </SortableHeaderCell>
+          <TableHeaderCell width={COLUMN_WIDTHS.status}>Status</TableHeaderCell>
+          <SortableHeaderCell
+            width={COLUMN_WIDTHS.rate}
+            align="right"
+            sortDirection={dirFor('rate')}
+            onPress={() => onSort('rate')}
+          >
+            Rate
+          </SortableHeaderCell>
+          <TableHeaderSpacer />
+        </TableHeader>
+        <TableBody>
+          {sorted.map((row, i) => (
+            <TableRow key={row.id} alt={i % 2 === 1} style={{ height: 36 }}>
+              <TableCell width={COLUMN_WIDTHS.id} mono ink>
+                {row.id}
+              </TableCell>
+              <TableCell width={COLUMN_WIDTHS.lane}>{row.lane}</TableCell>
+              <TableCell width={COLUMN_WIDTHS.carrier}>{row.carrier}</TableCell>
+              <TableCell width={COLUMN_WIDTHS.status}>
+                <Badge variant={row.variant}>{row.status}</Badge>
+              </TableCell>
+              <TableCell width={COLUMN_WIDTHS.rate} align="right" mono>
+                {row.rate}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    )
+  },
+}
+
+/* ---------- Interactive rows -------------------------------------------- */
+
+export const InteractiveRows: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null)
+    return (
+      <Table aria-label="Shipments — interactive">
+        <TableHeader sticky>
+          <TableHeaderCell width={COLUMN_WIDTHS.id}>Shipment</TableHeaderCell>
+          <TableHeaderCell width={COLUMN_WIDTHS.lane}>Lane</TableHeaderCell>
+          <TableHeaderCell width={COLUMN_WIDTHS.carrier}>Carrier</TableHeaderCell>
+          <TableHeaderCell width={COLUMN_WIDTHS.status}>Status</TableHeaderCell>
+          <TableHeaderSpacer />
+        </TableHeader>
+        <TableBody>
+          {ROWS.map((row, i) => (
+            <TableRow
+              key={row.id}
+              alt={i % 2 === 1}
+              interactive
+              onRowClick={() => setSelected(row.id)}
+              tabIndex={0}
+              style={{ height: 36 }}
+              aria-selected={selected === row.id}
+              className={selected === row.id ? '!bg-surface-2' : undefined}
+            >
+              <TableCell width={COLUMN_WIDTHS.id} mono ink>
+                {row.id}
+              </TableCell>
+              <TableCell width={COLUMN_WIDTHS.lane}>{row.lane}</TableCell>
+              <TableCell width={COLUMN_WIDTHS.carrier}>{row.carrier}</TableCell>
+              <TableCell width={COLUMN_WIDTHS.status}>
+                <Badge variant={row.variant}>{row.status}</Badge>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    )
+  },
+}
+
+/* ---------- Bare variant (embedded) ------------------------------------- */
+
+export const BareEmbedded: Story = {
+  args: { variant: 'bare' },
+  render: (args) => (
+    <Table {...args} aria-label="Shipments — embedded">
+      <TableHeader>
+        <TableHeaderCell width={COLUMN_WIDTHS.id}>Shipment</TableHeaderCell>
+        <TableHeaderCell width={COLUMN_WIDTHS.lane}>Lane</TableHeaderCell>
+        <TableHeaderCell width={COLUMN_WIDTHS.status}>Status</TableHeaderCell>
+        <TableHeaderSpacer />
+      </TableHeader>
+      <TableBody>
+        {ROWS.slice(0, 4).map((row, i) => (
+          <TableRow key={row.id} alt={i % 2 === 1} style={{ height: 36 }}>
+            <TableCell width={COLUMN_WIDTHS.id} mono ink>
+              {row.id}
+            </TableCell>
+            <TableCell width={COLUMN_WIDTHS.lane}>{row.lane}</TableCell>
+            <TableCell width={COLUMN_WIDTHS.status}>
+              <Badge variant={row.variant}>{row.status}</Badge>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}

package/src/components/table/table.test.tsx

@@ -0,0 +1,115 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from './table'
+
+describe('Table chrome', () => {
+  it('renders semantic ARIA grid roles', () => {
+    render(
+      <Table aria-label="Shipments">
+        <TableHeader>
+          <TableHeaderCell>Lane</TableHeaderCell>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>SH-10042</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    )
+    expect(screen.getByRole('grid', { name: 'Shipments' })).toBeInTheDocument()
+    expect(screen.getByRole('columnheader', { name: 'Lane' })).toBeInTheDocument()
+    expect(screen.getByRole('gridcell')).toHaveTextContent('SH-10042')
+  })
+
+  it('TableHeaderCell with sortDirection exposes aria-sort and toggles on click', async () => {
+    const onSortToggle = vi.fn()
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell sortDirection="asc" onSortToggle={onSortToggle}>
+            ETA
+          </TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    const header = screen.getByRole('columnheader', { name: /ETA/ })
+    expect(header).toHaveAttribute('aria-sort', 'ascending')
+    await userEvent.click(header)
+    expect(onSortToggle).toHaveBeenCalledTimes(1)
+  })
+
+  it('TableHeaderCell without onSortToggle does not expose aria-sort', () => {
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell>ETA</TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    expect(screen.getByRole('columnheader')).not.toHaveAttribute('aria-sort')
+  })
+
+  it('TableHeaderCell with onSortToggle and sortDirection=null is still sortable (aria-sort=none)', async () => {
+    const onSortToggle = vi.fn()
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell sortDirection={null} onSortToggle={onSortToggle}>
+            ETA
+          </TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    const header = screen.getByRole('columnheader', { name: /ETA/ })
+    expect(header).toHaveAttribute('aria-sort', 'none')
+    await userEvent.click(header)
+    expect(onSortToggle).toHaveBeenCalledTimes(1)
+  })
+
+  it('TableHeaderCell renders × button when onRemove is provided and fires it without toggling sort', async () => {
+    const onRemove = vi.fn()
+    const onSortToggle = vi.fn()
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell
+            sortDirection={null}
+            onSortToggle={onSortToggle}
+            onRemove={onRemove}
+            ariaLabel="ETA"
+          >
+            ETA
+          </TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    const removeButton = screen.getByRole('button', { name: /Remove column ETA/ })
+    await userEvent.click(removeButton)
+    expect(onRemove).toHaveBeenCalledTimes(1)
+    expect(onSortToggle).not.toHaveBeenCalled()
+  })
+
+  it('TableRow fires onRowClick on click', async () => {
+    const onClick = vi.fn()
+    render(
+      <Table>
+        <TableBody>
+          <TableRow interactive onRowClick={onClick}>
+            <TableCell>row content</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    )
+    await userEvent.click(screen.getByText('row content'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})