@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { DeviationBar } from './DeviationBar'
+
+const meta: Meta<typeof DeviationBar> = {
+  title: 'Custom/Workout/DeviationBar',
+  component: DeviationBar,
+  tags: ['autodocs'],
+  argTypes: {
+    deviation: {
+      control: { type: 'range', min: -1, max: 1, step: 0.1 },
+      description: 'Deviation from plan (-1 to +1)',
+    },
+    width: {
+      control: 'number',
+      description: 'Width of the bar in pixels',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof DeviationBar>
+
+export const OnPlan: Story = {
+  args: { deviation: 0 },
+}
+
+export const SlightlyLighter: Story = {
+  args: { deviation: -0.2 },
+}
+
+export const MuchLighter: Story = {
+  args: { deviation: -0.8 },
+}
+
+export const SlightlyHarder: Story = {
+  args: { deviation: 0.3 },
+}
+
+export const MuchHarder: Story = {
+  args: { deviation: 0.9 },
+}
+
+export const FullRange: Story = {
+  render: () => (
+    <View style={{ gap: 8 }}>
+      {[-1, -0.7, -0.3, 0, 0.3, 0.7, 1].map((d) => (
+        <View key={d} style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <DeviationBar deviation={d} />
+        </View>
+      ))}
+    </View>
+  ),
+}
+
+export const WideBar: Story = {
+  args: { deviation: 0.5, width: 80 },
+}

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

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { DeviationBar } from './DeviationBar'
+
+describe('DeviationBar', () => {
+  it('renders the bar and dot', () => {
+    render(<DeviationBar deviation={0} />)
+    expect(screen.getByTestId('deviation-bar')).toBeInTheDocument()
+    expect(screen.getByTestId('deviation-dot')).toBeInTheDocument()
+  })
+
+  it('labels on-plan deviation correctly', () => {
+    render(<DeviationBar deviation={0} />)
+    expect(screen.getByLabelText('Session deviation: on plan')).toBeInTheDocument()
+  })
+
+  it('labels lighter deviation correctly', () => {
+    render(<DeviationBar deviation={-0.5} />)
+    expect(screen.getByLabelText('Session deviation: lighter than planned')).toBeInTheDocument()
+  })
+
+  it('labels harder deviation correctly', () => {
+    render(<DeviationBar deviation={0.5} />)
+    expect(screen.getByLabelText('Session deviation: harder than planned')).toBeInTheDocument()
+  })
+
+  it('clamps deviation to -1', () => {
+    render(<DeviationBar deviation={-2} />)
+    expect(screen.getByTestId('deviation-bar')).toBeInTheDocument()
+  })
+
+  it('clamps deviation to +1', () => {
+    render(<DeviationBar deviation={2} />)
+    expect(screen.getByTestId('deviation-bar')).toBeInTheDocument()
+  })
+
+  it('accepts custom width', () => {
+    render(<DeviationBar deviation={0} width={80} />)
+    expect(screen.getByTestId('deviation-bar')).toBeInTheDocument()
+  })
+
+  it('renders dot at left edge for -1 deviation', () => {
+    const { getByTestId } = render(<DeviationBar deviation={-1} width={40} />)
+    const dot = getByTestId('deviation-dot')
+    expect(dot).toBeInTheDocument()
+  })
+
+  it('renders dot at right edge for +1 deviation', () => {
+    const { getByTestId } = render(<DeviationBar deviation={1} width={40} />)
+    const dot = getByTestId('deviation-dot')
+    expect(dot).toBeInTheDocument()
+  })
+
+  it('has adjustable accessibility role', () => {
+    render(<DeviationBar deviation={0} />)
+    const bar = screen.getByTestId('deviation-bar')
+    expect(bar).toHaveAttribute('role', 'slider')
+  })
+
+  it('renders an 8px dot with a text-primary border and shadow', () => {
+    const { getByTestId } = render(<DeviationBar deviation={0} />)
+    const dot = getByTestId('deviation-dot')
+    expect(dot).toHaveStyle({ width: '8px', height: '8px' })
+    expect(dot).toHaveStyle({ borderTopWidth: '1.5px', borderTopColor: '#F3F4F6' })
+    expect(dot).toHaveStyle({ boxShadow: '0 0 4px rgba(0,0,0,0.5)' })
+  })
+
+  it('renders the track with the deviation gradient background', () => {
+    const { getByTestId } = render(<DeviationBar deviation={0} />)
+    const bar = getByTestId('deviation-bar')
+    const track = bar.firstElementChild as HTMLElement
+    expect(track).toHaveStyle({
+      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%)',
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<DeviationBar deviation={0.3} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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