@titan-design/react-ui 0.2.7 → 0.3.0

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

@@ -66,9 +66,13 @@ function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
     ? clampProgress(meso.currentWeek, meso.weekCount)
     : 0
 
+  // weekCount drives the segment's flex width; guard 0 / negative so flex stays
+  // a valid positive value and the segment never collapses out of the layout.
+  const segmentFlex = Math.max(1, meso.weekCount)
+
   return (
     <Pressable
-      style={{ flex: meso.weekCount }}
+      style={{ flex: segmentFlex }}
       onPress={() => onPress(meso.id)}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}

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

@@ -7,9 +7,9 @@ import { StatusDot } from './StatusDot'
 const BRAND_PRIMARY = '#FF7900'
 const BRAND_PRIMARY_DARK = '#C45E00'
 const BRAND_PRIMARY_LIGHT = '#FFB066'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
-const TEXT_TERTIARY = '#6B7280'
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
+const TEXT_TERTIARY = 'var(--color-text-tertiary)'
 
 const SUCCESS = '#14B8A6'
 const WARNING = '#FFB020'
@@ -18,9 +18,9 @@ const ERROR = '#D14343'
 /** Gradient stops for the 3px top accent: dark -> primary -> light (matches MesoCard). */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
 
-/** Card surface gradient: surface-elevated -> near-black at 135deg. */
+/** Card surface gradient: elevated -> raised at 135deg (theme-aware). */
 const CARD_GRADIENT =
-  'linear-gradient(135deg, #191919 0%, rgba(25,25,25,0.95) 100%)'
+  'linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-surface-raised) 100%)'
 
 /** Gauge track gradient (teal -> amber -> red) at 0.25 alpha. */
 const GAUGE_GRADIENT =

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

