@titan-design/react-ui 0.2.6 → 0.2.7

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,266 @@
+// 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'
+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[]> = {
+  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 : WORKOUT_TOKENS.border.default,
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : WORKOUT_TOKENS.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: WORKOUT_TOKENS.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: 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 }}
+          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.tsx

@@ -1,6 +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'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+
+const BRAND_PRIMARY = '#FF7900'
 
 export interface RestTimerProps {
   totalSeconds: number
@@ -32,9 +34,9 @@ export function RestTimer({
     <View
       style={{
         width: '100%',
-        backgroundColor: '#1C1C1C',
+        backgroundColor: WORKOUT_TOKENS.surface.raised,
         borderTopWidth: 1,
-        borderTopColor: '#1F1F1F',
+        borderTopColor: WORKOUT_TOKENS.border.default,
         paddingVertical: 12,
         paddingHorizontal: 16,
       }}
@@ -101,7 +103,7 @@ export function RestTimer({
       <View
         style={{
           height: 3,
-          backgroundColor: '#1F1F1F',
+          backgroundColor: WORKOUT_TOKENS.border.default,
           borderRadius: 2,
           marginBottom: 12,
         }}
@@ -110,7 +112,7 @@ export function RestTimer({
         <View
           style={{
             height: '100%',
-            backgroundColor: '#FF7900',
+            backgroundColor: BRAND_PRIMARY,
             borderRadius: 2,
             width: `${progressPct}%`,
           }}
@@ -160,7 +162,7 @@ export function RestTimer({
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
-              color: '#FF7900',
+              color: BRAND_PRIMARY,
             }}
           >
             Skip

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

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { SetRow } from './SetRow'
+
+const meta: Meta<typeof SetRow> = {
+  title: 'Custom/Workout/SetRow',
+  component: SetRow,
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['active', 'completed', 'history'],
+      description: 'Row display mode',
+    },
+    unit: {
+      control: 'select',
+      options: ['lbs', 'kg'],
+      description: 'Weight unit',
+    },
+    isNextSet: {
+      control: 'boolean',
+      description: 'Whether this is the next set to perform',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SetRow>
+
+export const CompletedWithVelocity: Story = {
+  args: {
+    mode: 'completed',
+    setNumber: 1,
+    reps: 8,
+    weight: 135,
+    unit: 'lbs',
+    rpe: 7.5,
+    previous: { reps: 8, weight: 130 },
+    velocities: [1.1, 0.95, 0.82, 0.68, 0.55, 0.48, 0.42, 0.38],
+  },
+}
+
+export const ActiveWithTargets: Story = {
+  args: {
+    mode: 'active',
+    setNumber: 3,
+    reps: null,
+    weight: null,
+    unit: 'lbs',
+    previous: { reps: 8, weight: 135 },
+    targets: { reps: 10, weight: 150 },
+  },
+}
+
+export const ActiveNextSet: Story = {
+  args: {
+    mode: 'active',
+    setNumber: 2,
+    reps: null,
+    weight: null,
+    unit: 'lbs',
+    isNextSet: true,
+    targets: { reps: 8, weight: 135 },
+    previous: { reps: 8, weight: 130 },
+  },
+}
+
+export const HistorySet: Story = {
+  args: {
+    mode: 'history',
+    setNumber: 1,
+    reps: 10,
+    weight: 185,
+    unit: 'lbs',
+    rpe: 8,
+    previous: { reps: 10, weight: 180 },
+  },
+}
+
+export const WithTypeBadge: Story = {
+  args: {
+    mode: 'completed',
+    setNumber: 1,
+    reps: 5,
+    weight: 95,
+    unit: 'lbs',
+    setType: 'W',
+    previous: null,
+  },
+}
+
+export const WithPrBadges: Story = {
+  args: {
+    mode: 'completed',
+    setNumber: 3,
+    reps: 8,
+    weight: 225,
+    unit: 'lbs',
+    rpe: 9.5,
+    previous: { reps: 8, weight: 215 },
+    prBadges: [
+      { type: 'e1rm', label: 'PR e1RM' },
+      { type: 'weight', label: 'PR Weight' },
+    ],
+  },
+}
+
+export const WithRPE: Story = {
+  args: {
+    mode: 'completed',
+    setNumber: 4,
+    reps: 5,
+    weight: 275,
+    unit: 'lbs',
+    rpe: 10,
+    previous: { reps: 5, weight: 265 },
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 4, padding: 16, maxWidth: 400 }}>
+      <SetRow
+        mode="completed"
+        setNumber={1}
+        reps={8}
+        weight={135}
+        unit="lbs"
+        rpe={7}
+        previous={{ reps: 8, weight: 130 }}
+        velocities={[1.1, 0.95, 0.82, 0.68, 0.55, 0.48, 0.42, 0.38]}
+        prBadges={[{ type: 'e1rm', label: 'PR e1RM' }]}
+      />
+      <SetRow
+        mode="completed"
+        setNumber={2}
+        reps={8}
+        weight={135}
+        unit="lbs"
+        rpe={8.5}
+        previous={{ reps: 8, weight: 135 }}
+        velocities={[0.95, 0.88, 0.78, 0.65, 0.52, 0.45, 0.40, 0.35]}
+      />
+      <SetRow
+        mode="active"
+        setNumber={3}
+        reps={null}
+        weight={null}
+        unit="lbs"
+        isNextSet
+        targets={{ reps: 8, weight: 135 }}
+        previous={{ reps: 8, weight: 135 }}
+      />
+      <SetRow
+        mode="active"
+        setNumber={4}
+        reps={null}
+        weight={null}
+        unit="lbs"
+        targets={{ reps: 8, weight: 135 }}
+        previous={{ reps: 8, weight: 135 }}
+      />
+    </View>
+  ),
+}