From d69707b8e821c1fa65356c228cd539fa9fd8e54d Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Mon, 19 Feb 2024 20:48:00 -0600
Subject: [PATCH] Squashed commit of the following:

commit f6896e37e25d655e250a97cc4be826ddcf13e7b0
Author: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date:   Mon Feb 19 20:46:57 2024 -0600

    Calendar Page mostly styled

commit a28422e6b05fe3c594ea131863e75d65eeee978d
Merge: 297601e 41e6d77
Author: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date:   Mon Feb 19 18:46:59 2024 -0600

    Merge branch 'hackathon' into Som

commit 297601e715ff589ee862ca673e8273223b7d27f0
Author: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date:   Sun Feb 18 16:28:29 2024 -0600

    Grid works cleanly with up to two course conflicts. Prob needs refactoring

commit 313a9648c97dd2600948deb4f205e731ed9974de
Merge: b0a95a6 0acd0b7
Author: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date:   Sun Feb 18 15:45:57 2024 -0600

    Merge branch 'hackathon' into Som

commit b0a95a6153defb077d39ab0012ad32503cbee703
Author: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date:   Sun Feb 18 14:10:13 2024 -0600

    Made CourseCells and CalendarGridCells more responsive. CourseCells now rendering onto grid. Still, need to make course cells more responsive, and add edge cases

commit a1a0f005145f934f77a11b2cbbbc03611638088d
Merge: 7479004 ac71b83
Author: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date:   Sat Feb 17 17:07:06 2024 -0600

    Merge branch 'hackathon' into Som

commit 7479004a65c4220937d4ca1f70d6b68ece14f642
Author: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date:   Sat Feb 17 16:59:34 2024 -0600

    Need to add sorting
---
 .../components/calendar/Calendar.stories.tsx  | 23 +++++++++++
 .../CalendarBottomBar.stories.tsx             |  4 +-
 .../{ => calendar}/CalendarCourse.stories.tsx |  2 +-
 .../CalendarCourseCell.stories.tsx            |  4 +-
 .../{ => calendar}/CalendarGrid.stories.tsx   |  2 +-
 .../CalendarGridCell.stories.tsx              |  2 +-
 .../{ => calendar}/CalendarHeader.stories.tsx |  2 +-
 .../CalendarSchedules.stories.tsx             |  2 +-
 .../components/calendar/Calendar/Calendar.tsx | 40 +++++++++++++++++++
 .../CalendarBottomBar/CalendarBottomBar.tsx   |  6 +--
 .../CalendarGrid/CalendarGrid.module.scss     | 12 +++---
 .../calendar/CalendarGrid/CalendarGrid.tsx    | 36 +++++++----------
 12 files changed, 96 insertions(+), 39 deletions(-)
 create mode 100644 src/stories/components/calendar/Calendar.stories.tsx
 rename src/stories/components/{ => calendar}/CalendarBottomBar.stories.tsx (96%)
 rename src/stories/components/{ => calendar}/CalendarCourse.stories.tsx (97%)
 rename src/stories/components/{ => calendar}/CalendarCourseCell.stories.tsx (97%)
 rename src/stories/components/{ => calendar}/CalendarGrid.stories.tsx (98%)
 rename src/stories/components/{ => calendar}/CalendarGridCell.stories.tsx (92%)
 rename src/stories/components/{ => calendar}/CalendarHeader.stories.tsx (89%)
 rename src/stories/components/{ => calendar}/CalendarSchedules.stories.tsx (98%)
 create mode 100644 src/views/components/calendar/Calendar/Calendar.tsx

