@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/Confetti/Confetti.js

@@ -1,377 +1 @@
-"use strict";
-
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
-import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
-import Svg, { Path, Polygon } from 'react-native-svg';
-import { useReducedMotion } from "../../hooks/index.js";
-import { useTheme } from "../../theme/index.js";
-
-/**
- * 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.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const TAU = Math.PI * 2;
-const DEG = Math.PI / 180;
-const SPEED_FACTOR = {
-  slow: 1.6,
-  normal: 1,
-  fast: 0.6
-};
-export const 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.
- */
-export 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. */
-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__*/_jsx(Svg, {
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 100 100",
-      children: /*#__PURE__*/_jsx(Polygon, {
-        points: shape === 'star' ? STAR_POINTS : TRIANGLE_POINTS,
-        fill: color
-      })
-    });
-  }
-  if (shape === 'streamer') {
-    return /*#__PURE__*/_jsx(Svg, {
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 100 100",
-      preserveAspectRatio: "none",
-      children: /*#__PURE__*/_jsx(Path, {
-        d: STREAMER_PATH,
-        stroke: color,
-        strokeWidth: 22,
-        strokeLinecap: "round",
-        fill: "none"
-      })
-    });
-  }
-  return null;
-};
-const ConfettiPiece = ({
-  piece,
-  progress,
-  width,
-  height,
-  fadeOut
-}) => {
-  const animStyle = 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__*/_jsx(Animated.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__*/_jsx(ShapeBody, {
-      shape: piece.shape,
-      color: piece.color
-    })
-  });
-};
-const Confetti = /*#__PURE__*/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 = useTheme();
-  const reduceMotion = useReducedMotion();
-  const window = useWindowDimensions();
-  const [layout, setLayout] = useState({
-    width: window.width,
-    height: window.height
-  });
-  const [active, setActive] = useState(false);
-  const [pieces, setPieces] = useState([]);
-  const palette = 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 = useSharedValue(0);
-  const effectiveDuration = duration * SPEED_FACTOR[speed];
-  const finish = useCallback(() => {
-    setActive(false);
-    onComplete?.();
-  }, [onComplete]);
-  const start = useCallback(() => {
-    if (reduceMotion) {
-      onComplete?.();
-      return;
-    }
-    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 = withTiming(1, {
-      duration: effectiveDuration,
-      easing: Easing.linear
-    }, finished => {
-      'worklet';
-
-      if (finished && !recycle) {
-        runOnJS(finish)();
-      }
-    });
-    progress.value = recycle ? withRepeat(tween, -1, false) : tween;
-  }, [reduceMotion, progress, effectiveDuration, recycle, finish, onComplete, count, palette, preset, shapes, physics, size, origin, layout.width, layout.height]);
-  const stop = useCallback(() => {
-    cancelAnimation(progress);
-    setActive(false);
-  }, [progress]);
-  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
-  useEffect(() => {
-    if (autoStart) {
-      start();
-    }
-    return () => cancelAnimation(progress);
-  }, []);
-  const onLayout = useCallback(e => {
-    const {
-      width,
-      height
-    } = e.nativeEvent.layout;
-    if (width > 0 && height > 0) {
-      setLayout({
-        width,
-        height
-      });
-    }
-  }, []);
-  return /*#__PURE__*/_jsx(View, {
-    style: [StyleSheet.absoluteFill, style],
-    pointerEvents: "none",
-    onLayout: onLayout,
-    testID: testID,
-    children: active ? pieces.map((piece, i) => /*#__PURE__*/_jsx(ConfettiPiece, {
-      piece: piece,
-      progress: progress,
-      width: layout.width,
-      height: layout.height,
-      fadeOut: fadeOut
-    }, i)) : null
-  });
-});
-Confetti.displayName = 'Confetti';
-export { Confetti };
-export default Confetti;
-//# sourceMappingURL=Confetti.js.map
+import r,{forwardRef as e,useCallback as t,useEffect as a,useImperativeHandle as s,useMemo as i,useState as o}from"react";import{StyleSheet as c,useWindowDimensions as h,View as n}from"react-native";import l,{cancelAnimation as p,Easing as d,runOnJS as y,useAnimatedStyle as m,useSharedValue as g,withRepeat as u,withTiming as w}from"react-native-reanimated";import F,{Path as f,Polygon as v}from"react-native-svg";import{useReducedMotion as x}from"../../hooks/index.js";import{useTheme as M}from"../../theme/index.js";import{jsx as S}from"react/jsx-runtime";const b=2*Math.PI,q=Math.PI/180,A={slow:1.6,normal:1,fast:.6};export const DEFAULT_PHYSICS={velocity:1,drag:1,fallSpeed:1,spread:0};const k={pop:["strip","strip","strip","square","circle","triangle","star","streamer"],rain:["strip","strip","strip","circle","square"],fireworks:["circle","circle","star","star","triangle","strip"]},rand=(r,e)=>r+Math.random()*(e-r),commonPiece=(r,e)=>{return{color:r.colors[e%r.colors.length]??r.colors[0],size:r.baseSize*rand(.6,1.4),shape:(t=r.shapes,t[Math.floor(Math.random()*t.length)]??t[0]),rotations:rand(1,5),rotateDir:Math.random()<.5?1:-1,flutterFreq:rand(2,5)};var t},popPiece=(r,e)=>{const t=r.physics.spread>0?r.physics.spread/2:100,a=(-90+rand(-t,t))*q,s=rand(1.8,4.2)*r.physics.velocity;return{...commonPiece(r,e),x0Frac:r.originXFrac,y0Frac:r.originYFrac,vxFrac:Math.cos(a)*s*.7,vyFrac:Math.sin(a)*s,drag:rand(5.5,7.5)*r.physics.drag,terminalFrac:rand(.22,.44)*r.physics.fallSpeed,delay:rand(0,.05),swayAmp:rand(4,16),swayFreq:rand(1,3)}},rainPiece=(r,e)=>({...commonPiece(r,e),x0Frac:Math.random(),y0Frac:-.05,vxFrac:rand(-.12,.12)*r.physics.velocity,vyFrac:rand(.05,.25)*r.physics.velocity,drag:rand(2.5,4)*r.physics.drag,terminalFrac:rand(.95,1.35)*r.physics.fallSpeed,delay:rand(0,.35),swayAmp:rand(10,30),swayFreq:rand(1,3)});export const buildPieces=(r,e,t)=>{if("fireworks"===e)return((r,e)=>{const t=Math.max(1,Math.round(r/4)),a=e.physics.spread>0?e.physics.spread/2:180,s=[];for(let i=0;i<4&&s.length<r;i+=1){const o=rand(.18,.82),c=rand(.18,.52),h=i/4*.5+rand(0,.06);for(let i=0;i<t&&s.length<r;i+=1){const r=rand(-a,a)*q,t=rand(1.4,3.4)*e.physics.velocity;s.push({...commonPiece(e,s.length),x0Frac:o,y0Frac:c,vxFrac:Math.cos(r)*t*.7,vyFrac:Math.sin(r)*t,drag:rand(6.5,8.5)*e.physics.drag,terminalFrac:rand(.18,.38)*e.physics.fallSpeed,delay:h,swayAmp:rand(3,12),swayFreq:rand(1,3)})}}return s})(r,t);const a="rain"===e?rainPiece:popPiece;return Array.from({length:r},(r,e)=>a(t,e))};const z={strip:{w:1,h:.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}},ShapeBody=({shape:r,color:e})=>"triangle"===r||"star"===r?S(F,{width:"100%",height:"100%",viewBox:"0 0 100 100",children:S(v,{points:"star"===r?"50,2 61,36 97,36 68,58 79,94 50,72 21,94 32,58 3,36 39,36":"50,4 96,96 4,96",fill:e})}):"streamer"===r?S(F,{width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none",children:S(f,{d:"M2,50 C20,6 44,94 62,50 S92,6 98,50",stroke:e,strokeWidth:22,strokeLinecap:"round",fill:"none"})}):null,ConfettiPiece=({piece:r,progress:e,width:t,height:a,fadeOut:s})=>{const i=m(()=>{const i=1-r.delay,o=i<=0?0:Math.min(1,Math.max(0,(e.value-r.delay)/i)),c=(1-Math.exp(-r.drag*o))/r.drag,h=r.x0Frac*t+r.vxFrac*t*c,n=r.y0Frac*a+r.terminalFrac*a*o+(r.vyFrac-r.terminalFrac)*a*c,l=Math.sin(o*r.swayFreq*b)*r.swayAmp,p=r.rotateDir*r.rotations*360*o,d=.35+.65*Math.abs(Math.cos(o*r.flutterFreq*b));return{opacity:s?Math.max(0,1-Math.max(0,o-.75)/.25):1,transform:[{translateX:h+l},{translateY:n},{rotate:`${p}deg`},{scaleY:d}]}}),o=z[r.shape],c="triangle"===r.shape||"star"===r.shape||"streamer"===r.shape;return S(l.View,{style:[{position:"absolute",width:r.size*o.w,height:r.size*o.h,borderRadius:"circle"===r.shape?r.size*o.h/2:1,backgroundColor:c?"transparent":r.color},i],children:S(ShapeBody,{shape:r.shape,color:r.color})})},C=e(({count:r=80,colors:e,preset:l="pop",shapes:m,speed:F="normal",physics:f,origin:v,duration:b=2800,fadeOut:q=!0,autoStart:z=!1,recycle:C=!1,size:D=10,onComplete:I,style:P,testID:Y},j)=>{const E=M(),L=x(),O=h(),[X,B]=o({width:O.width,height:O.height}),[H,R]=o(!1),[T,U]=o([]),_=i(()=>e??[E.colors.primary,E.colors.secondary,E.colors.success,E.colors.warning,E.colors.error,E.colors.info],[e,E.colors]),N=g(0),V=b*A[F],W=t(()=>{R(!1),I?.()},[I]),$=t(()=>{if(L)return void I?.();p(N),N.value=0,U(buildPieces(r,l,{colors:_,baseSize:D,originXFrac:v?v.x/Math.max(1,X.width):.5,originYFrac:v?v.y/Math.max(1,X.height):.5,physics:{...DEFAULT_PHYSICS,...f},shapes:m??k[l]})),R(!0);const e=w(1,{duration:V,easing:d.linear},r=>{r&&!C&&y(W)()});N.value=C?u(e,-1,!1):e},[L,N,V,C,W,I,r,_,l,m,f,D,v,X.width,X.height]),G=t(()=>{p(N),R(!1)},[N]);s(j,()=>({start:$,stop:G}),[$,G]),a(()=>(z&&$(),()=>p(N)),[]);const J=t(r=>{const{width:e,height:t}=r.nativeEvent.layout;e>0&&t>0&&B({width:e,height:t})},[]);return S(n,{style:[c.absoluteFill,P],pointerEvents:"none",onLayout:J,testID:Y,children:H?T.map((r,e)=>S(ConfettiPiece,{piece:r,progress:N,width:X.width,height:X.height,fadeOut:q},e)):null})});C.displayName="Confetti";export{C as Confetti};export default C;

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

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