@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/commonjs/components/Confetti/Confetti.js

@@ -0,0 +1,382 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.buildPieces = exports.DEFAULT_PHYSICS = exports.Confetti = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Multipliers on the chosen preset, all defaulting to 1. They tune a preset
+ * rather than replace it, so `preset="pop" physics={{ fallSpeed: 2 }}` is still
+ * recognisably a pop.
+ */
+
+/**
+ * A piece carries its whole trajectory, so every preset is data rather than a
+ * separate code path and all pieces share one `progress` value.
+ *
+ * Velocities and the terminal speed are fractions of the container per unit of
+ * timeline, not pixels, so a mid-burst layout change rescales instead of
+ * stranding pieces off-screen.
+ */
+
+const TAU = Math.PI * 2;
+const DEG = Math.PI / 180;
+const SPEED_FACTOR = {
+  slow: 1.6,
+  normal: 1,
+  fast: 0.6
+};
+const DEFAULT_PHYSICS = exports.DEFAULT_PHYSICS = {
+  velocity: 1,
+  drag: 1,
+  fallSpeed: 1,
+  spread: 0
+};
+
+/**
+ * Shape mixes per preset. Streamers are rare everywhere: they are the largest
+ * piece and the only one that draws a stroked path, so a burst made of them
+ * reads as clutter and costs the most to render.
+ */
+const PRESET_SHAPES = {
+  // Weighted by repetition rather than a weights table — the list IS the mix.
+  pop: ['strip', 'strip', 'strip', 'square', 'circle', 'triangle', 'star', 'streamer'],
+  rain: ['strip', 'strip', 'strip', 'circle', 'square'],
+  fireworks: ['circle', 'circle', 'star', 'star', 'triangle', 'strip']
+};
+const rand = (min, max) => min + Math.random() * (max - min);
+const pick = items => items[Math.floor(Math.random() * items.length)] ?? items[0];
+/** Everything a piece shares regardless of preset. */
+const commonPiece = (seed, index) => ({
+  color: seed.colors[index % seed.colors.length] ?? seed.colors[0],
+  size: seed.baseSize * rand(0.6, 1.4),
+  shape: pick(seed.shapes),
+  rotations: rand(1, 5),
+  rotateDir: Math.random() < 0.5 ? 1 : -1,
+  flutterFreq: rand(2, 5)
+});
+
+/**
+ * Launch outward from one point, mostly upward. The wide angle range is what
+ * makes the burst read as "opening" rather than as a jet.
+ */
+const popPiece = (seed, index) => {
+  const half = seed.physics.spread > 0 ? seed.physics.spread / 2 : 100;
+  const angle = (-90 + rand(-half, half)) * DEG;
+  const speed = rand(1.8, 4.2) * seed.physics.velocity;
+  return {
+    ...commonPiece(seed, index),
+    x0Frac: seed.originXFrac,
+    y0Frac: seed.originYFrac,
+    vxFrac: Math.cos(angle) * speed * 0.7,
+    vyFrac: Math.sin(angle) * speed,
+    drag: rand(5.5, 7.5) * seed.physics.drag,
+    terminalFrac: rand(0.22, 0.44) * seed.physics.fallSpeed,
+    delay: rand(0, 0.05),
+    swayAmp: rand(4, 16),
+    swayFreq: rand(1, 3)
+  };
+};
+
+/** Drift down from above the top edge, spread across the full width. */
+const rainPiece = (seed, index) => ({
+  ...commonPiece(seed, index),
+  x0Frac: Math.random(),
+  y0Frac: -0.05,
+  vxFrac: rand(-0.12, 0.12) * seed.physics.velocity,
+  vyFrac: rand(0.05, 0.25) * seed.physics.velocity,
+  drag: rand(2.5, 4) * seed.physics.drag,
+  terminalFrac: rand(0.95, 1.35) * seed.physics.fallSpeed,
+  delay: rand(0, 0.35),
+  swayAmp: rand(10, 30),
+  swayFreq: rand(1, 3)
+});
+const FIREWORK_BURSTS = 4;
+
+/**
+ * Several small pops at random points, staggered across the first half of the
+ * timeline. Burst centres are seeded per burst so each one reads as one shell.
+ */
+const buildFireworks = (count, seed) => {
+  const perBurst = Math.max(1, Math.round(count / FIREWORK_BURSTS));
+  const half = seed.physics.spread > 0 ? seed.physics.spread / 2 : 180;
+  const pieces = [];
+  for (let b = 0; b < FIREWORK_BURSTS && pieces.length < count; b += 1) {
+    const cx = rand(0.18, 0.82);
+    const cy = rand(0.18, 0.52);
+    const burstDelay = b / FIREWORK_BURSTS * 0.5 + rand(0, 0.06);
+    for (let i = 0; i < perBurst && pieces.length < count; i += 1) {
+      const angle = rand(-half, half) * DEG;
+      const speed = rand(1.4, 3.4) * seed.physics.velocity;
+      pieces.push({
+        ...commonPiece(seed, pieces.length),
+        x0Frac: cx,
+        y0Frac: cy,
+        vxFrac: Math.cos(angle) * speed * 0.7,
+        vyFrac: Math.sin(angle) * speed,
+        drag: rand(6.5, 8.5) * seed.physics.drag,
+        terminalFrac: rand(0.18, 0.38) * seed.physics.fallSpeed,
+        delay: burstDelay,
+        swayAmp: rand(3, 12),
+        swayFreq: rand(1, 3)
+      });
+    }
+  }
+  return pieces;
+};
+
+/**
+ * Exported for tests only, deliberately not re-exported from the barrel.
+ *
+ * The rendered transform cannot verify a preset's shape: the test-time
+ * reanimated mock resolves the timeline straight to its end value, so every
+ * piece reads at t = 1 and per-piece `delay` becomes invisible. Asserting the
+ * trajectory a preset SEEDS is the only way to test it honestly.
+ */
+const buildPieces = (count, preset, seed) => {
+  if (preset === 'fireworks') {
+    return buildFireworks(count, seed);
+  }
+  const make = preset === 'rain' ? rainPiece : popPiece;
+  return Array.from({
+    length: count
+  }, (_, i) => make(seed, i));
+};
+
+/** Width and height of each shape, as multiples of the piece's own size. */
+exports.buildPieces = buildPieces;
+const SHAPE_BOX = {
+  strip: {
+    w: 1,
+    h: 0.45
+  },
+  square: {
+    w: 1,
+    h: 1
+  },
+  circle: {
+    w: 1,
+    h: 1
+  },
+  triangle: {
+    w: 1,
+    h: 1
+  },
+  star: {
+    w: 1.2,
+    h: 1.2
+  },
+  streamer: {
+    w: 3,
+    h: 1.2
+  }
+};
+const TRIANGLE_POINTS = '50,4 96,96 4,96';
+const STAR_POINTS = '50,2 61,36 97,36 68,58 79,94 50,72 21,94 32,58 3,36 39,36';
+/** A half-curled ribbon: two opposing arcs, stroked rather than filled. */
+const STREAMER_PATH = 'M2,50 C20,6 44,94 62,50 S92,6 98,50';
+const ShapeBody = ({
+  shape,
+  color
+}) => {
+  if (shape === 'triangle' || shape === 'star') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Polygon, {
+        points: shape === 'star' ? STAR_POINTS : TRIANGLE_POINTS,
+        fill: color
+      })
+    });
+  }
+  if (shape === 'streamer') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+        d: STREAMER_PATH,
+        stroke: color,
+        strokeWidth: 22,
+        strokeLinecap: "round",
+        fill: "none"
+      })
+    });
+  }
+  return null;
+};
+const ConfettiPiece = ({
+  piece,
+  progress,
+  width,
+  height,
+  fadeOut
+}) => {
+  const animStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const span = 1 - piece.delay;
+    const t = span <= 0 ? 0 : Math.min(1, Math.max(0, (progress.value - piece.delay) / span));
+
+    // Velocity decays as e^(-drag*t), so this integral is the distance already
+    // travelled on the launch impulse. It approaches a limit, which is what
+    // makes a piece rise, slow to a stop and hang before gravity takes over.
+    const spent = (1 - Math.exp(-piece.drag * t)) / piece.drag;
+    const x = piece.x0Frac * width + piece.vxFrac * width * spent;
+    // Terminal velocity rather than free fall: pieces settle to a slow steady
+    // drift instead of accelerating off the bottom of the screen.
+    const y = piece.y0Frac * height + piece.terminalFrac * height * t + (piece.vyFrac - piece.terminalFrac) * height * spent;
+    const sway = Math.sin(t * piece.swayFreq * TAU) * piece.swayAmp;
+    const rotate = piece.rotateDir * piece.rotations * 360 * t;
+    // Paper-flutter on scaleY, never scaleX. A strip turning in the air
+    // foreshortens across its SHORT axis; squashing the long axis instead makes
+    // it contract end-to-end and read as a wriggling worm rather than paper.
+    const flutter = 0.35 + 0.65 * Math.abs(Math.cos(t * piece.flutterFreq * TAU));
+    const opacity = fadeOut ? Math.max(0, 1 - Math.max(0, t - 0.75) / 0.25) : 1;
+    return {
+      opacity,
+      transform: [{
+        translateX: x + sway
+      }, {
+        translateY: y
+      }, {
+        rotate: `${rotate}deg`
+      }, {
+        scaleY: flutter
+      }]
+    };
+  });
+  const box = SHAPE_BOX[piece.shape];
+  const isDrawn = piece.shape === 'triangle' || piece.shape === 'star' || piece.shape === 'streamer';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [{
+      position: 'absolute',
+      width: piece.size * box.w,
+      height: piece.size * box.h,
+      borderRadius: piece.shape === 'circle' ? piece.size * box.h / 2 : 1,
+      // A drawn shape paints itself; only the plain boxes take a fill here.
+      backgroundColor: isDrawn ? 'transparent' : piece.color
+    }, animStyle],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShapeBody, {
+      shape: piece.shape,
+      color: piece.color
+    })
+  });
+};
+const Confetti = exports.Confetti = /*#__PURE__*/(0, _react.forwardRef)(({
+  count = 80,
+  colors,
+  preset = 'pop',
+  shapes,
+  speed = 'normal',
+  physics,
+  origin,
+  duration = 2800,
+  fadeOut = true,
+  autoStart = false,
+  recycle = false,
+  size = 10,
+  onComplete,
+  style,
+  testID
+}, ref) => {
+  const theme = (0, _index2.useTheme)();
+  const reduceMotion = (0, _index.useReducedMotion)();
+  const window = (0, _reactNative.useWindowDimensions)();
+  const [layout, setLayout] = (0, _react.useState)({
+    width: window.width,
+    height: window.height
+  });
+  const [active, setActive] = (0, _react.useState)(false);
+  const [pieces, setPieces] = (0, _react.useState)([]);
+  const palette = (0, _react.useMemo)(() => colors ?? [theme.colors.primary, theme.colors.secondary, theme.colors.success, theme.colors.warning, theme.colors.error, theme.colors.info], [colors, theme.colors]);
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  const effectiveDuration = duration * SPEED_FACTOR[speed];
+  const finish = (0, _react.useCallback)(() => {
+    setActive(false);
+    onComplete?.();
+  }, [onComplete]);
+  const start = (0, _react.useCallback)(() => {
+    if (reduceMotion) {
+      onComplete?.();
+      return;
+    }
+    (0, _reactNativeReanimated.cancelAnimation)(progress);
+    progress.value = 0;
+    setPieces(buildPieces(count, preset, {
+      colors: palette,
+      baseSize: size,
+      originXFrac: origin ? origin.x / Math.max(1, layout.width) : 0.5,
+      originYFrac: origin ? origin.y / Math.max(1, layout.height) : 0.5,
+      physics: {
+        ...DEFAULT_PHYSICS,
+        ...physics
+      },
+      shapes: shapes ?? PRESET_SHAPES[preset]
+    }));
+    setActive(true);
+    const tween = (0, _reactNativeReanimated.withTiming)(1, {
+      duration: effectiveDuration,
+      easing: _reactNativeReanimated.Easing.linear
+    }, finished => {
+      'worklet';
+
+      if (finished && !recycle) {
+        (0, _reactNativeReanimated.runOnJS)(finish)();
+      }
+    });
+    progress.value = recycle ? (0, _reactNativeReanimated.withRepeat)(tween, -1, false) : tween;
+  }, [reduceMotion, progress, effectiveDuration, recycle, finish, onComplete, count, palette, preset, shapes, physics, size, origin, layout.width, layout.height]);
+  const stop = (0, _react.useCallback)(() => {
+    (0, _reactNativeReanimated.cancelAnimation)(progress);
+    setActive(false);
+  }, [progress]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    start,
+    stop
+  }), [start, stop]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: autoStart is a mount-once decision; re-running on a changed `start` identity would re-fire the burst
+  (0, _react.useEffect)(() => {
+    if (autoStart) {
+      start();
+    }
+    return () => (0, _reactNativeReanimated.cancelAnimation)(progress);
+  }, []);
+  const onLayout = (0, _react.useCallback)(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setLayout({
+        width,
+        height
+      });
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    onLayout: onLayout,
+    testID: testID,
+    children: active ? pieces.map((piece, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfettiPiece, {
+      piece: piece,
+      progress: progress,
+      width: layout.width,
+      height: layout.height,
+      fadeOut: fadeOut
+    }, i)) : null
+  });
+});
+Confetti.displayName = 'Confetti';
+var _default = exports.default = Confetti;
+//# sourceMappingURL=Confetti.js.map

package/lib/commonjs/components/Confetti/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Confetti", {
+  enumerable: true,
+  get: function () {
+    return _Confetti.Confetti;
+  }
+});
+var _Confetti = require("./Confetti.js");
+//# sourceMappingURL=index.js.map