@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,442 @@
+// 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 { 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'
+
+export interface ExerciseCardProps {
+  name: string
+  state: ExerciseCardState
+  onToggle: () => void
+  onNavigateDetail?: () => void
+  summary?: {
+    sets: number
+    reps: number | string
+    weight: number
+    unit: 'lbs' | 'kg'
+  }
+  e1rm?: { value: number; unit: 'lbs' | 'kg' }
+  isPR?: boolean
+  setVelocities?: number[][]
+  totalPlannedSets?: number
+  sets?: SetRowProps[]
+  tempo?: [number, number, number, number]
+  prescription?: string
+  previousBest?: string
+  supersetPosition?: 'first' | 'last' | 'middle' | null
+  supersetColor?: string
+}
+
+const COLORS = {
+  // 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)',
+}
+
+/** 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'],
+): Record<string, number> {
+  switch (position) {
+    case 'first':
+      return {
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        borderBottomLeftRadius: 8,
+        borderBottomRightRadius: 8,
+      }
+    case 'last':
+      return {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        borderBottomLeftRadius: 12,
+        borderBottomRightRadius: 12,
+      }
+    case 'middle':
+      return {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        borderBottomLeftRadius: 8,
+        borderBottomRightRadius: 8,
+      }
+    default:
+      return {
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        borderBottomLeftRadius: 12,
+        borderBottomRightRadius: 12,
+      }
+  }
+}
+
+function getSupersetMargin(
+  position: ExerciseCardProps['supersetPosition'],
+): Record<string, number> {
+  if (position === 'first' || position === 'middle') {
+    return { marginBottom: 2 }
+  }
+  return {}
+}
+
+function formatSummary(summary: ExerciseCardProps['summary']): string {
+  if (!summary) return ''
+  return `${summary.sets}\u00D7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`
+}
+
+function formatAccessibilityLabel(
+  name: string,
+  summary: ExerciseCardProps['summary'],
+  prescription: ExerciseCardProps['prescription'],
+): string {
+  if (summary) return `${name}, ${formatSummary(summary)}`
+  if (prescription) return `${name}, ${prescription}`
+  return name
+}
+
+function CollapsedCard({
+  name,
+  onToggle,
+  summary,
+  e1rm,
+  isPR,
+  setVelocities,
+  totalPlannedSets,
+  supersetPosition,
+}: ExerciseCardProps) {
+  const [pressed, setPressed] = useState(false)
+  const completedSets = setVelocities?.length ?? 0
+  const remaining = Math.max(0, (totalPlannedSets ?? 0) - completedSets)
+  const borderRadius = getSupersetBorderRadius(supersetPosition)
+  const supersetMargin = getSupersetMargin(supersetPosition)
+
+  return (
+    <Pressable
+      onPress={onToggle}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      accessibilityRole="button"
+      accessibilityLabel={formatAccessibilityLabel(name, summary, undefined)}
+      testID="exercise-card"
+    >
+      <View
+        style={{
+          padding: 12,
+          paddingHorizontal: 14,
+          cursor: 'pointer',
+          backgroundColor: pressed ? COLORS.surfaceRaised : 'transparent',
+          ...borderRadius,
+          ...supersetMargin,
+        }}
+      >
+        <View
+          className="flex-row items-center"
+          testID="exercise-card-header"
+        >
+          <Text
+            style={{
+              fontSize: 14,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: '700',
+              color: COLORS.textPrimary,
+            }}
+            testID="exercise-card-name"
+          >
+            {name}
+          </Text>
+          <View className="flex-1" />
+          {summary && (
+            <Text
+              style={{
+                fontSize: 12,
+                fontFamily: 'Inter, sans-serif',
+                color: COLORS.textSecondary,
+                marginRight: 8,
+              }}
+              testID="exercise-card-summary"
+            >
+              {formatSummary(summary)}
+            </Text>
+          )}
+          {e1rm && (
+            <WeightBadge
+              value={roundWeight(e1rm.value)}
+              unit={e1rm.unit}
+              size="sm"
+              showIcon={false}
+              testID="exercise-card-e1rm"
+            />
+          )}
+          {isPR && (
+            <View style={{ marginLeft: 4 }}>
+              <PrBadge type="e1rm" compact animate={false} />
+            </View>
+          )}
+        </View>
+
+        {(completedSets > 0 || remaining > 0) && (
+          <View
+            className="flex-row"
+            style={{ marginTop: 6, gap: 4 }}
+            testID="exercise-card-strips"
+          >
+            {setVelocities?.map((velocities, i) => (
+              <VelocityStrip
+                key={i}
+                velocities={velocities}
+                variant="mini"
+                testID={`exercise-card-velocity-strip-${i}`}
+              />
+            ))}
+            {Array.from({ length: remaining }, (_, i) => (
+              <PlaceholderStrip
+                key={`placeholder-${i}`}
+                testID={`exercise-card-placeholder-${i}`}
+              />
+            ))}
+          </View>
+        )}
+      </View>
+    </Pressable>
+  )
+}
+
+function ExpandedCard({
+  name,
+  onToggle,
+  summary,
+  e1rm,
+  isPR,
+  sets,
+  tempo,
+  supersetPosition,
+}: 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: COLORS.surfaceElevated,
+        borderWidth: 1,
+        borderColor: COLORS.borderDefault,
+        ...borderRadius,
+        ...supersetMargin,
+      }}
+      testID="exercise-card"
+    >
+      <Pressable
+        onPress={onToggle}
+        accessibilityRole="button"
+        accessibilityLabel={formatAccessibilityLabel(name, summary, undefined)}
+        aria-expanded={true}
+        testID="exercise-card-header"
+      >
+        <View
+          className="flex-row items-center"
+          style={{
+            padding: 12,
+            paddingHorizontal: 14,
+            paddingBottom: 10,
+            borderBottomWidth: 1,
+            borderBottomColor: COLORS.borderDefault,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 14,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: '700',
+              color: COLORS.textPrimary,
+            }}
+            testID="exercise-card-name"
+          >
+            {name}
+          </Text>
+          <View className="flex-1" />
+          {summary && (
+            <Text
+              style={{
+                fontSize: 12,
+                fontFamily: 'Inter, sans-serif',
+                color: COLORS.textSecondary,
+                marginRight: 8,
+              }}
+              testID="exercise-card-summary"
+            >
+              {formatSummary(summary)}
+            </Text>
+          )}
+          {e1rm && (
+            <WeightBadge
+              value={roundWeight(e1rm.value)}
+              unit={e1rm.unit}
+              size="sm"
+              showIcon={false}
+              testID="exercise-card-e1rm"
+            />
+          )}
+          {isPR && (
+            <View style={{ marginLeft: 4 }}>
+              <PrBadge type="e1rm" compact animate={false} />
+            </View>
+          )}
+        </View>
+      </Pressable>
+
+      {tempo && (
+        <View style={{ marginTop: 8, paddingHorizontal: 14 }} testID="exercise-card-tempo">
+          <TempoDisplay tempo={tempo} size="sm" />
+        </View>
+      )}
+
+      <View
+        className="flex-row"
+        style={{
+          paddingVertical: 8,
+          paddingHorizontal: 8,
+          paddingBottom: 4,
+        }}
+        testID="exercise-card-column-headers"
+      >
+        {columnHeaders.map((header, i) => {
+          const widths = [36, undefined, 44, 56, 36]
+          const width = widths[i]
+          const isFlex = width === undefined
+
+          return (
+            <View
+              key={header}
+              style={{
+                ...(isFlex ? {} : { width }),
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+              }}
+              {...(isFlex ? { className: 'flex-1' } : {})}
+            >
+              <Text
+                style={{
+                  fontSize: 10,
+                  fontWeight: '600',
+                  fontFamily: 'Inter, sans-serif',
+                  textTransform: 'uppercase',
+                  letterSpacing: 0.8,
+                  color: COLORS.textTertiary,
+                }}
+              >
+                {header}
+              </Text>
+            </View>
+          )
+        })}
+      </View>
+
+      {sets && (
+        <View testID="exercise-card-sets">
+          {sets.map((setProps, i) => (
+            <SetRow key={i} {...setProps} />
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}
+
+function UpcomingCard({
+  name,
+  prescription,
+  previousBest,
+  supersetPosition,
+}: ExerciseCardProps) {
+  const borderRadius = getSupersetBorderRadius(supersetPosition)
+  const supersetMargin = getSupersetMargin(supersetPosition)
+
+  return (
+    <View
+      style={{
+        opacity: 0.6,
+        padding: 12,
+        paddingHorizontal: 14,
+        ...borderRadius,
+        ...supersetMargin,
+      }}
+      accessibilityLabel={formatAccessibilityLabel(name, undefined, prescription)}
+      testID="exercise-card"
+    >
+      <View className="flex-row items-center">
+        <Text
+          style={{
+            fontSize: 14,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: COLORS.textPrimary,
+          }}
+          testID="exercise-card-name"
+        >
+          {name}
+        </Text>
+        {prescription && (
+          <Text
+            style={{
+              fontSize: 12,
+              fontFamily: 'Inter, sans-serif',
+              color: COLORS.textSecondary,
+              marginLeft: 8,
+            }}
+            testID="exercise-card-prescription"
+          >
+            {prescription}
+          </Text>
+        )}
+        <View className="flex-1" />
+        {previousBest && (
+          <Text
+            style={{
+              fontSize: 11,
+              fontFamily: 'Inter, sans-serif',
+              color: COLORS.textTertiary,
+            }}
+            testID="exercise-card-previous-best"
+          >
+            {previousBest}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}
+
+export function ExerciseCard(props: ExerciseCardProps) {
+  switch (props.state) {
+    case 'collapsed':
+      return <CollapsedCard {...props} />
+    case 'expanded':
+      return <ExpandedCard {...props} />
+    case 'upcoming':
+      return <UpcomingCard {...props} />
+  }
+}

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: [] },
+  },
+}