@expokit/cli 0.0.0-stage → 0.3.0

package/registry/progress-steps/files/src/components/ui/progress-steps.tsx

@@ -0,0 +1,559 @@
+import * as Haptics from 'expo-haptics';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Path, Rect } from 'react-native-svg';
+
+import { alpha, motion, readableOn, useKit } from '@/lib/kit';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+export type ProgressStepsVariant = 'horizontal' | 'vertical' | 'bar';
+
+export interface ProgressStep {
+  label: string;
+  /** Muted line under the label (two lines max in the horizontal variant). */
+  description?: string;
+}
+
+export interface ProgressStepsProps {
+  /** Step labels, or objects with a description. */
+  steps: (string | ProgressStep)[];
+  /** Index of the active step. Steps before it are complete; `steps.length` marks everything done. */
+  current: number;
+  /** Index of a step that failed (drawn red with "!"). */
+  errorStep?: number;
+  /** 'horizontal' nodes with labels · 'vertical' list with descriptions · 'bar' compact "Step 2 of 4" with a segmented bar. */
+  variant?: ProgressStepsVariant;
+  /** Lets people tap a step, e.g. to go back to a completed one. */
+  onStepPress?: (index: number) => void;
+  /** Which steps `onStepPress` makes tappable: 'all' (default) or only 'completed' ones. */
+  pressableSteps?: 'all' | 'completed';
+  /** Selection tick whenever `current` changes (default true). */
+  haptics?: boolean;
+  /** Colour of completed steps, connectors and the current ring (default: theme accent). */
+  accent?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const NODE = 28;
+const GAP = 6;
+const LINE = 3;
+const H_PAD = 6;
+const CHECK = 'M7 12.4l3.4 3.4L17.2 9';
+const CHECK_LEN = 16;
+
+/**
+ * Multi-step progress for checkout and onboarding flows. Completed steps fill and draw their
+ * check, the current step glows with a pulsing ring, upcoming steps stay hollow. When `current`
+ * changes the finished node pops, the connector pours the accent into the next step and the new
+ * step lights up, with a selection tick. Horizontal, vertical (with descriptions) and a compact bar.
+ */
+export function ProgressSteps({
+  steps,
+  current,
+  errorStep,
+  variant = 'horizontal',
+  onStepPress,
+  pressableSteps = 'all',
+  haptics = true,
+  accent,
+  style,
+}: ProgressStepsProps) {
+  const { colors, dark } = useKit();
+  const reduce = useReduceMotion();
+  const tint = accent ?? colors.accent;
+  const items = steps.map((s) => (typeof s === 'string' ? { label: s } : s));
+  const n = items.length;
+  const target = Math.max(0, Math.min(n, current));
+  const track = alpha(colors.foreground, dark ? 0.12 : 0.08);
+
+  // Same motion on two drivers: native for transforms / opacity, JS for the SVG check stroke.
+  const pNative = useRef(new Animated.Value(target)).current;
+  const pJs = useRef(new Animated.Value(target)).current;
+  const labelIn = useRef(new Animated.Value(1)).current;
+  const prev = useRef(target);
+  useEffect(() => {
+    if (prev.current === target) return;
+    prev.current = target;
+    if (haptics) Haptics.selectionAsync().catch(() => {});
+    if (reduce) {
+      const cfg = { toValue: target, duration: 160 };
+      Animated.parallel([
+        Animated.timing(pNative, { ...cfg, useNativeDriver: true }),
+        Animated.timing(pJs, { ...cfg, useNativeDriver: false }),
+      ]).start();
+      labelIn.setValue(1);
+      return;
+    }
+    const cfg = { toValue: target, ...motion.gentle, overshootClamping: true };
+    Animated.parallel([
+      Animated.spring(pNative, { ...cfg, useNativeDriver: true }),
+      Animated.spring(pJs, { ...cfg, useNativeDriver: false }),
+    ]).start();
+    labelIn.setValue(0);
+    Animated.spring(labelIn, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [target, haptics, reduce, pNative, pJs, labelIn]);
+
+  // One shared heartbeat for the current step's ring.
+  const pulse = useRef(new Animated.Value(0)).current;
+  const pulsing = !reduce && target < n && target !== errorStep && variant !== 'bar';
+  useEffect(() => {
+    if (!pulsing) {
+      pulse.setValue(0);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1, duration: 1500, easing: Easing.out(Easing.quad), useNativeDriver: true }),
+        Animated.delay(250),
+      ]),
+      { resetBeforeIteration: true }
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulsing, pulse]);
+
+  const [width, setWidth] = useState(0);
+
+  const stateOf = (i: number): NodeState =>
+    i === errorStep ? 'error' : i < target ? 'done' : i === target ? 'active' : 'upcoming';
+
+  if (variant === 'bar') {
+    const shown = Math.min(target, n - 1);
+    const done = target >= n;
+    const failed = errorStep === shown;
+    return (
+      <View
+        accessible
+        accessibilityRole="progressbar"
+        accessibilityLabel={done ? 'All steps complete' : `Step ${shown + 1} of ${n}, ${items[shown]!.label}`}
+        accessibilityValue={{ min: 0, max: n, now: target }}
+        style={[styles.bar, style]}
+      >
+        <View style={styles.barHead}>
+          <Animated.Text
+            numberOfLines={1}
+            style={[
+              styles.barLabel,
+              { color: failed ? colors.danger : colors.foreground },
+              {
+                opacity: labelIn,
+                transform: [{ translateY: labelIn.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }],
+              },
+            ]}
+          >
+            {done ? 'All done' : items[shown]!.label}
+          </Animated.Text>
+          <Text style={[styles.barStep, { color: colors.mutedForeground }]}>
+            {done ? `${n} of ${n}` : `Step ${shown + 1} of ${n}`}
+          </Text>
+        </View>
+        <View style={styles.barRow}>
+          {items.map((_, i) => (
+            <Fill
+              key={i}
+              axis="x"
+              progress={pNative}
+              range={[i, i + 1]}
+              color={i === errorStep ? colors.danger : tint}
+              track={i === shown && !done ? alpha(i === errorStep ? colors.danger : tint, dark ? 0.26 : 0.2) : track}
+              thickness={6}
+              style={styles.flex}
+            />
+          ))}
+        </View>
+      </View>
+    );
+  }
+
+  const vertical = variant === 'vertical';
+  const colW = width / Math.max(1, n);
+  const segW = colW - NODE - GAP * 2;
+  return (
+    <View
+      onLayout={vertical ? undefined : (e) => setWidth(Math.round(e.nativeEvent.layout.width))}
+      style={[vertical ? styles.vertical : styles.horizontal, style]}
+    >
+      {/* Horizontal connectors sit between the columns' nodes, measured from the row width. */}
+      {!vertical && width > 0 && segW > 0
+        ? items.slice(0, -1).map((_, i) => (
+            <Fill
+              key={i}
+              axis="x"
+              progress={pNative}
+              range={[i + 0.2, i + 0.8]}
+              color={tint}
+              track={track}
+              thickness={LINE}
+              style={[styles.hLine, { left: (i + 0.5) * colW + NODE / 2 + GAP, width: segW }]}
+            />
+          ))
+        : null}
+      {items.map((step, i) => (
+        <Step
+          key={i}
+          index={i}
+          count={n}
+          step={step}
+          state={stateOf(i)}
+          vertical={vertical}
+          pNative={pNative}
+          pJs={pJs}
+          pulse={pulse}
+          color={i === errorStep ? colors.danger : tint}
+          lineColor={tint}
+          track={track}
+          reduce={reduce}
+          onPress={
+            onStepPress && (pressableSteps === 'all' || i < target) && i !== target ? () => onStepPress(i) : undefined
+          }
+        />
+      ))}
+    </View>
+  );
+}
+
+type NodeState = 'done' | 'active' | 'upcoming' | 'error';
+
+function Step({
+  index: i,
+  count: n,
+  step,
+  state,
+  vertical,
+  pNative,
+  pJs,
+  pulse,
+  color,
+  lineColor,
+  track,
+  reduce,
+  onPress,
+}: {
+  index: number;
+  count: number;
+  step: ProgressStep;
+  state: NodeState;
+  vertical: boolean;
+  pNative: Animated.Value;
+  pJs: Animated.Value;
+  pulse: Animated.Value;
+  color: string;
+  lineColor: string;
+  track: string;
+  reduce: boolean;
+  onPress?: () => void;
+}) {
+  const { colors } = useKit();
+  const press = useRef(new Animated.Value(0)).current;
+  const pressTo = (v: number) =>
+    Animated.spring(press, { toValue: v, useNativeDriver: true, ...(v ? motion.snappy : motion.bouncy) }).start();
+
+  const last = i === n - 1;
+  const labelColor =
+    state === 'error' ? colors.danger : state === 'upcoming' ? colors.mutedForeground : colors.foreground;
+  const status =
+    state === 'active' ? 'current' : state === 'done' ? 'completed' : state === 'error' ? 'needs attention' : 'not started';
+
+  const node = (
+    <Animated.View style={{ transform: [{ scale: press.interpolate({ inputRange: [0, 1], outputRange: [1, 0.86] }) }] }}>
+      <Node index={i} state={state} pNative={pNative} pJs={pJs} pulse={pulse} color={color} reduce={reduce} />
+    </Animated.View>
+  );
+
+  const line = (style: StyleProp<ViewStyle>) => (
+    <Fill
+      axis="y"
+      progress={pNative}
+      range={[i + 0.2, i + 0.8]}
+      color={lineColor}
+      track={track}
+      thickness={LINE}
+      style={style}
+    />
+  );
+
+  const a11y = {
+    accessibilityRole: onPress ? ('button' as const) : ('text' as const),
+    accessibilityLabel: `Step ${i + 1} of ${n}, ${step.label}, ${status}`,
+    accessibilityHint: onPress ? 'Goes back to this step' : undefined,
+    accessibilityState: { selected: state === 'active' },
+  };
+  const Wrapper = onPress ? Pressable : View;
+  const pressProps = onPress ? { onPress, onPressIn: () => pressTo(1), onPressOut: () => pressTo(0) } : {};
+
+  if (vertical) {
+    return (
+      <Wrapper {...a11y} {...pressProps} style={styles.vRow}>
+        <View style={styles.vRail}>
+          {node}
+          {!last ? line(styles.vLine) : null}
+        </View>
+        <View style={[styles.vBody, !last && styles.vBodyGap]}>
+          <Text style={[styles.vLabel, { color: labelColor }]}>{step.label}</Text>
+          {step.description ? (
+            <Text style={[styles.vDesc, { color: state === 'error' ? colors.danger : colors.mutedForeground }]}>
+              {step.description}
+            </Text>
+          ) : null}
+        </View>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper {...a11y} {...pressProps} style={styles.hCol}>
+      <View style={styles.hTop}>{node}</View>
+      <Text numberOfLines={2} style={[styles.hLabel, { color: labelColor }]}>
+        {step.label}
+      </Text>
+      {step.description ? (
+        <Text numberOfLines={2} style={[styles.hDesc, { color: colors.mutedForeground }]}>
+          {step.description}
+        </Text>
+      ) : null}
+    </Wrapper>
+  );
+}
+
+function Node({
+  index: i,
+  state,
+  pNative,
+  pJs,
+  pulse,
+  color,
+  reduce,
+}: {
+  index: number;
+  state: NodeState;
+  pNative: Animated.Value;
+  pJs: Animated.Value;
+  pulse: Animated.Value;
+  color: string;
+  reduce: boolean;
+}) {
+  const { colors, radius, dark } = useKit();
+  const clamp = 'clamp' as const;
+  const round = { borderRadius: radius.capsule(NODE) };
+  const activeIn = pNative.interpolate({ inputRange: [i - 0.3, i], outputRange: [0, 1], extrapolate: clamp });
+  const doneIn = pNative.interpolate({ inputRange: [i, i + 0.3], outputRange: [0, 1], extrapolate: clamp });
+  const draw = pJs.interpolate({ inputRange: [i + 0.1, i + 0.55], outputRange: [CHECK_LEN, 0], extrapolate: clamp });
+  const ink = readableOn(color);
+
+  if (state === 'error') {
+    return (
+      <View style={styles.nodeBox}>
+        <View style={[styles.halo, { borderRadius: radius.capsule(NODE + 8), backgroundColor: alpha(color, 0.16) }]} />
+        <Disc color={color} corner={radius.capsule(NODE)}>
+          <Path d="M12 7v6" stroke={ink} strokeWidth={2.6} strokeLinecap="round" />
+          <Rect x={10.6} y={15.6} width={2.8} height={2.8} rx={1.4} fill={ink} />
+        </Disc>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.nodeBox}>
+      {/* Upcoming: hollow ring, muted number. */}
+      <View
+        style={[styles.node, round, { borderWidth: 1.5, borderColor: alpha(colors.foreground, dark ? 0.22 : 0.16) }]}
+      >
+        <Text style={[styles.num, { color: colors.mutedForeground }]}>{i + 1}</Text>
+      </View>
+
+      {/* Current: soft halo, a ring that breathes outwards, accent ring with a tinted core. */}
+      <Animated.View
+        style={[
+          styles.halo,
+          { borderRadius: radius.capsule(NODE + 8), backgroundColor: alpha(color, dark ? 0.2 : 0.14), opacity: activeIn },
+        ]}
+      />
+      {state === 'active' && !reduce ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.node,
+            styles.layer,
+            round,
+            {
+              borderWidth: 1.5,
+              borderColor: color,
+              opacity: Animated.multiply(pulse.interpolate({ inputRange: [0, 1], outputRange: [0.5, 0] }), activeIn),
+              transform: [{ scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.8] }) }],
+            },
+          ]}
+        />
+      ) : null}
+      <Animated.View
+        style={[
+          styles.node,
+          styles.layer,
+          round,
+          {
+            borderWidth: 2,
+            borderColor: color,
+            backgroundColor: colors.background,
+            opacity: activeIn,
+            transform: [{ scale: activeIn.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1] }) }],
+          },
+        ]}
+      >
+        <View style={[StyleSheet.absoluteFill, round, { backgroundColor: alpha(color, 0.12) }]} />
+        <Text style={[styles.num, { color }]}>{i + 1}</Text>
+      </Animated.View>
+
+      {/* Done: solid disc that pops in, then the check draws itself. */}
+      <Animated.View
+        style={[
+          styles.layer,
+          {
+            opacity: doneIn,
+            transform: [
+              {
+                scale: doneIn.interpolate(
+                  reduce
+                    ? { inputRange: [0, 1], outputRange: [0.9, 1] }
+                    : { inputRange: [0, 0.7, 1], outputRange: [0.55, 1.1, 1] }
+                ),
+              },
+            ],
+          },
+        ]}
+      >
+        <Disc color={color} corner={radius.capsule(NODE)}>
+          <AnimatedPath
+            d={CHECK}
+            stroke={ink}
+            strokeWidth={2.6}
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeDasharray={`${CHECK_LEN} ${CHECK_LEN}`}
+            strokeDashoffset={draw}
+          />
+        </Disc>
+      </Animated.View>
+    </View>
+  );
+}
+
+/** Solid filled node; children draw in a 24×24 box on top. */
+function Disc({ color, corner, children }: { color: string; corner: number; children: React.ReactNode }) {
+  const r = (corner / NODE) * 24;
+  return (
+    <Svg width={NODE} height={NODE} viewBox="0 0 24 24">
+      <Rect width={24} height={24} rx={r} fill={color} />
+      {children}
+    </Svg>
+  );
+}
+
+/** A track whose solid fill slides in (native driver) as `progress` moves through `range`. */
+function Fill({
+  axis,
+  progress,
+  range,
+  color,
+  track,
+  thickness,
+  style,
+}: {
+  axis: 'x' | 'y';
+  progress: Animated.Value;
+  range: [number, number];
+  color: string;
+  track: string;
+  thickness: number;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const { radius } = useKit();
+  const [len, setLen] = useState(0);
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    const l = Math.round(axis === 'x' ? width : height);
+    if (l !== len) setLen(l);
+  };
+  const x = axis === 'x';
+  const corner = radius.capsule(thickness);
+  const shift = progress.interpolate({ inputRange: range, outputRange: [-len, 0], extrapolate: 'clamp' });
+  const w = x ? len : thickness;
+  const h = x ? thickness : len;
+  return (
+    <View
+      onLayout={onLayout}
+      style={[
+        x ? { height: thickness } : { width: thickness },
+        { borderRadius: corner, backgroundColor: track, overflow: 'hidden' },
+        style,
+      ]}
+    >
+      {len ? (
+        <Animated.View
+          style={{
+            width: w,
+            height: h,
+            borderRadius: corner,
+            backgroundColor: color,
+            transform: [x ? { translateX: shift } : { translateY: shift }],
+          }}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((v) => alive && setReduce(v))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  horizontal: { flexDirection: 'row', alignItems: 'flex-start', alignSelf: 'stretch' },
+  hCol: { flex: 1, alignItems: 'center', minHeight: 44, paddingTop: H_PAD },
+  hTop: { marginBottom: 10 },
+  hLine: { position: 'absolute', top: H_PAD + NODE / 2 - LINE / 2 },
+  hLabel: { fontSize: 12.5, fontWeight: '400', textAlign: 'center', letterSpacing: -0.1, paddingHorizontal: 2 },
+  hDesc: { fontSize: 11, lineHeight: 14, textAlign: 'center', marginTop: 2, paddingHorizontal: 2 },
+  nodeBox: { width: NODE, height: NODE },
+  node: { width: NODE, height: NODE, alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
+  layer: { position: 'absolute', left: 0, top: 0 },
+  halo: { position: 'absolute', left: -4, top: -4, width: NODE + 8, height: NODE + 8 },
+  num: { fontSize: 12.5, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  vertical: { alignSelf: 'stretch' },
+  vRow: { flexDirection: 'row', gap: 14, minHeight: 44, paddingLeft: 4 },
+  vRail: { alignItems: 'center', width: NODE, paddingTop: 2 },
+  vLine: { flex: 1, minHeight: 16, marginTop: GAP + 2, marginBottom: GAP - 4 },
+  vBody: { flex: 1, paddingTop: 5 },
+  vBodyGap: { paddingBottom: 24 },
+  vLabel: { fontSize: 15.5, fontWeight: '400', letterSpacing: -0.25 },
+  vDesc: { fontSize: 13.5, lineHeight: 19, marginTop: 3 },
+  bar: { alignSelf: 'stretch', gap: 10 },
+  barHead: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 },
+  barStep: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  barLabel: { fontSize: 16, fontWeight: '400', letterSpacing: -0.25, flexShrink: 1 },
+  barRow: { flexDirection: 'row', gap: 5 },
+});