@titan-design/react-ui 0.2.7 → 0.3.0

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

@@ -100,6 +100,30 @@ describe('ExerciseCard', () => {
       expect(headers).toHaveTextContent('RPE')
     })
 
+    it('shows the KG weight header when the unit is kg', () => {
+      render(
+        <ExerciseCard
+          {...expandedProps}
+          summary={{ sets: 3, reps: 8, weight: 84, unit: 'kg' }}
+        />,
+      )
+      const headers = screen.getByTestId('exercise-card-column-headers')
+      expect(headers).toHaveTextContent('KG')
+      expect(headers).not.toHaveTextContent('LBS')
+    })
+
+    it('derives the weight header from the sets unit when summary is absent', () => {
+      render(
+        <ExerciseCard
+          name="Squat"
+          state="expanded"
+          onToggle={vi.fn()}
+          sets={[{ mode: 'completed', setNumber: 1, reps: 8, weight: 60, unit: 'kg' }]}
+        />,
+      )
+      expect(screen.getByTestId('exercise-card-column-headers')).toHaveTextContent('KG')
+    })
+
     it('renders SetRow components', () => {
       render(<ExerciseCard {...expandedProps} />)
       const setRows = screen.getAllByTestId('set-row')

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

@@ -1,13 +1,13 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
 import { View, Text, Pressable } from 'react-native'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 import { VelocityStrip } from './VelocityStrip'
 import { PlaceholderStrip } from './PlaceholderStrip'
 import { WeightBadge } from './WeightBadge'
 import { PrBadge } from './PrBadge'
 import { TempoDisplay } from './TempoDisplay'
 import { SetRow, type SetRowProps } from './SetRow'
+import { roundWeight } from '../../../utils/workout-format'
 
 export type ExerciseCardState = 'collapsed' | 'expanded' | 'upcoming'
 
@@ -35,13 +35,24 @@ export interface ExerciseCardProps {
 }
 
 const COLORS = {
-  textPrimary: '#F3F4F6',
-  textSecondary: '#9CA3AF',
-  textTertiary: '#6B7280',
+  // Theme-aware tokens: text foregrounds and this card's own surfaces/borders
+  // must flip together so text stays readable in both light and dark. The
+  // expanded/pressed surfaces are self-owned here (not from a themed Card), so
+  // hardcoding dark values would leave dark-on-dark once the text flips.
+  // react-native-web passes the CSS var through to the inline style.
+  textPrimary: 'var(--color-text-primary)',
+  textSecondary: 'var(--color-text-secondary)',
+  textTertiary: 'var(--color-text-tertiary)',
   brandPrimary: '#FF7900',
+  surfaceRaised: 'var(--color-surface-raised)',
+  surfaceElevated: 'var(--color-surface-elevated)',
+  borderDefault: 'var(--color-border-default)',
 }
 
-const COLUMN_HEADERS = ['SET', 'PREV', 'REPS', 'LBS', 'RPE'] as const
+/** Column headers; the weight column reflects the card's unit (LBS / KG). */
+function buildColumnHeaders(unit: 'lbs' | 'kg'): string[] {
+  return ['SET', 'PREV', 'REPS', unit.toUpperCase(), 'RPE']
+}
 
 function getSupersetBorderRadius(
   position: ExerciseCardProps['supersetPosition'],
@@ -89,7 +100,7 @@ function getSupersetMargin(
 
 function formatSummary(summary: ExerciseCardProps['summary']): string {
   if (!summary) return ''
-  return `${summary.sets}\u00D7${summary.reps} @ ${summary.weight} ${summary.unit}`
+  return `${summary.sets}\u00D7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`
 }
 
 function formatAccessibilityLabel(
@@ -132,9 +143,7 @@ function CollapsedCard({
           padding: 12,
           paddingHorizontal: 14,
           cursor: 'pointer',
-          backgroundColor: pressed
-            ? WORKOUT_TOKENS.surface.raised
-            : 'transparent',
+          backgroundColor: pressed ? COLORS.surfaceRaised : 'transparent',
           ...borderRadius,
           ...supersetMargin,
         }}
@@ -170,7 +179,7 @@ function CollapsedCard({
           )}
           {e1rm && (
             <WeightBadge
-              value={e1rm.value}
+              value={roundWeight(e1rm.value)}
               unit={e1rm.unit}
               size="sm"
               showIcon={false}
@@ -223,13 +232,17 @@ function ExpandedCard({
 }: ExerciseCardProps) {
   const borderRadius = getSupersetBorderRadius(supersetPosition)
   const supersetMargin = getSupersetMargin(supersetPosition)
+  // Summary is the card-level authority for the weight column; fall back to the
+  // first set's unit, then lbs. (Mixed per-set units keep the card-level label.)
+  const unit = summary?.unit ?? sets?.[0]?.unit ?? 'lbs'
+  const columnHeaders = buildColumnHeaders(unit)
 
   return (
     <View
       style={{
-        backgroundColor: WORKOUT_TOKENS.surface.elevated,
+        backgroundColor: COLORS.surfaceElevated,
         borderWidth: 1,
-        borderColor: WORKOUT_TOKENS.border.default,
+        borderColor: COLORS.borderDefault,
         ...borderRadius,
         ...supersetMargin,
       }}
@@ -249,7 +262,7 @@ function ExpandedCard({
             paddingHorizontal: 14,
             paddingBottom: 10,
             borderBottomWidth: 1,
-            borderBottomColor: WORKOUT_TOKENS.border.default,
+            borderBottomColor: COLORS.borderDefault,
           }}
         >
           <Text
@@ -279,7 +292,7 @@ function ExpandedCard({
           )}
           {e1rm && (
             <WeightBadge
-              value={e1rm.value}
+              value={roundWeight(e1rm.value)}
               unit={e1rm.unit}
               size="sm"
               showIcon={false}
@@ -309,7 +322,7 @@ function ExpandedCard({
         }}
         testID="exercise-card-column-headers"
       >
-        {COLUMN_HEADERS.map((header, i) => {
+        {columnHeaders.map((header, i) => {
           const widths = [36, undefined, 44, 56, 36]
           const width = widths[i]
           const isFlex = width === undefined

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

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+  ExerciseDetailPage,
+  type ExerciseDetailEntry,
+  type ExerciseTrend,
+  type ExerciseVbt,
+} from './ExerciseDetailPage'
+import type { MesoStatusCardProps } from './MesoStatusCard'
+import type { SetRowProps } from './SetRow'
+
+const meso: MesoStatusCardProps = {
+  mesoName: 'Hypertrophy Block',
+  mesoSubtitle: 'Week 6 of 8 · Push/Pull/Legs',
+  statusBadge: { label: 'On Track', variant: 'success' },
+  metrics: [
+    { label: 'Prescribed', value: '4×8 @ RPE 8' },
+    { label: 'Actual', value: '4×8 @ 195 lbs' },
+    { label: 'Best e1RM', value: '248 lbs' },
+    { label: 'Sessions', value: '11' },
+  ],
+  gauges: [
+    { label: 'Intensity', level: 0.72, sublabel: 'Actual' },
+    { label: 'Volume', level: 0.6, sublabel: 'Weekly' },
+  ],
+  coaching: {
+    text: 'Bar speed is holding — add 5 lbs next session before the deload.',
+    highlights: ['add 5 lbs'],
+  },
+  nextTarget: { icon: '🎯', text: '200 lbs × 8 @ RPE 8' },
+}
+
+function historySets(weight: number, topRpe: number): SetRowProps[] {
+  return [1, 2, 3, 4].map((setNumber) => ({
+    mode: 'history' as const,
+    setNumber,
+    previous: { reps: 8, weight: weight - 5 },
+    reps: 8,
+    weight,
+    rpe: topRpe - (4 - setNumber) * 0.5,
+    unit: 'lbs' as const,
+  }))
+}
+
+const progression: ExerciseDetailEntry[] = [
+  {
+    id: 'w1',
+    title: 'Week 1',
+    summary: { sets: 4, reps: 8, weight: 175, unit: 'lbs' },
+    e1rm: { value: 222, unit: 'lbs' },
+    tempo: [3, 1, 1, 0],
+    sets: historySets(175, 7.5),
+  },
+  {
+    id: 'w2',
+    title: 'Week 2',
+    summary: { sets: 4, reps: 8, weight: 180, unit: 'lbs' },
+    e1rm: { value: 228, unit: 'lbs' },
+    tempo: [3, 1, 1, 0],
+    sets: historySets(180, 8),
+  },
+  {
+    id: 'w3',
+    title: 'Week 3',
+    summary: { sets: 4, reps: 8, weight: 185, unit: 'lbs' },
+    e1rm: { value: 235, unit: 'lbs' },
+    tempo: [3, 1, 1, 0],
+    sets: historySets(185, 8.5),
+  },
+  {
+    id: 'w4',
+    title: 'Week 4 · Deload',
+    summary: { sets: 3, reps: 6, weight: 165, unit: 'lbs' },
+    e1rm: { value: 205, unit: 'lbs' },
+    sets: historySets(165, 6.5).slice(0, 3),
+  },
+  {
+    id: 'w5',
+    title: 'Week 5',
+    summary: { sets: 4, reps: 8, weight: 190, unit: 'lbs' },
+    e1rm: { value: 241, unit: 'lbs' },
+    tempo: [3, 1, 1, 0],
+    sets: historySets(190, 8.5),
+  },
+  {
+    id: 'w6',
+    title: 'Week 6',
+    summary: { sets: 4, reps: 8, weight: 195, unit: 'lbs' },
+    e1rm: { value: 248, unit: 'lbs' },
+    isPR: true,
+    tempo: [3, 1, 1, 0],
+    sets: historySets(195, 9),
+  },
+]
+
+const history: ExerciseDetailEntry[] = [
+  {
+    id: 's6',
+    title: 'Mon, Jun 16',
+    summary: { sets: 4, reps: 8, weight: 195, unit: 'lbs' },
+    e1rm: { value: 248, unit: 'lbs' },
+    isPR: true,
+    tempo: [3, 1, 1, 0],
+    sets: historySets(195, 9),
+  },
+  {
+    id: 's5',
+    title: 'Mon, Jun 9',
+    summary: { sets: 4, reps: 8, weight: 190, unit: 'lbs' },
+    e1rm: { value: 241, unit: 'lbs' },
+    sets: historySets(190, 8.5),
+  },
+  {
+    id: 's4',
+    title: 'Mon, Jun 2 · Deload',
+    summary: { sets: 3, reps: 6, weight: 165, unit: 'lbs' },
+    e1rm: { value: 205, unit: 'lbs' },
+    sets: historySets(165, 6.5).slice(0, 3),
+  },
+  {
+    id: 's3',
+    title: 'Mon, May 26',
+    summary: { sets: 4, reps: 8, weight: 185, unit: 'lbs' },
+    e1rm: { value: 235, unit: 'lbs' },
+    sets: historySets(185, 8.5),
+  },
+  {
+    id: 's2',
+    title: 'Mon, May 19',
+    summary: { sets: 4, reps: 8, weight: 180, unit: 'lbs' },
+    e1rm: { value: 228, unit: 'lbs' },
+    sets: historySets(180, 8),
+  },
+  {
+    id: 's1',
+    title: 'Mon, May 12',
+    summary: { sets: 4, reps: 8, weight: 175, unit: 'lbs' },
+    e1rm: { value: 222, unit: 'lbs' },
+    sets: historySets(175, 7.5),
+  },
+]
+
+const trend: ExerciseTrend = {
+  data: [
+    { date: '2026-05-12', e1rm: 222 },
+    { date: '2026-05-19', e1rm: 228 },
+    { date: '2026-05-26', e1rm: 235 },
+    { date: '2026-06-02', e1rm: 231 },
+    { date: '2026-06-09', e1rm: 241 },
+    { date: '2026-06-16', e1rm: 248, isPR: true },
+  ],
+  projection: [
+    { date: '2026-06-16', e1rm: 248 },
+    { date: '2026-06-23', e1rm: 253 },
+    { date: '2026-06-30', e1rm: 258 },
+  ],
+  mesoBoundaries: [{ date: '2026-06-02', label: 'Deload' }],
+}
+
+const vbt: ExerciseVbt = {
+  band: [
+    { date: '2026-05-12', bandLow: 40, bandHigh: 70 },
+    { date: '2026-05-26', bandLow: 48, bandHigh: 78 },
+    { date: '2026-06-09', bandLow: 55, bandHigh: 86 },
+    { date: '2026-06-16', bandLow: 60, bandHigh: 92 },
+  ],
+  workouts: [
+    { date: '2026-05-12', load: 52, status: 'within' },
+    { date: '2026-05-26', load: 80, status: 'above' },
+    { date: '2026-06-09', load: 68, status: 'within' },
+    { date: '2026-06-16', load: 58, status: 'below' },
+  ],
+  projection: {
+    withTraining: [
+      { date: '2026-06-16', bandLow: 60, bandHigh: 92 },
+      { date: '2026-06-23', bandLow: 64, bandHigh: 98 },
+    ],
+    withRest: [
+      { date: '2026-06-16', bandLow: 60, bandHigh: 92 },
+      { date: '2026-06-23', bandLow: 54, bandHigh: 84 },
+    ],
+  },
+  sets: [
+    { label: 'Set 1', velocities: [0.72, 0.7, 0.68, 0.66, 0.63, 0.6, 0.57, 0.54] },
+    { label: 'Set 2', velocities: [0.7, 0.67, 0.64, 0.61, 0.58, 0.54, 0.5, 0.46] },
+    { label: 'Set 3', velocities: [0.68, 0.64, 0.6, 0.56, 0.52, 0.47, 0.42, 0.38] },
+    { label: 'Set 4', velocities: [0.65, 0.6, 0.55, 0.5, 0.44, 0.39, 0.34, 0.3] },
+  ],
+}
+
+const meta: Meta<typeof ExerciseDetailPage> = {
+  title: 'Custom/Workout/ExerciseDetailPage',
+  component: ExerciseDetailPage,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: {
+    exercise: {
+      name: 'Barbell Bench Press',
+      subtitle: 'Chest · Barbell',
+      unit: 'lbs',
+      currentE1rm: 248,
+    },
+    meso,
+    trend,
+    progression,
+    history,
+    vbt,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ExerciseDetailPage>
+
+export const Default: Story = {}
+
+export const NoVbtData: Story = {
+  args: {
+    exercise: {
+      name: 'Goblet Squat',
+      subtitle: 'Quads · Dumbbell',
+      unit: 'lbs',
+      currentE1rm: 132,
+    },
+    vbt: { band: [], workouts: [], sets: [] },
+  },
+}

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

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  ExerciseDetailPage,
+  deriveExerciseStats,
+  toExerciseCardProps,
+  summarizeVbt,
+  type ExerciseDetailEntry,
+  type ExerciseDetailPageProps,
+} from './ExerciseDetailPage'
+
+const entry = (id: string, weight: number, e1rm: number, isPR = false): ExerciseDetailEntry => ({
+  id,
+  title: `Session ${id}`,
+  summary: { sets: 3, reps: 8, weight, unit: 'lbs' },
+  e1rm: { value: e1rm, unit: 'lbs' },
+  isPR,
+  sets: [
+    { mode: 'history', setNumber: 1, reps: 8, weight, rpe: 8, unit: 'lbs' },
+    { mode: 'history', setNumber: 2, reps: 8, weight, rpe: 8.5, unit: 'lbs' },
+  ],
+})
+
+const history: ExerciseDetailEntry[] = [
+  entry('a', 195, 248, true),
+  entry('b', 185, 235),
+  entry('c', 175, 222),
+]
+
+const baseProps: ExerciseDetailPageProps = {
+  exercise: { name: 'Bench Press', subtitle: 'Chest · Barbell', unit: 'lbs', currentE1rm: 248 },
+  meso: {
+    mesoName: 'Hypertrophy',
+    mesoSubtitle: 'Week 6 of 8',
+    statusBadge: { label: 'On Track', variant: 'success' },
+    metrics: [{ label: 'Actual', value: '4×8' }],
+    gauges: [{ label: 'Intensity', level: 0.7 }],
+  },
+  trend: {
+    data: [
+      { date: '2026-05-12', e1rm: 222 },
+      { date: '2026-06-16', e1rm: 248, isPR: true },
+    ],
+  },
+  progression: [entry('w1', 175, 222), entry('w2', 195, 248, true)],
+  history,
+  vbt: {
+    band: [{ date: '2026-05-12', bandLow: 40, bandHigh: 70 }],
+    workouts: [{ date: '2026-05-12', load: 52, status: 'within' }],
+    sets: [
+      { label: 'Set 1', velocities: [0.7, 0.6, 0.5] },
+      { label: 'Set 2', velocities: [0.68, 0.5, 0.34] },
+    ],
+  },
+}
+
+describe('deriveExerciseStats', () => {
+  it('counts sessions, tracks the best e1RM, and tallies PRs', () => {
+    expect(deriveExerciseStats(history)).toEqual({ sessions: 3, bestE1rm: 248, prCount: 1 })
+  })
+
+  it('returns a null best e1RM for an empty history', () => {
+    expect(deriveExerciseStats([])).toEqual({ sessions: 0, bestE1rm: null, prCount: 0 })
+  })
+})
+
+describe('toExerciseCardProps', () => {
+  it('collapses without sets and expands with them', () => {
+    const collapsed = toExerciseCardProps(history[0], false, () => {})
+    expect(collapsed.state).toBe('collapsed')
+    expect(collapsed.sets).toBeUndefined()
+
+    const expanded = toExerciseCardProps(history[0], true, () => {})
+    expect(expanded.state).toBe('expanded')
+    expect(expanded.sets).toHaveLength(2)
+    expect(expanded.name).toBe('Session a')
+  })
+})
+
+describe('summarizeVbt', () => {
+  it('averages every rep and reports the worst within-set loss', () => {
+    const summary = summarizeVbt([
+      { label: 'Set 1', velocities: [1, 0.5] },
+      { label: 'Set 2', velocities: [1, 0.25] },
+    ])
+    expect(summary.meanVelocity).toBeCloseTo(0.6875)
+    expect(summary.velocityLoss).toBe(75)
+  })
+
+  it('is zeroed for no sets', () => {
+    expect(summarizeVbt([])).toEqual({ meanVelocity: 0, velocityLoss: 0 })
+  })
+})
+
+describe('ExerciseDetailPage', () => {
+  it('renders the header and opens on the Progress tab', () => {
+    render(<ExerciseDetailPage {...baseProps} />)
+    expect(screen.getByTestId('exercise-detail-page')).toBeInTheDocument()
+    expect(screen.getByTestId('exercise-detail-page-title')).toHaveTextContent('Bench Press')
+    expect(screen.getByTestId('exercise-detail-page-panel-progress')).toBeInTheDocument()
+    expect(screen.getByTestId('meso-status-card')).toBeInTheDocument()
+    expect(screen.getByTestId('exercise-detail-page-stat-sessions')).toHaveTextContent('3')
+  })
+
+  it('switches tabs to reveal history and advanced panels', () => {
+    render(<ExerciseDetailPage {...baseProps} />)
+
+    fireEvent.click(screen.getByTestId('exercise-detail-page-tab-history'))
+    expect(screen.getByTestId('exercise-detail-page-panel-history')).toBeInTheDocument()
+    expect(screen.queryByTestId('exercise-detail-page-panel-progress')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('exercise-detail-page-tab-advanced'))
+    expect(screen.getByTestId('exercise-detail-page-panel-advanced')).toBeInTheDocument()
+    expect(screen.getByTestId('exercise-detail-page-vbt-summary')).toBeInTheDocument()
+    expect(screen.getAllByTestId('exercise-detail-page-vbt-set')).toHaveLength(2)
+  })
+
+  it('inline-expands a progression entry to reveal its sets', () => {
+    render(<ExerciseDetailPage {...baseProps} />)
+    expect(screen.queryByTestId('exercise-card-sets')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getAllByTestId('exercise-card')[0])
+    expect(screen.getByTestId('exercise-card-sets')).toBeInTheDocument()
+
+    fireEvent.click(screen.getAllByTestId('exercise-card-header')[0])
+    expect(screen.queryByTestId('exercise-card-sets')).not.toBeInTheDocument()
+  })
+})