@titan-design/react-ui 0.2.6 → 0.2.7

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

@@ -0,0 +1,163 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import React from 'react'
+import { View, Text, Pressable, TextInput } from 'react-native'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+
+export interface InputBarProps {
+  exerciseName: string
+  setNumber: number
+  totalSets: number | null
+  reps: string
+  weight: string
+  unit: 'lbs' | 'kg'
+  onRepsChange: (value: string) => void
+  onWeightChange: (value: string) => void
+  onRecord: () => void
+  canRecord: boolean
+  visible: boolean
+}
+
+const BRAND_PRIMARY = '#FF7900'
+const TEXT_PRIMARY = '#F3F4F6'
+const TEXT_TERTIARY = '#6B7280'
+
+const inputStyle = {
+  fontSize: 14,
+  fontWeight: '600' as const,
+  fontFamily: 'Inter, sans-serif',
+  backgroundColor: WORKOUT_TOKENS.surface.raised,
+  borderWidth: 1,
+  borderColor: WORKOUT_TOKENS.border.strong,
+  borderRadius: 6,
+  textAlign: 'center' as const,
+  color: TEXT_PRIMARY,
+  paddingVertical: 5,
+  paddingHorizontal: 2,
+}
+
+export function InputBar({
+  exerciseName,
+  setNumber,
+  totalSets,
+  reps,
+  weight,
+  unit,
+  onRepsChange,
+  onWeightChange,
+  onRecord,
+  canRecord,
+  visible,
+}: InputBarProps) {
+  if (!visible) return null
+
+  const setLabel = totalSets != null ? `Set ${setNumber}/${totalSets}` : `Set ${setNumber}`
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        backgroundColor: WORKOUT_TOKENS.surface.elevated,
+        borderTopWidth: 1,
+        borderTopColor: WORKOUT_TOKENS.border.default,
+        paddingTop: 10,
+        paddingHorizontal: 16,
+        paddingBottom: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+      }}
+      accessibilityRole="toolbar"
+      testID="input-bar"
+    >
+      <View style={{ minWidth: 80, flexDirection: 'column' }}>
+        <Text
+          style={{
+            fontSize: 12,
+            fontWeight: '700',
+            fontFamily: '"Space Grotesk", sans-serif',
+            color: TEXT_PRIMARY,
+          }}
+          testID="input-bar-exercise-name"
+          numberOfLines={1}
+        >
+          {exerciseName}
+        </Text>
+        <Text
+          style={{
+            fontSize: 10,
+            fontFamily: 'Inter, sans-serif',
+            color: TEXT_TERTIARY,
+          }}
+          testID="input-bar-set-info"
+        >
+          {setLabel}
+        </Text>
+      </View>
+
+      <View className="flex-1 flex-row items-center" style={{ gap: 4 }}>
+        <TextInput
+          value={reps}
+          onChangeText={onRepsChange}
+          style={{ ...inputStyle, width: 36 }}
+          accessibilityLabel="Reps"
+          testID="input-bar-reps"
+          keyboardType="numeric"
+        />
+        <Text
+          style={{
+            fontSize: 12,
+            fontFamily: 'Inter, sans-serif',
+            color: TEXT_TERTIARY,
+          }}
+        >
+          {'\u00D7'}
+        </Text>
+        <TextInput
+          value={weight}
+          onChangeText={onWeightChange}
+          style={{ ...inputStyle, width: 52 }}
+          accessibilityLabel={`Weight in ${unit}`}
+          testID="input-bar-weight"
+          keyboardType="numeric"
+        />
+        <Text
+          style={{
+            fontSize: 12,
+            fontWeight: '500',
+            fontFamily: 'Inter, sans-serif',
+            color: TEXT_TERTIARY,
+          }}
+          testID="input-bar-unit"
+        >
+          {unit}
+        </Text>
+      </View>
+
+      <Pressable
+        onPress={onRecord}
+        disabled={!canRecord}
+        style={({ pressed }) => ({
+          backgroundColor: BRAND_PRIMARY,
+          borderRadius: 8,
+          paddingVertical: 10,
+          paddingHorizontal: 16,
+          opacity: !canRecord ? 0.4 : pressed ? 0.8 : 1,
+        })}
+        accessibilityRole="button"
+        accessibilityLabel="Record set"
+        testID="input-bar-record"
+      >
+        <Text
+          style={{
+            fontSize: 13,
+            fontWeight: '700',
+            fontFamily: 'Inter, sans-serif',
+            color: '#FFFFFF',
+          }}
+        >
+          Record
+        </Text>
+      </Pressable>
+    </View>
+  )
+}

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { IntensityBar } from './IntensityBar'
+
+const meta: Meta<typeof IntensityBar> = {
+  title: 'Custom/Workout/IntensityBar',
+  component: IntensityBar,
+  tags: ['autodocs'],
+  argTypes: {
+    level: {
+      control: { type: 'range', min: 0, max: 1, step: 0.05 },
+      description: 'Intensity level (0-1)',
+    },
+    threshold: {
+      control: { type: 'range', min: 0, max: 1, step: 0.05 },
+      description: 'MRV/overexertion threshold position (0-1)',
+    },
+    orientation: {
+      control: { type: 'radio' },
+      options: ['vertical', 'horizontal'],
+      description: 'Bar orientation',
+    },
+    size: { control: 'number', description: 'Length along the fill axis (px)' },
+    thickness: { control: 'number', description: 'Bar thickness (px)' },
+    showThresholdLabel: { control: 'boolean', description: 'Show MRV label' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof IntensityBar>
+
+export const Low: Story = {
+  args: { level: 0.3, threshold: 0.85, showThresholdLabel: true },
+}
+
+export const Moderate: Story = {
+  args: { level: 0.55, threshold: 0.85, showThresholdLabel: true },
+}
+
+export const High: Story = {
+  args: { level: 0.85, threshold: 0.85, showThresholdLabel: true },
+}
+
+export const Horizontal: Story = {
+  args: { level: 0.6, threshold: 0.85, orientation: 'horizontal', size: 120 },
+}
+
+export const AllZones: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16, alignItems: 'flex-end', padding: 16 }}>
+      <IntensityBar level={0.2} threshold={0.85} showThresholdLabel />
+      <IntensityBar level={0.35} threshold={0.85} showThresholdLabel />
+      <IntensityBar level={0.5} threshold={0.85} showThresholdLabel />
+      <IntensityBar level={0.65} threshold={0.85} showThresholdLabel />
+      <IntensityBar level={0.75} threshold={0.85} showThresholdLabel />
+      <IntensityBar level={0.9} threshold={0.85} showThresholdLabel />
+      <IntensityBar level={1.0} threshold={0.85} showThresholdLabel />
+    </View>
+  ),
+}

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

