@titan-design/react-ui 0.6.0 → 0.7.0

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

@@ -0,0 +1,123 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SetBar, velocityZoneColor, SET_STRIP_ZONES, SET_STRIP_VARIABLE_COLOR } from './SetBar'
+
+/** The slot wrapper (carrier of the leading-gap margin) is a fill segment's parent. */
+const slotOf = (fill: HTMLElement) => fill.parentElement as HTMLElement
+
+describe('SetBar', () => {
+  describe('velocityZoneColor', () => {
+    it('maps velocity ratios to their zone pins', () => {
+      expect(velocityZoneColor(0.4)).toBe(SET_STRIP_ZONES.slow)
+      expect(velocityZoneColor(0.6)).toBe(SET_STRIP_ZONES.moderate)
+      expect(velocityZoneColor(0.85)).toBe(SET_STRIP_ZONES.fast)
+      expect(velocityZoneColor(1.2)).toBe(SET_STRIP_ZONES.fastest)
+    })
+  })
+
+  it('done: one colored fill segment per rep, no empties, no pulse', () => {
+    render(<SetBar set={{ status: 'done', velocities: [1, 0.8, 0.6, 0.4] }} />)
+    expect(screen.getAllByTestId('set-strip-fill')).toHaveLength(4)
+    expect(screen.queryByTestId('set-strip-empty')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('set-strip-pulse')).not.toBeInTheDocument()
+  })
+
+  it('active: performed reps pulse, the remainder is greyed', () => {
+    render(<SetBar set={{ status: 'active', velocities: [0.9, 0.7, 0.5], planned: 8 }} />)
+    expect(screen.getAllByTestId('set-strip-pulse')).toHaveLength(3)
+    expect(screen.getAllByTestId('set-strip-empty')).toHaveLength(5)
+  })
+
+  it('todo: a single grey bar, no fills or pulses', () => {
+    render(<SetBar set={{ status: 'todo', planned: 10 }} />)
+    expect(screen.getAllByTestId('set-strip-empty')).toHaveLength(1)
+    expect(screen.queryByTestId('set-strip-fill')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('set-strip-pulse')).not.toBeInTheDocument()
+  })
+
+  describe('range (variable rep-range)', () => {
+    it('renders range-max segments; committed-todo grey, variable-todo cyan', () => {
+      // floor 15, max 20, 12 done → 12 velocity fills · 3 grey (committed) · 5 cyan (variable)
+      render(<SetBar set={{ status: 'range', floor: 15, max: 20, doneVels: Array(12).fill(0.9) }} />)
+      expect(screen.getAllByTestId('set-strip-fill')).toHaveLength(12)
+      expect(screen.getAllByTestId('set-strip-empty')).toHaveLength(3)
+      expect(screen.getAllByTestId('set-strip-variable')).toHaveLength(5)
+    })
+
+    it('counts a done rep past the floor as a real velocity rep (not variable)', () => {
+      // 17 done into the variable zone → 17 velocity fills, 3 cyan, 0 grey
+      render(<SetBar set={{ status: 'range', floor: 15, max: 20, doneVels: Array(17).fill(0.8) }} />)
+      expect(screen.getAllByTestId('set-strip-fill')).toHaveLength(17)
+      expect(screen.getAllByTestId('set-strip-variable')).toHaveLength(3)
+      expect(screen.queryByTestId('set-strip-empty')).not.toBeInTheDocument()
+    })
+
+    it('uses the variable/opportunity cyan pin for the variable-todo zone', () => {
+      render(<SetBar set={{ status: 'range', floor: 3, max: 4, doneVels: [] }} />)
+      expect(SET_STRIP_VARIABLE_COLOR).toBe('#0B3149') // cyan 900
+      expect(screen.getByTestId('set-strip-variable')).toHaveStyle({
+        backgroundColor: SET_STRIP_VARIABLE_COLOR,
+      })
+    })
+  })
+
+  describe('drop set', () => {
+    it('renders one fill per rep across sub-loads, split by 2px notches', () => {
+      render(<SetBar set={{ status: 'drop', subloads: [[0.85, 0.8, 0.7], [0.7, 0.6]] }} />)
+      const fills = screen.getAllByTestId('set-strip-fill')
+      expect(fills).toHaveLength(5)
+      expect(slotOf(fills[0])).not.toHaveStyle({ marginLeft: '2px' }) // first sub-load butts the edge
+      expect(slotOf(fills[3])).toHaveStyle({ marginLeft: '2px' }) // second sub-load opens with a notch
+    })
+  })
+
+  describe('myo-rep / rest-pause (done)', () => {
+    it('renders activation + clusters, split by 3px cluster gaps', () => {
+      render(<SetBar set={{ status: 'myo', activation: [0.75, 0.7, 0.65], clusters: [[0.6, 0.55], [0.5, 0.45]] }} />)
+      const fills = screen.getAllByTestId('set-strip-fill')
+      expect(fills).toHaveLength(7)
+      expect(slotOf(fills[3])).toHaveStyle({ marginLeft: '3px' }) // first cluster
+      expect(slotOf(fills[5])).toHaveStyle({ marginLeft: '3px' }) // second cluster
+    })
+  })
+
+  describe('myo-upcoming (planned, length unknown)', () => {
+    it('renders a grey activation chunk + a fading cyan clusters-to-failure trail', () => {
+      render(<SetBar set={{ status: 'myo-upcoming', activationLen: 4, clusterCount: 2 }} />)
+      expect(screen.getAllByTestId('set-strip-empty')).toHaveLength(4) // grey activation
+      const trail = screen.getAllByTestId('set-strip-variable')
+      expect(trail).toHaveLength(10) // 2 clusters × 5
+    })
+
+    it('fades each expected cluster and opens the right edge with a cluster gap', () => {
+      render(<SetBar set={{ status: 'myo-upcoming', activationLen: 4, clusterCount: 2 }} />)
+      const trail = screen.getAllByTestId('set-strip-variable')
+      expect(trail[5]).toHaveStyle({ opacity: 0.6 }) // second cluster is recessive
+      expect(slotOf(trail[0])).toHaveStyle({ marginLeft: '3px' }) // trail opens after activation
+      expect(slotOf(trail[5])).toHaveStyle({ marginLeft: '3px' }) // each cluster is gapped
+    })
+
+    it('defaults to three expected clusters when clusterCount is omitted', () => {
+      render(<SetBar set={{ status: 'myo-upcoming', activationLen: 3 }} />)
+      expect(screen.getAllByTestId('set-strip-variable')).toHaveLength(15) // 3 × 5
+    })
+  })
+
+  it('defaults to an 8px height and honors the height prop', () => {
+    const { rerender } = render(<SetBar set={{ status: 'todo', planned: 3 }} />)
+    expect(screen.getByTestId('set-strip-set')).toHaveStyle({ height: '8px' })
+    rerender(<SetBar set={{ status: 'todo', planned: 3 }} height={4} />)
+    expect(screen.getByTestId('set-strip-set')).toHaveStyle({ height: '4px' })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <SetBar set={{ status: 'active', velocities: [0.9, 0.7], planned: 4 }} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,171 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { primitiveColors, primitiveRamps } from '../../../theme/tokens/primitives'
+import { SegmentedBar, type SegmentedBarSegment } from './SegmentedBar'
+
+/**
+ * The four canonical rep-intensity zone pins (real titan ramp pins). A rep's mean
+ * velocity ratio maps to one of these; butted together they form a set's bar.
+ */
+export const SET_STRIP_ZONES = {
+  slow: primitiveRamps.red[600],
+  moderate: primitiveRamps.orange[400],
+  fast: primitiveRamps.amber[300],
+  fastest: primitiveRamps.green[300],
+} as const
+
+/** Grey fill for planned-but-unperformed reps / upcoming sets (charcoal placeholder). */
+const TODO_COLOR = primitiveColors.charcoal[300]
+
+/**
+ * The learned "variable / unknown / opportunity" semantic (cyan-900, a real ramp
+ * pin): an unperformed rep in a range's variable zone, and the fading trail of a
+ * myo set whose cluster count isn't yet known.
+ */
+export const SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900]
+
+// Gap hierarchy — the chunk-size *pattern* carries set-type identity:
+// butted reps (0) < NOTCH (drop sub-load) < CLUSTER (myo rest-pause) < SET_GAP (5, between sets).
+/** Drop-set sub-load divider — a thin notch, narrower than a myo cluster gap. */
+const NOTCH_GAP = 2
+/** Myo rest-pause divider between the activation chunk and each mini-cluster. */
+const CLUSTER_GAP = 3
+
+/** myo-upcoming trail defaults: N fading expected clusters, each this many reps. */
+const MYO_UPCOMING_CLUSTERS = 3
+const MYO_UPCOMING_CLUSTER_LEN = 5
+/** Per-cluster opacity decay along the "count unknown" trail (1 · 0.6 · 0.36 · …). */
+const MYO_UPCOMING_FADE = 0.6
+
+/**
+ * Active-set pulse range per zone: each segment eases between its pin's adjacent
+ * lighter/darker ramp steps, keeping the intensity reading while signalling "live".
+ */
+const PULSE_RANGE: Record<string, [string, string]> = {
+  [SET_STRIP_ZONES.slow]: [primitiveRamps.red[500], primitiveRamps.red[700]],
+  [SET_STRIP_ZONES.moderate]: [primitiveRamps.orange[300], primitiveRamps.orange[500]],
+  [SET_STRIP_ZONES.fast]: [primitiveRamps.amber[200], primitiveRamps.amber[400]],
+  [SET_STRIP_ZONES.fastest]: [primitiveRamps.green[200], primitiveRamps.green[400]],
+}
+
+/** Map a per-rep mean-velocity ratio to its zone pin (fastest = green, slowest = red). */
+export function velocityZoneColor(v: number): string {
+  if (v < 0.5) return SET_STRIP_ZONES.slow
+  if (v < 0.75) return SET_STRIP_ZONES.moderate
+  if (v < 1.0) return SET_STRIP_ZONES.fast
+  return SET_STRIP_ZONES.fastest
+}
+
+/**
+ * One set's data. Flat variants: `done` = every rep performed; `active` = reps-so-far
+ * performed against a planned count (remainder greyed, performed reps pulse); `todo` =
+ * a planned but unstarted set (solid grey bar). Set-type variants:
+ * - `range` — variable rep-range (e.g. 15–20): `max` segments; committed zone
+ *   `0..floor` (done = velocity, todo = grey), variable zone `floor..max` (done =
+ *   velocity, todo = the variable/opportunity cyan). `doneVels` may run past `floor`.
+ * - `drop` — one set, no rest: `subloads` butted internally, split by 2px notches.
+ * - `myo` — done rest-pause: `activation` chunk + `clusters`, split by 3px cluster gaps.
+ * - `myo-upcoming` — planned myo, length unknown: grey activation (`activationLen`) +
+ *   a fading cyan "clusters-to-failure" trail with the right edge left open.
+ */
+export type SetStripSet =
+  | { status: 'done'; velocities: number[] }
+  | { status: 'active'; velocities: number[]; planned: number }
+  | { status: 'todo'; planned: number }
+  | { status: 'range'; floor: number; max: number; doneVels: number[] }
+  | { status: 'drop'; subloads: number[][] }
+  | { status: 'myo'; activation: number[]; clusters: number[][] }
+  | { status: 'myo-upcoming'; activationLen: number; clusterCount?: number }
+
+/** Flatten velocity chunks into butted segments, carving `gap` before each chunk but the first. */
+function chunkedSegments(chunks: number[][], gap: number): SegmentedBarSegment[] {
+  return chunks.flatMap((vels, ci) =>
+    vels.map((v, ri) => ({
+      color: velocityZoneColor(v),
+      ...(ci > 0 && ri === 0 ? { leadingGap: gap } : {}),
+    }))
+  )
+}
+
+/** The variable rep-range's `max` segments: velocity where done, else grey (committed) / cyan (variable). */
+function rangeSegments(floor: number, max: number, doneVels: number[]): SegmentedBarSegment[] {
+  return Array.from({ length: max }, (_, i) => {
+    if (i < doneVels.length) return { color: velocityZoneColor(doneVels[i]) }
+    return { color: i < floor ? TODO_COLOR : SET_STRIP_VARIABLE_COLOR }
+  })
+}
+
+/** Grey activation chunk + a fading, right-open cyan trail of expected rest-pause clusters. */
+function myoUpcomingSegments(activationLen: number, clusterCount: number): SegmentedBarSegment[] {
+  const activation = Array.from({ length: activationLen }, () => ({ color: TODO_COLOR }))
+  const trail = Array.from({ length: clusterCount }, (_, ci) =>
+    Array.from({ length: MYO_UPCOMING_CLUSTER_LEN }, (_, ri) => ({
+      color: SET_STRIP_VARIABLE_COLOR,
+      opacity: MYO_UPCOMING_FADE ** ci,
+      ...(ri === 0 ? { leadingGap: CLUSTER_GAP } : {}),
+    }))
+  ).flat()
+  return [...activation, ...trail]
+}
+
+/** Map a set's performance state to the butted per-rep segments of its bar. */
+function setSegments(set: SetStripSet): SegmentedBarSegment[] {
+  if (set.status === 'todo') {
+    return [{ color: TODO_COLOR }]
+  }
+  if (set.status === 'done') {
+    return set.velocities.map((v) => ({ color: velocityZoneColor(v) }))
+  }
+  if (set.status === 'range') {
+    return rangeSegments(set.floor, set.max, set.doneVels)
+  }
+  if (set.status === 'drop') {
+    return chunkedSegments(set.subloads, NOTCH_GAP)
+  }
+  if (set.status === 'myo') {
+    return chunkedSegments([set.activation, ...set.clusters], CLUSTER_GAP)
+  }
+  if (set.status === 'myo-upcoming') {
+    return myoUpcomingSegments(set.activationLen, set.clusterCount ?? MYO_UPCOMING_CLUSTERS)
+  }
+  const performed = set.velocities.map((v) => {
+    const color = velocityZoneColor(v)
+    return { color, pulse: true, pulseColor: PULSE_RANGE[color] }
+  })
+  const remaining = Math.max(0, set.planned - set.velocities.length)
+  return [...performed, ...Array.from({ length: remaining }, () => ({ color: TODO_COLOR }))]
+}
+
+/** Preserve SetBar's per-segment test hooks over the generic SegmentedBar fills. */
+function setBarSegmentTestID(seg: SegmentedBarSegment): string {
+  if (seg.pulse) return 'set-strip-pulse'
+  if (seg.color === SET_STRIP_VARIABLE_COLOR) return 'set-strip-variable'
+  return seg.color === TODO_COLOR ? 'set-strip-empty' : 'set-strip-fill'
+}
+
+export interface SetBarProps {
+  /** One set's performance state (done / active / todo). */
+  set: SetStripSet
+  /** Bar height in px. Default 8. */
+  height?: number
+}
+
+/**
+ * ONE set's multi-coloured bar: the butted per-rep colour segments for a single
+ * set (`done` = velocity-coloured reps · `active` = performed reps pulsing + grey
+ * remainder · `todo` = a solid grey bar), composed over {@link SegmentedBar}.
+ * Fills its flex slot; {@link SetStrip} lays several side by side. Colours are the
+ * real titan ramp pins.
+ */
+export function SetBar({ set, height = 8 }: SetBarProps) {
+  return (
+    <SegmentedBar
+      segments={setSegments(set)}
+      height={height}
+      gap={0}
+      radius={0}
+      segmentTestID={setBarSegmentTestID}
+      style={{ flex: 1, minWidth: 0, borderRadius: 2, overflow: 'hidden' }}
+      testID="set-strip-set"
+    />
+  )
+}

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

@@ -1,25 +1,39 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { SetRow } from './SetRow'
+import { SetTableHeader } from './SetTableHeader'
 
 const meta: Meta<typeof SetRow> = {
-  title: 'Custom/Workout/SetRow',
+  title: 'Workout/SetRow',
   component: SetRow,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule** — one row of the unified expanded exercise table (SET · REPS · LBS · RPE ' +
+          'over a per-row velocity strip), as a lifecycle discriminated union on `state`: `done` ' +
+          '(logged), `live` (performing now — brightened, compact velocity-height spotlight), `todo` ' +
+          '(planned — muted grey stub). Done + upcoming share one muted treatment; only `live` is ' +
+          'brightened. No PREV column. Composed by ' +
+          '[ExerciseCard](?path=/docs/workout-exercisecard--docs) (expanded).',
+      },
+    },
+  },
   argTypes: {
-    mode: {
+    state: {
       control: 'select',
-      options: ['active', 'completed', 'history'],
-      description: 'Row display mode',
+      options: ['done', 'live', 'todo'],
+      description: 'Set lifecycle',
     },
     unit: {
       control: 'select',
       options: ['lbs', 'kg'],
       description: 'Weight unit',
     },
-    isNextSet: {
-      control: 'boolean',
-      description: 'Whether this is the next set to perform',
+    setType: {
+      control: 'text',
+      description: 'Optional set-type marker shown in the SET cell (e.g. "W", "DROP")',
     },
   },
 }
@@ -27,139 +41,75 @@ const meta: Meta<typeof SetRow> = {
 export default meta
 type Story = StoryObj<typeof SetRow>
 
-export const CompletedWithVelocity: Story = {
+export const Done: Story = {
   args: {
-    mode: 'completed',
+    state: 'done',
     setNumber: 1,
+    unit: 'lbs',
     reps: 8,
     weight: 135,
-    unit: 'lbs',
     rpe: 7.5,
-    previous: { reps: 8, weight: 130 },
     velocities: [1.1, 0.95, 0.82, 0.68, 0.55, 0.48, 0.42, 0.38],
   },
 }
 
-export const ActiveWithTargets: Story = {
-  args: {
-    mode: 'active',
-    setNumber: 3,
-    reps: null,
-    weight: null,
-    unit: 'lbs',
-    previous: { reps: 8, weight: 135 },
-    targets: { reps: 10, weight: 150 },
-  },
-}
-
-export const ActiveNextSet: Story = {
+export const Live: Story = {
   args: {
-    mode: 'active',
+    state: 'live',
     setNumber: 2,
-    reps: null,
-    weight: null,
     unit: 'lbs',
-    isNextSet: true,
-    targets: { reps: 8, weight: 135 },
-    previous: { reps: 8, weight: 130 },
+    target: { reps: 10, weight: 150 },
+    reps: 5,
+    weight: 150,
+    velocities: [0.95, 0.9, 0.86, 0.8, 0.72],
   },
 }
 
-export const HistorySet: Story = {
+export const Todo: Story = {
   args: {
-    mode: 'history',
-    setNumber: 1,
-    reps: 10,
-    weight: 185,
+    state: 'todo',
+    setNumber: 3,
     unit: 'lbs',
-    rpe: 8,
-    previous: { reps: 10, weight: 180 },
+    target: { reps: 10, weight: 150 },
   },
 }
 
 export const WithTypeBadge: Story = {
   args: {
-    mode: 'completed',
+    state: 'done',
     setNumber: 1,
+    unit: 'lbs',
     reps: 5,
     weight: 95,
-    unit: 'lbs',
     setType: 'W',
-    previous: null,
+    velocities: [1.05, 0.98, 0.9, 0.84, 0.78],
   },
 }
 
-export const WithPrBadges: Story = {
-  args: {
-    mode: 'completed',
-    setNumber: 3,
-    reps: 8,
-    weight: 225,
-    unit: 'lbs',
-    rpe: 9.5,
-    previous: { reps: 8, weight: 215 },
-    prBadges: [
-      { type: 'e1rm', label: 'PR e1RM' },
-      { type: 'weight', label: 'PR Weight' },
-    ],
-  },
-}
-
-export const WithRPE: Story = {
-  args: {
-    mode: 'completed',
-    setNumber: 4,
-    reps: 5,
-    weight: 275,
-    unit: 'lbs',
-    rpe: 10,
-    previous: { reps: 5, weight: 265 },
-  },
-}
-
-export const AllVariants: Story = {
+/** The lifecycle in context: header + done → live → todo, as the expanded card lays it out. */
+export const TableInContext: Story = {
   render: () => (
-    <View style={{ gap: 4, padding: 16, maxWidth: 400 }}>
+    <View style={{ padding: 16, maxWidth: 400 }}>
+      <SetTableHeader unit="lbs" showPrevious={false} />
       <SetRow
-        mode="completed"
+        state="done"
         setNumber={1}
+        unit="lbs"
         reps={8}
         weight={135}
-        unit="lbs"
-        rpe={7}
-        previous={{ reps: 8, weight: 130 }}
+        rpe={7.5}
         velocities={[1.1, 0.95, 0.82, 0.68, 0.55, 0.48, 0.42, 0.38]}
-        prBadges={[{ type: 'e1rm', label: 'PR e1RM' }]}
       />
       <SetRow
-        mode="completed"
+        state="live"
         setNumber={2}
-        reps={8}
-        weight={135}
-        unit="lbs"
-        rpe={8.5}
-        previous={{ reps: 8, weight: 135 }}
-        velocities={[0.95, 0.88, 0.78, 0.65, 0.52, 0.45, 0.40, 0.35]}
-      />
-      <SetRow
-        mode="active"
-        setNumber={3}
-        reps={null}
-        weight={null}
         unit="lbs"
-        isNextSet
-        targets={{ reps: 8, weight: 135 }}
-        previous={{ reps: 8, weight: 135 }}
-      />
-      <SetRow
-        mode="active"
-        setNumber={4}
-        reps={null}
-        weight={null}
-        unit="lbs"
-        targets={{ reps: 8, weight: 135 }}
-        previous={{ reps: 8, weight: 135 }}
+        target={{ reps: 8, weight: 135 }}
+        reps={5}
+        weight={135}
+        velocities={[0.95, 0.88, 0.78, 0.65, 0.52]}
       />
+      <SetRow state="todo" setNumber={3} unit="lbs" target={{ reps: 8, weight: 135 }} />
     </View>
   ),
 }