@titan-design/react-ui 0.13.0 → 0.14.0

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

@@ -3,6 +3,7 @@ import { render, screen, fireEvent, within } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { ExerciseCard } from './ExerciseCard'
 import type { SetRowProps } from './SetRow'
+import { exerciseRowStateColor } from './exerciseRowState'
 import { resolveColor } from '../../../theme/resolve-color'
 
 const baseCollapsedProps = {
@@ -40,17 +41,21 @@ describe('ExerciseCard', () => {
       expect(screen.getByTestId('exercise-card-name')).toHaveTextContent('Bench Press')
     })
 
-    it('renders summary text', () => {
+    it('renders the prescription through the shared SetsRepsLoad line', () => {
       render(<ExerciseCard {...baseCollapsedProps} />)
-      expect(screen.getByTestId('exercise-card-summary')).toHaveTextContent('3×6 @ 175 lbs')
+      const summary = screen.getByTestId('exercise-card-summary')
+      expect(summary).toHaveTextContent('3')
+      expect(summary).toHaveTextContent('6')
+      expect(summary).toHaveTextContent('175')
+      expect(summary).toHaveTextContent('lbs')
     })
 
-    it('renders PrBadge when isPR is true', () => {
+    it('surfaces a PR through the indicator chip, as the expanded card already did', () => {
       render(<ExerciseCard {...baseCollapsedProps} isPR />)
-      expect(screen.getByTestId('pr-badge-star')).toBeInTheDocument()
+      expect(screen.getByLabelText('Personal record')).toBeInTheDocument()
     })
 
-    it('renders compact velocity strips for logged sets', () => {
+    it('renders logged and remaining sets as one SetStrip', () => {
       render(
         <ExerciseCard
           {...baseCollapsedProps}
@@ -61,21 +66,22 @@ describe('ExerciseCard', () => {
           totalPlannedSets={4}
         />
       )
-      expect(screen.getByTestId('exercise-card-velocity-strip-0')).toBeInTheDocument()
-      expect(screen.getByTestId('exercise-card-velocity-strip-1')).toBeInTheDocument()
-    })
-
-    it('renders placeholder strips for remaining planned sets', () => {
-      render(
-        <ExerciseCard {...baseCollapsedProps} setVelocities={[[1.1, 0.95]]} totalPlannedSets={3} />
+      expect(screen.getByTestId('exercise-card-strip')).toBeInTheDocument()
+      expect(screen.getByTestId('set-strip')).toHaveAccessibleName(
+        'Set progress: 2 done, 0 in progress, 2 upcoming'
       )
-      expect(screen.getByTestId('exercise-card-placeholder-0')).toBeInTheDocument()
-      expect(screen.getByTestId('exercise-card-placeholder-1')).toBeInTheDocument()
     })
 
-    it('does not render strips container when no velocities and no planned sets', () => {
+    it('does not render the strip when there are no velocities and no planned sets', () => {
       render(<ExerciseCard {...baseCollapsedProps} />)
-      expect(screen.queryByTestId('exercise-card-strips')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('exercise-card-strip')).not.toBeInTheDocument()
+    })
+
+    it('washes the row when selected', () => {
+      render(<ExerciseCard {...baseCollapsedProps} isSelected />)
+      expect(screen.getByTestId('exercise-card')).toHaveStyle({
+        backgroundColor: exerciseRowStateColor('selected'),
+      })
     })
   })
 
@@ -183,6 +189,18 @@ describe('ExerciseCard', () => {
       render(<ExerciseCard {...expandedProps} />)
       expect(screen.queryByTestId('tempo-display')).not.toBeInTheDocument()
     })
+
+    // VW-97 item 3: ExerciseCardHeading takes `indicator`, but ExerciseCard didn't forward one —
+    // so the expanded rail row lost its indicator badge. Already fixed on main; this pins it.
+    it('forwards `indicator` to the header, so the expanded rail row keeps its badge', () => {
+      render(<ExerciseCard {...expandedProps} indicator="info" />)
+      expect(screen.getByTestId('exercise-indicator')).toBeInTheDocument()
+    })
+
+    it('falls back to the `pr` indicator from `isPR` when no explicit indicator is given', () => {
+      render(<ExerciseCard {...expandedProps} isPR />)
+      expect(screen.getByTestId('exercise-indicator')).toBeInTheDocument()
+    })
   })
 
   describe('upcoming', () => {
@@ -267,10 +285,12 @@ describe('ExerciseCard', () => {
     })
   })
 
+  // The row IS the card now, so the superset chrome lands on the row root rather
+  // than on a Pressable's inner View.
   describe('superset position border radius', () => {
     it('applies first position border radius', () => {
       render(<ExerciseCard {...baseCollapsedProps} supersetPosition="first" />)
-      const container = screen.getByTestId('exercise-card').firstChild as HTMLElement
+      const container = screen.getByTestId('exercise-card')
       expect(container).toHaveStyle({
         borderTopLeftRadius: '12px',
         borderTopRightRadius: '12px',
@@ -281,7 +301,7 @@ describe('ExerciseCard', () => {
 
     it('applies last position border radius', () => {
       render(<ExerciseCard {...baseCollapsedProps} supersetPosition="last" />)
-      const container = screen.getByTestId('exercise-card').firstChild as HTMLElement
+      const container = screen.getByTestId('exercise-card')
       expect(container).toHaveStyle({
         borderTopLeftRadius: '8px',
         borderTopRightRadius: '8px',
@@ -292,7 +312,7 @@ describe('ExerciseCard', () => {
 
     it('applies middle position border radius', () => {
       render(<ExerciseCard {...baseCollapsedProps} supersetPosition="middle" />)
-      const container = screen.getByTestId('exercise-card').firstChild as HTMLElement
+      const container = screen.getByTestId('exercise-card')
       expect(container).toHaveStyle({
         borderTopLeftRadius: '8px',
         borderTopRightRadius: '8px',

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

@@ -1,16 +1,12 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
-import { View, Pressable } from 'react-native'
-import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
-import { PlaceholderStrip } from './PlaceholderStrip'
-import { PrBadge } from './PrBadge'
+import { View } from 'react-native'
+import { type VelocityZoneBandProp } from './VelocityStrip'
 import { SetRow, type SetRowProps } from './SetRow'
 import { type SetStripSet } from './SetStrip'
 import { SetTableHeader } from './SetTableHeader'
 import { ExerciseCardHeading } from './ExerciseCardHeading'
 import { type ExerciseIndicatorKind } from './ExerciseIndicator'
-import { Typography } from '../Typography'
-import { roundWeight } from '../../../utils/workout-format'
 import { resolveColor } from '../../../theme/resolve-color'
 
 export interface ExerciseCardProps {
@@ -34,12 +30,19 @@ export interface ExerciseCardProps {
     unit: 'lbs' | 'kg'
   }
   isPR?: boolean
-  /** Collapsed glance: per-set logged velocities (drives the mini strips). */
+  /**
+   * Collapsed glance: per-set logged velocities. Projected onto `setStates` for the
+   * row's `SetStrip` — pass `setStates` directly for anything richer than done/todo.
+   */
   setVelocities?: number[][]
-  /** Optional velocity-zone bands shared across this exercise's sets (WA bands). */
+  /** Velocity-zone bands shared across this exercise's sets (WA bands). Expanded body only. */
   velocityZones?: readonly VelocityZoneBandProp[]
-  /** Collapsed glance: total planned sets (placeholder strips fill the remainder). */
+  /** Collapsed glance: total planned sets (todo bars fill the remainder). */
   totalPlannedSets?: number
+  /** The row the user has chosen — a persistent wash on the collapsed / upcoming row. */
+  isSelected?: boolean
+  /** This exercise is being performed right now — the name takes the live tone. */
+  isLive?: boolean
   /** Expanded body: the per-set rows (done / live / todo). */
   sets?: SetRowProps[]
   tempo?: [number, number, number, number]
@@ -47,11 +50,14 @@ export interface ExerciseCardProps {
   previousBest?: string
   supersetPosition?: 'first' | 'last' | 'middle' | null
   supersetColor?: string
-  /** Expanded header per-set strip override; derived from `sets` when omitted. */
+  /**
+   * Per-set strip override for the collapsed and expanded rows; derived from
+   * `setVelocities` (collapsed) or `sets` (expanded) when omitted.
+   */
   setStates?: SetStripSet[]
-  /** A small PR / issue / info chip in the title line (expanded header). */
+  /** A small PR / issue / info chip in the title line. */
   indicator?: ExerciseIndicatorKind
-  /** Expanded header strip height in px. Default 8. */
+  /** Row strip height in px. Default 8. */
   stripHeight?: number
 }
 
@@ -105,19 +111,28 @@ function getSupersetMargin(
   return {}
 }
 
-function formatSummary(summary: ExerciseCardProps['summary']): string {
-  if (!summary) return ''
-  return `${summary.sets}×${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`
+/** The chrome a card wraps its row in: superset corner radii + the inter-card margin. */
+function supersetChrome(position: ExerciseCardProps['supersetPosition']): Record<string, number> {
+  return { ...getSupersetBorderRadius(position), ...getSupersetMargin(position) }
 }
 
-function formatAccessibilityLabel(
-  name: string,
-  summary: ExerciseCardProps['summary'],
-  prescription: ExerciseCardProps['prescription']
-): string {
-  if (summary) return `${name}, ${formatSummary(summary)}`
-  if (prescription) return `${name}, ${prescription}`
-  return name
+/** Project the collapsed glance's velocities + planned total onto the strip's per-set states. */
+function deriveCollapsedSetStates(
+  setVelocities: number[][] | undefined,
+  totalPlannedSets: number | undefined,
+  plannedReps: number
+): SetStripSet[] {
+  const done = (setVelocities ?? []).map(
+    (velocities): SetStripSet => ({ status: 'done', velocities })
+  )
+  const remaining = Math.max(0, (totalPlannedSets ?? 0) - done.length)
+  return [
+    ...done,
+    ...Array.from(
+      { length: remaining },
+      (): SetStripSet => ({ status: 'todo', planned: plannedReps })
+    ),
+  ]
 }
 
 function CollapsedCard({
@@ -125,90 +140,40 @@ function CollapsedCard({
   onToggle,
   summary,
   isPR,
+  indicator,
   setVelocities,
-  velocityZones,
+  setStates,
   totalPlannedSets,
+  stripHeight,
   supersetPosition,
+  isSelected,
+  isLive,
 }: CardBodyProps) {
-  const [pressed, setPressed] = useState(false)
-  const completedSets = setVelocities?.length ?? 0
-  const remaining = Math.max(0, (totalPlannedSets ?? 0) - completedSets)
-  const borderRadius = getSupersetBorderRadius(supersetPosition)
-  const supersetMargin = getSupersetMargin(supersetPosition)
-
-  return (
-    <Pressable
-      onPress={onToggle}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}
-      accessibilityRole="button"
-      accessibilityLabel={formatAccessibilityLabel(name, summary, undefined)}
-      testID="exercise-card"
-    >
-      <View
-        className={pressed ? 'bg-surface-raised' : undefined}
-        style={{
-          padding: 12,
-          paddingHorizontal: 14,
-          cursor: 'pointer',
-          ...borderRadius,
-          ...supersetMargin,
-        }}
-      >
-        <View className="flex-row items-center" testID="exercise-card-header">
-          {/* 14px/700 Space Grotesk is `h6` at the `sm` step; the face and the heading
-              role come from the variant, the weight and size from the scale. */}
-          <Typography
-            variant="h6"
-            color="primary"
-            className="text-sm font-bold leading-[normal]"
-            testID="exercise-card-name"
-          >
-            {name}
-          </Typography>
-          <View className="flex-1" />
-          {summary && (
-            /* The demo's "body" face is Inter, which is the library's `font-sans`
-               (the mapping B1 established for PrBadge), not Typography's `font-body`. */
-            <Typography
-              variant="caption"
-              color="secondary"
-              className="font-sans mr-2 leading-[normal]"
-              testID="exercise-card-summary"
-            >
-              {formatSummary(summary)}
-            </Typography>
-          )}
-          {isPR && (
-            <View style={{ marginLeft: 4 }}>
-              <PrBadge type="e1rm" compact animate={false} />
-            </View>
-          )}
-        </View>
+  const plannedReps = typeof summary?.reps === 'number' ? summary.reps : 0
+  const row = {
+    density: 'compact' as const,
+    name,
+    indicator: indicator ?? (isPR ? ('pr' as const) : undefined),
+    setStates: setStates ?? deriveCollapsedSetStates(setVelocities, totalPlannedSets, plannedReps),
+    stripHeight,
+    isSelected,
+    isLive,
+    onPress: onToggle,
+    style: supersetChrome(supersetPosition),
+  }
 
-        {(completedSets > 0 || remaining > 0) && (
-          <View className="flex-row" style={{ marginTop: 6, gap: 4 }} testID="exercise-card-strips">
-            {setVelocities?.map((velocities, i) => (
-              <VelocityStrip
-                key={i}
-                velocities={velocities}
-                zones={velocityZones}
-                variant="compact"
-                height={8}
-                hideBaseline
-                testID={`exercise-card-velocity-strip-${i}`}
-              />
-            ))}
-            {Array.from({ length: remaining }, (_, i) => (
-              <PlaceholderStrip
-                key={`placeholder-${i}`}
-                testID={`exercise-card-placeholder-${i}`}
-              />
-            ))}
-          </View>
-        )}
-      </View>
-    </Pressable>
+  // Two call shapes, not a conditional spread: the prescription union only narrows
+  // when every field of a member is present at the call site.
+  return summary ? (
+    <ExerciseCardHeading
+      {...row}
+      sets={summary.sets}
+      reps={summary.reps}
+      load={summary.weight}
+      unit={summary.unit}
+    />
+  ) : (
+    <ExerciseCardHeading {...row} />
   )
 }
 
@@ -243,9 +208,8 @@ function ExpandedCard({
   stripHeight = 8,
   velocityZones,
   supersetPosition,
+  isLive,
 }: CardBodyProps) {
-  const borderRadius = getSupersetBorderRadius(supersetPosition)
-  const supersetMargin = getSupersetMargin(supersetPosition)
   // Summary is the card-level authority for the weight column; fall back to the
   // first set's unit, then lbs. (Mixed per-set units keep the card-level label.)
   const unit = summary?.unit ?? sets?.[0]?.unit ?? 'lbs'
@@ -258,11 +222,7 @@ function ExpandedCard({
   return (
     <View
       className="bg-surface-elevated border-hairline"
-      style={{
-        borderWidth: 1,
-        ...borderRadius,
-        ...supersetMargin,
-      }}
+      style={{ borderWidth: 1, ...supersetChrome(supersetPosition) }}
       testID="exercise-card"
     >
       <ExerciseCardHeading
@@ -275,6 +235,7 @@ function ExpandedCard({
         indicator={headerIndicator}
         setStates={headerStates}
         stripHeight={stripHeight}
+        isLive={isLive}
         onPress={onToggle}
         testID="exercise-card-heading"
       />
@@ -306,72 +267,36 @@ function UpcomingCard({
   name,
   prescription,
   previousBest,
+  indicator,
   supersetPosition,
+  isSelected,
   onToggle,
 }: CardBodyProps) {
-  const borderRadius = getSupersetBorderRadius(supersetPosition)
-  const supersetMargin = getSupersetMargin(supersetPosition)
+  const row = {
+    density: 'upcoming' as const,
+    name,
+    previousBest,
+    indicator,
+    isSelected,
+    onPress: onToggle,
+    style: supersetChrome(supersetPosition),
+  }
 
-  return (
-    <Pressable onPress={onToggle} accessibilityRole="button">
-      <View
-        style={{
-          opacity: 0.6,
-          padding: 12,
-          paddingHorizontal: 14,
-          ...borderRadius,
-          ...supersetMargin,
-        }}
-        accessibilityLabel={formatAccessibilityLabel(name, undefined, prescription)}
-        testID="exercise-card"
-      >
-        <View className="flex-row items-center">
-          {/* Name never truncates (no numberOfLines); prescription + previousBest ellipsize first. */}
-          <Typography
-            variant="h6"
-            color="primary"
-            className="shrink-0 text-sm font-bold leading-[normal]"
-            testID="exercise-card-name"
-          >
-            {name}
-          </Typography>
-          {prescription && (
-            <Typography
-              variant="caption"
-              color="secondary"
-              maxLines={1}
-              className="font-sans shrink ml-2 leading-[normal]"
-              testID="exercise-card-prescription"
-            >
-              {prescription}
-            </Typography>
-          )}
-          <View className="flex-1" style={{ minWidth: 8 }} />
-          {previousBest && (
-            /* 11px is off the type scale; `2xs` (10px) is the step below, as B2's
-               WorkoutCard date took for the same size. */
-            <Typography
-              variant="caption"
-              color="tertiary"
-              maxLines={1}
-              className="font-sans shrink text-2xs leading-[normal]"
-              testID="exercise-card-previous-best"
-            >
-              {previousBest}
-            </Typography>
-          )}
-        </View>
-      </View>
-    </Pressable>
+  return prescription !== undefined ? (
+    <ExerciseCardHeading {...row} prescription={prescription} />
+  ) : (
+    <ExerciseCardHeading {...row} />
   )
 }
 
 /**
- * The data-contract exercise card, in three representations:
- * - `upcoming` — a dimmed, not-yet-reached row (prescription + previous best).
- * - collapsed — a glance: name + summary + per-set velocity strips.
- * - expanded — the unified card: the real {@link ExerciseCardHeading} header over
- *   the SET · REPS · LBS · RPE body (one {@link SetRow} per set).
+ * The data-contract exercise card, in three representations — all three now ONE
+ * {@link ExerciseCardHeading}, selected by its `density`, rather than three hand-rolled
+ * heads:
+ * - `upcoming` — a dimmed, not-yet-reached row (`density="upcoming"`).
+ * - collapsed — a glance: name + prescription + the per-set strip (`density="compact"`).
+ * - expanded — the `rail` heading over the SET · REPS · LBS · RPE body (one
+ *   {@link SetRow} per set).
  *
  * Expand is controlled (`expanded` + `onExpandedChange`) or uncontrolled
  * (`defaultExpanded`, internal state). `upcoming` overrides expand.

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

@@ -4,10 +4,10 @@ import type { SetStripSet } from './SetStrip'
 import { Surface } from '../../ui/surface'
 
 /**
- * `ExerciseCardHeading` — the complete, standalone session-rail heading: an
- * `ExerciseHeading` info block over its per-set `SetStrip`. This is the unit the rail
- * lists; it is independent of `ExerciseCard` (whose `state="rail"` delegates here).
- * An empty `setStates` renders no strip.
+ * `ExerciseCardHeading` — THE exercise row. One component for the three densities the
+ * workout surfaces list an exercise in: the session-rail heading (`rail`), the collapsed
+ * card row (`compact`) and the not-yet-reached row (`upcoming`). An `ExerciseHeading` info
+ * block over its per-set `SetStrip`; an empty `setStates` renders no strip.
  */
 const meta: Meta<typeof ExerciseCardHeading> = {
   title: 'Custom/Workout/ExerciseCardHeading',
@@ -17,15 +17,22 @@ const meta: Meta<typeof ExerciseCardHeading> = {
     docs: {
       description: {
         component:
-          '**Molecule.** The complete standalone session-rail heading. Composes ' +
+          '**Molecule.** The exercise row, in three densities driven by props rather than by ' +
+          'three call sites (TD-03.56). Composes ' +
           '[ExerciseHeading](?path=/docs/custom-workout-exerciseheading--docs) + ' +
           '[SetStrip](?path=/docs/custom-workout-setstrip--docs). ' +
+          'Interaction states (TD-03.55) are `interactive-*` token washes — press > selection > ' +
+          'hover — plus an `isLive` name tone. All static: this row renders on the wall during a ' +
+          'set, so nothing here animates. Hover is web-only; on a touch surface the row simply ' +
+          'has no hover state and selection carries the same meaning. ' +
           'Used-by ↑ [SessionRail](?path=/docs/shell-sessionrail--docs); ' +
-          '[ExerciseCard](?path=/docs/custom-workout-exercisecard--docs) `state="rail"` delegates here.',
+          '[ExerciseCard](?path=/docs/custom-workout-exercisecard--docs) delegates all three of its ' +
+          'representations here.',
       },
     },
   },
   argTypes: {
+    density: { control: 'inline-radio', options: ['rail', 'compact', 'upcoming'] },
     unit: { control: 'select', options: ['lbs', 'kg'] },
     indicator: {
       control: 'select',
@@ -33,6 +40,8 @@ const meta: Meta<typeof ExerciseCardHeading> = {
     },
     stripHeight: { control: { type: 'range', min: 2, max: 16, step: 1 } },
     dimmed: { control: 'boolean' },
+    isSelected: { control: 'boolean' },
+    isLive: { control: 'boolean' },
     onPress: { action: 'press' },
   },
   decorators: [
@@ -68,6 +77,80 @@ export const Default: Story = {
     setStates: inProgress,
     stripHeight: 8,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The `rail` density: two lines (name, then prescription beside the tempo).',
+      },
+    },
+  },
+}
+
+export const Compact: Story = {
+  args: {
+    ...Default.args,
+    density: 'compact',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The collapsed card row: name and prescription on ONE line, strip below. The tempo is ' +
+          'dropped — a single line has no room for a second metric lockup.',
+      },
+    },
+  },
+}
+
+export const Upcoming: Story = {
+  args: {
+    name: 'Overhead Press',
+    density: 'upcoming',
+    prescription: '3×8-12 @ RPE 8',
+    previousBest: '135 lbs × 10',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A not-yet-reached exercise: `compact`, dimmed by its own density, with the previous ' +
+          'best pinned right. `prescription` is the free-text alternative to the structured ' +
+          '`sets` / `reps` / `load` triple, for an exercise whose numbers are not loaded yet.',
+      },
+    },
+  },
+}
+
+export const Live: Story = {
+  args: {
+    ...Default.args,
+    isLive: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The exercise being performed right now — the name takes `status-live`. A tone change, ' +
+          'never motion: this row is on a wall display during a set.',
+      },
+    },
+  },
+}
+
+export const Selected: Story = {
+  args: {
+    ...Default.args,
+    isSelected: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The row the user has chosen: a persistent `interactive-selected` wash. Hover the row ' +
+          'to see the lighter `interactive-hover` wash it outranks.',
+      },
+    },
+  },
 }
 
 export const Dimmed: Story = {