@titan-design/react-ui 0.12.1 → 0.13.0

package/src/components/custom/ActiveWork/TaskRow.tsx

@@ -0,0 +1,176 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View } from 'react-native'
+import { Pill } from '../../ui/pill'
+import { Tooltip } from '../../ui/tooltip'
+import { formatDateTime } from '../DateTime'
+import { TableCell, TableRow } from '../Table'
+import { Typography } from '../Typography'
+import { SEVERITY_META, SeverityLabel, type TaskSeverity } from './SeverityLabel'
+import type { TaskColumnKey } from './TaskTable'
+
+/** One open task, as the task list renders it. */
+export interface TaskListItem {
+  /** Initiative slug the task belongs to. */
+  slug: string
+  /** Per-initiative task id, e.g. `AW-22`. */
+  id: string
+  title: string
+  severity?: TaskSeverity
+  /** Lower sorts first; unique within an initiative, not globally. */
+  priority: number
+  /** Rough size. Absent means unestimated, which sorts last. */
+  estimate?: number
+  tags?: string[]
+  /** ISO date the task last changed, used for the age column. */
+  updated: string
+}
+
+/**
+ * Fixed column widths, shared by {@link TaskRow} and {@link TaskTable}'s header
+ * so the two cannot drift. `title` is the flexible column: it renders with no
+ * width and only declares the floor it may be squeezed to.
+ *
+ * Every fixed width holds its own header — the uppercase label, the 4px gap and
+ * the sort glyph, inside the dense cell's 16px of padding. A column narrower
+ * than its own header is what let `SEV` and `PRI` paint over each other.
+ */
+export const TASK_COLUMN_WIDTHS = {
+  slug: 132,
+  id: 66,
+  /** The narrowest the flexible title column may be squeezed before a column drops instead. */
+  titleMin: 160,
+  severity: 112,
+  /** The severity column once it has collapsed to its dot. */
+  severityCompact: 56,
+  priority: 56,
+  estimate: 56,
+  tags: 150,
+  age: 74,
+} as const
+
+/** How many tags fit before the row starts eliding them. */
+const MAX_VISIBLE_TAGS = 2
+
+/** The tags a row elided, shown when the `+N` count is hovered. */
+function HiddenTags({ tags }: { tags: string[] }) {
+  return (
+    <View className="flex-row flex-wrap gap-1" testID="hidden-tags">
+      {tags.map((tag) => (
+        <Pill key={tag} variant="subtle" color="default" size="xs">
+          {tag}
+        </Pill>
+      ))}
+    </View>
+  )
+}
+
+export interface TaskRowProps {
+  task: TaskListItem
+  /** Pre-formatted age label (e.g. "3d ago"). Passed in so rows stay pure and deterministic. */
+  ageLabel: string
+  /** Collapse severity to its dot (word on hover); the table decides this from its width. */
+  severityDotOnly?: boolean
+  /** Columns the table left out; the row skips their cells so header and body stay aligned. */
+  hideColumns?: TaskColumnKey[]
+}
+
+/**
+ * TaskRow — one task as a dense grid row: initiative, id, title, severity,
+ * priority, estimate, tags and age.
+ *
+ * Composes {@link TableRow} / {@link TableCell} for row semantics and density,
+ * {@link SeverityLabel} for the severity dot, and {@link Pill} for tags. Used by
+ * {@link TaskTable}.
+ */
+export function TaskRow({ task, ageLabel, severityDotOnly = false, hideColumns }: TaskRowProps) {
+  const show = (column: TaskColumnKey) => !hideColumns?.includes(column)
+  const tags = task.tags ?? []
+  const hiddenTags = tags.slice(MAX_VISIBLE_TAGS)
+  const severityWidth = severityDotOnly
+    ? TASK_COLUMN_WIDTHS.severityCompact
+    : TASK_COLUMN_WIDTHS.severity
+
+  return (
+    <TableRow testID="task-row">
+      {show('slug') ? (
+        <TableCell width={TASK_COLUMN_WIDTHS.slug}>
+          <Typography variant="mono" numberOfLines={1} className="text-xs text-text-tertiary">
+            {task.slug}
+          </Typography>
+        </TableCell>
+      ) : null}
+
+      {show('id') ? (
+        <TableCell width={TASK_COLUMN_WIDTHS.id}>
+          <Typography variant="mono" className="text-xs text-brand-primary">
+            {task.id}
+          </Typography>
+        </TableCell>
+      ) : null}
+
+      <TableCell>
+        <Typography variant="body2" numberOfLines={1} className="text-xs text-text-primary">
+          {task.title}
+        </Typography>
+      </TableCell>
+
+      {show('severity') ? (
+        <TableCell width={severityWidth}>
+          {severityDotOnly && task.severity ? (
+            <Tooltip usePortal label={SEVERITY_META[task.severity].label}>
+              <SeverityLabel severity={task.severity} dotOnly />
+            </Tooltip>
+          ) : (
+            <SeverityLabel severity={task.severity} />
+          )}
+        </TableCell>
+      ) : null}
+
+      {show('priority') ? (
+        <TableCell width={TASK_COLUMN_WIDTHS.priority} align="right">
+          <Typography variant="mono" className="text-xs text-text-secondary">
+            {String(task.priority)}
+          </Typography>
+        </TableCell>
+      ) : null}
+
+      {show('estimate') ? (
+        <TableCell width={TASK_COLUMN_WIDTHS.estimate} align="right">
+          <Typography variant="mono" className="text-xs text-text-secondary">
+            {task.estimate === undefined ? '—' : String(task.estimate)}
+          </Typography>
+        </TableCell>
+      ) : null}
+
+      {show('tags') ? (
+        <TableCell width={TASK_COLUMN_WIDTHS.tags}>
+          <View className="flex-row items-center gap-1">
+            {tags.slice(0, MAX_VISIBLE_TAGS).map((tag) => (
+              <Pill key={tag} variant="subtle" color="default" size="xs">
+                {tag}
+              </Pill>
+            ))}
+            {hiddenTags.length > 0 ? (
+              <Tooltip usePortal content={<HiddenTags tags={hiddenTags} />}>
+                {/* leading-none: the caption's loose line box would otherwise float the pills above centre. */}
+                <Typography variant="caption" className="leading-none text-text-tertiary">
+                  {`+${hiddenTags.length}`}
+                </Typography>
+              </Tooltip>
+            ) : null}
+          </View>
+        </TableCell>
+      ) : null}
+
+      {show('updated') ? (
+        <TableCell width={TASK_COLUMN_WIDTHS.age} align="right">
+          <Tooltip usePortal label={formatDateTime(task.updated, 'medium', true)}>
+            <Typography variant="caption" className="text-text-tertiary">
+              {ageLabel}
+            </Typography>
+          </Tooltip>
+        </TableCell>
+      ) : null}
+    </TableRow>
+  )
+}

