Merge pull request #30100 from storybookjs/norbert/fix-confetti-bundling-alternative

Addon Onboarding: Use @neoconfetti/react as alternative

Author: yannbf

code/addons/onboarding/package.json

@@ -45,12 +45,12 @@
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "devDependencies": {
+    "@neoconfetti/react": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@storybook/icons": "^1.2.12",
     "@storybook/react": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",
-    "react-confetti-boom": "^1.1.0",
     "react-dom": "^18.2.0",
     "react-joyride": "^2.8.2",
     "react-use-measure": "^2.1.1",

code/addons/onboarding/src/components/Confetti/Confetti.tsx

@@ -1,46 +1,34 @@
-import React, { type ComponentProps, useEffect } from 'react';
-import { useState } from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { styled } from 'storybook/internal/theming';
 
-import ReactConfetti from 'react-confetti-boom';
+import { Confetti as ReactConfetti } from '@neoconfetti/react';
 
 const Wrapper = styled.div({
   zIndex: 9999,
   position: 'fixed',
   top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
+  left: '50%',
+  width: '50%',
+  height: '100%',
 });
 
-export function Confetti({
+export const Confetti = React.memo(function Confetti({
   timeToFade = 5000,
   colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'],
   ...confettiProps
 }: ComponentProps<typeof ReactConfetti> & { timeToFade?: number }) {
-  const [particleCount, setParticleCount] = useState(42);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setParticleCount(0);
-    }, timeToFade);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [timeToFade]);
-
   return (
     <Wrapper>
       <ReactConfetti
-        mode="fall"
         colors={colors}
-        shapeSize={14}
-        particleCount={particleCount}
-        fadeOutHeight={10}
+        particleCount={200}
+        duration={5000}
+        stageHeight={window.innerHeight}
+        stageWidth={window.innerWidth}
+        destroyAfterDone
         {...confettiProps}
       />
     </Wrapper>
   );
-}
+});

code/yarn.lock

@@ -4118,6 +4118,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@neoconfetti/react@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@neoconfetti/react@npm:1.0.0"
+  checksum: 10c0/dfa487965b69f88b39562ccd910114cd68b00a90c7eb79cfb1a483c7ac717b720f9f095e5aea13cef8a9b9bea05533d380ddff5e44d3bc3f7dc4d5c66716765c
+  languageName: node
+  linkType: hard
+
 "@next/env@npm:15.0.3, @next/env@npm:^15.0.3":
   version: 15.0.3
   resolution: "@next/env@npm:15.0.3"
@@ -5749,12 +5756,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-onboarding@workspace:addons/onboarding"
   dependencies:
+    "@neoconfetti/react": "npm:^1.0.0"
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@storybook/icons": "npm:^1.2.12"
     "@storybook/react": "workspace:*"
     framer-motion: "npm:^11.0.3"
     react: "npm:^18.2.0"
-    react-confetti-boom: "npm:^1.1.0"
     react-dom: "npm:^18.2.0"
     react-joyride: "npm:^2.8.2"
     react-use-measure: "npm:^2.1.1"
@@ -24227,16 +24234,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-confetti-boom@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "react-confetti-boom@npm:1.1.0"
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10c0/76faf3e5cc3284b7dc0297ab7189ff92bbf74379a9478096bc8c8d7b16a82badea74c2e57f7313cd2a55ccf3c8dc50d51165fbf00c9fee5b9ed241369812d686
-  languageName: node
-  linkType: hard
-
 "react-confetti@npm:^6.1.0":
   version: 6.1.0
   resolution: "react-confetti@npm:6.1.0"