@titan-design/react-ui 0.6.0 → 0.7.0

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

@@ -1,26 +1,61 @@
 import { useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
+import { View, Text } from 'react-native'
 import { VelocityStrip } from './VelocityStrip'
 
 const meta: Meta<typeof VelocityStrip> = {
-  title: 'Custom/Workout/VelocityStrip',
+  title: 'Workout/DataViz/VelocityStrip',
   component: VelocityStrip,
   tags: ['autodocs'],
-  argTypes: {
-    expanded: {
-      control: 'boolean',
-      description: 'Whether the strip is expanded into a bar chart',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Per-rep velocity strip. Two variants: `mini` (a flat 3px static strip) and `expanded` ' +
+          '(the velocity-HEIGHT bar chart, rounded tops). The `expanded` chrome is prop-driven — ' +
+          'with `showNumbers`/`showInfo` on it is the framed chart (raised surface, per-bar m/s ' +
+          'labels, mean/loss info row, interactive tap-to-expand); with both off it is a bare strip, ' +
+          'the active-set spotlight. `height` sets the plot height; `scale` is `peak` (to the set max) ' +
+          'or `fixed` (a fixed ceiling, cross-set-comparable). Feed either `velocities` or a `set` ' +
+          'descriptor (set-type aware — see the ' +
+          '[modalities](?path=/docs/workout-dataviz-velocitystrip-modalities--docs) sheet).',
+      },
     },
+  },
+  argTypes: {
     variant: {
       control: 'select',
-      options: ['full', 'mini'],
+      options: ['mini', 'expanded'],
       description: 'Display variant',
     },
+    expanded: {
+      control: 'boolean',
+      description: 'expanded (framed): whether the chart is open (toggle for tap-to-expand)',
+    },
+    showNumbers: {
+      control: 'boolean',
+      description: 'expanded framed chart: per-bar m/s labels (default true)',
+    },
     showInfo: {
       control: 'boolean',
-      description: 'Whether to show the info row (zone name + loss %) in expanded mode',
+      description: 'expanded framed chart: the mean/loss info row (default true)',
+    },
+    height: {
+      control: { type: 'number', min: 12, max: 96, step: 2 },
+      description: 'expanded plot height in px (bars scale to this). Default 60.',
+    },
+    scale: {
+      control: 'inline-radio',
+      options: ['peak', 'fixed'],
+      description: 'expanded bar scaling: peak (set max) or fixed (cross-set ceiling)',
     },
+    liveRepIndex: {
+      control: 'number',
+      description:
+        'expanded framed chart: index of the newest rep to animate (pop / new-peak bounce)',
+    },
+    set: { control: false, description: 'Structured set descriptor (supersedes `velocities`)' },
+    zones: { control: false, description: 'Velocity-zone bands (WA); default scale when absent' },
   },
 }
 
@@ -32,94 +67,122 @@ const slowSet = [0.65, 0.58, 0.52, 0.48, 0.42]
 const mixedSet = [1.1, 0.95, 0.82, 0.68, 0.55, 0.45]
 const moderateSet = [0.88, 0.85, 0.82, 0.78, 0.76]
 
