@duro-app/ui 0.32.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -53,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.32.0"
+    "@duro-app/tokens": "^0.34.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Table/FromTanstack.tsx

@@ -0,0 +1,159 @@
+import {type ReactNode} from 'react'
+import {type Row, type Table as TanstackTable, flexRender} from '@tanstack/react-table'
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  Root,
+  Row as TableRow,
+  type TableSize,
+  type TableVariant,
+} from './Table'
+import {Pagination} from './Pagination'
+import {SortChip, type SortValue} from './SortChip'
+
+// ColumnMeta is augmented in `./tanstack-augmentation` so the types
+// register independently of whether the consumer imports FromTanstack.
+
+// Base props shared by both clickable and non-clickable variants.
+interface FromTanstackBaseProps<TData> {
+  readonly table: TanstackTable<TData>
+  readonly variant?: TableVariant
+  readonly size?: TableSize
+  readonly responsive?: boolean
+  /** Render a SortChip above the grid (stack-mode only). Options derive from
+   *  columns where `column.getCanSort()` returns true. Wires value/onChange
+   *  through the TanStack sorting state automatically. */
+  readonly sortChip?: boolean
+  /** Render Pagination below the grid. */
+  readonly pagination?: boolean
+  /** Key extractor; defaults to TanStack's row.id. */
+  readonly rowKey?: (row: Row<TData>) => string
+}
+
+// Discriminated union: rowAriaLabel is required when onRowClick is set so
+// keyboard / screen-reader users always get an accessible name for the
+// interactive row.
+export type FromTanstackProps<TData> = FromTanstackBaseProps<TData> &
+  (
+    | {
+        readonly onRowClick: (row: Row<TData>) => void
+        /** Accessible name for each clickable row. Required because the row's
+         *  visible cell content alone is rarely a useful accessible name. */
+        readonly rowAriaLabel: (row: Row<TData>) => string
+      }
+    | {
+        readonly onRowClick?: undefined
+        readonly rowAriaLabel?: undefined
+      }
+  )
+
+/**
+ * Renders a styled Table directly from a TanStack table instance.
+ *
+ * Labels for stack mode are derived in this order:
+ *   1. `column.columnDef.meta?.stackLabel` (explicit override)
+ *   2. `column.columnDef.header` when it's a string
+ *   3. Empty (use only for the actions column or when meta.stackLabel is set)
+ *
+ * Mark the actions column with `meta: { isActions: true }` to apply the
+ * stack-mode footer styling to its body cells.
+ *
+ * @example
+ * <Table.FromTanstack table={tanstackTable} sortChip pagination onRowClick={(r) => nav(r)} />
+ */
+export function FromTanstack<TData>({
+  table,
+  variant = 'default',
+  size = 'md',
+  responsive = true,
+  sortChip,
+  pagination,
+  rowKey,
+  onRowClick,
+  rowAriaLabel,
+}: FromTanstackProps<TData>) {
+  const sortChipNode: ReactNode = sortChip ? buildSortChip(table) : undefined
+  const paginationNode: ReactNode = pagination ? <Pagination table={table} /> : undefined
+
+  return (
+    <Root
+      variant={variant}
+      size={size}
+      responsive={responsive}
+      sortChip={sortChipNode}
+      pagination={paginationNode}
+    >
+      <Header>
+        {table.getHeaderGroups().map((group) => (
+          <TableRow key={group.id}>
+            {group.headers.map((header) => {
+              const def = header.column.columnDef
+              const meta = def.meta
+              const labelFromHeader = typeof def.header === 'string' ? def.header : undefined
+              const label = meta?.stackLabel ?? labelFromHeader ?? ''
+              return (
+                <HeaderCell
+                  key={header.id}
+                  label={label}
+                  aria-label={meta?.isActions ? label || 'Actions' : undefined}
+                >
+                  {header.isPlaceholder ? null : flexRender(def.header, header.getContext())}
+                </HeaderCell>
+              )
+            })}
+          </TableRow>
+        ))}
+      </Header>
+      <Body>
+        {table.getRowModel().rows.map((row) => {
+          const key = rowKey?.(row) ?? row.id
+          // Row handles its own click/keyboard/focus affordance — no outer
+          // wrapper, so the role="rowgroup" → role="row" ARIA hierarchy
+          // stays intact, and clicks inside interactive cell content (e.g.
+          // an action button) are correctly attributed to the inner widget.
+          return (
+            <TableRow
+              key={key}
+              onClick={onRowClick ? () => onRowClick(row) : undefined}
+              aria-label={rowAriaLabel?.(row)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <Cell key={cell.id} isActions={cell.column.columnDef.meta?.isActions === true}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Cell>
+              ))}
+            </TableRow>
+          )
+        })}
+      </Body>
+    </Root>
+  )
+}
+FromTanstack.displayName = 'FromTanstack'
+
+// --- helpers ---
+
+function buildSortChip<TData>(table: TanstackTable<TData>): ReactNode {
+  const options = table
+    .getAllColumns()
+    .filter((c) => c.getCanSort())
+    .map((c) => {
+      const fromHeader = typeof c.columnDef.header === 'string' ? c.columnDef.header : c.id
+      return {id: c.id, label: c.columnDef.meta?.stackLabel ?? fromHeader}
+    })
+
+  if (options.length === 0) return null
+
+  const current = table.getState().sorting[0]
+  const value: SortValue | null = current ? {id: current.id, desc: current.desc} : null
+
+  return (
+    <SortChip
+      options={options}
+      value={value}
+      onChange={(next) => table.setSorting(next ? [{id: next.id, desc: next.desc}] : [])}
+    />
+  )
+}

