@titan-design/react-ui 0.6.0 → 0.8.0

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

@@ -5,7 +5,7 @@ import {
   countCompletedSets,
   deriveWorkoutProgress,
   findActiveExercise,
-  statusToCardState,
+  isUpcomingExercise,
   groupExercises,
   type ActiveWorkoutExercise,
   type ActiveWorkoutPageProps,
@@ -29,8 +29,16 @@ const exercises: ActiveWorkoutExercise[] = [
     totalPlannedSets: 4,
     setVelocities: [[0.72], [0.68]],
     sets: [
-      { mode: 'completed', setNumber: 1, reps: 8, weight: 195, rpe: 8, unit: 'lbs' },
-      { mode: 'active', setNumber: 3, reps: null, weight: null, unit: 'lbs', isNextSet: true },
+      {
+        state: 'done',
+        setNumber: 1,
+        unit: 'lbs',
+        reps: 8,
+        weight: 195,
+        rpe: 8,
+        velocities: [0.72],
+      },
+      { state: 'todo', setNumber: 3, unit: 'lbs', target: { reps: 8, weight: 195 } },
     ],
   },
   {
@@ -107,16 +115,11 @@ describe('findActiveExercise', () => {
   })
 })
 
-describe('statusToCardState', () => {
-  it('keeps upcoming exercises upcoming regardless of focus', () => {
-    expect(statusToCardState('upcoming', true)).toBe('upcoming')
-    expect(statusToCardState('upcoming', false)).toBe('upcoming')
-  })
-
-  it('expands only the focused active/completed exercise', () => {
-    expect(statusToCardState('active', true)).toBe('expanded')
-    expect(statusToCardState('active', false)).toBe('collapsed')
-    expect(statusToCardState('completed', true)).toBe('expanded')
+describe('isUpcomingExercise', () => {
+  it('is true only for upcoming exercises', () => {
+    expect(isUpcomingExercise('upcoming')).toBe(true)
+    expect(isUpcomingExercise('active')).toBe(false)
+    expect(isUpcomingExercise('completed')).toBe(false)
   })
 })
 

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

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useMemo, useState } from 'react'
 import { View, Text, type ViewProps } from 'react-native'
-import { ExerciseCard, type ExerciseCardProps, type ExerciseCardState } from './ExerciseCard'
+import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
 import { InputBar } from './InputBar'
 import { RestTimer } from './RestTimer'
 import { SupersetWrapper } from './SupersetWrapper'
@@ -32,8 +32,6 @@ export interface ActiveWorkoutExercise {
   totalPlannedSets: number
   /** Collapsed summary (sets × reps @ weight) for a completed exercise. */
   summary?: ExerciseCardProps['summary']
-  /** Estimated one-rep max badge. */
-  e1rm?: ExerciseCardProps['e1rm']
   /** Flags a personal-record exercise. */
   isPR?: boolean
   /** Prescribed tempo, revealed when expanded. */
@@ -148,13 +146,9 @@ export function findActiveExercise(
   return exercises.find((exercise) => exercise.status === 'active') ?? null
 }
 
-/** Map an exercise's status + focus onto an `ExerciseCard` visual state (pure). */
-export function statusToCardState(
-  status: ActiveExerciseStatus,
-  focused: boolean
-): ExerciseCardState {
-  if (status === 'upcoming') return 'upcoming'
-  return focused ? 'expanded' : 'collapsed'
+/** Whether an exercise renders as the dimmed, not-yet-reached representation (pure). */
+export function isUpcomingExercise(status: ActiveExerciseStatus): boolean {
+  return status === 'upcoming'
 }
 
 /** Project an exercise onto ExerciseCard props, wiring zoom focus (pure). */
@@ -165,18 +159,18 @@ export function toActiveCardProps(
   supersetPosition: ExerciseCardProps['supersetPosition'] = null,
   supersetColor?: string
 ): ExerciseCardProps {
-  const state = statusToCardState(exercise.status, focused)
+  const upcoming = isUpcomingExercise(exercise.status)
   return {
     name: exercise.name,
-    state,
-    onToggle,
+    upcoming,
+    expanded: focused,
+    onExpandedChange: onToggle,
     summary: exercise.summary,
-    e1rm: exercise.e1rm,
     isPR: exercise.isPR,
     tempo: exercise.tempo,
     setVelocities: exercise.setVelocities,
     totalPlannedSets: exercise.totalPlannedSets,
-    sets: state === 'expanded' ? exercise.sets : undefined,
+    sets: focused ? exercise.sets : undefined,
     prescription: exercise.prescription,
     previousBest: exercise.previousBest,
     supersetPosition,

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

@@ -4,7 +4,7 @@ import { DumbbellIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
 
 const meta: Meta<typeof BaseBadge> = {
-  title: 'Custom/Workout/BaseBadge',
+  title: 'Components/Atoms/BaseBadge',
   component: BaseBadge,
   tags: ['autodocs'],
   argTypes: {

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

@@ -51,7 +51,7 @@ const backData: BodyMapData[] = [
 ]
 
 const meta: Meta<typeof BodyMap> = {
-  title: 'Custom/Workout/BodyMap',
+  title: 'Workout/DataViz/BodyMap',
   component: BodyMap,
   tags: ['autodocs'],
   argTypes: {

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

@@ -21,7 +21,7 @@ const upcoming: UpcomingExercise[] = [
 ]
 
 const meta: Meta<typeof BodyMapDetailPanel> = {
-  title: 'Custom/Workout/BodyMapDetailPanel',
+  title: 'Workout/DataViz/BodyMapDetailPanel',
   component: BodyMapDetailPanel,
   tags: ['autodocs'],
   decorators: [

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

@@ -39,7 +39,7 @@ const projection: CapacityBandProjection = {
 }
 
 const meta: Meta<typeof CapacityBandChart> = {
-  title: 'Custom/Workout/CapacityBandChart',
+  title: 'Workout/DataViz/CapacityBandChart',
   component: CapacityBandChart,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { DeviationBar } from './DeviationBar'
 
 const meta: Meta<typeof DeviationBar> = {
-  title: 'Custom/Workout/DeviationBar',
+  title: 'Workout/DataViz/DeviationBar',
   component: DeviationBar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,14 +4,31 @@ import { ExerciseCard } from './ExerciseCard'
 import type { SetRowProps } from './SetRow'
 
 const meta: Meta<typeof ExerciseCard> = {
-  title: 'Custom/Workout/ExerciseCard',
+  title: 'Workout/ExerciseCard',
   component: ExerciseCard,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Organism** (data-contract card). Three representations: `upcoming` (a dimmed, ' +
+          'not-yet-reached row), collapsed (name + summary + per-set velocity strips), and expanded ' +
+          '— the unified card whose persistent header is the real ' +
+          '[ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs) over a SET · REPS · ' +
+          'LBS · RPE body of [SetRow](?path=/docs/workout-setrow--docs)s (compact spotlight on the ' +
+          'live set). Expand is controlled (`expanded` + `onExpandedChange`) or uncontrolled ' +
+          '(`defaultExpanded`); `upcoming` overrides expand.',
+      },
+    },
+  },
   argTypes: {
-    state: {
+    upcoming: { control: 'boolean', description: 'Dimmed, not-yet-reached representation' },
+    expanded: { control: 'boolean', description: 'Controlled expand state' },
+    defaultExpanded: { control: 'boolean', description: 'Uncontrolled initial expand state' },
+    indicator: {
       control: 'select',
-      options: ['collapsed', 'expanded', 'upcoming'],
-      description: 'Card display state',
+      options: [undefined, 'pr', 'issue', 'info'],
+      description: 'Chip in the expanded header title line',
     },
   },
   decorators: [
@@ -26,76 +43,60 @@ const meta: Meta<typeof ExerciseCard> = {
 export default meta
 type Story = StoryObj<typeof ExerciseCard>
 
+// Done · done · LIVE · todo — the unified body's full lifecycle.
 const sampleSets: SetRowProps[] = [
   {
-    mode: 'completed',
+    state: 'done',
     setNumber: 1,
+    unit: 'lbs',
     reps: 8,
     weight: 135,
-    unit: 'lbs',
     rpe: 7,
-    previous: { reps: 8, weight: 130 },
     velocities: [1.1, 0.95, 0.82, 0.68, 0.55, 0.48, 0.42, 0.38],
   },
   {
-    mode: 'completed',
+    state: 'done',
     setNumber: 2,
+    unit: 'lbs',
     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],
+    velocities: [0.95, 0.88, 0.78, 0.65, 0.52, 0.45, 0.4, 0.35],
   },
   {
-    mode: 'active',
+    state: 'live',
     setNumber: 3,
-    reps: null,
-    weight: null,
     unit: 'lbs',
-    isNextSet: true,
-    targets: { reps: 8, weight: 135 },
-    previous: { reps: 8, weight: 135 },
-  },
-  {
-    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: 4,
+    weight: 135,
+    velocities: [0.92, 0.86, 0.8, 0.74],
   },
+  { state: 'todo', setNumber: 4, unit: 'lbs', target: { reps: 8, weight: 135 } },
 ]
 
 export const CollapsedWithVelocity: Story = {
   args: {
     name: 'Bench Press',
-    state: 'collapsed',
-    onToggle: () => {},
     summary: { sets: 4, reps: 8, weight: 135, unit: 'lbs' },
     setVelocities: [
       [1.1, 0.95, 0.82, 0.68, 0.55, 0.48, 0.42, 0.38],
-      [0.95, 0.88, 0.78, 0.65, 0.52, 0.45, 0.40, 0.35],
+      [0.95, 0.88, 0.78, 0.65, 0.52, 0.45, 0.4, 0.35],
     ],
     totalPlannedSets: 4,
-    e1rm: { value: 225, unit: 'lbs' },
   },
 }
 
 export const CollapsedWithPR: Story = {
   args: {
     name: 'Squat',
-    state: 'collapsed',
-    onToggle: () => {},
     summary: { sets: 3, reps: 5, weight: 275, unit: 'lbs' },
     setVelocities: [
       [0.65, 0.55, 0.45, 0.38, 0.32],
-      [0.60, 0.50, 0.42, 0.35, 0.30],
-      [0.58, 0.48, 0.40, 0.33, 0.28],
+      [0.6, 0.5, 0.42, 0.35, 0.3],
+      [0.58, 0.48, 0.4, 0.33, 0.28],
     ],
     totalPlannedSets: 3,
-    e1rm: { value: 365, unit: 'lbs' },
     isPR: true,
   },
 }
@@ -103,50 +104,39 @@ export const CollapsedWithPR: Story = {
 export const ExpandedWithSets: Story = {
   args: {
     name: 'Bench Press',
-    state: 'expanded',
-    onToggle: () => {},
+    defaultExpanded: true,
     summary: { sets: 4, reps: 8, weight: 135, unit: 'lbs' },
+    indicator: 'info',
     sets: sampleSets,
-    e1rm: { value: 225, unit: 'lbs' },
   },
 }
 
 export const ExpandedWithTempo: Story = {
   args: {
     name: 'Romanian Deadlift',
-    state: 'expanded',
-    onToggle: () => {},
+    defaultExpanded: true,
     summary: { sets: 3, reps: 10, weight: 185, unit: 'lbs' },
     tempo: [2, 1, 3, 0],
     sets: [
       {
-        mode: 'completed',
+        state: 'done',
         setNumber: 1,
+        unit: 'lbs',
         reps: 10,
         weight: 185,
-        unit: 'lbs',
         rpe: 7,
-        previous: { reps: 10, weight: 175 },
+        velocities: [0.9, 0.82, 0.74, 0.66],
       },
       {
-        mode: 'active',
+        state: 'live',
         setNumber: 2,
-        reps: null,
-        weight: null,
         unit: 'lbs',
-        isNextSet: true,
-        targets: { reps: 10, weight: 185 },
-        previous: { reps: 10, weight: 185 },
-      },
-      {
-        mode: 'active',
-        setNumber: 3,
-        reps: null,
-        weight: null,
-        unit: 'lbs',
-        targets: { reps: 10, weight: 185 },
-        previous: { reps: 10, weight: 185 },
+        target: { reps: 10, weight: 185 },
+        reps: 3,
+        weight: 185,
+        velocities: [0.88, 0.8, 0.72],
       },
+      { state: 'todo', setNumber: 3, unit: 'lbs', target: { reps: 10, weight: 185 } },
     ],
   },
 }
@@ -154,18 +144,15 @@ export const ExpandedWithTempo: Story = {
 export const Upcoming: Story = {
   args: {
     name: 'Lat Pulldown',
-    state: 'upcoming',
-    onToggle: () => {},
-    prescription: '3\u00D78-12 @ RPE 8',
-    previousBest: '135 lbs \u00D7 10',
+    upcoming: true,
+    prescription: '3×8-12 @ RPE 8',
+    previousBest: '135 lbs × 10',
   },
 }
 
 export const SupersetFirst: Story = {
   args: {
     name: 'Bench Press',
-    state: 'collapsed',
-    onToggle: () => {},
     summary: { sets: 3, reps: 8, weight: 185, unit: 'lbs' },
     supersetPosition: 'first',
     setVelocities: [[1.0, 0.9, 0.8]],
@@ -176,8 +163,6 @@ export const SupersetFirst: Story = {
 export const SupersetLast: Story = {
   args: {
     name: 'Barbell Row',
-    state: 'collapsed',
-    onToggle: () => {},
     summary: { sets: 3, reps: 8, weight: 155, unit: 'lbs' },
     supersetPosition: 'last',
     setVelocities: [[0.9, 0.8, 0.7]],