@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,116 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { InputBar, type InputBarProps } from './InputBar'
+
+const defaultProps: InputBarProps = {
+  exerciseName: 'Bench Press',
+  setNumber: 2,
+  totalSets: 5,
+  reps: '5',
+  weight: '135',
+  unit: 'lbs',
+  onRepsChange: vi.fn(),
+  onWeightChange: vi.fn(),
+  onRecord: vi.fn(),
+  canRecord: true,
+  visible: true,
+}
+
+function renderInputBar(overrides: Partial<InputBarProps> = {}) {
+  return render(<InputBar {...defaultProps} {...overrides} />)
+}
+
+describe('InputBar', () => {
+  it('renders with all props', () => {
+    renderInputBar()
+    expect(screen.getByTestId('input-bar')).toBeInTheDocument()
+  })
+
+  it('displays exercise name', () => {
+    renderInputBar({ exerciseName: 'Squat' })
+    expect(screen.getByTestId('input-bar-exercise-name')).toHaveTextContent('Squat')
+  })
+
+  it('displays set info with total', () => {
+    renderInputBar({ setNumber: 3, totalSets: 4 })
+    expect(screen.getByTestId('input-bar-set-info')).toHaveTextContent('Set 3/4')
+  })
+
+  it('displays set info without total', () => {
+    renderInputBar({ setNumber: 1, totalSets: null })
+    expect(screen.getByTestId('input-bar-set-info')).toHaveTextContent('Set 1')
+  })
+
+  it('fires onRepsChange when reps input changes', () => {
+    const onRepsChange = vi.fn()
+    renderInputBar({ onRepsChange })
+    const input = screen.getByTestId('input-bar-reps')
+    fireEvent.change(input, { target: { value: '8' } })
+    expect(onRepsChange).toHaveBeenCalled()
+  })
+
+  it('fires onWeightChange when weight input changes', () => {
+    const onWeightChange = vi.fn()
+    renderInputBar({ onWeightChange })
+    const input = screen.getByTestId('input-bar-weight')
+    fireEvent.change(input, { target: { value: '225' } })
+    expect(onWeightChange).toHaveBeenCalled()
+  })
+
+  it('fires onRecord when record button is clicked', () => {
+    const onRecord = vi.fn()
+    renderInputBar({ onRecord })
+    fireEvent.click(screen.getByTestId('input-bar-record'))
+    expect(onRecord).toHaveBeenCalledOnce()
+  })
+
+  it('applies reduced opacity when canRecord is false', () => {
+    renderInputBar({ canRecord: false })
+    const button = screen.getByTestId('input-bar-record')
+    expect(button).toHaveStyle({ opacity: '0.4' })
+  })
+
+  it('returns null when visible is false', () => {
+    renderInputBar({ visible: false })
+    expect(screen.queryByTestId('input-bar')).not.toBeInTheDocument()
+  })
+
+  it('shows correct unit label', () => {
+    renderInputBar({ unit: 'kg' })
+    expect(screen.getByTestId('input-bar-unit')).toHaveTextContent('kg')
+  })
+
+  it('shows lbs unit label', () => {
+    renderInputBar({ unit: 'lbs' })
+    expect(screen.getByTestId('input-bar-unit')).toHaveTextContent('lbs')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = renderInputBar()
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has toolbar role on container', () => {
+      renderInputBar()
+      expect(screen.getByRole('toolbar')).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label on record button', () => {
+      renderInputBar()
+      expect(screen.getByLabelText('Record set')).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label on reps input', () => {
+      renderInputBar()
+      expect(screen.getByLabelText('Reps')).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label on weight input', () => {
+      renderInputBar({ unit: 'kg' })
+      expect(screen.getByLabelText('Weight in kg')).toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,162 @@
+// 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'
+
+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 = 'var(--color-text-primary)'
+const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+
+const inputStyle = {
+  fontSize: 14,
+  fontWeight: '600' as const,
+  fontFamily: 'Inter, sans-serif',
+  backgroundColor: 'var(--color-surface-raised)',
+  borderWidth: 1,
+  borderColor: 'var(--color-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: 'var(--color-surface-elevated)',
+        borderTopWidth: 1,
+        borderTopColor: 'var(--color-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>
+  )
+}