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/hooks/useColorPicker.ts

@@ -0,0 +1,111 @@
+import type { HexColor } from '@shared/types/Color';
+import type { ThemeColor } from '@shared/types/ThemeColors';
+import { isValidHexColor } from '@shared/util/colors';
+import { useCallback, useEffect, useState } from 'react';
+
+import { updateCourseColors } from './useSchedules';
+
+/**
+ * Interface for the color picker functionality.
+ */
+export interface ColorPickerInterface {
+    /**
+     * The currently selected color.
+     */
+    selectedColor: ThemeColor | null;
+
+    /**
+     * Function to set the selected color.
+     */
+    setSelectedColor: React.Dispatch<React.SetStateAction<ThemeColor | null>>;
+
+    /**
+     * Function to close the color picker.
+     */
+    handleCloseColorPicker: () => void;
+
+    /**
+     * Function to set the selected course.
+     *
+     * @param courseID - The ID of the course.
+     * @param dayIndex - The index of the day.
+     * @param startIndex - The start index of the course.
+     */
+    setSelectedCourse: (courseID: number, dayIndex: number, startIndex: number) => void;
+
+    /**
+     * Function to check if a course is selected.
+     *
+     * @param courseID - The ID of the course.
+     * @returns True if the course is selected, false otherwise.
+     */
+    isSelectedCourse: (courseID: number) => boolean;
+
+    /**
+     * Function to check if a course block is selected.
+     *
+     * @param courseID - The ID of the course.
+     * @param dayIndex - The index of the day.
+     * @param startIndex - The start index of the course.
+     * @returns True if the block is selected, false otherwise.
+     */
+    isSelectedBlock: (courseID: number, dayIndex: number, startIndex: number) => boolean;
+}
+
+/**
+ * Custom hook for managing color picker state and functionality.
+ *
+ * @returns The color picker interface with state and functions.
+ */
+export function useColorPicker(): ColorPickerInterface {
+    const [selectedColor, setSelectedColor] = useState<ThemeColor | null>(null);
+    const [selectedBlock, setSelectedBlock] = useState<{
+        courseID: number | null;
+        dayIndex: number | null;
+        startIndex: number | null;
+    }>({
+        courseID: null,
+        dayIndex: null,
+        startIndex: null,
+    });
+
+    const updateSelectedCourseColor = useCallback(async () => {
+        if (selectedBlock.courseID && selectedColor) {
+            if (isValidHexColor(selectedColor as HexColor)) {
+                await updateCourseColors(selectedBlock.courseID, `#${selectedColor.replace('#', '')}`);
+            }
+        }
+    }, [selectedBlock.courseID, selectedColor]);
+
+    const setSelectedCourse = (courseID: number, dayIndex: number, startIndex: number) => {
+        setSelectedBlock({ courseID, dayIndex, startIndex });
+    };
+
+    const handleCloseColorPicker = () => {
+        setSelectedColor(null);
+        setSelectedBlock({ courseID: null, dayIndex: null, startIndex: null });
+    };
+
+    const isSelectedCourse = (courseID: number) => selectedBlock.courseID === courseID;
+    const isSelectedBlock = (courseID: number, dayIndex: number, startIndex: number) =>
+        selectedBlock.courseID === courseID &&
+        selectedBlock.dayIndex === dayIndex &&
+        selectedBlock.startIndex === startIndex;
+
+    useEffect(() => {
+        if (selectedBlock.courseID && selectedColor) {
+            (async () => {
+                await updateSelectedCourseColor();
+            })();
+        }
+    }, [selectedBlock.courseID, selectedColor, updateSelectedCourseColor]);
+
+    return {
+        selectedColor,
+        setSelectedColor,
+        handleCloseColorPicker,
+        setSelectedCourse,
+        isSelectedBlock,
+        isSelectedCourse,
+    };
+}

