@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View } from 'react-native'
+import { MesoCard } from './MesoCard'
+import type { WeekRowProps } from './WeekRow'
+
+const weeks: WeekRowProps[] = [
+  {
+    weekNumber: 1,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'completed' },
+      { name: 'Lower', status: 'completed' },
+    ],
+    intensityLevel: 0.4,
+    intensityThreshold: 0.85,
+  },
+  {
+    weekNumber: 2,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'current' },
+      { name: 'Lower', status: 'upcoming' },
+    ],
+    intensityLevel: 0.6,
+    intensityThreshold: 0.85,
+  },
+  {
+    weekNumber: 3,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'upcoming' },
+      { name: 'Lower', status: 'upcoming' },
+    ],
+    intensityLevel: 0.8,
+    intensityThreshold: 0.85,
+  },
+  {
+    weekNumber: 4,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'upcoming' },
+      { name: 'Lower', status: 'upcoming' },
+    ],
+    intensityLevel: 0.35,
+    isDeload: true,
+  },
+]
+
+const meta: Meta<typeof MesoCard> = {
+  title: 'Custom/Workout/MesoCard',
+  component: MesoCard,
+  tags: ['autodocs'],
+  argTypes: {
+    goal: {
+      control: 'select',
+      options: ['Hypertrophy', 'Strength', 'Peaking'],
+      description: 'Training goal shown in the badge',
+    },
+    expanded: {
+      control: 'boolean',
+      description: 'Whether the week list is revealed',
+    },
+    highlighted: {
+      control: 'boolean',
+      description: 'Synced highlight with the MesoProgressBar',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof MesoCard>
+
+export const Collapsed: Story = {
+  args: {
+    name: 'Accumulation',
+    goal: 'Hypertrophy',
+    split: 'Upper/Lower',
+    weekRange: 'Weeks 1-4',
+    currentWeek: 2,
+    totalWeeks: 4,
+    weeks,
+    volumeHeatmap: [
+      { group: 'chest', percentage: 80 },
+      { group: 'back', percentage: 70 },
+      { group: 'legs', percentage: 90 },
+      { group: 'shoulders', percentage: 45 },
+      { group: 'arms', percentage: 35 },
+    ],
+  },
+}
+
+export const Expanded: Story = {
+  args: {
+    ...Collapsed.args,
+    expanded: true,
+  },
+}
+
+export const Highlighted: Story = {
+  args: {
+    ...Collapsed.args,
+    expanded: true,
+    highlighted: true,
+  },
+}
+
+export const StrengthBlock: Story = {
+  args: {
+    name: 'Intensification',
+    goal: 'Strength',
+    split: 'Push/Pull/Legs',
+    weekRange: 'Weeks 5-8',
+    currentWeek: 6,
+    totalWeeks: 4,
+    weeks: weeks.map((w) => ({ ...w, weekNumber: w.weekNumber + 4 })),
+    volumeHeatmap: [
+      { group: 'chest', percentage: 60 },
+      { group: 'back', percentage: 65 },
+      { group: 'legs', percentage: 75 },
+    ],
+    expanded: true,
+  },
+}
+
+function InteractiveMesoCard() {
+  const [expanded, setExpanded] = useState(false)
+  return (
+    <View style={{ maxWidth: 420, padding: 16 }}>
+      <MesoCard
+        name="Accumulation"
+        goal="Hypertrophy"
+        split="Upper/Lower"
+        weekRange="Weeks 1-4"
+        currentWeek={2}
+        totalWeeks={4}
+        weeks={weeks}
+        volumeHeatmap={[
+          { group: 'chest', percentage: 80 },
+          { group: 'back', percentage: 70 },
+          { group: 'legs', percentage: 90 },
+        ]}
+        expanded={expanded}
+        onToggle={() => setExpanded((v) => !v)}
+      />
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveMesoCard />,
+}

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

@@ -0,0 +1,170 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { MesoCard } from './MesoCard'
+import type { WeekRowProps } from './WeekRow'
+
+const weeks: WeekRowProps[] = [
+  {
+    weekNumber: 1,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'completed' },
+      { name: 'Lower', status: 'completed' },
+    ],
+    intensityLevel: 0.4,
+  },
+  {
+    weekNumber: 2,
+    totalWeeks: 4,
+    workouts: [
+      { name: 'Upper', status: 'current' },
+      { name: 'Lower', status: 'upcoming' },
+    ],
+    intensityLevel: 0.6,
+  },
+]
+
+const baseProps = {
+  name: 'Accumulation',
+  goal: 'Hypertrophy',
+  split: 'Upper/Lower',
+  weekRange: 'Weeks 1-4',
+  totalWeeks: 4,
+  weeks,
+}
+
+describe('MesoCard', () => {
+  describe('rendering', () => {
+    it('renders name, goal badge, and sub-header', () => {
+      render(<MesoCard {...baseProps} />)
+      expect(screen.getByTestId('meso-card')).toBeInTheDocument()
+      expect(screen.getByTestId('meso-card-name')).toHaveTextContent(
+        'Accumulation',
+      )
+      expect(screen.getByTestId('meso-card-goal-badge')).toHaveTextContent(
+        'Hypertrophy',
+      )
+      expect(screen.getByTestId('meso-card-subheader')).toHaveTextContent(
+        'Upper/Lower · Weeks 1-4',
+      )
+    })
+
+    it('renders the 3px gradient top accent', () => {
+      render(<MesoCard {...baseProps} />)
+      expect(screen.getByTestId('meso-card-accent')).toBeInTheDocument()
+    })
+  })
+
+  describe('expansion', () => {
+    it('does not render week list when collapsed', () => {
+      render(<MesoCard {...baseProps} />)
+      expect(screen.queryByTestId('meso-card-weeks')).not.toBeInTheDocument()
+    })
+
+    it('renders the week list when expanded', () => {
+      render(<MesoCard {...baseProps} expanded />)
+      expect(screen.getByTestId('meso-card-weeks')).toBeInTheDocument()
+      expect(screen.getAllByTestId('week-row')).toHaveLength(2)
+    })
+
+    it('marks header as a button and fires onToggle', () => {
+      const onToggle = vi.fn()
+      render(<MesoCard {...baseProps} onToggle={onToggle} />)
+      const toggle = screen.getByTestId('meso-card-toggle')
+      expect(toggle).toHaveAttribute('aria-expanded', 'false')
+      fireEvent.click(toggle)
+      expect(onToggle).toHaveBeenCalledOnce()
+    })
+
+    it('reflects expanded state via aria-expanded', () => {
+      const onToggle = vi.fn()
+      render(<MesoCard {...baseProps} onToggle={onToggle} expanded />)
+      expect(screen.getByTestId('meso-card-toggle')).toHaveAttribute(
+        'aria-expanded',
+        'true',
+      )
+    })
+
+    it('renders a static container when not expandable', () => {
+      render(<MesoCard {...baseProps} />)
+      expect(screen.getByTestId('meso-card-static')).toBeInTheDocument()
+      expect(screen.queryByTestId('meso-card-toggle')).not.toBeInTheDocument()
+    })
+
+    it('derives current week marker from currentWeek prop', () => {
+      render(<MesoCard {...baseProps} currentWeek={2} expanded />)
+      expect(screen.getByTestId('week-row-current-dot')).toBeInTheDocument()
+    })
+  })
+
+  describe('volume heatmap', () => {
+    it('renders a heatmap cell per muscle group', () => {
+      render(
+        <MesoCard
+          {...baseProps}
+          volumeHeatmap={[
+            { group: 'chest', percentage: 80 },
+            { group: 'back', percentage: 50 },
+            { group: 'legs', percentage: 30 },
+          ]}
+        />,
+      )
+      expect(screen.getByTestId('meso-card-heatmap')).toBeInTheDocument()
+      expect(screen.getAllByTestId('meso-card-heatmap-cell')).toHaveLength(3)
+    })
+
+    it('does not render heatmap when no data provided', () => {
+      render(<MesoCard {...baseProps} />)
+      expect(screen.queryByTestId('meso-card-heatmap')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('highlighted state', () => {
+    it('applies a brand-primary border color when highlighted', () => {
+      render(<MesoCard {...baseProps} highlighted />)
+      const card = screen.getByTestId('meso-card')
+      const style = card.getAttribute('style') ?? ''
+      expect(style).toContain('box-shadow')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has an accessible label describing the meso', () => {
+      render(<MesoCard {...baseProps} />)
+      expect(
+        screen.getByLabelText('Accumulation, Hypertrophy, Weeks 1-4'),
+      ).toBeInTheDocument()
+    })
+
+    it('exposes the label on the button when expandable', () => {
+      render(<MesoCard {...baseProps} onToggle={vi.fn()} />)
+      const toggle = screen.getByLabelText('Accumulation, Hypertrophy, Weeks 1-4')
+      expect(toggle).toHaveAttribute('role', 'button')
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(<MesoCard {...baseProps} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when expanded with all features', async () => {
+      const { container } = render(
+        <MesoCard
+          {...baseProps}
+          currentWeek={2}
+          onToggle={vi.fn()}
+          expanded
+          highlighted
+          volumeHeatmap={[
+            { group: 'chest', percentage: 80 },
+            { group: 'back', percentage: 50 },
+          ]}
+        />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,237 @@
+// 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'
+import { Card } from '../../ui/card'
+import { Badge } from '../../ui/badge'
+import { WeekRow, type WeekRowProps } from './WeekRow'
+
+const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY_DARK = '#C45E00'
+const BRAND_PRIMARY_LIGHT = '#FFB066'
+const BORDER_DEFAULT = '#1F1F1F'
+// Theme-aware foregrounds: resolve to a readable color in both light and dark
+// (react-native-web passes the CSS var through to the inline style).
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
+
+/** Gradient stops for the 3px top accent: dark -> primary -> light. */
+const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
+
+export interface MesoVolumeHeatmapEntry {
+  /** Muscle group identifier (free-form to match plan data). */
+  group: string
+  /** Planned volume intensity for the group, 0-100. */
+  percentage: number
+}
+
+export interface MesoCardProps extends ViewProps {
+  /** Mesocycle name, e.g. "Accumulation". */
+  name: string
+  /** Training goal, e.g. "Hypertrophy", "Strength", "Peaking". */
+  goal: string
+  /** Training split, e.g. "Upper/Lower", "Push/Pull/Legs". */
+  split: string
+  /** Week range label, e.g. "Weeks 1-4". */
+  weekRange: string
+  /** Current week within the mesocycle (1-based). */
+  currentWeek?: number
+  /** Total weeks in the mesocycle. */
+  totalWeeks: number
+  /** Weeks rendered as a WeekRow list when expanded. */
+  weeks: WeekRowProps[]
+  /** Whether the card is expanded to reveal the week list. */
+  expanded?: boolean
+  /** Toggles expansion; makes the header a button when provided. */
+  onToggle?: () => void
+  /** Whether this meso is highlighted in the MesoProgressBar. */
+  highlighted?: boolean
+  /** Volume heatmap data per muscle group for the meso. */
+  volumeHeatmap?: MesoVolumeHeatmapEntry[]
+  className?: string
+}
+
+/**
+ * Maps a 0-100 volume percentage onto a brand-primary tint whose opacity
+ * tracks intensity, keeping a visible floor so low-volume groups stay legible.
+ */
+function heatmapColor(percentage: number): string {
+  const clamped = Math.max(0, Math.min(100, percentage))
+  const opacity = 0.12 + (clamped / 100) * 0.78
+  return `rgba(255,121,0,${opacity.toFixed(3)})`
+}
+
+/**
+ * A mesocycle card with name, goal, split, week range, an optional volume
+ * heatmap strip, and an expandable WeekRow list. Highlighting animates the
+ * border toward brand-primary with a subtle glow to stay in sync with the
+ * MesoProgressBar.
+ *
+ * @example
+ * <MesoCard
+ *   name="Accumulation"
+ *   goal="Hypertrophy"
+ *   split="Upper/Lower"
+ *   weekRange="Weeks 1-4"
+ *   currentWeek={2}
+ *   totalWeeks={4}
+ *   weeks={weeks}
+ *   volumeHeatmap={[{ group: 'chest', percentage: 80 }]}
+ *   expanded
+ *   onToggle={() => {}}
+ *   highlighted
+ * />
+ */
+export function MesoCard({
+  name,
+  goal,
+  split,
+  weekRange,
+  currentWeek,
+  totalWeeks,
+  weeks,
+  expanded = false,
+  onToggle,
+  highlighted = false,
+  volumeHeatmap,
+  className,
+  ...props
+}: MesoCardProps) {
+  const isExpandable = onToggle != null
+  const [highlight] = useState(() => new Animated.Value(highlighted ? 1 : 0))
+
+  useEffect(() => {
+    const animation = Animated.timing(highlight, {
+      toValue: highlighted ? 1 : 0,
+      duration: 250,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    })
+    animation.start()
+    return () => animation.stop()
+  }, [highlighted, highlight])
+
+  const borderColor = highlight.interpolate({
+    inputRange: [0, 1],
+    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY],
+  })
+
+  const header = (
+    <View style={{ paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }} testID="meso-card-body">
+      <View className="flex-row items-center" style={{ gap: 8 }} testID="meso-card-header">
+        <Text
+          style={{
+            fontSize: 15,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: TEXT_PRIMARY,
+          }}
+          testID="meso-card-name"
+        >
+          {name}
+        </Text>
+        <Badge variant="subtle" color="primary" size="sm" testID="meso-card-goal-badge">
+          {goal}
+        </Badge>
+      </View>
+
+      <Text
+        style={{
+          marginTop: 4,
+          fontSize: 12,
+          fontFamily: 'Inter, sans-serif',
+          color: TEXT_SECONDARY,
+        }}
+        testID="meso-card-subheader"
+      >
+        {`${split} · ${weekRange}`}
+      </Text>
+
+      {volumeHeatmap && volumeHeatmap.length > 0 && (
+        <View
+          className="flex-row items-center"
+          style={{ marginTop: 10, gap: 3 }}
+          accessibilityElementsHidden
+          testID="meso-card-heatmap"
+        >
+          {volumeHeatmap.map((entry) => (
+            <View
+              key={entry.group}
+              style={{
+                flex: 1,
+                height: 8,
+                borderRadius: 2,
+                backgroundColor: heatmapColor(entry.percentage),
+              }}
+              testID="meso-card-heatmap-cell"
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  )
+
+  return (
+    <Animated.View style={highlighted ? { transform: [{ scale: 1.0 }] } : undefined} testID="meso-card-wrapper">
+      <Card
+        variant="outline"
+        elevation={2}
+        borderColor={highlighted ? BRAND_PRIMARY : BORDER_DEFAULT}
+        className={className}
+        style={[
+          { borderColor: borderColor as unknown as string },
+          highlighted
+            ? { boxShadow: '0 0 12px 2px rgba(255,121,0,0.25)' }
+            : undefined,
+        ]}
+        testID="meso-card"
+        {...props}
+      >
+        <View
+          className="flex-row"
+          style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, zIndex: 1 }}
+          accessibilityElementsHidden
+          testID="meso-card-accent"
+        >
+          {ACCENT_STOPS.map((color) => (
+            <View key={color} style={{ flex: 1, backgroundColor: color }} />
+          ))}
+        </View>
+
+        {isExpandable ? (
+          <Pressable
+            onPress={onToggle}
+            accessibilityRole="button"
+            accessibilityLabel={`${name}, ${goal}, ${weekRange}`}
+            aria-expanded={expanded}
+            testID="meso-card-toggle"
+          >
+            {header}
+          </Pressable>
+        ) : (
+          <View
+            accessibilityLabel={`${name}, ${goal}, ${weekRange}`}
+            testID="meso-card-static"
+          >
+            {header}
+          </View>
+        )}
+
+        {expanded && weeks.length > 0 && (
+          <View
+            style={{ borderTopWidth: 1, borderTopColor: BORDER_DEFAULT }}
+            testID="meso-card-weeks"
+          >
+            {weeks.map((week) => (
+              <WeekRow
+                key={week.weekNumber}
+                {...week}
+                totalWeeks={week.totalWeeks ?? totalWeeks}
+                isCurrent={week.isCurrent ?? week.weekNumber === currentWeek}
+              />
+            ))}
+          </View>
+        )}
+      </Card>
+    </Animated.View>
+  )
+}

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

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View } from 'react-native'
+import { MesoProgressBar, type Meso } from './MesoProgressBar'
+
+const meta: Meta<typeof MesoProgressBar> = {
+  title: 'Custom/Workout/MesoProgressBar',
+  component: MesoProgressBar,
+  tags: ['autodocs'],
+  argTypes: {
+    activeMesoId: {
+      control: 'text',
+      description: 'Id of the highlighted meso, synced with MesoCard selection',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof MesoProgressBar>
+
+const sampleMesos: Meso[] = [
+  { 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' },
+  { id: 'm4', name: 'Deload', weekCount: 1, status: 'upcoming' },
+]
+
+export const Default: Story = {
+  args: {
+    mesos: sampleMesos,
+    activeMesoId: null,
+    onMesoPress: () => {},
+  },
+  render: (args) => (
+    <View style={{ paddingVertical: 24, width: 480 }}>
+      <MesoProgressBar {...args} />
+    </View>
+  ),
+}
+
+export const ActiveCurrent: Story = {
+  args: {
+    mesos: sampleMesos,
+    activeMesoId: 'm2',
+    onMesoPress: () => {},
+  },
+  render: (args) => (
+    <View style={{ paddingVertical: 24, width: 480 }}>
+      <MesoProgressBar {...args} />
+    </View>
+  ),
+}
+
+export const FirstWeekProgress: Story = {
+  args: {
+    mesos: [
+      { id: 'a', name: 'Base', weekCount: 5, status: 'current', currentWeek: 1 },
+      { id: 'b', name: 'Build', weekCount: 4, status: 'upcoming' },
+    ],
+    activeMesoId: 'a',
+    onMesoPress: () => {},
+  },
+  render: (args) => (
+    <View style={{ paddingVertical: 24, width: 480 }}>
+      <MesoProgressBar {...args} />
+    </View>
+  ),
+}
+
+function InteractiveDemo() {
+  const [activeMesoId, setActiveMesoId] = useState<string | null>('m2')
+  return (
+    <View style={{ paddingVertical: 24, width: 480 }}>
+      <MesoProgressBar
+        mesos={sampleMesos}
+        activeMesoId={activeMesoId}
+        onMesoPress={setActiveMesoId}
+      />
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveDemo />,
+}