@titan-design/react-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,226 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, ScrollView, Pressable, type ViewProps } from 'react-native'
+import { Card } from '../../ui/card'
+import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
+import {
+  MuscleGroupChip,
+  type VolumeStatus,
+} from './MuscleGroupChip'
+
+export type WorkoutStatus = 'completed' | 'today' | 'upcoming'
+
+/** Spec volume-status vocabulary; mapped to MuscleGroupChip's VolumeStatus internally. */
+export type WorkoutMuscleVolumeStatus =
+  | 'under'
+  | 'maintenance'
+  | 'productive'
+  | 'over'
+
+export interface WorkoutMuscleGroup {
+  /** Muscle group identifier (free-form to match plan data). */
+  group: string
+  /** Display label, may be abbreviated. */
+  label: string
+  /** Volume status relative to landmarks. */
+  volumeStatus?: WorkoutMuscleVolumeStatus
+}
+
+export interface WorkoutCardProps extends ViewProps {
+  name: string
+  date: string
+  /** e.g. "45 min" */
+  duration?: string
+  status: WorkoutStatus
+  muscleGroups: WorkoutMuscleGroup[]
+  totalSets: number
+  /** Total lbs/kg moved across the workout. */
+  totalVolume?: number
+  unit: 'lbs' | 'kg'
+  exercises?: ExerciseCardProps[]
+  expanded?: boolean
+  onToggle?: () => void
+  className?: string
+}
+
+const COLORS = {
+  textPrimary: '#F3F4F6',
+  textSecondary: '#9CA3AF',
+  textTertiary: '#6B7280',
+  statusSuccess: '#14B8A6',
+  brandPrimary: '#FF7900',
+  borderDefault: '#1F1F1F',
+  brandPrimarySubtle: 'rgba(255,121,0,0.06)',
+}
+
+const statusBorderColors: Record<WorkoutStatus, string> = {
+  completed: COLORS.statusSuccess,
+  today: COLORS.brandPrimary,
+  upcoming: COLORS.borderDefault,
+}
+
+/** Maps the spec's volume-status vocabulary onto MuscleGroupChip's enum. */
+const volumeStatusMap: Record<WorkoutMuscleVolumeStatus, VolumeStatus> = {
+  under: 'behind',
+  maintenance: 'ontrack',
+  productive: 'target',
+  over: 'over',
+}
+
+function formatStats(
+  totalSets: number,
+  totalVolume: number | undefined,
+  unit: 'lbs' | 'kg',
+  duration: string | undefined,
+): string {
+  const parts = [`${totalSets} sets`]
+  if (totalVolume != null) parts.push(`${totalVolume} ${unit}`)
+  if (duration) parts.push(duration)
+  return parts.join(' · ')
+}
+
+/**
+ * A workout within a week: name, date, duration, muscle-group pills, and a
+ * stats summary. When expandable it renders contained ExerciseCards on expand.
+ * Status drives a colored left border, today adds a brand tint, and upcoming
+ * is dimmed.
+ *
+ * @example
+ * <WorkoutCard
+ *   name="Upper A"
+ *   date="Mon, Jun 23"
+ *   duration="45 min"
+ *   status="today"
+ *   muscleGroups={[{ group: 'chest', label: 'Chest', volumeStatus: 'productive' }]}
+ *   totalSets={18}
+ *   totalVolume={12450}
+ *   unit="lbs"
+ *   expanded
+ *   onToggle={() => {}}
+ *   exercises={exercises}
+ * />
+ */
+export function WorkoutCard({
+  name,
+  date,
+  duration,
+  status,
+  muscleGroups,
+  totalSets,
+  totalVolume,
+  unit,
+  exercises,
+  expanded = false,
+  onToggle,
+  className,
+  ...props
+}: WorkoutCardProps) {
+  const isExpandable = onToggle != null
+  const isUpcoming = status === 'upcoming'
+  const isToday = status === 'today'
+
+  const summary = (
+    <View style={{ padding: 14 }} testID="workout-card-body">
+      <View className="flex-row items-center" testID="workout-card-header">
+        <Text
+          style={{
+            fontSize: 15,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: COLORS.textPrimary,
+          }}
+          testID="workout-card-name"
+        >
+          {name}
+        </Text>
+        <View className="flex-1" />
+        <Text
+          style={{
+            fontSize: 11,
+            fontFamily: 'Inter, sans-serif',
+            color: COLORS.textTertiary,
+          }}
+          testID="workout-card-date"
+        >
+          {date}
+        </Text>
+      </View>
+
+      <Text
+        style={{
+          marginTop: 4,
+          fontSize: 12,
+          fontFamily: 'Inter, sans-serif',
+          color: COLORS.textSecondary,
+        }}
+        testID="workout-card-stats"
+      >
+        {formatStats(totalSets, totalVolume, unit, duration)}
+      </Text>
+
+      {muscleGroups.length > 0 && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: 5 }}
+          style={{ marginTop: 8 }}
+          testID="workout-card-muscle-groups"
+        >
+          {muscleGroups.map((muscle) => (
+            <MuscleGroupChip
+              key={muscle.group}
+              name={muscle.label}
+              volumeStatus={
+                muscle.volumeStatus
+                  ? volumeStatusMap[muscle.volumeStatus]
+                  : undefined
+              }
+            />
+          ))}
+        </ScrollView>
+      )}
+    </View>
+  )
+
+  return (
+    <Card
+      variant="accent"
+      elevation={1}
+      accentColor={statusBorderColors[status]}
+      bgColor={isToday ? COLORS.brandPrimarySubtle : undefined}
+      className={className}
+      style={isUpcoming ? { opacity: 0.6 } : undefined}
+      testID="workout-card"
+      {...props}
+    >
+      {isExpandable ? (
+        <Pressable
+          onPress={onToggle}
+          accessibilityRole="button"
+          accessibilityLabel={`${name} workout, ${date}, ${status}`}
+          aria-expanded={expanded}
+          testID="workout-card-toggle"
+        >
+          {summary}
+        </Pressable>
+      ) : (
+        <View
+          accessibilityLabel={`${name} workout, ${date}, ${status}`}
+          testID="workout-card-static"
+        >
+          {summary}
+        </View>
+      )}
+
+      {expanded && exercises && exercises.length > 0 && (
+        <View
+          style={{ paddingHorizontal: 8, paddingBottom: 8, gap: 6 }}
+          testID="workout-card-exercises"
+        >
+          {exercises.map((exercise, i) => (
+            <ExerciseCard key={i} {...exercise} />
+          ))}
+        </View>
+      )}
+    </Card>
+  )
+}

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { WorkoutPill } from './WorkoutPill'
+
+const meta: Meta<typeof WorkoutPill> = {
+  title: 'Custom/Workout/WorkoutPill',
+  component: WorkoutPill,
+  tags: ['autodocs'],
+  argTypes: {
+    name: { control: 'text', description: 'Workout name' },
+    status: {
+      control: 'select',
+      options: ['completed', 'current', 'next', 'upcoming', 'missed', 'deload'],
+      description: 'Pill status',
+    },
+    pulse: { control: 'boolean', description: 'Pulsing animation (independent of status)' },
+    highlighted: { control: 'boolean', description: 'Highlighted with thicker border and slight scale' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WorkoutPill>
+
+export const Completed: Story = {
+  args: { name: 'Upper A', status: 'completed' },
+}
+
+export const Current: Story = {
+  args: { name: 'Lower B', status: 'current' },
+}
+
+export const CurrentNoPulse: Story = {
+  args: { name: 'Lower B', status: 'current', pulse: false },
+}
+
+export const Next: Story = {
+  args: { name: 'Upper B', status: 'next' },
+}
+
+export const Upcoming: Story = {
+  args: { name: 'Lower A', status: 'upcoming' },
+}
+
+export const Missed: Story = {
+  args: { name: 'Rest Day', status: 'missed' },
+}
+
+export const Deload: Story = {
+  args: { name: 'Deload Week', status: 'deload' },
+}
+
+export const AllStatuses: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+      <WorkoutPill name="Upper A" status="completed" />
+      <WorkoutPill name="Lower B" status="current" />
+      <WorkoutPill name="Upper B" status="next" />
+      <WorkoutPill name="Lower A" status="upcoming" />
+      <WorkoutPill name="Rest Day" status="missed" />
+      <WorkoutPill name="Recovery" status="deload" />
+    </View>
+  ),
+}

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

@@ -0,0 +1,153 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { WorkoutPill } from './WorkoutPill'
+
+describe('WorkoutPill', () => {
+  it('renders the workout name', () => {
+    render(<WorkoutPill name="Upper A" status="completed" />)
+    expect(screen.getByText('Upper A')).toBeInTheDocument()
+  })
+
+  it('shows checkmark for completed status', () => {
+    render(<WorkoutPill name="Upper A" status="completed" />)
+    expect(screen.getByTestId('workout-pill-check')).toBeInTheDocument()
+  })
+
+  it('shows dash for missed status', () => {
+    render(<WorkoutPill name="Rest Day" status="missed" />)
+    expect(screen.getByTestId('workout-pill-dash')).toBeInTheDocument()
+  })
+
+  it('does not show checkmark for current status', () => {
+    render(<WorkoutPill name="Lower B" status="current" />)
+    expect(screen.queryByTestId('workout-pill-check')).not.toBeInTheDocument()
+  })
+
+  it('does not show checkmark for next status', () => {
+    render(<WorkoutPill name="Upper B" status="next" />)
+    expect(screen.queryByTestId('workout-pill-check')).not.toBeInTheDocument()
+  })
+
+  it('does not show checkmark for upcoming status', () => {
+    render(<WorkoutPill name="Lower A" status="upcoming" />)
+    expect(screen.queryByTestId('workout-pill-check')).not.toBeInTheDocument()
+  })
+
+  it('does not show checkmark for deload status', () => {
+    render(<WorkoutPill name="Deload Week" status="deload" />)
+    expect(screen.queryByTestId('workout-pill-check')).not.toBeInTheDocument()
+  })
+
+  it('wraps in Pressable when onPress is provided', () => {
+    render(<WorkoutPill name="Upper A" status="completed" onPress={() => {}} />)
+    expect(screen.getByTestId('workout-pill-pressable')).toBeInTheDocument()
+  })
+
+  it('does not wrap in Pressable when onPress is omitted', () => {
+    render(<WorkoutPill name="Upper A" status="completed" />)
+    expect(screen.queryByTestId('workout-pill-pressable')).not.toBeInTheDocument()
+  })
+
+  it('calls onPress when pressed', () => {
+    const onPress = vi.fn()
+    render(<WorkoutPill name="Upper A" status="completed" onPress={onPress} />)
+    fireEvent.click(screen.getByTestId('workout-pill-pressable'))
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('has correct accessibility label', () => {
+    render(<WorkoutPill name="Upper A" status="current" />)
+    expect(screen.getByLabelText('Upper A workout, current')).toBeInTheDocument()
+  })
+
+  it('has correct accessibility label for missed', () => {
+    render(<WorkoutPill name="Rest Day" status="missed" />)
+    expect(screen.getByLabelText('Rest Day workout, missed')).toBeInTheDocument()
+  })
+
+  it('has correct accessibility label for deload', () => {
+    render(<WorkoutPill name="Recovery" status="deload" />)
+    expect(screen.getByLabelText('Recovery workout, deload')).toBeInTheDocument()
+  })
+
+  it('renders all status variants without error', () => {
+    const statuses = ['completed', 'current', 'next', 'upcoming', 'missed', 'deload'] as const
+    for (const status of statuses) {
+      const { unmount } = render(<WorkoutPill name="Test" status={status} />)
+      expect(screen.getByTestId('workout-pill')).toBeInTheDocument()
+      unmount()
+    }
+  })
+
+  describe('pulse', () => {
+    it('pulses by default on current status', () => {
+      render(<WorkoutPill name="Upper A" status="current" />)
+      const pill = screen.getByTestId('workout-pill')
+      expect(pill).toBeInTheDocument()
+      expect(pill).toHaveStyle({ opacity: 1 })
+    })
+
+    it('does not pulse on non-current statuses by default', () => {
+      render(<WorkoutPill name="Upper A" status="upcoming" />)
+      const pill = screen.getByTestId('workout-pill')
+      expect(pill).toBeInTheDocument()
+      expect(pill.style.opacity).toBe('')
+    })
+
+    it('can force pulse on a non-current status', () => {
+      render(<WorkoutPill name="Upper A" status="upcoming" pulse />)
+      expect(screen.getByTestId('workout-pill')).toHaveStyle({ opacity: 1 })
+    })
+
+    it('can disable pulse on current status', () => {
+      render(<WorkoutPill name="Upper A" status="current" pulse={false} />)
+      expect(screen.getByTestId('workout-pill').style.opacity).toBe('')
+    })
+  })
+
+  describe('highlighted prop', () => {
+    it('renders without highlighted by default', () => {
+      render(<WorkoutPill name="Upper A" status="current" />)
+      expect(screen.getByTestId('workout-pill')).toBeInTheDocument()
+    })
+
+    it('renders with highlighted prop', () => {
+      render(<WorkoutPill name="Upper A" status="current" highlighted />)
+      expect(screen.getByTestId('workout-pill')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <WorkoutPill name="Upper A" status="completed" onPress={() => {}} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations as static pill', async () => {
+      const { container } = render(
+        <WorkoutPill name="Lower B" status="upcoming" />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for missed status', async () => {
+      const { container } = render(
+        <WorkoutPill name="Rest Day" status="missed" onPress={() => {}} />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('pressable has correct accessibility label', () => {
+      render(<WorkoutPill name="Upper A" status="completed" onPress={() => {}} />)
+      expect(
+        screen.getByLabelText('Upper A workout, completed'),
+      ).toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,177 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useEffect, useState } from 'react'
+import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+
+/**
+ * Spec statuses: completed | current | upcoming | deload.
+ * `next` and `missed` are additive extras supported by this implementation.
+ */
+export type WorkoutPillStatus = 'completed' | 'current' | 'upcoming' | 'deload' | 'next' | 'missed'
+
+export interface WorkoutPillProps extends ViewProps {
+  name: string
+  status: WorkoutPillStatus
+  /** Force pulsing animation. Defaults to pulsing only on `current` status. */
+  pulse?: boolean
+  onPress?: () => void
+  highlighted?: boolean
+  className?: string
+}
+
+const statusBgColors: Record<WorkoutPillStatus, string> = {
+  completed: 'rgba(20,184,166,0.15)',
+  current: 'rgba(255,121,0,0.15)',
+  next: 'transparent',
+  upcoming: '#1C1C1C',
+  missed: 'rgba(209,67,67,0.1)',
+  deload: 'rgba(147,51,234,0.15)',
+}
+
+const statusBorderStyles: Record<WorkoutPillStatus, Record<string, unknown>> = {
+  completed: { borderWidth: 1, borderColor: 'rgba(20,184,166,0.3)' },
+  current: { borderWidth: 1, borderColor: 'rgba(255,121,0,0.3)' },
+  next: { borderWidth: 1, borderColor: 'rgba(255,121,0,0.4)' },
+  upcoming: { borderWidth: 1, borderColor: '#1F1F1F' },
+  missed: { borderWidth: 1, borderColor: 'rgba(209,67,67,0.25)' },
+  deload: { borderWidth: 1, borderColor: 'rgba(147,51,234,0.3)' },
+}
+
+const textColors: Record<WorkoutPillStatus, string> = {
+  completed: '#14B8A6',
+  current: '#FF7900',
+  next: '#FF7900',
+  upcoming: '#6B7280',
+  missed: 'rgba(209,67,67,0.7)',
+  deload: '#9333ea',
+}
+
+function usePulse(enabled: boolean) {
+  const [opacity] = useState(() => new Animated.Value(1))
+
+  useEffect(() => {
+    if (!enabled) {
+      opacity.setValue(1)
+      return
+    }
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.7,
+          duration: 1000,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 1000,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]),
+    )
+    animation.start()
+
+    return () => animation.stop()
+  }, [enabled, opacity])
+
+  return opacity
+}
+
+export function WorkoutPill({
+  name,
+  status,
+  pulse,
+  onPress,
+  highlighted = false,
+  className,
+  ...props
+}: WorkoutPillProps) {
+  const shouldPulse = pulse ?? status === 'current'
+  const pulseOpacity = usePulse(shouldPulse)
+  const isCompleted = status === 'completed'
+  const isMissed = status === 'missed'
+
+  const pill = (
+    <Animated.View
+      style={shouldPulse ? { opacity: pulseOpacity } : undefined}
+      testID="workout-pill"
+    >
+      <View
+        className={className}
+        style={[
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 10,
+            paddingVertical: 4,
+            borderRadius: 6,
+            backgroundColor: statusBgColors[status],
+          },
+          statusBorderStyles[status] as Record<string, unknown>,
+          highlighted ? { borderWidth: 2, transform: [{ scale: 1.02 }] } : undefined,
+        ]}
+        accessibilityLabel={onPress ? undefined : `${name} workout, ${status}`}
+        {...props}
+      >
+        {isCompleted && (
+          <Text
+            style={{
+              fontWeight: '600',
+              fontFamily: '"Nunito Sans", sans-serif',
+              fontSize: 11,
+              color: textColors[status],
+              marginRight: 4,
+            }}
+            accessibilityElementsHidden
+            testID="workout-pill-check"
+          >
+            {'\u2713'}
+          </Text>
+        )}
+        {isMissed && (
+          <Text
+            style={{
+              fontWeight: '600',
+              fontFamily: '"Nunito Sans", sans-serif',
+              fontSize: 11,
+              color: textColors[status],
+              marginRight: 4,
+            }}
+            accessibilityElementsHidden
+            testID="workout-pill-dash"
+          >
+            {'\u2014'}
+          </Text>
+        )}
+        <Text
+          style={{
+            fontWeight: '600',
+            fontFamily: '"Nunito Sans", sans-serif',
+            fontSize: 11,
+            color: textColors[status],
+          }}
+          accessibilityElementsHidden={onPress != null}
+          testID="workout-pill-name"
+        >
+          {name}
+        </Text>
+      </View>
+    </Animated.View>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityLabel={`${name} workout, ${status}`}
+        testID="workout-pill-pressable"
+      >
+        {pill}
+      </Pressable>
+    )
+  }
+
+  return pill
+}