feat: add Storybook story

Longhorn-Developers · Mar 6, 2024 · cb3cb5d · cb3cb5d
1 parent 4165d48
commit cb3cb5d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx
@@ -4,16 +4,16 @@ 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'],
-  }
+    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 = {};
+export const Default: Story = {};
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -27,14 +27,8 @@
     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);
+.day {
+    gap: 5px;
 }
 
 .timeBlock {

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -1,8 +1,9 @@
 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 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+const daysOfWeek = Object.values(DAY_MAP);
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 const grid = Array.from({ length: 5 }, () =>
     Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
@@ -14,7 +15,10 @@ const grid = Array.from({ length: 5 }, () =>
  */
 const Calendar: React.FC = props => {
     return (
-        <div className={styles.calendar}>
+      <div className={styles.calendar}>
+        <div className={styles.dayLabelContainer}></div>
+        {daysOfWeek.map((day, dayIndex) => (
+          <div key={dayIndex} className={styles.day}>
             <div className={styles.dayLabelContainer}>
                 {/* Empty cell in the top-left corner */}
                 <div className={styles.day} />