@titan-design/react-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,78 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, type ViewProps, type ViewStyle } from 'react-native'
+
+export interface DeviationBarProps extends ViewProps {
+  deviation: number
+  width?: number
+  className?: string
+}
+
+function getDotColor(deviation: number): string {
+  const abs = Math.abs(deviation)
+  if (deviation < -0.3) return '#14B8A6'
+  if (abs <= 0.3) return '#6B7280'
+  if (abs <= 0.7) return '#FFB020'
+  return '#D14343'
+}
+
+function getDeviationDescription(deviation: number): string {
+  if (deviation < -0.3) return 'lighter than planned'
+  if (deviation > 0.3) return 'harder than planned'
+  return 'on plan'
+}
+
+export function DeviationBar({
+  deviation,
+  width,
+  className,
+  ...props
+}: DeviationBarProps) {
+  const clamped = Math.max(-1, Math.min(1, deviation))
+  const resolvedWidth = width ?? 40
+  const dotPosition = ((clamped + 1) / 2) * resolvedWidth
+  const dotSize = 8
+  const trackHeight = 6
+  const containerHeight = 10
+  const valueNow = Math.round(clamped * 100)
+
+  return (
+    <View
+      className={className}
+      style={{ flexDirection: 'row', alignItems: 'center', height: containerHeight, width: resolvedWidth }}
+      accessibilityRole="adjustable"
+      accessibilityValue={{ min: -100, max: 100, now: valueNow }}
+      accessibilityLabel={`Session deviation: ${getDeviationDescription(clamped)}`}
+      testID="deviation-bar"
+      aria-valuenow={valueNow}
+      aria-valuemin={-100}
+      aria-valuemax={100}
+      {...props}
+    >
+      <View
+        style={{
+          height: trackHeight,
+          width: resolvedWidth,
+          borderRadius: 3,
+          // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
+          backgroundImage:
+            'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(255,176,32,0.25) 100%)',
+        } as ViewStyle}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: dotSize,
+          height: dotSize,
+          borderRadius: 9999,
+          borderWidth: 1.5,
+          borderColor: '#F3F4F6',
+          boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+          backgroundColor: getDotColor(clamped),
+          left: Math.max(0, Math.min(dotPosition - dotSize / 2, resolvedWidth - dotSize)),
+          top: (containerHeight - dotSize) / 2,
+        }}
+        testID="deviation-dot"
+      />
+    </View>
+  )
+}

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

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { ExerciseCard } from './ExerciseCard'
+import type { SetRowProps } from './SetRow'
+
+const meta: Meta<typeof ExerciseCard> = {
+  title: 'Custom/Workout/ExerciseCard',
+  component: ExerciseCard,
+  tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: 'select',
+      options: ['collapsed', 'expanded', 'upcoming'],
+      description: 'Card display state',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ maxWidth: 400, padding: 16, backgroundColor: '#121212' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ExerciseCard>
+
+const sampleSets: SetRowProps[] = [
+  {
+    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],
+  },
+  {
+    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],
+  },
+  {
+    mode: 'active',
+    setNumber: 3,
+    reps: null,
+    weight: null,
+    unit: 'lbs',
+    isNextSet: true,
+    targets: { reps: 8, weight: 135 },
+    previous: { reps: 8, weight: 135 },
+  },
+  {
+    mode: 'active',
+    setNumber: 4,
+    reps: null,
+    weight: null,
+    unit: 'lbs',
+    targets: { reps: 8, weight: 135 },
+    previous: { reps: 8, weight: 135 },
+  },
+]
+
+export const CollapsedWithVelocity: Story = {
+  args: {
+    name: 'Bench Press',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 4, reps: 8, weight: 135, unit: 'lbs' },
+    setVelocities: [
+      [1.1, 0.95, 0.82, 0.68, 0.55, 0.48, 0.42, 0.38],
+      [0.95, 0.88, 0.78, 0.65, 0.52, 0.45, 0.40, 0.35],
+    ],
+    totalPlannedSets: 4,
+    e1rm: { value: 225, unit: 'lbs' },
+  },
+}
+
+export const CollapsedWithPR: Story = {
+  args: {
+    name: 'Squat',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 3, reps: 5, weight: 275, unit: 'lbs' },
+    setVelocities: [
+      [0.65, 0.55, 0.45, 0.38, 0.32],
+      [0.60, 0.50, 0.42, 0.35, 0.30],
+      [0.58, 0.48, 0.40, 0.33, 0.28],
+    ],
+    totalPlannedSets: 3,
+    e1rm: { value: 365, unit: 'lbs' },
+    isPR: true,
+  },
+}
+
+export const ExpandedWithSets: Story = {
+  args: {
+    name: 'Bench Press',
+    state: 'expanded',
+    onToggle: () => {},
+    summary: { sets: 4, reps: 8, weight: 135, unit: 'lbs' },
+    sets: sampleSets,
+    e1rm: { value: 225, unit: 'lbs' },
+  },
+}
+
+export const ExpandedWithTempo: Story = {
+  args: {
+    name: 'Romanian Deadlift',
+    state: 'expanded',
+    onToggle: () => {},
+    summary: { sets: 3, reps: 10, weight: 185, unit: 'lbs' },
+    tempo: [2, 1, 3, 0],
+    sets: [
+      {
+        mode: 'completed',
+        setNumber: 1,
+        reps: 10,
+        weight: 185,
+        unit: 'lbs',
+        rpe: 7,
+        previous: { reps: 10, weight: 175 },
+      },
+      {
+        mode: 'active',
+        setNumber: 2,
+        reps: null,
+        weight: null,
+        unit: 'lbs',
+        isNextSet: true,
+        targets: { reps: 10, weight: 185 },
+        previous: { reps: 10, weight: 185 },
+      },
+      {
+        mode: 'active',
+        setNumber: 3,
+        reps: null,
+        weight: null,
+        unit: 'lbs',
+        targets: { reps: 10, weight: 185 },
+        previous: { reps: 10, weight: 185 },
+      },
+    ],
+  },
+}
+
+export const Upcoming: Story = {
+  args: {
+    name: 'Lat Pulldown',
+    state: 'upcoming',
+    onToggle: () => {},
+    prescription: '3\u00D78-12 @ RPE 8',
+    previousBest: '135 lbs \u00D7 10',
+  },
+}
+
+export const SupersetFirst: Story = {
+  args: {
+    name: 'Bench Press',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 3, reps: 8, weight: 185, unit: 'lbs' },
+    supersetPosition: 'first',
+    setVelocities: [[1.0, 0.9, 0.8]],
+    totalPlannedSets: 3,
+  },
+}
+
+export const SupersetLast: Story = {
+  args: {
+    name: 'Barbell Row',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 3, reps: 8, weight: 155, unit: 'lbs' },
+    supersetPosition: 'last',
+    setVelocities: [[0.9, 0.8, 0.7]],
+    totalPlannedSets: 3,
+  },
+}

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