@@ -0,0 +1,113 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { IntensityBar } from './IntensityBar'
+
+describe('IntensityBar', () => {
+  it('renders the bar', () => {
+    render(<IntensityBar level={0.5} />)
+    expect(screen.getByTestId('intensity-bar')).toBeInTheDocument()
+  })
+
+  it('renders fill element', () => {
+    render(<IntensityBar level={0.5} />)
+    expect(screen.getByTestId('intensity-fill')).toBeInTheDocument()
+  })
+
+  it('renders threshold line when threshold is provided', () => {
+    render(<IntensityBar level={0.5} threshold={0.85} />)
+    expect(screen.getByTestId('intensity-threshold')).toBeInTheDocument()
+  })
+
+  it('does not render threshold line when threshold is omitted', () => {
+    render(<IntensityBar level={0.5} />)
+    expect(screen.queryByTestId('intensity-threshold')).not.toBeInTheDocument()
+  })
+
+  it('shows MRV label when showThresholdLabel is true and threshold set', () => {
+    render(<IntensityBar level={0.6} threshold={0.85} showThresholdLabel />)
+    expect(screen.getByText('MRV')).toBeInTheDocument()
+  })
+
+  it('hides MRV label when showThresholdLabel is false', () => {
+    render(<IntensityBar level={0.6} threshold={0.85} />)
+    expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
+  })
+
+  it('hides MRV label when threshold is omitted even if showThresholdLabel is true', () => {
+    render(<IntensityBar level={0.6} showThresholdLabel />)
+    expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
+  })
+
+  it('has correct accessibility role', () => {
+    render(<IntensityBar level={0.5} />)
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+  })
+
+  it('maps level 0-1 to percentage in accessibility label', () => {
+    render(<IntensityBar level={0.75} />)
+    expect(screen.getByLabelText('Intensity level: 75%')).toBeInTheDocument()
+  })
+
+  it('clamps level above 1 to 100%', () => {
+    render(<IntensityBar level={1.5} />)
+    expect(screen.getByLabelText('Intensity level: 100%')).toBeInTheDocument()
+  })
+
+  it('clamps level below 0 to 0%', () => {
+    render(<IntensityBar level={-0.5} />)
+    expect(screen.getByLabelText('Intensity level: 0%')).toBeInTheDocument()
+  })
+
+  it('renders horizontal orientation', () => {
+    render(<IntensityBar level={0.5} orientation="horizontal" />)
+    expect(screen.getByTestId('intensity-fill')).toBeInTheDocument()
+  })
+
+  it('accepts custom size and thickness', () => {
+    render(<IntensityBar level={0.5} size={32} thickness={8} />)
+    expect(screen.getByTestId('intensity-bar')).toBeInTheDocument()
+  })
+
+  describe('fill zones', () => {
+    it('renders teal fill for low levels (0-0.4)', () => {
+      render(<IntensityBar level={0.3} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+    })
+
+    it('renders amber fill for moderate levels (0.4-0.7)', () => {
+      render(<IntensityBar level={0.5} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+    })
+
+    it('renders red fill for high levels (0.7-1.0)', () => {
+      render(<IntensityBar level={0.85} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#D14343' })
+    })
+
+    it('uses teal at the lower zone boundary', () => {
+      render(<IntensityBar level={0.39} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+    })
+
+    it('uses amber at the 0.4 boundary', () => {
+      render(<IntensityBar level={0.4} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+    })
+
+    it('uses red at the 0.7 boundary', () => {
+      render(<IntensityBar level={0.7} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#D14343' })
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <IntensityBar level={0.5} threshold={0.85} showThresholdLabel />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,166 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useEffect, useState } from 'react'
+import { View, Text, Animated, type ViewProps, type ViewStyle } from 'react-native'
+
+export type IntensityBarOrientation = 'vertical' | 'horizontal'
+
+export interface IntensityBarProps extends ViewProps {
+  /** Current intensity level 0-1 */
+  level: number
+  /** MRV/overexertion threshold position 0-1 */
+  threshold?: number
+  /** Orientation */
+  orientation?: IntensityBarOrientation
+  /** Height for vertical (default 24px) or width for horizontal */
+  size?: number
+  /** Width for vertical (default 6px) or height for horizontal */
+  thickness?: number
+  /** Show threshold label ("MRV") */
+  showThresholdLabel?: boolean
+  className?: string
+}
+
+const TRACK_BG = 'rgba(255,255,255,0.06)'
+const THRESHOLD_COLOR = '#FFFFFF'
+const LABEL_COLOR = '#6B7280'
+
+/** Fill color by intensity zone: teal 0-0.4, amber 0.4-0.7, red 0.7-1.0. */
+function getZoneColor(level: number): string {
+  if (level >= 0.7) return '#D14343'
+  if (level >= 0.4) return '#FFB020'
+  return '#14B8A6'
+}
+
+function clamp01(value: number): number {
+  if (value < 0) return 0
+  if (value > 1) return 1
+  return value
+}
+
+export function IntensityBar({
+  level,
+  threshold,
+  orientation = 'vertical',
+  size = 24,
+  thickness = 6,
+  showThresholdLabel,
+  className,
+  ...props
+}: IntensityBarProps) {
+  const isVertical = orientation === 'vertical'
+  const clampedLevel = clamp01(level)
+  const percentage = Math.round(clampedLevel * 100)
+  const zoneColor = getZoneColor(clampedLevel)
+
+  const [fillAnim] = useState(() => new Animated.Value(clampedLevel))
+
+  useEffect(() => {
+    const animation = Animated.timing(fillAnim, {
+      toValue: clampedLevel,
+      duration: 250,
+      useNativeDriver: false,
+    })
+    animation.start()
+    return () => animation.stop()
+  }, [clampedLevel, fillAnim])
+
+  const fillSizePercent = fillAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  })
+
+  const trackStyle = isVertical
+    ? { width: thickness, height: size }
+    : { width: size, height: thickness }
+
+  const fillStyle = isVertical
+    ? {
+        position: 'absolute' as const,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: fillSizePercent,
+      }
+    : {
+        position: 'absolute' as const,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: fillSizePercent,
+      }
+
+  const thresholdLineStyle: ViewStyle | undefined =
+    threshold != null
+      ? isVertical
+        ? {
+            position: 'absolute' as const,
+            bottom: `${clamp01(threshold) * 100}%`,
+            left: -2,
+            right: -2,
+            height: 1,
+            backgroundColor: THRESHOLD_COLOR,
+            zIndex: 4,
+          }
+        : {
+            position: 'absolute' as const,
+            left: `${clamp01(threshold) * 100}%`,
+            top: -2,
+            bottom: -2,
+            width: 1,
+            backgroundColor: THRESHOLD_COLOR,
+            zIndex: 4,
+          }
+      : undefined
+
+  return (
+    <View
+      className={className}
+      style={{ alignItems: 'center' }}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max: 100, now: percentage }}
+      accessibilityLabel={`Intensity level: ${percentage}%`}
+      testID="intensity-bar"
+      {...props}
+    >
+      <View
+        style={{
+          ...trackStyle,
+          borderRadius: 3,
+          backgroundColor: TRACK_BG,
+          position: 'relative',
+          overflow: 'visible',
+        }}
+        accessibilityElementsHidden
+      >
+        <Animated.View
+          style={{
+            ...fillStyle,
+            borderRadius: 3,
+            backgroundColor: zoneColor,
+            zIndex: 2,
+          }}
+          testID="intensity-fill"
+        />
+
+        {threshold != null && (
+          <View style={thresholdLineStyle} testID="intensity-threshold" />
+        )}
+      </View>
+      {showThresholdLabel && threshold != null && (
+        <Text
+          style={{
+            fontSize: 8,
+            fontWeight: '500',
+            color: LABEL_COLOR,
+            fontFamily: 'Inter, sans-serif',
+            marginTop: 6,
+          }}
+          accessibilityElementsHidden
+          testID="intensity-threshold-label"
+        >
+          MRV
+        </Text>
+      )}
+    </View>
+  )
+}

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

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View } from 'react-native'
+import { MesoCard } from './MesoCard'
+import type { WeekRowProps } from './WeekRow'
+
+const weeks: WeekRowProps[] = [
+  {
+    weekNumber: 1,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'completed' },
+      { name: 'Lower', status: 'completed' },
+    ],
+    intensityLevel: 0.4,
+    intensityThreshold: 0.85,
+  },
+  {
+    weekNumber: 2,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'current' },
+      { name: 'Lower', status: 'upcoming' },
+    ],
+    intensityLevel: 0.6,
+    intensityThreshold: 0.85,
+  },
+  {
+    weekNumber: 3,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'upcoming' },
+      { name: 'Lower', status: 'upcoming' },
+    ],
+    intensityLevel: 0.8,
+    intensityThreshold: 0.85,
+  },
+  {
+    weekNumber: 4,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'upcoming' },
+      { name: 'Lower', status: 'upcoming' },
+    ],
+    intensityLevel: 0.35,
+    isDeload: true,
+  },
+]
+
+const meta: Meta<typeof MesoCard> = {
+  title: 'Custom/Workout/MesoCard',
+  component: MesoCard,
+  tags: ['autodocs'],
+  argTypes: {
+    goal: {
+      control: 'select',
+      options: ['Hypertrophy', 'Strength', 'Peaking'],
+      description: 'Training goal shown in the badge',
+    },
+    expanded: {
+      control: 'boolean',
+      description: 'Whether the week list is revealed',
+    },
+    highlighted: {
+      control: 'boolean',
+      description: 'Synced highlight with the MesoProgressBar',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof MesoCard>
+
+export const Collapsed: Story = {
+  args: {
+    name: 'Accumulation',
+    goal: 'Hypertrophy',
+    split: 'Upper/Lower',
+    weekRange: 'Weeks 1-4',
+    currentWeek: 2,
+    totalWeeks: 4,
+    weeks,
+    volumeHeatmap: [
+      { group: 'chest', percentage: 80 },
+      { group: 'back', percentage: 70 },
+      { group: 'legs', percentage: 90 },
+      { group: 'shoulders', percentage: 45 },
+      { group: 'arms', percentage: 35 },
+    ],
+  },
+}
+
+export const Expanded: Story = {
+  args: {
+    ...Collapsed.args,
+    expanded: true,
+  },
+}
+
+export const Highlighted: Story = {
+  args: {
+    ...Collapsed.args,
+    expanded: true,
+    highlighted: true,
+  },
+}
+
+export const StrengthBlock: Story = {
+  args: {
+    name: 'Intensification',
+    goal: 'Strength',
+    split: 'Push/Pull/Legs',
+    weekRange: 'Weeks 5-8',
+    currentWeek: 6,
+    totalWeeks: 4,
+    weeks: weeks.map((w) => ({ ...w, weekNumber: w.weekNumber + 4 })),
+    volumeHeatmap: [
+      { group: 'chest', percentage: 60 },
+      { group: 'back', percentage: 65 },
+      { group: 'legs', percentage: 75 },
+    ],
+    expanded: true,
+  },
+}
+
+function InteractiveMesoCard() {
+  const [expanded, setExpanded] = useState(false)
+  return (
+    <View style={{ maxWidth: 420, padding: 16 }}>
+      <MesoCard
+        name="Accumulation"
+        goal="Hypertrophy"
+        split="Upper/Lower"
+        weekRange="Weeks 1-4"
+        currentWeek={2}
+        totalWeeks={4}
+        weeks={weeks}
+        volumeHeatmap={[
+          { group: 'chest', percentage: 80 },
+          { group: 'back', percentage: 70 },
+          { group: 'legs', percentage: 90 },
+        ]}
+        expanded={expanded}
+        onToggle={() => setExpanded((v) => !v)}
+      />
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveMesoCard />,
+}