package/src/components/custom/ActiveWork/TaskTable.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Surface } from '../../ui/surface'
+import { TaskTable } from './TaskTable'
+import { TASK_LIST_FIXTURE, TASK_LIST_NOW } from './task-list-fixture'
+
+/**
+ * **T2 · Task table** — every open task across initiatives in one dense,
+ * sortable grid.
+ *
+ * Composes `Table` at `density="dense"`, driven by `useTable` with per-column
+ * comparators. Rows are `TaskRow`; the legend tallies `SeverityLabel`.
+ */
+const meta: Meta<typeof TaskTable> = {
+  title: 'Custom/ActiveWork/TaskTable',
+  component: TaskTable,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    tasks: TASK_LIST_FIXTURE,
+    now: TASK_LIST_NOW,
+  },
+  argTypes: {
+    defaultSortKey: {
+      control: 'select',
+      options: ['priority', 'severity', 'updated', 'slug', 'id', 'title', 'estimate'],
+    },
+    hideLegend: { control: 'boolean' },
+    severityDisplay: { control: 'inline-radio', options: ['auto', 'full', 'dot'] },
+    fitWidth: { control: { type: 'number', min: 120, step: 20 } },
+    now: { table: { disable: true } },
+    tasks: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen p-6" testID="page-surface">
+        <View className="w-full max-w-[1100px]">
+          <Story />
+        </View>
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **Table** (density="dense") · **useTable** (comparators) · **TaskRow** · **SeverityLabel** · **Eyebrow**.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof TaskTable>
+
+/** Default view: sorted by priority, lowest number first. */
+export const Default: Story = {}
+
+/**
+ * Under 840px the severity column collapses to its dot (word on hover) so the
+ * title keeps a scannable width. Driven by the table's own measured width, so
+ * resize the canvas to watch it switch. Narrower still and whole columns start
+ * to drop — see **Embedded Narrow**.
+ */
+export const Narrow: Story = {
+  decorators: [
+    (Story) => (
+      <View className="w-full max-w-[760px]">
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+/**
+ * The table inside a card half a page wide, which is where the reader puts it.
+ * Columns drop in the declared order — severity, priority, estimate, tags, age,
+ * initiative — and `title` and `id` never drop, because a task with no name is
+ * not a narrower row, it is a useless one. Below the last droppable column the
+ * table scrolls horizontally rather than squeezing the survivors into overlap.
+ */
+export const EmbeddedNarrow: Story = {
+  args: { hideLegend: true, hideColumns: ['slug'] },
+  decorators: [
+    (Story) => (
+      <View className="w-full max-w-[400px]">
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+/**
+ * Sorted by severity. The comparator ranks critical→low by meaning, then breaks
+ * ties on priority — an alphabetical sort would bury `low` between `high` and
+ * `medium`.
+ */
+export const SortedBySeverity: Story = {
+  args: { defaultSortKey: 'severity' },
+}
+
+/** Sorted by age, newest first — the direction that makes an age column useful. */
+export const SortedByAge: Story = {
+  args: { defaultSortKey: 'updated' },
+}
+
+/**
+ * Sorted by estimate. `TP-16` and `C-6` are estimated; `AW-86` is not, and
+ * unestimated rows sort last in both directions rather than reading as zero.
+ */
+export const SortedByEstimate: Story = {
+  args: { defaultSortKey: 'estimate' },
+}
+
+/** Without the severity legend, for embedding under an existing header. */
+export const NoLegend: Story = {
+  args: { hideLegend: true },
+}
+
+/** Empty backlog — the grid keeps its header so the columns stay readable. */
+export const Empty: Story = {
+  args: { tasks: [] },
+}

package/src/components/custom/ActiveWork/TaskTable.test.tsx

@@ -0,0 +1,233 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { TaskTable, formatTaskAge, type TaskColumnKey } from './TaskTable'
+import { TASK_LIST_FIXTURE, TASK_LIST_NOW } from './task-list-fixture'
+
+/** Task ids in the order they currently appear, read off the rendered rows. */
+function renderedIds(): string[] {
+  return screen
+    .getAllByTestId('task-row')
+    .map((row) => within(row).getByText(/^[A-Z]+-\d+$/).textContent ?? '')
+}
+
+describe('TaskTable', () => {
+  it('renders a row per task with its id and title', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} />)
+    expect(screen.getAllByTestId('task-row')).toHaveLength(TASK_LIST_FIXTURE.length)
+    expect(screen.getByText('AW-22')).toBeInTheDocument()
+    expect(screen.getByText('npm publish the packaged distribution')).toBeInTheDocument()
+  })
+
+  it('collapses severity to its dot when told to, keeping the full name for hover and a11y', () => {
+    render(
+      <TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} severityDisplay="dot" hideLegend />
+    )
+    expect(screen.getByText('Sev')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Sort by Severity' })).toBeInTheDocument()
+    expect(screen.queryByText('Critical')).not.toBeInTheDocument()
+    expect(screen.getByTestId('severity-dot-critical')).toBeInTheDocument()
+  })
+
+  it('keeps the severity word until it has measured a narrow width', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} hideLegend />)
+    expect(screen.getByText('Critical')).toBeInTheDocument()
+  })
+
+  it('leaves out hidden columns in both the header and the rows', () => {
+    render(
+      <TaskTable
+        tasks={TASK_LIST_FIXTURE}
+        now={TASK_LIST_NOW}
+        hideLegend
+        hideColumns={['slug', 'tags']}
+      />
+    )
+    const headers = screen.getAllByRole('columnheader').map((h) => h.textContent)
+    expect(headers.some((h) => h?.startsWith('Initiative'))).toBe(false)
+    expect(headers.some((h) => h?.startsWith('Tags'))).toBe(false)
+    expect(headers.some((h) => h?.startsWith('Title'))).toBe(true)
+    const firstRow = screen.getAllByTestId('task-row')[0]!
+    expect(within(firstRow).getAllByRole('cell')).toHaveLength(headers.length)
+  })
+
+  it('sorts by priority ascending by default', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} />)
+    // RL-14 is priority 3, the lowest number in the fixture.
+    expect(renderedIds()[0]).toBe('RL-14')
+  })
+
+  it('ranks severity by meaning rather than alphabetically', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} defaultSortKey="severity" />)
+    const ids = renderedIds()
+    // critical first; `low` must land after `medium`, which an alphabetical
+    // string sort would get wrong.
+    expect(ids[0]).toBe('RL-14')
+    expect(ids.indexOf('AW-22')).toBeGreaterThan(ids.indexOf('HA-3'))
+  })
+
+  it('sorts unestimated tasks last, not as zero', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} defaultSortKey="estimate" />)
+    // AW-86 is the only fixture task without an estimate, so it must land last.
+    expect(renderedIds().at(-1)).toBe('AW-86')
+  })
+
+  it('keeps blanks last after flipping direction', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} defaultSortKey="estimate" />)
+    fireEvent.click(screen.getByRole('button', { name: 'Sort by Estimate' }))
+    expect(renderedIds().at(-1)).toBe('AW-86')
+  })
+
+  it('reverses order when a sorted column header is pressed', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} />)
+    const first = renderedIds()[0]
+    fireEvent.click(screen.getByRole('button', { name: 'Sort by Priority' }))
+    expect(renderedIds()[0]).not.toBe(first)
+  })
+
+  it('sorts age newest-first when ascending', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} defaultSortKey="updated" />)
+    // RL-14 was updated 2026-08-30, the most recent in the fixture.
+    expect(renderedIds()[0]).toBe('RL-14')
+  })
+
+  it('exposes sort state to assistive tech on the column header', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} />)
+    const headers = screen.getAllByRole('columnheader')
+    const sorted = headers.filter((h) => h.getAttribute('aria-sort') === 'ascending')
+    expect(sorted).toHaveLength(1)
+  })
+
+  it('tallies open tasks by severity in the legend', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} />)
+    // The legend renders one dot per severity on top of the per-row dots.
+    expect(screen.getAllByTestId('severity-dot-critical').length).toBeGreaterThan(1)
+  })
+
+  it('hides the legend when asked', () => {
+    render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} hideLegend />)
+    // Only the single critical row keeps a critical dot once the legend is gone.
+    expect(screen.getAllByTestId('severity-dot-critical')).toHaveLength(1)
+  })
+
+  it('renders the header with no rows for an empty backlog', () => {
+    render(<TaskTable tasks={[]} now={TASK_LIST_NOW} />)
+    expect(screen.queryAllByTestId('task-row')).toHaveLength(0)
+    expect(screen.getByRole('button', { name: 'Sort by Title' })).toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(<TaskTable tasks={TASK_LIST_FIXTURE} now={TASK_LIST_NOW} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})
+
+/** Header labels in render order, with the sort glyph stripped off. */
+function headerLabels(): string[] {
+  return screen
+    .getAllByRole('columnheader')
+    .map((header) => (header.textContent ?? '').replace(/[↑↓↕]/g, '').trim())
+}
+
+describe('TaskTable column drop order', () => {
+  const at = (fitWidth: number, hideColumns?: TaskColumnKey[]) =>
+    render(
+      <TaskTable
+        tasks={TASK_LIST_FIXTURE}
+        now={TASK_LIST_NOW}
+        hideLegend
+        fitWidth={fitWidth}
+        hideColumns={hideColumns}
+      />
+    )
+
+  // Each width is one step of the declared order: severity, priority, estimate, tags, age, initiative.
+  it.each([
+    [1100, ['Initiative', 'ID', 'Title', 'Severity', 'Pri', 'Est', 'Tags', 'Age']],
+    [700, ['Initiative', 'ID', 'Title', 'Pri', 'Est', 'Tags', 'Age']],
+    [640, ['Initiative', 'ID', 'Title', 'Est', 'Tags', 'Age']],
+    [590, ['Initiative', 'ID', 'Title', 'Tags', 'Age']],
+    [440, ['Initiative', 'ID', 'Title', 'Age']],
+    [380, ['Initiative', 'ID', 'Title']],
+    [200, ['ID', 'Title']],
+  ])('renders %ipx as %j', (fitWidth, expected) => {
+    at(fitWidth as number)
+    expect(headerLabels()).toEqual(expected)
+  })
+
+  it('keeps the title and the id at any width, however narrow', () => {
+    at(80)
+    expect(headerLabels()).toEqual(['ID', 'Title'])
+    // Below the floor the table scrolls rather than dropping what names the task.
+    expect(screen.getAllByText(TASK_LIST_FIXTURE[0]!.title)[0]).toBeInTheDocument()
+  })
+
+  it('drops one column at a time rather than collapsing to the floor', () => {
+    at(700)
+    expect(headerLabels()).toHaveLength(7)
+  })
+
+  it('gives every header label a column of its own', () => {
+    for (const width of [1100, 700, 440, 200]) {
+      const { unmount } = at(width)
+      const labels = headerLabels()
+      expect(new Set(labels).size).toBe(labels.length)
+      expect(labels.every((label) => label.split(/\s+/).length === 1)).toBe(true)
+      unmount()
+    }
+  })
+
+  it('keeps the rows in step with the header it dropped columns from', () => {
+    at(440)
+    const firstRow = screen.getAllByTestId('task-row')[0]!
+    expect(within(firstRow).getAllByRole('cell')).toHaveLength(headerLabels().length)
+  })
+
+  it("shows id, title and age in the reader's embedded card", () => {
+    // 369px is what the reader's right-hand card measured at an 865px viewport.
+    at(369, ['slug'])
+    expect(headerLabels()).toEqual(['ID', 'Title', 'Age'])
+  })
+
+  it('has no a11y violations once columns have dropped', async () => {
+    const { container } = at(440)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  it('has no a11y violations at the horizontal-scroll floor', async () => {
+    const { container } = at(200)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})
+
+describe('formatTaskAge', () => {
+  const now = new Date('2026-08-30T12:00:00Z').getTime()
+
+  it('reads today for the same day', () => {
+    expect(formatTaskAge('2026-08-30T06:00:00Z', now)).toBe('today')
+  })
+
+  it('singularises one day', () => {
+    expect(formatTaskAge('2026-08-29T06:00:00Z', now)).toBe('1d ago')
+  })
+
+  it('counts days below a month', () => {
+    expect(formatTaskAge('2026-08-18T12:00:00Z', now)).toBe('12d ago')
+  })
+
+  it('switches to months at thirty days', () => {
+    expect(formatTaskAge('2026-07-01T12:00:00Z', now)).toBe('2mo ago')
+  })
+
+  it('renders an em-dash for a missing or unparseable date', () => {
+    expect(formatTaskAge(null, now)).toBe('—')
+    expect(formatTaskAge(undefined, now)).toBe('—')
+    expect(formatTaskAge('not-a-date', now)).toBe('—')
+  })
+
+  it('does not read the clock — the same inputs always give the same label', () => {
+    expect(formatTaskAge('2026-08-18T12:00:00Z', now)).toBe(
+      formatTaskAge('2026-08-18T12:00:00Z', now)
+    )
+  })
+})