feat: Calendar Components 3rd Attempt at Merging (#60)

src/stories/components/CalendarGrid.stories.tsx

@@ -0,0 +1,19 @@
+// Calendar.stories.tsx
+import React from 'react';
+import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Calendar',
+  component: Calendar,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    tags: ['autodocs'],
+  }
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/views/components/common/CalendarGrid/CalendarGrid.module.scss

@@ -0,0 +1,58 @@
+@use 'sass:color';
+@use 'src/views/styles/colors.module.scss';
+
+.dayLabelContainer {
+    display: flex;
+    height: 13px;
+    min-width: 40px;
+    min-height: 13px;
+    padding-bottom: 15px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    flex: 1 0 0;
+}
+
+.dayLabel {
+    color: colors.$burnt_orange;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 14.22px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+.calendar {
+    display: grid;
+    grid-template-columns: auto repeat(5, 1fr);
+    gap: 10px;
+}
+
+.day {
+    gap: 5px;
+}
+
+.timeBlock {
+    display: flex;
+    width: 50px;
+    height: 40.279px;
+    min-width: 50px;
+    max-width: 50px;
+    min-height: 40px;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+.timeLabelContainer {
+    display: flex;
+    max-height: 20px;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    gap: 17px;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: var(--border-radius-none, 0px);
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import styles from './CalendarGrid.module.scss';
+import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import { DAY_MAP } from 'src/shared/types/CourseMeeting';
+
+const daysOfWeek = Object.values(DAY_MAP);
+const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
+
+/**
+ * Grid of CalendarGridCell components forming the user's course schedule calendar view
+ * @param props 
+ */
+const Calendar: React.FC = (props) => {
+  
+    return (
+      <div className={styles.calendar}>
+        <div className={styles.dayLabelContainer}></div>
+        {daysOfWeek.map((day, dayIndex) => (
+          <div key={dayIndex} className={styles.day}>
+            <div className={styles.dayLabelContainer}>
+              <div className={styles.dayLabel}>{day}</div>
+            </div>
+            {hoursOfDay.map((hour) => (
+              <div key={`${day}-${hour}`} className={styles.timeBlock}>
+                <div className={styles.timeLabelContainer}>
+                  <span>{hour}:00</span>
+                </div>
+                <CalendarCell />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  };
+  
+  export default Calendar;

src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss

@@ -0,0 +1,20 @@
+.calendarCell {
+    display: flex;
+    width: 165px;
+    height: 52.231px;
+    min-width: 45px;
+    min-height: 40px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    position: relative;
+  }
+  
+  .hourLine {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    border-top: 1px solid black; /* Adjust line styles as needed */
+  }
+  

src/views/components/common/CalendarGridCell/CalendarGridCell.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './CalendarGridCell.module.scss';
+
+/**
+ * Component representing each 1 hour time block of a calendar
+ * @param props 
+ */
+const CalendarCell: React.FC = (props) => {
+  return (
+    <div className={styles.calendarCell}>
+      <div className={styles.hourLine}></div>
+    </div>
+  );
+};
+
+export default CalendarCell;