@@ -1,7 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 export interface PlaceholderStripProps extends ViewProps {
   width?: number | string
@@ -26,7 +25,7 @@ function SingleStrip({
           backgroundColor: 'transparent',
           borderWidth: 1,
           borderStyle: 'dashed',
-          borderColor: WORKOUT_TOKENS.border.strong,
+          borderColor: 'var(--color-border-strong)',
           borderRadius: 1,
           opacity: 0.5,
         },
@@ -67,7 +66,7 @@ function SegmentedStrip({
             backgroundColor: 'transparent',
             borderWidth: 1,
             borderStyle: 'dashed',
-            borderColor: WORKOUT_TOKENS.border.strong,
+            borderColor: 'var(--color-border-strong)',
             borderRadius: 1,
             minWidth: 4,
           }}

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

@@ -6,11 +6,11 @@ import { Drawer, DrawerBody } from '../../ui/drawer'
 const BRAND_PRIMARY = '#FF7900'
 const RECENT_BORDER = 'rgba(255,176,32,0.3)'
 const RECENT_GLOW = '0 0 12px rgba(255,176,32,0.06)'
-const SURFACE_RAISED = '#1C1C1C'
-const BORDER_DEFAULT = '#1F1F1F'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
-const TEXT_TERTIARY = '#6B7280'
+const SURFACE_RAISED = 'var(--color-surface-raised)'
+const BORDER_DEFAULT = 'var(--color-border-default)'
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
+const TEXT_TERTIARY = 'var(--color-text-tertiary)'
 
 export type PrRecordType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
 

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

@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ProgramPlanningPage, type PlanMeso } from './ProgramPlanningPage'
+import type { ExerciseCardProps } from './ExerciseCard'
+import type { WorkoutMuscleGroup } from './WorkoutCard'
+
+const upperMuscles: WorkoutMuscleGroup[] = [
+  { group: 'chest', label: 'Chest', volumeStatus: 'productive' },
+  { group: 'front-delts', label: 'Front Delts', volumeStatus: 'maintenance' },
+  { group: 'triceps', label: 'Triceps', volumeStatus: 'productive' },
+]
+
+const lowerMuscles: WorkoutMuscleGroup[] = [
+  { group: 'quads', label: 'Quads', volumeStatus: 'over' },
+  { group: 'glutes', label: 'Glutes', volumeStatus: 'productive' },
+  { group: 'hamstrings', label: 'Hamstrings', volumeStatus: 'maintenance' },
+]
+
+const upperExercises: ExerciseCardProps[] = [
+  {
+    name: 'Barbell Bench Press',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 4, reps: 8, weight: 185, unit: 'lbs' },
+    e1rm: { value: 235, unit: 'lbs' },
+    isPR: true,
+    setVelocities: [
+      [1.05, 0.94, 0.82, 0.74],
+      [0.98, 0.9, 0.8, 0.71],
+    ],
+    totalPlannedSets: 4,
+  },
+  {
+    name: 'Incline Dumbbell Press',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 3, reps: 10, weight: 70, unit: 'lbs' },
+    e1rm: { value: 92, unit: 'lbs' },
+    totalPlannedSets: 3,
+  },
+  {
+    name: 'Cable Triceps Pushdown',
+    state: 'upcoming',
+    onToggle: () => {},
+    prescription: '3×12-15 @ RPE 8',
+    previousBest: '50 lbs × 14',
+  },
+]
+
+const lowerExercises: ExerciseCardProps[] = [
+  {
+    name: 'Back Squat',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 5, reps: 5, weight: 275, unit: 'lbs' },
+    e1rm: { value: 335, unit: 'lbs' },
+    totalPlannedSets: 5,
+  },
+  {
+    name: 'Romanian Deadlift',
+    state: 'upcoming',
+    onToggle: () => {},
+    prescription: '3×8-10 @ RPE 8',
+    previousBest: '225 lbs × 9',
+  },
+  {
+    name: 'Leg Press',
+    state: 'upcoming',
+    onToggle: () => {},
+    prescription: '3×12 @ RPE 9',
+    previousBest: '450 lbs × 12',
+  },
+]
+
+function upperWorkout(
+  id: string,
+  date: string,
+  status: 'completed' | 'today' | 'upcoming'
+): PlanMeso['weeks'][number]['workouts'][number] {
+  return {
+    id,
+    name: 'Upper A',
+    date,
+    duration: '52 min',
+    status,
+    muscleGroups: upperMuscles,
+    totalSets: 18,
+    totalVolume: 21400,
+    unit: 'lbs',
+    exercises: upperExercises,
+  }
+}
+
+function lowerWorkout(
+  id: string,
+  date: string,
+  status: 'completed' | 'today' | 'upcoming'
+): PlanMeso['weeks'][number]['workouts'][number] {
+  return {
+    id,
+    name: 'Lower A',
+    date,
+    duration: '58 min',
+    status,
+    muscleGroups: lowerMuscles,
+    totalSets: 16,
+    totalVolume: 28800,
+    unit: 'lbs',
+    exercises: lowerExercises,
+  }
+}
+
+const accumulation: PlanMeso = {
+  id: 'm1',
+  name: 'Accumulation',
+  goal: 'Hypertrophy',
+  split: 'Upper/Lower',
+  weekRange: 'Weeks 1-4',
+  weekCount: 4,
+  currentWeek: 3,
+  status: 'current',
+  volumeHeatmap: [
+    { group: 'chest', percentage: 72 },
+    { group: 'back', percentage: 85 },
+    { group: 'legs', percentage: 90 },
+    { group: 'shoulders', percentage: 55 },
+    { group: 'arms', percentage: 60 },
+  ],
+  weeks: [
+    {
+      weekNumber: 1,
+      intensityLevel: 0.5,
+      intensityThreshold: 0.85,
+      workouts: [
+        upperWorkout('m1w1-u', 'Mon, Jun 2', 'completed'),
+        lowerWorkout('m1w1-l', 'Wed, Jun 4', 'completed'),
+      ],
+    },
+    {
+      weekNumber: 2,
+      intensityLevel: 0.62,
+      intensityThreshold: 0.85,
+      workouts: [
+        upperWorkout('m1w2-u', 'Mon, Jun 9', 'completed'),
+        lowerWorkout('m1w2-l', 'Wed, Jun 11', 'completed'),
+      ],
+    },
+    {
+      weekNumber: 3,
+      intensityLevel: 0.74,
+      intensityThreshold: 0.85,
+      isCurrent: true,
+      workouts: [
+        upperWorkout('m1w3-u', 'Mon, Jun 16', 'today'),
+        lowerWorkout('m1w3-l', 'Wed, Jun 18', 'upcoming'),
+      ],
+    },
+    {
+      weekNumber: 4,
+      intensityLevel: 0.35,
+      intensityThreshold: 0.85,
+      isDeload: true,
+      workouts: [
+        upperWorkout('m1w4-u', 'Mon, Jun 23', 'upcoming'),
+        lowerWorkout('m1w4-l', 'Wed, Jun 25', 'upcoming'),
+      ],
+    },
+  ],
+}
+
+const intensification: PlanMeso = {
+  id: 'm2',
+  name: 'Intensification',
+  goal: 'Strength',
+  split: 'Push/Pull/Legs',
+  weekRange: 'Weeks 5-7',
+  weekCount: 3,
+  status: 'upcoming',
+  volumeHeatmap: [
+    { group: 'chest', percentage: 60 },
+    { group: 'back', percentage: 70 },
+    { group: 'legs', percentage: 80 },
+    { group: 'shoulders', percentage: 50 },
+    { group: 'arms', percentage: 45 },
+  ],
+  weeks: [
+    {
+      weekNumber: 1,
+      intensityLevel: 0.78,
+      intensityThreshold: 0.9,
+      workouts: [upperWorkout('m2w1-u', 'Mon, Jun 30', 'upcoming')],
+    },
+    {
+      weekNumber: 2,
+      intensityLevel: 0.86,
+      intensityThreshold: 0.9,
+      workouts: [lowerWorkout('m2w2-l', 'Mon, Jul 7', 'upcoming')],
+    },
+    {
+      weekNumber: 3,
+      intensityLevel: 0.92,
+      intensityThreshold: 0.9,
+      workouts: [upperWorkout('m2w3-u', 'Mon, Jul 14', 'upcoming')],
+    },
+  ],
+}
+
+const peak: PlanMeso = {
+  id: 'm3',
+  name: 'Peak',
+  goal: 'Peaking',
+  split: 'Full Body',
+  weekRange: 'Weeks 8-9',
+  weekCount: 2,
+  status: 'upcoming',
+  weeks: [
+    {
+      weekNumber: 1,
+      intensityLevel: 0.95,
+      intensityThreshold: 0.95,
+      workouts: [upperWorkout('m3w1-u', 'Mon, Jul 21', 'upcoming')],
+    },
+    {
+      weekNumber: 2,
+      intensityLevel: 0.6,
+      intensityThreshold: 0.95,
+      isDeload: true,
+      workouts: [lowerWorkout('m3w2-l', 'Mon, Jul 28', 'upcoming')],
+    },
+  ],
+}
+
+const accumulationDone: PlanMeso = {
+  ...accumulation,
+  id: 'm0',
+  name: 'Base',
+  status: 'completed',
+  weekRange: 'Weeks -3-0',
+}
+
+const mesos: PlanMeso[] = [accumulationDone, accumulation, intensification, peak]
+
+const meta: Meta<typeof ProgramPlanningPage> = {
+  title: 'Custom/Workout/ProgramPlanningPage',
+  component: ProgramPlanningPage,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: { title: 'Program Plan', mesos },
+}
+
+export default meta
+type Story = StoryObj<typeof ProgramPlanningPage>
+
+export const Default: Story = {}
+
+export const SingleMeso: Story = {
+  args: { mesos: [accumulation] },
+}

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