diff --git a/src/stories/components/calendar/Calendar.stories.tsx b/src/stories/components/calendar/Calendar.stories.tsx
new file mode 100644
index 00000000..beda65e2
--- /dev/null
+++ b/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: {
+        
+    },
+};
\ No newline at end of file
diff --git a/src/stories/components/CalendarBottomBar.stories.tsx b/src/stories/components/calendar/CalendarBottomBar.stories.tsx
similarity index 96%
rename from src/stories/components/CalendarBottomBar.stories.tsx
rename to src/stories/components/calendar/CalendarBottomBar.stories.tsx
index 1ee78750..e75f941d 100644
--- a/src/stories/components/CalendarBottomBar.stories.tsx
+++ b/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',
diff --git a/src/stories/components/CalendarCourse.stories.tsx b/src/stories/components/calendar/CalendarCourse.stories.tsx
similarity index 97%
rename from src/stories/components/CalendarCourse.stories.tsx
rename to src/stories/components/calendar/CalendarCourse.stories.tsx
index 43cd032e..43066303 100644
--- a/src/stories/components/CalendarCourse.stories.tsx
+++ b/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',
diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/calendar/CalendarCourseCell.stories.tsx
similarity index 97%
rename from src/stories/components/CalendarCourseCell.stories.tsx
rename to src/stories/components/calendar/CalendarCourseCell.stories.tsx
index cc3ae3aa..8df4d9fd 100644
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/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',
diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/calendar/CalendarGrid.stories.tsx
similarity index 98%
rename from src/stories/components/CalendarGrid.stories.tsx
rename to src/stories/components/calendar/CalendarGrid.stories.tsx
index 761c4dbc..d22c27d9 100644
--- a/src/stories/components/CalendarGrid.stories.tsx
+++ b/src/stories/components/calendar/CalendarGrid.stories.tsx
@@ -5,7 +5,7 @@ import { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 import { Status } from '@shared/types/Course';
 
 const meta = {
-    title: 'Components/Common/CalendarGrid',
+    title: 'Components/Calendar/CalendarGrid',
     component: CalendarGrid,
     parameters: {
         layout: 'centered',
diff --git a/src/stories/components/CalendarGridCell.stories.tsx b/src/stories/components/calendar/CalendarGridCell.stories.tsx
similarity index 92%
rename from src/stories/components/CalendarGridCell.stories.tsx
rename to src/stories/components/calendar/CalendarGridCell.stories.tsx
index 1b1cbbfc..067e134e 100644
--- a/src/stories/components/CalendarGridCell.stories.tsx
+++ b/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
diff --git a/src/stories/components/CalendarHeader.stories.tsx b/src/stories/components/calendar/CalendarHeader.stories.tsx
similarity index 89%
rename from src/stories/components/CalendarHeader.stories.tsx
rename to src/stories/components/calendar/CalendarHeader.stories.tsx
index cd715035..1a2a7131 100644
--- a/src/stories/components/CalendarHeader.stories.tsx
+++ b/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',
diff --git a/src/stories/components/CalendarSchedules.stories.tsx b/src/stories/components/calendar/CalendarSchedules.stories.tsx
similarity index 98%
rename from src/stories/components/CalendarSchedules.stories.tsx
rename to src/stories/components/calendar/CalendarSchedules.stories.tsx
index ccd13b4c..86b01826 100644
--- a/src/stories/components/CalendarSchedules.stories.tsx
+++ b/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',
diff --git a/src/views/components/calendar/Calendar/Calendar.tsx b/src/views/components/calendar/Calendar/Calendar.tsx
new file mode 100644
index 00000000..bc641188
--- /dev/null
+++ b/src/views/components/calendar/Calendar/Calendar.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
+import { CalendarBottomBar } from '../CalendarBottomBar/CalendarBottomBar';
+import { CalendarSchedules } from '../CalendarSchedules/CalendarSchedules';
+import ImportantLinks from '../ImportantLinks';
+import CalendarGrid from '../CalendarGrid/CalendarGrid';
+
+export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
+
+interface Props {
+    label: string;
+}
+
+/**
+ * A reusable chip component that follows the design system of the extension.
+ * @returns
+ */
+export function Calendar(): JSX.Element {
+    return (
+        <>
+            <CalendarHeader />
+            <div className='h-screen w-full flex flex-col md:flex-row'>
+                <div className='min-h-[30%] flex flex-col items-start gap-2.5 p-5 pl-7'>
+                    <div className='min-h-[30%]'>
+                        <CalendarSchedules />
+                    </div>
+                    <ImportantLinks />
+                </div>
+                <div className='flex flex-grow flex-col gap-4 overflow-hidden'>
+                    <div className='flex-grow overflow-auto'>
+                        <CalendarGrid />
+                    </div>
+                    <div>
+                        <CalendarBottomBar />
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx b/src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx
index 8bf5962b..d80aa3d7 100644
--- a/src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx
+++ b/src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx
@@ -7,20 +7,20 @@ import ImageIcon from '~icons/material-symbols/image';
 import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
 
 type CalendarBottomBarProps = {
-    courses: CalendarCourseCellProps[];
+    courses?: CalendarCourseCellProps[];
 };
 
 /**
  *
  */
 export const CalendarBottomBar = ({ courses }: CalendarBottomBarProps): JSX.Element => {
-    if (courses.length === -1) console.log('foo'); // dumb line to make eslint happy
+    if (courses?.length === -1) console.log('foo'); // dumb line to make eslint happy
     return (
         <div className='w-full flex py-1.25'>
             <div className='flex flex-grow items-center gap-3.75 pl-7.5 pr-2.5'>
                 <Text variant='h4'>Async. and Other:</Text>
                 <div className='h-14 inline-flex gap-2.5'>
-                    {courses.map(course => (
+                    {courses?.map(course => (
                         <CalendarCourseBlock
                             courseDeptAndInstr={course.courseDeptAndInstr}
                             status={course.status}
diff --git a/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss b/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss
index a4869b75..cffe4a18 100644
--- a/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss
@@ -13,7 +13,7 @@
 
 .calendarGrid {
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: auto repeat(5, 6fr);
     grid-template-rows: repeat(26, 1fr);
     width: 100%;
     height: 100%;
@@ -27,9 +27,9 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    position: relative; // Ensuring that child elements can be positioned in relation to this.
-    min-width: 800px;
-    min-height: 500px;
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 .day {
@@ -113,7 +113,7 @@
     background-color: transparent;
     color: #333;
     cursor: pointer;
-    
+
     &:hover {
         background-color: rgba(0, 0, 0, 0.1);
     }
@@ -137,4 +137,4 @@
     border-radius: 50%; /* Rounds the corners into a circle */
     top: 12.5%; /* Centers the dot vertically */
     left: 12.5%; /* Centers the dot horizontally */
-  }
\ No newline at end of file
+}
diff --git a/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx b/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
index 1e8dc929..486ec138 100644
--- a/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
@@ -27,8 +27,8 @@ for (let i = 0; i < 13; i++) {
 }   */
 
 interface Props {
-    courseCells: CalendarGridCourse[];
-    saturdayClass: boolean;
+    courseCells?: CalendarGridCourse[];
+    saturdayClass?: boolean;
 }
 
 /**
@@ -110,21 +110,17 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
     }, []);
 
     return (
-        <div className={styles.calendar}>
-            <div className={styles.dayLabelContainer} />
-            {/* Displaying the rest of the calendar */}
-            <div className={styles.timeAndGrid}>
-                <div className={styles.calendarGrid}>
-                    {/* Displaying day labels */}
-                    <div className={styles.timeBlock} />
-                    {daysOfWeek.map(day => (
-                        <div key={day} className={styles.day}>
-                            {day}
-                        </div>
-                    ))}
-                    {grid.map((row, rowIndex) => row)}
-                    {accountForCourseConflicts(courseCells)}
-                    {/*     courseCells.map((block: CalendarGridCourse) => (
+        <div className={styles.calendarGrid}>
+            {/* Displaying day labels */}
+            <div className={styles.timeBlock} />
+            {daysOfWeek.map(day => (
+                <div key={day} className={styles.day}>
+                    {day}
+                </div>
+            ))}
+            {grid.map((row, rowIndex) => row)}
+            {courseCells ? accountForCourseConflicts(courseCells) : null}
+            {/*     courseCells.map((block: CalendarGridCourse) => (
                         <div
                             key={`${block}`}
                             style={{
@@ -140,8 +136,6 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                             />
                         </div>
                         ))  */}
-                </div>
-            </div>
         </div>
     );
 }
@@ -195,8 +189,8 @@ function accountForCourseConflicts(courseCells: CalendarGridCourse[]): JSX.Eleme
             style={{
                 gridColumn: `${block.calendarGridPoint.dayIndex + 1}`,
                 gridRow: `${block.calendarGridPoint.startIndex + 1} / ${block.calendarGridPoint.endIndex + 1}`,
-                width: `calc(100% / ${block.totalColumns})`, 
-                marginLeft: `calc(100% * ${(block.gridColumnStart - 1) / block.totalColumns})`, 
+                width: `calc(100% / ${block.totalColumns})`,
+                marginLeft: `calc(100% * ${(block.gridColumnStart - 1) / block.totalColumns})`,
                 padding: '0px 10px 4px 0px',
             }}
         >