@titan-design/react-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { WeightBadge } from './WeightBadge'
+
+const meta: Meta<typeof WeightBadge> = {
+  title: 'Custom/Workout/WeightBadge',
+  component: WeightBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'number', description: 'Weight value' },
+    unit: { control: 'select', options: ['lbs', 'kg'], description: 'Unit system' },
+    reps: {
+      control: 'number',
+      description: 'N-rep max context (omit for estimated 1RM)',
+    },
+    showIcon: { control: 'boolean', description: 'Show the weight icon' },
+    isPr: { control: 'boolean', description: 'Apply PR styling (orange bg, star)' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'], description: 'Badge size' },
+    delta: { control: 'number', description: 'Percentage change since last mesocycle' },
+    onPress: { action: 'pressed', description: 'Callback when tapped' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WeightBadge>
+
+export const Default: Story = {
+  args: { value: 217, unit: 'lbs' },
+}
+
+export const WithoutIcon: Story = {
+  args: { value: 217, unit: 'lbs', showIcon: false },
+}
+
+export const RepMax: Story = {
+  args: { value: 275, unit: 'lbs', reps: 5 },
+}
+
+export const WithPr: Story = {
+  args: { value: 217, unit: 'lbs', isPr: true },
+}
+
+export const WithPositiveDelta: Story = {
+  args: { value: 217, unit: 'lbs', delta: 3 },
+}
+
+export const WithNegativeDelta: Story = {
+  args: { value: 217, unit: 'lbs', delta: -2 },
+}
+
+export const PrWithDelta: Story = {
+  args: { value: 217, unit: 'lbs', isPr: true, delta: 3, size: 'lg' },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <WeightBadge value={217} unit="lbs" size="sm" />
+        <WeightBadge value={217} unit="lbs" size="md" />
+        <WeightBadge value={217} unit="lbs" size="lg" />
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <WeightBadge value={217} unit="lbs" size="sm" showIcon={false} />
+        <WeightBadge value={217} unit="lbs" size="md" showIcon={false} />
+        <WeightBadge value={217} unit="lbs" size="lg" showIcon={false} />
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <WeightBadge value={275} unit="lbs" reps={5} />
+        <WeightBadge value={315} unit="lbs" reps={3} />
+        <WeightBadge value={185} unit="lbs" reps={8} />
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <WeightBadge value={217} unit="lbs" size="sm" isPr />
+        <WeightBadge value={217} unit="lbs" size="md" isPr />
+        <WeightBadge value={217} unit="lbs" size="lg" isPr />
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <WeightBadge value={217} unit="lbs" delta={3} />
+        <WeightBadge value={217} unit="lbs" delta={-2} />
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <WeightBadge value={217} unit="lbs" isPr delta={3} size="lg" />
+      </View>
+    </View>
+  ),
+}

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

@@ -0,0 +1,164 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { WeightBadge } from './WeightBadge'
+
+describe('WeightBadge', () => {
+  it('renders value and default unit', () => {
+    render(<WeightBadge value={225} />)
+    expect(screen.getByText('225 lbs')).toBeInTheDocument()
+  })
+
+  it('renders with kg unit', () => {
+    render(<WeightBadge value={100} unit="kg" />)
+    expect(screen.getByText('100 kg')).toBeInTheDocument()
+  })
+
+  it('wraps in Pressable when onPress is provided', () => {
+    const onPress = vi.fn()
+    render(<WeightBadge value={225} onPress={onPress} />)
+    const pressable = screen.getByTestId('base-badge-pressable')
+    fireEvent.click(pressable)
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('does not render Pressable when onPress is omitted', () => {
+    render(<WeightBadge value={225} />)
+    expect(screen.queryByTestId('base-badge-pressable')).not.toBeInTheDocument()
+  })
+
+  describe('showIcon', () => {
+    it('shows the weight icon by default', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.getByTestId('base-badge-icon')).toBeInTheDocument()
+    })
+
+    it('hides the weight icon when showIcon is false', () => {
+      render(<WeightBadge value={225} showIcon={false} />)
+      expect(screen.queryByTestId('base-badge-icon')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('reps (rep-max context)', () => {
+    it('shows the estimated 1RM label when reps is omitted', () => {
+      render(<WeightBadge value={315} unit="lbs" />)
+      expect(
+        screen.getByLabelText('Estimated one rep max: 315 lbs'),
+      ).toBeInTheDocument()
+      expect(screen.queryByTestId('weight-badge-repmax')).not.toBeInTheDocument()
+    })
+
+    it('shows the rep-max qualifier and label when reps is provided', () => {
+      render(<WeightBadge value={275} unit="lbs" reps={5} />)
+      expect(screen.getByTestId('weight-badge-repmax')).toHaveTextContent('5RM')
+      expect(
+        screen.getByLabelText('5 rep max: 275 lbs'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('isPr', () => {
+    it('renders without error when isPr is false', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.getByTestId('weight-badge')).toBeInTheDocument()
+    })
+
+    it('renders without error when isPr is true', () => {
+      render(<WeightBadge value={315} isPr />)
+      expect(screen.getByTestId('weight-badge')).toBeInTheDocument()
+    })
+
+    it('uses default border color when not a PR', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.getByTestId('weight-badge')).toHaveStyle({
+        borderTopColor: '#1F1F1F',
+      })
+    })
+
+    it('uses brand-primary-subtle border color on PR state', () => {
+      render(<WeightBadge value={315} isPr />)
+      expect(screen.getByTestId('weight-badge')).toHaveStyle({
+        borderTopColor: 'rgba(255, 121, 0, 0.12)',
+      })
+    })
+  })
+
+  describe('size', () => {
+    it('defaults to md size', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.getByTestId('weight-badge')).toBeInTheDocument()
+    })
+
+    it('renders sm size', () => {
+      render(<WeightBadge value={225} size="sm" />)
+      expect(screen.getByTestId('weight-badge')).toBeInTheDocument()
+    })
+
+    it('renders lg size', () => {
+      render(<WeightBadge value={225} size="lg" />)
+      expect(screen.getByTestId('weight-badge')).toBeInTheDocument()
+    })
+  })
+
+  describe('delta', () => {
+    it('shows positive delta', () => {
+      render(<WeightBadge value={225} delta={3} />)
+      expect(screen.getByTestId('weight-badge-delta')).toHaveTextContent('+3%')
+    })
+
+    it('shows negative delta', () => {
+      render(<WeightBadge value={225} delta={-2} />)
+      expect(screen.getByTestId('weight-badge-delta')).toHaveTextContent('-2%')
+    })
+
+    it('shows zero delta as positive', () => {
+      render(<WeightBadge value={225} delta={0} />)
+      expect(screen.getByTestId('weight-badge-delta')).toHaveTextContent('+0%')
+    })
+
+    it('does not show delta when not provided', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.queryByTestId('weight-badge-delta')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <WeightBadge value={225} isPr onPress={() => {}} />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with delta', async () => {
+      const { container } = render(
+        <WeightBadge value={225} delta={3} onPress={() => {}} />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations as static badge', async () => {
+      const { container } = render(
+        <WeightBadge value={315} unit="kg" isPr delta={-2} />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('includes delta in the e1RM accessibility label', () => {
+      render(<WeightBadge value={225} delta={5} />)
+      expect(
+        screen.getByLabelText('Estimated one rep max: 225 lbs, +5% change'),
+      ).toBeInTheDocument()
+    })
+
+    it('includes delta in the rep-max accessibility label', () => {
+      render(<WeightBadge value={275} reps={5} delta={-3} />)
+      expect(
+        screen.getByLabelText('5 rep max: 275 lbs, -3% change'),
+      ).toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,113 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { Text } from 'react-native'
+import { Dumbbell } from 'lucide-react'
+import {
+  BaseBadge,
+  baseBadgeSizeConfig,
+  type BaseBadgeSize,
+  type BaseBadgeProps,
+} from './BaseBadge'
+
+export type WeightBadgeSize = BaseBadgeSize
+
+export interface WeightBadgeProps
+  extends Omit<BaseBadgeProps, 'variant' | 'icon' | 'children'> {
+  value: number
+  unit?: 'lbs' | 'kg'
+  /**
+   * When given, this is an N-rep max (e.g. "5RM"). When omitted, it is an
+   * estimated 1RM / e1RM.
+   */
+  reps?: number
+  /** Percentage delta from previous mesocycle */
+  delta?: number
+  isPr?: boolean
+  /** Show the weight icon */
+  showIcon?: boolean
+  size?: WeightBadgeSize
+  onPress?: () => void
+  className?: string
+}
+
+export function WeightBadge({
+  value,
+  unit = 'lbs',
+  reps,
+  delta,
+  isPr,
+  showIcon = true,
+  size = 'md',
+  onPress,
+  className,
+  ...props
+}: WeightBadgeProps) {
+  const config = baseBadgeSizeConfig[size]
+  const textColor = isPr ? '#FF7900' : '#9CA3AF'
+  // Dumbbell reads clearly as a weight/strength metric and is unit-agnostic
+  // across estimated-1RM and N-rep-max contexts (vs. TrendingUp which implies
+  // change/trend rather than a load value).
+  const iconColor = textColor
+
+  const repMaxClause = reps != null ? `${reps} rep max` : 'Estimated one rep max'
+  const deltaLabel =
+    delta != null ? `, ${delta >= 0 ? '+' : ''}${delta}% change` : ''
+  const fullLabel = `${repMaxClause}: ${value} ${unit}${deltaLabel}`
+
+  return (
+    <BaseBadge
+      variant={isPr ? 'pr' : 'plain'}
+      size={size}
+      onPress={onPress}
+      className={className}
+      icon={
+        showIcon ? (
+          <Dumbbell size={config.iconSize} color={iconColor} strokeWidth={2} />
+        ) : undefined
+      }
+      accessibilityLabel={fullLabel}
+      testID="weight-badge"
+      {...props}
+    >
+      <Text
+        style={{
+          fontFamily: '"Space Grotesk", sans-serif',
+          fontWeight: '600',
+          fontSize: config.fontSize,
+          color: textColor,
+        }}
+      >
+        {isPr ? '✳ ' : ''}
+        {value} {unit}
+      </Text>
+      {reps != null && (
+        <Text
+          style={{
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '600',
+            fontSize: config.fontSize,
+            marginLeft: 2,
+            color: textColor,
+            opacity: 0.7,
+          }}
+          testID="weight-badge-repmax"
+        >
+          {reps}RM
+        </Text>
+      )}
+      {delta != null && (
+        <Text
+          style={{
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: config.fontSize,
+            marginLeft: 4,
+            color: delta >= 0 ? '#4caf50' : '#ef5350',
+          }}
+          testID="weight-badge-delta"
+        >
+          {delta >= 0 ? '+' : ''}
+          {delta}%
+        </Text>
+      )}
+    </BaseBadge>
+  )
+}

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

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { WorkoutCard } from './WorkoutCard'
+import type { ExerciseCardProps } from './ExerciseCard'
+
+const meta: Meta<typeof WorkoutCard> = {
+  title: 'Custom/Workout/WorkoutCard',
+  component: WorkoutCard,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['completed', 'today', 'upcoming'],
+      description: 'Drives left-border color, tint, and opacity',
+    },
+    unit: {
+      control: 'select',
+      options: ['lbs', 'kg'],
+      description: 'Weight unit',
+    },
+    expanded: {
+      control: 'boolean',
+      description: 'Whether contained ExerciseCards are shown',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16, maxWidth: 420 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof WorkoutCard>
+
+const sampleExercises: ExerciseCardProps[] = [
+  {
+    name: 'Bench Press',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 3, reps: 8, weight: 175, unit: 'lbs' },
+    e1rm: { value: 225, unit: 'lbs' },
+    setVelocities: [
+      [1.1, 0.95, 0.82],
+      [0.95, 0.88, 0.78],
+    ],
+    totalPlannedSets: 3,
+  },
+  {
+    name: 'Incline DB Press',
+    state: 'upcoming',
+    onToggle: () => {},
+    prescription: '3×10-12 @ RPE 8',
+    previousBest: '70 lbs × 11',
+  },
+]
+
+const muscleGroups = [
+  { group: 'chest', label: 'Chest', volumeStatus: 'productive' as const },
+  { group: 'front-delts', label: 'Front Delts', volumeStatus: 'maintenance' as const },
+  { group: 'triceps', label: 'Triceps', volumeStatus: 'under' as const },
+]
+
+export const Today: Story = {
+  args: {
+    name: 'Upper A',
+    date: 'Mon, Jun 23',
+    duration: '45 min',
+    status: 'today',
+    muscleGroups,
+    totalSets: 18,
+    totalVolume: 12450,
+    unit: 'lbs',
+  },
+}
+
+export const Completed: Story = {
+  args: {
+    name: 'Lower B',
+    date: 'Sat, Jun 21',
+    duration: '52 min',
+    status: 'completed',
+    muscleGroups: [
+      { group: 'quads', label: 'Quads', volumeStatus: 'over' },
+      { group: 'hamstrings', label: 'Hamstrings', volumeStatus: 'productive' },
+      { group: 'glutes', label: 'Glutes', volumeStatus: 'maintenance' },
+    ],
+    totalSets: 20,
+    totalVolume: 18200,
+    unit: 'lbs',
+  },
+}
+
+export const Upcoming: Story = {
+  args: {
+    name: 'Push B',
+    date: 'Wed, Jun 25',
+    status: 'upcoming',
+    muscleGroups,
+    totalSets: 16,
+    unit: 'lbs',
+  },
+}
+
+export const Expanded: Story = {
+  args: {
+    name: 'Upper A',
+    date: 'Mon, Jun 23',
+    duration: '45 min',
+    status: 'today',
+    muscleGroups,
+    totalSets: 18,
+    totalVolume: 12450,
+    unit: 'lbs',
+    expanded: true,
+    onToggle: () => {},
+    exercises: sampleExercises,
+  },
+}
+
+export const NoToggle: Story = {
+  args: {
+    name: 'Pull A',
+    date: 'Thu, Jun 26',
+    status: 'upcoming',
+    muscleGroups: [
+      { group: 'back', label: 'Back', volumeStatus: 'productive' },
+      { group: 'biceps', label: 'Biceps', volumeStatus: 'maintenance' },
+    ],
+    totalSets: 17,
+    unit: 'kg',
+  },
+}

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

@@ -0,0 +1,172 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { WorkoutCard, type WorkoutCardProps } from './WorkoutCard'
+import type { ExerciseCardProps } from './ExerciseCard'
+
+const baseProps: WorkoutCardProps = {
+  name: 'Upper A',
+  date: 'Mon, Jun 23',
+  status: 'today',
+  muscleGroups: [
+    { group: 'chest', label: 'Chest', volumeStatus: 'productive' },
+    { group: 'back', label: 'Back', volumeStatus: 'maintenance' },
+  ],
+  totalSets: 18,
+  unit: 'lbs',
+}
+
+const exercises: ExerciseCardProps[] = [
+  {
+    name: 'Bench Press',
+    state: 'collapsed',
+    onToggle: () => {},
+    summary: { sets: 3, reps: 8, weight: 175, unit: 'lbs' },
+  },
+  {
+    name: 'Row',
+    state: 'upcoming',
+    onToggle: () => {},
+    prescription: '3×10 @ RPE 8',
+  },
+]
+
+describe('WorkoutCard', () => {
+  describe('rendering', () => {
+    it('renders name and date', () => {
+      render(<WorkoutCard {...baseProps} />)
+      expect(screen.getByTestId('workout-card-name')).toHaveTextContent(
+        'Upper A',
+      )
+      expect(screen.getByTestId('workout-card-date')).toHaveTextContent(
+        'Mon, Jun 23',
+      )
+    })
+
+    it('renders the set count in the stats row', () => {
+      render(<WorkoutCard {...baseProps} />)
+      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent(
+        '18 sets',
+      )
+    })
+
+    it('includes duration in stats when provided', () => {
+      render(<WorkoutCard {...baseProps} duration="45 min" />)
+      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent(
+        '45 min',
+      )
+    })
+
+    it('includes total volume with unit when provided', () => {
+      render(<WorkoutCard {...baseProps} totalVolume={12450} unit="lbs" />)
+      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent(
+        '12450 lbs',
+      )
+    })
+
+    it('omits volume from stats when not provided', () => {
+      render(<WorkoutCard {...baseProps} />)
+      expect(screen.getByTestId('workout-card-stats')).not.toHaveTextContent(
+        'lbs',
+      )
+    })
+  })
+
+  describe('muscle groups', () => {
+    it('renders a chip per muscle group', () => {
+      render(<WorkoutCard {...baseProps} />)
+      expect(screen.getAllByTestId('muscle-group-chip')).toHaveLength(2)
+    })
+
+    it('renders chip labels', () => {
+      render(<WorkoutCard {...baseProps} />)
+      const row = screen.getByTestId('workout-card-muscle-groups')
+      expect(row).toHaveTextContent('Chest')
+      expect(row).toHaveTextContent('Back')
+    })
+
+    it('does not render the muscle group row when empty', () => {
+      render(<WorkoutCard {...baseProps} muscleGroups={[]} />)
+      expect(
+        screen.queryByTestId('workout-card-muscle-groups'),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('expansion', () => {
+    it('renders exercises when expanded', () => {
+      render(
+        <WorkoutCard
+          {...baseProps}
+          expanded
+          onToggle={() => {}}
+          exercises={exercises}
+        />,
+      )
+      expect(screen.getByTestId('workout-card-exercises')).toBeInTheDocument()
+      expect(screen.getAllByTestId('exercise-card')).toHaveLength(2)
+    })
+
+    it('does not render exercises when collapsed', () => {
+      render(
+        <WorkoutCard
+          {...baseProps}
+          expanded={false}
+          onToggle={() => {}}
+          exercises={exercises}
+        />,
+      )
+      expect(
+        screen.queryByTestId('workout-card-exercises'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('calls onToggle when pressed', () => {
+      const onToggle = vi.fn()
+      render(<WorkoutCard {...baseProps} onToggle={onToggle} />)
+      fireEvent.click(screen.getByTestId('workout-card-toggle'))
+      expect(onToggle).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('status styling', () => {
+    it('dims the card when upcoming', () => {
+      render(<WorkoutCard {...baseProps} status="upcoming" />)
+      expect(screen.getByTestId('workout-card')).toHaveStyle({ opacity: 0.6 })
+    })
+
+    it('does not dim a completed card', () => {
+      render(<WorkoutCard {...baseProps} status="completed" />)
+      expect(screen.getByTestId('workout-card')).not.toHaveStyle({
+        opacity: 0.6,
+      })
+    })
+  })
+
+  describe('accessibility', () => {
+    it('exposes button role and expanded state when expandable', () => {
+      render(
+        <WorkoutCard {...baseProps} expanded onToggle={() => {}} />,
+      )
+      const card = screen.getByRole('button', {
+        name: 'Upper A workout, Mon, Jun 23, today',
+      })
+      expect(card).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <WorkoutCard
+          {...baseProps}
+          duration="45 min"
+          totalVolume={12450}
+          onToggle={() => {}}
+          expanded
+          exercises={exercises}
+        />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})