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

@@ -1,8 +1,7 @@
-:root {
-    --Primary-Colors-Burnt-Orange: #BF5700;
-}
+@use 'sass:color';
+@use 'src/views/styles/colors.module.scss';
 
-.day-label-container {
+.dayLabelContainer {
     display: flex;
     height: 13px;
     min-width: 40px;
@@ -14,8 +13,8 @@
     flex: 1 0 0;
 }
 
-.day-label {
-    color: var(--Primary-Colors-Burnt-Orange);
+.dayLabel {
+    color: colors.$burnt_orange;
     text-align: center;
     font-family: Roboto;
     font-size: 14.22px;
@@ -31,12 +30,10 @@
 }
 
 .day {
-    display: grid;
-    grid-template-columns: auto repeat(14, 1fr);
     gap: 5px;
 }
 
-.time-block {
+.timeBlock {
     display: flex;
     width: 50px;
     height: 40.279px;
@@ -48,7 +45,7 @@
     align-items: flex-end;
 }
 
-.time-label-container {
+.timeLabelContainer {
     display: flex;
     max-height: 20px;
     flex-direction: column;
@@ -58,4 +55,4 @@
     flex: 1 0 0;
     align-self: stretch;
     border-radius: var(--border-radius-none, 0px);
-}
+}

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

@@ -1,31 +1,36 @@
 import React from 'react';
 import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
-const Calendar: React.FC = () => {
-    const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
-    const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-  
+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="calendar">
-        <div className="day-label-container"></div>
-        {daysOfWeek.map((day, dayIndex) => (
-          <div key={dayIndex} className="day">
-            <div className="day-label-container">
-              <div className="day-label">{day}</div>
-            </div>
-            {hoursOfDay.map((hour) => (
-              <div key={`${day}-${hour}`} className="time-block">
-                <div className="time-label-container">
-                  <span>{hour}:00</span>
+        <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>
-                <CalendarCell />
-              </div>
             ))}
-          </div>
-        ))}
-      </div>
+        </div>
     );
-  };
-  
-  export default Calendar;
+};
+
+export default Calendar;

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

@@ -1,4 +1,4 @@
-.calendar-cell {
+.calendarCell {
     display: flex;
     width: 165px;
     height: 52.231px;
@@ -8,13 +8,12 @@
     justify-content: center;
     align-items: flex-start;
     position: relative;
-  }
-  
-  .hour-line {
+}
+
+.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

@@ -1,12 +1,16 @@
 import React from 'react';
 import styles from './CalendarGridCell.module.scss';
 
-const CalendarCell: React.FC = () => {
-  return (
-    <div className={styles['calendar-cell']}>
-      <div className={styles['hour-line']}></div>
-    </div>
-  );
+/**
+ * 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;