@titan-design/react-ui 0.8.0 → 0.9.1

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

@@ -1,164 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
-import { TempoBar } from './TempoBar'
-
-const meta: Meta<typeof TempoBar> = {
-  title: '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)' },
-    size: {
-      control: 'inline-radio',
-      options: ['default', 'wall'],
-      description: 'Density: default (compact) or wall (across-the-room dashboard scale)',
-    },
-    activeDisplay: {
-      control: 'inline-radio',
-      options: ['time', 'delta'],
-      description: 'Active readout: time (elapsed/target) or delta (countdown). Tap to toggle.',
-    },
-  },
-  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>
-  ),
-}
-
-/**
- * The across-the-room wall scale — bigger bar, full phase words, and colour-coded
- * pacing (a missed target reads red). Here the eccentric ran long → red.
- */
-export const Wall: Story = {
-  args: {
-    activePhase: null,
-    phaseElapsedMs: 0,
-    completed: { concentric: 950, hold: 1000, eccentric: 4200 },
-    target: TARGET,
-    size: 'wall',
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}
-
-/** Wall, mid-rep — the eccentric is active, showing the delta countdown (1.5s to target). Tap to switch to elapsed/target. */
-export const WallActiveDelta: Story = {
-  args: {
-    activePhase: 'eccentric',
-    phaseElapsedMs: 1500,
-    completed: { concentric: 950, hold: 1000 },
-    target: TARGET,
-    size: 'wall',
-    activeDisplay: 'delta',
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}
-
-/** Wall, over target — the eccentric ran 1.2s past its target, so the delta is negative and red. */
-export const WallActiveOver: Story = {
-  args: {
-    activePhase: 'eccentric',
-    phaseElapsedMs: 4200,
-    completed: { concentric: 950, hold: 1000 },
-    target: TARGET,
-    size: 'wall',
-    activeDisplay: 'delta',
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}

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

@@ -1,218 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import {
-  TempoBar,
-  getTempoPacingState,
-  getTempoFillPct,
-  formatTempoDelta,
-  TEMPO_PACING,
-} from './TempoBar'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const t = getSemanticColors('dark')
-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()
-  })
-})
-
-describe('TempoBar size="wall"', () => {
-  const TARGET_W = { concentric: 1, hold: 1, eccentric: 3 }
-
-  it('scales the active label up at wall density', () => {
-    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET_W} size="wall" />)
-    expect(screen.getByText('0.6 / 1.0')).toHaveStyle({ fontSize: 22 })
-  })
-
-  it('keeps the compact label size by default', () => {
-    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET_W} />)
-    expect(screen.getByText('0.6 / 1.0')).toHaveStyle({ fontSize: 12 })
-  })
-
-  it('preserves the segment testIDs at wall density', () => {
-    render(
-      <TempoBar
-        activePhase="eccentric"
-        phaseElapsedMs={1500}
-        completed={{ concentric: 900 }}
-        target={TARGET_W}
-        size="wall"
-      />
-    )
-    expect(screen.getByTestId('tempo-segment-active-Ecc')).toBeInTheDocument()
-    expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
-  })
-
-  it('spells out the full phase words at wall density', () => {
-    render(<TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET_W} size="wall" />)
-    expect(screen.getByText('Concentric')).toBeInTheDocument()
-    expect(screen.getByText('Eccentric')).toBeInTheDocument()
-    expect(screen.queryByText('Con')).not.toBeInTheDocument()
-  })
-})
-
-describe('formatTempoDelta', () => {
-  it('shows remaining time to target as a positive value', () => {
-    expect(formatTempoDelta(1500)).toBe('1.5')
-  })
-
-  it('shows over-target time as negative', () => {
-    expect(formatTempoDelta(-1200)).toBe('-1.2')
-  })
-
-  it('shows 0.0 at the target (no -0.0)', () => {
-    expect(formatTempoDelta(0)).toBe('0.0')
-    expect(formatTempoDelta(-10)).toBe('0.0')
-  })
-})
-
-describe('TempoBar activeDisplay (delta countdown + toggle)', () => {
-  it('counts the remaining time down to the target in delta mode', () => {
-    render(
-      <TempoBar
-        activePhase="eccentric"
-        phaseElapsedMs={1800}
-        target={TARGET}
-        activeDisplay="delta"
-      />
-    )
-    // eccentric target 3.0s, elapsed 1.8s → 1.2s remaining
-    expect(screen.getByText('1.2')).toBeInTheDocument()
-  })
-
-  it('goes negative once the phase runs past its target', () => {
-    render(
-      <TempoBar
-        activePhase="eccentric"
-        phaseElapsedMs={4200}
-        target={TARGET}
-        activeDisplay="delta"
-      />
-    )
-    expect(screen.getByText('-1.2')).toBeInTheDocument()
-  })
-
-  it('tapping the active segment toggles time ↔ delta', () => {
-    render(
-      <TempoBar
-        activePhase="concentric"
-        phaseElapsedMs={600}
-        target={TARGET}
-        activeDisplay="time"
-      />
-    )
-    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
-    fireEvent.click(screen.getByTestId('tempo-segment-active-Con'))
-    // concentric target 1.0s, elapsed 0.6s → 0.4s remaining
-    expect(screen.getByText('0.4')).toBeInTheDocument()
-    expect(screen.queryByText('0.6 / 1.0')).not.toBeInTheDocument()
-  })
-
-  it('defaults to the time readout', () => {
-    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />)
-    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
-  })
-})
-
-describe('TempoBar completed pacing colour', () => {
-  it('colours a missed completed phase red', () => {
-    render(
-      <TempoBar
-        activePhase="hold"
-        phaseElapsedMs={100}
-        completed={{ eccentric: 4000 }}
-        target={TARGET}
-      />
-    )
-    expect(screen.getByText('4.0 ✗')).toHaveStyle({ color: t['status-error'] })
-  })
-})

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

