@titan-design/react-ui 0.1.0 → 0.2.5

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

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { RestTimer } from './RestTimer'
+
+const defaultProps = {
+  totalSeconds: 150,
+  elapsedMs: 30000,
+  onSkip: vi.fn(),
+  onAddTime: vi.fn(),
+  visible: true,
+}
+
+describe('RestTimer', () => {
+  describe('time display formatting', () => {
+    it('displays 2:30 for 150s total with 0 elapsed', () => {
+      render(<RestTimer {...defaultProps} elapsedMs={0} />)
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('2:30')
+    })
+
+    it('displays 2:00 for 150s total with 30s elapsed', () => {
+      render(<RestTimer {...defaultProps} elapsedMs={30000} />)
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('2:00')
+    })
+
+    it('displays 0:05 for 150s total with 145s elapsed', () => {
+      render(<RestTimer {...defaultProps} elapsedMs={145000} />)
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('0:05')
+    })
+
+    it('pads seconds with leading zero', () => {
+      render(<RestTimer {...defaultProps} totalSeconds={65} elapsedMs={0} />)
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('1:05')
+    })
+
+    it('displays 0:00 when elapsed equals total', () => {
+      render(<RestTimer {...defaultProps} elapsedMs={150000} />)
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('0:00')
+    })
+  })
+
+  describe('progress bar', () => {
+    it('sets width to 0% when elapsed is 0', () => {
+      render(<RestTimer {...defaultProps} elapsedMs={0} />)
+      const fill = screen.getByTestId('rest-timer-progress-fill')
+      expect(fill).toHaveStyle({ width: '0%' })
+    })
+
+    it('sets width to 50% when half elapsed', () => {
+      render(<RestTimer {...defaultProps} totalSeconds={100} elapsedMs={50000} />)
+      const fill = screen.getByTestId('rest-timer-progress-fill')
+      expect(fill).toHaveStyle({ width: '50%' })
+    })
+
+    it('clamps width to 100% when elapsed exceeds total', () => {
+      render(<RestTimer {...defaultProps} elapsedMs={200000} />)
+      const fill = screen.getByTestId('rest-timer-progress-fill')
+      expect(fill).toHaveStyle({ width: '100%' })
+    })
+  })
+
+  describe('button interactions', () => {
+    it('fires onSkip when skip button is pressed', () => {
+      const onSkip = vi.fn()
+      render(<RestTimer {...defaultProps} onSkip={onSkip} />)
+      fireEvent.click(screen.getByTestId('rest-timer-skip'))
+      expect(onSkip).toHaveBeenCalledOnce()
+    })
+
+    it('fires onAddTime when +30s button is pressed', () => {
+      const onAddTime = vi.fn()
+      render(<RestTimer {...defaultProps} onAddTime={onAddTime} />)
+      fireEvent.click(screen.getByTestId('rest-timer-add-time'))
+      expect(onAddTime).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('next set info', () => {
+    it('displays nextSetInfo when provided', () => {
+      render(
+        <RestTimer
+          {...defaultProps}
+          nextSetInfo="Bench Press — Set 3 of 4"
+        />,
+      )
+      expect(screen.getByTestId('rest-timer-next-set')).toHaveTextContent(
+        'Bench Press — Set 3 of 4',
+      )
+    })
+
+    it('does not render next set element when nextSetInfo is not provided', () => {
+      render(<RestTimer {...defaultProps} />)
+      expect(screen.queryByTestId('rest-timer-next-set')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('visibility', () => {
+    it('renders nothing when visible is false', () => {
+      render(<RestTimer {...defaultProps} visible={false} />)
+      expect(screen.queryByTestId('rest-timer')).not.toBeInTheDocument()
+    })
+
+    it('renders when visible is true', () => {
+      render(<RestTimer {...defaultProps} visible />)
+      expect(screen.getByTestId('rest-timer')).toBeInTheDocument()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('clamps remaining to 0 when elapsed exceeds total', () => {
+      render(<RestTimer {...defaultProps} elapsedMs={200000} />)
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('0:00')
+    })
+
+    it('displays full time when elapsed is 0', () => {
+      render(<RestTimer {...defaultProps} totalSeconds={90} elapsedMs={0} />)
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('1:30')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<RestTimer {...defaultProps} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has timer role with remaining seconds in label', () => {
+      render(<RestTimer {...defaultProps} totalSeconds={90} elapsedMs={30000} />)
+      expect(
+        screen.getByLabelText('Rest timer, 60 seconds remaining'),
+      ).toBeInTheDocument()
+    })
+
+    it('skip button has accessible label', () => {
+      render(<RestTimer {...defaultProps} />)
+      expect(screen.getByLabelText('Skip rest')).toBeInTheDocument()
+    })
+
+    it('add time button has accessible label', () => {
+      render(<RestTimer {...defaultProps} />)
+      expect(screen.getByLabelText('Add 30 seconds')).toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,172 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import React from 'react'
+import { View, Text, Pressable } from 'react-native'
+
+export interface RestTimerProps {
+  totalSeconds: number
+  elapsedMs: number
+  onSkip: () => void
+  onAddTime: () => void
+  nextSetInfo?: string
+  visible: boolean
+}
+
+export function RestTimer({
+  totalSeconds,
+  elapsedMs,
+  onSkip,
+  onAddTime,
+  nextSetInfo,
+  visible,
+}: RestTimerProps) {
+  if (!visible) return null
+
+  const remainingMs = Math.max(0, totalSeconds * 1000 - elapsedMs)
+  const remainingSec = Math.ceil(remainingMs / 1000)
+  const minutes = Math.floor(remainingSec / 60)
+  const seconds = remainingSec % 60
+  const timeDisplay = `${minutes}:${String(seconds).padStart(2, '0')}`
+  const progressPct = Math.min(100, (elapsedMs / (totalSeconds * 1000)) * 100)
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        backgroundColor: '#1C1C1C',
+        borderTopWidth: 1,
+        borderTopColor: '#1F1F1F',
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+      }}
+      accessibilityRole="timer"
+      accessibilityLabel={`Rest timer, ${remainingSec} seconds remaining`}
+      testID="rest-timer"
+    >
+      {/* Top row */}
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: 8,
+        }}
+      >
+        {/* Left side */}
+        <View style={{ flexDirection: 'column' }}>
+          <Text
+            style={{
+              fontSize: 11,
+              fontFamily: 'Inter, sans-serif',
+              fontWeight: '600',
+              textTransform: 'uppercase',
+              letterSpacing: 1,
+              color: '#9CA3AF',
+            }}
+            testID="rest-timer-label"
+          >
+            REST
+          </Text>
+          {nextSetInfo != null && (
+            <Text
+              style={{
+                fontSize: 11,
+                fontFamily: 'Inter, sans-serif',
+                color: '#6B7280',
+                marginTop: 2,
+              }}
+              testID="rest-timer-next-set"
+            >
+              {nextSetInfo}
+            </Text>
+          )}
+        </View>
+
+        {/* Right side - time display */}
+        <Text
+          style={{
+            fontSize: 28,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: '#F3F4F6',
+            fontVariant: ['tabular-nums'],
+            letterSpacing: -0.5,
+          }}
+          testID="rest-timer-time"
+        >
+          {timeDisplay}
+        </Text>
+      </View>
+
+      {/* Progress bar */}
+      <View
+        style={{
+          height: 3,
+          backgroundColor: '#1F1F1F',
+          borderRadius: 2,
+          marginBottom: 12,
+        }}
+        testID="rest-timer-progress-track"
+      >
+        <View
+          style={{
+            height: '100%',
+            backgroundColor: '#FF7900',
+            borderRadius: 2,
+            width: `${progressPct}%`,
+          }}
+          testID="rest-timer-progress-fill"
+        />
+      </View>
+
+      {/* Actions row */}
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <Pressable
+          onPress={onAddTime}
+          style={{
+            backgroundColor: 'rgba(255,255,255,0.06)',
+            paddingVertical: 8,
+            paddingHorizontal: 20,
+            borderRadius: 8,
+          }}
+          accessibilityRole="button"
+          accessibilityLabel="Add 30 seconds"
+          testID="rest-timer-add-time"
+        >
+          <Text
+            style={{
+              fontSize: 11,
+              fontFamily: 'Inter, sans-serif',
+              fontWeight: '600',
+              color: '#9CA3AF',
+            }}
+          >
+            +30s
+          </Text>
+        </Pressable>
+        <Pressable
+          onPress={onSkip}
+          style={{
+            backgroundColor: 'rgba(255,121,0,0.12)',
+            paddingVertical: 8,
+            paddingHorizontal: 20,
+            borderRadius: 8,
+          }}
+          accessibilityRole="button"
+          accessibilityLabel="Skip rest"
+          testID="rest-timer-skip"
+        >
+          <Text
+            style={{
+              fontSize: 11,
+              fontFamily: 'Inter, sans-serif',
+              fontWeight: '600',
+              color: '#FF7900',
+            }}
+          >
+            Skip
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { SupersetWrapper } from './SupersetWrapper'
+import { ExerciseCard } from './ExerciseCard'
+
+const meta: Meta<typeof SupersetWrapper> = {
+  title: 'Custom/Workout/SupersetWrapper',
+  component: SupersetWrapper,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ maxWidth: 400, padding: 16, backgroundColor: '#121212' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SupersetWrapper>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise A
+          </Text>
+        </View>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise B
+          </Text>
+        </View>
+      </>
+    ),
+  },
+}
+
+export const CustomLabel: Story = {
+  args: {
+    label: 'A1/A2',
+    children: (
+      <>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise A1
+          </Text>
+        </View>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise A2
+          </Text>
+        </View>
+      </>
+    ),
+  },
+}
+
+export const CustomColor: Story = {
+  args: {
+    color: '#22C55E',
+    children: (
+      <>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise A
+          </Text>
+        </View>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise B
+          </Text>
+        </View>
+      </>
+    ),
+  },
+}
+
+const exerciseA = {
+  name: 'Bench Press',
+  state: 'collapsed' as const,
+  onToggle: () => {},
+  summary: { sets: 3, reps: 8, weight: 185, unit: 'lbs' as const },
+  supersetPosition: 'first' as const,
+  supersetColor: '#FF7900',
+}
+
+const exerciseB = {
+  name: 'Bent Over Row',
+  state: 'collapsed' as const,
+  onToggle: () => {},
+  summary: { sets: 3, reps: 8, weight: 155, unit: 'lbs' as const },
+  supersetPosition: 'last' as const,
+  supersetColor: '#FF7900',
+}
+
+export const WithExerciseCards: Story = {
+  args: {
+    children: (
+      <>
+        <ExerciseCard {...exerciseA} />
+        <ExerciseCard {...exerciseB} />
+      </>
+    ),
+  },
+}

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

@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { View, Text } from 'react-native'
+import { SupersetWrapper } from './SupersetWrapper'
+
+describe('SupersetWrapper', () => {
+  describe('label', () => {
+    it('renders default label "SS"', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByTestId('superset-label')).toHaveTextContent('SS')
+    })
+
+    it('renders custom label', () => {
+      render(
+        <SupersetWrapper label="A1/A2">
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByTestId('superset-label')).toHaveTextContent('A1/A2')
+    })
+  })
+
+  describe('color', () => {
+    it('applies default color #FF7900 to border and label background', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      const wrapper = screen.getByTestId('superset-wrapper')
+      expect(wrapper).toHaveStyle({ borderLeftColor: '#FF7900' })
+
+      const label = screen.getByTestId('superset-label')
+      expect(label).toHaveStyle({ backgroundColor: '#FF7900' })
+    })
+
+    it('applies custom color to border and label background', () => {
+      render(
+        <SupersetWrapper color="#22C55E">
+          <View />
+        </SupersetWrapper>,
+      )
+      const wrapper = screen.getByTestId('superset-wrapper')
+      expect(wrapper).toHaveStyle({ borderLeftColor: '#22C55E' })
+
+      const label = screen.getByTestId('superset-label')
+      expect(label).toHaveStyle({ backgroundColor: '#22C55E' })
+    })
+  })
+
+  describe('children', () => {
+    it('renders children', () => {
+      render(
+        <SupersetWrapper>
+          <Text testID="child-1">Exercise A</Text>
+          <Text testID="child-2">Exercise B</Text>
+        </SupersetWrapper>,
+      )
+      expect(screen.getByTestId('child-1')).toHaveTextContent('Exercise A')
+      expect(screen.getByTestId('child-2')).toHaveTextContent('Exercise B')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has group role', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByRole('group')).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label with default label', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByLabelText('Superset: SS')).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label with custom label', () => {
+      render(
+        <SupersetWrapper label="A1/A2">
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByLabelText('Superset: A1/A2')).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <SupersetWrapper>
+          <Text>Exercise A</Text>
+          <Text>Exercise B</Text>
+        </SupersetWrapper>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('label positioning', () => {
+    it('positions label absolutely', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      const label = screen.getByTestId('superset-label')
+      expect(label).toHaveStyle({ position: 'absolute' })
+    })
+
+    it('positions label at top -1 and left -3', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      const label = screen.getByTestId('superset-label')
+      expect(label).toHaveStyle({ top: '-1px', left: '-3px' })
+    })
+  })
+})

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

@@ -0,0 +1,63 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import React from 'react'
+import { View, Text } from 'react-native'
+
+export interface SupersetWrapperProps {
+  label?: string
+  color?: string
+  children: React.ReactNode
+  syncExpansion?: boolean
+}
+
+const DEFAULTS = {
+  label: 'SS',
+  color: '#FF7900',
+  bgBase: '#101010',
+} as const
+
+export function SupersetWrapper({
+  label = DEFAULTS.label,
+  color = DEFAULTS.color,
+  children,
+}: SupersetWrapperProps) {
+  return (
+    <View
+      style={{
+        position: 'relative',
+        borderLeftWidth: 3,
+        borderLeftColor: color,
+        paddingLeft: 8,
+        marginHorizontal: 12,
+        marginBottom: 8,
+        overflow: 'visible',
+      }}
+      accessibilityRole={"group" as any}
+      accessibilityLabel={`Superset: ${label}`}
+      testID="superset-wrapper"
+    >
+      <Text
+        style={{
+          position: 'absolute',
+          top: -1,
+          left: -3,
+          fontSize: 9,
+          fontFamily: 'Inter, sans-serif',
+          fontWeight: '700',
+          backgroundColor: color,
+          color: DEFAULTS.bgBase,
+          paddingVertical: 2,
+          paddingHorizontal: 6,
+          borderBottomRightRadius: 4,
+          letterSpacing: 0.5,
+          zIndex: 2,
+        }}
+        testID="superset-label"
+      >
+        {label}
+      </Text>
+      <View style={{ gap: 2 }} testID="superset-children">
+        {children}
+      </View>
+    </View>
+  )
+}

package/src/components/custom/Workout/index.ts

@@ -0,0 +1,2 @@
+export { RestTimer, type RestTimerProps } from './RestTimer'
+export { SupersetWrapper, type SupersetWrapperProps } from './SupersetWrapper'

package/src/components/custom/index.ts

@@ -0,0 +1,9 @@
+// Custom components
+export * from './Typography'
+export * from './Sidebar'
+export * from './Table'
+export * from './EmptyState'
+export * from './stepper'
+export * from './DateTime'
+export * from './Metric'
+export * from './Workout'