@titan-design/react-ui 0.6.0 → 0.8.0

package/src/components/custom/Workout/SessionHeader.tsx

@@ -0,0 +1,152 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { Typography } from '../Typography'
+import { TimerReadout } from '../TimerReadout'
+import { SegmentedProgressBar } from './SegmentedProgressBar'
+import { MetricTiles, type MetricTileData } from './MetricTiles'
+import { ScheduleTiles } from './ScheduleTiles'
+import { paceTone, paceToneColor } from './paceTone'
+
+const t = getSemanticColors('dark')
+
+// The raised charcoal heading plane (charcoal 400) — reads as one flat surface with
+// the nav; depth lives on the sunk list below it, not here.
+const RAISED = primitiveColors.charcoal[400] // #1F1F1F
+
+// The chunked pace bar matches the SetStrip language but sits tighter than the default
+// SetStrip gap (5) — the locked design uses a 3px gap and a 9px track.
+const BAR_HEIGHT = 9
+const BAR_GAP = 3
+
+export interface SessionHeaderPlanEntry {
+  /** Exercise name (currently informational — chunk widths come from `sets`). */
+  name?: string
+  /** Planned set count — drives this exercise's chunk width (∝ sets). */
+  sets: number
+}
+
+export interface SessionHeaderProps extends ViewProps {
+  /** Session title — the live session's name, or the next session's name when `next` is set. */
+  title: string
+  /** Exercises in order → chunk widths (∝ sets). */
+  plan: SessionHeaderPlanEntry[]
+  /** Fractional sets completed (live). 0/undefined leaves the bar empty. */
+  setsDone?: number
+  /** Live elapsed time in ms — drives the ⏱ readout and the pace marker. */
+  elapsedMs?: number
+  /** Optional time budget in ms → adds the pace marker and the ` / budget` suffix. Omit → no marker, plain (steel) progress. */
+  budgetMs?: number
+  /** Elapsed readout goes live-green while true. Default true (live). */
+  running?: boolean
+  /** Live stat tiles (Volume / Load / Fatigue). Ignored when `next` is set. */
+  metrics?: MetricTileData[]
+  /** When set → UPCOMING layout: schedule tiles + empty bar; `title` is the next session's name. */
+  next?: number | Date
+  className?: string
+}
+
+/**
+ * The session-rail heading: the session title over a stat row and a chunked pace bar.
+ * Live, it shows Volume/Load/Fatigue tiles, a per-exercise progress bar (fill ∝ sets
+ * done, coloured green/amber against the elapsed-vs-budget pace, with a live marker),
+ * a mono `n/total sets` label and a ⏱ elapsed readout. Upcoming (`next` set), the tiles
+ * become Date/Time/Until, the bar is the empty plan shape, and the readout shows the
+ * planned duration. Rendered on the raised charcoal plane; presentational. Composes
+ * {@link MetricTiles} / {@link ScheduleTiles} + {@link SegmentedProgressBar} +
+ * {@link TimerReadout}.
+ */
+export function SessionHeader({
+  title,
+  plan,
+  setsDone = 0,
+  elapsedMs,
+  budgetMs,
+  running = true,
+  metrics = [],
+  next,
+  className,
+  style,
+  ...props
+}: SessionHeaderProps) {
+  const upcoming = next != null
+  const totalSets = plan.reduce((sum, e) => sum + e.sets, 0)
+
+  const hasPace = !upcoming && budgetMs != null && elapsedMs != null
+  const target = hasPace ? (elapsedMs as number) / (budgetMs as number) : undefined
+
+  const setsLabel = upcoming ? `${totalSets} sets` : `${Math.floor(setsDone)}/${totalSets} sets`
+  const setsLabelColor = upcoming
+    ? t['text-secondary']
+    : paceToneColor(paceTone(totalSets > 0 ? setsDone / totalSets : 0, target))
+
+  return (
+    <View
+      className={className}
+      style={[
+        {
+          backgroundColor: RAISED,
+          paddingTop: 11,
+          paddingRight: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          zIndex: 2,
+        },
+        style,
+      ]}
+      testID="session-rail-header"
+      {...props}
+    >
+      <Text
+        accessibilityRole="header"
+        style={{
+          fontSize: 16,
+          lineHeight: 18,
+          fontWeight: '700',
+          fontFamily: '"Space Grotesk", sans-serif',
+          color: t['text-primary'],
+          marginBottom: 10,
+        }}
+        testID="session-rail-title"
+      >
+        {title}
+      </Text>
+
+      {upcoming ? <ScheduleTiles when={next} /> : <MetricTiles metrics={metrics} />}
+
+      <View style={{ marginTop: 10 }}>
+        <SegmentedProgressBar
+          segments={plan.map((e) => ({ weight: e.sets }))}
+          value={upcoming ? 0 : setsDone}
+          target={target}
+          height={BAR_HEIGHT}
+          gap={BAR_GAP}
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            marginTop: 5,
+          }}
+        >
+          <Typography
+            variant="mono"
+            style={{ fontSize: 10, color: setsLabelColor }}
+            testID="session-rail-sets"
+          >
+            {setsLabel}
+          </Typography>
+          <TimerReadout
+            mode="up"
+            elapsedMs={upcoming ? budgetMs : elapsedMs}
+            durationMs={budgetMs}
+            running={running && !upcoming}
+            showTotal={budgetMs != null && !upcoming}
+          />
+        </View>
+      </View>
+    </View>
+  )
+}