@@ -1,300 +0,0 @@
-// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { useState } from 'react'
-import { View, Text, Pressable, 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'
-
-/** Active-phase readout mode: elapsed/target `time`, or a `delta` countdown to the target. */
-export type TempoActiveDisplay = 'time' | 'delta'
-
-/** Signed seconds to one decimal — the delta countdown (`+` remaining, `-` over target). */
-export function formatTempoDelta(remainingMs: number): string {
-  const s = remainingMs / 1000
-  // Guard `-0.0`; show a leading minus only once past target.
-  const rounded = Math.abs(s) < 0.05 ? 0 : s
-  return rounded.toFixed(1)
-}
-
-/**
- * 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 {
-  /** Compact label + the stable testID suffix. */
-  label: string
-  /** Full phase word, spelled out at `wall` density where there's room to read it. */
-  wallLabel: string
-  color: string
-  flex: number
-}
-
-const PHASE_ORDER: TempoPhaseKey[] = ['concentric', 'hold', 'eccentric']
-
-const PHASE_CONFIG: Record<TempoPhaseKey, PhaseConfig> = {
-  concentric: { label: 'Con', wallLabel: 'Concentric', color: t['status-success'], flex: 2 },
-  hold: { label: 'Hold', wallLabel: 'Hold', color: t['brand-primary'], flex: 1 },
-  eccentric: { label: 'Ecc', wallLabel: 'Eccentric', color: t['status-warning'], flex: 3 },
-}
-
-/** Density. `default` — the compact card/rail treatment. `wall` — the across-the-room dashboard scale. */
-export type TempoBarSize = 'default' | 'wall'
-
-interface TempoBarSizing {
-  labelMargin: number
-  labelFont: number
-  barGap: number
-  barHeight: number
-  radius: number
-  segFont: number
-}
-
-/** Per-density magnitudes. `default` reproduces the original compact values exactly. */
-const TEMPO_SIZES: Record<TempoBarSize, TempoBarSizing> = {
-  default: { labelMargin: 4, labelFont: 10, barGap: 2, barHeight: 20, radius: 4, segFont: 12 },
-  wall: { labelMargin: 8, labelFont: 15, barGap: 4, barHeight: 40, radius: 6, segFont: 22 },
-}
-
-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>>
-  /** Density: `default` (compact) or `wall` (the across-the-room dashboard scale). */
-  size?: TempoBarSize
-  /**
-   * Active-phase readout. `time` (default) — `elapsed / target`. `delta` — a countdown
-   * of the remaining time to target (`1.5` → `0.0` → `-1.2` once over), colour-coded like
-   * the bar. Tapping the active segment toggles between the two at runtime.
-   */
-  activeDisplay?: TempoActiveDisplay
-  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,
-  size = 'default',
-  activeDisplay = 'time',
-  className,
-  ...props
-}: TempoBarProps) {
-  const s = TEMPO_SIZES[size]
-  // Runtime toggle of the active readout, seeded from `activeDisplay`.
-  const [display, setDisplay] = useState<TempoActiveDisplay>(activeDisplay)
-  const toggleDisplay = () => setDisplay((d) => (d === 'time' ? 'delta' : 'time'))
-  return (
-    <View className={className} testID="tempo-bar" {...props}>
-      {/* Phase labels */}
-      <View style={{ flexDirection: 'row', marginBottom: s.labelMargin }}>
-        {PHASE_ORDER.map((phase) => {
-          const config = PHASE_CONFIG[phase]
-          return (
-            <View key={phase} style={{ flex: config.flex, alignItems: 'center' }}>
-              <Text numberOfLines={1} style={{ fontSize: s.labelFont, color: t['text-disabled'] }}>
-                {size === 'wall' ? config.wallLabel : config.label}
-              </Text>
-            </View>
-          )
-        })}
-      </View>
-
-      {/* Segmented bar */}
-      <View style={{ flexDirection: 'row', gap: s.barGap, height: s.barHeight }}>
-        {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: s.radius,
-                overflow: 'hidden',
-              }}
-            >
-              {isActive ? (
-                <ActiveSegment
-                  config={config}
-                  phaseElapsedMs={phaseElapsedMs}
-                  targetMs={targetMs}
-                  radius={s.radius}
-                  font={s.segFont}
-                  display={display}
-                  onToggleDisplay={toggleDisplay}
-                />
-              ) : completedMs != null ? (
-                <CompletedSegment
-                  config={config}
-                  completedMs={completedMs}
-                  targetMs={targetMs}
-                  font={s.segFont}
-                />
-              ) : null}
-            </View>
-          )
-        })}
-      </View>
-    </View>
-  )
-}
-
-function ActiveSegment({
-  config,
-  phaseElapsedMs,
-  targetMs,
-  radius,
-  font,
-  display,
-  onToggleDisplay,
-}: {
-  config: PhaseConfig
-  phaseElapsedMs: number
-  targetMs: number | null
-  radius: number
-  font: number
-  display: TempoActiveDisplay
-  onToggleDisplay: () => void
-}) {
-  const pacing = getTempoPacingState(phaseElapsedMs, targetMs)
-  const barColor = pacing === 'behind' ? t['status-error'] : config.color
-  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs)
-
-  // `delta`: count the remaining time to target down to 0.0, then negative once over.
-  // Falls back to elapsed when there's no target. `time`: the elapsed / target readout.
-  const label =
-    display === 'delta' && targetMs != null
-      ? formatTempoDelta(targetMs - phaseElapsedMs)
-      : targetMs != null
-        ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}`
-        : formatDuration(phaseElapsedMs)
-
-  return (
-    <Pressable
-      onPress={onToggleDisplay}
-      style={{ height: '100%', position: 'relative' }}
-      accessibilityRole="button"
-      accessibilityLabel={`Tempo readout: ${display === 'delta' ? 'delta' : 'time'} — tap to switch`}
-      testID={`tempo-segment-active-${config.label}`}
-    >
-      <View
-        style={{
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${fillPct}%`,
-          backgroundColor: alpha(barColor, 0.3),
-          borderRadius: radius,
-        }}
-      />
-      <View
-        style={{
-          height: '100%',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Text style={{ fontSize: font, fontWeight: '700', color: barColor }}>{label}</Text>
-      </View>
-    </Pressable>
-  )
-}
-
-function CompletedSegment({
-  config,
-  completedMs,
-  targetMs,
-  font,
-}: {
-  config: PhaseConfig
-  completedMs: number
-  targetMs: number | null
-  font: number
-}) {
-  const pacing = getTempoPacingState(completedMs, targetMs)
-  const hitTarget = pacing !== 'behind'
-  const indicator =
-    targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? (hitTarget ? ' ✓' : ' ✗') : ''
-  // A missed target reads by COLOUR first (red fill + red duration), the ✓/✗ second —
-  // glanceable across a room; a hit keeps the phase's own colour.
-  const cueColor = hitTarget ? config.color : t['status-error']
-
-  return (
-    <View
-      style={{
-        height: '100%',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: alpha(cueColor, 0.15),
-      }}
-      testID={`tempo-segment-completed-${config.label}`}
-    >
-      <Text
-        style={{
-          fontSize: font,
-          fontWeight: '500',
-          color: hitTarget ? alpha(config.color, 0.7) : cueColor,
-        }}
-      >
-        {formatDuration(completedMs)}
-        {indicator}
-      </Text>
-    </View>
-  )
-}
-
-function formatDuration(ms: number): string {
-  const s = ms / 1000
-  return s < 10 ? s.toFixed(1) : Math.round(s).toString()
-}