@titan-design/react-ui 0.2.6 → 0.3.0

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>
+  ),
+}

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

@@ -0,0 +1,222 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SetRow } from './SetRow'
+
+const baseProps = {
+  mode: 'completed' as const,
+  setNumber: 1,
+  reps: 8,
+  weight: 135,
+  unit: 'lbs' as const,
+}
+
+describe('SetRow', () => {
+  describe('completed mode', () => {
+    it('renders set number, reps, weight', () => {
+      render(<SetRow {...baseProps} />)
+      expect(screen.getByTestId('set-row')).toBeInTheDocument()
+      expect(screen.getByTestId('set-row-set-number')).toHaveTextContent('1')
+      expect(screen.getByTestId('set-row-reps')).toHaveTextContent('8')
+      expect(screen.getByTestId('set-row-weight')).toHaveTextContent('135')
+    })
+
+    it('displays previous data when provided', () => {
+      render(<SetRow {...baseProps} previous={{ reps: 6, weight: 130 }} />)
+      expect(screen.getByTestId('set-row-previous')).toHaveTextContent(
+        '6 x 130',
+      )
+    })
+
+    it('displays dash when no previous data', () => {
+      render(<SetRow {...baseProps} />)
+      expect(screen.getByTestId('set-row-previous')).toHaveTextContent('\u2014')
+    })
+
+    it('applies reduced opacity for non-next completed sets', () => {
+      render(<SetRow {...baseProps} />)
+      const row = screen.getByTestId('set-row')
+      expect(row).toHaveStyle({ opacity: 0.55 })
+    })
+  })
+
+  describe('active mode', () => {
+    it('renders target values when reps/weight are null', () => {
+      render(
+        <SetRow
+          mode="active"
+          setNumber={2}
+          reps={null}
+          weight={null}
+          unit="lbs"
+          targets={{ reps: 10, weight: 150 }}
+        />,
+      )
+      expect(screen.getByTestId('set-row-target-reps')).toHaveTextContent('10')
+      expect(screen.getByTestId('set-row-target-weight')).toHaveTextContent(
+        '150',
+      )
+    })
+
+    it('renders dashes when no targets and values are null', () => {
+      render(
+        <SetRow mode="active" setNumber={2} reps={null} weight={null} unit="lbs" />,
+      )
+      expect(screen.getByTestId('set-row-reps')).toHaveTextContent('\u2014')
+      expect(screen.getByTestId('set-row-weight')).toHaveTextContent('\u2014')
+    })
+  })
+
+  describe('isNextSet highlighting', () => {
+    it('applies highlight styles for active isNextSet', () => {
+      render(
+        <SetRow
+          mode="active"
+          setNumber={1}
+          reps={null}
+          weight={null}
+          unit="lbs"
+          isNextSet
+        />,
+      )
+      const row = screen.getByTestId('set-row')
+      const style = row.getAttribute('style') ?? ''
+      expect(style).toContain('background-color')
+      expect(style).toContain('border')
+    })
+
+    it('does not apply highlight for non-next active sets', () => {
+      render(
+        <SetRow mode="active" setNumber={1} reps={null} weight={null} unit="lbs" />,
+      )
+      const row = screen.getByTestId('set-row')
+      expect(row).not.toHaveStyle({
+        backgroundColor: 'rgba(255,121,0,0.06)',
+      })
+    })
+  })
+
+  describe('history mode', () => {
+    it('renders like completed mode', () => {
+      render(
+        <SetRow mode="history" setNumber={3} reps={5} weight={200} unit="kg" />,
+      )
+      expect(screen.getByTestId('set-row-reps')).toHaveTextContent('5')
+      expect(screen.getByTestId('set-row-weight')).toHaveTextContent('200')
+    })
+  })
+
+  describe('velocity strip', () => {
+    it('renders velocity strip when velocities provided', () => {
+      render(
+        <SetRow {...baseProps} velocities={[1.1, 0.95, 0.82]} />,
+      )
+      expect(screen.getByTestId('set-row-velocity-strip')).toBeInTheDocument()
+    })
+
+    it('does not render velocity strip when no velocities', () => {
+      render(<SetRow {...baseProps} />)
+      expect(
+        screen.queryByTestId('set-row-velocity-strip'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('passes onVelocityToggle to velocity strip', () => {
+      const onToggle = vi.fn()
+      render(
+        <SetRow
+          {...baseProps}
+          velocities={[1.1, 0.95]}
+          onVelocityToggle={onToggle}
+        />,
+      )
+      const pressable = screen.getByTestId('velocity-strip-pressable')
+      fireEvent.click(pressable)
+      expect(onToggle).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('set type badge', () => {
+    it('renders set type badge instead of set number', () => {
+      render(<SetRow {...baseProps} setType="W" />)
+      expect(screen.getByTestId('set-row-type-badge')).toHaveTextContent('W')
+    })
+
+    it('does not render type badge when setType is not provided', () => {
+      render(<SetRow {...baseProps} />)
+      expect(
+        screen.queryByTestId('set-row-type-badge'),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('PR badges', () => {
+    it('renders PR badges when provided', () => {
+      render(
+        <SetRow
+          {...baseProps}
+          prBadges={[{ type: 'e1rm', label: 'PR e1RM' }]}
+        />,
+      )
+      expect(screen.getByTestId('set-row-pr-badges')).toBeInTheDocument()
+    })
+
+    it('does not render PR badges container when no badges', () => {
+      render(<SetRow {...baseProps} />)
+      expect(
+        screen.queryByTestId('set-row-pr-badges'),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('RPE', () => {
+    it('displays RPE value with color coding', () => {
+      render(<SetRow {...baseProps} rpe={9.5} />)
+      expect(screen.getByTestId('set-row-rpe')).toHaveTextContent('9.5')
+    })
+
+    it('displays dash when RPE is null', () => {
+      render(<SetRow {...baseProps} rpe={null} />)
+      expect(screen.getByTestId('set-row-rpe')).toHaveTextContent('\u2014')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has correct accessibility label', () => {
+      render(<SetRow {...baseProps} />)
+      expect(
+        screen.getByLabelText('Set 1: 8 reps at 135 lbs'),
+      ).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label with null values', () => {
+      render(
+        <SetRow mode="active" setNumber={2} reps={null} weight={null} unit="kg" />,
+      )
+      expect(
+        screen.getByLabelText('Set 2: no reps'),
+      ).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(<SetRow {...baseProps} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with all features', async () => {
+      const { container } = render(
+        <SetRow
+          {...baseProps}
+          rpe={8}
+          velocities={[1.1, 0.95]}
+          setType="W"
+          prBadges={[{ type: 'e1rm', label: 'PR e1RM' }]}
+          previous={{ reps: 6, weight: 130 }}
+        />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,247 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text } from 'react-native'
+import { VelocityStrip } from './VelocityStrip'
+import { PrBadge, type PRType } from './PrBadge'
+import { roundRpe, rpeColor, roundWeight } from '../../../utils/workout-format'
+
+export type SetRowMode = 'active' | 'completed' | 'history'
+
+export interface SetRowProps {
+  mode: SetRowMode
+  setNumber: number
+  previous?: { reps: number; weight: number } | null
+  reps: number | null
+  weight: number | null
+  rpe?: number | null
+  unit: 'lbs' | 'kg'
+  velocities?: number[]
+  velocityExpanded?: boolean
+  onVelocityToggle?: () => void
+  setType?: string
+  prBadges?: Array<{ type: PRType; label: string }>
+  isNextSet?: boolean
+  targets?: { reps: number; weight: number }
+}
+
+function formatAccessibilityLabel(
+  setNumber: number,
+  reps: number | null,
+  weight: number | null,
+  unit: string,
+): string {
+  const repsText = reps != null ? `${reps} reps` : 'no reps'
+  const weightText = weight != null ? `at ${roundWeight(weight)} ${unit}` : ''
+  return `Set ${setNumber}: ${repsText}${weightText ? ` ${weightText}` : ''}`
+}
+
+export function SetRow({
+  mode,
+  setNumber,
+  previous,
+  reps,
+  weight,
+  rpe,
+  unit,
+  velocities,
+  velocityExpanded,
+  onVelocityToggle,
+  setType,
+  prBadges,
+  isNextSet,
+  targets,
+}: SetRowProps) {
+  const isActive = mode === 'active'
+  const isCompleted = mode === 'completed'
+
+  const rowStyle: Record<string, unknown> = {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    padding: 7,
+    paddingHorizontal: 8,
+    gap: 8,
+    borderRadius: 8,
+  }
+
+  if (isActive && isNextSet) {
+    rowStyle.backgroundColor = 'rgba(255,121,0,0.06)'
+    rowStyle.borderWidth = 1
+    rowStyle.borderColor = 'rgba(255,121,0,0.15)'
+  }
+
+  if (isCompleted && !isNextSet) {
+    rowStyle.opacity = 0.55
+  }
+
+  return (
+    <View
+      style={rowStyle}
+      accessibilityLabel={formatAccessibilityLabel(
+        setNumber,
+        reps,
+        weight,
+        unit,
+      )}
+      testID="set-row"
+    >
+      <View
+        style={{ width: 36, alignItems: 'center', justifyContent: 'center' }}
+        testID="set-row-set-number"
+      >
+        {setType ? (
+          <Text
+            style={{
+              fontSize: 10,
+              fontWeight: '700',
+              fontFamily: 'Inter, sans-serif',
+              color: '#ffa502',
+              backgroundColor: 'rgba(255,165,2,0.12)',
+              paddingVertical: 1,
+              paddingHorizontal: 5,
+              borderRadius: 3,
+              overflow: 'hidden',
+            }}
+            testID="set-row-type-badge"
+          >
+            {setType}
+          </Text>
+        ) : (
+          <Text
+            style={{
+              fontSize: 13,
+              fontWeight: '600',
+              fontFamily: 'Inter, sans-serif',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            {setNumber}
+          </Text>
+        )}
+      </View>
+
+      <View
+        className="flex-1"
+        testID="set-row-previous"
+      >
+        <Text
+          style={{
+            fontSize: 12,
+            fontFamily: 'Inter, sans-serif',
+            color: 'var(--color-text-secondary)',
+          }}
+        >
+          {previous
+            ? `${previous.reps} x ${roundWeight(previous.weight)}`
+            : '\u2014'}
+        </Text>
+      </View>
+
+      <View
+        style={{ width: 44, alignItems: 'center', justifyContent: 'center' }}
+        testID="set-row-reps"
+      >
+        {isActive && reps == null && targets ? (
+          <Text
+            style={{
+              fontSize: 13,
+              fontStyle: 'italic',
+              fontFamily: 'Inter, sans-serif',
+              color: 'var(--color-text-tertiary)',
+            }}
+            testID="set-row-target-reps"
+          >
+            {targets.reps}
+          </Text>
+        ) : (
+          <Text
+            style={{
+              fontSize: 14,
+              fontWeight: '600',
+              fontFamily: 'Inter, sans-serif',
+              color: reps != null ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
+            }}
+          >
+            {reps != null ? reps : '\u2014'}
+          </Text>
+        )}
+      </View>
+
+      <View
+        style={{ width: 56, alignItems: 'center', justifyContent: 'center' }}
+        testID="set-row-weight"
+      >
+        {isActive && weight == null && targets ? (
+          <Text
+            style={{
+              fontSize: 13,
+              fontStyle: 'italic',
+              fontFamily: 'Inter, sans-serif',
+              color: 'var(--color-text-tertiary)',
+            }}
+            testID="set-row-target-weight"
+          >
+            {roundWeight(targets.weight)}
+          </Text>
+        ) : (
+          <Text
+            style={{
+              fontSize: 14,
+              fontWeight: '600',
+              fontFamily: 'Inter, sans-serif',
+              color: weight != null ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
+            }}
+          >
+            {weight != null ? roundWeight(weight) : '\u2014'}
+          </Text>
+        )}
+      </View>
+
+      <View
+        style={{ width: 36, alignItems: 'center', justifyContent: 'center' }}
+        testID="set-row-rpe"
+      >
+        <Text
+          style={{
+            fontSize: 13,
+            fontWeight: '600',
+            fontFamily: 'Inter, sans-serif',
+            color: rpe != null ? rpeColor(rpe) : 'var(--color-text-tertiary)',
+          }}
+        >
+          {rpe != null ? roundRpe(rpe) : '\u2014'}
+        </Text>
+      </View>
+
+      {prBadges && prBadges.length > 0 && (
+        <View
+          className="flex-row items-center"
+          style={{ gap: 4 }}
+          testID="set-row-pr-badges"
+        >
+          {prBadges.map((badge, i) => (
+            <PrBadge
+              key={i}
+              type={badge.type}
+              label={badge.label}
+              animate={false}
+              compact
+            />
+          ))}
+        </View>
+      )}
+
+      {velocities && velocities.length > 0 && (
+        <View
+          style={{ position: 'absolute', bottom: 0, left: 8, right: 8 }}
+          testID="set-row-velocity-strip"
+        >
+          <VelocityStrip
+            velocities={velocities}
+            expanded={velocityExpanded}
+            onToggle={onVelocityToggle}
+            variant={onVelocityToggle ? 'full' : 'mini'}
+          />
+        </View>
+      )}
+    </View>
+  )
+}