@titan-design/react-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,92 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+
+// Aliases for spec compatibility: under=behind, maintenance=ontrack, productive=target
+export type VolumeStatus = 'untrained' | 'behind' | 'ontrack' | 'target' | 'over'
+
+export interface MuscleGroupChipProps extends ViewProps {
+  name: string
+  volumeStatus?: VolumeStatus
+  onPress?: () => void
+  className?: string
+}
+
+const dotColorMap: Record<VolumeStatus, string> = {
+  untrained: '#2C2C2C',
+  behind: '#406D87',
+  ontrack: '#14B8A6',
+  target: '#FF7900',
+  over: '#D14343',
+}
+
+export function MuscleGroupChip({
+  name,
+  volumeStatus,
+  onPress,
+  className,
+  ...props
+}: MuscleGroupChipProps) {
+  const dotColor = volumeStatus
+    ? dotColorMap[volumeStatus]
+    : '#2C2C2C'
+
+  const statusLabel = volumeStatus ?? 'no status'
+
+  const content = (
+    <View
+      className={className}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 9999,
+        paddingHorizontal: 9,
+        paddingVertical: 3,
+        backgroundColor: 'var(--color-surface-raised)',
+        borderWidth: 1,
+        borderColor: 'var(--color-border-default)',
+      }}
+      accessibilityLabel={onPress ? undefined : `${name}, volume status: ${statusLabel}`}
+      testID="muscle-group-chip"
+      {...props}
+    >
+      <View
+        style={{
+          width: 6,
+          height: 6,
+          borderRadius: 9999,
+          marginRight: 5,
+          flexShrink: 0,
+          backgroundColor: dotColor,
+        }}
+        accessibilityElementsHidden
+        testID="muscle-group-chip-dot"
+      />
+      <Text
+        style={{
+          fontFamily: 'Inter, sans-serif',
+          fontWeight: '500',
+          fontSize: 11,
+          color: 'var(--color-text-secondary)',
+        }}
+        accessibilityElementsHidden
+      >
+        {name}
+      </Text>
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityLabel={`${name}, volume status: ${statusLabel}`}
+        testID="muscle-group-chip-pressable"
+      >
+        {content}
+      </Pressable>
+    )
+  }
+
+  return content
+}

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

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { PlaceholderStrip } from './PlaceholderStrip'
+
+const meta: Meta<typeof PlaceholderStrip> = {
+  title: 'Custom/Workout/PlaceholderStrip',
+  component: PlaceholderStrip,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Fixed width or flex:1 (default)',
+    },
+    mode: {
+      control: 'select',
+      options: ['single', 'segmented'],
+      description: 'Render as single dashed strip or segmented mini-strip',
+    },
+    segments: {
+      control: 'number',
+      description: 'Number of segments in segmented mode',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof PlaceholderStrip>
+
+export const Default: Story = {
+  args: {},
+  decorators: [
+    (Story) => (
+      <View style={{ width: 300 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export const FixedWidth: Story = {
+  args: {
+    width: 200,
+  },
+}
+
+export const Segmented: Story = {
+  args: {
+    mode: 'segmented',
+    segments: 5,
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 300 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export const SegmentedThree: Story = {
+  args: {
+    mode: 'segmented',
+    segments: 3,
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 200 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export const MultipleStrips: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 300 }}>
+      <View style={{ flex: 1, height: 3, backgroundColor: '#2ed573', borderRadius: 1 }} />
+      <View style={{ flex: 1, height: 3, backgroundColor: '#ffd43b', borderRadius: 1 }} />
+      <View style={{ flex: 1, height: 3, backgroundColor: '#ffa502', borderRadius: 1 }} />
+      <PlaceholderStrip />
+      <PlaceholderStrip />
+    </View>
+  ),
+}
+
+export const MixedModes: Story = {
+  render: () => (
+    <View style={{ gap: 12, width: 300 }}>
+      <PlaceholderStrip mode="single" />
+      <PlaceholderStrip mode="segmented" segments={5} />
+      <PlaceholderStrip mode="segmented" segments={8} />
+    </View>
+  ),
+}

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

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { PlaceholderStrip } from './PlaceholderStrip'
+
+describe('PlaceholderStrip', () => {
+  it('renders a strip element', () => {
+    render(<PlaceholderStrip />)
+    expect(screen.getByTestId('placeholder-strip')).toBeInTheDocument()
+  })
+
+  it('sets accessibility label', () => {
+    render(<PlaceholderStrip />)
+    expect(
+      screen.getByLabelText('Planned set, not yet completed'),
+    ).toBeInTheDocument()
+  })
+
+  it('applies fixed width when provided', () => {
+    render(<PlaceholderStrip width={200} />)
+    const strip = screen.getByTestId('placeholder-strip')
+    expect(strip).toBeInTheDocument()
+  })
+
+  it('renders multiple strips', () => {
+    render(
+      <>
+        <PlaceholderStrip />
+        <PlaceholderStrip />
+        <PlaceholderStrip />
+      </>,
+    )
+    const strips = screen.getAllByTestId('placeholder-strip')
+    expect(strips).toHaveLength(3)
+  })
+
+  it('defaults to single mode', () => {
+    render(<PlaceholderStrip />)
+    expect(screen.queryAllByTestId('placeholder-segment')).toHaveLength(0)
+  })
+
+  describe('segmented mode', () => {
+    it('renders segments when mode is segmented', () => {
+      render(<PlaceholderStrip mode="segmented" segments={5} />)
+      const segments = screen.getAllByTestId('placeholder-segment')
+      expect(segments).toHaveLength(5)
+    })
+
+    it('defaults to 3 segments when segments prop is omitted', () => {
+      render(<PlaceholderStrip mode="segmented" />)
+      const segments = screen.getAllByTestId('placeholder-segment')
+      expect(segments).toHaveLength(3)
+    })
+
+    it('still has the strip container testID', () => {
+      render(<PlaceholderStrip mode="segmented" segments={4} />)
+      expect(screen.getByTestId('placeholder-strip')).toBeInTheDocument()
+    })
+
+    it('sets accessibility label in segmented mode', () => {
+      render(<PlaceholderStrip mode="segmented" segments={3} />)
+      expect(
+        screen.getByLabelText('Planned set, not yet completed'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations in single mode', async () => {
+      const { container } = render(<PlaceholderStrip />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations in segmented mode', async () => {
+      const { container } = render(
+        <PlaceholderStrip mode="segmented" segments={4} />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,91 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+
+export interface PlaceholderStripProps extends ViewProps {
+  width?: number | string
+  /** Render as single solid strip or segmented mini-strip */
+  mode?: 'single' | 'segmented'
+  /** Number of segments when mode is 'segmented' */
+  segments?: number
+  className?: string
+}
+
+function SingleStrip({
+  width,
+  className,
+  ...props
+}: Omit<PlaceholderStripProps, 'mode' | 'segments'>) {
+  return (
+    <View
+      className={cn(className)}
+      style={[
+        {
+          height: 3,
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderStyle: 'dashed',
+          borderColor: WORKOUT_TOKENS.border.strong,
+          borderRadius: 1,
+          opacity: 0.5,
+        },
+        width != null ? { width: width as number } : { flex: 1 },
+      ]}
+      accessibilityRole="image"
+      accessibilityLabel="Planned set, not yet completed"
+      testID="placeholder-strip"
+      {...props}
+    />
+  )
+}
+
+function SegmentedStrip({
+  segments = 3,
+  width,
+  className,
+  ...props
+}: Omit<PlaceholderStripProps, 'mode'>) {
+  return (
+    <View
+      className={cn('flex-row', className)}
+      style={[
+        { height: 3, gap: 2, opacity: 0.5 },
+        width != null ? { width: width as number } : { flex: 1 },
+      ]}
+      accessibilityRole="image"
+      accessibilityLabel="Planned set, not yet completed"
+      testID="placeholder-strip"
+      {...props}
+    >
+      {Array.from({ length: segments }, (_, i) => (
+        <View
+          key={i}
+          style={{
+            flex: 1,
+            height: 3,
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderStyle: 'dashed',
+            borderColor: WORKOUT_TOKENS.border.strong,
+            borderRadius: 1,
+            minWidth: 4,
+          }}
+          accessibilityElementsHidden
+          testID="placeholder-segment"
+        />
+      ))}
+    </View>
+  )
+}
+
+export function PlaceholderStrip({
+  mode = 'single',
+  segments,
+  ...props
+}: PlaceholderStripProps) {
+  if (mode === 'segmented') {
+    return <SegmentedStrip segments={segments} {...props} />
+  }
+  return <SingleStrip {...props} />
+}

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { PrBadge } from './PrBadge'
+
+const meta: Meta<typeof PrBadge> = {
+  title: 'Custom/Workout/PrBadge',
+  component: PrBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['e1rm', 'weight', 'reps', 'volume', 'velocity'],
+      description: 'PR type determines auto-generated label',
+    },
+    label: {
+      control: 'text',
+      description: 'Custom label (overrides auto-generated)',
+    },
+    compact: {
+      control: 'boolean',
+      description: 'Show only star icon, no text',
+    },
+    animate: {
+      control: 'boolean',
+      description: 'Trigger pop animation on mount',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof PrBadge>
+
+export const Animated: Story = {
+  args: {
+    animate: true,
+    type: 'e1rm',
+  },
+}
+
+export const Static: Story = {
+  args: {
+    animate: false,
+    type: 'e1rm',
+  },
+}
+
+export const WeightPr: Story = {
+  args: {
+    type: 'weight',
+    animate: false,
+  },
+}
+
+export const RepsPr: Story = {
+  args: {
+    type: 'reps',
+    animate: false,
+  },
+}
+
+export const VelocityPr: Story = {
+  args: {
+    type: 'velocity',
+    animate: false,
+  },
+}
+
+export const CustomLabel: Story = {
+  args: {
+    label: 'PR 5RM',
+    animate: false,
+  },
+}
+
+export const Compact: Story = {
+  args: {
+    compact: true,
+    animate: false,
+  },
+}
+
+export const CompactAnimated: Story = {
+  args: {
+    compact: true,
+    animate: true,
+  },
+}
+
+export const AllTypes: Story = {
+  render: () => (
+    <View style={{ gap: 8 }}>
+      <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+        <PrBadge type="e1rm" animate={false} />
+        <PrBadge type="weight" animate={false} />
+        <PrBadge type="reps" animate={false} />
+        <PrBadge type="volume" animate={false} />
+        <PrBadge type="velocity" animate={false} />
+      </View>
+      <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+        <PrBadge compact animate={false} />
+        <PrBadge label="PR 5RM" animate={false} />
+      </View>
+    </View>
+  ),
+}

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

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { PrBadge } from './PrBadge'
+
+describe('PrBadge', () => {
+  it('renders star and default PR label', () => {
+    render(<PrBadge animate={false} />)
+    expect(screen.getByText(/\u2605 PR e1RM/)).toBeInTheDocument()
+  })
+
+  it('renders with animation wrapper when animate is true', () => {
+    render(<PrBadge animate />)
+    expect(screen.getByTestId('pr-badge-animated')).toBeInTheDocument()
+  })
+
+  it('renders without animation wrapper when animate is false', () => {
+    render(<PrBadge animate={false} />)
+    expect(screen.queryByTestId('pr-badge-animated')).not.toBeInTheDocument()
+  })
+
+  it('defaults to animated', () => {
+    render(<PrBadge />)
+    expect(screen.getByTestId('pr-badge-animated')).toBeInTheDocument()
+  })
+
+  it('sets accessibility label with resolved label', () => {
+    render(<PrBadge animate={false} />)
+    expect(
+      screen.getByLabelText('Personal record: PR e1RM'),
+    ).toBeInTheDocument()
+  })
+
+  describe('type prop', () => {
+    it('generates label from e1rm type', () => {
+      render(<PrBadge type="e1rm" animate={false} />)
+      expect(screen.getByText(/PR e1RM/)).toBeInTheDocument()
+    })
+
+    it('generates label from weight type', () => {
+      render(<PrBadge type="weight" animate={false} />)
+      expect(screen.getByText(/PR Weight/)).toBeInTheDocument()
+    })
+
+    it('generates label from reps type', () => {
+      render(<PrBadge type="reps" animate={false} />)
+      expect(screen.getByText(/PR Reps/)).toBeInTheDocument()
+    })
+
+    it('generates label from volume type', () => {
+      render(<PrBadge type="volume" animate={false} />)
+      expect(screen.getByText(/PR Volume/)).toBeInTheDocument()
+    })
+
+    it('generates label from velocity type', () => {
+      render(<PrBadge type="velocity" animate={false} />)
+      expect(screen.getByText(/PR Velocity/)).toBeInTheDocument()
+    })
+  })
+
+  describe('custom label', () => {
+    it('uses custom label over auto-generated', () => {
+      render(<PrBadge label="PR 5RM" animate={false} />)
+      expect(screen.getByText(/PR 5RM/)).toBeInTheDocument()
+    })
+
+    it('sets accessibility label with custom label', () => {
+      render(<PrBadge label="PR 5RM" animate={false} />)
+      expect(
+        screen.getByLabelText('Personal record: PR 5RM'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('compact mode', () => {
+    it('renders only the star icon when compact', () => {
+      render(<PrBadge compact animate={false} />)
+      const star = screen.getByTestId('pr-badge-star')
+      expect(star).toBeInTheDocument()
+      // The compact star is now a Lucide SVG icon, not text
+      expect(star.querySelector('svg')).toBeInTheDocument()
+      expect(star).not.toHaveTextContent('\u2605')
+    })
+
+    it('does not show label text in compact mode', () => {
+      render(<PrBadge compact animate={false} />)
+      expect(screen.queryByText(/PR e1RM/)).not.toBeInTheDocument()
+    })
+
+    it('has correct accessibility label in compact mode', () => {
+      render(<PrBadge compact animate={false} />)
+      expect(
+        screen.getByLabelText('Personal record: PR e1RM'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<PrBadge animate={false} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations in compact mode', async () => {
+      const { container } = render(<PrBadge compact animate={false} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,103 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useEffect, useState } from 'react'
+import { View, Text, Animated, Easing, type ViewProps } from 'react-native'
+import { Star } from 'lucide-react'
+import { BaseBadge } from './BaseBadge'
+
+export type PRType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
+
+export interface PrBadgeProps extends ViewProps {
+  /** PR type determines auto-generated label */
+  type?: PRType
+  /** Display label (e.g., "PR e1RM", "PR 5RM"). Auto-generated from type if omitted. */
+  label?: string
+  /** Show only the star icon, no text label */
+  compact?: boolean
+  /** Trigger pop animation on mount */
+  animate?: boolean
+  className?: string
+}
+
+const typeLabels: Record<PRType, string> = {
+  e1rm: 'PR e1RM',
+  weight: 'PR Weight',
+  reps: 'PR Reps',
+  volume: 'PR Volume',
+  velocity: 'PR Velocity',
+}
+
+export function PrBadge({
+  type = 'e1rm',
+  label: labelProp,
+  compact = false,
+  animate = true,
+  className,
+  ...props
+}: PrBadgeProps) {
+  const resolvedLabel = labelProp ?? typeLabels[type]
+  const [scale] = useState(() => new Animated.Value(animate ? 0.8 : 1))
+  const [opacity] = useState(() => new Animated.Value(animate ? 0 : 1))
+
+  useEffect(() => {
+    if (!animate) return
+
+    // HTML demo uses a 3-keyframe sequence; bezier approximation is close enough for native
+    Animated.parallel([
+      Animated.timing(scale, {
+        toValue: 1,
+        duration: 400,
+        easing: Easing.bezier(0.34, 1.56, 0.64, 1),
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 400,
+        easing: Easing.bezier(0.34, 1.56, 0.64, 1),
+        useNativeDriver: true,
+      }),
+    ]).start()
+  }, [animate, scale, opacity])
+
+  const badge = compact ? (
+    <View
+      className={className}
+      accessibilityRole="image"
+      accessibilityLabel={`Personal record: ${resolvedLabel}`}
+      testID="pr-badge-star"
+      {...props}
+    >
+      <Star size={14} color="#FF7900" fill="#FF7900" strokeWidth={2} />
+    </View>
+  ) : (
+    <BaseBadge
+      variant="pr"
+      className={className}
+      accessibilityLabel={`Personal record: ${resolvedLabel}`}
+      {...props}
+    >
+      <Text
+        style={{
+          fontSize: 10,
+          color: '#FF7900',
+          fontWeight: '700',
+          fontFamily: 'Inter, sans-serif',
+        }}
+      >
+        {'\u2605'} {resolvedLabel}
+      </Text>
+    </BaseBadge>
+  )
+
+  if (animate) {
+    return (
+      <Animated.View
+        style={{ transform: [{ scale }], opacity }}
+        testID="pr-badge-animated"
+      >
+        {badge}
+      </Animated.View>
+    )
+  }
+
+  return badge
+}