@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,321 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo, useState } from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { BodyMap, type BodyMapData } from './BodyMap'
+import {
+  BodyMapDetailPanel,
+  type ContributingExercise,
+  type UpcomingExercise,
+} from './BodyMapDetailPanel'
+import { MesoStatusCard, type MesoStatusCardProps } from './MesoStatusCard'
+import {
+  MuscleGroup,
+  VOLUME_STATUS_LABELS,
+  getHeatmapColor,
+  type VolumeLandmarks,
+  type VolumeStatus,
+} from './muscleTaxonomy'
+
+const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
+const BORDER_DEFAULT = 'var(--color-border-default)'
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
+const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+const PAGE_BG = 'var(--color-background-base)'
+
+/** Volume statuses in display order for the legend and summary cards. */
+const STATUS_ORDER: VolumeStatus[] = ['under', 'maintenance', 'productive', 'over']
+
+/** One muscle's full volume picture — feeds the body maps and the detail panel. */
+export interface TrainingStatusMuscle {
+  /** Detailed muscle group (drives the SVG heatmap + panel identity). */
+  muscleGroup: MuscleGroup
+  /** Human-readable name for the legend, summary, and panel title. */
+  displayName: string
+  /** Which body-map view the muscle belongs to. */
+  side: 'front' | 'back'
+  /** Heatmap intensity 0-1. */
+  intensity: number
+  /** Weekly-volume status relative to the landmarks. */
+  volumeStatus: VolumeStatus
+  /** Weekly effective sets logged. */
+  weeklySets: number
+  /** Volume landmarks (weekly working sets). */
+  landmarks: VolumeLandmarks
+  /** Last trained label, e.g. "2 days ago". */
+  lastTrained?: string
+  /** Weekly volume history for the panel sparkline. */
+  weeklyHistory?: number[]
+  /** Exercises contributing to this muscle's volume. */
+  contributingExercises?: ContributingExercise[]
+  /** Upcoming exercises targeting this muscle. */
+  upcomingExercises?: UpcomingExercise[]
+}
+
+/** Derived, page-level roll-up of the tracked muscles. */
+export interface TrainingStatusSummary {
+  /** Total weekly effective sets across all tracked muscles. */
+  totalWeeklySets: number
+  /** Number of muscles being tracked. */
+  trackedMuscles: number
+  /** Count of muscles per volume status. */
+  statusCounts: Record<VolumeStatus, number>
+}
+
+export interface TrainingStatusPageProps extends ViewProps {
+  /** Page heading. */
+  title?: string
+  /** Mesocycle context banner shown at the top. */
+  meso: MesoStatusCardProps
+  /** Muscles tracked this week. */
+  muscles: TrainingStatusMuscle[]
+  className?: string
+}
+
+/** Roll up per-muscle rows into the page summary (pure, testable). */
+export function deriveTrainingSummary(muscles: TrainingStatusMuscle[]): TrainingStatusSummary {
+  const statusCounts: Record<VolumeStatus, number> = {
+    under: 0,
+    maintenance: 0,
+    productive: 0,
+    over: 0,
+  }
+  let totalWeeklySets = 0
+  for (const muscle of muscles) {
+    totalWeeklySets += muscle.weeklySets
+    statusCounts[muscle.volumeStatus] += 1
+  }
+  return { totalWeeklySets, trackedMuscles: muscles.length, statusCounts }
+}
+
+/** Project the muscle rows for one side into `BodyMap` heatmap data. */
+export function toBodyMapData(
+  muscles: TrainingStatusMuscle[],
+  side: 'front' | 'back'
+): BodyMapData[] {
+  return muscles
+    .filter((muscle) => muscle.side === side)
+    .map(({ muscleGroup, intensity, volumeStatus, weeklySets }) => ({
+      muscleGroup,
+      intensity,
+      volumeStatus,
+      weeklySets,
+    }))
+}
+
+const SUMMARY_CARDS: Array<{
+  key: keyof TrainingStatusSummary['statusCounts'] | 'total'
+  label: string
+}> = [
+  { key: 'total', label: 'Weekly Sets' },
+  { key: 'productive', label: 'Productive' },
+  { key: 'under', label: 'Under' },
+  { key: 'over', label: 'Over' },
+]
+
+function SummaryCards({ summary }: { summary: TrainingStatusSummary }) {
+  return (
+    <View className="flex-row flex-wrap" style={{ gap: 8 }} testID="training-status-page-summary">
+      {SUMMARY_CARDS.map(({ key, label }) => {
+        const value = key === 'total' ? summary.totalWeeklySets : summary.statusCounts[key]
+        return (
+          <View
+            key={key}
+            style={{
+              flexGrow: 1,
+              flexBasis: '46%',
+              padding: 12,
+              borderRadius: 10,
+              backgroundColor: SURFACE_ELEVATED,
+              borderWidth: 1,
+              borderColor: BORDER_DEFAULT,
+            }}
+            testID={`training-status-page-summary-${key}`}
+          >
+            <Text
+              style={{
+                fontSize: 22,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: '700',
+                color: TEXT_PRIMARY,
+              }}
+            >
+              {value}
+            </Text>
+            <Text
+              style={{
+                marginTop: 2,
+                fontSize: 11,
+                fontFamily: 'Inter, sans-serif',
+                fontWeight: '600',
+                letterSpacing: 0.4,
+                textTransform: 'uppercase',
+                color: TEXT_TERTIARY,
+              }}
+            >
+              {label}
+            </Text>
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+function StatusLegend() {
+  return (
+    <View
+      className="flex-row flex-wrap"
+      style={{ gap: 10, justifyContent: 'center' }}
+      testID="training-status-page-legend"
+    >
+      {STATUS_ORDER.map((status) => (
+        <View
+          key={status}
+          className="flex-row items-center"
+          style={{ gap: 5 }}
+          testID={`training-status-page-legend-${status}`}
+        >
+          <View
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 9999,
+              backgroundColor: getHeatmapColor(status, 0.6),
+            }}
+            accessibilityElementsHidden
+          />
+          <Text
+            style={{
+              fontSize: 11,
+              fontFamily: 'Inter, sans-serif',
+              color: TEXT_SECONDARY,
+              textTransform: 'capitalize',
+            }}
+          >
+            {VOLUME_STATUS_LABELS[status]}
+          </Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+interface BodyMapColumnProps {
+  side: 'front' | 'back'
+  muscles: TrainingStatusMuscle[]
+  selected: MuscleGroup | null
+  onSelect: (muscle: MuscleGroup) => void
+}
+
+function BodyMapColumn({ side, muscles, selected, onSelect }: BodyMapColumnProps) {
+  const data = useMemo(() => toBodyMapData(muscles, side), [muscles, side])
+  return (
+    <View style={{ flexGrow: 1, flexBasis: '46%' }} testID={`training-status-page-bodymap-${side}`}>
+      <BodyMap
+        data={data}
+        view={side}
+        onMusclePress={onSelect}
+        highlightedMuscle={selected}
+        mode="detailed"
+      />
+    </View>
+  )
+}
+
+/**
+ * TrainingStatusPage — a body-map training dashboard that composes the
+ * mesocycle context banner (`MesoStatusCard`), side-by-side front/back
+ * `BodyMap`s with a shared heatmap legend, per-status summary cards, and a
+ * tap-to-detail `BodyMapDetailPanel`. Tapping any muscle (SVG or legend chip)
+ * opens the slide-up panel for that group; the summary is derived from the
+ * supplied muscle rows.
+ *
+ * @example
+ * <TrainingStatusPage meso={meso} muscles={muscles} />
+ */
+export function TrainingStatusPage({
+  title = 'Training Status',
+  meso,
+  muscles,
+  className,
+  ...props
+}: TrainingStatusPageProps) {
+  const [selected, setSelected] = useState<MuscleGroup | null>(null)
+  const summary = useMemo(() => deriveTrainingSummary(muscles), [muscles])
+  const active = selected != null ? (muscles.find((m) => m.muscleGroup === selected) ?? null) : null
+
+  return (
+    <View
+      className={className}
+      style={{ position: 'relative', width: 390, backgroundColor: PAGE_BG }}
+      accessibilityRole={'main' as ViewProps['accessibilityRole']}
+      aria-label={title}
+      testID="training-status-page"
+      {...props}
+    >
+      <View style={{ padding: 16, gap: 16 }} testID="training-status-page-content">
+        <Text
+          accessibilityRole="header"
+          style={{
+            fontSize: 20,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: TEXT_PRIMARY,
+          }}
+          testID="training-status-page-title"
+        >
+          {title}
+        </Text>
+
+        <MesoStatusCard {...meso} />
+
+        <SummaryCards summary={summary} />
+
+        <View
+          style={{
+            backgroundColor: SURFACE_ELEVATED,
+            borderWidth: 1,
+            borderColor: BORDER_DEFAULT,
+            borderRadius: 12,
+            padding: 12,
+            gap: 12,
+          }}
+          testID="training-status-page-bodymaps"
+        >
+          <View className="flex-row" style={{ gap: 8 }}>
+            <BodyMapColumn
+              side="front"
+              muscles={muscles}
+              selected={selected}
+              onSelect={setSelected}
+            />
+            <BodyMapColumn
+              side="back"
+              muscles={muscles}
+              selected={selected}
+              onSelect={setSelected}
+            />
+          </View>
+          <StatusLegend />
+        </View>
+      </View>
+
+      {active != null && (
+        <BodyMapDetailPanel
+          muscleGroup={active.muscleGroup}
+          displayName={active.displayName}
+          weeklySets={active.weeklySets}
+          landmarks={active.landmarks}
+          volumeStatus={active.volumeStatus}
+          lastTrained={active.lastTrained}
+          weeklyHistory={active.weeklyHistory}
+          contributingExercises={active.contributingExercises}
+          upcomingExercises={active.upcomingExercises}
+          isOpen
+          onClose={() => setSelected(null)}
+        />
+      )}
+    </View>
+  )
+}

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

@@ -0,0 +1,125 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { VelocityStrip } from './VelocityStrip'
+
+const meta: Meta<typeof VelocityStrip> = {
+  title: 'Custom/Workout/VelocityStrip',
+  component: VelocityStrip,
+  tags: ['autodocs'],
+  argTypes: {
+    expanded: {
+      control: 'boolean',
+      description: 'Whether the strip is expanded into a bar chart',
+    },
+    variant: {
+      control: 'select',
+      options: ['full', 'mini'],
+      description: 'Display variant',
+    },
+    showInfo: {
+      control: 'boolean',
+      description: 'Whether to show the info row (zone name + loss %) in expanded mode',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof VelocityStrip>
+
+const fastSet = [1.15, 1.12, 1.08, 1.05, 1.02]
+const slowSet = [0.65, 0.58, 0.52, 0.48, 0.42]
+const mixedSet = [1.1, 0.95, 0.82, 0.68, 0.55, 0.45]
+const moderateSet = [0.88, 0.85, 0.82, 0.78, 0.76]
+
+export const DefaultCollapsed: Story = {
+  args: {
+    velocities: moderateSet,
+    onToggle: () => {},
+  },
+}
+
+export const Expanded: Story = {
+  args: {
+    velocities: moderateSet,
+    expanded: true,
+    onToggle: () => {},
+  },
+}
+
+export const ExpandedNoInfo: Story = {
+  args: {
+    velocities: moderateSet,
+    expanded: true,
+    showInfo: false,
+    onToggle: () => {},
+  },
+}
+
+export const FastEasySet: Story = {
+  args: {
+    velocities: fastSet,
+    expanded: true,
+    onToggle: () => {},
+  },
+}
+
+export const SlowGrindingSet: Story = {
+  args: {
+    velocities: slowSet,
+    expanded: true,
+    onToggle: () => {},
+  },
+}
+
+export const MixedVelocities: Story = {
+  args: {
+    velocities: mixedSet,
+    expanded: true,
+    onToggle: () => {},
+  },
+}
+
+export const Mini: Story = {
+  args: {
+    velocities: mixedSet,
+    variant: 'mini',
+  },
+}
+
+function InteractiveVelocityStrip() {
+  const [expanded, setExpanded] = useState(false)
+  return (
+    <View style={{ width: 300, padding: 16 }}>
+      <VelocityStrip
+        velocities={moderateSet}
+        expanded={expanded}
+        onToggle={() => setExpanded(!expanded)}
+        onRepPress={(index, velocity) =>
+          console.log(`Rep ${index + 1}: ${velocity}`)
+        }
+      />
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveVelocityStrip />,
+}
+
+export const AllProfiles: Story = {
+  render: () => (
+    <View style={{ gap: 24, padding: 16 }}>
+      <View style={{ gap: 8 }}>
+        <VelocityStrip velocities={fastSet} expanded onToggle={() => {}} />
+        <VelocityStrip
+          velocities={moderateSet}
+          expanded
+          onToggle={() => {}}
+        />
+        <VelocityStrip velocities={slowSet} expanded onToggle={() => {}} />
+        <VelocityStrip velocities={mixedSet} expanded onToggle={() => {}} />
+      </View>
+    </View>
+  ),
+}

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

@@ -0,0 +1,244 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  VelocityStrip,
+  getVelocityZoneColor,
+  getVelocityZoneName,
+  calculateVelocityLoss,
+  calculateMeanVelocity,
+} from './VelocityStrip'
+
+const sampleVelocities = [1.1, 0.95, 0.82, 0.68, 0.45]
+
+describe('VelocityStrip', () => {
+  it('renders correct number of segments', () => {
+    render(<VelocityStrip velocities={sampleVelocities} />)
+    for (let i = 0; i < sampleVelocities.length; i++) {
+      expect(screen.getByTestId(`velocity-bar-${i}`)).toBeInTheDocument()
+    }
+  })
+
+  it('renders with expanded state', () => {
+    render(<VelocityStrip velocities={sampleVelocities} expanded />)
+    expect(screen.getByTestId('velocity-strip')).toBeInTheDocument()
+    expect(screen.getByTestId('velocity-info-row')).toBeInTheDocument()
+  })
+
+  it('shows velocity labels when expanded', () => {
+    render(<VelocityStrip velocities={sampleVelocities} expanded />)
+    for (let i = 0; i < sampleVelocities.length; i++) {
+      expect(screen.getByTestId(`velocity-label-${i}`)).toBeInTheDocument()
+    }
+  })
+
+  it('fires onToggle on press', () => {
+    const onToggle = vi.fn()
+    render(
+      <VelocityStrip velocities={sampleVelocities} onToggle={onToggle} />,
+    )
+    const pressable = screen.getByTestId('velocity-strip-pressable')
+    fireEvent.click(pressable)
+    expect(onToggle).toHaveBeenCalledOnce()
+  })
+
+  it('fires onRepPress with correct index when bar is tapped', () => {
+    const onRepPress = vi.fn()
+    render(
+      <VelocityStrip
+        velocities={sampleVelocities}
+        expanded
+        onRepPress={onRepPress}
+      />,
+    )
+    const bar = screen.getByTestId('velocity-bar-pressable-2')
+    fireEvent.click(bar)
+    expect(onRepPress).toHaveBeenCalledWith(2, 0.82)
+  })
+
+  it('sets accessibility role and label', () => {
+    render(<VelocityStrip velocities={sampleVelocities} />)
+    expect(
+      screen.getByLabelText(
+        'Velocity chart for set, 5 reps, tap to expand',
+      ),
+    ).toBeInTheDocument()
+  })
+
+  it('sets expanded accessibility label when expanded', () => {
+    render(<VelocityStrip velocities={sampleVelocities} expanded />)
+    expect(
+      screen.getByLabelText(
+        'Velocity chart for set, 5 reps, tap to collapse',
+      ),
+    ).toBeInTheDocument()
+  })
+
+  describe('showInfo prop', () => {
+    it('shows info row when expanded and showInfo is true (default)', () => {
+      render(<VelocityStrip velocities={sampleVelocities} expanded />)
+      expect(screen.getByTestId('velocity-info-row')).toBeInTheDocument()
+    })
+
+    it('hides info row when expanded and showInfo is false', () => {
+      render(<VelocityStrip velocities={sampleVelocities} expanded showInfo={false} />)
+      expect(screen.queryByTestId('velocity-info-row')).not.toBeInTheDocument()
+    })
+
+    it('does not show info row when collapsed regardless of showInfo', () => {
+      render(<VelocityStrip velocities={sampleVelocities} showInfo />)
+      expect(screen.queryByTestId('velocity-info-row')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('mini variant', () => {
+    it('renders mini strip', () => {
+      render(<VelocityStrip velocities={sampleVelocities} variant="mini" />)
+      expect(screen.getByTestId('velocity-strip-mini')).toBeInTheDocument()
+    })
+
+    it('does not respond to press', () => {
+      const onToggle = vi.fn()
+      render(
+        <VelocityStrip
+          velocities={sampleVelocities}
+          variant="mini"
+          onToggle={onToggle}
+        />,
+      )
+      expect(
+        screen.queryByTestId('velocity-strip-pressable'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('renders correct number of segments', () => {
+      render(<VelocityStrip velocities={sampleVelocities} variant="mini" />)
+      for (let i = 0; i < sampleVelocities.length; i++) {
+        expect(screen.getByTestId(`velocity-bar-${i}`)).toBeInTheDocument()
+      }
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <VelocityStrip velocities={sampleVelocities} onToggle={() => {}} />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when expanded', async () => {
+      const { container } = render(
+        <VelocityStrip velocities={sampleVelocities} expanded onToggle={() => {}} />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when expanded with rep press', async () => {
+      const { container } = render(
+        <VelocityStrip
+          velocities={sampleVelocities}
+          expanded
+          onRepPress={() => {}}
+        />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations in mini variant', async () => {
+      const { container } = render(
+        <VelocityStrip velocities={sampleVelocities} variant="mini" />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('outer pressable has accessibility label when onToggle provided', () => {
+      render(<VelocityStrip velocities={sampleVelocities} onToggle={() => {}} />)
+      expect(
+        screen.getByLabelText('Velocity chart for set, 5 reps, tap to expand'),
+      ).toBeInTheDocument()
+    })
+
+    it('rep pressables have accessibility labels when expanded with onRepPress', () => {
+      render(
+        <VelocityStrip
+          velocities={sampleVelocities}
+          expanded
+          onRepPress={() => {}}
+        />,
+      )
+      expect(
+        screen.getByLabelText('Rep 1: 1.10 meters per second, tap for details'),
+      ).toBeInTheDocument()
+    })
+  })
+})
+
+describe('getVelocityZoneColor', () => {
+  it('returns vel-green for velocities >= 1.0', () => {
+    expect(getVelocityZoneColor(1.0)).toBe('vel-green')
+    expect(getVelocityZoneColor(1.5)).toBe('vel-green')
+  })
+
+  it('returns vel-yellow for velocities >= 0.75 and < 1.0', () => {
+    expect(getVelocityZoneColor(0.75)).toBe('vel-yellow')
+    expect(getVelocityZoneColor(0.99)).toBe('vel-yellow')
+  })
+
+  it('returns vel-orange for velocities >= 0.50 and < 0.75', () => {
+    expect(getVelocityZoneColor(0.5)).toBe('vel-orange')
+    expect(getVelocityZoneColor(0.74)).toBe('vel-orange')
+  })
+
+  it('returns vel-red for velocities < 0.50', () => {
+    expect(getVelocityZoneColor(0.49)).toBe('vel-red')
+    expect(getVelocityZoneColor(0.1)).toBe('vel-red')
+  })
+})
+
+describe('getVelocityZoneName', () => {
+  it('returns correct zone names', () => {
+    expect(getVelocityZoneName(1.2)).toBe('Speed')
+    expect(getVelocityZoneName(0.85)).toBe('Power')
+    expect(getVelocityZoneName(0.6)).toBe('Strength-Speed')
+    expect(getVelocityZoneName(0.3)).toBe('Strength')
+  })
+})
+
+describe('calculateVelocityLoss', () => {
+  it('calculates percentage loss from first to last rep', () => {
+    expect(calculateVelocityLoss([1.0, 0.8])).toBe(20)
+  })
+
+  it('returns 0 for single rep', () => {
+    expect(calculateVelocityLoss([1.0])).toBe(0)
+  })
+
+  it('returns 0 for empty array', () => {
+    expect(calculateVelocityLoss([])).toBe(0)
+  })
+})
+
+describe('calculateMeanVelocity', () => {
+  it('calculates mean of velocities', () => {
+    expect(calculateMeanVelocity([1.0, 0.8, 0.6])).toBeCloseTo(0.8)
+  })
+
+  it('returns 0 for empty array', () => {
+    expect(calculateMeanVelocity([])).toBe(0)
+  })
+})
+
+describe('VelocityStrip all-zero velocities (NaN guard)', () => {
+  it('emits a valid 0% bar height (not NaN) when every velocity is zero (expanded)', () => {
+    render(<VelocityStrip velocities={[0, 0, 0]} expanded />)
+    // Without the guard, 0 / (0 * 1.15) === NaN and the bar height becomes
+    // 'NaN%' (dropped by jsdom, leaving no height); the guard flattens to '0%'.
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '0%' })
+    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ height: '0%' })
+  })
+})