@titan-design/react-ui 0.6.0 → 0.8.0

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

@@ -1,12 +1,31 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
 import { RestTimer } from './RestTimer'
 
 const meta: Meta<typeof RestTimer> = {
-  title: 'Custom/Workout/RestTimer',
+  title: 'Workout/RestTimer',
   component: RestTimer,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Controlled rest countdown (presentational off `useTimer`; pass `totalSeconds` + ' +
+          '`elapsedMs`). Two variants: `bar` (default) — the compact linear card (REST label + ' +
+          'mm:ss + progress bar + controls), the mobile bottom-bar treatment; and `ring` — the ' +
+          'across-the-room wall treatment: a draining countdown ring (composes `CircularProgress`) ' +
+          'with the mm:ss countdown in its center, flipping to a full `success` ring reading "GO" ' +
+          'when rest is up. `displayOnly` hides the +30s/Skip controls in either variant; `size` ' +
+          'sets the ring diameter.',
+      },
+    },
+  },
   argTypes: {
+    variant: {
+      control: 'inline-radio',
+      options: ['bar', 'ring'],
+      description: 'bar (compact linear card) or ring (wall countdown)',
+    },
     totalSeconds: {
       control: 'number',
       description: 'Total rest duration in seconds',
@@ -15,6 +34,10 @@ const meta: Meta<typeof RestTimer> = {
       control: 'number',
       description: 'Elapsed time in milliseconds',
     },
+    size: {
+      control: { type: 'number', min: 96, max: 280, step: 4 },
+      description: 'ring diameter in px (default 180)',
+    },
     visible: {
       control: 'boolean',
       description: 'Whether the timer is visible',
@@ -69,3 +92,110 @@ export const JustStarted: Story = {
     visible: true,
   },
 }
+
+// --- Ring variant ------------------------------------------------------------
+// The across-the-room wall rest treatment. Rendered on the north-star wall
+// background so the draining ring reads the way it will live.
+
+/** Wall-background frame for the ring stories (mirrors the north-star rest page). */
+const ringDecorator: Decorator = (Story) => (
+  <View style={{ width: 420, padding: 32, alignItems: 'center', backgroundColor: '#0E0E0E' }}>
+    <Text
+      style={{
+        color: '#5A5A5A',
+        fontSize: 10,
+        fontWeight: '700',
+        letterSpacing: 1,
+        marginBottom: 20,
+      }}
+    >
+      REST · UNTIL NEXT SET · (organism chrome — not the component)
+    </Text>
+    <Story />
+  </View>
+)
+
+/** Controls-driven ring: flip `totalSeconds` / `elapsedMs` / `size` / `displayOnly`. */
+export const RingPlayground: Story = {
+  args: {
+    variant: 'ring',
+    totalSeconds: 120,
+    elapsedMs: 47000,
+    nextSetInfo: 'Next · Bench Press · set 3 of 4',
+    onSkip: () => {},
+    onAddTime: () => {},
+    visible: true,
+  },
+  decorators: [ringDecorator],
+}
+
+/** Just started: the ring is nearly full and draining. */
+export const RingJustStarted: Story = {
+  args: {
+    variant: 'ring',
+    totalSeconds: 120,
+    elapsedMs: 8000,
+    nextSetInfo: 'Next · Bench Press · set 3 of 4',
+    onSkip: () => {},
+    onAddTime: () => {},
+    visible: true,
+  },
+  decorators: [ringDecorator],
+}
+
+/** Midway: half the rest has drained. */
+export const RingMidway: Story = {
+  args: {
+    variant: 'ring',
+    totalSeconds: 120,
+    elapsedMs: 60000,
+    nextSetInfo: 'Next · Bench Press · set 3 of 4',
+    onSkip: () => {},
+    onAddTime: () => {},
+    visible: true,
+  },
+  decorators: [ringDecorator],
+}
+
+/** Almost done: a sliver of ring left. */
+export const RingAlmostDone: Story = {
+  args: {
+    variant: 'ring',
+    totalSeconds: 120,
+    elapsedMs: 112000,
+    nextSetInfo: 'Next · Bench Press · set 3 of 4',
+    onSkip: () => {},
+    onAddTime: () => {},
+    visible: true,
+  },
+  decorators: [ringDecorator],
+}
+
+/** Rest is up: the ring empties and flips to success (go time). */
+export const RingDone: Story = {
+  args: {
+    variant: 'ring',
+    totalSeconds: 120,
+    elapsedMs: 120000,
+    nextSetInfo: 'Next · Bench Press · set 3 of 4',
+    onSkip: () => {},
+    onAddTime: () => {},
+    visible: true,
+  },
+  decorators: [ringDecorator],
+}
+
+/** Display-only ring (poll mode): the ring + next-set line, no controls. */
+export const RingDisplayOnly: Story = {
+  args: {
+    variant: 'ring',
+    totalSeconds: 120,
+    elapsedMs: 47000,
+    nextSetInfo: 'Next · Bench Press · set 3 of 4',
+    displayOnly: true,
+    onSkip: () => {},
+    onAddTime: () => {},
+    visible: true,
+  },
+  decorators: [ringDecorator],
+}

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

@@ -184,3 +184,76 @@ describe('RestTimer zero-duration timer (NaN guard)', () => {
     expect(container.innerHTML).not.toContain('NaN')
   })
 })
