fix: calendar course cell colors

src/stories/components/CalendarCourseCell.stories.tsx

@@ -1,10 +1,9 @@
+import { Course, Status } from '@shared/types/Course';
+import { getCourseColors } from '@shared/util/colors';
 import { Meta, StoryObj } from '@storybook/react';
+import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell';
 import React from 'react';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
-import { CourseSchedule } from 'src/shared/types/CourseSchedule';
-import Instructor from 'src/shared/types/Instructor';
-import CalendarCourseCell from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
+import { exampleCourse } from './PopupCourseBlock.stories';
 
 const meta = {
     title: 'Components/Common/CalendarCourseCell',
@@ -16,52 +15,48 @@ const meta = {
     argTypes: {
         course: { control: 'object' },
         meetingIdx: { control: 'number' },
-        color: { control: 'color' },
+        colors: { control: 'object' },
     },
     render: (args: any) => (
-        <div className="w-45">
+        <div className='w-45'>
             <CalendarCourseCell {...args} />
         </div>
     ),
+    args: {
+        course: exampleCourse,
+        meetingIdx: 0,
+        colors: getCourseColors('emerald', 500),
+    },
 } satisfies Meta<typeof CalendarCourseCell>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    args: {
-        course: new Course({
-            uniqueId: 123,
-            number: '311C',
-            fullName: "311C - Bevo's Default Course",
-            courseName: "Bevo's Default Course",
-            department: 'BVO',
-            creditHours: 3,
-            status: Status.WAITLISTED,
-            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
-            isReserved: false,
-            url: '',
-            flags: [],
-            schedule: new CourseSchedule({
-                meetings: [
-                    new CourseMeeting({
-                        days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI],
-                        startTime: 480,
-                        endTime: 570,
-                        location: {
-                            building: 'UTC',
-                            room: '123',
-                        },
-                    }),
-                ],
-            }),
-            instructionMode: 'In Person',
-            semester: {
-                year: 2024,
-                season: 'Spring',
-            },
-        }),
-        meetingIdx: 0,
-        color: 'red',
-    },
+export const Default: Story = {};
+
+export const Variants: Story = {
+    render: props => (
+        <div className='grid grid-cols-2 h-40 max-w-xl w-90vw gap-x-4 gap-y-2'>
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.OPEN })}
+                colors={getCourseColors('green', 500)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.CLOSED })}
+                colors={getCourseColors('teal', 400)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
+                colors={getCourseColors('indigo', 400)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
+                colors={getCourseColors('red', 500)}
+            />
+        </div>
+    ),
 };

src/stories/components/PopupCourseBlock.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import React from 'react';
 import { Course, Status } from 'src/shared/types/Course';
 import { CourseMeeting } from 'src/shared/types/CourseMeeting';
 import Instructor from 'src/shared/types/Instructor';
-import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import { getCourseColors } from 'src/shared/util/colors';
 import { theme } from 'unocss/preset-mini';
 
-const exampleCourse: Course = new Course({
+export const exampleCourse: Course = new Course({
     courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
     creditHours: 3,
     department: 'C S',
@@ -103,7 +103,7 @@ export const test_colors = Object.keys(theme.colors)
 
 export const AllColors: Story = {
     render: props => (
-        <div className='grid grid-rows-9 grid-cols-2 grid-flow-col max-w-2xl w-90vw gap-x-4 gap-y-2'>
+        <div className='grid grid-flow-col grid-cols-2 grid-rows-9 max-w-2xl w-90vw gap-x-4 gap-y-2'>
             {test_colors.map((color, i) => (
                 <PopupCourseBlock key={color.primaryColor} course={exampleCourse} colors={color} />
             ))}