chore: add default story

src/stories/components/CalendarCourseCell.stories.tsx

@@ -30,8 +30,7 @@ const meta = {
         courseNumber: exampleCourse.number,
         instructorLastName: exampleCourse.instructors[0].lastName,
         status: exampleCourse.status,
-        meetingTime: exampleCourse.schedule.meetings[0].getTimeString({separator: '-'}),
+        meetingTime: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
-
 
         colors: getCourseColors('emerald', 500),
     },
@@ -40,31 +39,40 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
-
+    args: {
-export const Variants: Story = {
+        course: new Course({
-    render: props => (
+            uniqueId: 123,
-        <div className='grid grid-cols-2 h-40 max-w-xl w-90vw gap-x-4 gap-y-2'>
+            number: '311C',
-            <CalendarCourseCell
+            fullName: "311C - Bevo's Default Course",
-                {...props}
+            courseName: "Bevo's Default Course",
-                course={new Course({ ...exampleCourse, status: Status.OPEN })}
+            department: 'BVO',
-                colors={getCourseColors('green', 500)}
+            creditHours: 3,
-            />
+            status: Status.WAITLISTED,
-            <CalendarCourseCell
+            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
-                {...props}
+            isReserved: false,
-                course={new Course({ ...exampleCourse, status: Status.CLOSED })}
+            url: '',
-                colors={getCourseColors('teal', 400)}
+            flags: [],
-            />
+            schedule: new CourseSchedule({
-            <CalendarCourseCell
+                meetings: [
-                {...props}
+                    new CourseMeeting({
-                course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
+                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
-                colors={getCourseColors('indigo', 400)}
+                        startTime: 480,
-            />
+                        endTime: 570,
-            <CalendarCourseCell
+                        location: {
-                {...props}
+                            building: 'UTC',
-                course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
+                            room: '123',
-                colors={getCourseColors('red', 500)}
+                        },
-            />
+                    }),
-        </div>
+                ],
-    ),
+            }),
+            instructionMode: 'In Person',
+            semester: {
+                year: 2024,
+                season: 'Spring',
+            },
+        }),
+        meetingIdx: 0,
+        color: 'red',
+    },
 };

src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx

@@ -7,18 +7,16 @@ import CancelledIcon from '~icons/material-symbols/warning';
 import Text from '../Text/Text';
 
 export interface CalendarCourseCellProps {
-    courseDeptAndInstr: string;
+    /** The Course that the meeting is for. */
-    timeAndLocation?: string;
+    course: Course;
-    status: Status;
+    /* index into course meeting array to display */
-    colors: CourseColors;
+    meetingIdx?: number;
+    /** The background color for the course. */
+    color: string;
 }
 
-const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
+const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meetingIdx }: CalendarCourseCellProps) => {
-    courseDeptAndInstr,
+    let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
-    timeAndLocation,
-    status,
-    colors,
-}: CalendarCourseCellProps) => {
     let rightIcon: React.ReactNode | null = null;
     if (status === Status.WAITLISTED) {
         rightIcon = <WaitlistIcon className='h-5 w-5' />;

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
+import { Chip } from '../Chip/Chip';
+
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -22,14 +24,14 @@ for (let i = 0; i < 13; i++) {
 }
 
 interface Props {
-    CourseMeetingBlocks: CourseMeeting[];
+    courseCells: typeof CalendarCourseCell[];
 }
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>): JSX.Element {
+export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.Element {
 
     return (
         <div className={styles.calendar}>
@@ -54,12 +56,16 @@ export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>
                             {day}
                         </div>
                     ))}
-                    {grid.map((row, rowIndex) => row)}
+                    {grid.map((row) => row)}
                 </div>
             </div>
-            {courseMeetingBlocks.map((block: CourseMeeting, index: number) => (
+            {courseCells.map((Block: typeof CalendarCourseCell) => (
-                <div key={index}>
+                <div key={`${Block}`} 
-                    {block}
+                     style ={{
+                            gridColumn: `1`,
+                            gridRow: `1`
+                     }}>
+                    <Chip label='test'/>
                 </div>
             ))}
         </div>