src/views/hooks/useDebounce.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+type Timer = ReturnType<typeof setTimeout>;
+type DebouncedCallback<T extends unknown[]> = (...args: T) => void;
+
+/**
+ * Custom hook to debounce a function call.
+ *
+ * @param func - The original, non-debounced function.
+ * @param delay - The delay (in ms) for the function to return.
+ * @returns The debounced function, which will run only if the debounced function has not been called in the last (delay) ms.
+ */
+export function useDebounce<T extends unknown[]>(
+    func: DebouncedCallback<T>,
+    delay: number = 1000
+): DebouncedCallback<T> {
+    const timer = useRef<Timer>();
+
+    useEffect(
+        () => () => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+        },
+        []
+    );
+
+    const debouncedFunction = useCallback(
+        (...args: T) => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+            timer.current = setTimeout(() => {
+                func(...args);
+            }, delay);
+        },
+        [func, delay]
+    );
+
+    return debouncedFunction;
+}

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -126,7 +126,12 @@ function processAsyncCourses({
             componentProps: {
                 courseDeptAndInstr,
                 status,
-                colors: course.colors,
+                blockData: {
+                    calendarGridPoint: { dayIndex: -1, startIndex: -1, endIndex: -1 },
+                    componentProps: { courseDeptAndInstr, status, blockData: {} as CalendarGridCourse },
+                    course,
+                    async: true,
+                },
             },
             course,
             async: true,
@@ -170,7 +175,7 @@ function processInPersonMeetings(
             courseDeptAndInstr,
             timeAndLocation,
             status,
-            colors: course.colors,
+            blockData: {} as CalendarGridCourse,
         },
         course,
         async: false,

src/views/hooks/useSchedules.ts

@@ -1,5 +1,7 @@
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import type { HexColor } from '@shared/types/Color';
 import { UserSchedule } from '@shared/types/UserSchedule';
+import { getColorwayFromColor, getCourseColors, getDarkerShade } from '@shared/util/colors';
 import { useEffect, useState } from 'react';
 
 let schedulesCache: UserSchedule[] = [];
@@ -89,7 +91,6 @@ export async function replaceSchedule(oldSchedule: UserSchedule, newSchedule: Us
     oldIndex = oldIndex !== -1 ? oldIndex : 0;
     schedules[oldIndex] = newSchedule;
     await UserScheduleStore.set('schedules', schedules);
-    console.log('schedule replaced');
 }
 
 /**
@@ -115,3 +116,46 @@ export async function switchScheduleByName(name: string): Promise<void> {
     const activeIndex = schedules.findIndex(s => s.name === name);
     await UserScheduleStore.set('activeIndex', activeIndex);
 }
+
+/**
+ * Updates the color of a course in the active schedule.
+ *
+ * @param courseID - The ID of the course to update.
+ * @param color - The new color to set for the course.
+ * @throws If the course with the given ID is not found.
+ */
+export async function updateCourseColors(courseID: number, primaryColor: HexColor) {
+    const activeSchedule = getActiveSchedule();
+    const updatedCourseIndex = activeSchedule.courses.findIndex(c => c.uniqueId === courseID);
+
+    if (updatedCourseIndex === -1) {
+        throw new Error(`Course with ID ${courseID} not found`);
+    }
+
+    const newSchedule = new UserSchedule(activeSchedule);
+    const updatedCourse = newSchedule.courses[updatedCourseIndex];
+
+    if (!updatedCourse) {
+        throw new Error(`Course with ID ${courseID} not found`);
+    }
+
+    let secondaryColor: HexColor;
+    try {
+        const { colorway: primaryColorWay, index: primaryIndex } = getColorwayFromColor(primaryColor);
+        const { secondaryColor: colorFromWay } = getCourseColors(primaryColorWay, primaryIndex, 400);
+
+        if (!colorFromWay) {
+            throw new Error('Secondary color not found');
+        }
+
+        secondaryColor = colorFromWay;
+    } catch (e) {
+        secondaryColor = getDarkerShade(primaryColor, 80);
+    }
+
+    updatedCourse.colors.primaryColor = primaryColor;
+    updatedCourse.colors.secondaryColor = secondaryColor;
+    newSchedule.courses[updatedCourseIndex] = updatedCourse;
+
+    await replaceSchedule(activeSchedule, newSchedule);
+}