@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/Stepper/Stepper.js

@@ -0,0 +1,591 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CIRCLE_SIZE = 24;
+const PULSE_SIZE = 32;
+const PULSE_DURATION = 1100;
+const toneColorFor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const StepCircle = ({
+  index,
+  step,
+  status,
+  toneColor,
+  upcomingColor,
+  upcomingFillColor,
+  textOnColor,
+  upcomingTextColor,
+  interactive,
+  totalSteps,
+  onPress,
+  circleSize,
+  pulseSize,
+  pulseEnabled,
+  pulseDuration,
+  pressHaptic,
+  circleSlotStyle
+}) => {
+  const isActive = status === 'active';
+  const pulseScale = useRef(createAnimatedValue(1)).current;
+  const pulseOpacity = useRef(createAnimatedValue(0.5)).current;
+  useEffect(() => {
+    if (!isActive || !pulseEnabled) {
+      pulseScale.setValue(1);
+      pulseOpacity.setValue(0);
+      return;
+    }
+    // Native driver: this is a LOOP on `opacity` + `transform.scale`, and the
+    // view's other props are static, so there is no driver mixing. A looping
+    // animation is the one case where the JS thread cost is not negligible —
+    // it runs for as long as the step is active.
+    const loop = Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(pulseScale, {
+      toValue: 1.4,
+      duration: pulseDuration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    }), Animated.timing(pulseScale, {
+      toValue: 1,
+      duration: 0,
+      useNativeDriver: true
+    })]), Animated.sequence([Animated.timing(pulseOpacity, {
+      toValue: 0,
+      duration: pulseDuration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    }), Animated.timing(pulseOpacity, {
+      toValue: 0.5,
+      duration: 0,
+      useNativeDriver: true
+    })])]));
+    loop.start();
+    return () => loop.stop();
+  }, [isActive, pulseScale, pulseOpacity, pulseEnabled, pulseDuration]);
+  const bgColor = status === 'upcoming' ? upcomingFillColor : toneColor;
+  const borderColor = status === 'upcoming' ? upcomingColor : toneColor;
+  const textColor = status === 'upcoming' ? upcomingTextColor : textOnColor;
+  const isComplete = status === 'complete';
+  const labelText = `Step ${index + 1} of ${totalSteps}, ${step.label}, ${status}`;
+  const canPress = interactive && status === 'complete';
+  const handlePress = () => {
+    if (!canPress) {
+      return;
+    }
+    if (pressHaptic) {
+      triggerHaptic(pressHaptic);
+    }
+    onPress?.(index);
+  };
+  const inner = /*#__PURE__*/_jsxs(View, {
+    style: circleStyles.relative,
+    children: [isActive && pulseEnabled ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [circleStyles.pulse, {
+        width: pulseSize,
+        height: pulseSize,
+        borderRadius: pulseSize / 2,
+        backgroundColor: toneColor,
+        opacity: pulseOpacity,
+        transform: [{
+          scale: pulseScale
+        }]
+      }]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [circleStyles.circle, {
+        width: circleSize,
+        height: circleSize,
+        borderRadius: circleSize / 2,
+        backgroundColor: bgColor,
+        borderColor
+      }, circleSlotStyle],
+      children: step.icon ? step.icon : isComplete ? /*#__PURE__*/_jsx(Text, {
+        style: [circleStyles.glyph, {
+          color: textColor
+        }],
+        children: '✓'
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: [circleStyles.glyph, {
+          color: textColor
+        }],
+        children: index + 1
+      })
+    })]
+  });
+  if (interactive) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: handlePress,
+      disabled: !canPress,
+      accessibilityRole: "button",
+      accessibilityLabel: labelText,
+      accessibilityState: {
+        selected: isActive,
+        disabled: status === 'upcoming'
+      },
+      hitSlop: 8,
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "text",
+    accessibilityLabel: labelText,
+    accessibilityState: {
+      selected: isActive
+    },
+    children: inner
+  });
+};
+const circleStyles = StyleSheet.create({
+  relative: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  pulse: {
+    position: 'absolute'
+  },
+  circle: {
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  glyph: {
+    fontSize: 12,
+    fontWeight: '600',
+    includeFontPadding: false
+  }
+});
+const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    steps,
+    activeStep,
+    onStepPress,
+    allowStepPress = false,
+    variant = 'horizontal',
+    tone = 'primary',
+    loading = false,
+    accessibilityLabel,
+    style,
+    containerStyle,
+    circleStyle,
+    labelStyle,
+    connectorStyle,
+    haptic,
+    testID
+  } = props;
+  const theme = useTheme();
+  const stepperTheme = theme.components.stepper;
+  const circleSize = stepperTheme?.circleSize ?? CIRCLE_SIZE;
+  const pulseSize = stepperTheme?.pulseSize ?? PULSE_SIZE;
+  const pulseEnabled = stepperTheme?.pulseAnimation ?? false;
+  const pulseDuration = stepperTheme?.pulseDuration ?? PULSE_DURATION;
+  const pressHaptic = resolveHaptic(haptic, 'selection');
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const toneColor = toneColorFor(theme, tone);
+  const upcomingColor = theme.colors.border.primary;
+  const upcomingFillColor = theme.colors.background.primary;
+  const upcomingTextColor = theme.colors.text.secondary;
+  const textOnColor = theme.colors.text.inverse;
+  const interactive = allowStepPress && typeof onStepPress === 'function';
+  const total = steps.length;
+
+  // Connector progress: animates as activeStep changes.
+  const initialProgress = total <= 1 ? 0 : activeStep / (total - 1);
+  const progress = useRef(createAnimatedValue(initialProgress)).current;
+  const lastTargetRef = useRef(initialProgress);
+  useEffect(() => {
+    const target = total <= 1 ? 0 : activeStep / (total - 1);
+    if (lastTargetRef.current === target) {
+      return;
+    }
+    lastTargetRef.current = target;
+    Animated.timing(progress, {
+      toValue: target,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }).start();
+  }, [activeStep, total, progress, theme.motion]);
+  const widthInterp = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%']
+  });
+  const heightInterp = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%']
+  });
+  const a11yLabel = accessibilityLabel ?? `Progress: step ${activeStep + 1} of ${total}`;
+
+  // Measure row width and inset the connector in pixels so it lines up
+  // with the flex-computed circle centres. Percentage insets (50/total%)
+  // round independently from flex layout on fractional-density screens
+  // and can leave the line poking past the first/last node by a pixel.
+  const [hRowWidth, setHRowWidth] = useState(0);
+  const connectorInset = total > 0 && hRowWidth > 0 ? hRowWidth / (2 * total) : 0;
+  const renderHorizontal = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.hRow,
+    onLayout: e => setHRowWidth(e.nativeEvent.layout.width),
+    children: [/*#__PURE__*/_jsxs(View, {
+      pointerEvents: "none",
+      style: [styles.hConnectorContainer, {
+        left: connectorInset,
+        right: connectorInset
+      }, connectorStyle],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.hConnectorTrack, {
+          backgroundColor: upcomingColor
+        }]
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.hConnectorFill, {
+          backgroundColor: toneColor,
+          width: widthInterp
+        }]
+      })]
+    }), steps.map((step, i) => {
+      const status = i < activeStep ? 'complete' : i === activeStep ? 'active' : 'upcoming';
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.hStepItem,
+        children: [/*#__PURE__*/_jsx(StepCircle, {
+          index: i,
+          step: step,
+          status: status,
+          toneColor: toneColor,
+          upcomingColor: upcomingColor,
+          upcomingFillColor: upcomingFillColor,
+          onPressColor: toneColor,
+          textOnColor: textOnColor,
+          upcomingTextColor: upcomingTextColor,
+          interactive: interactive,
+          totalSteps: total,
+          onPress: onStepPress,
+          circleSize: circleSize,
+          pulseSize: pulseSize,
+          pulseEnabled: pulseEnabled,
+          pulseDuration: pulseDuration,
+          pressHaptic: pressHaptic,
+          circleSlotStyle: circleStyle
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.hLabel, {
+            color: status === 'upcoming' ? theme.colors.text.tertiary : theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.xs
+          }, labelStyle],
+          numberOfLines: 1,
+          children: step?.label ?? ' '
+        })]
+      }, step.key);
+    })]
+  });
+  const renderVertical = () => /*#__PURE__*/_jsx(View, {
+    style: styles.vCol,
+    children: steps.map((step, i) => {
+      const status = i < activeStep ? 'complete' : i === activeStep ? 'active' : 'upcoming';
+      const isLast = i === total - 1;
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.vRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.vLeft,
+          children: [/*#__PURE__*/_jsx(StepCircle, {
+            index: i,
+            step: step,
+            status: status,
+            toneColor: toneColor,
+            upcomingColor: upcomingColor,
+            upcomingFillColor: upcomingFillColor,
+            onPressColor: toneColor,
+            textOnColor: textOnColor,
+            upcomingTextColor: upcomingTextColor,
+            interactive: interactive,
+            totalSteps: total,
+            onPress: onStepPress,
+            circleSize: circleSize,
+            pulseSize: pulseSize,
+            pulseEnabled: pulseEnabled,
+            pulseDuration: pulseDuration,
+            pressHaptic: pressHaptic,
+            circleSlotStyle: circleStyle
+          }), !isLast ? /*#__PURE__*/_jsxs(View, {
+            style: [styles.vConnectorContainer, connectorStyle],
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.vConnectorTrack, {
+                backgroundColor: upcomingColor
+              }]
+            }), /*#__PURE__*/_jsx(Animated.View, {
+              style: [styles.vConnectorFill, {
+                backgroundColor: toneColor,
+                height: i < activeStep ? '100%' : i === activeStep ? heightInterp : 0
+              }]
+            })]
+          }) : null]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.vBody,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.vLabel, {
+              color: status === 'upcoming' ? theme.colors.text.tertiary : theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.base,
+              fontWeight: theme.typography.fontWeight.semibold
+            }, labelStyle],
+            numberOfLines: 1,
+            children: step?.label ?? ' '
+          }), step.description ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.vDescription, {
+              color: theme.colors.text.secondary,
+              fontSize: theme.typography.fontSize.sm
+            }],
+            numberOfLines: 3,
+            children: step.description
+          }) : null]
+        })]
+      }, step.key);
+    })
+  });
+  const rendered = /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.container, containerStyle, style],
+    testID: testID,
+    accessibilityRole: "progressbar",
+    accessibilityLabel: a11yLabel,
+    accessibilityValue: {
+      min: 0,
+      max: total,
+      now: Math.min(activeStep + 1, total)
+    },
+    children: variant === 'horizontal' ? renderHorizontal() : renderVertical()
+  });
+  if (loading) {
+    return /*#__PURE__*/_jsx(StepperSkeleton, {
+      ...props
+    });
+  }
+  return rendered;
+});
+Stepper.displayName = 'Stepper';
+
+/**
+ * Authored placeholder shape for `<Stepper>`. Mirrors the real horizontal
+ * layout — a row of circles spaced evenly with a flat connector bar passing
+ * through their centers — so the on-screen footprint doesn't reflow when
+ * data loads. Vertical variant gets a stacked column with the same circle +
+ * label + description pattern.
+ *
+ * Attached as the `Skeleton` static so `<SkeletonContent>` and any consumer
+ * of the auto-walker substitutes this shape automatically. Also rendered
+ * directly when `loading` is true on the live `<Stepper>`.
+ */
+const StepperSkeleton = ({
+  steps,
+  variant = 'horizontal',
+  containerStyle,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const stepperTheme = theme.components.stepper;
+  const circleSize = stepperTheme?.circleSize ?? CIRCLE_SIZE;
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const total = steps.length || 3;
+  if (variant === 'vertical') {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, containerStyle, style],
+      testID: testID,
+      accessibilityRole: "progressbar",
+      accessibilityState: {
+        busy: true
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: skeletonStyles.vCol,
+        children: Array.from({
+          length: total
+        }).map((_, i) => {
+          const isLast = i === total - 1;
+          return /*#__PURE__*/_jsxs(View, {
+            style: skeletonStyles.vRow,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: [skeletonStyles.vLeft, {
+                width: circleSize + 8
+              }],
+              children: [/*#__PURE__*/_jsx(Skeleton, {
+                shape: "circle",
+                width: circleSize,
+                height: circleSize
+              }), !isLast ? /*#__PURE__*/_jsx(Skeleton, {
+                width: 2,
+                height: 28,
+                style: {
+                  marginTop: 4,
+                  marginBottom: 4
+                }
+              }) : null]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: skeletonStyles.vBody,
+              children: [/*#__PURE__*/_jsx(Skeleton, {
+                shape: "text",
+                width: "55%",
+                height: 16,
+                style: {
+                  marginBottom: 4
+                }
+              }), /*#__PURE__*/_jsx(Skeleton, {
+                shape: "text",
+                width: "80%",
+                height: 12
+              })]
+            })]
+          }, `sk-step-${i}`);
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, containerStyle, style],
+    testID: testID,
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.hRow,
+      children: [/*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: [styles.hConnectorContainer, {
+          left: `${50 / total}%`,
+          right: `${50 / total}%`
+        }],
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: "100%",
+          height: 2,
+          radius: 1
+        })
+      }), Array.from({
+        length: total
+      }).map((_, i) => /*#__PURE__*/_jsxs(View, {
+        style: styles.hStepItem,
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          shape: "circle",
+          width: circleSize,
+          height: circleSize
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          shape: "text",
+          width: "80%",
+          height: 12,
+          style: {
+            marginTop: theme.spacing.xs
+          }
+        })]
+      }, `sk-step-${i}`))]
+    })
+  });
+};
+StepperSkeleton.displayName = 'StepperSkeleton';
+Stepper.Skeleton = StepperSkeleton;
+const skeletonStyles = StyleSheet.create({
+  vCol: {
+    flexDirection: 'column'
+  },
+  vRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  vLeft: {
+    alignItems: 'center'
+  },
+  vBody: {
+    flex: 1,
+    paddingLeft: 12,
+    paddingBottom: 16
+  }
+});
+const buildStyles = theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  // Horizontal
+  hRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    position: 'relative'
+  },
+  hConnectorContainer: {
+    position: 'absolute',
+    top: CIRCLE_SIZE / 2 - 1,
+    height: 2,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  hConnectorTrack: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 2,
+    borderRadius: 1
+  },
+  hConnectorFill: {
+    position: 'absolute',
+    left: 0,
+    height: 2,
+    borderRadius: 1
+  },
+  hStepItem: {
+    alignItems: 'center',
+    flex: 1
+  },
+  hLabel: {
+    marginTop: theme.spacing.xs,
+    textAlign: 'center'
+  },
+  // Vertical
+  vCol: {
+    flexDirection: 'column'
+  },
+  vRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  vLeft: {
+    alignItems: 'center',
+    width: CIRCLE_SIZE + 8
+  },
+  vConnectorContainer: {
+    flex: 1,
+    width: 2,
+    marginTop: 4,
+    marginBottom: 4,
+    minHeight: 24,
+    position: 'relative',
+    alignSelf: 'center'
+  },
+  vConnectorTrack: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 2,
+    borderRadius: 1
+  },
+  vConnectorFill: {
+    position: 'absolute',
+    top: 0,
+    width: 2,
+    borderRadius: 1
+  },
+  vBody: {
+    flex: 1,
+    paddingLeft: theme.spacing.sm,
+    paddingBottom: theme.spacing.md
+  },
+  vLabel: {
+    marginBottom: 2
+  },
+  vDescription: {}
+});
+export { Stepper };
+export default Stepper;
+//# sourceMappingURL=Stepper.js.map

package/lib/module/components/Stepper/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, Stepper } from "./Stepper.js";
+//# sourceMappingURL=index.js.map