feat: course color generation (#179)

* feat: course color generation

* feat: add proper TS for hex colors

* refactor: fix oklab and improve contrast ratios

* fix: update HexColor type

* refactor: update color switch point

* refactor: color-related functions and types

* fix: imports and TS issues

* fix: imports and TS issues

* chore: add no-restricted-syntax ForInStatement

* chore(docs): add jsdoc

---------

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

src/views/components/common/Button/Button.tsx

@@ -1,4 +1,4 @@
-import type { ThemeColor } from '@shared/util/themeColors';
+import type { ThemeColor } from '@shared/types/ThemeColors';
 import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';

src/views/components/common/Dialog/Dialog.tsx

@@ -6,12 +6,15 @@ import React, { Fragment } from 'react';
 
 import ExtensionRoot from '../ExtensionRoot/ExtensionRoot';
 
-export interface _DialogProps {
+interface _DialogProps {
     className?: string;
     title?: JSX.Element;
     description?: JSX.Element;
 }
 
+/**
+ * Props for the Dialog component.
+ */
 export type DialogProps = _DialogProps & Omit<TransitionRootProps<typeof HDialog>, 'children'>;
 
 /**

src/views/components/common/List/List.tsx

@@ -69,21 +69,21 @@ function Item<T>(props: {
  * @example
  * <List draggableElements={elements} />
  */
-function List<T>(props: ListProps<T>): JSX.Element {
-    const [items, setItems] = useState(wrap(props.draggables, props.itemKey));
+function List<T>({ draggables, itemKey, children, onReordered, gap }: ListProps<T>): JSX.Element {
+    const [items, setItems] = useState(wrap(draggables, itemKey));
 
-    const transformFunction = props.children;
+    const transformFunction = children;
 
     useEffect(() => {
         // check if the draggables content has *actually* changed
         if (
-            props.draggables.length === items.length &&
-            props.draggables.every((element, index) => props.itemKey(element) === items[index].id)
+            draggables.length === items.length &&
+            draggables.every((element, index) => itemKey(element) === items[index].id)
         ) {
             return;
         }
-        setItems(wrap(props.draggables, props.itemKey));
-    }, [props.draggables]);
+        setItems(wrap(draggables, itemKey));
+    }, [draggables, itemKey, items]);
 
     const onDragEnd: OnDragEndResponder = useCallback(
         result => {
@@ -94,9 +94,9 @@ function List<T>(props: ListProps<T>): JSX.Element {
             const reordered = reorder(items, result.source.index, result.destination.index);
 
             setItems(reordered);
-            props.onReordered(reordered.map(item => item.content));
+            onReordered(reordered.map(item => item.content));
         },
-        [items]
+        [items, onReordered]
     );
 
     return (
@@ -131,12 +131,8 @@ function List<T>(props: ListProps<T>): JSX.Element {
                         );
                     }}
                 >
-                    {(provided, snapshot) => (
-                        <div
-                            {...provided.droppableProps}
-                            ref={provided.innerRef}
-                            style={{ marginBottom: `-${props.gap}px` }}
-                        >
+                    {provided => (
+                        <div {...provided.droppableProps} ref={provided.innerRef} style={{ marginBottom: `-${gap}px` }}>
                             {items.map((item, index) => (
                                 <Draggable key={item.id} draggableId={item.id.toString()} index={index}>
                                     {draggableProvided => (
@@ -146,7 +142,7 @@ function List<T>(props: ListProps<T>): JSX.Element {
                                             style={{
                                                 ...draggableProvided.draggableProps.style,
                                                 // if last item, don't add margin
-                                                marginBottom: `${props.gap}px`,
+                                                marginBottom: `${gap}px`,
                                             }}
                                         >
                                             {transformFunction(item.content, draggableProvided.dragHandleProps)}

src/views/components/common/LogoIcon.tsx

@@ -2,6 +2,11 @@ import clsx from 'clsx';
 import type { SVGProps } from 'react';
 import React from 'react';
 
+/**
+ * Renders the logo icon.
+ * @param {SVGProps<SVGSVGElement>} props - The SVG props.
+ * @returns {JSX.Element} The rendered logo icon.
+ */
 export function LogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
     return (
         <svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
@@ -13,6 +18,12 @@ export function LogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
     );
 }
 
+/**
+ * Renders the small logo.
+ * @param {Object} props - The component props.
+ * @param {string} props.className - The class name for the logo container.
+ * @returns {JSX.Element} The rendered small logo.
+ */
 export function SmallLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
@@ -25,6 +36,12 @@ export function SmallLogo({ className }: { className?: string }): JSX.Element {
     );
 }
 
+/**
+ * Renders the large logo.
+ * @param {Object} props - The component props.
+ * @param {string} props.className - The class name for the logo container.
+ * @returns {JSX.Element} The rendered large logo.
+ */
 export function LargeLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>

src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx

@@ -1,7 +1,7 @@
 import { background } from '@shared/messages';
 import type { Course } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
-import type { CourseColors } from '@shared/util/colors';
+import type { CourseColors } from '@shared/types/ThemeColors';
 import { pickFontColor } from '@shared/util/colors';
 import { StatusIcon } from '@shared/util/icons';
 import Text from '@views/components/common/Text/Text';
@@ -31,7 +31,7 @@ export default function PopupCourseBlock({
     colors,
     dragHandleProps,
 }: PopupCourseBlockProps): JSX.Element {
-    // whiteText based on secondaryColor
+    // text-white or text-black based on secondaryColor
     const fontColor = pickFontColor(colors.primaryColor);
     const formattedUniqueId = course.uniqueId.toString().padStart(5, '0');
 

src/views/components/common/ScheduleListItem/ScheduleListItem.tsx

@@ -28,15 +28,16 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
     const [editorValue, setEditorValue] = useState(schedule.name);
 
     const editorRef = React.useRef<HTMLInputElement>(null);
-    const { current: editor } = editorRef;
     useEffect(() => {
+        const editor = editorRef.current;
+
         setEditorValue(schedule.name);
 
         if (isEditing && editor) {
             editor.focus();
             editor.setSelectionRange(0, editor.value.length);
         }
-    }, [isEditing, schedule.name, editor]);
+    }, [isEditing, schedule.name, editorRef]);
 
     const isActive = useMemo(() => activeSchedule.id === schedule.id, [activeSchedule, schedule]);