@titan-design/react-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,287 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useEffect, useState } from 'react'
+import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+
+export interface VelocityStripProps extends ViewProps {
+  velocities: number[]
+  expanded?: boolean
+  onToggle?: () => void
+  onRepPress?: (index: number, velocity: number) => void
+  variant?: 'full' | 'mini'
+  showInfo?: boolean
+  className?: string
+}
+
+const VEL_COLORS = {
+  green: '#2ed573',
+  yellow: '#ffd43b',
+  orange: '#ffa502',
+  red: '#ff4757',
+}
+
+export function getVelocityZoneColor(velocity: number): string {
+  if (velocity >= 1.0) return 'vel-green'
+  if (velocity >= 0.75) return 'vel-yellow'
+  if (velocity >= 0.5) return 'vel-orange'
+  return 'vel-red'
+}
+
+export function getVelocityZoneName(velocity: number): string {
+  if (velocity >= 1.0) return 'Speed'
+  if (velocity >= 0.75) return 'Power'
+  if (velocity >= 0.5) return 'Strength-Speed'
+  return 'Strength'
+}
+
+export function calculateVelocityLoss(velocities: number[]): number {
+  if (velocities.length < 2) return 0
+  const first = velocities[0]
+  const last = velocities[velocities.length - 1]
+  if (first === 0) return 0
+  return Math.round(((first - last) / first) * 100)
+}
+
+export function calculateMeanVelocity(velocities: number[]): number {
+  if (velocities.length === 0) return 0
+  const sum = velocities.reduce((acc, v) => acc + v, 0)
+  return sum / velocities.length
+}
+
+function getBarColor(zone: string): string {
+  switch (zone) {
+    case 'vel-green': return VEL_COLORS.green
+    case 'vel-yellow': return VEL_COLORS.yellow
+    case 'vel-orange': return VEL_COLORS.orange
+    case 'vel-red': return VEL_COLORS.red
+    default: return VEL_COLORS.green
+  }
+}
+
+const zoneHexMap: Record<string, string> = {
+  'vel-green': VEL_COLORS.green,
+  'vel-yellow': VEL_COLORS.yellow,
+  'vel-orange': VEL_COLORS.orange,
+  'vel-red': VEL_COLORS.red,
+}
+
+function getLossStyle(loss: number): Record<string, string> | null {
+  if (loss > 25) return { color: VEL_COLORS.red }
+  if (loss > 20) return { color: VEL_COLORS.orange }
+  return null
+}
+
+const ANIMATION_DURATION = 400
+const ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1)
+
+export function VelocityStrip({
+  velocities,
+  expanded = false,
+  onToggle,
+  onRepPress,
+  variant = 'full',
+  showInfo = true,
+  className,
+  ...props
+}: VelocityStripProps) {
+  const maxVelocity = Math.max(...velocities, 0)
+  const meanVelocity = calculateMeanVelocity(velocities)
+  const loss = calculateVelocityLoss(velocities)
+  const meanZone = getVelocityZoneName(meanVelocity)
+
+  const [heightAnim] = useState(() => new Animated.Value(expanded ? 60 : 3))
+  const [labelOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0))
+  const [infoOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0))
+
+  useEffect(() => {
+    if (variant === 'mini') return
+
+    Animated.parallel([
+      Animated.timing(heightAnim, {
+        toValue: expanded ? 60 : 3,
+        duration: ANIMATION_DURATION,
+        easing: ANIMATION_EASING,
+        useNativeDriver: false,
+      }),
+      Animated.timing(labelOpacity, {
+        toValue: expanded ? 1 : 0,
+        duration: 300,
+        delay: expanded ? 150 : 0,
+        useNativeDriver: false,
+      }),
+      Animated.timing(infoOpacity, {
+        toValue: expanded ? 1 : 0,
+        duration: 300,
+        delay: expanded ? 200 : 0,
+        useNativeDriver: false,
+      }),
+    ]).start()
+  }, [expanded, variant, heightAnim, labelOpacity, infoOpacity])
+
+  if (variant === 'mini') {
+    const { style: externalStyle, ...restProps } = props
+    return (
+      <View
+        className={className}
+        style={[{ flexDirection: 'row', height: 3, gap: 2, borderRadius: 2, overflow: 'hidden' }, externalStyle]}
+        accessibilityRole="image"
+        accessibilityLabel={`Velocity strip, ${velocities.length} reps`}
+        testID="velocity-strip-mini"
+        {...restProps}
+      >
+        {velocities.map((v, i) => (
+          <View
+            key={i}
+            style={{
+              flex: 1,
+              backgroundColor: getBarColor(getVelocityZoneColor(v)),
+              borderRadius: 1,
+              minWidth: 4,
+              height: '100%' as unknown as number,
+            }}
+            accessibilityElementsHidden
+            testID={`velocity-bar-${i}`}
+          />
+        ))}
+      </View>
+    )
+  }
+
+  const stripLabel = `Velocity chart for set, ${velocities.length} reps, tap to ${expanded ? 'collapse' : 'expand'}`
+  // When onToggle wraps the strip or individual reps are interactive, the container itself is not a button
+  const hasInteractiveContainer = onToggle != null
+  const hasInteractiveReps = onRepPress != null && expanded
+
+  const stripContent = (
+    <Animated.View
+      className={className}
+      style={[
+        {
+          height: heightAnim,
+          width: '100%',
+          gap: 2,
+          borderRadius: expanded ? 6 : 2,
+          paddingTop: expanded ? 16 : 0,
+          paddingBottom: expanded ? 24 : 0,
+          paddingHorizontal: expanded ? 6 : 0,
+          paddingVertical: expanded ? undefined : 8,
+          backgroundColor: expanded ? '#1C1C1C' : 'transparent',
+          overflow: expanded ? 'visible' : 'hidden',
+        },
+      ]}
+      accessibilityRole={hasInteractiveContainer || hasInteractiveReps ? 'none' : 'button'}
+      accessibilityLabel={hasInteractiveContainer || hasInteractiveReps ? undefined : stripLabel}
+      testID="velocity-strip"
+      {...props}
+    >
+      <View
+        style={{ flexDirection: 'row', flex: 1, gap: 2, alignItems: 'flex-end' }}
+      >
+        {velocities.map((v, i) => {
+          const zone = getVelocityZoneColor(v)
+          const barHeightPct = Math.round((v / (maxVelocity * 1.15)) * 100)
+
+          const bar = (
+            <View
+              key={i}
+              style={{ flex: 1, height: '100%', justifyContent: 'flex-end', position: 'relative' }}
+            >
+              {expanded && (
+                <Animated.View style={{ opacity: labelOpacity, alignItems: 'center', position: 'absolute', top: -13, left: 0, right: 0 }} accessibilityElementsHidden>
+                  <Text
+                    style={{ fontSize: 8, fontWeight: '600', color: '#9CA3AF' }}
+                    testID={`velocity-label-${i}`}
+                  >
+                    {v.toFixed(2)}
+                  </Text>
+                </Animated.View>
+              )}
+              <View
+                style={
+                  expanded
+                    ? { height: `${barHeightPct}%`, minHeight: 2, borderTopLeftRadius: 2, borderTopRightRadius: 2, backgroundColor: zoneHexMap[zone] }
+                    : {
+                        minHeight: '100%' as unknown as number,
+                        borderTopLeftRadius: 2,
+                        borderTopRightRadius: 2,
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0,
+                        backgroundColor: zoneHexMap[zone],
+                      }
+                }
+                testID={`velocity-bar-${i}`}
+                accessibilityRole="image"
+                accessibilityLabel={`Rep ${i + 1}: ${v.toFixed(2)} meters per second`}
+              />
+            </View>
+          )
+
+          if (onRepPress && expanded) {
+            return (
+              <Pressable
+                key={i}
+                style={{ flex: 1, height: '100%' }}
+                onPress={() => onRepPress(i, v)}
+                accessibilityRole="button"
+                accessibilityLabel={`Rep ${i + 1}: ${v.toFixed(2)} meters per second, tap for details`}
+                testID={`velocity-bar-pressable-${i}`}
+              >
+                {bar}
+              </Pressable>
+            )
+          }
+
+          return bar
+        })}
+      </View>
+      {expanded && showInfo && (
+        <Animated.View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            opacity: infoOpacity,
+            position: 'absolute',
+            bottom: 4,
+            left: 6,
+            right: 6,
+          }}
+          testID="velocity-info-row"
+        >
+          <Text
+            style={{
+              fontSize: 10,
+              color: '#9CA3AF',
+              fontFamily: 'Inter, sans-serif',
+            }}
+          >
+            {meanZone} {'\u00B7'} {meanVelocity.toFixed(2)} m/s
+          </Text>
+          <Text
+            style={{
+              fontSize: 10,
+              color: '#9CA3AF',
+              fontFamily: 'Inter, sans-serif',
+              ...getLossStyle(loss),
+            }}
+          >
+            Loss: {loss}%
+          </Text>
+        </Animated.View>
+      )}
+    </Animated.View>
+  )
+
+  if (onToggle) {
+    return (
+      <Pressable
+        onPress={onToggle}
+        accessibilityRole="button"
+        accessibilityLabel={stripLabel}
+        testID="velocity-strip-pressable"
+      >
+        {stripContent}
+      </Pressable>
+    )
+  }
+
+  return stripContent
+}

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { WeekRow } from './WeekRow'
+
+const meta: Meta<typeof WeekRow> = {
+  title: 'Custom/Workout/WeekRow',
+  component: WeekRow,
+  tags: ['autodocs'],
+  argTypes: {
+    weekNumber: { control: 'number', description: 'Week index (1-based)' },
+    totalWeeks: { control: 'number', description: 'Weeks in the mesocycle' },
+    intensityLevel: {
+      control: { type: 'range', min: 0, max: 1, step: 0.05 },
+      description: 'Planned intensity, 0-1',
+    },
+    intensityThreshold: {
+      control: { type: 'range', min: 0, max: 1, step: 0.05 },
+      description: 'MRV/overexertion threshold, 0-1',
+    },
+    isCurrent: { control: 'boolean', description: 'Active week highlight' },
+    isDeload: { control: 'boolean', description: 'Deload week styling' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WeekRow>
+
+export const Default: Story = {
+  args: {
+    weekNumber: 1,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'completed' },
+      { name: 'Lower', status: 'completed' },
+      { name: 'Full', status: 'upcoming' },
+    ],
+    intensityLevel: 0.45,
+    intensityThreshold: 0.8,
+  },
+}
+
+export const CurrentWeek: Story = {
+  args: {
+    weekNumber: 3,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Push', status: 'completed' },
+      { name: 'Pull', status: 'current' },
+      { name: 'Legs', status: 'upcoming' },
+    ],
+    intensityLevel: 0.75,
+    intensityThreshold: 0.8,
+    isCurrent: true,
+  },
+}
+
+export const DeloadWeek: Story = {
+  args: {
+    weekNumber: 4,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'upcoming' },
+      { name: 'Lower', status: 'upcoming' },
+    ],
+    intensityLevel: 0.3,
+    intensityThreshold: 0.8,
+    isDeload: true,
+  },
+}
+
+export const MesocycleProgression: Story = {
+  render: () => (
+    <View style={{ gap: 2, padding: 16, maxWidth: 420 }}>
+      <WeekRow
+        weekNumber={1}
+        totalWeeks={4}
+        workouts={[
+          { name: 'Upper', status: 'completed' },
+          { name: 'Lower', status: 'completed' },
+          { name: 'Full', status: 'completed' },
+        ]}
+        intensityLevel={0.45}
+        intensityThreshold={0.8}
+      />
+      <WeekRow
+        weekNumber={2}
+        totalWeeks={4}
+        workouts={[
+          { name: 'Upper', status: 'completed' },
+          { name: 'Lower', status: 'completed' },
+          { name: 'Full', status: 'completed' },
+        ]}
+        intensityLevel={0.6}
+        intensityThreshold={0.8}
+      />
+      <WeekRow
+        weekNumber={3}
+        totalWeeks={4}
+        workouts={[
+          { name: 'Upper', status: 'completed' },
+          { name: 'Lower', status: 'current' },
+          { name: 'Full', status: 'upcoming' },
+        ]}
+        intensityLevel={0.78}
+        intensityThreshold={0.8}
+        isCurrent
+      />
+      <WeekRow
+        weekNumber={4}
+        totalWeeks={4}
+        workouts={[
+          { name: 'Upper', status: 'upcoming' },
+          { name: 'Lower', status: 'upcoming' },
+        ]}
+        intensityLevel={0.3}
+        intensityThreshold={0.8}
+        isDeload
+      />
+    </View>
+  ),
+}

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