package/src/components/custom/Workout/SessionRail.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { SessionRail, type SessionRailExercise } from './SessionRail'
+
+/**
+ * `SessionRail` (shell organism) — the live-workout exercise list: a flat raised
+ * `SessionHeader` glance (title, stat tiles, chunked pace bar) over a sunk, inset list
+ * of ExerciseCard rail headings. The header plan (chunk widths ∝ sets) is derived from
+ * `exercises`. Surfaces bind to the charcoal ramp; the list depth is a subtle neumorphic
+ * inset. Driven entirely by props.
+ */
+const meta: Meta<typeof SessionRail> = {
+  title: 'Shell/SessionRail',
+  component: SessionRail,
+  tags: ['autodocs'],
+  argTypes: {
+    stripHeight: { control: { type: 'range', min: 2, max: 16, step: 1 } },
+    onExercisePress: { action: 'exercise-press' },
+  },
+  decorators: [
+    (Story) => (
+      <View className="min-h-screen flex-row" style={{ backgroundColor: '#101010' }}>
+        <Story />
+        <View className="flex-1 items-center justify-center">
+          <Text style={{ color: '#6B7280', fontSize: 12 }}>main viewport</Text>
+        </View>
+      </View>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Organism** (shell S3). The live-workout exercise list: raised header glance over ' +
+          'a sunk inset list, subtle neumorphic depth (charcoal ramp + `neumorphicShadows`). ' +
+          'Composes ' +
+          '[SessionHeader](?path=/docs/shell-sessionrail-sessionheader--docs) + ' +
+          '[ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs) × N. ' +
+          'Sits beside [SideNav](?path=/docs/shell-sidenav--docs) in the dashboard shell.',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SessionRail>
+
+const AMBER = primitiveRamps.amber[300]
+
+const decay = (n: number, start: number, span = 0.4): number[] =>
+  Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
+
+const SESSION: SessionRailExercise[] = [
+  {
+    name: 'Seated Cable Row',
+    summary: { sets: 5, reps: 8, weight: 145, unit: 'lbs' },
+    tempo: [3, 1, 2, 0],
+    indicator: 'pr',
+    setStates: [1.0, 0.9, 0.8, 0.7, 0.6].map((s) => ({ status: 'done', velocities: decay(8, s) })),
+  },
+  {
+    name: 'Incline DB Press',
+    summary: { sets: 3, reps: 8, weight: 70, unit: 'lbs' },
+    tempo: [3, 0, 3, 0],
+    setStates: [0.72, 0.62, 0.54].map((s) => ({ status: 'done', velocities: decay(8, s) })),
+  },
+  {
+    name: 'Cable Chest Press',
+    summary: { sets: 3, reps: 10, weight: 90, unit: 'lbs' },
+    tempo: [2, 1, 2, 0],
+    indicator: 'info',
+    setStates: [
+      { status: 'done', velocities: decay(10, 0.72) },
+      { status: 'active', velocities: decay(5, 0.62), planned: 10 },
+      { status: 'todo', planned: 10 },
+    ],
+  },
+  {
+    name: 'Standing Calf Raise',
+    summary: { sets: 5, reps: 20, weight: 25, unit: 'lbs' },
+    tempo: [2, 1, 2, 0],
+    upcoming: true,
+    setStates: [1, 2, 3, 4, 5].map(() => ({ status: 'todo', planned: 20 })),
+  },
+  {
+    name: 'Face Pull',
+    summary: { sets: 3, reps: '15-20', weight: 40, unit: 'lbs' },
+    tempo: [2, 1, 2, 0],
+    upcoming: true,
+    setStates: [1, 2, 3].map(() => ({ status: 'todo', planned: 18 })),
+  },
+]
+
+const LIVE_METRICS = [
+  { label: 'Volume', value: '76%' },
+  { label: 'Load', value: '7.3k' },
+  { label: 'Fatigue', value: 'MOD', valueColor: AMBER },
+]
+
+const baseArgs = {
+  title: 'Pull A · Intensification',
+  exercises: SESSION,
+  stripHeight: 8,
+}
+
+export const Default: Story = {
+  args: {
+    ...baseArgs,
+    setsDone: 7.2,
+    elapsedMs: (42 * 60 + 18) * 1000,
+    budgetMs: 60 * 60 * 1000,
+    metrics: LIVE_METRICS,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Live, behind pace — the header carries the session glance over the exercise list.',
+      },
+    },
+  },
+}
+
+export const NoTimeTarget: Story = {
+  args: {
+    ...baseArgs,
+    setsDone: 7.2,
+    elapsedMs: (42 * 60 + 18) * 1000,
+    metrics: LIVE_METRICS,
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Live with no time budget — plain (steel) progress, ⏱ elapsed only.' },
+    },
+  },
+}
+
+export const Upcoming: Story = {
+  args: {
+    ...baseArgs,
+    title: 'Lower B · Volume',
+    budgetMs: 52 * 60 * 1000,
+    next: Date.now() + 2 * 24 * 60 * 60 * 1000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upcoming session — the header shows Date / Time / Until + the empty plan bar.',
+      },
+    },
+  },
+}

