This commit is contained in:
knownotunknown
2024-02-17 14:27:32 -06:00
parent 2cffb794db
commit 8b2d07033c
2 changed files with 35 additions and 28 deletions

View File

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

View File

@@ -5,7 +5,6 @@ import CalendarCell from '../CalendarGridCell/CalendarGridCell';
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell'; import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
import { Chip } from '../Chip/Chip'; import { Chip } from '../Chip/Chip';
const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key)); const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
const grid = []; const grid = [];
@@ -24,15 +23,15 @@ for (let i = 0; i < 13; i++) {
} }
interface Props { interface Props {
courseCells: typeof CalendarCourseCell[]; courseCells: any[];
saturdayClass: boolean;
} }
/** /**
* Grid of CalendarGridCell components forming the user's course schedule calendar view * Grid of CalendarGridCell components forming the user's course schedule calendar view
* @param props * @param props
*/ */
export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.Element { function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props> ): JSX.Element {
return ( return (
<div className={styles.calendar}> <div className={styles.calendar}>
<div className={styles.dayLabelContainer} /> <div className={styles.dayLabelContainer} />
@@ -56,20 +55,22 @@ export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.E
{day} {day}
</div> </div>
))} ))}
{grid.map((row) => row)} {grid.map(row => row)}
</div> </div>
</div> </div>
{courseCells.map((Block: typeof CalendarCourseCell) => ( {/* courseCells.map((Block: typeof CalendarCourseCell) => (
<div key={`${Block}`} <div
style ={{ key={`${Block}`}
gridColumn: `1`, style={{
gridRow: `1` gridColumn: `1`,
}}> gridRow: `1`,
<Chip label='test'/> }}
>
<Chip label='test' />
</div> </div>
))} )) */}
</div> </div>
); );
}; }
export default Calendar; export default CalendarGrid;