@@ -0,0 +1,117 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { WeekRow } from './WeekRow'
+import type { WeekRowWorkout } from './WeekRow'
+
+const workouts: WeekRowWorkout[] = [
+  { name: 'Upper', status: 'completed' },
+  { name: 'Lower', status: 'current' },
+  { name: 'Full', status: 'upcoming' },
+]
+
+const baseProps = {
+  weekNumber: 1,
+  totalWeeks: 4,
+  workouts,
+  intensityLevel: 0.55,
+}
+
+describe('WeekRow', () => {
+  describe('rendering', () => {
+    it('renders the week number label', () => {
+      render(<WeekRow {...baseProps} />)
+      expect(screen.getByTestId('week-row-number')).toHaveTextContent('W1')
+    })
+
+    it('renders a workout pill for each workout', () => {
+      render(<WeekRow {...baseProps} />)
+      expect(screen.getAllByTestId('workout-pill')).toHaveLength(3)
+    })
+
+    it('renders the intensity bar', () => {
+      render(<WeekRow {...baseProps} />)
+      expect(screen.getByTestId('week-row-intensity')).toBeInTheDocument()
+      expect(screen.getByTestId('intensity-bar')).toBeInTheDocument()
+    })
+
+    it('passes the threshold through to the intensity bar', () => {
+      render(<WeekRow {...baseProps} intensityThreshold={0.8} />)
+      expect(screen.getByTestId('intensity-threshold')).toBeInTheDocument()
+    })
+
+    it('omits the threshold line when not provided', () => {
+      render(<WeekRow {...baseProps} />)
+      expect(screen.queryByTestId('intensity-threshold')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('current week', () => {
+    it('renders the current week marker dot', () => {
+      render(<WeekRow {...baseProps} isCurrent />)
+      expect(screen.getByTestId('week-row-current-dot')).toBeInTheDocument()
+    })
+
+    it('does not render the marker dot when not current', () => {
+      render(<WeekRow {...baseProps} />)
+      expect(screen.queryByTestId('week-row-current-dot')).not.toBeInTheDocument()
+    })
+
+    it('applies the current-week tint and left border', () => {
+      render(<WeekRow {...baseProps} isCurrent />)
+      const style = screen.getByTestId('week-row').getAttribute('style') ?? ''
+      expect(style).toContain('background-color')
+      expect(style).toContain('border-left')
+    })
+  })
+
+  describe('deload week', () => {
+    it('renders all pills with the deload status', () => {
+      render(<WeekRow {...baseProps} isDeload />)
+      expect(screen.getAllByLabelText(/workout, deload/)).toHaveLength(3)
+    })
+
+    it('applies a purple tint to the row', () => {
+      render(<WeekRow {...baseProps} isDeload />)
+      const style = screen.getByTestId('week-row').getAttribute('style') ?? ''
+      expect(style).toContain('background-color')
+    })
+  })
+
+  describe('interaction', () => {
+    it('invokes onPress for a pressable workout', () => {
+      const onPress = vi.fn()
+      render(
+        <WeekRow
+          {...baseProps}
+          workouts={[{ name: 'Upper', status: 'current', onPress }]}
+        />,
+      )
+      fireEvent.click(screen.getByTestId('workout-pill-pressable'))
+      expect(onPress).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has a descriptive accessibility label', () => {
+      render(<WeekRow {...baseProps} />)
+      expect(
+        screen.getByLabelText('Week 1 of 4, 3 workouts'),
+      ).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(<WeekRow {...baseProps} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations as a current deload week', async () => {
+      const { container } = render(
+        <WeekRow {...baseProps} isCurrent isDeload intensityThreshold={0.8} />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,140 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+import { WorkoutPill, type WorkoutPillStatus } from './WorkoutPill'
+import { IntensityBar } from './IntensityBar'
+
+const BRAND_PRIMARY = '#FF7900'
+
+export interface WeekRowWorkout {
+  name: string
+  status: WorkoutPillStatus
+  onPress?: () => void
+}
+
+export interface WeekRowProps extends ViewProps {
+  /** Week index within the mesocycle (1-based) */
+  weekNumber: number
+  /** Total weeks in the mesocycle */
+  totalWeeks: number
+  /** Workouts scheduled for this week */
+  workouts: WeekRowWorkout[]
+  /** Planned intensity for the week, 0-1 */
+  intensityLevel: number
+  /** Optional MRV/overexertion threshold, 0-1 */
+  intensityThreshold?: number
+  /** Highlights this row as the active week */
+  isCurrent?: boolean
+  /** Renders this row as a deload week (purple tint, deload pills) */
+  isDeload?: boolean
+  className?: string
+}
+
+/**
+ * A single week within a mesocycle, showing the week number, its workout pills,
+ * and a right-aligned vertical intensity indicator.
+ *
+ * @example
+ * <WeekRow
+ *   weekNumber={1}
+ *   totalWeeks={4}
+ *   workouts={[
+ *     { name: 'Upper', status: 'completed' },
+ *     { name: 'Lower', status: 'current' },
+ *   ]}
+ *   intensityLevel={0.55}
+ *   intensityThreshold={0.8}
+ *   isCurrent
+ * />
+ */
+export function WeekRow({
+  weekNumber,
+  totalWeeks,
+  workouts,
+  intensityLevel,
+  intensityThreshold,
+  isCurrent = false,
+  isDeload = false,
+  className,
+  ...props
+}: WeekRowProps) {
+  const rowStyle: Record<string, unknown> = {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    gap: 12,
+  }
+
+  if (isDeload) {
+    rowStyle.backgroundColor = 'rgba(147,51,234,0.06)'
+  }
+
+  if (isCurrent) {
+    rowStyle.backgroundColor = 'rgba(255,121,0,0.04)'
+    rowStyle.borderLeftWidth = 2
+    rowStyle.borderLeftColor = BRAND_PRIMARY
+  }
+
+  return (
+    <View
+      className={className}
+      style={rowStyle}
+      accessibilityLabel={`Week ${weekNumber} of ${totalWeeks}, ${workouts.length} workouts`}
+      testID="week-row"
+      {...props}
+    >
+      <View
+        style={{ flexDirection: 'row', alignItems: 'center', width: 32, gap: 4 }}
+        testID="week-row-number"
+      >
+        {isCurrent && (
+          <View
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: 3,
+              backgroundColor: BRAND_PRIMARY,
+            }}
+            accessibilityElementsHidden
+            testID="week-row-current-dot"
+          />
+        )}
+        <Text
+          style={{
+            fontSize: 13,
+            fontWeight: '700',
+            fontFamily: 'Inter, sans-serif',
+            color: isCurrent ? BRAND_PRIMARY : '#F3F4F6',
+          }}
+          accessibilityElementsHidden
+        >
+          {`W${weekNumber}`}
+        </Text>
+      </View>
+
+      <View
+        style={{ flex: 1, flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}
+        testID="week-row-pills"
+      >
+        {workouts.map((workout, i) => (
+          <WorkoutPill
+            key={i}
+            name={workout.name}
+            status={isDeload ? 'deload' : workout.status}
+            onPress={workout.onPress}
+          />
+        ))}
+      </View>
+
+      <View testID="week-row-intensity">
+        <IntensityBar
+          level={intensityLevel}
+          threshold={intensityThreshold}
+          orientation="vertical"
+          size={24}
+          thickness={6}
+        />
+      </View>
+    </View>
+  )
+}