@titan-design/react-ui 0.2.5 → 0.2.7

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,253 @@
+// 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'
+
+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 getRPEColor(rpe: number): string {
+  if (rpe >= 9.5) return '#ff4757'
+  if (rpe >= 8.5) return '#ffa502'
+  if (rpe >= 7) return '#ffd43b'
+  return '#2ed573'
+}
+
+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 ${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: '#9CA3AF',
+            }}
+          >
+            {setNumber}
+          </Text>
+        )}
+      </View>
+
+      <View
+        className="flex-1"
+        testID="set-row-previous"
+      >
+        <Text
+          style={{
+            fontSize: 12,
+            fontFamily: 'Inter, sans-serif',
+            color: '#9CA3AF',
+          }}
+        >
+          {previous
+            ? `${previous.reps} x ${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: '#6B7280',
+            }}
+            testID="set-row-target-reps"
+          >
+            {targets.reps}
+          </Text>
+        ) : (
+          <Text
+            style={{
+              fontSize: 14,
+              fontWeight: '600',
+              fontFamily: 'Inter, sans-serif',
+              color: reps != null ? '#F3F4F6' : '#6B7280',
+            }}
+          >
+            {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: '#6B7280',
+            }}
+            testID="set-row-target-weight"
+          >
+            {targets.weight}
+          </Text>
+        ) : (
+          <Text
+            style={{
+              fontSize: 14,
+              fontWeight: '600',
+              fontFamily: 'Inter, sans-serif',
+              color: weight != null ? '#F3F4F6' : '#6B7280',
+            }}
+          >
+            {weight != null ? 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 ? getRPEColor(rpe) : '#6B7280',
+          }}
+        >
+          {rpe != null ? 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>
+  )
+}

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

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Sparkline } from './Sparkline'
+
+const meta: Meta<typeof Sparkline> = {
+  title: 'Custom/Workout/Sparkline',
+  component: Sparkline,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'number',
+      description: 'Chart width in pixels',
+    },
+    height: {
+      control: 'number',
+      description: 'Chart height in pixels',
+    },
+    color: {
+      control: 'color',
+      description: 'Line and dot color',
+    },
+    showDots: {
+      control: 'boolean',
+      description: 'Show dots at data points',
+    },
+    highlightLast: {
+      control: 'boolean',
+      description: 'Highlight the last data point with a larger dot',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Sparkline>
+
+const ascending = [10, 15, 22, 28, 35, 42, 50]
+const descending = [50, 45, 38, 30, 22, 15, 10]
+const uCurve = [40, 25, 15, 10, 12, 20, 35]
+const flat = [20, 21, 19, 20, 21, 20, 19]
+const volatile = [10, 35, 15, 45, 20, 40, 25]
+
+export const Default: Story = {
+  args: {
+    data: ascending,
+  },
+}
+
+export const Ascending: Story = {
+  args: {
+    data: ascending,
+    showDots: true,
+  },
+}
+
+export const Descending: Story = {
+  args: {
+    data: descending,
+    showDots: true,
+    color: '#ff4757',
+  },
+}
+
+export const UCurve: Story = {
+  args: {
+    data: uCurve,
+    showDots: true,
+    color: '#2ed573',
+  },
+}
+
+export const Flat: Story = {
+  args: {
+    data: flat,
+    showDots: true,
+    color: '#ffd43b',
+  },
+}
+
+export const WithReferenceLines: Story = {
+  args: {
+    data: ascending,
+    showDots: true,
+    referenceLines: [
+      { value: 30, color: '#ff4757', dashed: true },
+      { value: 45, color: '#2ed573', dashed: false },
+    ],
+  },
+}
+
+export const HighlightLast: Story = {
+  args: {
+    data: ascending,
+    highlightLast: true,
+  },
+}
+
+export const DotsAndHighlightLast: Story = {
+  args: {
+    data: volatile,
+    showDots: true,
+    highlightLast: true,
+    color: '#ffa502',
+  },
+}
+
+export const CustomSize: Story = {
+  args: {
+    data: ascending,
+    width: 120,
+    height: 50,
+    showDots: true,
+  },
+}
+
+export const AllShapes: Story = {
+  render: () => (
+    <View style={{ gap: 16, padding: 16 }}>
+      <Sparkline data={ascending} showDots highlightLast />
+      <Sparkline data={descending} showDots color="#ff4757" />
+      <Sparkline data={uCurve} showDots color="#2ed573" />
+      <Sparkline data={flat} showDots color="#ffd43b" />
+      <Sparkline data={volatile} showDots color="#ffa502" highlightLast />
+    </View>
+  ),
+}

package/src/components/custom/Workout/Sparkline.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 { Sparkline } from './Sparkline'
+
+const sampleData = [10, 25, 15, 30, 20]
+
+describe('Sparkline', () => {
+  it('renders with data points', () => {
+    render(<Sparkline data={sampleData} />)
+    expect(screen.getByTestId('sparkline')).toBeInTheDocument()
+  })
+
+  it('renders empty state for no data', () => {
+    render(<Sparkline data={[]} />)
+    expect(screen.getByTestId('sparkline-empty')).toBeInTheDocument()
+  })
+
+  it('renders line segments between points', () => {
+    render(<Sparkline data={sampleData} />)
+    for (let i = 1; i < sampleData.length; i++) {
+      expect(
+        screen.getByTestId(`sparkline-segment-${i}`),
+      ).toBeInTheDocument()
+    }
+  })
+
+  it('renders dots when showDots is true', () => {
+    render(<Sparkline data={sampleData} showDots />)
+    for (let i = 0; i < sampleData.length; i++) {
+      expect(screen.getByTestId(`sparkline-dot-${i}`)).toBeInTheDocument()
+    }
+  })
+
+  it('does not render dots when showDots is false', () => {
+    render(<Sparkline data={sampleData} />)
+    expect(screen.queryByTestId('sparkline-dot-0')).not.toBeInTheDocument()
+  })
+
+  it('highlights last dot when highlightLast is true', () => {
+    render(<Sparkline data={sampleData} highlightLast />)
+    const lastIndex = sampleData.length - 1
+    expect(
+      screen.getByTestId(`sparkline-dot-${lastIndex}`),
+    ).toBeInTheDocument()
+    // Other dots should not be present (showDots is false)
+    expect(screen.queryByTestId('sparkline-dot-0')).not.toBeInTheDocument()
+  })
+
+  it('renders both regular dots and highlighted last', () => {
+    render(<Sparkline data={sampleData} showDots highlightLast />)
+    for (let i = 0; i < sampleData.length; i++) {
+      expect(screen.getByTestId(`sparkline-dot-${i}`)).toBeInTheDocument()
+    }
+  })
+
+  it('renders reference lines', () => {
+    render(
+      <Sparkline
+        data={sampleData}
+        referenceLines={[
+          { value: 20, color: '#ff0000' },
+          { value: 25, color: '#00ff00', dashed: true },
+        ]}
+      />,
+    )
+    expect(screen.getByTestId('sparkline-reference-0')).toBeInTheDocument()
+    expect(screen.getByTestId('sparkline-reference-1')).toBeInTheDocument()
+  })
+
+  it('does not render reference lines when not provided', () => {
+    render(<Sparkline data={sampleData} />)
+    expect(
+      screen.queryByTestId('sparkline-reference-0'),
+    ).not.toBeInTheDocument()
+  })
+
+  it('uses default dimensions', () => {
+    render(<Sparkline data={sampleData} />)
+    const sparkline = screen.getByTestId('sparkline')
+    expect(sparkline).toHaveStyle({ width: '80px', height: '30px' })
+  })
+
+  it('accepts custom dimensions', () => {
+    render(<Sparkline data={sampleData} width={120} height={50} />)
+    const sparkline = screen.getByTestId('sparkline')
+    expect(sparkline).toHaveStyle({ width: '120px', height: '50px' })
+  })
+
+  it('sets accessibility label', () => {
+    render(<Sparkline data={sampleData} />)
+    expect(
+      screen.getByLabelText('Sparkline chart with 5 data points'),
+    ).toBeInTheDocument()
+  })
+
+  it('sets empty accessibility label for no data', () => {
+    render(<Sparkline data={[]} />)
+    expect(
+      screen.getByLabelText('Sparkline chart, no data'),
+    ).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Sparkline data={sampleData} showDots highlightLast />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})