feat: course colors (#175)

* feat: course colors

* docs: fix typo in jsdoc

src/stories/components/ConflictsWithWarning.stories.tsx

@@ -1,6 +1,7 @@
 import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting } from '@shared/types/CourseMeeting';
 import Instructor from '@shared/types/Instructor';
+import { getCourseColors } from '@shared/util/colors';
 import type { Meta, StoryObj } from '@storybook/react';
 import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
 
@@ -45,6 +46,7 @@ export const ExampleCourse: Course = new Course({
     uniqueId: 12345,
     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
     scrapedAt: Date.now(),
+    colors: getCourseColors('blue', 500),
 });
 export const ExampleCourse2: Course = new Course({
     courseName: 'PRINCIPLES OF COMPUTER SYSTEMS',
@@ -92,6 +94,7 @@ export const ExampleCourse2: Course = new Course({
     uniqueId: 67890,
     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
     scrapedAt: Date.now(),
+    colors: getCourseColors('yellow', 500),
 });
 
 const meta = {

src/stories/components/List.stories.tsx

@@ -2,7 +2,6 @@ import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
 import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting } from '@shared/types/CourseMeeting';
 import Instructor from '@shared/types/Instructor';
-import type { CourseColors } from '@shared/util/colors';
 import { tailwindColorways } from '@shared/util/storybook';
 import type { Meta, StoryObj } from '@storybook/react';
 import List from '@views/components/common/List/List';
@@ -63,6 +62,7 @@ const generateCourses = (count: number): Course[] => {
             status: Status.WAITLISTED,
             uniqueId: 12345 + i, // Make uniqueId different for each course
             url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+            colors: tailwindColorways[i],
         });
 
         courses.push(course);
@@ -72,10 +72,9 @@ const generateCourses = (count: number): Course[] => {
 };
 
 const exampleCourses = generateCourses(numberOfCourses);
-const generateCourseBlocks = (
-    { course, colors }: { course: Course; colors: CourseColors },
-    dragHandleProps: DraggableProvidedDragHandleProps
-) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors} dragHandleProps={dragHandleProps} />;
+const generateCourseBlocks = (course: Course, dragHandleProps: DraggableProvidedDragHandleProps) => (
+    <PopupCourseBlock key={course.uniqueId} course={course} colors={course.colors} dragHandleProps={dragHandleProps} />
+);
 
 const meta = {
     title: 'Components/Common/List',
@@ -94,9 +93,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        draggables: exampleCourses.map((course, i) => ({ course, colors: tailwindColorways[i] })),
+        draggables: exampleCourses,
         children: generateCourseBlocks,
-        itemKey: (item: { course: Course }) => item.course.uniqueId,
+        itemKey: (item: Course) => item.uniqueId,
         gap: 12,
     },
     render: args => (

src/stories/components/PopupCourseBlock.stories.tsx

@@ -54,6 +54,7 @@ export const ExampleCourse: Course = new Course({
     status: Status.WAITLISTED,
     uniqueId: 12345,
     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+    colors: getCourseColors('cyan', 500),
 });
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export

src/stories/components/calendar/CalendarBottomBar.stories.tsx

@@ -34,6 +34,7 @@ const exampleGovCourse: Course = new Course({
     status: Status.OPEN,
     uniqueId: 12345,
     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+    colors: getCourseColors('red', 500),
 });
 
 const examplePsyCourse: Course = new Course({
@@ -65,6 +66,7 @@ const examplePsyCourse: Course = new Course({
     status: Status.CLOSED,
     uniqueId: 12346,
     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+    colors: getCourseColors('blue', 500),
 });
 
 const meta = {

src/stories/components/calendar/CalendarCourse.stories.tsx

@@ -2,6 +2,7 @@ import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
 import { CourseSchedule } from '@shared/types/CourseSchedule';
 import Instructor from '@shared/types/Instructor';
+import { getCourseColors } from '@shared/util/colors';
 import type { Meta, StoryObj } from '@storybook/react';
 import CalendarCourse from '@views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
 
@@ -15,7 +16,6 @@ const meta = {
     argTypes: {
         course: { control: 'object' },
         meetingIdx: { control: 'number' },
-        color: { control: 'color' },
         rightIcon: { control: 'object' },
     },
 } satisfies Meta<typeof CalendarCourse>;
@@ -56,8 +56,8 @@ export const Default: Story = {
                 season: 'Spring',
             },
             scrapedAt: Date.now(),
+            colors: getCourseColors('emerald', 500),
         }),
         meetingIdx: 0,
-        color: 'red',
     },
 };

src/stories/injected/mocked.ts

@@ -2,6 +2,7 @@ import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
 import Instructor from '@shared/types/Instructor';
 import { UserSchedule } from '@shared/types/UserSchedule';
+import { getCourseColors } from '@shared/util/colors';
 
 export const exampleCourse: Course = new Course({
     courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
@@ -51,6 +52,7 @@ export const exampleCourse: Course = new Course({
     status: Status.OPEN,
     uniqueId: 12345,
     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+    colors: getCourseColors('blue', 500),
 });
 
 export const exampleSchedule: UserSchedule = new UserSchedule({
@@ -104,6 +106,7 @@ export const bevoCourse: Course = new Course({
         season: 'Spring',
     },
     scrapedAt: Date.now(),
+    colors: getCourseColors('green', 500),
 });
 
 export const bevoSchedule: UserSchedule = new UserSchedule({
@@ -158,6 +161,7 @@ export const mikeScottCS314Course: Course = new Course({
         season: 'Spring',
     },
     scrapedAt: Date.now(),
+    colors: getCourseColors('orange', 500),
 });
 
 export const mikeScottCS314Schedule: UserSchedule = new UserSchedule({