+
+describe('RestTimer ring variant', () => {
+  const ringProps = { ...defaultProps, variant: 'ring' as const }
+
+  it('renders the ring (composed CircularProgress) instead of the linear bar', () => {
+    render(<RestTimer {...ringProps} />)
+    expect(screen.getByTestId('rest-timer-ring')).toBeInTheDocument()
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    expect(screen.queryByTestId('rest-timer-progress-track')).not.toBeInTheDocument()
+  })
+
+  it('shows the mm:ss countdown in the ring center while resting', () => {
+    render(<RestTimer {...ringProps} totalSeconds={120} elapsedMs={60000} />)
+    expect(screen.getByTestId('circular-timer-label')).toHaveTextContent('1:00')
+  })
+
+  it('shows GO (not a time) when rest is complete', () => {
+    render(<RestTimer {...ringProps} totalSeconds={120} elapsedMs={120000} />)
+    expect(screen.getByTestId('circular-timer-label')).toHaveTextContent('GO')
+  })
+
+  it('labels the completed ring as rest complete', () => {
+    render(<RestTimer {...ringProps} totalSeconds={120} elapsedMs={125000} />)
+    expect(screen.getByLabelText('Rest complete, next set ready')).toBeInTheDocument()
+  })
+
+  it('labels the resting ring with seconds remaining', () => {
+    render(<RestTimer {...ringProps} totalSeconds={120} elapsedMs={60000} />)
+    expect(screen.getByLabelText('Rest timer, 60 seconds remaining')).toBeInTheDocument()
+  })
+
+  it('renders the next-set line and controls by default', () => {
+    render(<RestTimer {...ringProps} nextSetInfo="Next · Bench · set 3 of 4" />)
+    expect(screen.getByTestId('rest-timer-next-set')).toHaveTextContent('Next · Bench · set 3 of 4')
+    expect(screen.getByTestId('rest-timer-add-time')).toBeInTheDocument()
+    expect(screen.getByTestId('rest-timer-skip')).toBeInTheDocument()
+  })
+
+  it('hides the controls in displayOnly mode (keeps ring + next-set)', () => {
+    render(<RestTimer {...ringProps} nextSetInfo="Next" displayOnly />)
+    expect(screen.getByTestId('rest-timer-ring')).toBeInTheDocument()
+    expect(screen.getByTestId('rest-timer-next-set')).toBeInTheDocument()
+    expect(screen.queryByTestId('rest-timer-skip')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('rest-timer-add-time')).not.toBeInTheDocument()
+  })
+
+  it('fires onSkip / onAddTime from the ring controls', () => {
+    const onSkip = vi.fn()
+    const onAddTime = vi.fn()
+    render(<RestTimer {...ringProps} onSkip={onSkip} onAddTime={onAddTime} />)
+    fireEvent.click(screen.getByTestId('rest-timer-skip'))
+    fireEvent.click(screen.getByTestId('rest-timer-add-time'))
+    expect(onSkip).toHaveBeenCalledOnce()
+    expect(onAddTime).toHaveBeenCalledOnce()
+  })
+
+  it('respects visible=false', () => {
+    render(<RestTimer {...ringProps} visible={false} />)
+    expect(screen.queryByTestId('rest-timer-ring')).not.toBeInTheDocument()
+  })
+
+  it('emits no NaN when totalSeconds is 0', () => {
+    const { container } = render(<RestTimer {...ringProps} totalSeconds={0} elapsedMs={0} />)
+    expect(container.innerHTML).not.toContain('NaN')
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <RestTimer {...ringProps} nextSetInfo="Next · Bench · set 3 of 4" />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -2,9 +2,14 @@
 import { View, Text, Pressable } from 'react-native'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { useTimer } from '../../../hooks/useTimer'
+import { CircularTimer } from '../CircularTimer/CircularTimer'
 
 const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
+/** Default `ring` diameter (px) — the across-the-room wall rest treatment. */
+const RING_DEFAULT_SIZE = 180
+
 export interface RestTimerProps {
   totalSeconds: number
   elapsedMs: number
@@ -14,6 +19,123 @@ export interface RestTimerProps {
   visible: boolean
   /** Passive/poll-only mode: hides the Skip and +30s controls, keeps the countdown, progress bar, and next-set line. */
   displayOnly?: boolean
+  /**
+   * `bar` (default) — the compact linear card (REST label + mm:ss + progress bar +
+   * controls), the mobile bottom-bar treatment. `ring` — the across-the-room wall
+   * treatment: a draining countdown ring (composes {@link CircularProgress}) with a
+   * big remaining-seconds numeral, the next-set line, and the same controls.
+   */
+  variant?: 'bar' | 'ring'
+  /** `ring` diameter in px. Default 180. */
+  size?: number
+}
+
+/** The +30s / Skip control row — shared by both variants (hidden in `displayOnly`). */
+function RestActions({ onAddTime, onSkip }: { onAddTime: () => void; onSkip: () => void }) {
+  return (
+    <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
+          className="text-text-secondary"
+          style={{ fontSize: 11, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+        >
+          +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: BRAND_PRIMARY,
+          }}
+        >
+          Skip
+        </Text>
+      </Pressable>
+    </View>
+  )
+}
+
+interface RestTimerRingProps {
+  totalSeconds: number
+  elapsedMs: number
+  remainingSec: number
+  done: boolean
+  size: number
+  nextSetInfo?: string
+  displayOnly: boolean
+  onSkip: () => void
+  onAddTime: () => void
+}
+
+/**
+ * The `ring` render: the wall rest treatment. Composes the generic {@link CircularTimer}
+ * (which owns the arc + mm:ss readout + the fill-green "GO" done state), passing the
+ * shared {@link RestActions} as its controls, and adds the rest-specific next-set footer
+ * caption below. Rest-domain chrome only — the timer mechanics live in `CircularTimer`.
+ */
+function RestTimerRing({
+  totalSeconds,
+  elapsedMs,
+  remainingSec,
+  done,
+  size,
+  nextSetInfo,
+  displayOnly,
+  onSkip,
+  onAddTime,
+}: RestTimerRingProps) {
+  const a11yLabel = done
+    ? 'Rest complete, next set ready'
+    : `Rest timer, ${Math.max(0, remainingSec)} seconds remaining`
+  return (
+    <View style={{ alignItems: 'center', gap: 16 }} testID="rest-timer">
+      <CircularTimer
+        durationMs={totalSeconds * 1000}
+        elapsedMs={elapsedMs}
+        mode="down"
+        size={size}
+        doneLabel="GO"
+        doneColor="success"
+        accessibilityLabel={a11yLabel}
+        controls={!displayOnly ? <RestActions onAddTime={onAddTime} onSkip={onSkip} /> : undefined}
+        testID="rest-timer-ring"
+      />
+      {nextSetInfo != null && (
+        <Text
+          className="text-text-tertiary"
+          style={{ fontSize: 13, fontFamily: 'Inter, sans-serif' }}
+          testID="rest-timer-next-set"
+        >
+          {nextSetInfo}
+        </Text>
+      )}
+    </View>
+  )
 }
 
 export function RestTimer({
@@ -24,18 +146,41 @@ export function RestTimer({
   nextSetInfo,
   visible,
   displayOnly = false,
+  variant = 'bar',
+  size = RING_DEFAULT_SIZE,
 }: RestTimerProps) {
+  // useTimer owns the countdown math (remaining/progress/mm:ss); a zero-duration
+  // timer is complete, which keeps the width out of the 0/0 === NaN case.
+  const {
+    remainingMs,
+    progress,
+    label: timeDisplay,
+    done,
+  } = useTimer({
+    mode: 'down',
+    durationMs: totalSeconds * 1000,
+    elapsedMs,
+  })
+  const remainingSec = Math.ceil(remainingMs / 1000)
+  const progressPct = progress * 100
+
   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')}`
-  // A zero-duration timer is already complete; guard the 0 / 0 === NaN case
-  // that would otherwise emit width:'NaN%'.
-  const totalMs = totalSeconds * 1000
-  const progressPct = totalMs > 0 ? Math.min(100, (elapsedMs / totalMs) * 100) : 100
+  if (variant === 'ring') {
+    return (
+      <RestTimerRing
+        totalSeconds={totalSeconds}
+        elapsedMs={elapsedMs}
+        remainingSec={remainingSec}
+        done={done}
+        size={size}
+        nextSetInfo={nextSetInfo}
+        displayOnly={displayOnly}
+        onSkip={onSkip}
+        onAddTime={onAddTime}
+      />
+    )
+  }
 
   return (
     <View
@@ -128,56 +273,7 @@ export function RestTimer({
       </View>
 
       {/* Actions row — hidden in display-only (poll-only) mode */}
-      {!displayOnly && (
-        <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
-              className="text-text-secondary"
-              style={{
-                fontSize: 11,
-                fontFamily: 'Inter, sans-serif',
-                fontWeight: '600',
-              }}
-            >
-              +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: BRAND_PRIMARY,
-              }}
-            >
-              Skip
-            </Text>
-          </Pressable>
-        </View>
-      )}
+      {!displayOnly && <RestActions onAddTime={onAddTime} onSkip={onSkip} />}
     </View>
   )
 }