@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,181 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { ReadinessCheck, type ReadinessFactor } from './ReadinessCheck'
+
+function makeFactors(overrides: Partial<Record<string, number>> = {}): ReadinessFactor[] {
+  return [
+    { id: 'sleep', label: 'Sleep', value: overrides.sleep ?? 4, onChange: vi.fn() },
+    { id: 'soreness', label: 'Soreness', value: overrides.soreness ?? 3, onChange: vi.fn() },
+    { id: 'motivation', label: 'Motivation', value: overrides.motivation ?? 5, onChange: vi.fn() },
+    { id: 'stress', label: 'Stress', value: overrides.stress ?? 3, onChange: vi.fn() },
+  ]
+}
+
+const baseProps = {
+  score: 78,
+  warmUpCompleted: false,
+  onConfirm: vi.fn(),
+}
+
+describe('ReadinessCheck', () => {
+  describe('rendering', () => {
+    it('renders the title and one row per factor', () => {
+      render(<ReadinessCheck {...baseProps} factors={makeFactors()} />)
+      expect(screen.getByTestId('readiness-check-title')).toHaveTextContent(
+        'How are you feeling?',
+      )
+      expect(screen.getByTestId('readiness-check-factor-sleep')).toBeInTheDocument()
+      expect(screen.getByTestId('readiness-check-factor-stress')).toBeInTheDocument()
+    })
+
+    it('renders five emoji options per factor', () => {
+      render(<ReadinessCheck {...baseProps} factors={makeFactors()} />)
+      // 4 factors x 5 options
+      expect(screen.getAllByTestId('readiness-check-emoji')).toHaveLength(20)
+    })
+
+    it('shows the score in the gauge', () => {
+      render(<ReadinessCheck {...baseProps} factors={makeFactors()} score={64} />)
+      expect(screen.getByTestId('readiness-check-score-value')).toHaveTextContent('64')
+    })
+  })
+
+  describe('interaction', () => {
+    it('calls the factor onChange with the tapped 1-5 level', () => {
+      const factors = makeFactors()
+      render(<ReadinessCheck {...baseProps} factors={factors} />)
+      const sleepOptions = screen
+        .getByTestId('readiness-check-factor-sleep')
+        .querySelectorAll('[data-testid="readiness-check-emoji"]')
+      fireEvent.click(sleepOptions[0])
+      expect(factors[0].onChange).toHaveBeenCalledWith(1)
+      fireEvent.click(sleepOptions[4])
+      expect(factors[0].onChange).toHaveBeenCalledWith(5)
+    })
+
+    it('marks the selected level as checked', () => {
+      render(<ReadinessCheck {...baseProps} factors={makeFactors({ sleep: 2 })} />)
+      const sleepOptions = screen
+        .getByTestId('readiness-check-factor-sleep')
+        .querySelectorAll('[data-testid="readiness-check-emoji"]')
+      expect(sleepOptions[1]).toHaveAttribute('aria-checked', 'true')
+      expect(sleepOptions[0]).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('fires onConfirm when the start button is pressed', () => {
+      const onConfirm = vi.fn()
+      render(<ReadinessCheck {...baseProps} factors={makeFactors()} onConfirm={onConfirm} />)
+      fireEvent.click(screen.getByTestId('readiness-check-confirm'))
+      expect(onConfirm).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('warm-up validation', () => {
+    it('does not render the warm-up card until completed', () => {
+      render(
+        <ReadinessCheck
+          {...baseProps}
+          factors={makeFactors()}
+          warmUpValidation={{ velocityDeficit: 5, recommendation: 'OK', status: 'good' }}
+        />,
+      )
+      expect(screen.queryByTestId('readiness-check-warmup')).not.toBeInTheDocument()
+    })
+
+    it('renders deficit, recommendation, and status badge once completed', () => {
+      render(
+        <ReadinessCheck
+          {...baseProps}
+          factors={makeFactors()}
+          warmUpCompleted
+          warmUpValidation={{
+            velocityDeficit: 18,
+            recommendation: 'Reduce load today.',
+            status: 'caution',
+          }}
+        />,
+      )
+      expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
+        '18% below 14-day average',
+      )
+      expect(screen.getByTestId('readiness-check-warmup-recommendation')).toHaveTextContent(
+        'Reduce load today.',
+      )
+      expect(screen.getByTestId('readiness-check-warmup-badge')).toHaveTextContent('Caution')
+    })
+
+    it('phrases a zero deficit as on-average rather than "below"', () => {
+      render(
+        <ReadinessCheck
+          {...baseProps}
+          factors={makeFactors()}
+          warmUpCompleted
+          warmUpValidation={{ velocityDeficit: 0, recommendation: 'Proceed.', status: 'good' }}
+        />,
+      )
+      expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
+        'Velocity on 14-day average',
+      )
+    })
+
+    it('phrases a negative deficit as above average', () => {
+      render(
+        <ReadinessCheck
+          {...baseProps}
+          factors={makeFactors()}
+          warmUpCompleted
+          warmUpValidation={{ velocityDeficit: -6, recommendation: 'Proceed.', status: 'good' }}
+        />,
+      )
+      expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
+        'Velocity 6% above 14-day average',
+      )
+    })
+  })
+
+  describe('accessibility', () => {
+    it('labels each emoji as a radio with level and factor', () => {
+      render(<ReadinessCheck {...baseProps} factors={makeFactors()} />)
+      const radio = screen.getByLabelText('Sleep level 3 of 5')
+      expect(radio).toHaveAttribute('role', 'radio')
+    })
+
+    it('groups each factor as a radiogroup', () => {
+      render(<ReadinessCheck {...baseProps} factors={makeFactors()} />)
+      const groups = screen.getAllByRole('radiogroup')
+      expect(groups).toHaveLength(4)
+    })
+
+    it('exposes the readiness score on the gauge', () => {
+      render(<ReadinessCheck {...baseProps} factors={makeFactors()} score={78} />)
+      expect(
+        screen.getByLabelText('Readiness score: 78 out of 100'),
+      ).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <ReadinessCheck {...baseProps} factors={makeFactors()} />,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with warm-up and all features', async () => {
+      const { container } = render(
+        <ReadinessCheck
+          factors={makeFactors()}
+          score={88}
+          warmUpCompleted
+          warmUpValidation={{
+            velocityDeficit: 6,
+            recommendation: 'Warm up thoroughly.',
+            status: 'moderate',
+          }}
+          onConfirm={vi.fn()}
+        />,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,265 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, Pressable } from 'react-native'
+import { Card } from '../../ui/card'
+import { Badge, type BadgeColor } from '../../ui/badge'
+
+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 = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
+
+/** Emoji option sets per known factor, keyed by lowercase id/label. */
+const EMOJI_SETS: Record<string, readonly string[]> = {
+  sleep: ['😴', '😐', '🙂', '😊', '🤩'],
+  soreness: ['😵', '😣', '😐', '🙂', '💪'],
+  motivation: ['😑', '😐', '🙂', '😄', '🔥'],
+  stress: ['😰', '😟', '😐', '😌', '😎'],
+}
+const DEFAULT_EMOJI_SET = ['😞', '😕', '😐', '🙂', '😄'] as const
+
+export type WarmUpStatus = 'good' | 'moderate' | 'caution'
+
+export interface ReadinessFactor {
+  /** Stable identifier; also used to pick the emoji set (sleep/soreness/motivation/stress). */
+  id: string
+  /** Human label, e.g. "Sleep". */
+  label: string
+  /** Selected level, 1-5. */
+  value: number
+  /** Called with the new 1-5 level when an emoji is tapped. */
+  onChange: (value: number) => void
+}
+
+export interface WarmUpValidation {
+  /** Percent below the 14-day rolling velocity average. */
+  velocityDeficit: number
+  /** Short human recommendation, e.g. "Velocity on target — proceed as planned". */
+  recommendation: string
+  /** Severity of the deficit. */
+  status: WarmUpStatus
+}
+
+export interface ReadinessCheckProps {
+  /** Subjective readiness factors (Sleep, Soreness, Motivation, Stress). */
+  factors: ReadinessFactor[]
+  /** Computed overall readiness score, 0-100. */
+  score: number
+  /** VBT warm-up validation result, shown once the warm-up set is performed. */
+  warmUpValidation?: WarmUpValidation
+  /** Whether the VBT warm-up has been performed. */
+  warmUpCompleted: boolean
+  /** Called when the assessment is confirmed and the workout can begin. */
+  onConfirm: () => void
+  className?: string
+}
+
+/** Maps a 0-100 readiness score onto a status color. */
+function scoreColor(score: number): string {
+  if (score < 40) return STATUS_ERROR
+  if (score < 70) return STATUS_WARNING
+  return STATUS_SUCCESS
+}
+
+const WARMUP_BADGE: Record<WarmUpStatus, { color: BadgeColor; label: string }> = {
+  good: { color: 'success', label: 'Good' },
+  moderate: { color: 'warning', label: 'Moderate' },
+  caution: { color: 'error', label: 'Caution' },
+}
+
+function emojiSet(factor: ReadinessFactor): readonly string[] {
+  return EMOJI_SETS[factor.id.toLowerCase()] ?? EMOJI_SETS[factor.label.toLowerCase()] ?? DEFAULT_EMOJI_SET
+}
+
+/** Warm-up velocity phrasing. Deficit is % below the 14-day average, so a
+ *  non-positive deficit means velocity is on/above average — never "below". */
+function velocityDeficitText(deficit: number): string {
+  if (deficit > 0) return `Velocity ${deficit}% below 14-day average`
+  if (deficit < 0) return `Velocity ${Math.abs(deficit)}% above 14-day average`
+  return 'Velocity on 14-day average'
+}
+
+interface EmojiSliderProps {
+  factor: ReadinessFactor
+}
+
+/** One factor row: label plus a radiogroup of five tappable emoji. */
+function EmojiSlider({ factor }: EmojiSliderProps) {
+  const emojis = emojiSet(factor)
+  return (
+    <View style={{ marginTop: 14 }} testID={`readiness-check-factor-${factor.id}`}>
+      <Text
+        style={{ fontSize: 12, fontWeight: '500', fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+        testID="readiness-check-factor-label"
+      >
+        {factor.label}
+      </Text>
+      <View
+        className="flex-row items-center"
+        style={{ marginTop: 6, gap: 6 }}
+        accessibilityRole="radiogroup"
+        aria-label={factor.label}
+        testID="readiness-check-factor-options"
+      >
+        {emojis.map((emoji, index) => {
+          const level = index + 1
+          const selected = factor.value === level
+          return (
+            <Pressable
+              key={level}
+              onPress={() => factor.onChange(level)}
+              accessibilityRole="radio"
+              accessibilityLabel={`${factor.label} level ${level} of 5`}
+              aria-checked={selected}
+              testID="readiness-check-emoji"
+              style={({ pressed }) => ({
+                flex: 1,
+                alignItems: 'center',
+                paddingVertical: 8,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: selected ? BRAND_PRIMARY : 'var(--color-border-default)',
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : 'var(--color-surface-raised)',
+                opacity: selected ? 1 : pressed ? 0.8 : 0.55,
+                transform: [{ scale: selected ? 1.06 : 1 }],
+              })}
+            >
+              <Text style={{ fontSize: 20 }}>{emoji}</Text>
+            </Pressable>
+          )
+        })}
+      </View>
+    </View>
+  )
+}
+
+/** Circular score gauge: 60px ring colored by range with the score centered. */
+function ScoreGauge({ score }: { score: number }) {
+  const color = scoreColor(score)
+  return (
+    <View
+      accessibilityRole="image"
+      accessibilityLabel={`Readiness score: ${score} out of 100`}
+      testID="readiness-check-score"
+      style={{
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        borderWidth: 4,
+        borderColor: color,
+        backgroundColor: 'var(--color-surface-raised)',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text
+        style={{ fontSize: 20, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif', color }}
+        testID="readiness-check-score-value"
+      >
+        {score}
+      </Text>
+    </View>
+  )
+}
+
+/** VBT warm-up validation card with status badge and recommendation. */
+function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
+  const badge = WARMUP_BADGE[validation.status]
+  return (
+    <View
+      style={{
+        marginTop: 16,
+        padding: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: 'var(--color-border-default)',
+        backgroundColor: 'var(--color-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 }}
+          testID="readiness-check-warmup-deficit"
+        >
+          {velocityDeficitText(validation.velocityDeficit)}
+        </Text>
+        <Badge variant="subtle" color={badge.color} size="sm" testID="readiness-check-warmup-badge">
+          {badge.label}
+        </Badge>
+      </View>
+      <Text
+        style={{ marginTop: 6, fontSize: 13, fontFamily: 'Inter, sans-serif', color: TEXT_PRIMARY }}
+        testID="readiness-check-warmup-recommendation"
+      >
+        {validation.recommendation}
+      </Text>
+    </View>
+  )
+}
+
+/**
+ * Pre-workout readiness assessment combining subjective emoji sliders with an
+ * objective VBT warm-up validation and a computed readiness score.
+ *
+ * @example
+ * <ReadinessCheck
+ *   factors={[{ id: 'sleep', label: 'Sleep', value: 4, onChange: setSleep }]}
+ *   score={78}
+ *   warmUpCompleted
+ *   warmUpValidation={{ velocityDeficit: 4, recommendation: 'On target', status: 'good' }}
+ *   onConfirm={start}
+ * />
+ */
+export function ReadinessCheck({
+  factors,
+  score,
+  warmUpValidation,
+  warmUpCompleted,
+  onConfirm,
+  className,
+}: ReadinessCheckProps) {
+  return (
+    <Card variant="outline" elevation={2} className={className} testID="readiness-check">
+      <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 }}
+            testID="readiness-check-title"
+          >
+            How are you feeling?
+          </Text>
+          <ScoreGauge score={score} />
+        </View>
+
+        {factors.map((factor) => (
+          <EmojiSlider key={factor.id} factor={factor} />
+        ))}
+
+        {warmUpCompleted && warmUpValidation && <WarmUpCard validation={warmUpValidation} />}
+
+        <Pressable
+          onPress={onConfirm}
+          accessibilityRole="button"
+          accessibilityLabel="Confirm readiness and start workout"
+          testID="readiness-check-confirm"
+          style={({ pressed }) => ({
+            marginTop: 16,
+            width: '100%',
+            alignItems: 'center',
+            backgroundColor: BRAND_PRIMARY,
+            borderRadius: 8,
+            paddingVertical: 12,
+            opacity: pressed ? 0.8 : 1,
+          })}
+        >
+          <Text style={{ fontSize: 13, fontWeight: '700', fontFamily: 'Inter, sans-serif', color: '#FFFFFF' }}>
+            Start Workout
+          </Text>
+        </Pressable>
+      </View>
+    </Card>
+  )
+}

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,7 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import React from 'react'
 import { View, Text, Pressable } from 'react-native'
 
+const BRAND_PRIMARY = '#FF7900'
+
 export interface RestTimerProps {
   totalSeconds: number
   elapsedMs: number
@@ -26,15 +27,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
       style={{
         width: '100%',
-        backgroundColor: '#1C1C1C',
+        backgroundColor: 'var(--color-surface-raised)',
         borderTopWidth: 1,
-        borderTopColor: '#1F1F1F',
+        borderTopColor: 'var(--color-border-default)',
         paddingVertical: 12,
         paddingHorizontal: 16,
       }}
@@ -60,7 +64,7 @@ export function RestTimer({
               fontWeight: '600',
               textTransform: 'uppercase',
               letterSpacing: 1,
-              color: '#9CA3AF',
+              color: 'var(--color-text-secondary)',
             }}
             testID="rest-timer-label"
           >
@@ -71,7 +75,7 @@ export function RestTimer({
               style={{
                 fontSize: 11,
                 fontFamily: 'Inter, sans-serif',
-                color: '#6B7280',
+                color: 'var(--color-text-tertiary)',
                 marginTop: 2,
               }}
               testID="rest-timer-next-set"
@@ -87,7 +91,7 @@ export function RestTimer({
             fontSize: 28,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: '#F3F4F6',
+            color: 'var(--color-text-primary)',
             fontVariant: ['tabular-nums'],
             letterSpacing: -0.5,
           }}
@@ -101,7 +105,7 @@ export function RestTimer({
       <View
         style={{
           height: 3,
-          backgroundColor: '#1F1F1F',
+          backgroundColor: 'var(--color-border-default)',
           borderRadius: 2,
           marginBottom: 12,
         }}
@@ -110,7 +114,7 @@ export function RestTimer({
         <View
           style={{
             height: '100%',
-            backgroundColor: '#FF7900',
+            backgroundColor: BRAND_PRIMARY,
             borderRadius: 2,
             width: `${progressPct}%`,
           }}
@@ -137,7 +141,7 @@ export function RestTimer({
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
-              color: '#9CA3AF',
+              color: 'var(--color-text-secondary)',
             }}
           >
             +30s
@@ -160,7 +164,7 @@ export function RestTimer({
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
-              color: '#FF7900',
+              color: BRAND_PRIMARY,
             }}
           >
             Skip