✨ Confetti (#1206)

* ✨ Confetti component and hook

Author: Rotshrek

src/atoms/hooks/index.ts

@@ -17,3 +17,4 @@ export { useThemeProvider } from 'src/providers/ThemeProvider/ThemeProvider';
 export { usePrefetchRichTextImages } from './usePrefetchRichTextImages';
 export { useFaqsInApplication } from './useFaqsInApplication';
 export { useToasts } from 'src/providers/ToastProvider/ToastProvider';
+export { useConfetti } from 'src/providers/ConfettiProvider/ConfettiProvider';

src/molecules/Confetti/Confetti.constants.ts

@@ -0,0 +1,32 @@
+import { ParticleShape } from './Confetti.types';
+import { colors } from 'src/atoms';
+
+export const CONFETTI_DEFAULT_COLORS = [
+  colors.dataviz.lightpurple.darker,
+  colors.dataviz.lightblue.darker,
+  colors.dataviz.lightgreen.default,
+  colors.interactive.warning__resting.rgba,
+  colors.interactive.danger__resting.rgba,
+  colors.interactive.success__resting.rgba,
+];
+
+export const CONFETTI_DEFAULT_SHAPES: ParticleShape[] = [
+  'star',
+  'circle',
+  'square',
+  'spiral',
+];
+
+export const STAR_POINTS = 5;
+export const DEG_TO_RAD = Math.PI / 180;
+export const FRICTION = 0.9;
+export const GRAVITY = 0.5;
+
+export const IMPERATIVE_STYLING: React.CSSProperties = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100vw',
+  height: '100vh',
+  pointerEvents: 'none',
+};

src/molecules/Confetti/Confetti.stories.tsx

@@ -0,0 +1,121 @@
+import { Typography } from '@equinor/eds-core-react';
+import { Meta, StoryFn } from '@storybook/react-vite';
+
+import { Button } from '../Button/Button';
+import { SeasonalColorsMap } from './utils/seasonalColors';
+import { Confetti } from './Confetti';
+import {
+  CONFETTI_DEFAULT_COLORS,
+  CONFETTI_DEFAULT_SHAPES,
+} from './Confetti.constants';
+import { ConfettiProps } from './Confetti.types';
+import { spacings } from 'src/atoms';
+import {
+  ConfettiProvider,
+  useConfetti,
+} from 'src/providers/ConfettiProvider/ConfettiProvider';
+
+import styled from 'styled-components';
+
+const meta: Meta<typeof Confetti> = {
+  title: 'Molecules/Confetti',
+  component: Confetti,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <ConfettiProvider>
+        <Story />
+      </ConfettiProvider>
+    ),
+  ],
+  argTypes: {
+    mode: {
+      control: { type: 'radio' },
+      options: ['shower', 'boom'],
+    },
+    shapes: {
+      control: { type: 'check' },
+      options: CONFETTI_DEFAULT_SHAPES,
+    },
+    colors: {
+      control: { type: 'check' },
+      options: CONFETTI_DEFAULT_COLORS,
+    },
+    effectCount: {
+      if: { arg: 'mode', eq: 'boom' },
+    },
+    duration: {
+      if: { arg: 'mode', eq: 'shower' },
+      control: { type: 'number' },
+    },
+  },
+  args: {
+    shapeSize: 12,
+    mode: 'boom',
+    shapes: CONFETTI_DEFAULT_SHAPES,
+    colors: CONFETTI_DEFAULT_COLORS,
+    effectCount: Infinity,
+  },
+};
+
+export default meta;
+
+const Container = styled.div`
+  width: 980px;
+  height: 480px;
+  position: relative;
+  overflow: hidden;
+`;
+
+export const Boom: StoryFn = (props: ConfettiProps) => {
+  return (
+    <Container>
+      <Confetti {...props} mode="boom" />
+    </Container>
+  );
+};
+
+export const Shower: StoryFn = (props: ConfettiProps) => {
+  return (
+    <Container>
+      <Confetti {...props} mode="shower" />
+    </Container>
+  );
+};
+
+const ButtonTriggeredContainer = styled.div`
+  width: 100%;
+  padding: ${spacings.medium};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${spacings.medium};
+`;
+
+export const TriggerConfetti: StoryFn = () => {
+  const { boom, shower } = useConfetti();
+
+  return (
+    <ButtonTriggeredContainer>
+      <Typography>
+        Click the buttons below to trigger the boom and shower confetti effects
+      </Typography>
+      <div style={{ display: 'flex', gap: spacings.medium }}>
+        <Button onClick={() => boom()}>Boom 🎉</Button>
+        <Button onClick={() => shower()}>Shower 🌧️</Button>
+      </div>
+    </ButtonTriggeredContainer>
+  );
+};
+
+export const SeasonalColorsExample: StoryFn = () => {
+  const christmasColors = SeasonalColorsMap['christmas'].colors;
+
+  return (
+    <Container>
+      <Confetti mode="shower" colors={christmasColors} />
+    </Container>
+  );
+};

src/molecules/Confetti/Confetti.styles.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Canvas = styled.canvas`
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+`;

src/molecules/Confetti/Confetti.test.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+
+import { faker } from '@faker-js/faker';
+
+import { Confetti } from './Confetti';
+import { useConfetti } from 'src/atoms';
+import { ConfettiProvider } from 'src/providers';
+import { render, screen } from 'src/tests/browsertest-utils';
+
+test('Renders confetti canvas', () => {
+  render(<Confetti mode="shower" duration={1000} />);
+  const canvas = screen.getByTestId('canvas-confetti');
+
+  expect(canvas).toBeInTheDocument();
+});
+
+test('renders confetti on boom', () => {
+  const Test = () => {
+    const { boom } = useConfetti();
+    useEffect(() => {
+      boom();
+    }, [boom]);
+    return null;
+  };
+
+  render(
+    <ConfettiProvider>
+      <Test />
+    </ConfettiProvider>
+  );
+
+  expect(screen.getByTestId('canvas-confetti')).toBeInTheDocument();
+});
+
+test("Adds styling to canvas when 'style' prop is provided", () => {
+  const customStyle = { border: '2px solid red' };
+  render(<Confetti style={customStyle} />);
+  const canvas = screen.getByTestId('canvas-confetti');
+
+  expect(canvas).toHaveStyle('border: 2px solid red');
+});
+
+test('Adds className to canvas when provided', () => {
+  const customClassName = 'my-custom-confetti';
+  render(<Confetti className={customClassName} />);
+  const canvas = screen.getByTestId('canvas-confetti');
+
+  expect(canvas).toHaveClass(customClassName);
+});
+
+test('Throws error on negative duration', async () => {
+  const duration = faker.number.int({ min: Number.MIN_SAFE_INTEGER, max: 0 });
+  expect(() => render(<Confetti mode="shower" duration={duration} />)).toThrow(
+    'Duration must be a non-negative number'
+  );
+});
+
+test('Throws error on effect count under 1', async () => {
+  const effectCount = faker.number.int({
+    min: Number.MIN_SAFE_INTEGER,
+    max: 0,
+  });
+  expect(() =>
+    render(<Confetti mode="boom" effectCount={effectCount} />)
+  ).toThrow('Effect count must be at least 1');
+});