@titan-design/react-ui 0.2.7 → 0.4.0

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

@@ -0,0 +1,418 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo, useState } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { MesoProgressBar, type Meso, type MesoStatus } from './MesoProgressBar'
+import { MesoCard, type MesoVolumeHeatmapEntry } from './MesoCard'
+import { type WeekRowProps, type WeekRowWorkout } from './WeekRow'
+import { WorkoutCard, type WorkoutStatus, type WorkoutMuscleGroup } from './WorkoutCard'
+import { type WorkoutPillStatus } from './WorkoutPill'
+import { type ExerciseCardProps } from './ExerciseCard'
+import { cn } from '../../../utils/cn'
+
+const BRAND_PRIMARY = '#FF7900'
+
+/** A single workout within a planned week, plus its exercise breakdown. */
+export interface PlanWorkout {
+  /** Stable identifier used for drill-down selection. */
+  id: string
+  name: string
+  date: string
+  duration?: string
+  status: WorkoutStatus
+  muscleGroups: WorkoutMuscleGroup[]
+  totalSets: number
+  totalVolume?: number
+  unit: 'lbs' | 'kg'
+  /** Exercises revealed when the workout is opened. */
+  exercises: ExerciseCardProps[]
+}
+
+/** A training week inside a mesocycle. */
+export interface PlanWeek {
+  /** 1-based week index within the mesocycle. */
+  weekNumber: number
+  /** Planned intensity for the week, 0-1. */
+  intensityLevel: number
+  /** Optional MRV/overexertion threshold, 0-1. */
+  intensityThreshold?: number
+  isDeload?: boolean
+  isCurrent?: boolean
+  workouts: PlanWorkout[]
+}
+
+/** A mesocycle: the top level of the drill-down. */
+export interface PlanMeso {
+  id: string
+  name: string
+  goal: string
+  split: string
+  weekRange: string
+  weekCount: number
+  currentWeek?: number
+  status: MesoStatus
+  volumeHeatmap?: MesoVolumeHeatmapEntry[]
+  weeks: PlanWeek[]
+}
+
+/** Current depth of the meso -> week -> workout drill-down. */
+export type ProgramNavLevel = 'meso' | 'week' | 'workout'
+
+/** The navigation cursor within the active mesocycle. */
+export interface ProgramSelection {
+  weekNumber: number | null
+  workoutId: string | null
+}
+
+/** One tappable step in the breadcrumb trail. */
+export interface ProgramBreadcrumb {
+  key: string
+  label: string
+  level: ProgramNavLevel
+}
+
+export interface ProgramPlanningPageProps extends ViewProps {
+  /** Page heading. */
+  title?: string
+  /** Mesocycles that make up the program. */
+  mesos: PlanMeso[]
+  className?: string
+}
+
+/** Map a workout's lifecycle status onto a WorkoutPill status. */
+const WORKOUT_PILL_STATUS: Record<WorkoutStatus, WorkoutPillStatus> = {
+  completed: 'completed',
+  today: 'current',
+  upcoming: 'upcoming',
+}
+
+/** Derive the current drill-down level from the selection cursor (pure). */
+export function deriveNavLevel(selection: ProgramSelection): ProgramNavLevel {
+  if (selection.workoutId != null) return 'workout'
+  if (selection.weekNumber != null) return 'week'
+  return 'meso'
+}
+
+/** Project the mesocycles onto MesoProgressBar segment data (pure). */
+export function toProgressBarMesos(mesos: PlanMeso[]): Meso[] {
+  return mesos.map(({ id, name, weekCount, status, currentWeek }) => ({
+    id,
+    name,
+    weekCount,
+    status,
+    currentWeek,
+  }))
+}
+
+/** Look up a meso by id, or null. */
+export function findMeso(mesos: PlanMeso[], id: string | null): PlanMeso | null {
+  if (id == null) return null
+  return mesos.find((meso) => meso.id === id) ?? null
+}
+
+/** Look up a week within a meso, or null. */
+export function findWeek(meso: PlanMeso | null, weekNumber: number | null): PlanWeek | null {
+  if (meso == null || weekNumber == null) return null
+  return meso.weeks.find((week) => week.weekNumber === weekNumber) ?? null
+}
+
+/** Look up a workout within a week, or null. */
+export function findWorkout(week: PlanWeek | null, workoutId: string | null): PlanWorkout | null {
+  if (week == null || workoutId == null) return null
+  return week.workouts.find((workout) => workout.id === workoutId) ?? null
+}
+
+/** Build the breadcrumb trail for the active drill path (pure). */
+export function buildBreadcrumbs(
+  meso: PlanMeso,
+  weekNumber: number | null,
+  workout: PlanWorkout | null
+): ProgramBreadcrumb[] {
+  const crumbs: ProgramBreadcrumb[] = [{ key: 'meso', label: meso.name, level: 'meso' }]
+  if (weekNumber != null) {
+    crumbs.push({ key: 'week', label: `Week ${weekNumber}`, level: 'week' })
+  }
+  if (workout != null) {
+    crumbs.push({ key: 'workout', label: workout.name, level: 'workout' })
+  }
+  return crumbs
+}
+
+interface BreadcrumbsProps {
+  crumbs: ProgramBreadcrumb[]
+  onNavigate: (level: ProgramNavLevel) => void
+}
+
+function Breadcrumbs({ crumbs, onNavigate }: BreadcrumbsProps) {
+  return (
+    <View
+      className="flex-row items-center flex-wrap"
+      style={{ gap: 4 }}
+      testID="program-planning-page-breadcrumbs"
+    >
+      {crumbs.map((crumb, index) => {
+        const isLast = index === crumbs.length - 1
+        return (
+          <View key={crumb.key} className="flex-row items-center" style={{ gap: 4 }}>
+            {index > 0 && <Text className="text-text-tertiary" style={{ fontSize: 12 }}>{'›'}</Text>}
+            <Pressable
+              onPress={() => onNavigate(crumb.level)}
+              disabled={isLast}
+              accessibilityRole="button"
+              testID={`program-planning-page-crumb-${crumb.key}`}
+            >
+              <Text
+                className={isLast ? 'text-text-primary' : undefined}
+                style={{
+                  fontSize: 12,
+                  fontFamily: 'Inter, sans-serif',
+                  fontWeight: isLast ? '700' : '500',
+                  color: isLast ? undefined : BRAND_PRIMARY,
+                }}
+              >
+                {crumb.label}
+              </Text>
+            </Pressable>
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+/** Project a plan week onto WeekRow props, wiring pill taps to week selection. */
+function toWeekRow(
+  week: PlanWeek,
+  meso: PlanMeso,
+  onSelectWeek: (weekNumber: number) => void
+): WeekRowProps {
+  const workouts: WeekRowWorkout[] = week.workouts.map((workout) => ({
+    name: workout.name,
+    status: WORKOUT_PILL_STATUS[workout.status],
+    onPress: () => onSelectWeek(week.weekNumber),
+  }))
+  return {
+    weekNumber: week.weekNumber,
+    totalWeeks: meso.weekCount,
+    workouts,
+    intensityLevel: week.intensityLevel,
+    intensityThreshold: week.intensityThreshold,
+    isCurrent: week.isCurrent ?? week.weekNumber === meso.currentWeek,
+    isDeload: week.isDeload,
+  }
+}
+
+interface MesoLevelProps {
+  mesos: PlanMeso[]
+  activeMesoId: string | null
+  onSelectMeso: (id: string) => void
+  onSelectWeek: (weekNumber: number) => void
+}
+
+function MesoLevel({ mesos, activeMesoId, onSelectMeso, onSelectWeek }: MesoLevelProps) {
+  return (
+    <View style={{ gap: 12 }} testID="program-planning-page-meso-level">
+      {mesos.map((meso) => {
+        const expanded = meso.id === activeMesoId
+        return (
+          <MesoCard
+            key={meso.id}
+            name={meso.name}
+            goal={meso.goal}
+            split={meso.split}
+            weekRange={meso.weekRange}
+            currentWeek={meso.currentWeek}
+            totalWeeks={meso.weekCount}
+            weeks={expanded ? meso.weeks.map((week) => toWeekRow(week, meso, onSelectWeek)) : []}
+            volumeHeatmap={meso.volumeHeatmap}
+            expanded={expanded}
+            onToggle={() => onSelectMeso(meso.id)}
+            highlighted={expanded}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+interface WeekLevelProps {
+  week: PlanWeek
+  onSelectWorkout: (id: string) => void
+}
+
+function WeekLevel({ week, onSelectWorkout }: WeekLevelProps) {
+  return (
+    <View style={{ gap: 10 }} testID="program-planning-page-week-level">
+      {week.workouts.map((workout) => (
+        <WorkoutCard
+          key={workout.id}
+          name={workout.name}
+          date={workout.date}
+          duration={workout.duration}
+          status={workout.status}
+          muscleGroups={workout.muscleGroups}
+          totalSets={workout.totalSets}
+          totalVolume={workout.totalVolume}
+          unit={workout.unit}
+          exercises={workout.exercises}
+          expanded={false}
+          onToggle={() => onSelectWorkout(workout.id)}
+        />
+      ))}
+    </View>
+  )
+}
+
+interface WorkoutLevelProps {
+  workout: PlanWorkout
+  expandedExercise: number | null
+  onToggleExercise: (index: number) => void
+}
+
+function WorkoutLevel({ workout, expandedExercise, onToggleExercise }: WorkoutLevelProps) {
+  const exercises = workout.exercises.map((exercise, index) => ({
+    ...exercise,
+    state:
+      exercise.state === 'upcoming'
+        ? exercise.state
+        : ((index === expandedExercise ? 'expanded' : 'collapsed') as ExerciseCardProps['state']),
+    onToggle: () => onToggleExercise(index),
+  }))
+  return (
+    <View testID="program-planning-page-workout-level">
+      <WorkoutCard
+        name={workout.name}
+        date={workout.date}
+        duration={workout.duration}
+        status={workout.status}
+        muscleGroups={workout.muscleGroups}
+        totalSets={workout.totalSets}
+        totalVolume={workout.totalVolume}
+        unit={workout.unit}
+        exercises={exercises}
+        expanded
+        onToggle={() => undefined}
+      />
+    </View>
+  )
+}
+
+/**
+ * ProgramPlanningPage — a meso -> week -> workout drill-down over an entire
+ * training program. A `MesoProgressBar` pins the mesocycle timeline to the top;
+ * the body swaps between three levels: expandable `MesoCard`s (with inline
+ * `WeekRow`s), a week's `WorkoutCard` list, and a single opened `WorkoutCard`
+ * with inline `ExerciseCard` expansion. A breadcrumb trail tracks and rewinds
+ * the drill path. Selection is page-level state; children keep their own styles.
+ *
+ * @example
+ * <ProgramPlanningPage mesos={mesos} />
+ */
+export function ProgramPlanningPage({
+  title = 'Program Plan',
+  mesos,
+  className,
+  ...props
+}: ProgramPlanningPageProps) {
+  const [activeMesoId, setActiveMesoId] = useState<string | null>(mesos[0]?.id ?? null)
+  const [selectedWeek, setSelectedWeek] = useState<number | null>(null)
+  const [selectedWorkoutId, setSelectedWorkoutId] = useState<string | null>(null)
+  const [expandedExercise, setExpandedExercise] = useState<number | null>(null)
+
+  const progressMesos = useMemo(() => toProgressBarMesos(mesos), [mesos])
+  const activeMeso = findMeso(mesos, activeMesoId)
+  const level = deriveNavLevel({ weekNumber: selectedWeek, workoutId: selectedWorkoutId })
+  const activeWeek = findWeek(activeMeso, selectedWeek)
+  const activeWorkout = findWorkout(activeWeek, selectedWorkoutId)
+
+  const selectMeso = (id: string) => {
+    setActiveMesoId(id)
+    setSelectedWeek(null)
+    setSelectedWorkoutId(null)
+  }
+  const selectWeek = (weekNumber: number) => {
+    setSelectedWeek(weekNumber)
+    setSelectedWorkoutId(null)
+    setExpandedExercise(null)
+  }
+  const selectWorkout = (id: string) => {
+    setSelectedWorkoutId(id)
+    setExpandedExercise(null)
+  }
+  const toggleExercise = (index: number) =>
+    setExpandedExercise((current) => (current === index ? null : index))
+
+  const navigateTo = (target: ProgramNavLevel) => {
+    if (target === 'meso') selectMeso(activeMesoId ?? mesos[0]?.id)
+    else if (target === 'week' && selectedWeek != null) selectWeek(selectedWeek)
+  }
+
+  return (
+    <View
+      className={cn(className, 'bg-background-base')}
+      style={{ width: 390 }}
+      accessibilityRole={'main' as ViewProps['accessibilityRole']}
+      aria-label={title}
+      testID="program-planning-page"
+      {...props}
+    >
+      <View style={{ padding: 16, gap: 14 }} testID="program-planning-page-content">
+        <Text
+          accessibilityRole="header"
+          className="text-text-primary"
+          style={{
+            fontSize: 20,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+          }}
+          testID="program-planning-page-title"
+        >
+          {title}
+        </Text>
+
+        <View style={{ marginHorizontal: -16 }}>
+          <MesoProgressBar
+            mesos={progressMesos}
+            activeMesoId={activeMesoId}
+            onMesoPress={selectMeso}
+          />
+        </View>
+
+        {activeMeso != null && (
+          <Breadcrumbs
+            crumbs={buildBreadcrumbs(activeMeso, selectedWeek, activeWorkout)}
+            onNavigate={navigateTo}
+          />
+        )}
+
+        <View
+          className="bg-surface-elevated border-border"
+          style={{
+            borderWidth: 1,
+            borderRadius: 12,
+            padding: 12,
+          }}
+          testID="program-planning-page-body"
+        >
+          {level === 'meso' && (
+            <MesoLevel
+              mesos={mesos}
+              activeMesoId={activeMesoId}
+              onSelectMeso={selectMeso}
+              onSelectWeek={selectWeek}
+            />
+          )}
+          {level === 'week' && activeWeek != null && (
+            <WeekLevel week={activeWeek} onSelectWorkout={selectWorkout} />
+          )}
+          {level === 'workout' && activeWorkout != null && (
+            <WorkoutLevel
+              workout={activeWorkout}
+              expandedExercise={expandedExercise}
+              onToggleExercise={toggleExercise}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  )
+}

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

@@ -2,15 +2,12 @@
 import { View, Text, Pressable } from 'react-native'
 import { Card } from '../../ui/card'
 import { Badge, type BadgeColor } from '../../ui/badge'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 const BRAND_PRIMARY = '#FF7900'
 const BRAND_PRIMARY_SUBTLE = 'rgba(255,121,0,0.12)'
 const STATUS_SUCCESS = '#14B8A6'
 const STATUS_WARNING = '#FFB020'
 const STATUS_ERROR = '#D14343'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
 
 /** Emoji option sets per known factor, keyed by lowercase id/label. */
 const EMOJI_SETS: Record<string, readonly string[]> = {
@@ -92,7 +89,8 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
   return (
     <View style={{ marginTop: 14 }} testID={`readiness-check-factor-${factor.id}`}>
       <Text
-        style={{ fontSize: 12, fontWeight: '500', fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+        className="text-text-secondary"
+        style={{ fontSize: 12, fontWeight: '500', fontFamily: 'Inter, sans-serif' }}
         testID="readiness-check-factor-label"
       >
         {factor.label}
@@ -115,14 +113,15 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
               accessibilityLabel={`${factor.label} level ${level} of 5`}
               aria-checked={selected}
               testID="readiness-check-emoji"
+              className={selected ? undefined : 'border-border bg-surface-raised'}
               style={({ pressed }) => ({
                 flex: 1,
                 alignItems: 'center',
                 paddingVertical: 8,
                 borderRadius: 8,
                 borderWidth: 1,
-                borderColor: selected ? BRAND_PRIMARY : WORKOUT_TOKENS.border.default,
-                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : WORKOUT_TOKENS.surface.raised,
+                borderColor: selected ? BRAND_PRIMARY : undefined,
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : undefined,
                 opacity: selected ? 1 : pressed ? 0.8 : 0.55,
                 transform: [{ scale: selected ? 1.06 : 1 }],
               })}
@@ -144,13 +143,13 @@ function ScoreGauge({ score }: { score: number }) {
       accessibilityRole="image"
       accessibilityLabel={`Readiness score: ${score} out of 100`}
       testID="readiness-check-score"
+      className="bg-surface-raised"
       style={{
         width: 60,
         height: 60,
         borderRadius: 30,
         borderWidth: 4,
         borderColor: color,
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
         alignItems: 'center',
         justifyContent: 'center',
       }}
@@ -170,19 +169,19 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
   const badge = WARMUP_BADGE[validation.status]
   return (
     <View
+      className="border-border bg-surface-raised"
       style={{
         marginTop: 16,
         padding: 12,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: WORKOUT_TOKENS.border.default,
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
       }}
       testID="readiness-check-warmup"
     >
       <View className="flex-row items-center justify-between" style={{ gap: 8 }}>
         <Text
-          style={{ fontSize: 12, fontWeight: '600', fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+          className="text-text-secondary"
+          style={{ fontSize: 12, fontWeight: '600', fontFamily: 'Inter, sans-serif' }}
           testID="readiness-check-warmup-deficit"
         >
           {velocityDeficitText(validation.velocityDeficit)}
@@ -192,7 +191,8 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
         </Badge>
       </View>
       <Text
-        style={{ marginTop: 6, fontSize: 13, fontFamily: 'Inter, sans-serif', color: TEXT_PRIMARY }}
+        className="text-text-primary"
+        style={{ marginTop: 6, fontSize: 13, fontFamily: 'Inter, sans-serif' }}
         testID="readiness-check-warmup-recommendation"
       >
         {validation.recommendation}
@@ -227,7 +227,8 @@ export function ReadinessCheck({
       <View style={{ padding: 16 }}>
         <View className="flex-row items-center justify-between" style={{ gap: 12 }}>
           <Text
-            style={{ fontSize: 18, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif', color: TEXT_PRIMARY }}
+            className="text-text-primary"
+            style={{ fontSize: 18, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif' }}
             testID="readiness-check-title"
           >
             How are you feeling?

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

@@ -143,3 +143,13 @@ describe('RestTimer', () => {
     })
   })
 })
+
+describe('RestTimer zero-duration timer (NaN guard)', () => {
+  it('emits a valid 100% width (not NaN) when totalSeconds is 0', () => {
+    const { container } = render(
+      <RestTimer {...defaultProps} totalSeconds={0} elapsedMs={0} />,
+    )
+    expect(screen.getByTestId('rest-timer-progress-fill')).toHaveStyle({ width: '100%' })
+    expect(container.innerHTML).not.toContain('NaN')
+  })
+})

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

@@ -1,6 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable } from 'react-native'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const BRAND_PRIMARY = '#FF7900'
 
@@ -28,15 +28,18 @@ export function RestTimer({
   const minutes = Math.floor(remainingSec / 60)
   const seconds = remainingSec % 60
   const timeDisplay = `${minutes}:${String(seconds).padStart(2, '0')}`
-  const progressPct = Math.min(100, (elapsedMs / (totalSeconds * 1000)) * 100)
+  // A zero-duration timer is already complete; guard the 0 / 0 === NaN case
+  // that would otherwise emit width:'NaN%'.
+  const totalMs = totalSeconds * 1000
+  const progressPct = totalMs > 0 ? Math.min(100, (elapsedMs / totalMs) * 100) : 100
 
   return (
     <View
+      className="bg-surface-raised"
       style={{
         width: '100%',
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
         borderTopWidth: 1,
-        borderTopColor: WORKOUT_TOKENS.border.default,
+        borderTopColor: resolveColor('border-default'),
         paddingVertical: 12,
         paddingHorizontal: 16,
       }}
@@ -56,13 +59,13 @@ export function RestTimer({
         {/* Left side */}
         <View style={{ flexDirection: 'column' }}>
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
               textTransform: 'uppercase',
               letterSpacing: 1,
-              color: '#9CA3AF',
             }}
             testID="rest-timer-label"
           >
@@ -70,10 +73,10 @@ export function RestTimer({
           </Text>
           {nextSetInfo != null && (
             <Text
+              className="text-text-tertiary"
               style={{
                 fontSize: 11,
                 fontFamily: 'Inter, sans-serif',
-                color: '#6B7280',
                 marginTop: 2,
               }}
               testID="rest-timer-next-set"
@@ -85,11 +88,11 @@ export function RestTimer({
 
         {/* Right side - time display */}
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 28,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: '#F3F4F6',
             fontVariant: ['tabular-nums'],
             letterSpacing: -0.5,
           }}
@@ -101,9 +104,9 @@ export function RestTimer({
 
       {/* Progress bar */}
       <View
+        className="bg-border"
         style={{
           height: 3,
-          backgroundColor: WORKOUT_TOKENS.border.default,
           borderRadius: 2,
           marginBottom: 12,
         }}
@@ -135,11 +138,11 @@ export function RestTimer({
           testID="rest-timer-add-time"
         >
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
-              color: '#9CA3AF',
             }}
           >
             +30s