@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { TempoDisplay } from './TempoDisplay'
+
+// tempo = [eccentric, pauseBottom, concentric, pauseTop]
+describe('TempoDisplay', () => {
+  it('renders tempo values', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    expect(screen.getByTestId('tempo-value')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  it('renders the TEMPO label prefix', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    expect(screen.getByText('TEMPO')).toBeInTheDocument()
+  })
+
+  it('renders colored phases by default', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    const tempoValue = screen.getByTestId('tempo-value')
+    expect(tempoValue.children.length).toBeGreaterThan(1)
+  })
+
+  it('renders mono variant', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} colored={false} />)
+    expect(screen.getByText('3-1-1-0')).toBeInTheDocument()
+  })
+
+  it('renders order: eccentric-pauseBottom-concentric-pauseTop', () => {
+    render(<TempoDisplay tempo={[4, 3, 2, 1]} colored={false} />)
+    expect(screen.getByText('4-3-2-1')).toBeInTheDocument()
+  })
+
+  it('has correct accessibility label', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    expect(
+      screen.getByLabelText(
+        'Tempo: 3 second eccentric, 1 second pause, 1 second concentric, 0 second pause'
+      )
+    ).toBeInTheDocument()
+  })
+
+  it('is always a Pressable for tooltip', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    const display = screen.getByTestId('tempo-display')
+    expect(display).toBeInTheDocument()
+  })
+
+  it('calls onPress when pressed', () => {
+    const onPress = vi.fn()
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} onPress={onPress} />)
+    const display = screen.getByTestId('tempo-display')
+    fireEvent.click(display)
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('toggles tooltip on press', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    expect(screen.queryByTestId('tempo-tooltip')).not.toBeInTheDocument()
+    fireEvent.click(screen.getByTestId('tempo-display'))
+    expect(screen.getByTestId('tempo-tooltip')).toBeInTheDocument()
+  })
+
+  it('does not show tooltip when showInfo is false', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} showInfo={false} />)
+    fireEvent.click(screen.getByTestId('tempo-display'))
+    expect(screen.queryByTestId('tempo-tooltip')).not.toBeInTheDocument()
+  })
+
+  describe('sizes', () => {
+    it('renders at sm size', () => {
+      render(<TempoDisplay tempo={[3, 1, 1, 0]} size="sm" />)
+      expect(screen.getByTestId('tempo-value')).toBeInTheDocument()
+    })
+
+    it('renders at md size', () => {
+      render(<TempoDisplay tempo={[3, 1, 1, 0]} size="md" />)
+      expect(screen.getByTestId('tempo-value')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,209 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useState, useCallback } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { roundTempo } from '../../../utils/workout-format'
+
+export interface TempoDisplayProps extends ViewProps {
+  /** Tempo values: [eccentric, pauseBottom, concentric, pauseTop] in seconds */
+  tempo: [number, number, number, number]
+  size?: 'sm' | 'md'
+  /** Colored phases or mono (all gray) */
+  colored?: boolean
+  /** Show info tooltip on press */
+  showInfo?: boolean
+  onPress?: () => void
+  className?: string
+}
+
+const INTER = 'Inter, sans-serif'
+const TEXT_TERTIARY = '#6B7280'
+
+// Phase colors: [eccentric, pauseBottom, concentric, pauseTop]
+const phaseColors = {
+  eccentric: '#FFB020', // status-warning (amber)
+  pauseBottom: TEXT_TERTIARY,
+  concentric: '#14B8A6', // status-success (teal)
+  pauseTop: TEXT_TERTIARY,
+  dash: TEXT_TERTIARY,
+}
+
+function TempoValue({
+  value,
+  color,
+  fontSize,
+}: {
+  value: number
+  color: string
+  fontSize: number
+}) {
+  return (
+    <Text
+      style={{
+        fontFamily: INTER,
+        fontSize,
+        color,
+        fontWeight: '600',
+        letterSpacing: 1,
+      }}
+    >
+      {value}
+    </Text>
+  )
+}
+
+function TempoSeparator({ color, fontSize }: { color: string; fontSize: number }) {
+  return (
+    <Text
+      style={{
+        fontFamily: INTER,
+        fontSize,
+        color,
+        fontWeight: '600',
+        letterSpacing: 1,
+      }}
+    >
+      -
+    </Text>
+  )
+}
+
+export function TempoDisplay({
+  tempo,
+  size = 'md',
+  colored = true,
+  showInfo = true,
+  onPress,
+  className,
+  ...props
+}: TempoDisplayProps) {
+  const [showTooltip, setShowTooltip] = useState(false)
+  // Round exact (unrounded) tempo seconds to the 1-dp display granularity.
+  const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo)
+  const isSm = size === 'sm'
+  const fontSize = isSm ? 9 : 11
+  const monoColor = TEXT_TERTIARY
+
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress()
+    }
+    if (showInfo) {
+      setShowTooltip((prev) => !prev)
+    }
+  }, [onPress, showInfo])
+
+  const content = (
+    <View
+      className={className}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#1C1C1C',
+        paddingHorizontal: isSm ? 6 : 8,
+        paddingVertical: 3,
+        borderRadius: 4,
+      }}
+      {...props}
+    >
+      <Text
+        style={{
+          fontFamily: INTER,
+          fontSize: 9,
+          fontWeight: '500',
+          color: TEXT_TERTIARY,
+          letterSpacing: 0.5,
+          textTransform: 'uppercase',
+          marginRight: 6,
+        }}
+      >
+        TEMPO
+      </Text>
+      <View style={{ flexDirection: 'row' }} testID="tempo-value">
+        {colored ? (
+          <>
+            <TempoValue value={eccentric} color={phaseColors.eccentric} fontSize={fontSize} />
+            <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
+            <TempoValue value={pauseBottom} color={phaseColors.pauseBottom} fontSize={fontSize} />
+            <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
+            <TempoValue value={concentric} color={phaseColors.concentric} fontSize={fontSize} />
+            <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
+            <TempoValue value={pauseTop} color={phaseColors.pauseTop} fontSize={fontSize} />
+          </>
+        ) : (
+          <Text
+            style={{
+              fontFamily: INTER,
+              fontSize,
+              color: monoColor,
+              fontWeight: '600',
+              letterSpacing: 1,
+            }}
+          >
+            {eccentric}-{pauseBottom}-{concentric}-{pauseTop}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+
+  return (
+    <Pressable
+      accessibilityLabel={`Tempo: ${eccentric} second eccentric, ${pauseBottom} second pause, ${concentric} second concentric, ${pauseTop} second pause`}
+      accessibilityRole="button"
+      onPress={handlePress}
+      testID="tempo-display"
+    >
+      {content}
+      {showTooltip && (
+        <View
+          style={{
+            position: 'absolute',
+            bottom: '100%',
+            left: '50%',
+            transform: [{ translateX: '-50%' as unknown as number }],
+            marginBottom: 8,
+            zIndex: 20,
+            alignItems: 'center',
+          }}
+          testID="tempo-tooltip"
+        >
+          <View
+            style={{
+              backgroundColor: '#191919',
+              borderRadius: 6,
+              paddingVertical: 8,
+              paddingHorizontal: 12,
+              borderWidth: 1,
+              borderColor: '#2C2C2C',
+            }}
+          >
+            <Text style={{ fontSize: 10, lineHeight: 16, color: '#9CA3AF', fontFamily: INTER }}>
+              Eccentric: {eccentric}s
+            </Text>
+            <Text style={{ fontSize: 10, lineHeight: 16, color: '#9CA3AF', fontFamily: INTER }}>
+              Pause (bottom): {pauseBottom}s
+            </Text>
+            <Text style={{ fontSize: 10, lineHeight: 16, color: '#9CA3AF', fontFamily: INTER }}>
+              Concentric: {concentric}s
+            </Text>
+            <Text style={{ fontSize: 10, lineHeight: 16, color: '#9CA3AF', fontFamily: INTER }}>
+              Pause (top): {pauseTop}s
+            </Text>
+          </View>
+          <View
+            style={{
+              width: 0,
+              height: 0,
+              borderLeftWidth: 5,
+              borderRightWidth: 5,
+              borderTopWidth: 5,
+              borderLeftColor: 'transparent',
+              borderRightColor: 'transparent',
+              borderTopColor: '#2C2C2C',
+            }}
+          />
+        </View>
+      )}
+    </Pressable>
+  )
+}

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

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { TrainingStatusPage, type TrainingStatusMuscle } from './TrainingStatusPage'
+import { MesoStatusCardProps } from './MesoStatusCard'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const meso: MesoStatusCardProps = {
+  mesoName: 'Hypertrophy Block',
+  mesoSubtitle: 'Week 6 of 8 · Upper/Lower',
+  statusBadge: { label: 'On Track', variant: 'success' },
+  metrics: [
+    { label: 'Weekly Volume', value: '112 sets' },
+    { label: 'Avg Intensity', value: 'RPE 8.2' },
+    { label: 'Sessions', value: '5 / 5' },
+    { label: 'Deload', value: 'in 2 weeks' },
+  ],
+  gauges: [
+    { label: 'Volume', level: 0.68, sublabel: 'Actual' },
+    { label: 'Fatigue', level: 0.55, sublabel: 'Managed' },
+  ],
+  coaching: {
+    text: 'Push volume on lagging back and rear delts before the deload.',
+    highlights: ['back and rear delts'],
+  },
+  nextTarget: { icon: '🎯', text: 'Add 2 sets to pulling this week' },
+}
+
+const muscles: TrainingStatusMuscle[] = [
+  {
+    muscleGroup: MuscleGroup.CHEST,
+    displayName: 'Chest',
+    side: 'front',
+    intensity: 0.72,
+    volumeStatus: 'productive',
+    weeklySets: 14,
+    landmarks: { mev: 8, mav: 14, mrv: 20 },
+    lastTrained: '2 days ago',
+    weeklyHistory: [8, 10, 12, 11, 13, 14],
+    contributingExercises: [
+      { name: 'Barbell Bench Press', sets: 4, contributionWeight: 1 },
+      { name: 'Incline Dumbbell Press', sets: 3, contributionWeight: 1 },
+      { name: 'Cable Fly', sets: 3, contributionWeight: 0.75 },
+    ],
+    upcomingExercises: [{ name: 'Machine Chest Press', workoutName: 'Push B', sets: 3 }],
+  },
+  {
+    muscleGroup: MuscleGroup.FRONT_DELTS,
+    displayName: 'Front Delts',
+    side: 'front',
+    intensity: 0.45,
+    volumeStatus: 'maintenance',
+    weeklySets: 5,
+    landmarks: { mev: 2, mav: 6, mrv: 10 },
+    lastTrained: '2 days ago',
+    weeklyHistory: [4, 5, 5, 5],
+  },
+  {
+    muscleGroup: MuscleGroup.SIDE_DELTS,
+    displayName: 'Side Delts',
+    side: 'front',
+    intensity: 0.6,
+    volumeStatus: 'productive',
+    weeklySets: 12,
+    landmarks: { mev: 6, mav: 14, mrv: 22 },
+    lastTrained: '1 day ago',
+    weeklyHistory: [8, 9, 10, 11, 12],
+  },
+  {
+    muscleGroup: MuscleGroup.BICEPS,
+    displayName: 'Biceps',
+    side: 'front',
+    intensity: 0.3,
+    volumeStatus: 'under',
+    weeklySets: 3,
+    landmarks: { mev: 4, mav: 10, mrv: 18 },
+    lastTrained: '4 days ago',
+    weeklyHistory: [2, 3, 3, 3],
+  },
+  {
+    muscleGroup: MuscleGroup.ABS,
+    displayName: 'Abs',
+    side: 'front',
+    intensity: 0.4,
+    volumeStatus: 'maintenance',
+    weeklySets: 6,
+    landmarks: { mev: 0, mav: 8, mrv: 16 },
+    lastTrained: '1 day ago',
+  },
+  {
+    muscleGroup: MuscleGroup.QUADS,
+    displayName: 'Quads',
+    side: 'front',
+    intensity: 0.95,
+    volumeStatus: 'over',
+    weeklySets: 20,
+    landmarks: { mev: 6, mav: 12, mrv: 18 },
+    lastTrained: 'today',
+    weeklyHistory: [12, 14, 16, 18, 20],
+    contributingExercises: [
+      { name: 'Back Squat', sets: 5, contributionWeight: 1 },
+      { name: 'Leg Press', sets: 4, contributionWeight: 0.85 },
+    ],
+  },
+  {
+    muscleGroup: MuscleGroup.LATS,
+    displayName: 'Lats',
+    side: 'back',
+    intensity: 0.58,
+    volumeStatus: 'productive',
+    weeklySets: 11,
+    landmarks: { mev: 8, mav: 14, mrv: 20 },
+    lastTrained: '3 days ago',
+    weeklyHistory: [7, 8, 9, 10, 11],
+    contributingExercises: [
+      { name: 'Pull-Up', sets: 4, contributionWeight: 1 },
+      { name: 'Barbell Row', sets: 4, contributionWeight: 0.9 },
+    ],
+  },
+  {
+    muscleGroup: MuscleGroup.UPPER_BACK,
+    displayName: 'Upper Back',
+    side: 'back',
+    intensity: 0.5,
+    volumeStatus: 'maintenance',
+    weeklySets: 8,
+    landmarks: { mev: 6, mav: 12, mrv: 18 },
+    lastTrained: '3 days ago',
+  },
+  {
+    muscleGroup: MuscleGroup.REAR_DELTS,
+    displayName: 'Rear Delts',
+    side: 'back',
+    intensity: 0.28,
+    volumeStatus: 'under',
+    weeklySets: 4,
+    landmarks: { mev: 6, mav: 12, mrv: 18 },
+    lastTrained: '5 days ago',
+    weeklyHistory: [2, 3, 3, 4],
+  },
+  {
+    muscleGroup: MuscleGroup.TRICEPS,
+    displayName: 'Triceps',
+    side: 'back',
+    intensity: 0.65,
+    volumeStatus: 'productive',
+    weeklySets: 9,
+    landmarks: { mev: 4, mav: 8, mrv: 14 },
+    lastTrained: '2 days ago',
+    weeklyHistory: [6, 7, 8, 9],
+  },
+  {
+    muscleGroup: MuscleGroup.GLUTES,
+    displayName: 'Glutes',
+    side: 'back',
+    intensity: 0.7,
+    volumeStatus: 'productive',
+    weeklySets: 10,
+    landmarks: { mev: 4, mav: 10, mrv: 16 },
+    lastTrained: 'today',
+  },
+  {
+    muscleGroup: MuscleGroup.HAMSTRINGS,
+    displayName: 'Hamstrings',
+    side: 'back',
+    intensity: 0.55,
+    volumeStatus: 'productive',
+    weeklySets: 9,
+    landmarks: { mev: 4, mav: 10, mrv: 16 },
+    lastTrained: 'today',
+    weeklyHistory: [6, 7, 8, 9],
+  },
+  {
+    muscleGroup: MuscleGroup.CALVES,
+    displayName: 'Calves',
+    side: 'back',
+    intensity: 0.2,
+    volumeStatus: 'under',
+    weeklySets: 3,
+    landmarks: { mev: 6, mav: 10, mrv: 16 },
+    lastTrained: '6 days ago',
+  },
+]
+
+const meta: Meta<typeof TrainingStatusPage> = {
+  title: 'Custom/Workout/TrainingStatusPage',
+  component: TrainingStatusPage,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: { title: 'Training Status', meso, muscles },
+}
+
+export default meta
+type Story = StoryObj<typeof TrainingStatusPage>
+
+export const Default: Story = {}
+
+export const NeedsAttention: Story = {
+  args: {
+    meso: {
+      ...meso,
+      statusBadge: { label: 'Behind', variant: 'warning' },
+      coaching: {
+        text: 'Volume is trailing target — add a pulling session this week.',
+        highlights: ['add a pulling session'],
+      },
+    },
+    muscles: muscles.map((m) =>
+      m.side === 'back'
+        ? { ...m, volumeStatus: 'under', weeklySets: Math.max(2, m.weeklySets - 4) }
+        : m
+    ),
+  },
+}

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

@@ -0,0 +1,131 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  TrainingStatusPage,
+  deriveTrainingSummary,
+  toBodyMapData,
+  type TrainingStatusMuscle,
+} from './TrainingStatusPage'
+import { type MesoStatusCardProps } from './MesoStatusCard'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const meso: MesoStatusCardProps = {
+  mesoName: 'Hypertrophy Block',
+  mesoSubtitle: 'Week 6 of 8',
+  statusBadge: { label: 'On Track', variant: 'success' },
+  metrics: [{ label: 'Volume', value: '112 sets' }],
+  gauges: [{ label: 'Volume', level: 0.68 }],
+}
+
+const muscles: TrainingStatusMuscle[] = [
+  {
+    muscleGroup: MuscleGroup.CHEST,
+    displayName: 'Chest',
+    side: 'front',
+    intensity: 0.7,
+    volumeStatus: 'productive',
+    weeklySets: 14,
+    landmarks: { mev: 8, mav: 14, mrv: 20 },
+    lastTrained: '2 days ago',
+    weeklyHistory: [10, 12, 14],
+  },
+  {
+    muscleGroup: MuscleGroup.BICEPS,
+    displayName: 'Biceps',
+    side: 'front',
+    intensity: 0.3,
+    volumeStatus: 'under',
+    weeklySets: 3,
+    landmarks: { mev: 4, mav: 10, mrv: 18 },
+  },
+  {
+    muscleGroup: MuscleGroup.LATS,
+    displayName: 'Lats',
+    side: 'back',
+    intensity: 0.6,
+    volumeStatus: 'productive',
+    weeklySets: 11,
+    landmarks: { mev: 8, mav: 14, mrv: 20 },
+  },
+  {
+    muscleGroup: MuscleGroup.QUADS,
+    displayName: 'Quads',
+    side: 'front',
+    intensity: 0.95,
+    volumeStatus: 'over',
+    weeklySets: 20,
+    landmarks: { mev: 6, mav: 12, mrv: 18 },
+  },
+]
+
+describe('deriveTrainingSummary', () => {
+  it('sums weekly sets and counts muscles per volume status', () => {
+    const summary = deriveTrainingSummary(muscles)
+    expect(summary.totalWeeklySets).toBe(48)
+    expect(summary.trackedMuscles).toBe(4)
+    expect(summary.statusCounts).toEqual({
+      under: 1,
+      maintenance: 0,
+      productive: 2,
+      over: 1,
+    })
+  })
+
+  it('returns zeroed counts for an empty muscle list', () => {
+    const summary = deriveTrainingSummary([])
+    expect(summary.totalWeeklySets).toBe(0)
+    expect(summary.trackedMuscles).toBe(0)
+    expect(summary.statusCounts).toEqual({ under: 0, maintenance: 0, productive: 0, over: 0 })
+  })
+})
+
+describe('toBodyMapData', () => {
+  it('keeps only the requested side and projects heatmap fields', () => {
+    const front = toBodyMapData(muscles, 'front')
+    expect(front.map((d) => d.muscleGroup)).toEqual([
+      MuscleGroup.CHEST,
+      MuscleGroup.BICEPS,
+      MuscleGroup.QUADS,
+    ])
+    expect(front[0]).toEqual({
+      muscleGroup: MuscleGroup.CHEST,
+      intensity: 0.7,
+      volumeStatus: 'productive',
+      weeklySets: 14,
+    })
+  })
+
+  it('filters to the back side', () => {
+    const back = toBodyMapData(muscles, 'back')
+    expect(back.map((d) => d.muscleGroup)).toEqual([MuscleGroup.LATS])
+  })
+})
+
+describe('TrainingStatusPage', () => {
+  it('renders the banner, summary cards, and both body maps', () => {
+    render(<TrainingStatusPage meso={meso} muscles={muscles} />)
+    expect(screen.getByTestId('training-status-page')).toBeInTheDocument()
+    expect(screen.getByTestId('meso-status-card')).toBeInTheDocument()
+    expect(screen.getByTestId('training-status-page-summary-total')).toHaveTextContent('48')
+    expect(screen.getByTestId('training-status-page-summary-productive')).toHaveTextContent('2')
+    expect(screen.getByTestId('training-status-page-bodymap-front')).toBeInTheDocument()
+    expect(screen.getByTestId('training-status-page-bodymap-back')).toBeInTheDocument()
+  })
+
+  it('uses a custom title when provided', () => {
+    render(<TrainingStatusPage title="Weekly Volume" meso={meso} muscles={muscles} />)
+    expect(screen.getByTestId('training-status-page-title')).toHaveTextContent('Weekly Volume')
+  })
+
+  it('opens the detail panel for a tapped muscle and closes it again', () => {
+    render(<TrainingStatusPage meso={meso} muscles={muscles} />)
+    expect(screen.queryByTestId('body-map-detail-panel')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('body-map-muscle-chest'))
+    expect(screen.getByTestId('body-map-detail-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('body-map-detail-panel-title')).toHaveTextContent('Chest')
+
+    fireEvent.click(screen.getByTestId('body-map-detail-panel-close'))
+    expect(screen.queryByTestId('body-map-detail-panel')).not.toBeInTheDocument()
+  })
+})