@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,399 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CIRCLE_SIZE = 24;
+const PULSE_SIZE = 32;
+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,
+  textOnColor,
+  upcomingTextColor,
+  interactive,
+  totalSteps,
+  onPress
+}) => {
+  const isActive = status === 'active';
+  const pulseScale = useRef(new Animated.Value(1)).current;
+  const pulseOpacity = useRef(new Animated.Value(0.5)).current;
+  useEffect(() => {
+    if (!isActive) {
+      pulseScale.setValue(1);
+      pulseOpacity.setValue(0);
+      return;
+    }
+    // Use JS driver for the pulse — it animates `opacity` and `transform.scale`
+    // which would normally take native driver, but avoiding it keeps this
+    // robust when the native renderer is unavailable (e.g. some test envs)
+    // and the perf cost of two interpolations on a single absolutely-
+    // positioned view is negligible.
+    const loop = Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(pulseScale, {
+      toValue: 1.4,
+      duration: 1100,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }), Animated.timing(pulseScale, {
+      toValue: 1,
+      duration: 0,
+      useNativeDriver: false
+    })]), Animated.sequence([Animated.timing(pulseOpacity, {
+      toValue: 0,
+      duration: 1100,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }), Animated.timing(pulseOpacity, {
+      toValue: 0.5,
+      duration: 0,
+      useNativeDriver: false
+    })])]));
+    loop.start();
+    return () => loop.stop();
+  }, [isActive, pulseScale, pulseOpacity]);
+  const bgColor = status === 'upcoming' ? 'transparent' : 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;
+    triggerHaptic('selection');
+    onPress?.(index);
+  };
+  const inner = /*#__PURE__*/_jsxs(View, {
+    style: circleStyles.relative,
+    children: [isActive ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [circleStyles.pulse, {
+        width: PULSE_SIZE,
+        height: PULSE_SIZE,
+        borderRadius: PULSE_SIZE / 2,
+        backgroundColor: toneColor,
+        opacity: pulseOpacity,
+        transform: [{
+          scale: pulseScale
+        }]
+      }]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [circleStyles.circle, {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        backgroundColor: bgColor,
+        borderColor
+      }],
+      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,
+    variant = 'horizontal',
+    tone = 'primary',
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const toneColor = toneColorFor(theme, tone);
+  const upcomingColor = theme.colors.border.primary;
+  const upcomingTextColor = theme.colors.text.secondary;
+  const textOnColor = theme.colors.text.inverse;
+  const interactive = typeof onStepPress === 'function';
+  const total = steps.length;
+
+  // Connector progress: animates as activeStep changes.
+  const initialProgress = total <= 1 ? 0 : activeStep / (total - 1);
+  const progress = useRef(new Animated.Value(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}`;
+  const renderHorizontal = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.hRow,
+    children: [/*#__PURE__*/_jsxs(View, {
+      pointerEvents: "none",
+      style: styles.hConnectorContainer,
+      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,
+          onPressColor: toneColor,
+          textOnColor: textOnColor,
+          upcomingTextColor: upcomingTextColor,
+          interactive: interactive,
+          totalSteps: total,
+          onPress: onStepPress
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.hLabel, {
+            color: status === 'upcoming' ? theme.colors.text.tertiary : theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.xs
+          }],
+          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,
+            onPressColor: toneColor,
+            textOnColor: textOnColor,
+            upcomingTextColor: upcomingTextColor,
+            interactive: interactive,
+            totalSteps: total,
+            onPress: onStepPress
+          }), !isLast ? /*#__PURE__*/_jsxs(View, {
+            style: styles.vConnectorContainer,
+            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
+            }],
+            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);
+    })
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.container, style],
+    testID: testID,
+    accessibilityRole: "progressbar",
+    accessibilityLabel: a11yLabel,
+    accessibilityValue: {
+      min: 0,
+      max: total,
+      now: Math.min(activeStep + 1, total)
+    },
+    children: variant === 'horizontal' ? renderHorizontal() : renderVertical()
+  });
+});
+Stepper.displayName = 'Stepper';
+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,
+    left: CIRCLE_SIZE / 2,
+    right: CIRCLE_SIZE / 2,
+    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 { Stepper, default } from "./Stepper.js";
+//# sourceMappingURL=index.js.map