@titan-design/react-ui 0.10.0 → 0.11.0

package/src/components/custom/Workout/VelocityStrip.dual.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { DualVelocityStrip } from './VelocityStrip'
+import {
+  LEFT_SLOT,
+  RIGHT_SLOT,
+  REP_SET,
+  REP_SET_LAGGING,
+  IN_PROGRESS_SET,
+  IN_PROGRESS_LAGGING,
+  dualOf,
+  wallDecorator,
+} from './velocity-story-kit'
+
+/**
+ * `DualVelocityStrip` — the strip when the exercise used TWO Voltras.
+ *
+ * Dual is **not a fourth view**, so its scenario coverage lives in the
+ * per-view groups, where every scenario renders single ABOVE dual on one
+ * dataset:
+ * [Compact](?path=/docs/workout-dataviz-velocitystrip-compact--docs) ·
+ * [Expanded](?path=/docs/workout-dataviz-velocitystrip-expanded--docs) ·
+ * [Hero](?path=/docs/workout-dataviz-velocitystrip-hero--docs).
+ *
+ * This group exists for the two things a pairing cannot carry: the exported
+ * **API** (`DualVelocityStripProps`, in the args table below) and the layout
+ * **extremes** — heights at which the labels have to degrade, and mismatched
+ * rep counts that must stay index-locked.
+ *
+ * The `hero` variant is literally two composed `VelocityStrip` heroes — an
+ * `orientation="up"` hero over a mirrored `orientation="down"` one, sharing ONE
+ * height scale and meeting at one centre axis — so every hero improvement
+ * reaches the dual for free. The up wing grows UP and the down wing grows DOWN,
+ * so asymmetry reads pre-attentively as the silhouette: a stronger side reads
+ * TALLER, while each wing still colours by its OWN best. **Side is POSITION
+ * only, never hue.** Each side takes a `DualVelocityStream` (`velocities` OR a
+ * structured `set`, plus an optional `label`); the vertical edge label is DATA,
+ * not a hardcoded side. Single-slot sets keep using `VelocityStrip`.
+ */
+const meta: Meta<typeof DualVelocityStrip> = {
+  title: 'Workout/DataViz/VelocityStrip/Dual',
+  component: DualVelocityStrip,
+  tags: ['autodocs'],
+  decorators: [wallDecorator],
+  argTypes: {
+    left: {
+      control: 'object',
+      description:
+        'Up-wing stream — `{ velocities | set, label }`. Edit `label` here to change the slot name.',
+    },
+    right: {
+      control: 'object',
+      description:
+        'Down-wing stream — `{ velocities | set, label }`. Edit `label` here to change the slot name.',
+    },
+    variant: {
+      control: 'inline-radio',
+      options: ['hero', 'compact', 'rail'],
+      description:
+        'hero (wall: labels + reference lines), compact (flat resting fold), or rail (lean, neither)',
+    },
+    scale: {
+      control: 'inline-radio',
+      options: ['peak', 'fixed'],
+      description:
+        'bar scaling, shared across both wings: peak (pair max) or fixed (cross-set ceiling)',
+    },
+    barColor: {
+      control: 'inline-radio',
+      options: ['zone', 'loss'],
+      description: 'per-wing loss (default) or the shared absolute zone scale; never encodes side',
+    },
+    targetReps: {
+      control: 'number',
+      description:
+        'planned rep count — reps beyond a side’s done count draw as mirrored dashed stubs',
+    },
+    liveRepIndex: {
+      control: 'number',
+      description: 'index of the newest rep; that mirrored pair animates in (hero only)',
+    },
+    height: {
+      control: { type: 'number', min: 60, max: 260, step: 4 },
+      description: 'total plot height (px), split evenly into the up (L) and down (R) wings',
+    },
+    zones: { control: false, description: 'Velocity-zone bands (WA); default scale when absent' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof DualVelocityStrip>
+
+// ── The API surface ─────────────────────────────────────────────────────────
+
+/** Controls-driven: flip `variant` / `scale` / `barColor` / `targetReps` / `height`, edit each stream's `label` + data. */
+export const Playground: Story = {
+  args: {
+    left: dualOf(REP_SET, LEFT_SLOT),
+    right: dualOf(REP_SET_LAGGING, RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'peak',
+    height: 200,
+  },
+}
+
+// ── The two canonical states ────────────────────────────────────────────────
+// Deliberately minimal — the scenario pairs in the view groups carry breadth.
+
+/** Both sides done, the lagging side one rep short — the everyday finished dual set. */
+export const Default: Story = {
+  args: {
+    left: dualOf(REP_SET, LEFT_SLOT),
+    right: dualOf(REP_SET_LAGGING, RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+    height: 200,
+  },
+}
+
+/**
+ * Mid-set and live: 4 of 8 planned on the up wing, 3 on the down, newest rep
+ * animating in. The remainder draws as mirrored dashed stubs on both wings, so
+ * the columns are reserved and the set never reflows as reps land — which is
+ * also why a live dual should run `scale="fixed"`.
+ */
+export const InProgress: Story = {
+  args: {
+    left: dualOf(IN_PROGRESS_SET, LEFT_SLOT),
+    right: dualOf(IN_PROGRESS_LAGGING, RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+    targetReps: 8,
+    liveRepIndex: 3,
+    height: 200,
+  },
+}
+
+// ── Layout extremes ─────────────────────────────────────────────────────────
+// Recovered from the pre-reorg DualVelocityStrip stories. Unit tests cover the
+// behaviour; these cover the SURFACE — label placement and collision at full
+// width is a class of bug the tests have already missed once (TD-07.10).
+
+/**
+ * Symmetric index-lock — the up wing logs 5 reps, the down wing 3, same
+ * structure. The dual renders 5 aligned columns and the down side's reps 4–5
+ * render as EMPTY cells directly under the up side's (index-locked, never
+ * shifted). The next rep a lagging side performs lands at its own column.
+ */
+export const SymmetricEmpties: Story = {
+  args: {
+    left: dualOf([0.9, 0.88, 0.86, 0.84, 0.82], LEFT_SLOT),
+    right: dualOf([0.85, 0.8, 0.75], RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+  },
+}
+
+/**
+ * Small height (120px) — each wing gets ~59px rather than the full hero
+ * sentinel, and the responsive text DEGRADES: the per-side slot names collapse
+ * to initials ("Left"/"Right" → "L"/"R") and the VL20 / VL30 band labels drop
+ * entirely, while the dashed lines + washes stay.
+ */
+export const SmallHeightLabels: Story = {
+  args: {
+    left: dualOf([0.96, 0.9, 0.83, 0.72], LEFT_SLOT),
+    right: dualOf([0.9, 0.82, 0.71, 0.6], RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+    height: 120,
+  },
+}
+
+/**
+ * Very small height (72px) — the floor of graceful degradation. Below the
+ * thresholds the VL20 / VL30 labels are gone and the slot names are down to
+ * initials (a multi-word name would show its initials, e.g. "L A"). No
+ * shrinking into an illegible smear.
+ */
+export const TinyHeight: Story = {
+  args: {
+    left: dualOf([0.96, 0.9, 0.83, 0.72], LEFT_SLOT),
+    right: dualOf([0.9, 0.82, 0.71, 0.6], RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+    height: 72,
+  },
+}

package/src/components/custom/Workout/VelocityStrip.expanded.stories.tsx

@@ -0,0 +1,296 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Pressable } from 'react-native'
+import { VelocityStrip, DualVelocityStrip } from './VelocityStrip'
+import {
+  Sheet,
+  Note,
+  ViewLabel,
+  ScenarioPair,
+  SetTypeBoard,
+  RepTypeBoard,
+  REP_SET,
+  REP_SET_LAGGING,
+  FATIGUE_SET,
+  FATIGUE_SET_LAGGING,
+  IN_PROGRESS_SET,
+  IN_PROGRESS_LAGGING,
+} from './velocity-story-kit'
+
+/**
+ * `expanded` — the velocity-HEIGHT bar chart. Bars are scaled to their value,
+ * rounded on top and flat on the bottom so the set reads as grounded.
+ *
+ * Chrome is a prop spectrum rather than a variant: with `showNumbers`/`showInfo`
+ * ON it is the framed chart (per-bar m/s labels, mean/loss info row, tap to
+ * expand); with both OFF it is the bare active-set spotlight. The framed form is
+ * SINGLE-ONLY — there is no dual framed chart, and this group does not fake one.
+ *
+ * The dual expanded is the lean `rail` renderer: value-height wings separated by
+ * the shared 2px gap, with no gutter, slot labels or axis. It is the one view
+ * where the dual genuinely needs 2x the height, because here height carries
+ * meaning.
+ */
+const meta: Meta<typeof VelocityStrip> = {
+  title: 'Workout/DataViz/VelocityStrip/Expanded',
+  component: VelocityStrip,
+  tags: ['autodocs'],
+}
+export default meta
+type Story = StoryObj<typeof VelocityStrip>
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => (
+    <Sheet>
+      <Note>
+        The representative set at value height. Bars sit at identical x-positions to the compact
+        view — only the heights change.
+      </Note>
+      <ScenarioPair
+        view="expanded"
+        title="Default"
+        single={REP_SET}
+        left={REP_SET}
+        right={REP_SET_LAGGING}
+      />
+    </Sheet>
+  ),
+}
+
+export const SetTypes: Story = {
+  name: 'Set Types',
+  render: () => (
+    <Sheet>
+      <Note>
+        The set-type vocabulary at value height — to-do remainders, the cyan variable window, the
+        AMRAP continue window, and drop sub-loads split by the chunk-notch.
+      </Note>
+      <SetTypeBoard view="expanded" />
+    </Sheet>
+  ),
+}
+
+export const InProgress: Story = {
+  name: 'In Progress',
+  render: () => (
+    <Sheet>
+      <Note>
+        Mid-set: performed reps, the newest bar live, and the planned remainder still to come. Use
+        `scale=&quot;fixed&quot;` while a set is live so bar heights never reflow as reps land.
+      </Note>
+      <ScenarioPair
+        view="expanded"
+        title="4 of 8 done"
+        single={IN_PROGRESS_SET}
+        left={IN_PROGRESS_SET}
+        right={IN_PROGRESS_LAGGING}
+        scale="fixed"
+        targetReps={8}
+        liveRepIndex={3}
+      />
+    </Sheet>
+  ),
+}
+
+export const FatigueDecline: Story = {
+  name: 'Fatigue Decline',
+  render: () => (
+    <Sheet>
+      <Note>
+        Loss colouring against the set&apos;s own best. At value height the colour and the height
+        agree, which is what makes the compact view legible on colour alone.
+      </Note>
+      <ScenarioPair
+        view="expanded"
+        title="Fatigue decline"
+        single={FATIGUE_SET}
+        left={FATIGUE_SET}
+        right={FATIGUE_SET_LAGGING}
+        barColor="loss"
+      />
+    </Sheet>
+  ),
+}
+
+export const EmptyColdBoot: Story = {
+  name: 'Empty / Cold Boot',
+  render: () => (
+    <Sheet>
+      <Note>
+        Pre-first-rep. A planned set draws its upcoming reps as placeholders, so the plot holds its
+        height AND its columns — the card does not jump, and the bars do not re-space, on rep one.
+      </Note>
+      <ScenarioPair
+        view="expanded"
+        title="Cold boot · 6 planned, none logged"
+        singleSet={{ type: 'straight', velocities: [], planned: 6 }}
+        leftSet={{ type: 'straight', velocities: [], planned: 6 }}
+        rightSet={{ type: 'straight', velocities: [], planned: 6 }}
+      />
+      <ScenarioPair
+        view="expanded"
+        title="Truly empty · no plan to draw"
+        single={[]}
+        left={[]}
+        right={[]}
+      />
+    </Sheet>
+  ),
+}
+
+export const DualLaggingSide: Story = {
+  name: 'Dual · Lagging Side',
+  render: () => (
+    <Sheet>
+      <Note>
+        The right slot trails. Its missing reps hold their columns as empties rather than shifting
+        the remaining bars left.
+      </Note>
+      <ScenarioPair
+        view="expanded"
+        title="Lagging right"
+        single={REP_SET}
+        left={REP_SET}
+        right={REP_SET_LAGGING.slice(0, 2)}
+      />
+    </Sheet>
+  ),
+}
+
+export const Responsive: Story = {
+  name: 'Responsive',
+  render: () => (
+    <Sheet width={520}>
+      <Note>
+        Two ladders. WIDTH first — bars and gaps scale together from the shared layout maths.
+      </Note>
+      {[440, 300, 180, 110].map((w) => (
+        <ScenarioPair
+          key={w}
+          view="expanded"
+          title={`${w}px`}
+          width={w}
+          single={REP_SET}
+          left={REP_SET}
+          right={REP_SET_LAGGING}
+        />
+      ))}
+
+      <Note>
+        Then HEIGHT. The expanded plot compresses toward the compact language as it shrinks — at the
+        bottom of the ladder it is effectively the resting strip, which is what makes the
+        compact↔expanded toggle a morph rather than a swap.
+      </Note>
+      {[80, 60, 40, 24, 12].map((h) => (
+        <View key={h} style={{ gap: 8 }}>
+          <ViewLabel text={`${h}px`} />
+          <VelocityStrip
+            velocities={REP_SET}
+            variant="expanded"
+            height={h}
+            scale="fixed"
+            showNumbers={false}
+            showInfo={false}
+          />
+          <DualVelocityStrip
+            left={{ velocities: REP_SET, label: 'Left' }}
+            right={{ velocities: REP_SET_LAGGING, label: 'Right' }}
+            variant="rail"
+            height={h}
+            scale="fixed"
+          />
+        </View>
+      ))}
+    </Sheet>
+  ),
+}
+
+// ── Expanded-only: the framed chrome spectrum ───────────────────────────────
+
+export const FramedChrome: Story = {
+  name: 'Framed Chrome (single-only)',
+  render: () => (
+    <Sheet width={420}>
+      <Note>
+        The chrome spectrum, single-only. There is no dual framed chart — the diverging form uses
+        the lean rail instead.
+      </Note>
+
+      <View style={{ gap: 8 }}>
+        <ViewLabel text="framed · numbers + info" />
+        <VelocityStrip velocities={REP_SET} variant="expanded" expanded showNumbers showInfo />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <ViewLabel text="numbers only" />
+        <VelocityStrip
+          velocities={REP_SET}
+          variant="expanded"
+          expanded
+          showNumbers
+          showInfo={false}
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <ViewLabel text="bare spotlight · numbers + info off" />
+        <VelocityStrip
+          velocities={REP_SET}
+          variant="expanded"
+          showNumbers={false}
+          showInfo={false}
+          height={24}
+          scale="fixed"
+        />
+      </View>
+    </Sheet>
+  ),
+}
+
+function TapToToggle() {
+  const [open, setOpen] = useState(false)
+  return (
+    <Pressable onPress={() => setOpen((v) => !v)} accessibilityRole="button">
+      <VelocityStrip
+        velocities={REP_SET}
+        variant={open ? 'expanded' : 'compact'}
+        height={open ? 60 : 8}
+        scale="fixed"
+        showNumbers={false}
+        showInfo={false}
+      />
+    </Pressable>
+  )
+}
+
+export const Interactive: Story = {
+  name: 'Interactive · compact ↔ expanded',
+  render: () => (
+    <Sheet width={420}>
+      <Note>
+        Tap to toggle between the resting compact strip and the value-height expanded one. Because
+        both go through the same geometry, only the bar HEIGHTS change — the columns never move, so
+        the transition reads as a morph rather than a swap.
+      </Note>
+      <TapToToggle />
+      <Note>
+        Compact sits at its real 8px resting height here, not a padded stand-in — the toggle is only
+        honest if the closed state is the size it ships at.
+      </Note>
+    </Sheet>
+  ),
+}
+
+export const RepTypes: Story = {
+  name: 'Rep Types',
+  render: () => (
+    <Sheet>
+      <Note>
+        Every state a rep column can be in at value height. Here height and colour agree, which is
+        the reference the compact view is judged against.
+      </Note>
+      <RepTypeBoard view="expanded" />
+    </Sheet>
+  ),
+}