@titan-design/react-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,161 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useState } from 'react'
+import { View, Pressable, Animated, type ViewProps } from 'react-native'
+
+const BRAND_PRIMARY = '#FF7900'
+
+export type MesoStatus = 'completed' | 'current' | 'upcoming'
+
+export interface Meso {
+  id: string
+  name: string
+  weekCount: number
+  status: MesoStatus
+  /**
+   * 1-based week index of progress within a `current` meso.
+   * Drives the solid fill width. Ignored for non-current mesos.
+   */
+  currentWeek?: number
+}
+
+export interface MesoProgressBarProps extends ViewProps {
+  mesos: Meso[]
+  activeMesoId: string | null
+  onMesoPress: (mesoId: string) => void
+  className?: string
+}
+
+const segmentBgColors: Record<MesoStatus, string> = {
+  completed: 'rgba(20,184,166,0.3)',
+  current: 'rgba(255,121,0,0.5)',
+  upcoming: 'rgba(255,255,255,0.06)',
+}
+
+function clampProgress(currentWeek: number | undefined, weekCount: number): number {
+  if (currentWeek == null || weekCount <= 0) return 0
+  const ratio = currentWeek / weekCount
+  return Math.max(0, Math.min(1, ratio))
+}
+
+interface SegmentProps {
+  meso: Meso
+  isActive: boolean
+  onPress: (id: string) => void
+}
+
+function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
+  const [pressScale] = useState(() => new Animated.Value(1))
+
+  const handlePressIn = () => {
+    Animated.timing(pressScale, {
+      toValue: 0.98,
+      duration: 150,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.timing(pressScale, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const progress = meso.status === 'current'
+    ? clampProgress(meso.currentWeek, meso.weekCount)
+    : 0
+
+  return (
+    <Pressable
+      style={{ flex: meso.weekCount }}
+      onPress={() => onPress(meso.id)}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="button"
+      accessibilityLabel={`${meso.name}, ${meso.status}`}
+      testID={`meso-segment-${meso.id}`}
+    >
+      <Animated.View
+        style={[
+          {
+            height: 8,
+            borderRadius: 4,
+            overflow: 'hidden',
+            backgroundColor: segmentBgColors[meso.status],
+            transform: [{ scale: pressScale }],
+          },
+          isActive
+            ? {
+                borderWidth: 2,
+                borderColor: BRAND_PRIMARY,
+                transform: [{ scale: 1.02 }, { scale: pressScale }],
+              }
+            : undefined,
+        ]}
+        testID={`meso-segment-inner-${meso.id}`}
+      >
+        {meso.status === 'current' && progress > 0 && (
+          <View
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: `${progress * 100}%`,
+              backgroundColor: BRAND_PRIMARY,
+            }}
+            testID={`meso-segment-fill-${meso.id}`}
+          />
+        )}
+      </Animated.View>
+    </Pressable>
+  )
+}
+
+/**
+ * Segmented horizontal bar of mesocycles. Each segment is tappable and its
+ * flex width is proportional to the meso's `weekCount`. The active segment is
+ * highlighted with a 2px brand border to stay in sync with MesoCard selection.
+ *
+ * @example
+ * <MesoProgressBar
+ *   mesos={[
+ *     { id: 'm1', name: 'Accumulation', weekCount: 4, status: 'completed' },
+ *     { id: 'm2', name: 'Intensification', weekCount: 3, status: 'current', currentWeek: 2 },
+ *     { id: 'm3', name: 'Peak', weekCount: 2, status: 'upcoming' },
+ *   ]}
+ *   activeMesoId="m2"
+ *   onMesoPress={(id) => console.log(id)}
+ * />
+ */
+export function MesoProgressBar({
+  mesos,
+  activeMesoId,
+  onMesoPress,
+  className,
+  ...props
+}: MesoProgressBarProps) {
+  return (
+    <View
+      className={className}
+      style={{
+        flexDirection: 'row',
+        gap: 2,
+        paddingHorizontal: 16,
+        alignItems: 'center',
+      }}
+      testID="meso-progress-bar"
+      {...props}
+    >
+      {mesos.map((meso) => (
+        <MesoSegment
+          key={meso.id}
+          meso={meso}
+          isActive={meso.id === activeMesoId}
+          onPress={onMesoPress}
+        />
+      ))}
+    </View>
+  )
+}

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

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { MesoStatusCard } from './MesoStatusCard'
+
+const meta: Meta<typeof MesoStatusCard> = {
+  title: 'Custom/Workout/MesoStatusCard',
+  component: MesoStatusCard,
+  tags: ['autodocs'],
+  argTypes: {
+    mesoName: {
+      control: 'text',
+      description: 'Mesocycle name shown in the header',
+    },
+    mesoSubtitle: {
+      control: 'text',
+      description: 'Context line, e.g. "Week 6 of 8 · Upper/Lower"',
+    },
+    statusBadge: {
+      control: 'object',
+      description: 'Header status pill { label, variant }',
+    },
+    metrics: {
+      control: 'object',
+      description: 'Prescription-vs-actual metrics, rendered as a 2x2 grid',
+    },
+    gauges: {
+      control: 'object',
+      description: 'Intensity / volume gauges (level 0-1, optional sublabel)',
+    },
+    coaching: {
+      control: 'object',
+      description: 'Optional coaching box with optional bold highlights',
+    },
+    nextTarget: {
+      control: 'object',
+      description: 'Optional next-session target box { icon, text }',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ maxWidth: 380, padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof MesoStatusCard>
+
+export const Default: Story = {
+  args: {
+    mesoName: 'Hypertrophy Block',
+    mesoSubtitle: 'Week 6 of 8 · Upper/Lower',
+    statusBadge: { label: 'On Track', variant: 'success' },
+    metrics: [
+      { label: 'Prescribed', value: '3×8 @ RPE 8' },
+      { label: 'Actual', value: '3×8 @ 185 lbs' },
+      { label: 'Volume', value: '+12% vs wk 1' },
+      { label: 'e1RM', value: '232 lbs' },
+    ],
+    gauges: [
+      { label: 'Intensity', level: 0.68, sublabel: 'Actual' },
+      { label: 'Volume', level: 0.82, sublabel: 'vs MRV' },
+    ],
+    coaching: {
+      text: 'Velocity is holding well — add load next session to keep intensity progressive.',
+      highlights: ['add load'],
+    },
+    nextTarget: { icon: '→', text: 'Next: 190 lbs × 8 @ RPE 8.5' },
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    ...Default.args,
+    mesoName: 'Intensification',
+    mesoSubtitle: 'Week 7 of 8 · Push/Pull/Legs',
+    statusBadge: { label: 'Watch Fatigue', variant: 'warning' },
+    gauges: [
+      { label: 'Intensity', level: 0.78, sublabel: 'Actual' },
+      { label: 'Volume', level: 0.94, sublabel: 'vs MRV' },
+    ],
+    coaching: {
+      text: 'Velocity loss is creeping up. Hold load and reduce one set to manage fatigue.',
+      highlights: ['Hold load', 'reduce one set'],
+    },
+  },
+}
+
+export const Overreaching: Story = {
+  args: {
+    ...Default.args,
+    mesoName: 'Peaking Block',
+    mesoSubtitle: 'Week 8 of 8 · Upper/Lower',
+    statusBadge: { label: 'Deload Soon', variant: 'error' },
+    metrics: [
+      { label: 'Prescribed', value: '4×5 @ RPE 9' },
+      { label: 'Actual', value: '4×4 @ 205 lbs' },
+      { label: 'Volume', value: '−8% vs wk 6' },
+      { label: 'e1RM', value: '241 lbs' },
+    ],
+    gauges: [
+      { label: 'Intensity', level: 0.92, sublabel: 'Actual' },
+      { label: 'Volume', level: 0.45, sublabel: 'vs MRV' },
+    ],
+    coaching: {
+      text: 'Bar speed has dropped sharply across sessions. Schedule a deload next week.',
+      highlights: ['deload'],
+    },
+    nextTarget: { icon: '↓', text: 'Next: deload — 60% × 3×5' },
+  },
+}
+
+export const Minimal: Story = {
+  args: {
+    mesoName: 'Base Phase',
+    mesoSubtitle: 'Week 2 of 6 · Full Body',
+    statusBadge: { label: 'On Track', variant: 'success' },
+    metrics: [
+      { label: 'Prescribed', value: '3×10 @ RPE 7' },
+      { label: 'Actual', value: '3×10 @ 135 lbs' },
+    ],
+    gauges: [{ label: 'Intensity', level: 0.5 }],
+  },
+}

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

@@ -0,0 +1,209 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { MesoStatusCard, type MesoStatusCardProps } from './MesoStatusCard'
+
+const baseProps: MesoStatusCardProps = {
+  mesoName: 'Hypertrophy Block',
+  mesoSubtitle: 'Week 6 of 8 · Upper/Lower',
+  statusBadge: { label: 'On Track', variant: 'success' },
+  metrics: [
+    { label: 'Prescribed', value: '3×8 @ RPE 8' },
+    { label: 'Actual', value: '3×8 @ 185 lbs' },
+    { label: 'Volume', value: '+12% vs wk 1' },
+    { label: 'e1RM', value: '232 lbs' },
+  ],
+  gauges: [
+    { label: 'Intensity', level: 0.68, sublabel: 'Actual' },
+    { label: 'Volume', level: 0.82, sublabel: 'vs MRV' },
+  ],
+  coaching: {
+    text: 'Velocity is holding — add load next session.',
+    highlights: ['add load'],
+  },
+  nextTarget: { icon: '→', text: 'Next: 190 lbs × 8' },
+}
+
+describe('MesoStatusCard', () => {
+  describe('rendering', () => {
+    it('renders the card, name, and subtitle', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      expect(screen.getByTestId('meso-status-card')).toBeInTheDocument()
+      expect(screen.getByTestId('meso-status-card-name')).toHaveTextContent(
+        'Hypertrophy Block',
+      )
+      expect(screen.getByTestId('meso-status-card-subtitle')).toHaveTextContent(
+        'Week 6 of 8 · Upper/Lower',
+      )
+    })
+
+    it('renders the 3px gradient top accent', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      expect(screen.getByTestId('meso-status-card-accent')).toBeInTheDocument()
+    })
+
+    it('renders the status badge with its label', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      expect(screen.getByTestId('meso-status-card-badge')).toHaveTextContent(
+        'On Track',
+      )
+    })
+  })
+
+  describe('metrics grid', () => {
+    it('renders one cell per metric with label and value', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      const cells = screen.getAllByTestId('meso-status-card-metric')
+      expect(cells).toHaveLength(4)
+      expect(screen.getByText('Prescribed')).toBeInTheDocument()
+      expect(screen.getByText('3×8 @ 185 lbs')).toBeInTheDocument()
+    })
+
+    it('renders every metric cell even when labels repeat (stable unique keys)', () => {
+      render(
+        <MesoStatusCard
+          {...baseProps}
+          metrics={[
+            { label: 'Set', value: '1' },
+            { label: 'Set', value: '2' },
+          ]}
+        />,
+      )
+      expect(screen.getAllByTestId('meso-status-card-metric')).toHaveLength(2)
+    })
+
+    it('does not render the metrics grid when empty', () => {
+      render(<MesoStatusCard {...baseProps} metrics={[]} />)
+      expect(
+        screen.queryByTestId('meso-status-card-metrics'),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('gauges', () => {
+    it('renders one gauge per entry with a marker', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      expect(screen.getAllByTestId('meso-status-card-gauge')).toHaveLength(2)
+      expect(
+        screen.getAllByTestId('meso-status-card-gauge-marker'),
+      ).toHaveLength(2)
+    })
+
+    it('renders a 50% center line per gauge', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      const center = screen.getAllByTestId('meso-status-card-gauge-center')[0]
+      expect(center).toHaveStyle({ left: '50%' })
+    })
+
+    it('exposes gauge level via progressbar value', () => {
+      render(
+        <MesoStatusCard
+          {...baseProps}
+          gauges={[{ label: 'Intensity', level: 0.7 }]}
+        />,
+      )
+      const gauge = screen.getByLabelText('Intensity: 70%')
+      expect(gauge).toHaveAttribute('role', 'progressbar')
+      expect(gauge).toHaveAttribute('aria-valuenow', '70')
+    })
+
+    it('clamps out-of-range levels', () => {
+      render(
+        <MesoStatusCard
+          {...baseProps}
+          gauges={[{ label: 'Volume', level: 1.7 }]}
+        />,
+      )
+      expect(screen.getByLabelText('Volume: 100%')).toBeInTheDocument()
+    })
+
+    it('guards a non-finite level, rendering 0% instead of NaN%', () => {
+      render(
+        <MesoStatusCard
+          {...baseProps}
+          gauges={[{ label: 'Intensity', level: Number.NaN }]}
+        />,
+      )
+      expect(screen.getByLabelText('Intensity: 0%')).toBeInTheDocument()
+      expect(screen.queryByLabelText('Intensity: NaN%')).not.toBeInTheDocument()
+    })
+
+    it('renders every gauge even when labels repeat (stable unique keys)', () => {
+      render(
+        <MesoStatusCard
+          {...baseProps}
+          gauges={[
+            { label: 'Load', level: 0.3 },
+            { label: 'Load', level: 0.6 },
+          ]}
+        />,
+      )
+      expect(screen.getAllByTestId('meso-status-card-gauge')).toHaveLength(2)
+    })
+  })
+
+  describe('coaching', () => {
+    it('renders coaching copy with bolded highlights', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      const box = screen.getByTestId('meso-status-card-coaching')
+      expect(box).toHaveTextContent('Velocity is holding — add load next session.')
+      expect(screen.getByText('add load')).toBeInTheDocument()
+    })
+
+    it('omits the coaching box when not provided', () => {
+      render(<MesoStatusCard {...baseProps} coaching={undefined} />)
+      expect(
+        screen.queryByTestId('meso-status-card-coaching'),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('next target', () => {
+    it('renders the next-target box with icon and text', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      const box = screen.getByTestId('meso-status-card-next-target')
+      expect(box).toHaveTextContent('Next: 190 lbs × 8')
+    })
+
+    it('omits the next-target box when not provided', () => {
+      render(<MesoStatusCard {...baseProps} nextTarget={undefined} />)
+      expect(
+        screen.queryByTestId('meso-status-card-next-target'),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('exposes the card as an article with a descriptive label', () => {
+      render(<MesoStatusCard {...baseProps} />)
+      const article = screen.getByRole('article')
+      expect(article).toHaveAttribute(
+        'aria-label',
+        'Mesocycle status for Hypertrophy Block',
+      )
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(<MesoStatusCard {...baseProps} />)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with all features and every badge variant', async () => {
+      const { container } = render(
+        <>
+          <MesoStatusCard
+            {...baseProps}
+            statusBadge={{ label: 'Watch Fatigue', variant: 'warning' }}
+          />
+          <MesoStatusCard
+            {...baseProps}
+            statusBadge={{ label: 'Deload Soon', variant: 'error' }}
+            coaching={undefined}
+            nextTarget={undefined}
+          />
+        </>,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})