feat: add Calendar Component

src/stories/components/calendar/Calendar.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Calendar } from 'src/views/components/calendar/Calendar/Calendar';
+
+const meta = {
+    title: 'Components/Calendar/Calendar',
+    component: Calendar,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        
+    },
+} satisfies Meta<typeof Calendar>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        
+    },
+};

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

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Course, Status } from '@shared/types/Course';
 import Instructor from '@shared/types/Instructor';
 import { CalendarBottomBar } from 'src/views/components/calendar/CalendarBottomBar/CalendarBottomBar';
-import { getCourseColors } from '../../shared/util/colors';
+import { getCourseColors } from '../../../shared/util/colors';
 
 const exampleGovCourse: Course = new Course({
     courseName: 'Nope',
@@ -66,7 +66,7 @@ const examplePsyCourse: Course = new Course({
 });
 
 const meta = {
-    title: 'Components/Common/CalendarBottomBar',
+    title: 'Components/Calendar/CalendarBottomBar',
     component: CalendarBottomBar,
     parameters: {
         layout: 'centered',

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

@@ -6,7 +6,7 @@ import Instructor from '@shared/types/Instructor';
 import CalendarCourse from 'src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
 
 const meta = {
-    title: 'Components/Common/CalendarCourseMeeting',
+    title: 'Components/Calendar/CalendarCourseMeeting',
     component: CalendarCourse,
     parameters: {
         layout: 'centered',

src/stories/components/calendar/CalendarCourseCell.stories.tsx

@@ -3,10 +3,10 @@ import { getCourseColors } from '@shared/util/colors';
 import { Meta, StoryObj } from '@storybook/react';
 import CalendarCourseCell from 'src/views/components/calendar/CalendarCourseCell/CalendarCourseCell';
 import React from 'react';
-import { exampleCourse } from './PopupCourseBlock.stories';
+import { exampleCourse } from '../PopupCourseBlock.stories';
 
 const meta = {
-    title: 'Components/Common/CalendarCourseCell',
+    title: 'Components/Calendar/CalendarCourseCell',
     component: CalendarCourseCell,
     parameters: {
         layout: 'centered',

src/stories/components/calendar/CalendarGrid.stories.tsx

@@ -5,8 +5,8 @@ import { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 import { Status } from '@shared/types/Course';
 
 const meta = {
-    title: 'Components/Common/Calendar',
-    component: Calendar,
+    title: 'Components/Calendar/CalendarGrid',
+    component: CalendarGrid,
     parameters: {
         // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
         layout: 'centered',
@@ -60,56 +60,56 @@ const testData: CalendarGridCourse[] = [
         },
     },
     {
-    calendarGridPoint: {
-        dayIndex: 4,
-        startIndex: 10,
-        endIndex: 11,
-    },
-    componentProps: {
-        courseDeptAndInstr: 'Course 1',
-        timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
-        status: Status.OPEN,
-        colors: getCourseColors('emerald', 500),
-    },
+        calendarGridPoint: {
+            dayIndex: 4,
+            startIndex: 10,
+            endIndex: 11,
+        },
+        componentProps: {
+            courseDeptAndInstr: 'Course 1',
+            timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
+            status: Status.OPEN,
+            colors: getCourseColors('emerald', 500),
+        },
     },
     {
-    calendarGridPoint: {
-        dayIndex: 1,
-        startIndex: 10,
-        endIndex: 12,
-    },
-    componentProps: {
-        courseDeptAndInstr: 'Course 2',
-        timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
-        status: Status.CLOSED,
-        colors: getCourseColors('emerald', 500),
-    },
+        calendarGridPoint: {
+            dayIndex: 1,
+            startIndex: 10,
+            endIndex: 12,
+        },
+        componentProps: {
+            courseDeptAndInstr: 'Course 2',
+            timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
+            status: Status.CLOSED,
+            colors: getCourseColors('emerald', 500),
+        },
     },
     {
-    calendarGridPoint: {
-        dayIndex: 1,
-        startIndex: 10,
-        endIndex: 12,
-    },
-    componentProps: {
-        courseDeptAndInstr: 'Course 3',
-        timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
-        status: Status.CLOSED,
-        colors: getCourseColors('emerald', 500),
-    },
+        calendarGridPoint: {
+            dayIndex: 1,
+            startIndex: 10,
+            endIndex: 12,
+        },
+        componentProps: {
+            courseDeptAndInstr: 'Course 3',
+            timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
+            status: Status.CLOSED,
+            colors: getCourseColors('emerald', 500),
+        },
     },
     {
-    calendarGridPoint: {
-        dayIndex: 1,
-        startIndex: 10,
-        endIndex: 12,
-    },
-    componentProps: {
-        courseDeptAndInstr: 'Course 4',
-        timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
-        status: Status.CLOSED,
-        colors: getCourseColors('emerald', 500),
-    },
+        calendarGridPoint: {
+            dayIndex: 1,
+            startIndex: 10,
+            endIndex: 12,
+        },
+        componentProps: {
+            courseDeptAndInstr: 'Course 4',
+            timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
+            status: Status.CLOSED,
+            colors: getCourseColors('emerald', 500),
+        },
     },
 ];
 

src/stories/components/calendar/CalendarGridCell.stories.tsx

@@ -4,7 +4,7 @@ import CalendarCell from 'src/views/components/calendar/CalendarGridCell/Calenda
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-    title: 'Components/Common/CalendarGridCell',
+    title: 'Components/Calendar/CalendarGridCell',
     component: CalendarCell,
     parameters: {
         // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

src/stories/components/calendar/CalendarHeader.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
 
 const meta = {
-    title: 'Components/Common/CalendarHeader',
+    title: 'Components/Calendar/CalendarHeader',
     component: CalendarHeader,
     parameters: {
         layout: 'centered',

src/stories/components/calendar/CalendarSchedules.stories.tsx

@@ -8,7 +8,7 @@ import Instructor from 'src/shared/types/Instructor';
 import { CalendarSchedules } from 'src/views/components/calendar/CalendarSchedules/CalendarSchedules';
 
 const meta = {
-    title: 'Components/Common/CalendarSchedules',
+    title: 'Components/Calendar/CalendarSchedules',
     component: CalendarSchedules,
     parameters: {
         layout: 'centered',