@@ -0,0 +1,142 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  ProgramPlanningPage,
+  deriveNavLevel,
+  toProgressBarMesos,
+  findMeso,
+  findWeek,
+  findWorkout,
+  buildBreadcrumbs,
+  type PlanMeso,
+} from './ProgramPlanningPage'
+
+const workout = (id: string, status: 'completed' | 'today' | 'upcoming') => ({
+  id,
+  name: `Workout ${id}`,
+  date: 'Mon, Jun 2',
+  status,
+  muscleGroups: [{ group: 'chest', label: 'Chest' as const }],
+  totalSets: 12,
+  unit: 'lbs' as const,
+  exercises: [
+    {
+      name: 'Bench Press',
+      state: 'collapsed' as const,
+      onToggle: () => {},
+      summary: { sets: 3, reps: 8, weight: 185, unit: 'lbs' as const },
+    },
+    { name: 'Row', state: 'upcoming' as const, onToggle: () => {}, prescription: '3×10' },
+  ],
+})
+
+const mesos: PlanMeso[] = [
+  {
+    id: 'm1',
+    name: 'Accumulation',
+    goal: 'Hypertrophy',
+    split: 'Upper/Lower',
+    weekRange: 'Weeks 1-4',
+    weekCount: 2,
+    currentWeek: 1,
+    status: 'current',
+    weeks: [
+      {
+        weekNumber: 1,
+        intensityLevel: 0.5,
+        isCurrent: true,
+        workouts: [workout('w1a', 'today'), workout('w1b', 'upcoming')],
+      },
+      { weekNumber: 2, intensityLevel: 0.7, workouts: [workout('w2a', 'upcoming')] },
+    ],
+  },
+  {
+    id: 'm2',
+    name: 'Peak',
+    goal: 'Peaking',
+    split: 'Full Body',
+    weekRange: 'Weeks 5-6',
+    weekCount: 1,
+    status: 'upcoming',
+    weeks: [{ weekNumber: 1, intensityLevel: 0.9, workouts: [workout('w3a', 'upcoming')] }],
+  },
+]
+
+describe('deriveNavLevel', () => {
+  it('returns the deepest level indicated by the selection cursor', () => {
+    expect(deriveNavLevel({ weekNumber: null, workoutId: null })).toBe('meso')
+    expect(deriveNavLevel({ weekNumber: 1, workoutId: null })).toBe('week')
+    expect(deriveNavLevel({ weekNumber: 1, workoutId: 'w1a' })).toBe('workout')
+  })
+})
+
+describe('toProgressBarMesos', () => {
+  it('projects only the fields MesoProgressBar needs', () => {
+    expect(toProgressBarMesos(mesos)).toEqual([
+      { id: 'm1', name: 'Accumulation', weekCount: 2, status: 'current', currentWeek: 1 },
+      { id: 'm2', name: 'Peak', weekCount: 1, status: 'upcoming', currentWeek: undefined },
+    ])
+  })
+})
+
+describe('find helpers', () => {
+  it('locates a meso, week, and workout down the tree', () => {
+    const meso = findMeso(mesos, 'm1')
+    expect(meso?.name).toBe('Accumulation')
+    const week = findWeek(meso, 1)
+    expect(week?.workouts).toHaveLength(2)
+    expect(findWorkout(week, 'w1b')?.name).toBe('Workout w1b')
+  })
+
+  it('returns null for missing ids or null inputs', () => {
+    expect(findMeso(mesos, 'nope')).toBeNull()
+    expect(findMeso(mesos, null)).toBeNull()
+    expect(findWeek(null, 1)).toBeNull()
+    expect(findWorkout(findWeek(findMeso(mesos, 'm1'), 1), 'nope')).toBeNull()
+  })
+})
+
+describe('buildBreadcrumbs', () => {
+  it('grows the trail with drill depth', () => {
+    const meso = mesos[0]
+    expect(buildBreadcrumbs(meso, null, null).map((c) => c.label)).toEqual(['Accumulation'])
+    expect(buildBreadcrumbs(meso, 1, null).map((c) => c.label)).toEqual(['Accumulation', 'Week 1'])
+    const wo = findWorkout(findWeek(meso, 1), 'w1a')
+    expect(buildBreadcrumbs(meso, 1, wo).map((c) => c.level)).toEqual(['meso', 'week', 'workout'])
+  })
+})
+
+describe('ProgramPlanningPage', () => {
+  it('renders the progress bar and starts at the meso level', () => {
+    render(<ProgramPlanningPage mesos={mesos} />)
+    expect(screen.getByTestId('program-planning-page')).toBeInTheDocument()
+    expect(screen.getByTestId('meso-progress-bar')).toBeInTheDocument()
+    expect(screen.getByTestId('program-planning-page-meso-level')).toBeInTheDocument()
+    expect(screen.getByTestId('program-planning-page-crumb-meso')).toHaveTextContent('Accumulation')
+  })
+
+  it('drills meso -> week -> workout and rewinds via breadcrumbs', () => {
+    render(<ProgramPlanningPage mesos={mesos} />)
+
+    // Meso level: tapping a week's workout pill drills into that week.
+    fireEvent.click(screen.getAllByTestId('workout-pill-pressable')[0])
+    expect(screen.getByTestId('program-planning-page-week-level')).toBeInTheDocument()
+    expect(screen.getByTestId('program-planning-page-crumb-week')).toHaveTextContent('Week 1')
+
+    // Week level: the week's two workouts render as cards; open the first.
+    expect(screen.getAllByTestId('workout-card')).toHaveLength(2)
+    fireEvent.click(screen.getAllByTestId('workout-card-toggle')[0])
+    expect(screen.getByTestId('program-planning-page-workout-level')).toBeInTheDocument()
+    expect(screen.getByTestId('workout-card-exercises')).toBeInTheDocument()
+
+    // Breadcrumb rewinds back to the meso overview.
+    fireEvent.click(screen.getByTestId('program-planning-page-crumb-meso'))
+    expect(screen.getByTestId('program-planning-page-meso-level')).toBeInTheDocument()
+  })
+
+  it('switches the active meso when a progress-bar segment is pressed', () => {
+    render(<ProgramPlanningPage mesos={mesos} />)
+    fireEvent.click(screen.getByTestId('meso-segment-m2'))
+    expect(screen.getByTestId('program-planning-page-crumb-meso')).toHaveTextContent('Peak')
+  })
+})