feat: Side sheet (#1232)

* feat: Side sheet

* fix: Bad import

* test: Adding tests for SideSheet

* fix: Copilot feedback

* fix: Stateful SideSheet test

* fix: Required -> NonNullable

* fix: SideSheet modal with scrim test

* test: Fix test coverage on Confetti component when there is a seasonal event

* docs: Update JSDoc for getSeasonalColors

* Update src/molecules/Confetti/Confetti.utils.jsdom.test.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: mariush2

src/molecules/Confetti/Confetti.tsx

@@ -1,13 +1,10 @@
 import { FC, useCallback, useEffect, useRef } from 'react';
 
 import { createConfetti } from './utils/createConfetti';
-import { getSeasonalColors } from './utils/seasonalColors';
-import {
-  CONFETTI_DEFAULT_COLORS,
-  CONFETTI_DEFAULT_SHAPES,
-} from './Confetti.constants';
+import { CONFETTI_DEFAULT_SHAPES } from './Confetti.constants';
 import { Canvas } from './Confetti.styles';
 import { ConfettiProps, Particle } from './Confetti.types';
+import { getDefaultColors } from 'src/molecules/Confetti/utils/getDefaultColors';
 
 /**
  * @param mode 'boom' | 'shower' - Confetti effect mode.
@@ -31,9 +28,7 @@ export const Confetti: FC<ConfettiProps> = (props) => {
   } = props;
 
   const colors =
-    props.colors && props.colors.length
-      ? props.colors
-      : getSeasonalColors() || CONFETTI_DEFAULT_COLORS;
+    props.colors && props.colors.length ? props.colors : getDefaultColors();
   const shapes =
     props.shapes && props.shapes.length
       ? props.shapes

src/molecules/Confetti/Confetti.utils.jsdom.test.tsx

@@ -1,4 +1,5 @@
 import { createParticle } from './utils/createParticle';
+import { getDefaultColors } from './utils/getDefaultColors';
 import { getSeasonalEvent } from './utils/getSeasonalEvent';
 import { getSeasonalColors, SeasonalColorsMap } from './utils/seasonalColors';
 import {
@@ -7,6 +8,9 @@ import {
   randomNumBetween,
   replaceOpacity,
 } from './utils/utils';
+import { CONFETTI_DEFAULT_COLORS } from './Confetti.constants';
+
+import { test } from 'vitest';
 
 test('randomNumBetween generates numbers within the specified range', () => {
   const min = 5;
@@ -156,3 +160,9 @@ test('getSeasonalColors returns easter colors 2 days before Easter Sunday', () =
 
   expect(colors).toEqual(easterColors);
 });
+
+test("getDefaultColors returns default colors if it isn't a special day", () => {
+  expect(getDefaultColors(new Date('2024-01-15'))).toEqual(
+    CONFETTI_DEFAULT_COLORS
+  );
+});

src/molecules/Confetti/utils/getDefaultColors.ts

@@ -0,0 +1,10 @@
+import { CONFETTI_DEFAULT_COLORS } from '../Confetti.constants';
+import { getSeasonalColors } from './seasonalColors';
+
+export function getDefaultColors(date = new Date()) {
+  const seasonalColors = getSeasonalColors(date);
+  if (seasonalColors) {
+    return seasonalColors;
+  }
+  return CONFETTI_DEFAULT_COLORS;
+}

src/molecules/Confetti/utils/seasonalColors.ts

@@ -93,10 +93,9 @@ export const SeasonalColorsMap: Record<SeasonalEvent, SeasonalPalette> = {
 
 /**
  * Returns a color palette for a given date
- * Defaults to today.
  * Returns null if no seasonal event is detected.
  */
-export function getSeasonalColors(date = new Date()): string[] | null {
+export function getSeasonalColors(date: Date): string[] | null {
   const event = getSeasonalEvent(date);
   return event ? SeasonalColorsMap[event].colors : null;
 }