@titan-design/react-ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { TempoBar } from './TempoBar'
+
+const meta: Meta<typeof TempoBar> = {
+  title: 'Custom/Workout/TempoBar',
+  component: TempoBar,
+  tags: ['autodocs'],
+  argTypes: {
+    activePhase: {
+      control: 'select',
+      options: [null, 'concentric', 'hold', 'eccentric'],
+      description: 'Phase currently in progress (null = idle)',
+    },
+    phaseElapsedMs: { control: 'number', description: 'Elapsed ms in the active phase' },
+    completed: { control: 'object', description: 'Completed phase durations (ms)' },
+    target: { control: 'object', description: 'Per-phase target durations (seconds)' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 240 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TempoBar>
+
+// tempo target: 1s concentric, 1s hold-top, 3s eccentric
+const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
+
+export const Idle: Story = {
+  args: { activePhase: null, phaseElapsedMs: 0, target: TARGET },
+}
+
+export const ConcentricActive: Story = {
+  args: { activePhase: 'concentric', phaseElapsedMs: 600, target: TARGET },
+}
+
+export const EccentricMidRep: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 1500,
+    completed: { concentric: 900, hold: 1000 },
+    target: TARGET,
+  },
+}
+
+export const BehindPace: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 4200,
+    completed: { concentric: 1600, hold: 1000 },
+    target: TARGET,
+  },
+}
+
+export const RepComplete: Story = {
+  args: {
+    activePhase: null,
+    phaseElapsedMs: 0,
+    completed: { concentric: 950, hold: 1050, eccentric: 3100 },
+    target: TARGET,
+  },
+}
+
+export const NoTarget: Story = {
+  args: {
+    activePhase: 'concentric',
+    phaseElapsedMs: 800,
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={{ gap: 20 }}>
+      <TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET} />
+      <TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1500}
+        completed={{ concentric: 900, hold: 1000 }}
+        target={TARGET}
+      />
+      <TempoBar
+        activePhase={null}
+        phaseElapsedMs={0}
+        completed={{ concentric: 950, hold: 1050, eccentric: 3100 }}
+        target={TARGET}
+      />
+    </View>
+  ),
+}

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

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  TempoBar,
+  getTempoPacingState,
+  getTempoFillPct,
+  TEMPO_PACING,
+} from './TempoBar'
+
+const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
+
+describe('getTempoPacingState', () => {
+  it('returns none when there is no target', () => {
+    expect(getTempoPacingState(1000, null)).toBe('none')
+  })
+
+  it('returns none for a sub-threshold target', () => {
+    expect(getTempoPacingState(1000, TEMPO_PACING.minPhaseDurationMs - 1)).toBe('none')
+  })
+
+  it('returns on-pace when within the behind threshold', () => {
+    expect(getTempoPacingState(1000, 1000)).toBe('on-pace')
+    expect(getTempoPacingState(1100, 1000)).toBe('on-pace') // +10%, under 15%
+  })
+
+  it('returns behind once elapsed exceeds the behind threshold', () => {
+    expect(getTempoPacingState(1200, 1000)).toBe('behind') // +20%, over 15%
+  })
+})
+
+describe('getTempoFillPct', () => {
+  it('fills fully when there is no target', () => {
+    expect(getTempoFillPct(500, null)).toBe(100)
+  })
+
+  it('is proportional to elapsed vs target', () => {
+    expect(getTempoFillPct(500, 1000)).toBe(50)
+  })
+
+  it('clamps at 100 when past target', () => {
+    expect(getTempoFillPct(2000, 1000)).toBe(100)
+  })
+})
+
+describe('TempoBar', () => {
+  it('renders the bar with phase labels', () => {
+    render(<TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET} />)
+    expect(screen.getByTestId('tempo-bar')).toBeInTheDocument()
+    expect(screen.getByText('Con')).toBeInTheDocument()
+    expect(screen.getByText('Hold')).toBeInTheDocument()
+    expect(screen.getByText('Ecc')).toBeInTheDocument()
+  })
+
+  it('renders the active segment with an elapsed/target label', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />)
+    expect(screen.getByTestId('tempo-segment-active-Con')).toBeInTheDocument()
+    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
+  })
+
+  it('shows only elapsed when the active phase has no target', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={800} />)
+    expect(screen.getByText('0.8')).toBeInTheDocument()
+  })
+
+  it('marks a completed phase that hit its target with a check', () => {
+    render(
+      <TempoBar
+        activePhase="hold"
+        phaseElapsedMs={100}
+        completed={{ concentric: 950 }}
+        target={TARGET}
+      />,
+    )
+    expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
+    expect(screen.getByText('0.9 ✓')).toBeInTheDocument()
+  })
+
+  it('marks a completed phase that missed its target with a cross', () => {
+    render(
+      <TempoBar
+        activePhase="hold"
+        phaseElapsedMs={100}
+        completed={{ eccentric: 4000 }}
+        target={TARGET}
+      />,
+    )
+    // eccentric target 3s, 4s elapsed => behind => cross
+    expect(screen.getByText('4.0 ✗')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1500}
+        completed={{ concentric: 900, hold: 1000 }}
+        target={TARGET}
+      />,
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -0,0 +1,215 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
+
+/**
+ * Titan-local phase key. Consumers map their own movement-phase enum onto this
+ * presentational key at the call site — TempoBar owns rendering only.
+ */
+export type TempoPhaseKey = 'concentric' | 'hold' | 'eccentric'
+
+/** Pacing tuning shared with the fill/pacing helpers below. */
+export const TEMPO_PACING = {
+  behindThresholdPct: 0.15,
+  minPhaseDurationMs: 500,
+} as const
+
+export type TempoPacingState = 'none' | 'on-pace' | 'behind'
+
+/**
+ * Classify how a phase's elapsed time tracks against its target duration.
+ * `none` when there is no meaningful target; `behind` once elapsed exceeds the
+ * target by more than the behind threshold; `on-pace` otherwise.
+ */
+export function getTempoPacingState(
+  elapsedMs: number,
+  targetMs: number | null,
+): TempoPacingState {
+  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return 'none'
+  const ratio = elapsedMs / targetMs
+  if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return 'behind'
+  return 'on-pace'
+}
+
+/** Fill percentage (0–100) for the active phase; full when no target is set. */
+export function getTempoFillPct(elapsedMs: number, targetMs: number | null): number {
+  if (!targetMs) return 100
+  return Math.min(100, (elapsedMs / targetMs) * 100)
+}
+
+interface PhaseConfig {
+  label: string
+  color: string
+  flex: number
+}
+
+const PHASE_ORDER: TempoPhaseKey[] = ['concentric', 'hold', 'eccentric']
+
+const PHASE_CONFIG: Record<TempoPhaseKey, PhaseConfig> = {
+  concentric: { label: 'Con', color: t['status-success'], flex: 2 },
+  hold: { label: 'Hold', color: t['brand-primary'], flex: 1 },
+  eccentric: { label: 'Ecc', color: t['status-warning'], flex: 3 },
+}
+
+export interface TempoBarProps extends ViewProps {
+  /** Phase currently in progress, or null when idle/at rest. */
+  activePhase: TempoPhaseKey | null
+  /** Elapsed time (ms) within the active phase. */
+  phaseElapsedMs: number
+  /** Completed phase durations (ms) for the current rep, keyed by phase. */
+  completed?: Partial<Record<TempoPhaseKey, number>>
+  /** Optional per-phase target durations (seconds) for pacing feedback. */
+  target?: Partial<Record<TempoPhaseKey, number>>
+  className?: string
+}
+
+/**
+ * TempoBar — live rep phase progression indicator.
+ *
+ * Renders a segmented bar (Con → Hold → Ecc) where the active phase fills in
+ * real time and completed phases show their duration with a ✓/✗ pacing mark.
+ * Presentational only: the consumer derives which phase is active, its elapsed
+ * time, and completed durations, then feeds them in.
+ */
+export function TempoBar({
+  activePhase,
+  phaseElapsedMs,
+  completed,
+  target,
+  className,
+  ...props
+}: TempoBarProps) {
+  return (
+    <View className={className} testID="tempo-bar" {...props}>
+      {/* Phase labels */}
+      <View style={{ flexDirection: 'row', marginBottom: 4 }}>
+        {PHASE_ORDER.map((phase) => {
+          const config = PHASE_CONFIG[phase]
+          return (
+            <View key={phase} style={{ flex: config.flex, alignItems: 'center' }}>
+              <Text style={{ fontSize: 10, color: t['text-disabled'] }}>{config.label}</Text>
+            </View>
+          )
+        })}
+      </View>
+
+      {/* Segmented bar */}
+      <View style={{ flexDirection: 'row', gap: 2, height: 20 }}>
+        {PHASE_ORDER.map((phase) => {
+          const config = PHASE_CONFIG[phase]
+          const isActive = activePhase === phase
+          const completedMs = completed?.[phase]
+          const targetSec = target?.[phase]
+          const targetMs = targetSec != null ? targetSec * 1000 : null
+
+          return (
+            <View
+              key={phase}
+              style={{
+                flex: config.flex,
+                backgroundColor: alpha('#ffffff', 0.06),
+                borderRadius: 4,
+                overflow: 'hidden',
+              }}
+            >
+              {isActive ? (
+                <ActiveSegment
+                  config={config}
+                  phaseElapsedMs={phaseElapsedMs}
+                  targetMs={targetMs}
+                />
+              ) : completedMs != null ? (
+                <CompletedSegment config={config} completedMs={completedMs} targetMs={targetMs} />
+              ) : null}
+            </View>
+          )
+        })}
+      </View>
+    </View>
+  )
+}
+
+function ActiveSegment({
+  config,
+  phaseElapsedMs,
+  targetMs,
+}: {
+  config: PhaseConfig
+  phaseElapsedMs: number
+  targetMs: number | null
+}) {
+  const pacing = getTempoPacingState(phaseElapsedMs, targetMs)
+  const barColor = pacing === 'behind' ? t['status-error'] : config.color
+  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs)
+
+  const label = targetMs
+    ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}`
+    : formatDuration(phaseElapsedMs)
+
+  return (
+    <View style={{ height: '100%', position: 'relative' }} testID={`tempo-segment-active-${config.label}`}>
+      <View
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${fillPct}%`,
+          backgroundColor: alpha(barColor, 0.3),
+          borderRadius: 4,
+        }}
+      />
+      <View
+        style={{
+          height: '100%',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text style={{ fontSize: 12, fontWeight: '700', color: barColor }}>{label}</Text>
+      </View>
+    </View>
+  )
+}
+
+function CompletedSegment({
+  config,
+  completedMs,
+  targetMs,
+}: {
+  config: PhaseConfig
+  completedMs: number
+  targetMs: number | null
+}) {
+  const pacing = getTempoPacingState(completedMs, targetMs)
+  const hitTarget = pacing !== 'behind'
+  const indicator =
+    targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? (hitTarget ? ' ✓' : ' ✗') : ''
+
+  return (
+    <View
+      style={{
+        height: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: alpha(config.color, 0.15),
+      }}
+      testID={`tempo-segment-completed-${config.label}`}
+    >
+      <Text style={{ fontSize: 12, fontWeight: '500', color: alpha(config.color, 0.7) }}>
+        {formatDuration(completedMs)}
+        {indicator}
+      </Text>
+    </View>
+  )
+}
+
+function formatDuration(ms: number): string {
+  const s = ms / 1000
+  return s < 10 ? s.toFixed(1) : Math.round(s).toString()
+}

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

