From e3b8e4c2709049d6263e3b2533a9ef52bb2de92c Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Sat, 17 Feb 2024 12:53:50 -0600 Subject: [PATCH 01/10] fix calendar course cell colors --- src/shared/util/colors.ts | 6 +- .../components/CalendarCourseCell.stories.tsx | 81 +++++++++---------- .../components/PopupCourseBlock.stories.tsx | 6 +- .../CalendarCourseCell/CalendarCourseCell.tsx | 38 ++++++--- 4 files changed, 72 insertions(+), 59 deletions(-) diff --git a/src/shared/util/colors.ts b/src/shared/util/colors.ts index 807a2c16..d6f7fdd6 100644 --- a/src/shared/util/colors.ts +++ b/src/shared/util/colors.ts @@ -42,9 +42,9 @@ export function pickFontColor(bgColor: string): 'text-white' | 'text-black' { * Get primary and secondary colors from a tailwind colorway * @param colorway the tailwind colorway ex. "emerald" */ -export function getCourseColors(colorway: keyof typeof theme.colors): CourseColors { +export function getCourseColors(colorway: keyof typeof theme.colors, index = 600, offset = 200): CourseColors { return { - primaryColor: theme.colors[colorway][600] as string, - secondaryColor: theme.colors[colorway][800] as string, + primaryColor: theme.colors[colorway][index] as string, + secondaryColor: theme.colors[colorway][index + offset] as string, }; } diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx index 8203d74a..19c1908e 100644 --- a/src/stories/components/CalendarCourseCell.stories.tsx +++ b/src/stories/components/CalendarCourseCell.stories.tsx @@ -1,10 +1,9 @@ +import { Course, Status } from '@shared/types/Course'; +import { getCourseColors } from '@shared/util/colors'; import { Meta, StoryObj } from '@storybook/react'; +import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell'; import React from 'react'; -import { Course, Status } from 'src/shared/types/Course'; -import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting'; -import { CourseSchedule } from 'src/shared/types/CourseSchedule'; -import Instructor from 'src/shared/types/Instructor'; -import CalendarCourseCell from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell'; +import { exampleCourse } from './PopupCourseBlock.stories'; const meta = { title: 'Components/Common/CalendarCourseCell', @@ -16,52 +15,48 @@ const meta = { argTypes: { course: { control: 'object' }, meetingIdx: { control: 'number' }, - color: { control: 'color' }, + colors: { control: 'object' }, }, render: (args: any) => ( -
+
), + args: { + course: exampleCourse, + meetingIdx: 0, + colors: getCourseColors('emerald', 500), + }, } satisfies Meta; export default meta; type Story = StoryObj; -export const Default: Story = { - args: { - course: new Course({ - uniqueId: 123, - number: '311C', - fullName: "311C - Bevo's Default Course", - courseName: "Bevo's Default Course", - department: 'BVO', - creditHours: 3, - status: Status.WAITLISTED, - instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })], - isReserved: false, - url: '', - flags: [], - schedule: new CourseSchedule({ - meetings: [ - new CourseMeeting({ - days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI], - startTime: 480, - endTime: 570, - location: { - building: 'UTC', - room: '123', - }, - }), - ], - }), - instructionMode: 'In Person', - semester: { - year: 2024, - season: 'Spring', - }, - }), - meetingIdx: 0, - color: 'red', - }, +export const Default: Story = {}; + +export const Variants: Story = { + render: props => ( +
+ + + + +
+ ), }; diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index adda6062..0e60f9fe 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react'; +import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock'; import React from 'react'; import { Course, Status } from 'src/shared/types/Course'; import { CourseMeeting } from 'src/shared/types/CourseMeeting'; import Instructor from 'src/shared/types/Instructor'; -import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock'; import { getCourseColors } from 'src/shared/util/colors'; import { theme } from 'unocss/preset-mini'; -const exampleCourse: Course = new Course({ +export const exampleCourse: Course = new Course({ courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB', creditHours: 3, department: 'C S', @@ -103,7 +103,7 @@ export const test_colors = Object.keys(theme.colors) export const AllColors: Story = { render: props => ( -
+
{test_colors.map((color, i) => ( ))} diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx index 27b2519e..f8e7eb12 100644 --- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx +++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx @@ -1,6 +1,7 @@ +import { Course, Status } from '@shared/types/Course'; +import { CourseMeeting } from '@shared/types/CourseMeeting'; import React from 'react'; -import { Course, Status } from 'src/shared/types/Course'; -import { CourseMeeting } from 'src/shared/types/CourseMeeting'; +import { CourseColors, pickFontColor } from 'src/shared/util/colors'; import ClosedIcon from '~icons/material-symbols/lock'; import WaitlistIcon from '~icons/material-symbols/timelapse'; import CancelledIcon from '~icons/material-symbols/warning'; @@ -11,11 +12,14 @@ export interface CalendarCourseBlockProps { course: Course; /* index into course meeting array to display */ meetingIdx?: number; - /** The background color for the course. */ - color: string; + colors: CourseColors; } -const CalendarCourseBlock: React.FC = ({ course, meetingIdx }: CalendarCourseBlockProps) => { +const CalendarCourseBlock: React.FC = ({ + course, + meetingIdx, + colors, +}: CalendarCourseBlockProps) => { let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null; let rightIcon: React.ReactNode | null = null; if (course.status === Status.WAITLISTED) { @@ -26,20 +30,34 @@ const CalendarCourseBlock: React.FC = ({ course, meeti rightIcon = ; } + // whiteText based on secondaryColor + const fontColor = pickFontColor(colors.primaryColor); + return ( -
+
{course.department} {course.number} - {course.instructors[0].lastName} - {`${meeting.getTimeString({ separator: '–', capitalize: true })}${ - meeting.location ? ` – ${meeting.location.building}` : '' - }`} + {meeting && + `${meeting.getTimeString({ separator: '–', capitalize: true })}${ + meeting.location ? ` – ${meeting.location.building}` : '' + }`}
{rightIcon && ( -
+
{rightIcon}
)} From 2f19c57553a670351d7f4cebcb3cc4a18b39f3c5 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Sat, 17 Feb 2024 12:59:43 -0600 Subject: [PATCH 02/10] fix margins on list component --- src/views/components/common/List/List.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/views/components/common/List/List.tsx b/src/views/components/common/List/List.tsx index 8f2f24b5..c61314d4 100644 --- a/src/views/components/common/List/List.tsx +++ b/src/views/components/common/List/List.tsx @@ -135,8 +135,7 @@ const List: React.FC = ({ draggableElements, itemHeight, listHeight,
{items.map((item, index) => ( @@ -150,7 +149,9 @@ const List: React.FC = ({ draggableElements, itemHeight, listHeight, marginBottom: `${gap}px`, }} > - {React.cloneElement(item.content, { dragHandleProps: draggableProvided.dragHandleProps })} + {React.cloneElement(item.content, { + dragHandleProps: draggableProvided.dragHandleProps, + })}
)} From 8edd062588f4e4d5f9b9cc17c5acef7d263aff73 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Sat, 17 Feb 2024 13:02:24 -0600 Subject: [PATCH 03/10] update --- .../components/CalendarCourseCell.stories.tsx | 2 +- .../CalendarCourseCell/CalendarCourseCell.tsx | 6 +++--- .../common/CalendarGrid/CalendarGrid.tsx | 20 ++++++++++++------- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx index 8203d74a..647a766d 100644 --- a/src/stories/components/CalendarCourseCell.stories.tsx +++ b/src/stories/components/CalendarCourseCell.stories.tsx @@ -45,7 +45,7 @@ export const Default: Story = { schedule: new CourseSchedule({ meetings: [ new CourseMeeting({ - days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI], + days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F], startTime: 480, endTime: 570, location: { diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx index 27b2519e..cd0969a7 100644 --- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx +++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx @@ -6,7 +6,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse'; import CancelledIcon from '~icons/material-symbols/warning'; import Text from '../Text/Text'; -export interface CalendarCourseBlockProps { +export interface CalendarCourseCellProps { /** The Course that the meeting is for. */ course: Course; /* index into course meeting array to display */ @@ -15,7 +15,7 @@ export interface CalendarCourseBlockProps { color: string; } -const CalendarCourseBlock: React.FC = ({ course, meetingIdx }: CalendarCourseBlockProps) => { +const CalendarCourseCell: React.FC = ({ course, meetingIdx }: CalendarCourseCellProps) => { let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null; let rightIcon: React.ReactNode | null = null; if (course.status === Status.WAITLISTED) { @@ -47,4 +47,4 @@ const CalendarCourseBlock: React.FC = ({ course, meeti ); }; -export default CalendarCourseBlock; +export default CalendarCourseCell; diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 3d83ef9a..4dbd06c9 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { DAY_MAP } from 'src/shared/types/CourseMeeting'; import styles from './CalendarGrid.module.scss'; import CalendarCell from '../CalendarGridCell/CalendarGridCell'; -import { CourseMeeting } from 'src/shared/types/CourseMeeting'; +import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell'; +import { Chip } from '../Chip/Chip'; + const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key)); const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); @@ -22,14 +24,14 @@ for (let i = 0; i < 13; i++) { } interface Props { - CourseMeetingBlocks: CourseMeeting[]; + courseCells: typeof CalendarCourseCell[]; } /** * Grid of CalendarGridCell components forming the user's course schedule calendar view * @param props */ -export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren): JSX.Element { +export function Calendar({ courseCells }: React.PropsWithChildren): JSX.Element { return (
@@ -54,12 +56,16 @@ export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren {day}
))} - {grid.map((row, rowIndex) => row)} + {grid.map((row) => row)}
- {courseMeetingBlocks.map((block: CourseMeeting, index: number) => ( -
- {block} + {courseCells.map((Block: typeof CalendarCourseCell) => ( +
+
))}
From 3c7b35d5f3e7a0f27dda26f024b8b630c72e1541 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Sat, 17 Feb 2024 13:06:46 -0600 Subject: [PATCH 04/10] Revert "update" This reverts commit 8edd062588f4e4d5f9b9cc17c5acef7d263aff73. --- .../components/CalendarCourseCell.stories.tsx | 2 +- .../CalendarCourseCell/CalendarCourseCell.tsx | 6 +++--- .../common/CalendarGrid/CalendarGrid.tsx | 20 +++++++------------ 3 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx index 647a766d..8203d74a 100644 --- a/src/stories/components/CalendarCourseCell.stories.tsx +++ b/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: { diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx index cd0969a7..27b2519e 100644 --- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx +++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx @@ -6,7 +6,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse'; import CancelledIcon from '~icons/material-symbols/warning'; import Text from '../Text/Text'; -export interface CalendarCourseCellProps { +export interface CalendarCourseBlockProps { /** The Course that the meeting is for. */ course: Course; /* index into course meeting array to display */ @@ -15,7 +15,7 @@ export interface CalendarCourseCellProps { color: string; } -const CalendarCourseCell: React.FC = ({ course, meetingIdx }: CalendarCourseCellProps) => { +const CalendarCourseBlock: React.FC = ({ course, meetingIdx }: CalendarCourseBlockProps) => { let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null; let rightIcon: React.ReactNode | null = null; if (course.status === Status.WAITLISTED) { @@ -47,4 +47,4 @@ const CalendarCourseCell: React.FC = ({ course, meeting ); }; -export default CalendarCourseCell; +export default CalendarCourseBlock; diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 4dbd06c9..3d83ef9a 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -2,9 +2,7 @@ import React from 'react'; import { DAY_MAP } from 'src/shared/types/CourseMeeting'; import styles from './CalendarGrid.module.scss'; import CalendarCell from '../CalendarGridCell/CalendarGridCell'; -import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell'; -import { Chip } from '../Chip/Chip'; - +import { CourseMeeting } from 'src/shared/types/CourseMeeting'; const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key)); const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); @@ -24,14 +22,14 @@ for (let i = 0; i < 13; i++) { } interface Props { - courseCells: typeof CalendarCourseCell[]; + CourseMeetingBlocks: CourseMeeting[]; } /** * Grid of CalendarGridCell components forming the user's course schedule calendar view * @param props */ -export function Calendar({ courseCells }: React.PropsWithChildren): JSX.Element { +export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren): JSX.Element { return (
@@ -56,16 +54,12 @@ export function Calendar({ courseCells }: React.PropsWithChildren): JSX.E {day}
))} - {grid.map((row) => row)} + {grid.map((row, rowIndex) => row)}
- {courseCells.map((Block: typeof CalendarCourseCell) => ( -
- + {courseMeetingBlocks.map((block: CourseMeeting, index: number) => ( +
+ {block}
))}
From c0968ef7a02991f0137a599ddb18819b9522b751 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Sat, 17 Feb 2024 13:07:43 -0600 Subject: [PATCH 05/10] Revert "Revert "update"" This reverts commit 3c7b35d5f3e7a0f27dda26f024b8b630c72e1541. --- .../components/CalendarCourseCell.stories.tsx | 2 +- .../CalendarCourseCell/CalendarCourseCell.tsx | 6 +++--- .../common/CalendarGrid/CalendarGrid.tsx | 20 ++++++++++++------- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx index 8203d74a..647a766d 100644 --- a/src/stories/components/CalendarCourseCell.stories.tsx +++ b/src/stories/components/CalendarCourseCell.stories.tsx @@ -45,7 +45,7 @@ export const Default: Story = { schedule: new CourseSchedule({ meetings: [ new CourseMeeting({ - days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI], + days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F], startTime: 480, endTime: 570, location: { diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx index 27b2519e..cd0969a7 100644 --- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx +++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx @@ -6,7 +6,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse'; import CancelledIcon from '~icons/material-symbols/warning'; import Text from '../Text/Text'; -export interface CalendarCourseBlockProps { +export interface CalendarCourseCellProps { /** The Course that the meeting is for. */ course: Course; /* index into course meeting array to display */ @@ -15,7 +15,7 @@ export interface CalendarCourseBlockProps { color: string; } -const CalendarCourseBlock: React.FC = ({ course, meetingIdx }: CalendarCourseBlockProps) => { +const CalendarCourseCell: React.FC = ({ course, meetingIdx }: CalendarCourseCellProps) => { let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null; let rightIcon: React.ReactNode | null = null; if (course.status === Status.WAITLISTED) { @@ -47,4 +47,4 @@ const CalendarCourseBlock: React.FC = ({ course, meeti ); }; -export default CalendarCourseBlock; +export default CalendarCourseCell; diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 3d83ef9a..4dbd06c9 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { DAY_MAP } from 'src/shared/types/CourseMeeting'; import styles from './CalendarGrid.module.scss'; import CalendarCell from '../CalendarGridCell/CalendarGridCell'; -import { CourseMeeting } from 'src/shared/types/CourseMeeting'; +import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell'; +import { Chip } from '../Chip/Chip'; + const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key)); const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); @@ -22,14 +24,14 @@ for (let i = 0; i < 13; i++) { } interface Props { - CourseMeetingBlocks: CourseMeeting[]; + courseCells: typeof CalendarCourseCell[]; } /** * Grid of CalendarGridCell components forming the user's course schedule calendar view * @param props */ -export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren): JSX.Element { +export function Calendar({ courseCells }: React.PropsWithChildren): JSX.Element { return (
@@ -54,12 +56,16 @@ export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren {day}
))} - {grid.map((row, rowIndex) => row)} + {grid.map((row) => row)}
- {courseMeetingBlocks.map((block: CourseMeeting, index: number) => ( -
- {block} + {courseCells.map((Block: typeof CalendarCourseCell) => ( +
+
))}
From 73fe14e17a36071657f45c05783039c12b1aa9fb Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Sat, 17 Feb 2024 13:27:07 -0600 Subject: [PATCH 06/10] fix calendar course cell spacing --- .../components/CalendarCourseCell.stories.tsx | 2 +- .../CalendarCourseCell/CalendarCourseCell.tsx | 19 +++++++++++++------ .../PopupCourseBlock/PopupCourseBlock.tsx | 18 ++++++++++-------- 3 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx index 19c1908e..1e9d3c84 100644 --- a/src/stories/components/CalendarCourseCell.stories.tsx +++ b/src/stories/components/CalendarCourseCell.stories.tsx @@ -36,7 +36,7 @@ export const Default: Story = {}; export const Variants: Story = { render: props => ( -
+
= ({ backgroundColor: colors.primaryColor, }} > -
- +
+ {course.department} {course.number} - {course.instructors[0].lastName} - - {meeting && - `${meeting.getTimeString({ separator: '–', capitalize: true })}${ + {meeting && ( + + {`${meeting.getTimeString({ separator: '–', capitalize: true })}${ meeting.location ? ` – ${meeting.location.building}` : '' }`} - + + )}
{rightIcon && (
- + {course.uniqueId} {course.department} {course.number} –{' '} {course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)} From 2cffb794dbb1919dd094a25c94f847c69e436d09 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Sat, 17 Feb 2024 13:32:06 -0600 Subject: [PATCH 07/10] update course block names --- .../common/CalendarCourseCell/CalendarCourseCell.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx index 3d4868ac..505e5823 100644 --- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx +++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx @@ -8,7 +8,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse'; import CancelledIcon from '~icons/material-symbols/warning'; import Text from '../Text/Text'; -export interface CalendarCourseCellProps { +export interface CalendarCourseBlockProps { /** The Course that the meeting is for. */ course: Course; /* index into course meeting array to display */ @@ -72,4 +72,4 @@ const CalendarCourseBlock: React.FC = ({ ); }; -export default CalendarCourseCell; +export default CalendarCourseBlock; From b8fe5109a946f1efd1e09291f92e85ebfbc448a8 Mon Sep 17 00:00:00 2001 From: Vinson Zheng Date: Sat, 17 Feb 2024 14:22:24 -0600 Subject: [PATCH 08/10] Added CalendarHeader and its Storybook, need to resize --- .../components/CalendarGrid.stories.tsx | 16 +++--- .../components/CalendarHeader.stories.tsx | 17 ++++++ .../common/CalendarHeader/CalenderHeader.tsx | 53 +++++++++++++++++++ .../ScheduleTotalHoursAndCourses.tsx | 26 ++++----- 4 files changed, 87 insertions(+), 25 deletions(-) create mode 100644 src/stories/components/CalendarHeader.stories.tsx create mode 100644 src/views/components/common/CalendarHeader/CalenderHeader.tsx diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx index 6d8861b9..db63e5b6 100644 --- 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; export default meta; type Story = StoryObj; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = {}; diff --git a/src/stories/components/CalendarHeader.stories.tsx b/src/stories/components/CalendarHeader.stories.tsx new file mode 100644 index 00000000..6833b7b1 --- /dev/null +++ b/src/stories/components/CalendarHeader.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Meta, StoryObj } from '@storybook/react'; +import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader'; + +const meta = { + title: 'Components/CalendarHeader', + component: CalendarHeader, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx new file mode 100644 index 00000000..b5d07274 --- /dev/null +++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { Status } from '@shared/types/Course'; +import Divider from '../Divider/Divider'; +import { Button } from '../Button/Button'; +import Text from '../Text/Text'; +import MenuIcon from '~icons/material-symbols/menu'; +import LogoIcon from '~icons/material-symbols/add-circle-outline'; +import UndoIcon from '~icons/material-symbols/undo'; +import RedoIcon from '~icons/material-symbols/redo'; +import SettingsIcon from '~icons/material-symbols/settings'; +import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses'; +import CourseStatus from '../CourseStatus/CourseStatus'; + +const CalendarHeader = () => ( +
+
+ +
+); + +export default CalendarHeader; diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx index 72d7782a..fd91d1f7 100644 --- a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx +++ b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx @@ -15,27 +15,19 @@ export interface ScheduleTotalHoursAndCoursesProps { * * @param props ScheduleTotalHoursAndCoursesProps */ -export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours, totalCourses }: ScheduleTotalHoursAndCoursesProps): JSX.Element { +export default function ScheduleTotalHoursAndCourses({ + scheduleName, + totalHours, + totalCourses, +}: ScheduleTotalHoursAndCoursesProps): JSX.Element { return ( -
- +
+ {`${scheduleName}: `} - + {`${totalHours} HOURS`} - + {`${totalCourses} courses`} From 8b2d07033c1e84020e32abfd76df982386f4a2c4 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Sat, 17 Feb 2024 14:27:32 -0600 Subject: [PATCH 09/10] update --- .../components/CalendarGrid.stories.tsx | 32 +++++++++++-------- .../common/CalendarGrid/CalendarGrid.tsx | 31 +++++++++--------- 2 files changed, 35 insertions(+), 28 deletions(-) diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx index 6d8861b9..881ff93d 100644 --- a/src/stories/components/CalendarGrid.stories.tsx +++ b/src/stories/components/CalendarGrid.stories.tsx @@ -1,19 +1,25 @@ -// Calendar.stories.tsx -import React from 'react'; -import Calendar from '@views/components/common/CalendarGrid/CalendarGrid'; -import type { Meta, StoryObj } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; +import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid'; 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', + title: 'Components/Common/CalendarGrid', + component: CalendarGrid, + parameters: { + layout: 'centered', + }, tags: ['autodocs'], - } -} satisfies Meta; - + argTypes: { + saturday: { control: 'text' }, + sunday: { control: 'text' }, + }, +} satisfies Meta; export default meta; + type Story = StoryObj; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = { + args: { + saturday: true, + sunday: true, + }, +}; \ No newline at end of file diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 4dbd06c9..0bd85c10 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -5,7 +5,6 @@ import CalendarCell from '../CalendarGridCell/CalendarGridCell'; import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell'; import { Chip } from '../Chip/Chip'; - const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key)); const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); const grid = []; @@ -24,15 +23,15 @@ for (let i = 0; i < 13; i++) { } interface Props { - courseCells: typeof CalendarCourseCell[]; + courseCells: any[]; + saturdayClass: boolean; } /** * Grid of CalendarGridCell components forming the user's course schedule calendar view * @param props */ -export function Calendar({ courseCells }: React.PropsWithChildren): JSX.Element { - +function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren ): JSX.Element { return (
@@ -56,20 +55,22 @@ export function Calendar({ courseCells }: React.PropsWithChildren): JSX.E {day}
))} - {grid.map((row) => row)} + {grid.map(row => row)}
- {courseCells.map((Block: typeof CalendarCourseCell) => ( -
- + {/* courseCells.map((Block: typeof CalendarCourseCell) => ( +
+
- ))} + )) */}
); -}; +} -export default Calendar; +export default CalendarGrid; From 71d8ac7486b8b44cf3feddf577da2f173525f898 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Sat, 17 Feb 2024 14:30:15 -0600 Subject: [PATCH 10/10] Update CalendarGrid.stories.tsx --- src/stories/components/CalendarGrid.stories.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx index 881ff93d..26fa245e 100644 --- a/src/stories/components/CalendarGrid.stories.tsx +++ b/src/stories/components/CalendarGrid.stories.tsx @@ -9,8 +9,7 @@ const meta = { }, tags: ['autodocs'], argTypes: { - saturday: { control: 'text' }, - sunday: { control: 'text' }, + saturdayClass: { control: 'boolean' }, }, } satisfies Meta; export default meta; @@ -19,7 +18,6 @@ type Story = StoryObj; export const Default: Story = { args: { - saturday: true, - sunday: true, + saturdayClass: true, }, }; \ No newline at end of file