feat(ui): course color picker (#382)

* fix: update CourseCellColorPicker.tsx background to white

* feat: add color picker to CalendarCourseCell component

* feat: add color picker functionality to update course colors

* fix: type issues with storybook components

* feat: add useColorPicker hook, isValidHexColor and updateCourseColors utilities

* refactor: color picker logic and UI components

* refactor: update useFlattenedCourseSchedule hook to include courseID property

* refactor: update storybook calendar components with updated props

* refactor: update color picker ui logic to account for position of cell

* fix: revert back to error handling for invalid rgb

* refactor: update jsdocs

* refactor: integrate ColorPickerContext into Calendar components and update props

* refactor: integrate ColorPickerContext into Calendar components and update related props

* refactor: change JSDocs comments and remove unused color inversion state

* refactor: update story components

* feat: add functionality for selecting secondary course colors

* refactor: enhance HexColorEditor to dynamically adjust tag icon color based on preview color

* refactor: simplify JSDoc comment in useColorPicker hook

* fix: revert Button component

* refactor: update CalendarCourseCell component positioning and styling

* fix: correct types in color.ts

* feat: add getDarkerShade function to compute darker shades of hex colors

* feat: add shadow to color picker button

* fix: update button size in ColorPatch component

* feat: implement debounced input for hex color editor and add useDebounce hook

* chore: utilize the logical and && operator instead of the ternary operator

* fix: imports and palette icon

* refactor: remove unused import

* fix: bug when course add fails with custom colors

* chore: run lint

* chore: run check-types

* feat: add HSL color type and conversion functions

* refactor: rename colorway to theme

* fix: hide color picker on screenshot

* fix: undo important syntax

* refactor: rename SomeFunction to DebouncedCallback

* refactor: remove inner function

* refactor: update return type to DebouncedCallback

* fix: adjust sizes for hash and palette button

* feat: create tests for hexToHSL and isValidHexColor

* refactor: update parameter type to use HexColor

* fix: increase size of palette button

* fix: update dependency array for hex code debounce

* fix: change colorPickerRef element ref

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/contexts/ColorPickerContext.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import React, { createContext } from 'react';
+
+import { type ColorPickerInterface, useColorPicker } from '../hooks/useColorPicker';
+
+const defaultContext: ColorPickerInterface = {
+    selectedColor: null,
+    setSelectedColor: () => {},
+    handleCloseColorPicker: () => {},
+    setSelectedCourse: () => {},
+    isSelectedCourse: () => false,
+    isSelectedBlock: () => false,
+};
+
+const ColorPickerContext = createContext<ColorPickerInterface>(defaultContext);
+
+interface ColorPickerProviderProps {
+    children: ReactNode;
+}
+
+/**
+ * Provides the color picker context to its children.
+ *
+ * @param props - The properties for the ColorPickerProvider component.
+ * @param children - The child components that will have access to the color picker context.
+ * @returns The provider component that supplies the color picker context to its children.
+ */
+export const ColorPickerProvider = ({ children }: ColorPickerProviderProps) => {
+    const colorPicker = useColorPicker();
+
+    return <ColorPickerContext.Provider value={colorPicker}>{children}</ColorPickerContext.Provider>;
+};
+
+/**
+ * Custom hook to use the ColorPicker context.
+ * Throws an error if used outside of a ColorPickerProvider.
+ * @returns The color picker context value.
+ */
+export const useColorPickerContext = () => {
+    const context = React.useContext(ColorPickerContext);
+    if (context === undefined) {
+        throw new Error('useColorPickerContext must be used within a ColorPickerProvider');
+    }
+    return context;
+};