package/src/components/Table/SortChip.tsx

@@ -0,0 +1,52 @@
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {Menu} from '../Menu/Menu'
+
+export interface SortValue {
+  readonly id: string
+  readonly desc: boolean
+}
+
+export interface SortChipProps {
+  readonly options: ReadonlyArray<{readonly id: string; readonly label: string}>
+  readonly value: SortValue | null
+  readonly onChange: (next: SortValue | null) => void
+  /** Visible label preceding the sort field, e.g. "Sort by". */
+  readonly label?: string
+}
+
+/**
+ * Sort selector for stack-mode Tables. Hidden in default/compact via
+ * `@container` query — see styles.sortChip. Consumers render this inside
+ * a `Table.Container` so the same query target reaches it.
+ *
+ * The chip is a simple controlled wrapper around `Menu`. It does NOT
+ * couple to @tanstack/react-table — the consumer wires `value` and
+ * `onChange` from whatever sort state they manage.
+ */
+export function SortChip({options, value, onChange, label = 'Sort by'}: SortChipProps) {
+  const current = value ? options.find((o) => o.id === value.id) : null
+  const triggerLabel = current ? `${label}: ${current.label} ${value!.desc ? '↓' : '↑'}` : label
+
+  return (
+    <html.div style={styles.sortChip}>
+      <Menu.Root>
+        <Menu.Trigger>{triggerLabel}</Menu.Trigger>
+        <Menu.Popup>
+          {options.map((opt) => {
+            const isCurrent = value?.id === opt.id
+            const nextDesc = isCurrent ? !value!.desc : false
+            return (
+              <Menu.Item key={opt.id} onClick={() => onChange({id: opt.id, desc: nextDesc})}>
+                {opt.label}
+                {isCurrent ? ` ${value!.desc ? '↓' : '↑'}` : ''}
+              </Menu.Item>
+            )
+          })}
+          {value !== null && <Menu.Item onClick={() => onChange(null)}>Clear sort</Menu.Item>}
+        </Menu.Popup>
+      </Menu.Root>
+    </html.div>
+  )
+}
+SortChip.displayName = 'SortChip'

package/src/components/Table/Table.stories.tsx

@@ -878,3 +878,257 @@ export const FullFeatured: Story = {
     await expect(canvas.getByText('Previous')).toBeInTheDocument()
   },
 }
