@titan-design/react-ui 0.12.0 → 0.13.0

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

@@ -0,0 +1,180 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo } from 'react'
+import { View } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { Card } from '../../ui/card'
+import { Collapse, CollapseButton, CollapseContent } from '../../ui/collapse'
+import { Divider } from '../../ui/divider'
+import { Pill } from '../../ui/pill'
+import { Tooltip, useHoverState } from '../../ui/tooltip'
+import { DateTime } from '../DateTime'
+import { MarkdownProse } from '../Prose'
+import { Typography } from '../Typography'
+import { formatSessionDuration, formatTaskAge } from './format-time'
+import { extractTaskRefs, sessionLinkers, type SessionLinkHandlers } from './session-linkers'
+import { ExactTime, type SessionSummary } from './SessionListItem'
+import { TaskTable, type TaskColumnKey } from './TaskTable'
+import type { TaskListItem } from './TaskRow'
+
+/** Task pills beyond this collapse into a `+N`, so a sprawling session cannot push the log off screen. */
+const MAX_TASK_PILLS = 14
+
+// The card already names the initiative context, and tags would crowd the title; the id column keeps the prefix.
+const EMBEDDED_HIDDEN_COLUMNS: TaskColumnKey[] = ['slug', 'tags']
+
+export interface SessionDetailProps extends SessionLinkHandlers {
+  session: SessionSummary
+  /** Reference instant for the age label, injected so renders are deterministic. */
+  now: number
+  /**
+   * Task rows for the ids the log mentions, resolved by the host from its task
+   * store. When given, the tasks-touched strip can expand into a table.
+   */
+  tasks?: TaskListItem[]
+  className?: string
+}
+
+/** The body without its leading h1: the card header carries the title. */
+export function stripLeadingHeading(body: string): string {
+  const lines = body.split('\n')
+  const first = lines.findIndex((line) => line.trim() !== '')
+  if (first === -1 || !/^#\s/.test(lines[first]!.trim())) return body
+  return lines.slice(first + 1).join('\n')
+}
+
+function AgeHover({ session, now }: { session: SessionSummary; now: number }) {
+  const { hovered, hoverProps } = useHoverState()
+  return (
+    <Tooltip usePortal isOpen={hovered} content={<ExactTime session={session} />}>
+      <View {...hoverProps} className="shrink-0" testID="session-age">
+        <Typography variant="caption" className="leading-none text-text-tertiary">
+          {formatTaskAge(session.ended, now)}
+        </Typography>
+      </View>
+    </Tooltip>
+  )
+}
+
+function SessionMeta({ session, now }: { session: SessionSummary; now: number }) {
+  const duration = formatSessionDuration(session.started, session.ended)
+  return (
+    <View className="flex-row items-center gap-2.5">
+      <DateTime
+        value={session.ended}
+        format="medium"
+        isUTC
+        variant="mono"
+        className="shrink-0 text-text-secondary"
+      />
+      <AgeHover session={session} now={now} />
+      {duration ? (
+        <Typography variant="caption" className="shrink-0 leading-none text-text-tertiary">
+          {`· ${duration}`}
+        </Typography>
+      ) : null}
+      <Typography variant="mono" numberOfLines={1} className="shrink text-text-tertiary">
+        {session.id}
+      </Typography>
+    </View>
+  )
+}
+
+interface TasksTouchedProps {
+  refs: string[]
+  tasks: TaskListItem[]
+  now: number
+  onPressTask?: (id: string) => void
+}
+
+/** The strip of task pills; with task rows supplied it expands into a table. */
+function TasksTouched({ refs, tasks, now, onPressTask }: TasksTouchedProps) {
+  if (refs.length === 0) return null
+  const shown = refs.slice(0, MAX_TASK_PILLS)
+  const hidden = refs.length - shown.length
+  return (
+    <Collapse>
+      <View className="flex-row flex-wrap items-center gap-1.5" testID="session-tasks-touched">
+        <Typography variant="caption" className="leading-none text-text-tertiary">
+          tasks touched
+        </Typography>
+        {shown.map((id) => (
+          <Pill
+            key={id}
+            variant="subtle"
+            color="primary"
+            size="xs"
+            onPress={onPressTask ? () => onPressTask(id) : undefined}
+          >
+            {id}
+          </Pill>
+        ))}
+        {hidden > 0 ? (
+          <Typography variant="caption" className="leading-none text-text-tertiary">
+            {`+${hidden}`}
+          </Typography>
+        ) : null}
+        {tasks.length > 0 ? (
+          <CollapseButton
+            className="ml-auto px-1 py-0"
+            accessibilityLabel={`Show the ${tasks.length} tasks touched as a table`}
+          />
+        ) : null}
+      </View>
+      {tasks.length > 0 ? (
+        <CollapseContent className="pt-2">
+          <TaskTable
+            tasks={tasks}
+            now={now}
+            hideLegend
+            hideColumns={EMBEDDED_HIDDEN_COLUMNS}
+            label={`${tasks.length} ${tasks.length === 1 ? 'task' : 'tasks'} touched`}
+          />
+        </CollapseContent>
+      ) : null}
+    </Collapse>
+  )
+}
+
+/**
+ * SessionDetail — one session log, readable: its title, when it ran and for
+ * how long, the tasks it touched (as pills, or as a table when the host
+ * supplies the rows), then the markdown body with task ids, `[[name]]` links
+ * and PR numbers auto-linked.
+ *
+ * Holds no selection state; pair it with {@link SessionList} in the host.
+ * Composes {@link Card}, {@link Divider}, {@link Pill}, {@link Collapse},
+ * {@link DateTime}, {@link TaskTable} and {@link MarkdownProse}.
+ */
+export function SessionDetail({
+  session,
+  now,
+  tasks = [],
+  onPressTask,
+  onPressLink,
+  onPressPr,
+  className,
+}: SessionDetailProps) {
+  const refs = useMemo(() => extractTaskRefs(session.body), [session.body])
+  const touched = useMemo(
+    () => refs.map((id) => tasks.find((t) => t.id === id)).filter((t): t is TaskListItem => !!t),
+    [refs, tasks]
+  )
+  const body = useMemo(() => stripLeadingHeading(session.body), [session.body])
+  const linkers = useMemo(
+    () => sessionLinkers({ onPressTask, onPressLink, onPressPr }),
+    [onPressTask, onPressLink, onPressPr]
+  )
+  return (
+    <Card className={cn('gap-3 p-5', className)} testID="session-detail">
+      <View className="gap-2">
+        <Typography variant="h5" className="text-text-primary">
+          {session.title}
+        </Typography>
+        <SessionMeta session={session} now={now} />
+        <TasksTouched refs={refs} tasks={touched} now={now} onPressTask={onPressTask} />
+      </View>
+      <Divider />
+      <MarkdownProse body={body} linkers={linkers} testID="session-body" />
+    </Card>
+  )
+}

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useArgs } from 'storybook/preview-api'
+import { Surface } from '../../ui/surface'
+import { SessionList } from './SessionList'
+import { SESSION_FIXTURE, SESSION_NOW } from './session-fixture'
+
+/**
+ * **SessionList** — the selectable list half of the session reader. The host
+ * holds `selectedId`; this story keeps it in Storybook args so clicking a row
+ * updates the Controls panel.
+ *
+ * Composes `Eyebrow` · `SessionListItem`.
+ */
+const meta: Meta<typeof SessionList> = {
+  title: 'Custom/ActiveWork/SessionList',
+  component: SessionList,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    sessions: SESSION_FIXTURE,
+    now: SESSION_NOW,
+    selectedId: SESSION_FIXTURE[0]!.id,
+  },
+  argTypes: {
+    sessions: { table: { disable: true } },
+    now: { table: { disable: true } },
+    selectedId: { control: 'select', options: SESSION_FIXTURE.map((s) => s.id) },
+  },
+  render: function Render(args) {
+    const [, updateArgs] = useArgs()
+    return <SessionList {...args} onSelect={(s) => updateArgs({ selectedId: s.id })} />
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen w-72 p-6" testID="page-surface">
+        <Story />
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **Eyebrow** · **Divider** · **SessionListItem**. Used-by ↑ the Session Reader composition. Selection is controlled by the host; sessions group under a month divider once the list spans more than one.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof SessionList>
+
+/** Six sessions across two months, newest selected. */
+export const Default: Story = {}
+
+/** One month only: no period dividers. */
+export const SingleMonth: Story = {
+  args: { sessions: SESSION_FIXTURE.filter((s) => s.ended.startsWith('2026-07')) },
+}
+
+/** Nothing selected yet. */
+export const NoSelection: Story = {
+  args: { selectedId: undefined },
+}
+
+/** A custom heading in place of the count. */
+export const CustomLabel: Story = {
+  args: { label: 'Recent sessions' },
+}

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

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SessionList, groupByPeriod, sessionPeriod } from './SessionList'
+import { SESSION_FIXTURE, SESSION_NOW } from './session-fixture'
+
+const july = SESSION_FIXTURE.filter((s) => s.ended.startsWith('2026-07'))
+
+describe('SessionList', () => {
+  it('renders a row per session under a count heading, inside a listbox', () => {
+    render(<SessionList sessions={SESSION_FIXTURE} now={SESSION_NOW} />)
+    expect(screen.getByText('6 sessions')).toBeInTheDocument()
+    expect(screen.getByRole('listbox', { name: '6 sessions' })).toBeInTheDocument()
+    expect(screen.getAllByRole('option')).toHaveLength(SESSION_FIXTURE.length)
+  })
+
+  it('divides the list by month once it spans more than one, and not before', () => {
+    const { rerender } = render(<SessionList sessions={SESSION_FIXTURE} now={SESSION_NOW} />)
+    expect(screen.getAllByTestId('session-period').map((p) => p.textContent)).toEqual([
+      'July 2026',
+      'May 2026',
+    ])
+    rerender(<SessionList sessions={july} now={SESSION_NOW} />)
+    expect(screen.queryByTestId('session-period')).not.toBeInTheDocument()
+  })
+
+  it('marks only the selected id and reports the pressed session to the host', () => {
+    const onSelect = vi.fn()
+    render(
+      <SessionList
+        sessions={SESSION_FIXTURE}
+        now={SESSION_NOW}
+        selectedId={SESSION_FIXTURE[1]!.id}
+        onSelect={onSelect}
+      />
+    )
+    const options = screen.getAllByRole('option')
+    expect(options.filter((o) => o.getAttribute('aria-selected') === 'true')).toHaveLength(1)
+    expect(options[1]).toHaveAttribute('aria-selected', 'true')
+    fireEvent.click(options[3]!)
+    expect(onSelect).toHaveBeenCalledWith(SESSION_FIXTURE[3])
+  })
+
+  it('singularises the heading and accepts a custom label', () => {
+    const { rerender } = render(
+      <SessionList sessions={SESSION_FIXTURE.slice(0, 1)} now={SESSION_NOW} />
+    )
+    expect(screen.getByText('1 session')).toBeInTheDocument()
+    rerender(<SessionList sessions={SESSION_FIXTURE} now={SESSION_NOW} label="Recent" />)
+    expect(screen.getByRole('listbox', { name: 'Recent' })).toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(
+      <SessionList
+        sessions={SESSION_FIXTURE}
+        now={SESSION_NOW}
+        selectedId={SESSION_FIXTURE[0]!.id}
+      />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})
+
+describe('period grouping', () => {
+  it('labels a session by the calendar month it ended in, in UTC', () => {
+    expect(sessionPeriod('2026-07-01T00:30:00Z')).toBe('July 2026')
+    expect(sessionPeriod('nope')).toBe('Undated')
+  })
+
+  it('groups consecutive sessions and keeps the given order', () => {
+    const groups = groupByPeriod(SESSION_FIXTURE)
+    expect(groups.map((g) => [g.label, g.sessions.length])).toEqual([
+      ['July 2026', 5],
+      ['May 2026', 1],
+    ])
+  })
+})

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

@@ -0,0 +1,103 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo } from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { Divider } from '../../ui/divider'
+import { Typography } from '../Typography'
+import { Eyebrow } from './Eyebrow'
+import { SessionListItem, type SessionSummary } from './SessionListItem'
+
+// React Native's `Role` union omits `'listbox'` and `'group'`, even though RNW
+// passes both straight through to the DOM.
+const LISTBOX_ROLE = 'listbox' as ViewProps['role']
+const GROUP_ROLE = 'group' as ViewProps['role']
+
+export interface SessionListProps {
+  /** Newest first is the expected order; the list renders what it is given. */
+  sessions: SessionSummary[]
+  /** Reference instant for the age labels, injected so renders are deterministic. */
+  now: number
+  selectedId?: string
+  onSelect?: (session: SessionSummary) => void
+  /** Heading over the list. Defaults to the session count. */
+  label?: string
+  className?: string
+}
+
+interface Period {
+  label: string
+  sessions: SessionSummary[]
+}
+
+/** The calendar month a session ended in, as the list's period label. */
+export function sessionPeriod(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return 'Undated'
+  return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric', timeZone: 'UTC' })
+}
+
+/** Consecutive sessions in the same month, in the order given. */
+export function groupByPeriod(sessions: SessionSummary[]): Period[] {
+  const periods: Period[] = []
+  for (const session of sessions) {
+    const label = sessionPeriod(session.ended)
+    const last = periods[periods.length - 1]
+    if (last && last.label === label) last.sessions.push(session)
+    else periods.push({ label, sessions: [session] })
+  }
+  return periods
+}
+
+function PeriodDivider({ label }: { label: string }) {
+  return (
+    <View className="flex-row items-center gap-2 pt-2" testID="session-period">
+      <Typography variant="caption" className="leading-none text-text-tertiary">
+        {label}
+      </Typography>
+      <Divider className="flex-1" />
+    </View>
+  )
+}
+
+/**
+ * SessionList — the selectable list half of the session reader. Owns no
+ * selection state: the host holds `selectedId` and pairs the list with a
+ * `SessionDetail`, so the two can be laid out however the surface needs.
+ * Sessions are grouped under a hairline divider per calendar month once the
+ * list spans more than one.
+ *
+ * Composes {@link Eyebrow}, {@link Divider} and {@link SessionListItem}.
+ */
+export function SessionList({
+  sessions,
+  now,
+  selectedId,
+  onSelect,
+  label,
+  className,
+}: SessionListProps) {
+  const heading = label ?? `${sessions.length} ${sessions.length === 1 ? 'session' : 'sessions'}`
+  const periods = useMemo(() => groupByPeriod(sessions), [sessions])
+  const showPeriods = periods.length > 1
+  return (
+    <View className={cn('gap-2', className)}>
+      <Eyebrow>{heading}</Eyebrow>
+      <View className="gap-1" role={LISTBOX_ROLE} aria-label={heading}>
+        {periods.map((period) => (
+          <View key={period.label} className="gap-1" role={GROUP_ROLE} aria-label={period.label}>
+            {showPeriods ? <PeriodDivider label={period.label} /> : null}
+            {period.sessions.map((session) => (
+              <SessionListItem
+                key={session.id}
+                session={session}
+                now={now}
+                selected={session.id === selectedId}
+                onSelect={onSelect ? () => onSelect(session) : undefined}
+              />
+            ))}
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Surface } from '../../ui/surface'
+import { SessionListItem } from './SessionListItem'
+import { SESSION_FIXTURE, SESSION_NOW } from './session-fixture'
+
+/**
+ * **SessionListItem** — one session in the reader's list, led by its title,
+ * then age · duration · tasks touched · track. Hover for the full title, the
+ * exact end time and the task ids.
+ *
+ * Composes `Tooltip` · `DateTime` · `Typography`.
+ */
+const meta: Meta<typeof SessionListItem> = {
+  title: 'Custom/ActiveWork/SessionListItem',
+  component: SessionListItem,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    session: SESSION_FIXTURE[0],
+    now: SESSION_NOW,
+    selected: false,
+  },
+  argTypes: {
+    session: { table: { disable: true } },
+    now: { table: { disable: true } },
+    onSelect: { action: 'onSelect' },
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen w-72 p-6" testID="page-surface">
+        <Story />
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **Tooltip** · **DateTime** · **Typography**. Used-by ↑ SessionList. Selection is a prop; the row renders the raised fill and accent bar. Hover a row for the full title, exact end time and task ids.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof SessionListItem>
+
+/** A canonical session touching six tasks. */
+export const Default: Story = {}
+
+/** The selected treatment: raised fill and a leading accent bar. */
+export const Selected: Story = {
+  args: { selected: true },
+}
+
+/** An ad-hoc session: the track reads in the footer. */
+export const AdHoc: Story = {
+  args: { session: SESSION_FIXTURE[1] },
+}
+
+/** A six-minute session mentioning one task. */
+export const Short: Story = {
+  args: { session: SESSION_FIXTURE[5] },
+}

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

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SessionListItem, sessionRowMeta } from './SessionListItem'
+import { SESSION_FIXTURE, SESSION_NOW } from './session-fixture'
+
+const session = SESSION_FIXTURE[0]!
+
+describe('SessionListItem', () => {
+  it('leads with the title and reads age · duration · tasks · track beneath it', () => {
+    render(<SessionListItem session={session} now={SESSION_NOW} />)
+    expect(screen.getByText(session.title)).toBeInTheDocument()
+    expect(screen.getByRole('option')).toHaveAccessibleName(/1d ago · 1h 4m · 6 tasks · canonical$/)
+    expect(screen.getByText('6 tasks')).toBeInTheDocument()
+    expect(screen.queryByText('Jul 12')).not.toBeInTheDocument()
+  })
+
+  it('shows the exact end time when the age is hovered', () => {
+    render(<SessionListItem session={session} now={SESSION_NOW} />)
+    expect(screen.queryByText('07/12/2026, 02:52 PM')).not.toBeInTheDocument()
+    fireEvent.pointerEnter(screen.getByTestId('session-age'))
+    expect(screen.getByText('07/12/2026, 02:52 PM')).toBeInTheDocument()
+    fireEvent.pointerLeave(screen.getByTestId('session-age'))
+    expect(screen.queryByText('07/12/2026, 02:52 PM')).not.toBeInTheDocument()
+  })
+
+  it('lists the task ids when the count is hovered', () => {
+    render(<SessionListItem session={session} now={SESSION_NOW} />)
+    fireEvent.pointerEnter(screen.getByTestId('session-task-count'))
+    expect(screen.getByText(/^AW-17 AW-18/)).toBeInTheDocument()
+  })
+
+  it('exposes selection to assistive tech and shows the accent bar only when selected', () => {
+    const { rerender } = render(<SessionListItem session={session} now={SESSION_NOW} />)
+    expect(screen.getByRole('option')).toHaveAttribute('aria-selected', 'false')
+    expect(screen.queryByTestId('session-list-item-accent')).not.toBeInTheDocument()
+    rerender(<SessionListItem session={session} now={SESSION_NOW} selected />)
+    expect(screen.getByRole('option')).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByTestId('session-list-item-accent')).toBeInTheDocument()
+  })
+
+  it('selects on press, including a press on a hover field', () => {
+    const onSelect = vi.fn()
+    render(<SessionListItem session={session} now={SESSION_NOW} onSelect={onSelect} />)
+    fireEvent.click(screen.getByText('6 tasks'))
+    expect(onSelect).toHaveBeenCalledTimes(1)
+  })
+
+  it('singularises one task and drops the count when no task is mentioned', () => {
+    expect(sessionRowMeta(session, SESSION_NOW, 1)).toBe('1d ago · 1h 4m · 1 task · canonical')
+    expect(sessionRowMeta(session, SESSION_NOW, 0)).toBe('1d ago · 1h 4m · canonical')
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(
+      <div role="listbox" aria-label="Sessions">
+        <SessionListItem session={session} now={SESSION_NOW} selected />
+      </div>
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})