Merge branch 'pr/85' into hackathon

src/shared/types/CourseMeeting.ts

@@ -2,6 +2,7 @@ import { Serialized } from 'chrome-extension-toolkit';
 
 /**
  * a map of the days of the week that a class is taught, and the corresponding abbreviation
+ * Don't modify the keys
  */
 export const DAY_MAP = {
     M: 'Monday',

src/stories/components/CalendarCourseCell.stories.tsx

@@ -45,7 +45,7 @@ export const Default: Story = {
             schedule: new CourseSchedule({
                 meetings: [
                     new CourseMeeting({
-                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                        days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI],
                         startTime: 480,
                         endTime: 570,
                         location: {

src/stories/components/CalendarGridCell.stories.tsx

@@ -0,0 +1,19 @@
+// Calendar.stories.tsx
+import React from 'react';
+import CalendarCell from '@views/components/common/CalendarGridCell/CalendarGridCell';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/CalendarGridCell',
+  component: CalendarCell,
+  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 CalendarCell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -1,94 +0,0 @@
-@use 'sass:color';
-@use 'src/views/styles/colors.module.scss';
-
-.dayLabelContainer {
-    display: flex;
-    flex-direction: row;
-    height: 13px;
-    min-width: 40px;
-    min-height: 13px;
-    padding-bottom: 15px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    flex: 1 0 0;
-}
-
-.calendarGrid {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(13, 1fr);
-}
-
-.calendarRow {
-    display: flex;
-}
-
-.calendar {
-    // display: grid;
-    // grid-template-columns: auto repeat(5, 1fr);
-    gap: 10px;
-}
-
-.day {
-    gap: 5px;
-    color: colors.$burnt_orange;
-    text-align: center;
-    font-size: 14.22px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-}
-
-.timeAndGrid {
-    display: flex;
-}
-
-.timeColumn {
-    display: flex;
-    min-height: 573px;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex: 1 0 0;
-    border-radius: var(--border-radius-none, 0px);
-}
-
-.timeBlock {
-    display: flex;
-    width: 50px;
-    height: 40.279px;
-    min-width: 50px;
-    max-width: 50px;
-    min-height: 40px;
-    flex-direction: column;
-    align-items: flex-end;
-    
-    .timeLabelContainer {
-        display: flex;
-        max-height: 20px;
-        flex-direction: column;
-        align-items: flex-end;
-        gap: 17px;
-        flex: 1 0 0;
-        align-self: stretch;
-        border-radius: var(--border-radius-none, 0px);
-    }
-
-    p {
-        color: #1A2024;
-        text-align: left;
-        height: 6.6px;
-        align-self: stretch;
-        margin-top: 0;
-        margin-bottom: 0;
-
-        /* Type scale/small */
-        font-family: "Roboto Flex";
-        font-size: 14.22px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-    } 
-}
-

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

@@ -1,15 +1,23 @@
 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).filter(d => d != "Saturday" && d != "Sunday")
+const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-const grid = Array.from({ length: 5 }, () =>
+const grid = [];
-  Array.from({ length: 13 }, (_, columnIndex) => (
+for (let i = 0; i < 13; i++) {
-    <CalendarCell key={columnIndex} />
+  const row = [];
-  ))
+  let hour = hoursOfDay[i];
-);
+  row.push(
+    <div key={hour} className="flex">
+      <div className="flex flex-col items-end">
+        <p className="text-left">{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
+      </div>
+    </div>
+  );
+  row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />));
+  grid.push(row);
+}
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
@@ -17,32 +25,30 @@ const grid = Array.from({ length: 5 }, () =>
  */
 const Calendar: React.FC = (props) => {
   return (
-    <div className={styles.calendar}>
+    <div className="grid grid-cols-7">
-      <div className={styles.dayLabelContainer}>
+      <div className="flex justify-center items-center h-13 min-w-40 min-h-13 pb-15 gap-10 flex-1">
-        {/* Empty cell in the top-left corner */}
+      </div>
-        <div className={styles.day} />
+      {/* Displaying the rest of the calendar */}
+      <div className="flex">
+        {/* <div className="flex flex-col justify-between items-start flex-1">
+          <div className="flex"></div>
+          {hoursOfDay.map((hour) => (
+            <div key={hour} className="flex">
+              <div className="flex flex-col items-end">
+                <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
+              </div>
+            </div>
+          ))}
+        </div> */}
+        <div className="grid grid-cols-6 grid-rows-13">
           {/* Displaying day labels */}
+          <div className="flex"></div>
           {daysOfWeek.map(day => (
-          <div key={day} className={styles.day}>
+            <div key={day} className="border border-solid border-gray-300 text-center">
               {day}
             </div>
           ))}
-      </div>
+          {grid.map((row, rowIndex) => (row))}
-      {/* Displaying the rest of the calendar */}
-      <div className={styles.timeAndGrid}>
-        <div className={styles.timeColumn}>
-          {hoursOfDay.map((hour) => (
-            <div key={hour} className={styles.timeBlock}>
-              <div className={styles.timeLabelContainer}>
-                <p>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-        <div className={styles.calendarGrid}>
-          {grid.map((row, rowIndex) => (
-            row
-          ))}
         </div>
       </div>
     </div>

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

@@ -1,18 +0,0 @@
-.calendarCell {
-  display: flex;
-  width: 165px;
-  height: 52.231px;
-  min-width: 45px;
-  min-height: 40px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  border: 1px solid #DADCE0;
-}
-  
-.hourLine {
-  width: 165px;
-  height: 1px;
-  border-radius: var(--border-radius-none, 0px);
-  background: rgba(218, 220, 224, 0.25);
-}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './CalendarGridCell.module.scss';
 
 /**
  * Component representing each 1 hour time block of a calendar
@@ -7,10 +6,8 @@ import styles from './CalendarGridCell.module.scss';
  */
 const CalendarCell: React.FC = (props) => {
   return (
-    <div className={styles.calendarCell}>
+    <div className="flex w-56 h-12 min-w-12 min-h-10 flex-col justify-center items-start border border-gray-300">
-      <div className={styles.hourLine}>
+      <div className="w-full h-1 border-none rounded-none bg-gray-300 bg-opacity-25"></div>
-
-      </div>
     </div>
   );
 };