+
+// Demonstrates the three responsive modes. Resize the canvas (or wrap in
+// a narrower container) to see Compact (~720px) and Stack (~440px).
+const responsiveStyles = css.create({
+  resizable: {
+    resize: 'horizontal',
+    overflow: 'auto',
+    minWidth: '320px',
+    maxWidth: '100%',
+    width: '900px',
+    padding: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: colors.border,
+  },
+})
+
+export const Responsive: Story = {
+  name: 'Responsive (Container Queries)',
+  render: () => {
+    const grants = [
+      {principal: 'daddy', role: 'Admin', resource: 'all', expires: 'Never', granted_by: 'system'},
+      {
+        principal: 'alice',
+        role: 'Editor',
+        resource: 'documents/foo.md',
+        expires: '2026-12-31',
+        granted_by: 'daddy',
+      },
+      {principal: 'bob', role: 'Viewer', resource: 'all', expires: 'Never', granted_by: 'daddy'},
+    ]
+    const [sort, setSort] = useState<{id: string; desc: boolean} | null>(null)
+    const sortable = [
+      {id: 'principal', label: 'Principal'},
+      {id: 'role', label: 'Role'},
+      {id: 'expires', label: 'Expires'},
+    ]
+    return (
+      <html.div style={responsiveStyles.resizable}>
+        <Table.Container>
+          <Table.SortChip options={sortable} value={sort} onChange={setSort} />
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell label="Principal">Principal</Table.HeaderCell>
+                <Table.HeaderCell label="Role">Role</Table.HeaderCell>
+                <Table.HeaderCell label="Resource">Resource</Table.HeaderCell>
+                <Table.HeaderCell label="Expires">Expires</Table.HeaderCell>
+                <Table.HeaderCell label="Granted by">Granted by</Table.HeaderCell>
+                <Table.HeaderCell label="Actions" isActions>
+                  Actions
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {grants.map((g) => (
+                <Table.Row key={g.principal}>
+                  <Table.Cell>{g.principal}</Table.Cell>
+                  <Table.Cell>{g.role}</Table.Cell>
+                  <Table.Cell>{g.resource}</Table.Cell>
+                  <Table.Cell>{g.expires}</Table.Cell>
+                  <Table.Cell>{g.granted_by}</Table.Cell>
+                  <Table.Cell isActions>
+                    <Button size="small" variant="secondary">
+                      Revoke
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </Table.Container>
+      </html.div>
+    )
+  },
+  play: async ({canvas}) => {
+    // At default canvas width (900px) we're in compact, headers nowrap,
+    // sort chip hidden. Just sanity-check the table renders the expected
+    // shape — visual regression is covered by Storybook + Chromatic.
+    const headers = canvas.getAllByRole('columnheader')
+    await expect(headers.length).toBe(6)
+    const cells = canvas.getAllByRole('cell')
+    // 3 rows × 6 columns = 18 cells
+    await expect(cells.length).toBe(18)
+    // Each non-actions body cell carries its label as a hidden span — we
+    // can't visually assert display:none in jsdom, but the text node
+    // exists in the DOM tree.
+    await expect(canvas.getAllByText('Principal').length).toBeGreaterThanOrEqual(2)
+  },
+}
+
+// --- Auto from TanStack: the one-liner replacement for ~25 lines of header/body ceremony ---
+
+const autoColHelper = createColumnHelper<User>()
+const autoCols = [
+  autoColHelper.accessor('name', {header: 'Name', enableSorting: true}),
+  autoColHelper.accessor('role', {header: 'Role', enableSorting: true}),
+  autoColHelper.accessor('email', {header: 'Email'}),
+  autoColHelper.accessor('status', {
+    header: 'Status',
+    cell: ({getValue}) => <Badge variant="info">{getValue()}</Badge>,
+  }),
+  autoColHelper.display({
+    id: 'actions',
+    header: 'Actions',
+    meta: {isActions: true, stackLabel: 'Actions'},
+    cell: ({row}) => (
+      <Button
+        size="small"
+        variant="secondary"
+        // Marker so the play assertion can verify the row's onClick
+        // doesn't fire when the inner button is the click target.
+        aria-label={`Edit ${row.original.name}`}
+      >
+        Edit
+      </Button>
+    ),
+  }),
+]
+
+// Module-level capture array so the play assertion can read what
+// onRowClick recorded without juggling render-scoped refs.
+const _rowClickLog: string[] = []
+
+function FromTanstackDemo() {
+  const table = useDataTable<User>(generateUsers(12), autoCols, {
+    pagination: {pageSize: 5},
+    enableSorting: true,
+  })
+
+  return (
+    <Table.FromTanstack
+      table={table}
+      variant="striped"
+      sortChip
+      pagination
+      onRowClick={(row) => _rowClickLog.push(row.original.email)}
+      rowAriaLabel={(row) => `Open ${row.original.name}`}
+    />
+  )
+}
+
+export const AutoFromTanstack: Story = {
+  render: () => <FromTanstackDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a styled Table directly from a TanStack table instance. ' +
+          'Mark the actions column with `meta: { isActions: true }`; pass ' +
+          '`sortChip` and `pagination` as booleans. `onRowClick` makes the ' +
+          'row focusable with Enter/Space activation; clicks on interactive ' +
+          'cell content (buttons, links) are attributed to the inner widget, ' +
+          'not the row.',
+      },
+    },
+  },
+  play: async ({canvas, userEvent}) => {
+    // 1. Shape: 5 columns including actions, 5 rows of data.
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    await expect(canvas.getAllByRole('columnheader').length).toBe(5)
+    await expect(canvas.getAllByRole('row').length).toBe(6) // 1 header + 5 body
+    await expect(canvas.getAllByRole('cell').length).toBe(25)
+
+    // 2. Clickable rows: each body row is focusable + has the aria-label
+    // from `rowAriaLabel`. The header row stays non-interactive.
+    const bodyRows = canvas.getAllByRole('row').slice(1)
+    await expect(bodyRows[0]).toHaveAttribute('tabindex', '0')
+    await expect(bodyRows[0].getAttribute('aria-label')).toMatch(/^Open /)
+
+    // 3. Click bubbling: clicking a row fires onRowClick; clicking the
+    // action button inside a row does NOT fire onRowClick.
+    _rowClickLog.length = 0
+    await userEvent.click(bodyRows[0])
+    await expect(_rowClickLog.length).toBe(1)
+
+    _rowClickLog.length = 0
+    const editButtons = canvas.getAllByRole('button', {name: /^Edit /})
+    await userEvent.click(editButtons[0])
+    await expect(_rowClickLog.length).toBe(0)
+
+    // 4. Keyboard activation: Enter fires onRowClick.
+    _rowClickLog.length = 0
+    bodyRows[0].focus()
+    await userEvent.keyboard('{Enter}')
+    await expect(_rowClickLog.length).toBe(1)
+  },
+}
+
+// --- Slot props on Root: manual JSX, no Container wrap needed ---
+
+export const SlotPropsOnRoot: Story = {
+  render: () => {
+    const data = generateUsers(8)
+    const [sort, setSort] = useState<{id: string; desc: boolean} | null>(null)
+
+    return (
+      <html.div style={storyStyles.stack}>
+        <html.div>
+          <html.span style={storyStyles.label}>
+            <html.code>Table.Root</html.code> with <html.code>sortChip</html.code> +{' '}
+            <html.code>pagination</html.code> slots — no <html.code>Container</html.code> wrap
+          </html.span>
+        </html.div>
+        <Table.Root
+          variant="striped"
+          sortChip={
+            <Table.SortChip
+              options={[
+                {id: 'name', label: 'Name'},
+                {id: 'role', label: 'Role'},
+              ]}
+              value={sort}
+              onChange={setSort}
+            />
+          }
+        >
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell>Role</Table.HeaderCell>
+              <Table.HeaderCell>Email</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {data.slice(0, 5).map((u) => (
+              <Table.Row key={u.email}>
+                <Table.Cell>{u.name}</Table.Cell>
+                <Table.Cell>{u.role}</Table.Cell>
+                <Table.Cell>{u.email}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </html.div>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`Table.Root` accepts `sortChip` and `pagination` as slot props. ' +
+          'No outer wrapper is needed — Root sets up the container query ' +
+          'itself. Narrow the canvas to see the responsive stack mode.',
+      },
+    },
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    // Note no Table.HeaderCell label — children are plain strings, so the
+    // label fallback uses extractText. Verify the rendered text appears.
+    await expect(canvas.getByText('Name')).toBeInTheDocument()
+  },
+}