-export const DefaultCollapsed: Story = {
-  args: {
-    velocities: moderateSet,
-    onToggle: () => {},
-  },
-}
-
-export const Expanded: Story = {
+/** Controls-driven: flip `variant` / `showNumbers` / `showInfo` / `height` / `scale` in the panel. */
+export const Playground: Story = {
   args: {
     velocities: moderateSet,
+    variant: 'expanded',
     expanded: true,
+    showNumbers: true,
+    showInfo: true,
+    height: 60,
+    scale: 'peak',
     onToggle: () => {},
   },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 300, padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
 }
 
-export const ExpandedNoInfo: Story = {
-  args: {
-    velocities: moderateSet,
-    expanded: true,
-    showInfo: false,
-    onToggle: () => {},
-  },
-}
-
-export const FastEasySet: Story = {
-  args: {
-    velocities: fastSet,
-    expanded: true,
-    onToggle: () => {},
-  },
+/** The flat 3px static strip — the collapsed glance used in cards and rails. */
+export const Mini: Story = {
+  args: { velocities: mixedSet, variant: 'mini' },
 }
 
-export const SlowGrindingSet: Story = {
-  args: {
-    velocities: slowSet,
-    expanded: true,
-    onToggle: () => {},
-  },
+/** Framed chart with per-bar m/s labels + info row (numbers ON) — the rich readout. */
+export const ExpandedWithNumbers: Story = {
+  args: { velocities: mixedSet, variant: 'expanded', expanded: true },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 300, padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
 }
 
-export const MixedVelocities: Story = {
+/** Bare velocity-height strip (numbers OFF, info OFF, fixed 24px) — the active-set spotlight. */
+export const ExpandedBareSpotlight: Story = {
   args: {
-    velocities: mixedSet,
-    expanded: true,
-    onToggle: () => {},
+    variant: 'expanded',
+    showNumbers: false,
+    showInfo: false,
+    height: 24,
+    scale: 'fixed',
+    set: { type: 'straight', velocities: [0.95, 0.9, 0.86, 0.8, 0.72], planned: 10 },
   },
 }
 
-export const Mini: Story = {
+/** A structured set descriptor (a drop set): the mini variant carries the set-type gap/color encoding. */
+export const SetTypeMini: Story = {
   args: {
-    velocities: mixedSet,
     variant: 'mini',
+    set: {
+      type: 'drop',
+      subloads: [
+        [1.0, 0.92],
+        [0.85, 0.78],
+        [0.7, 0.62],
+      ],
+    },
   },
 }
 
 function InteractiveVelocityStrip() {
-  const [expanded, setExpanded] = useState(false)
+  const [open, setOpen] = useState(false)
+  // Tap-to-expand: `onToggle` + the controlled `expanded` boolean. Tapping the strip
+  // toggles both ways (collapsed 3px ↔ chart). No `onRepPress` here — per-bar rep
+  // presses would intercept bar taps and block collapse; that's a separate mode.
   return (
     <View style={{ width: 300, padding: 16 }}>
-      <VelocityStrip
-        velocities={moderateSet}
-        expanded={expanded}
-        onToggle={() => setExpanded(!expanded)}
-        onRepPress={(index, velocity) =>
-          console.log(`Rep ${index + 1}: ${velocity}`)
-        }
-      />
+      <VelocityStrip velocities={moderateSet} expanded={open} onToggle={() => setOpen((v) => !v)} />
     </View>
   )
 }
 
+/** Tap to expand; tap again to collapse (3px ↔ chart, animated). */
 export const Interactive: Story = {
   render: () => <InteractiveVelocityStrip />,
 }
 
-export const AllProfiles: Story = {
-  render: () => (
-    <View style={{ gap: 24, padding: 16 }}>
-      <View style={{ gap: 8 }}>
-        <VelocityStrip velocities={fastSet} expanded onToggle={() => {}} />
-        <VelocityStrip
-          velocities={moderateSet}
-          expanded
-          onToggle={() => {}}
-        />
-        <VelocityStrip velocities={slowSet} expanded onToggle={() => {}} />
-        <VelocityStrip velocities={mixedSet} expanded onToggle={() => {}} />
+/** The four zone profiles across the treatments, so the color scale reads at a glance. */
+export const Profiles: Story = {
+  render: () => {
+    const rows: [string, number[]][] = [
+      ['Speed', fastSet],
+      ['Power', moderateSet],
+      ['Strength', slowSet],
+      ['Mixed', mixedSet],
+    ]
+    return (
+      <View style={{ gap: 20, padding: 16, width: 320 }}>
+        {rows.map(([label, velocities]) => (
+          <View key={label} style={{ gap: 6 }}>
+            <Text style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: '#9CA3AF' }}>
+              {label}
+            </Text>
+            <VelocityStrip
+              velocities={velocities}
+              variant="expanded"
+              showInfo={false}
+              onToggle={() => {}}
+            />
+            <VelocityStrip
+              variant="expanded"
+              showNumbers={false}
+              showInfo={false}
+              height={24}
+              scale="fixed"
+              set={{ type: 'straight', velocities, planned: velocities.length }}
+            />
+            <VelocityStrip velocities={velocities} variant="mini" />
+          </View>
+        ))}
       </View>
-    </View>
-  ),
+    )
+  },
 }