@@ -16,13 +16,6 @@ import {
   type VolumeStatus,
 } from './muscleTaxonomy'
 
-const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
-const PAGE_BG = 'var(--color-background-base)'
-
 /** Volume statuses in display order for the legend and summary cards. */
 const STATUS_ORDER: VolumeStatus[] = ['under', 'maintenance', 'productive', 'over']
 
@@ -121,28 +114,28 @@ function SummaryCards({ summary }: { summary: TrainingStatusSummary }) {
         return (
           <View
             key={key}
+            className="bg-surface-elevated border-border"
             style={{
               flexGrow: 1,
               flexBasis: '46%',
               padding: 12,
               borderRadius: 10,
-              backgroundColor: SURFACE_ELEVATED,
               borderWidth: 1,
-              borderColor: BORDER_DEFAULT,
             }}
             testID={`training-status-page-summary-${key}`}
           >
             <Text
+              className="text-text-primary"
               style={{
                 fontSize: 22,
                 fontFamily: '"Space Grotesk", sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
             >
               {value}
             </Text>
             <Text
+              className="text-text-tertiary"
               style={{
                 marginTop: 2,
                 fontSize: 11,
@@ -150,7 +143,6 @@ function SummaryCards({ summary }: { summary: TrainingStatusSummary }) {
                 fontWeight: '600',
                 letterSpacing: 0.4,
                 textTransform: 'uppercase',
-                color: TEXT_TERTIARY,
               }}
             >
               {label}
@@ -186,10 +178,10 @@ function StatusLegend() {
             accessibilityElementsHidden
           />
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
-              color: TEXT_SECONDARY,
               textTransform: 'capitalize',
             }}
           >
@@ -247,8 +239,8 @@ export function TrainingStatusPage({
 
   return (
     <View
-      className={className}
-      style={{ position: 'relative', width: 390, backgroundColor: PAGE_BG }}
+      className={['bg-background-base', className].filter(Boolean).join(' ')}
+      style={{ position: 'relative', width: 390 }}
       accessibilityRole={'main' as ViewProps['accessibilityRole']}
       aria-label={title}
       testID="training-status-page"
@@ -257,11 +249,11 @@ export function TrainingStatusPage({
       <View style={{ padding: 16, gap: 16 }} testID="training-status-page-content">
         <Text
           accessibilityRole="header"
+          className="text-text-primary"
           style={{
             fontSize: 20,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: TEXT_PRIMARY,
           }}
           testID="training-status-page-title"
         >
@@ -273,10 +265,9 @@ export function TrainingStatusPage({
         <SummaryCards summary={summary} />
 
         <View
+          className="bg-surface-elevated border-border"
           style={{
-            backgroundColor: SURFACE_ELEVATED,
             borderWidth: 1,
-            borderColor: BORDER_DEFAULT,
             borderRadius: 12,
             padding: 12,
             gap: 12,

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

@@ -151,7 +151,9 @@ export function VelocityStrip({
 
   const stripContent = (
     <Animated.View
-      className={className}
+      className={[className, expanded ? 'bg-surface-raised' : 'bg-transparent']
+        .filter(Boolean)
+        .join(' ')}
       style={[
         {
           height: heightAnim,
@@ -162,7 +164,6 @@ export function VelocityStrip({
           paddingBottom: expanded ? 24 : 0,
           paddingHorizontal: expanded ? 6 : 0,
           paddingVertical: expanded ? undefined : 8,
-          backgroundColor: expanded ? 'var(--color-surface-raised)' : 'transparent',
           overflow: expanded ? 'visible' : 'hidden',
         },
       ]}
@@ -189,7 +190,8 @@ export function VelocityStrip({
               {expanded && (
                 <Animated.View style={{ opacity: labelOpacity, alignItems: 'center', position: 'absolute', top: -13, left: 0, right: 0 }} accessibilityElementsHidden>
                   <Text
-                    style={{ fontSize: 8, fontWeight: '600', color: 'var(--color-text-secondary)' }}
+                    className="text-text-secondary"
+                    style={{ fontSize: 8, fontWeight: '600' }}
                     testID={`velocity-label-${i}`}
                   >
                     {formatVelocity(v)}
@@ -248,18 +250,18 @@ export function VelocityStrip({
           testID="velocity-info-row"
         >
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 10,
-              color: 'var(--color-text-secondary)',
               fontFamily: 'Inter, sans-serif',
             }}
           >
             {meanZone} {'\u00B7'} {formatVelocity(meanVelocity)} m/s
           </Text>
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 10,
-              color: 'var(--color-text-secondary)',
               fontFamily: 'Inter, sans-serif',
               ...getLossStyle(loss),
             }}

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

@@ -100,11 +100,12 @@ export function WeekRow({
           />
         )}
         <Text
+          className={isCurrent ? undefined : 'text-text-primary'}
           style={{
             fontSize: 13,
             fontWeight: '700',
             fontFamily: 'Inter, sans-serif',
-            color: isCurrent ? BRAND_PRIMARY : 'var(--color-text-primary)',
+            color: isCurrent ? BRAND_PRIMARY : undefined,
           }}
           accessibilityElementsHidden
         >

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

@@ -43,11 +43,6 @@ export interface WorkoutCardProps extends ViewProps {
 }
 
 const COLORS = {
-  // 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).
-  textPrimary: 'var(--color-text-primary)',
-  textSecondary: 'var(--color-text-secondary)',
-  textTertiary: 'var(--color-text-tertiary)',
   statusSuccess: '#14B8A6',
   brandPrimary: '#FF7900',
   borderDefault: '#1F1F1F',
@@ -124,11 +119,11 @@ export function WorkoutCard({
     <View style={{ padding: 14 }} testID="workout-card-body">
       <View className="flex-row items-center" testID="workout-card-header">
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: COLORS.textPrimary,
           }}
           testID="workout-card-name"
         >
@@ -136,10 +131,10 @@ export function WorkoutCard({
         </Text>
         <View className="flex-1" />
         <Text
+          className="text-text-tertiary"
           style={{
             fontSize: 11,
             fontFamily: 'Inter, sans-serif',
-            color: COLORS.textTertiary,
           }}
           testID="workout-card-date"
         >
@@ -148,11 +143,11 @@ export function WorkoutCard({
       </View>
 
       <Text
+        className="text-text-secondary"
         style={{
           marginTop: 4,
           fontSize: 12,
           fontFamily: 'Inter, sans-serif',
-          color: COLORS.textSecondary,
         }}
         testID="workout-card-stats"
       >

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

@@ -9,6 +9,15 @@ export { PrBadge, type PrBadgeProps, type PRType } from './PrBadge'
 export { StatusDot, type StatusDotVariant, type StatusDotProps } from './StatusDot'
 export { PlaceholderStrip, type PlaceholderStripProps } from './PlaceholderStrip'
 export { TempoDisplay, type TempoDisplayProps } from './TempoDisplay'
+export {
+  TempoBar,
+  type TempoBarProps,
+  type TempoPhaseKey,
+  type TempoPacingState,
+  TEMPO_PACING,
+  getTempoPacingState,
+  getTempoFillPct,
+} from './TempoBar'
 export { DeviationBar, type DeviationBarProps } from './DeviationBar'
 export { IntensityBar, type IntensityBarProps } from './IntensityBar'
 export { WorkoutPill, type WorkoutPillProps, type WorkoutPillStatus } from './WorkoutPill'

package/src/test/nativewind-stub.ts

@@ -0,0 +1,13 @@
+// Web test stub for `nativewind`.
+//
+// The real `nativewind` pulls react-native-css-interop → RN's Flow-typed
+// sources, which the jsdom/react-native-web test environment can't parse
+// ("Unexpected token 'typeof'"). Only `ThemeProvider` imports nativewind (for
+// `vars()`), and only for its NATIVE behavior — on web the color tokens resolve
+// from `global.css`, so an identity `vars()` is a faithful web stand-in.
+// Aliased in `vitest.config.ts`; the real package is used at build/native.
+
+/** Identity stand-in for nativewind's `vars()` — returns the token map as-is. */
+export function vars(values: Record<string, string>): Record<string, string> {
+  return values
+}

package/src/theme/ThemeProvider.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Text } from 'react-native'
+import { ThemeProvider } from './ThemeProvider'
+
+describe('ThemeProvider', () => {
+  it('renders its children', () => {
+    render(
+      <ThemeProvider>
+        <Text>inside</Text>
+      </ThemeProvider>,
+    )
+    expect(screen.getByText('inside')).toBeInTheDocument()
+  })
+
+  it('accepts a light mode without error', () => {
+    render(
+      <ThemeProvider mode="light">
+        <Text>light</Text>
+      </ThemeProvider>,
+    )
+    expect(screen.getByText('light')).toBeInTheDocument()
+  })
+})