@titan-design/react-ui 0.6.0 → 0.7.0

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

@@ -3,19 +3,28 @@ import { useState } from 'react'
 import { View, Text, Pressable } from 'react-native'
 import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
 import { PlaceholderStrip } from './PlaceholderStrip'
-import { WeightBadge } from './WeightBadge'
 import { PrBadge } from './PrBadge'
-import { TempoDisplay } from './TempoDisplay'
 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 { resolveColor } from '../../../theme/resolve-color'
-
-export type ExerciseCardState = 'collapsed' | 'expanded' | 'upcoming'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 export interface ExerciseCardProps {
   name: string
-  state: ExerciseCardState
-  onToggle: () => void
+  /**
+   * The dimmed, not-yet-reached representation (prescription + previous-best line).
+   * Overrides the expand state — an upcoming card never expands.
+   */
+  upcoming?: boolean
+  /** Controlled expand state. Omit to run uncontrolled (see {@link defaultExpanded}). */
+  expanded?: boolean
+  /** Uncontrolled initial expand state. Default false. Ignored when `expanded` is set. */
+  defaultExpanded?: boolean
+  /** Notified when the user toggles the card between collapsed and expanded. */
+  onExpandedChange?: (expanded: boolean) => void
   onNavigateDetail?: () => void
   summary?: {
     sets: number
@@ -23,27 +32,36 @@ export interface ExerciseCardProps {
     weight: number
     unit: 'lbs' | 'kg'
   }
-  e1rm?: { value: number; unit: 'lbs' | 'kg' }
   isPR?: boolean
+  /** Collapsed glance: per-set logged velocities (drives the mini strips). */
   setVelocities?: number[][]
   /** Optional velocity-zone bands shared across this exercise's sets (WA bands). */
   velocityZones?: readonly VelocityZoneBandProp[]
+  /** Collapsed glance: total planned sets (placeholder strips fill the remainder). */
   totalPlannedSets?: number
+  /** Expanded body: the per-set rows (done / live / todo). */
   sets?: SetRowProps[]
   tempo?: [number, number, number, number]
   prescription?: string
   previousBest?: string
   supersetPosition?: 'first' | 'last' | 'middle' | null
   supersetColor?: string
+  /** Expanded header per-set strip override; derived from `sets` when omitted. */
+  setStates?: SetStripSet[]
+  /** A small PR / issue / info chip in the title line (expanded header). */
+  indicator?: ExerciseIndicatorKind
+  /** Expanded header strip height in px. Default 8. */
+  stripHeight?: number
 }
 
-/** Column headers; the weight column reflects the card's unit (LBS / KG). */
-function buildColumnHeaders(unit: 'lbs' | 'kg'): string[] {
-  return ['SET', 'PREV', 'REPS', unit.toUpperCase(), 'RPE']
-}
+/** The sub-card render props: everything but the expand-control surface, plus a resolved toggle. */
+type CardBodyProps = Omit<
+  ExerciseCardProps,
+  'upcoming' | 'expanded' | 'defaultExpanded' | 'onExpandedChange'
+> & { onToggle: () => void }
 
 function getSupersetBorderRadius(
-  position: ExerciseCardProps['supersetPosition'],
+  position: ExerciseCardProps['supersetPosition']
 ): Record<string, number> {
   switch (position) {
     case 'first':
@@ -78,7 +96,7 @@ function getSupersetBorderRadius(
 }
 
 function getSupersetMargin(
-  position: ExerciseCardProps['supersetPosition'],
+  position: ExerciseCardProps['supersetPosition']
 ): Record<string, number> {
   if (position === 'first' || position === 'middle') {
     return { marginBottom: 2 }
@@ -88,13 +106,13 @@ function getSupersetMargin(
 
 function formatSummary(summary: ExerciseCardProps['summary']): string {
   if (!summary) return ''
-  return `${summary.sets}\u00D7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`
+  return `${summary.sets}×${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`
 }
 
 function formatAccessibilityLabel(
   name: string,
   summary: ExerciseCardProps['summary'],
-  prescription: ExerciseCardProps['prescription'],
+  prescription: ExerciseCardProps['prescription']
 ): string {
   if (summary) return `${name}, ${formatSummary(summary)}`
   if (prescription) return `${name}, ${prescription}`
@@ -105,13 +123,12 @@ function CollapsedCard({
   name,
   onToggle,
   summary,
-  e1rm,
   isPR,
   setVelocities,
   velocityZones,
   totalPlannedSets,
   supersetPosition,
-}: ExerciseCardProps) {
+}: CardBodyProps) {
   const [pressed, setPressed] = useState(false)
   const completedSets = setVelocities?.length ?? 0
   const remaining = Math.max(0, (totalPlannedSets ?? 0) - completedSets)
@@ -137,10 +154,7 @@ function CollapsedCard({
           ...supersetMargin,
         }}
       >
-        <View
-          className="flex-row items-center"
-          testID="exercise-card-header"
-        >
+        <View className="flex-row items-center" testID="exercise-card-header">
           <Text
             className="text-text-primary"
             style={{
@@ -166,15 +180,6 @@ function CollapsedCard({
               {formatSummary(summary)}
             </Text>
           )}
-          {e1rm && (
-            <WeightBadge
-              value={roundWeight(e1rm.value)}
-              unit={e1rm.unit}
-              size="sm"
-              showIcon={false}
-              testID="exercise-card-e1rm"
-            />
-          )}
           {isPR && (
             <View style={{ marginLeft: 4 }}>
               <PrBadge type="e1rm" compact animate={false} />
@@ -183,11 +188,7 @@ function CollapsedCard({
         </View>
 
         {(completedSets > 0 || remaining > 0) && (
-          <View
-            className="flex-row"
-            style={{ marginTop: 6, gap: 4 }}
-            testID="exercise-card-strips"
-          >
+          <View className="flex-row" style={{ marginTop: 6, gap: 4 }} testID="exercise-card-strips">
             {setVelocities?.map((velocities, i) => (
               <VelocityStrip
                 key={i}
@@ -210,22 +211,52 @@ function CollapsedCard({
   )
 }
 
+// --- Unified expanded card ---------------------------------------------------
+// The expanded card is "one object" with its rail heading: the persistent header
+// 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['border-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 => {
+    switch (set.state) {
+      case 'live':
+        return { status: 'active', velocities: set.velocities, planned: set.target.reps }
+      case 'done':
+        return { status: 'done', velocities: set.velocities }
+      case 'todo':
+        return { status: 'todo', planned: set.planned ?? set.target.reps }
+    }
+  })
+}
+
 function ExpandedCard({
   name,
   onToggle,
   summary,
-  e1rm,
   isPR,
   sets,
   tempo,
+  indicator,
+  setStates,
+  stripHeight = 8,
+  velocityZones,
   supersetPosition,
-}: ExerciseCardProps) {
+}: 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'
-  const columnHeaders = buildColumnHeaders(unit)
+  // The rail heading IS the header: its per-set strip comes from an explicit
+  // `setStates` when supplied, else it's derived from the set rows. e1RM is dropped
+  // entirely; a PR surfaces via the chip.
+  const headerStates = setStates ?? (sets ? deriveHeaderSetStates(sets) : [])
+  const headerIndicator = indicator ?? (isPR ? 'pr' : undefined)
 
   return (
     <View
@@ -237,26 +268,67 @@ function ExpandedCard({
       }}
       testID="exercise-card"
     >
-      <Pressable
+      <ExerciseCardHeading
+        name={name}
+        sets={summary?.sets ?? sets?.length ?? 0}
+        reps={summary?.reps ?? 0}
+        load={summary?.weight ?? 0}
+        unit={unit}
+        tempo={tempo}
+        indicator={headerIndicator}
+        setStates={headerStates}
+        stripHeight={stripHeight}
         onPress={onToggle}
-        accessibilityRole="button"
-        accessibilityLabel={formatAccessibilityLabel(name, summary, undefined)}
-        aria-expanded={true}
-        testID="exercise-card-header"
+        testID="exercise-card-heading"
+      />
+
+      <View
+        style={{ borderTopWidth: 1, borderTopColor: BODY_DIVIDER, paddingBottom: 6 }}
+        testID="exercise-card-body"
+      >
+        <SetTableHeader unit={unit} showPrevious={false} testID="exercise-card-column-headers" />
+
+        {sets && (
+          <View testID="exercise-card-sets">
+            {sets.map((set, i) => (
+              <SetRow key={i} {...set} velocityZones={set.velocityZones ?? velocityZones} />
+            ))}
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}
+
+function UpcomingCard({
+  name,
+  prescription,
+  previousBest,
+  supersetPosition,
+  onToggle,
+}: CardBodyProps) {
+  const borderRadius = getSupersetBorderRadius(supersetPosition)
+  const supersetMargin = getSupersetMargin(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"
-          style={{
-            padding: 12,
-            paddingHorizontal: 14,
-            paddingBottom: 10,
-            borderBottomWidth: 1,
-            borderBottomColor: resolveColor('border-default'),
-          }}
-        >
+        <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',
@@ -265,167 +337,73 @@ function ExpandedCard({
           >
             {name}
           </Text>
-          <View className="flex-1" />
-          {summary && (
+          {prescription && (
             <Text
               className="text-text-secondary"
+              numberOfLines={1}
               style={{
+                flexShrink: 1,
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
-                marginRight: 8,
+                marginLeft: 8,
               }}
-              testID="exercise-card-summary"
+              testID="exercise-card-prescription"
             >
-              {formatSummary(summary)}
+              {prescription}
             </Text>
           )}
-          {e1rm && (
-            <WeightBadge
-              value={roundWeight(e1rm.value)}
-              unit={e1rm.unit}
-              size="sm"
-              showIcon={false}
-              testID="exercise-card-e1rm"
-            />
-          )}
-          {isPR && (
-            <View style={{ marginLeft: 4 }}>
-              <PrBadge type="e1rm" compact animate={false} />
-            </View>
-          )}
-        </View>
-      </Pressable>
-
-      {tempo && (
-        <View style={{ marginTop: 8, paddingHorizontal: 14 }} testID="exercise-card-tempo">
-          <TempoDisplay tempo={tempo} size="sm" />
-        </View>
-      )}
-
-      <View
-        className="flex-row"
-        style={{
-          paddingVertical: 8,
-          paddingHorizontal: 8,
-          paddingBottom: 4,
-        }}
-        testID="exercise-card-column-headers"
-      >
-        {columnHeaders.map((header, i) => {
-          const widths = [36, undefined, 44, 56, 36]
-          const width = widths[i]
-          const isFlex = width === undefined
-
-          return (
-            <View
-              key={header}
+          <View className="flex-1" style={{ minWidth: 8 }} />
+          {previousBest && (
+            <Text
+              className="text-text-tertiary"
+              numberOfLines={1}
               style={{
-                ...(isFlex ? {} : { width }),
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 8,
+                flexShrink: 1,
+                fontSize: 11,
+                fontFamily: 'Inter, sans-serif',
               }}
-              {...(isFlex ? { className: 'flex-1' } : {})}
+              testID="exercise-card-previous-best"
             >
-              <Text
-                className="text-text-tertiary"
-                style={{
-                  fontSize: 10,
-                  fontWeight: '600',
-                  fontFamily: 'Inter, sans-serif',
-                  textTransform: 'uppercase',
-                  letterSpacing: 0.8,
-                }}
-              >
-                {header}
-              </Text>
-            </View>
-          )
-        })}
-      </View>
-
-      {sets && (
-        <View testID="exercise-card-sets">
-          {sets.map((setProps, i) => (
-            <SetRow key={i} {...setProps} />
-          ))}
+              {previousBest}
+            </Text>
+          )}
         </View>
-      )}
-    </View>
+      </View>
+    </Pressable>
   )
 }
 
-function UpcomingCard({
-  name,
-  prescription,
-  previousBest,
-  supersetPosition,
+/**
+ * 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).
+ *
+ * Expand is controlled (`expanded` + `onExpandedChange`) or uncontrolled
+ * (`defaultExpanded`, internal state). `upcoming` overrides expand.
+ */
+export function ExerciseCard({
+  upcoming,
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  ...rest
 }: ExerciseCardProps) {
-  const borderRadius = getSupersetBorderRadius(supersetPosition)
-  const supersetMargin = getSupersetMargin(supersetPosition)
-
-  return (
-    <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">
-        <Text
-          className="text-text-primary"
-          style={{
-            fontSize: 14,
-            fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: '700',
-          }}
-          testID="exercise-card-name"
-        >
-          {name}
-        </Text>
-        {prescription && (
-          <Text
-            className="text-text-secondary"
-            style={{
-              fontSize: 12,
-              fontFamily: 'Inter, sans-serif',
-              marginLeft: 8,
-            }}
-            testID="exercise-card-prescription"
-          >
-            {prescription}
-          </Text>
-        )}
-        <View className="flex-1" />
-        {previousBest && (
-          <Text
-            className="text-text-tertiary"
-            style={{
-              fontSize: 11,
-              fontFamily: 'Inter, sans-serif',
-            }}
-            testID="exercise-card-previous-best"
-          >
-            {previousBest}
-          </Text>
-        )}
-      </View>
-    </View>
-  )
-}
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded ?? false)
+  const isControlled = expanded !== undefined
+  const isExpanded = isControlled ? expanded : internalExpanded
 
-export function ExerciseCard(props: ExerciseCardProps) {
-  switch (props.state) {
-    case 'collapsed':
-      return <CollapsedCard {...props} />
-    case 'expanded':
-      return <ExpandedCard {...props} />
-    case 'upcoming':
-      return <UpcomingCard {...props} />
+  const onToggle = () => {
+    const next = !isExpanded
+    onExpandedChange?.(next)
+    if (!isControlled) setInternalExpanded(next)
   }
+
+  if (upcoming) return <UpcomingCard {...rest} onToggle={onToggle} />
+  return isExpanded ? (
+    <ExpandedCard {...rest} onToggle={onToggle} />
+  ) : (
+    <CollapsedCard {...rest} onToggle={onToggle} />
+  )
 }

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

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { ExerciseCardHeading } from './ExerciseCardHeading'
+import type { SetStripSet } from './SetStrip'
+
+/**
+ * `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.
+ */
+const meta: Meta<typeof ExerciseCardHeading> = {
+  title: '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). ' +
+          'Used-by ↑ [SessionRail](?path=/docs/shell-sessionrail--docs); ' +
+          '[ExerciseCard](?path=/docs/workout-exercisecard--docs) `state="rail"` delegates here.',
+      },
+    },
+  },
+  argTypes: {
+    unit: { control: 'select', options: ['lbs', 'kg'] },
+    indicator: {
+      control: 'select',
+      options: [undefined, 'imbalance', 'overshoot', 'velocity-loss', 'missed-reps', 'pr', 'info'],
+    },
+    stripHeight: { control: { type: 'range', min: 2, max: 16, step: 1 } },
+    dimmed: { control: 'boolean' },
+    onPress: { action: 'press' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 246, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ExerciseCardHeading>
+
+const decay = (n: number, start: number, span = 0.4): number[] =>
+  Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
+
+const inProgress: SetStripSet[] = [
+  { status: 'done', velocities: decay(10, 0.72) },
+  { status: 'active', velocities: decay(5, 0.62), planned: 10 },
+  { status: 'todo', planned: 10 },
+]
+
+export const Default: Story = {
+  args: {
+    name: 'Cable Chest Press',
+    sets: 3,
+    reps: 10,
+    load: 90,
+    unit: 'lbs',
+    tempo: [2, 1, 2, 0],
+    indicator: 'info',
+    setStates: inProgress,
+    stripHeight: 8,
+  },
+}
+
+export const Dimmed: Story = {
+  args: {
+    ...Default.args,
+    dimmed: true,
+    setStates: [1, 2, 3].map((): SetStripSet => ({ status: 'todo', planned: 18 })),
+  },
+  parameters: {
+    docs: { description: { story: 'A not-yet-reached exercise — the whole heading dims.' } },
+  },
+}
+
+export const WithoutStrip: Story = {
+  args: {
+    name: 'Standing Calf Raise',
+    sets: 5,
+    reps: 20,
+    load: 25,
+    unit: 'lbs',
+    tempo: [2, 1, 2, 0],
+    setStates: [],
+  },
+  parameters: {
+    docs: {
+      description: { story: 'An empty `setStates` list renders the heading with no strip.' },
+    },
+  },
+}

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

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { ExerciseCardHeading } from './ExerciseCardHeading'
+import type { SetStripSet } from './SetStrip'
+
+const setStates: SetStripSet[] = [
+  { status: 'done', velocities: [1, 0.9] },
+  { status: 'active', velocities: [0.6], planned: 8 },
+]
+
+const baseProps = {
+  name: 'Cable Chest Press',
+  sets: 3,
+  reps: 10,
+  load: 90,
+  unit: 'lbs' as const,
+  tempo: [2, 1, 2, 0] as [number, number, number, number],
+  indicator: 'info' as const,
+  setStates,
+}
+
+describe('ExerciseCardHeading', () => {
+  it('composes the heading info block and the per-set strip', () => {
+    render(<ExerciseCardHeading {...baseProps} />)
+    expect(screen.getByTestId('exercise-card')).toBeInTheDocument()
+    expect(screen.getByTestId('exercise-heading')).toBeInTheDocument()
+    expect(screen.getByTestId('exercise-card-strip')).toBeInTheDocument()
+    expect(screen.getByTestId('set-strip')).toBeInTheDocument()
+  })
+
+  it('renders the name and the sets/reps/load line', () => {
+    render(<ExerciseCardHeading {...baseProps} />)
+    expect(screen.getByTestId('exercise-card-name')).toHaveTextContent('Cable Chest Press')
+    const summary = screen.getByTestId('exercise-card-summary')
+    expect(summary).toHaveTextContent('3')
+    expect(summary).toHaveTextContent('10')
+    expect(summary).toHaveTextContent('90')
+  })
+
+  it('renders no strip when setStates is empty', () => {
+    render(<ExerciseCardHeading {...baseProps} setStates={[]} />)
+    expect(screen.getByTestId('exercise-heading')).toBeInTheDocument()
+    expect(screen.queryByTestId('exercise-card-strip')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('set-strip')).not.toBeInTheDocument()
+  })
+
+  it('dims the whole heading when marked dimmed', () => {
+    render(<ExerciseCardHeading {...baseProps} dimmed />)
+    expect(screen.getByTestId('exercise-card')).toHaveStyle({ opacity: 0.55 })
+  })
+
+  it('is full opacity by default', () => {
+    render(<ExerciseCardHeading {...baseProps} />)
+    expect(screen.getByTestId('exercise-card')).toHaveStyle({ opacity: 1 })
+  })
+
+  it('fires onPress when the row is pressed', () => {
+    const onPress = vi.fn()
+    render(<ExerciseCardHeading {...baseProps} onPress={onPress} />)
+    fireEvent.click(screen.getByTestId('exercise-card-header'))
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<ExerciseCardHeading {...baseProps} onPress={vi.fn()} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})