@titan-design/react-ui 0.2.6 → 0.2.7

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

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { TempoDisplay } from './TempoDisplay'
+
+// tempo = [eccentric, pauseBottom, concentric, pauseTop]
+describe('TempoDisplay', () => {
+  it('renders tempo values', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    expect(screen.getByTestId('tempo-value')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  it('renders the TEMPO label prefix', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    expect(screen.getByText('TEMPO')).toBeInTheDocument()
+  })
+
+  it('renders colored phases by default', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    const tempoValue = screen.getByTestId('tempo-value')
+    expect(tempoValue.children.length).toBeGreaterThan(1)
+  })
+
+  it('renders mono variant', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} colored={false} />)
+    expect(screen.getByText('3-1-1-0')).toBeInTheDocument()
+  })
+
+  it('renders order: eccentric-pauseBottom-concentric-pauseTop', () => {
+    render(<TempoDisplay tempo={[4, 3, 2, 1]} colored={false} />)
+    expect(screen.getByText('4-3-2-1')).toBeInTheDocument()
+  })
+
+  it('has correct accessibility label', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    expect(
+      screen.getByLabelText(
+        'Tempo: 3 second eccentric, 1 second pause, 1 second concentric, 0 second pause'
+      )
+    ).toBeInTheDocument()
+  })
+
+  it('is always a Pressable for tooltip', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    const display = screen.getByTestId('tempo-display')
+    expect(display).toBeInTheDocument()
+  })
+
+  it('calls onPress when pressed', () => {
+    const onPress = vi.fn()
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} onPress={onPress} />)
+    const display = screen.getByTestId('tempo-display')
+    fireEvent.click(display)
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('toggles tooltip on press', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+    expect(screen.queryByTestId('tempo-tooltip')).not.toBeInTheDocument()
+    fireEvent.click(screen.getByTestId('tempo-display'))
+    expect(screen.getByTestId('tempo-tooltip')).toBeInTheDocument()
+  })
+
+  it('does not show tooltip when showInfo is false', () => {
+    render(<TempoDisplay tempo={[3, 1, 1, 0]} showInfo={false} />)
+    fireEvent.click(screen.getByTestId('tempo-display'))
+    expect(screen.queryByTestId('tempo-tooltip')).not.toBeInTheDocument()
+  })
+
+  describe('sizes', () => {
+    it('renders at sm size', () => {
+      render(<TempoDisplay tempo={[3, 1, 1, 0]} size="sm" />)
+      expect(screen.getByTestId('tempo-value')).toBeInTheDocument()
+    })
+
+    it('renders at md size', () => {
+      render(<TempoDisplay tempo={[3, 1, 1, 0]} size="md" />)
+      expect(screen.getByTestId('tempo-value')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,207 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useState, useCallback } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+
+export interface TempoDisplayProps extends ViewProps {
+  /** Tempo values: [eccentric, pauseBottom, concentric, pauseTop] in seconds */
+  tempo: [number, number, number, number]
+  size?: 'sm' | 'md'
+  /** Colored phases or mono (all gray) */
+  colored?: boolean
+  /** Show info tooltip on press */
+  showInfo?: boolean
+  onPress?: () => void
+  className?: string
+}
+
+const INTER = 'Inter, sans-serif'
+const TEXT_TERTIARY = '#6B7280'
+
+// Phase colors: [eccentric, pauseBottom, concentric, pauseTop]
+const phaseColors = {
+  eccentric: '#FFB020', // status-warning (amber)
+  pauseBottom: TEXT_TERTIARY,
+  concentric: '#14B8A6', // status-success (teal)
+  pauseTop: TEXT_TERTIARY,
+  dash: TEXT_TERTIARY,
+}
+
+function TempoValue({
+  value,
+  color,
+  fontSize,
+}: {
+  value: number
+  color: string
+  fontSize: number
+}) {
+  return (
+    <Text
+      style={{
+        fontFamily: INTER,
+        fontSize,
+        color,
+        fontWeight: '600',
+        letterSpacing: 1,
+      }}
+    >
+      {value}
+    </Text>
+  )
+}
+
+function TempoSeparator({ color, fontSize }: { color: string; fontSize: number }) {
+  return (
+    <Text
+      style={{
+        fontFamily: INTER,
+        fontSize,
+        color,
+        fontWeight: '600',
+        letterSpacing: 1,
+      }}
+    >
+      -
+    </Text>
+  )
+}
+
+export function TempoDisplay({
+  tempo,
+  size = 'md',
+  colored = true,
+  showInfo = true,
+  onPress,
+  className,
+  ...props
+}: TempoDisplayProps) {
+  const [showTooltip, setShowTooltip] = useState(false)
+  const [eccentric, pauseBottom, concentric, pauseTop] = tempo
+  const isSm = size === 'sm'
+  const fontSize = isSm ? 9 : 11
+  const monoColor = TEXT_TERTIARY
+
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress()
+    }
+    if (showInfo) {
+      setShowTooltip((prev) => !prev)
+    }
+  }, [onPress, showInfo])
+
+  const content = (
+    <View
+      className={className}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#1C1C1C',
+        paddingHorizontal: isSm ? 6 : 8,
+        paddingVertical: 3,
+        borderRadius: 4,
+      }}
+      {...props}
+    >
+      <Text
+        style={{
+          fontFamily: INTER,
+          fontSize: 9,
+          fontWeight: '500',
+          color: TEXT_TERTIARY,
+          letterSpacing: 0.5,
+          textTransform: 'uppercase',
+          marginRight: 6,
+        }}
+      >
+        TEMPO
+      </Text>
+      <View style={{ flexDirection: 'row' }} testID="tempo-value">
+        {colored ? (
+          <>
+            <TempoValue value={eccentric} color={phaseColors.eccentric} fontSize={fontSize} />
+            <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
+            <TempoValue value={pauseBottom} color={phaseColors.pauseBottom} fontSize={fontSize} />
+            <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
+            <TempoValue value={concentric} color={phaseColors.concentric} fontSize={fontSize} />
+            <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
+            <TempoValue value={pauseTop} color={phaseColors.pauseTop} fontSize={fontSize} />
+          </>
+        ) : (
+          <Text
+            style={{
+              fontFamily: INTER,
+              fontSize,
+              color: monoColor,
+              fontWeight: '600',
+              letterSpacing: 1,
+            }}
+          >
+            {eccentric}-{pauseBottom}-{concentric}-{pauseTop}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+
+  return (
+    <Pressable
+      accessibilityLabel={`Tempo: ${eccentric} second eccentric, ${pauseBottom} second pause, ${concentric} second concentric, ${pauseTop} second pause`}
+      accessibilityRole="button"
+      onPress={handlePress}
+      testID="tempo-display"
+    >
+      {content}
+      {showTooltip && (
+        <View
+          style={{
+            position: 'absolute',
+            bottom: '100%',
+            left: '50%',
+            transform: [{ translateX: '-50%' as unknown as number }],
+            marginBottom: 8,
+            zIndex: 20,
+            alignItems: 'center',
+          }}
+          testID="tempo-tooltip"
+        >
+          <View
+            style={{
+              backgroundColor: '#191919',
+              borderRadius: 6,
+              paddingVertical: 8,
+              paddingHorizontal: 12,
+              borderWidth: 1,
+              borderColor: '#2C2C2C',
+            }}
+          >
+            <Text style={{ fontSize: 10, lineHeight: 16, color: '#9CA3AF', fontFamily: INTER }}>
+              Eccentric: {eccentric}s
+            </Text>
+            <Text style={{ fontSize: 10, lineHeight: 16, color: '#9CA3AF', fontFamily: INTER }}>
+              Pause (bottom): {pauseBottom}s
+            </Text>
+            <Text style={{ fontSize: 10, lineHeight: 16, color: '#9CA3AF', fontFamily: INTER }}>
+              Concentric: {concentric}s
+            </Text>
+            <Text style={{ fontSize: 10, lineHeight: 16, color: '#9CA3AF', fontFamily: INTER }}>
+              Pause (top): {pauseTop}s
+            </Text>
+          </View>
+          <View
+            style={{
+              width: 0,
+              height: 0,
+              borderLeftWidth: 5,
+              borderRightWidth: 5,
+              borderTopWidth: 5,
+              borderLeftColor: 'transparent',
+              borderRightColor: 'transparent',
+              borderTopColor: '#2C2C2C',
+            }}
+          />
+        </View>
+      )}
+    </Pressable>
+  )
+}

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,234 @@
+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)
+  })
+})