DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Calendar Component

Browse Source
This commit is contained in:
doprz
2024-03-06 15:09:01 -06:00
parent 152bc45776
commit e0212d5109
12 changed files with 141 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/stories/components/calendar/Calendar.stories.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { Meta, StoryObj } from '@storybook/react';
import { Calendar } from 'src/views/components/calendar/Calendar/Calendar';
const meta = {
title: 'Components/Calendar/Calendar',
component: Calendar,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
},
} satisfies Meta<typeof Calendar>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
},
};

4
src/stories/components/CalendarBottomBar.stories.tsx → src/stories/components/calendar/CalendarBottomBar.stories.tsx
View File

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
import { Course, Status } from '@shared/types/Course';
import Instructor from '@shared/types/Instructor';
import { CalendarBottomBar } from 'src/views/components/calendar/CalendarBottomBar/CalendarBottomBar';
import { getCourseColors } from '../../shared/util/colors';
import { getCourseColors } from '../../../shared/util/colors';
const exampleGovCourse: Course = new Course({
courseName: 'Nope',
@@ -66,7 +66,7 @@ const examplePsyCourse: Course = new Course({
});
const meta = {
title: 'Components/Common/CalendarBottomBar',
title: 'Components/Calendar/CalendarBottomBar',
component: CalendarBottomBar,
parameters: {
layout: 'centered',

2
src/stories/components/CalendarCourse.stories.tsx → src/stories/components/calendar/CalendarCourse.stories.tsx
View File

@@ -6,7 +6,7 @@ import Instructor from '@shared/types/Instructor';
import CalendarCourse from 'src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
const meta = {
title: 'Components/Common/CalendarCourseMeeting',
title: 'Components/Calendar/CalendarCourseMeeting',
component: CalendarCourse,
parameters: {
layout: 'centered',

4
src/stories/components/CalendarCourseCell.stories.tsx → src/stories/components/calendar/CalendarCourseCell.stories.tsx
View File

@@ -3,10 +3,10 @@ import { getCourseColors } from '@shared/util/colors';
import { Meta, StoryObj } from '@storybook/react';
import CalendarCourseCell from 'src/views/components/calendar/CalendarCourseCell/CalendarCourseCell';
import React from 'react';
import { exampleCourse } from './PopupCourseBlock.stories';
import { exampleCourse } from '../PopupCourseBlock.stories';
const meta = {
title: 'Components/Common/CalendarCourseCell',
title: 'Components/Calendar/CalendarCourseCell',
component: CalendarCourseCell,
parameters: {
layout: 'centered',

92
src/stories/components/CalendarGrid.stories.tsx → src/stories/components/calendar/CalendarGrid.stories.tsx
View File

@@ -5,8 +5,8 @@ import { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import { Status } from '@shared/types/Course';
const meta = {
title: 'Components/Common/Calendar',
component: Calendar,
title: 'Components/Calendar/CalendarGrid',
component: CalendarGrid,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
@@ -60,56 +60,56 @@ const testData: CalendarGridCourse[] = [
},
},
{
calendarGridPoint: {
dayIndex: 4,
startIndex: 10,
endIndex: 11,
},
componentProps: {
courseDeptAndInstr: 'Course 1',
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
status: Status.OPEN,
colors: getCourseColors('emerald', 500),
},
calendarGridPoint: {
dayIndex: 4,
startIndex: 10,
endIndex: 11,
},
componentProps: {
courseDeptAndInstr: 'Course 1',
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
status: Status.OPEN,
colors: getCourseColors('emerald', 500),
},
},
{
calendarGridPoint: {
dayIndex: 1,
startIndex: 10,
endIndex: 12,
},
componentProps: {
courseDeptAndInstr: 'Course 2',
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
calendarGridPoint: {
dayIndex: 1,
startIndex: 10,
endIndex: 12,
},
componentProps: {
courseDeptAndInstr: 'Course 2',
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
},
{
calendarGridPoint: {
dayIndex: 1,
startIndex: 10,
endIndex: 12,
},
componentProps: {
courseDeptAndInstr: 'Course 3',
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
calendarGridPoint: {
dayIndex: 1,
startIndex: 10,
endIndex: 12,
},
componentProps: {
courseDeptAndInstr: 'Course 3',
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
},
{
calendarGridPoint: {
dayIndex: 1,
startIndex: 10,
endIndex: 12,
},
componentProps: {
courseDeptAndInstr: 'Course 4',
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
calendarGridPoint: {
dayIndex: 1,
startIndex: 10,
endIndex: 12,
},
componentProps: {
courseDeptAndInstr: 'Course 4',
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
},
];

2
src/stories/components/CalendarGridCell.stories.tsx → src/stories/components/calendar/CalendarGridCell.stories.tsx
View File

@@ -4,7 +4,7 @@ import CalendarCell from 'src/views/components/calendar/CalendarGridCell/Calenda
import type { Meta, StoryObj } from '@storybook/react';
const meta = {
title: 'Components/Common/CalendarGridCell',
title: 'Components/Calendar/CalendarGridCell',
component: CalendarCell,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

2
src/stories/components/CalendarHeader.stories.tsx → src/stories/components/calendar/CalendarHeader.stories.tsx
View File

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
const meta = {
title: 'Components/Common/CalendarHeader',
title: 'Components/Calendar/CalendarHeader',
component: CalendarHeader,
parameters: {
layout: 'centered',

2
src/stories/components/CalendarSchedules.stories.tsx → src/stories/components/calendar/CalendarSchedules.stories.tsx
View File

@@ -8,7 +8,7 @@ import Instructor from 'src/shared/types/Instructor';
import { CalendarSchedules } from 'src/views/components/calendar/CalendarSchedules/CalendarSchedules';
const meta = {
title: 'Components/Common/CalendarSchedules',
title: 'Components/Calendar/CalendarSchedules',
component: CalendarSchedules,
parameters: {
layout: 'centered',

40
src/views/components/calendar/Calendar/Calendar.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
import { CalendarBottomBar } from '../CalendarBottomBar/CalendarBottomBar';
import { CalendarSchedules } from '../CalendarSchedules/CalendarSchedules';
import ImportantLinks from '../ImportantLinks';
import CalendarGrid from '../CalendarGrid/CalendarGrid';
export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
interface Props {
label: string;
}
/**
* A reusable chip component that follows the design system of the extension.
* @returns
*/
export function Calendar(): JSX.Element {
return (
<>
<CalendarHeader />
<div className='h-screen w-full flex flex-col md:flex-row'>
<div className='min-h-[30%] flex flex-col items-start gap-2.5 p-5 pl-7'>
<div className='min-h-[30%]'>
<CalendarSchedules />
</div>
<ImportantLinks />
</div>
<div className='flex flex-grow flex-col gap-4 overflow-hidden'>
<div className='flex-grow overflow-auto'>
<CalendarGrid />
</div>
<div>
<CalendarBottomBar />
</div>
</div>
</div>
</>
);
}

6
src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx
View File

@@ -7,20 +7,20 @@ import ImageIcon from '~icons/material-symbols/image';
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
type CalendarBottomBarProps = {
courses: CalendarCourseCellProps[];
courses?: CalendarCourseCellProps[];
};
/**
*
*/
export const CalendarBottomBar = ({ courses }: CalendarBottomBarProps): JSX.Element => {
if (courses.length === -1) console.log('foo'); // dumb line to make eslint happy
if (courses?.length === -1) console.log('foo'); // dumb line to make eslint happy
return (
<div className='w-full flex py-1.25'>
<div className='flex flex-grow items-center gap-3.75 pl-7.5 pr-2.5'>
<Text variant='h4'>Async. and Other:</Text>
<div className='h-14 inline-flex gap-2.5'>
{courses.map(course => (
{courses?.map(course => (
<CalendarCourseBlock
courseDeptAndInstr={course.courseDeptAndInstr}
status={course.status}

10
src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss
View File

@@ -13,7 +13,7 @@
.calendarGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: auto repeat(5, 6fr);
grid-template-rows: repeat(26, 1fr);
width: 100%;
height: 100%;
@@ -27,9 +27,9 @@
display: flex;
flex-direction: column;
gap: 10px;
position: relative; // Ensuring that child elements can be positioned in relation to this.
min-width: 800px;
min-height: 500px;
position: relative;
width: 100%;
height: 100%;
}
.day {
@@ -137,4 +137,4 @@
border-radius: 50%; /* Rounds the corners into a circle */
top: 12.5%; /* Centers the dot vertically */
left: 12.5%; /* Centers the dot horizontally */
}
}

32
src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
View File

@@ -27,8 +27,8 @@ for (let i = 0; i < 13; i++) {
} */
interface Props {
courseCells: CalendarGridCourse[];
saturdayClass: boolean;
courseCells?: CalendarGridCourse[];
saturdayClass?: boolean;
}
/**
@@ -110,21 +110,17 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
}, []);
return (
<div className={styles.calendar}>
<div className={styles.dayLabelContainer} />
{/* Displaying the rest of the calendar */}
<div className={styles.timeAndGrid}>
<div className={styles.calendarGrid}>
{/* Displaying day labels */}
<div className={styles.timeBlock} />
{daysOfWeek.map(day => (
<div key={day} className={styles.day}>
{day}
</div>
))}
{grid.map((row, rowIndex) => row)}
{accountForCourseConflicts(courseCells)}
{/* courseCells.map((block: CalendarGridCourse) => (
<div className={styles.calendarGrid}>
{/* Displaying day labels */}
<div className={styles.timeBlock} />
{daysOfWeek.map(day => (
<div key={day} className={styles.day}>
{day}
</div>
))}
{grid.map((row, rowIndex) => row)}
{courseCells ? accountForCourseConflicts(courseCells) : null}
{/* courseCells.map((block: CalendarGridCourse) => (
<div
key={`${block}`}
style={{
@@ -140,8 +136,6 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
/>
</div>
)) */}
</div>
</div>
</div>
);
}