@@ -0,0 +1,319 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { ExerciseCard } from './ExerciseCard'
+import type { SetRowProps } from './SetRow'
+
+const baseCollapsedProps = {
+  name: 'Bench Press',
+  state: 'collapsed' as const,
+  onToggle: vi.fn(),
+  summary: { sets: 3, reps: 6, weight: 175, unit: 'lbs' as const },
+}
+
+const baseSets: SetRowProps[] = [
+  { mode: 'completed', setNumber: 1, reps: 8, weight: 135, unit: 'lbs' },
+  { mode: 'completed', setNumber: 2, reps: 8, weight: 135, unit: 'lbs' },
+  { mode: 'active', setNumber: 3, reps: null, weight: null, unit: 'lbs', isNextSet: true },
+]
+
+describe('ExerciseCard', () => {
+  describe('collapsed state', () => {
+    it('renders exercise name', () => {
+      render(<ExerciseCard {...baseCollapsedProps} />)
+      expect(screen.getByTestId('exercise-card-name')).toHaveTextContent('Bench Press')
+    })
+
+    it('renders summary text', () => {
+      render(<ExerciseCard {...baseCollapsedProps} />)
+      expect(screen.getByTestId('exercise-card-summary')).toHaveTextContent(
+        '3\u00D76 @ 175 lbs',
+      )
+    })
+
+    it('renders WeightBadge when e1rm provided', () => {
+      render(
+        <ExerciseCard
+          {...baseCollapsedProps}
+          e1rm={{ value: 225, unit: 'lbs' }}
+        />,
+      )
+      expect(screen.getByTestId('exercise-card-e1rm')).toBeInTheDocument()
+    })
+
+    it('renders PrBadge when isPR is true', () => {
+      render(<ExerciseCard {...baseCollapsedProps} isPR />)
+      expect(screen.getByTestId('pr-badge-star')).toBeInTheDocument()
+    })
+
+    it('renders mini velocity strips for completed sets', () => {
+      render(
+        <ExerciseCard
+          {...baseCollapsedProps}
+          setVelocities={[[1.1, 0.95], [0.9, 0.8]]}
+          totalPlannedSets={4}
+        />,
+      )
+      expect(screen.getByTestId('exercise-card-velocity-strip-0')).toBeInTheDocument()
+      expect(screen.getByTestId('exercise-card-velocity-strip-1')).toBeInTheDocument()
+    })
+
+    it('renders placeholder strips for remaining planned sets', () => {
+      render(
+        <ExerciseCard
+          {...baseCollapsedProps}
+          setVelocities={[[1.1, 0.95]]}
+          totalPlannedSets={3}
+        />,
+      )
+      expect(screen.getByTestId('exercise-card-placeholder-0')).toBeInTheDocument()
+      expect(screen.getByTestId('exercise-card-placeholder-1')).toBeInTheDocument()
+    })
+
+    it('does not render strips container when no velocities and no planned sets', () => {
+      render(<ExerciseCard {...baseCollapsedProps} />)
+      expect(screen.queryByTestId('exercise-card-strips')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('expanded state', () => {
+    const expandedProps = {
+      name: 'Squat',
+      state: 'expanded' as const,
+      onToggle: vi.fn(),
+      summary: { sets: 3, reps: 8, weight: 185, unit: 'lbs' as const },
+      sets: baseSets,
+    }
+
+    it('renders exercise name in header', () => {
+      render(<ExerciseCard {...expandedProps} />)
+      expect(screen.getByTestId('exercise-card-name')).toHaveTextContent('Squat')
+    })
+
+    it('renders column headers', () => {
+      render(<ExerciseCard {...expandedProps} />)
+      const headers = screen.getByTestId('exercise-card-column-headers')
+      expect(headers).toHaveTextContent('SET')
+      expect(headers).toHaveTextContent('PREV')
+      expect(headers).toHaveTextContent('REPS')
+      expect(headers).toHaveTextContent('LBS')
+      expect(headers).toHaveTextContent('RPE')
+    })
+
+    it('renders SetRow components', () => {
+      render(<ExerciseCard {...expandedProps} />)
+      const setRows = screen.getAllByTestId('set-row')
+      expect(setRows).toHaveLength(3)
+    })
+
+    it('renders TempoDisplay when tempo provided', () => {
+      render(
+        <ExerciseCard
+          {...expandedProps}
+          tempo={[2, 1, 3, 0]}
+        />,
+      )
+      expect(screen.getByTestId('exercise-card-tempo')).toBeInTheDocument()
+      expect(screen.getByTestId('tempo-display')).toBeInTheDocument()
+    })
+
+    it('does not render TempoDisplay when no tempo', () => {
+      render(<ExerciseCard {...expandedProps} />)
+      expect(screen.queryByTestId('exercise-card-tempo')).not.toBeInTheDocument()
+    })
+
+    it('sets aria-expanded on header button', () => {
+      render(<ExerciseCard {...expandedProps} />)
+      const header = screen.getByTestId('exercise-card-header')
+      expect(header).toHaveAttribute('aria-expanded', 'true')
+    })
+  })
+
+  describe('upcoming state', () => {
+    const upcomingProps = {
+      name: 'Deadlift',
+      state: 'upcoming' as const,
+      onToggle: vi.fn(),
+      prescription: '3\u00D78-12 @ RPE 8',
+      previousBest: '185 lbs \u00D7 10',
+    }
+
+    it('renders with reduced opacity', () => {
+      render(<ExerciseCard {...upcomingProps} />)
+      const card = screen.getByTestId('exercise-card')
+      expect(card).toHaveStyle({ opacity: 0.6 })
+    })
+
+    it('renders exercise name', () => {
+      render(<ExerciseCard {...upcomingProps} />)
+      expect(screen.getByTestId('exercise-card-name')).toHaveTextContent('Deadlift')
+    })
+
+    it('renders prescription text', () => {
+      render(<ExerciseCard {...upcomingProps} />)
+      expect(screen.getByTestId('exercise-card-prescription')).toHaveTextContent(
+        '3\u00D78-12 @ RPE 8',
+      )
+    })
+
+    it('renders previous best text', () => {
+      render(<ExerciseCard {...upcomingProps} />)
+      expect(screen.getByTestId('exercise-card-previous-best')).toHaveTextContent(
+        '185 lbs \u00D7 10',
+      )
+    })
+
+    it('does not render interactive elements', () => {
+      render(<ExerciseCard {...upcomingProps} />)
+      expect(screen.queryByTestId('exercise-card-strips')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('exercise-card-column-headers')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('onToggle', () => {
+    it('fires onToggle when collapsed card is pressed', () => {
+      const onToggle = vi.fn()
+      render(
+        <ExerciseCard
+          {...baseCollapsedProps}
+          onToggle={onToggle}
+        />,
+      )
+      fireEvent.click(screen.getByTestId('exercise-card-header'))
+      expect(onToggle).toHaveBeenCalledOnce()
+    })
+
+    it('fires onToggle when expanded header is pressed', () => {
+      const onToggle = vi.fn()
+      render(
+        <ExerciseCard
+          name="Squat"
+          state="expanded"
+          onToggle={onToggle}
+          sets={baseSets}
+        />,
+      )
+      fireEvent.click(screen.getByTestId('exercise-card-header'))
+      expect(onToggle).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('superset position border radius', () => {
+    it('applies first position border radius', () => {
+      render(
+        <ExerciseCard
+          {...baseCollapsedProps}
+          supersetPosition="first"
+        />,
+      )
+      const card = screen.getByTestId('exercise-card')
+      const container = card.firstChild as HTMLElement
+      expect(container).toHaveStyle({
+        borderTopLeftRadius: '12px',
+        borderTopRightRadius: '12px',
+        borderBottomLeftRadius: '8px',
+        borderBottomRightRadius: '8px',
+      })
+    })
+
+    it('applies last position border radius', () => {
+      render(
+        <ExerciseCard
+          {...baseCollapsedProps}
+          supersetPosition="last"
+        />,
+      )
+      const card = screen.getByTestId('exercise-card')
+      const container = card.firstChild as HTMLElement
+      expect(container).toHaveStyle({
+        borderTopLeftRadius: '8px',
+        borderTopRightRadius: '8px',
+        borderBottomLeftRadius: '12px',
+        borderBottomRightRadius: '12px',
+      })
+    })
+
+    it('applies middle position border radius', () => {
+      render(
+        <ExerciseCard
+          {...baseCollapsedProps}
+          supersetPosition="middle"
+        />,
+      )
+      const card = screen.getByTestId('exercise-card')
+      const container = card.firstChild as HTMLElement
+      expect(container).toHaveStyle({
+        borderTopLeftRadius: '8px',
+        borderTopRightRadius: '8px',
+        borderBottomLeftRadius: '8px',
+        borderBottomRightRadius: '8px',
+      })
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has correct accessibility label for collapsed state', () => {
+      render(<ExerciseCard {...baseCollapsedProps} />)
+      expect(
+        screen.getByLabelText('Bench Press, 3\u00D76 @ 175 lbs'),
+      ).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label for upcoming state with prescription', () => {
+      render(
+        <ExerciseCard
+          name="Deadlift"
+          state="upcoming"
+          onToggle={vi.fn()}
+          prescription="3x8 @ RPE 8"
+        />,
+      )
+      expect(
+        screen.getByLabelText('Deadlift, 3x8 @ RPE 8'),
+      ).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations in collapsed state', async () => {
+      const { container } = render(
+        <ExerciseCard
+          {...baseCollapsedProps}
+          e1rm={{ value: 225, unit: 'lbs' }}
+          isPR
+          setVelocities={[[1.1, 0.95]]}
+          totalPlannedSets={3}
+        />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations in expanded state', async () => {
+      const { container } = render(
+        <ExerciseCard
+          name="Squat"
+          state="expanded"
+          onToggle={vi.fn()}
+          summary={{ sets: 3, reps: 8, weight: 185, unit: 'lbs' }}
+          sets={baseSets}
+          tempo={[2, 1, 3, 0]}
+        />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations in upcoming state', async () => {
+      const { container } = render(
+        <ExerciseCard
+          name="Deadlift"
+          state="upcoming"
+          onToggle={vi.fn()}
+          prescription="3x8 @ RPE 8"
+          previousBest="185 lbs x 10"
+        />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})