@titan-design/react-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Dumbbell } from 'lucide-react'
+import { BaseBadge } from './BaseBadge'
+
+const meta: Meta<typeof BaseBadge> = {
+  title: 'Custom/Workout/BaseBadge',
+  component: BaseBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['plain', 'pr'], description: 'Visual variant' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'], description: 'Badge size' },
+    onPress: { action: 'pressed', description: 'Callback when tapped' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof BaseBadge>
+
+const Label = ({ children, color = '#9CA3AF' }: { children: string; color?: string }) => (
+  <Text
+    style={{
+      fontFamily: '"Space Grotesk", sans-serif',
+      fontWeight: '600',
+      fontSize: 10,
+      color,
+    }}
+  >
+    {children}
+  </Text>
+)
+
+export const Plain: Story = {
+  args: {
+    variant: 'plain',
+    children: <Label>225 lbs</Label>,
+  },
+}
+
+export const Pr: Story = {
+  args: {
+    variant: 'pr',
+    children: <Label color="#FF7900">PR</Label>,
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    variant: 'plain',
+    icon: <Dumbbell size={12} color="#9CA3AF" strokeWidth={2} />,
+    children: <Label>225 lbs</Label>,
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <BaseBadge size="sm"><Label>225 lbs</Label></BaseBadge>
+        <BaseBadge size="md"><Label>225 lbs</Label></BaseBadge>
+        <BaseBadge size="lg"><Label>225 lbs</Label></BaseBadge>
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <BaseBadge variant="pr" size="sm"><Label color="#FF7900">PR</Label></BaseBadge>
+        <BaseBadge variant="pr" size="md"><Label color="#FF7900">PR</Label></BaseBadge>
+        <BaseBadge variant="pr" size="lg"><Label color="#FF7900">PR</Label></BaseBadge>
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <BaseBadge icon={<Dumbbell size={12} color="#9CA3AF" strokeWidth={2} />}>
+          <Label>225 lbs</Label>
+        </BaseBadge>
+      </View>
+    </View>
+  ),
+}

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

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Text, View } from 'react-native'
+import { BaseBadge } from './BaseBadge'
+
+describe('BaseBadge', () => {
+  it('renders children', () => {
+    render(<BaseBadge testID="bb"><Text>Hello</Text></BaseBadge>)
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+  })
+
+  it('defaults to the plain variant border color', () => {
+    render(<BaseBadge testID="bb"><Text>x</Text></BaseBadge>)
+    expect(screen.getByTestId('bb')).toHaveStyle({ borderTopColor: '#1F1F1F' })
+  })
+
+  it('applies the pr variant border color', () => {
+    render(
+      <BaseBadge variant="pr" testID="bb">
+        <Text>x</Text>
+      </BaseBadge>,
+    )
+    expect(screen.getByTestId('bb')).toHaveStyle({
+      borderTopColor: 'rgba(255, 121, 0, 0.12)',
+    })
+  })
+
+  describe('icon', () => {
+    it('renders the icon when provided and hides it from the a11y tree', () => {
+      render(
+        <BaseBadge icon={<View testID="my-icon" />}>
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      expect(screen.getByTestId('base-badge-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('my-icon')).toBeInTheDocument()
+    })
+
+    it('does not render an icon wrapper when no icon is provided', () => {
+      render(<BaseBadge><Text>x</Text></BaseBadge>)
+      expect(screen.queryByTestId('base-badge-icon')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('onPress', () => {
+    it('wraps in a Pressable when onPress is provided', () => {
+      const onPress = vi.fn()
+      render(
+        <BaseBadge onPress={onPress} accessibilityLabel="Press me">
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      const pressable = screen.getByTestId('base-badge-pressable')
+      fireEvent.click(pressable)
+      expect(onPress).toHaveBeenCalledOnce()
+    })
+
+    it('does not render a Pressable when onPress is omitted', () => {
+      render(<BaseBadge><Text>x</Text></BaseBadge>)
+      expect(screen.queryByTestId('base-badge-pressable')).not.toBeInTheDocument()
+    })
+
+    it('exposes a button role only when pressable', () => {
+      render(
+        <BaseBadge onPress={() => {}} accessibilityLabel="Press me">
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  describe('size', () => {
+    it.each(['sm', 'md', 'lg'] as const)('renders %s size', (size) => {
+      render(<BaseBadge size={size} testID="bb"><Text>x</Text></BaseBadge>)
+      expect(screen.getByTestId('bb')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations as a static badge', async () => {
+      const { container } = render(
+        <BaseBadge accessibilityLabel="Static badge">
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations as a pressable badge', async () => {
+      const { container } = render(
+        <BaseBadge onPress={() => {}} accessibilityLabel="Pressable badge">
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,113 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useState, type ReactNode } from 'react'
+import { View, Pressable, Animated, type ViewProps } from 'react-native'
+
+export type BaseBadgeVariant = 'plain' | 'pr'
+export type BaseBadgeSize = 'sm' | 'md' | 'lg'
+
+export interface BaseBadgeProps extends ViewProps {
+  /** Visual variant — plain (neutral) or pr (brand-primary-subtle) */
+  variant?: BaseBadgeVariant
+  /** Size variant */
+  size?: BaseBadgeSize
+  /** Optional icon rendered left of children; hidden from a11y tree */
+  icon?: ReactNode
+  onPress?: () => void
+  className?: string
+  children?: ReactNode
+}
+
+export const baseBadgeSizeConfig: Record<
+  BaseBadgeSize,
+  { fontSize: number; paddingH: number; paddingV: number; iconSize: number }
+> = {
+  sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
+  md: { fontSize: 10, paddingH: 8, paddingV: 2, iconSize: 12 },
+  lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 },
+}
+
+const variantColors: Record<
+  BaseBadgeVariant,
+  { backgroundColor: string; borderColor: string }
+> = {
+  plain: { backgroundColor: '#1C1C1C', borderColor: '#1F1F1F' },
+  pr: {
+    backgroundColor: 'rgba(255, 121, 0, 0.12)',
+    borderColor: 'rgba(255, 121, 0, 0.12)',
+  },
+}
+
+export function BaseBadge({
+  variant = 'plain',
+  size = 'md',
+  icon,
+  onPress,
+  className,
+  children,
+  ...props
+}: BaseBadgeProps) {
+  const [scaleAnim] = useState(() => new Animated.Value(1))
+  const config = baseBadgeSizeConfig[size]
+  const colors = variantColors[variant]
+
+  const handlePressIn = () => {
+    Animated.timing(scaleAnim, {
+      toValue: 0.97,
+      duration: 150,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.timing(scaleAnim, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const badge = (
+    <View
+      className={className}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        // borderRadius 2 is intentional per workout-tokens.ts (squared-off pill)
+        borderRadius: 2,
+        borderWidth: 1,
+        borderColor: colors.borderColor,
+        backgroundColor: colors.backgroundColor,
+        paddingHorizontal: config.paddingH,
+        paddingVertical: config.paddingV,
+      }}
+      {...props}
+    >
+      {icon != null && (
+        <View accessibilityElementsHidden testID="base-badge-icon">
+          {icon}
+        </View>
+      )}
+      {children}
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+        <Pressable
+          onPress={onPress}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          accessibilityRole="button"
+          accessibilityLabel={props.accessibilityLabel}
+          testID="base-badge-pressable"
+        >
+          {badge}
+        </Pressable>
+      </Animated.View>
+    )
+  }
+
+  return badge
+}

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View } from 'react-native'
+import { BodyMap, type BodyMapData } from './BodyMap'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const sampleData: BodyMapData[] = [
+  { muscleGroup: MuscleGroup.CHEST, intensity: 0.7, volumeStatus: 'productive', weeklySets: 12 },
+  {
+    muscleGroup: MuscleGroup.FRONT_DELTS,
+    intensity: 0.5,
+    volumeStatus: 'maintenance',
+    weeklySets: 5,
+  },
+  {
+    muscleGroup: MuscleGroup.SIDE_DELTS,
+    intensity: 0.6,
+    volumeStatus: 'productive',
+    weeklySets: 10,
+  },
+  { muscleGroup: MuscleGroup.BICEPS, intensity: 0.3, volumeStatus: 'under', weeklySets: 3 },
+  { muscleGroup: MuscleGroup.TRICEPS, intensity: 0.65, volumeStatus: 'productive', weeklySets: 8 },
+  { muscleGroup: MuscleGroup.ABS, intensity: 0.4, volumeStatus: 'maintenance', weeklySets: 6 },
+  {
+    muscleGroup: MuscleGroup.OBLIQUES,
+    intensity: 0.35,
+    volumeStatus: 'maintenance',
+    weeklySets: 4,
+  },
+  { muscleGroup: MuscleGroup.QUADS, intensity: 0.95, volumeStatus: 'over', weeklySets: 20 },
+]
+
+const backData: BodyMapData[] = [
+  { muscleGroup: MuscleGroup.LATS, intensity: 0.6, volumeStatus: 'productive', weeklySets: 11 },
+  {
+    muscleGroup: MuscleGroup.UPPER_BACK,
+    intensity: 0.5,
+    volumeStatus: 'maintenance',
+    weeklySets: 8,
+  },
+  { muscleGroup: MuscleGroup.REAR_DELTS, intensity: 0.3, volumeStatus: 'under', weeklySets: 4 },
+  { muscleGroup: MuscleGroup.TRICEPS, intensity: 0.65, volumeStatus: 'productive', weeklySets: 8 },
+  { muscleGroup: MuscleGroup.GLUTES, intensity: 0.7, volumeStatus: 'productive', weeklySets: 10 },
+  {
+    muscleGroup: MuscleGroup.HAMSTRINGS,
+    intensity: 0.55,
+    volumeStatus: 'productive',
+    weeklySets: 9,
+  },
+  { muscleGroup: MuscleGroup.CALVES, intensity: 0.2, volumeStatus: 'under', weeklySets: 3 },
+]
+
+const meta: Meta<typeof BodyMap> = {
+  title: 'Custom/Workout/BodyMap',
+  component: BodyMap,
+  tags: ['autodocs'],
+  argTypes: {
+    view: { control: 'inline-radio', options: ['front', 'back'] },
+    mode: { control: 'inline-radio', options: ['simple', 'detailed'] },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16, maxWidth: 320 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof BodyMap>
+
+export const Front: Story = {
+  args: { data: sampleData, view: 'front', mode: 'detailed' },
+}
+
+export const Back: Story = {
+  args: { data: backData, view: 'back', mode: 'detailed' },
+}
+
+export const Simple: Story = {
+  args: { data: sampleData, view: 'front', mode: 'simple' },
+}
+
+export const Detailed: Story = {
+  args: { data: sampleData, view: 'front', mode: 'detailed' },
+}
+
+export const Highlighted: Story = {
+  args: {
+    data: sampleData,
+    view: 'front',
+    mode: 'detailed',
+    highlightedMuscle: MuscleGroup.QUADS,
+  },
+}
+
+export const Empty: Story = {
+  args: { data: [], view: 'front' },
+}
+
+function InteractiveBodyMap() {
+  const [view, setView] = useState<'front' | 'back'>('front')
+  const [selected, setSelected] = useState<MuscleGroup | null>(null)
+  return (
+    <View style={{ maxWidth: 320 }}>
+      <BodyMap
+        data={view === 'front' ? sampleData : backData}
+        view={view}
+        onViewChange={setView}
+        onMusclePress={(m) => setSelected((cur) => (cur === m ? null : m))}
+        highlightedMuscle={selected}
+        mode="detailed"
+      />
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveBodyMap />,
+}

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

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { BodyMap, type BodyMapData } from './BodyMap'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const data: BodyMapData[] = [
+  { muscleGroup: MuscleGroup.CHEST, intensity: 0.7, volumeStatus: 'productive', weeklySets: 12 },
+  { muscleGroup: MuscleGroup.LATS, intensity: 0.4, volumeStatus: 'under', weeklySets: 6 },
+  { muscleGroup: MuscleGroup.QUADS, intensity: 0.9, volumeStatus: 'over', weeklySets: 20 },
+]
+
+describe('BodyMap', () => {
+  describe('rendering', () => {
+    it('renders the container, SVG, and view toggle', () => {
+      render(<BodyMap data={data} view="front" />)
+      expect(screen.getByTestId('body-map')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-svg')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-view-toggle')).toBeInTheDocument()
+    })
+
+    it('renders the SVG body for both front and back views', () => {
+      const { rerender, container } = render(<BodyMap data={data} view="front" />)
+      expect(container.querySelector('svg')).toBeInTheDocument()
+      rerender(<BodyMap data={data} view="back" />)
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('renders one legend button per muscle in detailed mode', () => {
+      render(<BodyMap data={data} view="front" mode="detailed" />)
+      expect(screen.getByTestId('body-map-muscle-chest')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-muscle-lats')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-muscle-quads')).toBeInTheDocument()
+    })
+
+    it('aggregates muscles into simple groups in simple mode', () => {
+      render(<BodyMap data={data} view="front" mode="simple" />)
+      // chest -> chest, lats -> back, quads -> legs
+      expect(screen.getByTestId('body-map-muscle-chest')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-muscle-back')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-muscle-legs')).toBeInTheDocument()
+      expect(screen.queryByTestId('body-map-muscle-lats')).not.toBeInTheDocument()
+    })
+
+    it('renders an empty hint when there is no data', () => {
+      render(<BodyMap data={[]} view="front" />)
+      expect(screen.getByTestId('body-map-empty')).toBeInTheDocument()
+      expect(screen.queryByTestId('body-map-legend')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('interaction', () => {
+    it('calls onMusclePress with the tapped muscle group', () => {
+      const onMusclePress = vi.fn()
+      render(<BodyMap data={data} view="front" onMusclePress={onMusclePress} />)
+      fireEvent.click(screen.getByTestId('body-map-muscle-chest'))
+      expect(onMusclePress).toHaveBeenCalledWith(MuscleGroup.CHEST)
+    })
+
+    it('reports a representative detailed muscle from a simple group tap', () => {
+      const onMusclePress = vi.fn()
+      render(<BodyMap data={data} view="front" mode="simple" onMusclePress={onMusclePress} />)
+      fireEvent.click(screen.getByTestId('body-map-muscle-back'))
+      expect(onMusclePress).toHaveBeenCalledWith(MuscleGroup.LATS)
+    })
+
+    it('calls onViewChange from the front/back toggle', () => {
+      const onViewChange = vi.fn()
+      render(<BodyMap data={data} view="front" onViewChange={onViewChange} />)
+      fireEvent.click(screen.getByTestId('body-map-toggle-back'))
+      expect(onViewChange).toHaveBeenCalledWith('back')
+      fireEvent.click(screen.getByTestId('body-map-toggle-front'))
+      expect(onViewChange).toHaveBeenCalledWith('front')
+    })
+  })
+
+  describe('highlighted muscle', () => {
+    it('marks the highlighted muscle button as pressed', () => {
+      render(<BodyMap data={data} view="front" highlightedMuscle={MuscleGroup.CHEST} />)
+      expect(screen.getByTestId('body-map-muscle-chest')).toHaveAttribute('aria-pressed', 'true')
+      expect(screen.getByTestId('body-map-muscle-lats')).toHaveAttribute('aria-pressed', 'false')
+    })
+
+    it('applies an edge glow when a muscle is highlighted', () => {
+      render(<BodyMap data={data} view="front" highlightedMuscle={MuscleGroup.QUADS} />)
+      const svg = screen.getByTestId('body-map-svg')
+      expect(svg.getAttribute('style') ?? '').toContain('box-shadow')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('labels each muscle button with name, status, and weekly sets', () => {
+      render(<BodyMap data={data} view="front" />)
+      expect(screen.getByLabelText('Chest, productive, 12 sets this week')).toBeInTheDocument()
+      expect(screen.getByLabelText('Lats, under-trained, 6 sets this week')).toBeInTheDocument()
+    })
+
+    it('labels the view toggle buttons', () => {
+      render(<BodyMap data={data} view="front" onViewChange={vi.fn()} />)
+      expect(screen.getByLabelText('Show front view')).toBeInTheDocument()
+      expect(screen.getByLabelText('Show back view')).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations with data', async () => {
+      const { container } = render(
+        <BodyMap
+          data={data}
+          view="front"
+          onViewChange={vi.fn()}
+          onMusclePress={vi.fn()}
+          highlightedMuscle={MuscleGroup.CHEST}
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when empty', async () => {
+      const { container } = render(<BodyMap data={[]} view="back" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})