diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 0a92fbc89396..4b17b10810dd 100644 --- a/code/addons/onboarding/package.json +++ b/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", diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx index 90604bd1ce05..cebc40454909 100644 --- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx +++ b/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 & { timeToFade?: number }) { - const [particleCount, setParticleCount] = useState(42); - - useEffect(() => { - const timeout = setTimeout(() => { - setParticleCount(0); - }, timeToFade); - - return () => { - clearTimeout(timeout); - }; - }, [timeToFade]); - return ( ); -} +}); diff --git a/code/yarn.lock b/code/yarn.lock index 5c1f23864a42..13e798756fd5 100644 --- a/code/yarn.lock +++ b/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"