@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,16 +1,13 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
-import { View, Text, 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 { roundWeight } from '../../../utils/workout-format'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export interface ExerciseCardProps {
   name: string
@@ -33,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]
@@ -46,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
 }
 
@@ -104,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({
@@ -124,92 +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">
-          <Text
-            className="text-text-primary"
-            style={{
-              fontSize: 14,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: '700',
-            }}
-            testID="exercise-card-name"
-          >
-            {name}
-          </Text>
-          <View className="flex-1" />
-          {summary && (
-            <Text
-              className="text-text-secondary"
-              style={{
-                fontSize: 12,
-                fontFamily: 'Inter, sans-serif',
-                marginRight: 8,
-              }}
-              testID="exercise-card-summary"
-            >
-              {formatSummary(summary)}
-            </Text>
-          )}
-          {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} />
   )
 }
 
@@ -218,10 +182,6 @@ function CollapsedCard({
 // is the real ExerciseCardHeading, and the revealed body drops PREV and renders
 // one real SetRow per set (muted done/todo, brightened live spotlight).
 
-const DARK = getSemanticColors('dark')
-/** The header↔body seam. */
-const BODY_DIVIDER = DARK['hairline-subtle']
-
 /** Project the set rows onto the heading strip's per-set state (done / active / todo). */
 function deriveHeaderSetStates(sets: SetRowProps[]): SetStripSet[] {
   return sets.map((set): SetStripSet => {
@@ -248,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'
@@ -263,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
@@ -280,12 +235,18 @@ function ExpandedCard({
         indicator={headerIndicator}
         setStates={headerStates}
         stripHeight={stripHeight}
+        isLive={isLive}
         onPress={onToggle}
         testID="exercise-card-heading"
       />
 
+      {/* The header↔body seam. */}
       <View
-        style={{ borderTopWidth: 1, borderTopColor: BODY_DIVIDER, paddingBottom: 6 }}
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: resolveColor('hairline-subtle'),
+          paddingBottom: 6,
+        }}
         testID="exercise-card-body"
       >
         <SetTableHeader unit={unit} showPrevious={false} testID="exercise-card-column-headers" />
@@ -306,81 +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. */}
-          <Text
-            className="text-text-primary"
-            style={{
-              flexShrink: 0,
-              fontSize: 14,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: '700',
-            }}
-            testID="exercise-card-name"
-          >
-            {name}
-          </Text>
-          {prescription && (
-            <Text
-              className="text-text-secondary"
-              numberOfLines={1}
-              style={{
-                flexShrink: 1,
-                fontSize: 12,
-                fontFamily: 'Inter, sans-serif',
-                marginLeft: 8,
-              }}
-              testID="exercise-card-prescription"
-            >
-              {prescription}
-            </Text>
-          )}
-          <View className="flex-1" style={{ minWidth: 8 }} />
-          {previousBest && (
-            <Text
-              className="text-text-tertiary"
-              numberOfLines={1}
-              style={{
-                flexShrink: 1,
-                fontSize: 11,
-                fontFamily: 'Inter, sans-serif',
-              }}
-              testID="exercise-card-previous-best"
-            >
-              {previousBest}
-            </Text>
-          )}
-        </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

@@ -1,31 +1,38 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { ExerciseCardHeading } from './ExerciseCardHeading'
 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: 'Workout/ExerciseCardHeading',
+  title: 'Custom/Workout/ExerciseCardHeading',
   component: ExerciseCardHeading,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '**Molecule.** The complete standalone session-rail heading. Composes ' +
-          '[ExerciseHeading](?path=/docs/workout-exerciseheading--docs) + ' +
-          '[SetStrip](?path=/docs/workout-setstrip--docs). ' +
+          '**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/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,13 +40,15 @@ 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: [
     (Story) => (
-      <View style={{ width: 246, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 246 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }
@@ -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 = {