package/src/components/custom/Workout/SessionRail.test.tsx

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SessionRail, type SessionRailExercise } from './SessionRail'
+
+const exercises: SessionRailExercise[] = [
+  {
+    name: 'Seated Cable Row',
+    summary: { sets: 5, reps: 8, weight: 145, unit: 'lbs' },
+    tempo: [3, 1, 2, 0],
+    indicator: 'pr',
+    setStates: [{ status: 'done', velocities: [1, 0.9] }],
+  },
+  {
+    name: 'Cable Chest Press',
+    summary: { sets: 3, reps: 10, weight: 90, unit: 'lbs' },
+    setStates: [{ status: 'active', velocities: [0.6], planned: 10 }],
+  },
+  {
+    name: 'Face Pull',
+    summary: { sets: 3, reps: '15-20', weight: 40, unit: 'lbs' },
+    upcoming: true,
+    setStates: [{ status: 'todo', planned: 18 }],
+  },
+] // total = 11 sets
+
+const baseProps = {
+  title: 'Pull A · Intensification',
+  exercises,
+  setsDone: 4,
+  elapsedMs: 20 * 60 * 1000,
+  budgetMs: 60 * 60 * 1000,
+  metrics: [
+    { label: 'Volume', value: '40%' },
+    { label: 'Load', value: '3.1k' },
+    { label: 'Fatigue', value: 'LOW' },
+  ],
+}
+
+describe('SessionRail', () => {
+  it('renders the session title', () => {
+    render(<SessionRail {...baseProps} />)
+    expect(screen.getByTestId('session-rail-title')).toHaveTextContent('Pull A · Intensification')
+  })
+
+  it('derives the header sets label from the exercises', () => {
+    render(<SessionRail {...baseProps} />)
+    expect(screen.getByTestId('session-rail-sets')).toHaveTextContent('4/11 sets')
+  })
+
+  it('feeds the live metric tiles into the header', () => {
+    render(<SessionRail {...baseProps} />)
+    expect(screen.getByText('Volume')).toBeInTheDocument()
+    expect(screen.getByText('Fatigue')).toBeInTheDocument()
+  })
+
+  it('renders the upcoming glance when next is set', () => {
+    render(
+      <SessionRail title="Lower B" exercises={exercises} next={new Date('2026-07-11T18:30:00')} />
+    )
+    expect(screen.getByText('Date')).toBeInTheDocument()
+    expect(screen.getByText('Until')).toBeInTheDocument()
+  })
+
+  it('renders one rail heading per exercise', () => {
+    render(<SessionRail {...baseProps} />)
+    expect(screen.getAllByTestId('exercise-card')).toHaveLength(3)
+    expect(screen.getByText('Seated Cable Row')).toBeInTheDocument()
+    expect(screen.getByText('Face Pull')).toBeInTheDocument()
+  })
+
+  it('fires onExercisePress with the exercise and its index', () => {
+    const onExercisePress = vi.fn()
+    render(<SessionRail {...baseProps} onExercisePress={onExercisePress} />)
+    fireEvent.click(screen.getAllByTestId('exercise-card-header')[1])
+    expect(onExercisePress).toHaveBeenCalledWith(exercises[1], 1)
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<SessionRail {...baseProps} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Workout/SessionRail.tsx

@@ -0,0 +1,126 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, type ViewProps } from 'react-native'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { neumorphicShadows } from '../../../theme/shadows'
+import { ExerciseCardHeading } from './ExerciseCardHeading'
+import { SessionHeader } from './SessionHeader'
+import type { MetricTileData } from './MetricTiles'
+import type { SetStripSet } from './SetStrip'
+import type { ExerciseIndicatorKind } from './ExerciseIndicator'
+
+// Charcoal-ramp surfaces (the locked S3 shell shades): the nav + the heading plane
+// read as ONE flat raised surface; the exercise list is sunk. Depth comes only from
+// the list's subtle inset shadow (top cast by the heading, faint left edge by the nav).
+const INSET = primitiveColors.charcoal[800] // #131313 — sunk exercise list
+const DIVIDER = primitiveColors.charcoal[500] // #1C1C1C — row divider
+
+const DEFAULT_WIDTH = 246
+
+export interface SessionRailExercise {
+  /** Stable key + press payload. Falls back to list index when absent. */
+  id?: string
+  name: string
+  summary: { sets: number; reps: number | string; weight: number; unit: 'lbs' | 'kg' }
+  tempo?: [number, number, number, number]
+  indicator?: ExerciseIndicatorKind
+  /** Per-set performance data driving the heading strip. */
+  setStates: SetStripSet[]
+  /** Dim the row as a not-yet-reached exercise. */
+  upcoming?: boolean
+}
+
+export interface SessionRailProps extends ViewProps {
+  /** Session title — the live session's name, or the next session's name when `next` is set. */
+  title: string
+  exercises: SessionRailExercise[]
+  /** Fractional sets completed (live) — drives the header's pace bar + sets label. */
+  setsDone?: number
+  /** Live elapsed time in ms — drives the header's ⏱ readout and pace marker. */
+  elapsedMs?: number
+  /** Optional time budget in ms → header pace marker + ` / budget`. */
+  budgetMs?: number
+  /** Header elapsed readout goes live-green while true. Default true (live). */
+  running?: boolean
+  /** Live stat tiles (Volume / Load / Fatigue). Ignored when `next` is set. */
+  metrics?: MetricTileData[]
+  /** When set → the header renders the UPCOMING glance (Date/Time/Until + empty bar). */
+  next?: number | Date
+  /** Heading strip height in px, forwarded to each row. Default 8. */
+  stripHeight?: number
+  /** Rail width in px. Default 246. */
+  width?: number
+  onExercisePress?: (exercise: SessionRailExercise, index: number) => void
+  className?: string
+}
+
+/**
+ * The live-workout session rail: a flat raised {@link SessionHeader} glance (title,
+ * stat tiles, chunked pace bar) over a sunk, inset list of {@link ExerciseCardHeading}
+ * exercise headings. The header's plan (chunk widths ∝ sets) is derived from `exercises`.
+ * Presentational — driven entirely by props.
+ */
+export function SessionRail({
+  title,
+  exercises,
+  setsDone,
+  elapsedMs,
+  budgetMs,
+  running,
+  metrics,
+  next,
+  stripHeight = 8,
+  width = DEFAULT_WIDTH,
+  onExercisePress,
+  className,
+  style,
+  ...props
+}: SessionRailProps) {
+  return (
+    <View
+      className={className}
+      style={[{ width, flexDirection: 'column', backgroundColor: INSET }, style]}
+      testID="session-rail"
+      {...props}
+    >
+      <SessionHeader
+        title={title}
+        plan={exercises.map((ex) => ({ name: ex.name, sets: ex.summary.sets }))}
+        setsDone={setsDone}
+        elapsedMs={elapsedMs}
+        budgetMs={budgetMs}
+        running={running}
+        metrics={metrics}
+        next={next}
+      />
+
+      <View
+        style={[{ flex: 1, backgroundColor: INSET }, neumorphicShadows.charcoal.pressed.subtle]}
+        testID="session-rail-list"
+      >
+        {exercises.map((ex, i) => (
+          <View
+            key={ex.id ?? i}
+            style={{
+              borderBottomWidth: i < exercises.length - 1 ? 1 : 0,
+              borderBottomColor: DIVIDER,
+            }}
+          >
+            <ExerciseCardHeading
+              name={ex.name}
+              sets={ex.summary.sets}
+              reps={ex.summary.reps}
+              load={ex.summary.weight}
+              unit={ex.summary.unit}
+              tempo={ex.tempo}
+              indicator={ex.indicator}
+              setStates={ex.setStates}
+              stripHeight={stripHeight}
+              dimmed={ex.upcoming}
+              onPress={() => onExercisePress?.(ex, i)}
+            />
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/components/custom/Workout/SetBar.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { SetBar, type SetStripSet } from './SetBar'
+
+/**
+ * `SetBar` — ONE set's multi-coloured bar: the butted per-rep colour segments for a
+ * single set. `done` = velocity-coloured reps · `active` = performed reps pulse with
+ * a grey remainder · `todo` = a solid grey bar. Colours are the real titan ramp pins
+ * (red-600 · orange-400 · amber-300 · green-300). {@link SetStrip} lays several side by side.
+ */
+const meta: Meta<typeof SetBar> = {
+  title: 'Workout/SetBar',
+  component: SetBar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Atom.** ONE set’s multi-coloured bar — the per-rep colour segments for a ' +
+          'single set (done / active-with-pulse / todo). Colours are the real titan ramp pins. ' +
+          'Used-by ↑ [SetStrip](?path=/docs/workout-setstrip--docs).',
+      },
+    },
+  },
+  argTypes: {
+    height: { control: { type: 'range', min: 2, max: 16, step: 1 } },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 180, flexDirection: 'row', padding: 16, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SetBar>
+
+const decay = (n: number, start: number, span = 0.4): number[] =>
+  Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
+
+export const Done: Story = {
+  args: { height: 8, set: { status: 'done', velocities: decay(8, 0.9) } as SetStripSet },
+}
+
+export const Active: Story = {
+  args: {
+    height: 8,
+    set: { status: 'active', velocities: decay(5, 0.62), planned: 10 } as SetStripSet,
+  },
+  parameters: {
+    docs: { description: { story: 'Performed reps pulse; the planned remainder is greyed.' } },
+  },
+}
+
+export const Todo: Story = {
+  args: { height: 8, set: { status: 'todo', planned: 10 } as SetStripSet },
+}
+
+export const Range: Story = {
+  args: {
+    height: 8,
+    set: { status: 'range', floor: 15, max: 20, doneVels: decay(17, 0.85) } as SetStripSet,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Variable rep-range (e.g. 15–20): range-max segments. Done reps are velocity-' +
+          'coloured (even past the floor), the committed-todo zone is grey, and the variable-' +
+          'todo zone (floor→max) is the cyan variable/opportunity pin.',
+      },
+    },
+  },
+}
+
+export const Drop: Story = {
+  args: {
+    height: 8,
+    set: { status: 'drop', subloads: [decay(10, 0.85), decay(8, 0.7), decay(6, 0.6)] } as SetStripSet,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'One set, no rest: sub-loads butted internally and split by 2px notches.',
+      },
+    },
+  },
+}
+
+export const Myo: Story = {
+  args: {
+    height: 8,
+    set: {
+      status: 'myo',
+      activation: decay(15, 0.75),
+      clusters: [decay(5, 0.6), decay(5, 0.55), decay(5, 0.5)],
+    } as SetStripSet,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Myo-rep / rest-pause (done): activation chunk + mini-clusters split by 3px gaps.',
+      },
+    },
+  },
+}
+
+export const MyoUpcoming: Story = {
+  args: {
+    height: 8,
+    set: { status: 'myo-upcoming', activationLen: 15 } as SetStripSet,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Planned myo, length unknown: grey activation + a fading cyan "clusters-to-failure" ' +
+          'trail whose right edge is left open — "more coming, count unknown".',
+      },
+    },
+  },
+}