@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,422 @@
+// 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'
+
+const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
+const BORDER_DEFAULT = 'var(--color-border-default)'
+const BRAND_PRIMARY = '#FF7900'
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+const PAGE_BG = 'var(--color-background-base)'
+
+/** 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 style={{ fontSize: 12, color: TEXT_TERTIARY }}>{'›'}</Text>}
+            <Pressable
+              onPress={() => onNavigate(crumb.level)}
+              disabled={isLast}
+              accessibilityRole="button"
+              testID={`program-planning-page-crumb-${crumb.key}`}
+            >
+              <Text
+                style={{
+                  fontSize: 12,
+                  fontFamily: 'Inter, sans-serif',
+                  fontWeight: isLast ? '700' : '500',
+                  color: isLast ? TEXT_PRIMARY : 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={className}
+      style={{ width: 390, backgroundColor: PAGE_BG }}
+      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"
+          style={{
+            fontSize: 20,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: TEXT_PRIMARY,
+          }}
+          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
+          style={{
+            backgroundColor: SURFACE_ELEVATED,
+            borderWidth: 1,
+            borderColor: BORDER_DEFAULT,
+            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.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useMemo, useState } from 'react'
+import { View } from 'react-native'
+import { ReadinessCheck, type ReadinessFactor } from './ReadinessCheck'
+
+const FACTOR_SEED: Array<{ id: string; label: string; value: number }> = [
+  { id: 'sleep', label: 'Sleep', value: 4 },
+  { id: 'soreness', label: 'Soreness', value: 3 },
+  { id: 'motivation', label: 'Motivation', value: 5 },
+  { id: 'stress', label: 'Stress', value: 3 },
+]
+
+const staticFactors: ReadinessFactor[] = FACTOR_SEED.map((f) => ({
+  ...f,
+  onChange: () => {},
+}))
+
+const meta: Meta<typeof ReadinessCheck> = {
+  title: 'Custom/Workout/ReadinessCheck',
+  component: ReadinessCheck,
+  tags: ['autodocs'],
+  argTypes: {
+    score: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Computed overall readiness score (0-100), colors the gauge',
+    },
+    warmUpCompleted: {
+      control: 'boolean',
+      description: 'Whether the VBT warm-up set has been performed',
+    },
+    onConfirm: {
+      description: 'Called when the assessment is confirmed and the workout begins',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ReadinessCheck>
+
+export const Default: Story = {
+  args: {
+    factors: staticFactors,
+    score: 78,
+    warmUpCompleted: false,
+    onConfirm: () => {},
+  },
+}
+
+export const HighReadiness: Story = {
+  args: {
+    ...Default.args,
+    score: 92,
+  },
+}
+
+export const LowReadiness: Story = {
+  args: {
+    ...Default.args,
+    factors: FACTOR_SEED.map((f) => ({ ...f, value: 2, onChange: () => {} })),
+    score: 34,
+  },
+}
+
+export const WithWarmUpGood: Story = {
+  args: {
+    ...Default.args,
+    score: 81,
+    warmUpCompleted: true,
+    warmUpValidation: {
+      velocityDeficit: 3,
+      recommendation: 'Velocity on target — proceed with the planned loads.',
+      status: 'good',
+    },
+  },
+}
+
+export const WithWarmUpCaution: Story = {
+  args: {
+    ...Default.args,
+    score: 52,
+    warmUpCompleted: true,
+    warmUpValidation: {
+      velocityDeficit: 18,
+      recommendation: 'Significant velocity loss — consider reducing load 5-10% today.',
+      status: 'caution',
+    },
+  },
+}
+
+function InteractiveReadinessCheck() {
+  const [values, setValues] = useState<Record<string, number>>(
+    Object.fromEntries(FACTOR_SEED.map((f) => [f.id, f.value])),
+  )
+
+  const factors: ReadinessFactor[] = FACTOR_SEED.map((f) => ({
+    id: f.id,
+    label: f.label,
+    value: values[f.id],
+    onChange: (value) => setValues((prev) => ({ ...prev, [f.id]: value })),
+  }))
+
+  const score = useMemo(() => {
+    const total = FACTOR_SEED.reduce((sum, f) => sum + values[f.id], 0)
+    return Math.round((total / (FACTOR_SEED.length * 5)) * 100)
+  }, [values])
+
+  return (
+    <View style={{ maxWidth: 420, padding: 16 }}>
+      <ReadinessCheck
+        factors={factors}
+        score={score}
+        warmUpCompleted
+        warmUpValidation={{
+          velocityDeficit: 6,
+          recommendation: 'Velocity slightly down — warm up thoroughly before top sets.',
+          status: 'moderate',
+        }}
+        onConfirm={() => {}}
+      />
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveReadinessCheck />,
+}