From 27c19fe9b7204cd7ce73cbfcbe84a73c4604d325 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Sat, 3 Feb 2024 14:42:22 -0600 Subject: [PATCH 01/19] make simple component and storybook entry --- .../components/PopupCourseBlock.stories.tsx | 87 +++++++++++++++++++ .../PopupCourseBlock/PopupCourseBlock.tsx | 20 +++++ 2 files changed, 107 insertions(+) create mode 100644 src/stories/components/PopupCourseBlock.stories.tsx create mode 100644 src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx new file mode 100644 index 000000000..28e24dd58 --- /dev/null +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -0,0 +1,87 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { Course, Status } from 'src/shared/types/Course'; +import { CourseMeeting } from 'src/shared/types/CourseMeeting'; +import PopupCourseBlock from '../../views/components/common/PopupCourseBlock/PopupCourseBlock'; + +const exampleCourse: Course = new Course({ + courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB', + creditHours: 3, + department: 'C S', + description: [ + 'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.', + 'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.', + 'May be counted toward the Quantitative Reasoning flag requirement.', + 'Designed to accommodate 100 or more students.', + 'Taught as a Web-based course.', + ], + flags: ['Quantitative Reasoning'], + fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB', + instructionMode: 'Online', + instructors: [], + isReserved: false, + number: '303E', + schedule: { + meetings: [ + new CourseMeeting({ + days: ['Tuesday', 'Thursday'], + endTime: 660, + startTime: 570, + }), + ], + }, + semester: { + code: '12345', + season: 'Spring', + year: 2024, + }, + status: Status.CANCELLED, + uniqueId: 12345, + url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/', +}); + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +const meta = { + title: 'Components/Common/PopupCourseBlock', + component: PopupCourseBlock, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + args: { + course: exampleCourse, + // children: 'The quick brown fox jumps over the lazy dog.', + }, + argTypes: { + Course: { control: 'none' }, + // children: { control: 'text' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Default: Story = { + args: {}, +}; + +export const AllVariants: Story = { + args: { + children: 'The quick brown fox jumps over the lazy dog.', + }, + render: props => ( +
+ +
+ ), + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4', + }, + }, +}; diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx new file mode 100644 index 000000000..212652bac --- /dev/null +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Course } from 'src/shared/types/Course'; + +type PopupCourseBlockProps = { + className?: string; + style?: React.CSSProperties; + course: Course; +}; + +/** + * + * @param props + */ +export default function PopupCourseBlock({ className, style, course }: PopupCourseBlockProps) { + return ( +
+ {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.map(v => v.lastName)}`} +
+ ); +} From 7cf503c65a9747f65e13d7d6fc01849b141d6a83 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Sat, 3 Feb 2024 15:25:27 -0600 Subject: [PATCH 02/19] uhhh made stuff --- .../PopupCourseBlock.module.scss | 33 +++++++++++++++++++ .../PopupCourseBlock/PopupCourseBlock.tsx | 17 +++++++--- 2 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 src/views/components/common/PopupCourseBlock/PopupCourseBlock.module.scss diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.module.scss b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.module.scss new file mode 100644 index 000000000..00b4079e0 --- /dev/null +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.module.scss @@ -0,0 +1,33 @@ +.courseBlock { + width: 285px; + height: 50px; + background-color: aquamarine; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 10px; + border-radius: 4px; + // padding: 10px; +} + +.dragHandle { + border-radius: 4px 0 0 4px; + background-color: #065f46; + height: 100%; + color: white; + width: 20px; + + padding-left: 5px; + font-size: 25px; + display: flex; + align-items: center; + justify-items: center; +} + +.courseInfo { + flex-grow: 1; +} + +.icon { + justify-self: flex-end; +} diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index 212652bac..bc8f74185 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -1,5 +1,9 @@ import React from 'react'; import { Course } from 'src/shared/types/Course'; +import classNames from 'classnames'; +import styles from './PopupCourseBlock.module.scss'; +import Text from '../Text/Text'; +import Icon from '../Icon/Icon'; type PopupCourseBlockProps = { className?: string; @@ -8,13 +12,18 @@ type PopupCourseBlockProps = { }; /** + * The "course block" to be used in the extension popup. * - * @param props + * @param props PopupCourseBlockProps */ -export default function PopupCourseBlock({ className, style, course }: PopupCourseBlockProps) { +export default function PopupCourseBlock({ className, style, course }: PopupCourseBlockProps): JSX.Element { return ( -
- {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.map(v => v.lastName)}`} +
+
⋮⋮
+ + {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.map(v => v.lastName)}`} + +
); } From f9dc9b9af77ba6cdc15dbde70251232f45264ef9 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Sun, 4 Feb 2024 15:01:00 -0600 Subject: [PATCH 03/19] working still --- .../components/PopupCourseBlock.stories.tsx | 2 +- .../PopupCourseBlock.module.scss | 33 ------------------- .../PopupCourseBlock/PopupCourseBlock.tsx | 22 ++++++++----- 3 files changed, 15 insertions(+), 42 deletions(-) delete mode 100644 src/views/components/common/PopupCourseBlock/PopupCourseBlock.module.scss diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index 28e24dd58..694281f1c 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -74,7 +74,7 @@ export const AllVariants: Story = { children: 'The quick brown fox jumps over the lazy dog.', }, render: props => ( -
+
), diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.module.scss b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.module.scss deleted file mode 100644 index 00b4079e0..000000000 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.module.scss +++ /dev/null @@ -1,33 +0,0 @@ -.courseBlock { - width: 285px; - height: 50px; - background-color: aquamarine; - display: flex; - align-items: center; - justify-content: flex-start; - gap: 10px; - border-radius: 4px; - // padding: 10px; -} - -.dragHandle { - border-radius: 4px 0 0 4px; - background-color: #065f46; - height: 100%; - color: white; - width: 20px; - - padding-left: 5px; - font-size: 25px; - display: flex; - align-items: center; - justify-items: center; -} - -.courseInfo { - flex-grow: 1; -} - -.icon { - justify-self: flex-end; -} diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index bc8f74185..58edf367d 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -1,13 +1,11 @@ import React from 'react'; import { Course } from 'src/shared/types/Course'; import classNames from 'classnames'; -import styles from './PopupCourseBlock.module.scss'; import Text from '../Text/Text'; import Icon from '../Icon/Icon'; type PopupCourseBlockProps = { className?: string; - style?: React.CSSProperties; course: Course; }; @@ -16,14 +14,22 @@ type PopupCourseBlockProps = { * * @param props PopupCourseBlockProps */ -export default function PopupCourseBlock({ className, style, course }: PopupCourseBlockProps): JSX.Element { +export default function PopupCourseBlock({ className, course }: PopupCourseBlockProps): JSX.Element { return ( -
-
⋮⋮
- - {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.map(v => v.lastName)}`} + //
+
+
+ +
+ + {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}`} - +
); } From 3b655f8c7b1c67aae0b34874624beece6f669c82 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 10:45:40 -0600 Subject: [PATCH 04/19] add more props and fix up stories a bit --- .../components/PopupCourseBlock.stories.tsx | 31 ++++++++++++++----- .../PopupCourseBlock/PopupCourseBlock.tsx | 25 +++++++++++---- 2 files changed, 42 insertions(+), 14 deletions(-) diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index 694281f1c..f6225557b 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -18,7 +18,7 @@ const exampleCourse: Course = new Course({ flags: ['Quantitative Reasoning'], fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB', instructionMode: 'Online', - instructors: [], + instructors: [{ firstName: 'Bevo', lastName: 'Bevo', fullName: 'Bevo Bevo' }], isReserved: false, number: '303E', schedule: { @@ -52,12 +52,16 @@ const meta = { tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/api/argtypes args: { + primaryColor: 'bg-emerald-300', + secondaryColor: 'bg-emerald-800', + whiteText: false, course: exampleCourse, - // children: 'The quick brown fox jumps over the lazy dog.', }, argTypes: { - Course: { control: 'none' }, - // children: { control: 'text' }, + primaryColor: { control: 'text' }, + secondaryColor: { control: 'text' }, + whiteText: { control: 'boolean' }, + course: { control: 'object' }, }, } satisfies Meta; @@ -66,22 +70,33 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const Default: Story = { - args: {}, + args: { + course: exampleCourse, + primaryColor: 'bg-emerald-300', + secondaryColor: 'bg-emerald-500', + whiteText: false, + }, }; export const AllVariants: Story = { args: { - children: 'The quick brown fox jumps over the lazy dog.', + // children: 'The quick brown fox jumps over the lazy dog.', }, render: props => (
- + +
), parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4', + url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=1046-6714&mode=design&t=5Bjr7qGHNXmjfMTc-0', }, }, }; diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index 58edf367d..30289c20f 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -7,6 +7,9 @@ import Icon from '../Icon/Icon'; type PopupCourseBlockProps = { className?: string; course: Course; + primaryColor: string; + secondaryColor: string; + whiteText?: boolean; }; /** @@ -14,22 +17,32 @@ type PopupCourseBlockProps = { * * @param props PopupCourseBlockProps */ -export default function PopupCourseBlock({ className, course }: PopupCourseBlockProps): JSX.Element { +export default function PopupCourseBlock({ + className, + course, + primaryColor, + secondaryColor, + whiteText, +}: PopupCourseBlockProps): JSX.Element { return ( - //
-
+
- + {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}`} - +
); } From ce275a8fb1f8061cefb5cd4c75ad42a0b20aedcf Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 14:35:12 -0600 Subject: [PATCH 05/19] export interface of props --- .../components/common/PopupCourseBlock/PopupCourseBlock.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index 30289c20f..c9a3b28f5 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -4,7 +4,10 @@ import classNames from 'classnames'; import Text from '../Text/Text'; import Icon from '../Icon/Icon'; -type PopupCourseBlockProps = { +/** + * Props for PopupCourseBlock + */ +export interface PopupCourseBlockProps { className?: string; course: Course; primaryColor: string; From 8e83774d48418caf2d8083f1da7d4e1f5a5c3f01 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 14:49:00 -0600 Subject: [PATCH 06/19] fix up stories --- .../components/PopupCourseBlock.stories.tsx | 24 +++++++++++++++---- .../PopupCourseBlock/PopupCourseBlock.tsx | 4 ++-- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index f6225557b..1fb11d593 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -58,10 +58,22 @@ const meta = { course: exampleCourse, }, argTypes: { - primaryColor: { control: 'text' }, - secondaryColor: { control: 'text' }, - whiteText: { control: 'boolean' }, - course: { control: 'object' }, + primaryColor: { + description: 'background tailwind color', + control: 'text', + }, + secondaryColor: { + description: 'background tailwind for drag handle and icon', + control: 'text', + }, + whiteText: { + description: 'control text color', + control: 'boolean', + }, + course: { + description: 'the course to show data for', + control: 'object', + }, }, } satisfies Meta; @@ -84,6 +96,10 @@ export const AllVariants: Story = { }, render: props => (
+ {props.className}
+ {props.primaryColor}
+ {props.secondaryColor}
+ {props.whiteText}
-
+
From 804f850191910e40de65d51c3fb12fe73198c373 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 14:51:46 -0600 Subject: [PATCH 07/19] editing stories still --- .../components/PopupCourseBlock.stories.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index 1fb11d593..2de321927 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -92,15 +92,17 @@ export const Default: Story = { export const AllVariants: Story = { args: { - // children: 'The quick brown fox jumps over the lazy dog.', + course: exampleCourse, + primaryColor: 'bg-emerald-300', + secondaryColor: 'bg-emerald-500', + whiteText: false, }, render: props => (
- {props.className}
- {props.primaryColor}
- {props.secondaryColor}
- {props.whiteText}
- + Date: Mon, 5 Feb 2024 15:23:08 -0600 Subject: [PATCH 08/19] added more variants, but still cant fix drag handle --- .../components/PopupCourseBlock.stories.tsx | 68 +++++++++++++++---- .../PopupCourseBlock/PopupCourseBlock.tsx | 21 ++++-- 2 files changed, 70 insertions(+), 19 deletions(-) diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index 2de321927..469befec7 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; 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'; const exampleCourse: Course = new Course({ @@ -18,7 +19,13 @@ const exampleCourse: Course = new Course({ flags: ['Quantitative Reasoning'], fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB', instructionMode: 'Online', - instructors: [{ firstName: 'Bevo', lastName: 'Bevo', fullName: 'Bevo Bevo' }], + instructors: [ + new Instructor({ + firstName: 'Bevo', + lastName: 'Bevo', + fullName: 'Bevo Bevo', + }), + ], isReserved: false, number: '303E', schedule: { @@ -35,7 +42,7 @@ const exampleCourse: Course = new Course({ season: 'Spring', year: 2024, }, - status: Status.CANCELLED, + status: Status.WAITLISTED, uniqueId: 12345, url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/', }); @@ -98,17 +105,52 @@ export const AllVariants: Story = { whiteText: false, }, render: props => ( -
- - +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
), parameters: { diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index f6590a7dc..50acd8133 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -1,9 +1,16 @@ import React from 'react'; -import { Course } from 'src/shared/types/Course'; +import { Course, Status } from 'src/shared/types/Course'; import classNames from 'classnames'; import Text from '../Text/Text'; import Icon from '../Icon/Icon'; +const conversion = { + WAITLISTED: 'timelapse', + CLOSED: 'lock', + CANCELLED: 'warning', + CONFLICT: 'error', +}; + /** * Props for PopupCourseBlock */ @@ -41,11 +48,13 @@ export default function PopupCourseBlock({ {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}`} - + {course.status !== Status.OPEN && ( + + )}
); } From 655451c5da511208e558b4fc07d7e51e96f64af5 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 15:34:07 -0600 Subject: [PATCH 09/19] still trying to fix bug --- src/stories/components/PopupCourseBlock.stories.tsx | 9 ++------- .../common/PopupCourseBlock/PopupCourseBlock.tsx | 4 ++-- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index 469befec7..19e1a5350 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -60,7 +60,7 @@ const meta = { // More on argTypes: https://storybook.js.org/docs/api/argtypes args: { primaryColor: 'bg-emerald-300', - secondaryColor: 'bg-emerald-800', + secondaryColor: 'bg-emerald-500', whiteText: false, course: exampleCourse, }, @@ -89,12 +89,7 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const Default: Story = { - args: { - course: exampleCourse, - primaryColor: 'bg-emerald-300', - secondaryColor: 'bg-emerald-500', - whiteText: false, - }, + args: {}, }; export const AllVariants: Story = { diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index 50acd8133..d685c3f04 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -42,7 +42,7 @@ export default function PopupCourseBlock({ 'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3' )} > -
+
@@ -51,7 +51,7 @@ export default function PopupCourseBlock({ {course.status !== Status.OPEN && ( )} From 12101be22ec010dc4caadb325e257922f298e6f3 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 16:00:01 -0600 Subject: [PATCH 10/19] fix ugly bug Co-authored-by: Razboy20 --- .../components/PopupCourseBlock.stories.tsx | 9 ---- .../PopupCourseBlock/PopupCourseBlock.tsx | 50 ++++++++++++------- 2 files changed, 32 insertions(+), 27 deletions(-) diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index 19e1a5350..8ff7c79e3 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -137,15 +137,6 @@ export const AllVariants: Story = { whiteText />
-
- - -
), parameters: { diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index d685c3f04..a733c37ff 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -2,14 +2,10 @@ import React from 'react'; import { Course, Status } from 'src/shared/types/Course'; import classNames from 'classnames'; import Text from '../Text/Text'; -import Icon from '../Icon/Icon'; - -const conversion = { - WAITLISTED: 'timelapse', - CLOSED: 'lock', - CANCELLED: 'warning', - CONFLICT: 'error', -}; +import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; +import WaitlistIcon from '~icons/material-symbols/timelapse'; +import ClosedIcon from '~icons/material-symbols/lock'; +import CancelledIcon from '~icons/material-symbols/warning'; /** * Props for PopupCourseBlock @@ -22,6 +18,18 @@ export interface PopupCourseBlockProps { whiteText?: boolean; } +function getStatusIcon(status: Status, classList = ''): React.ReactElement { + switch (status) { + case Status.WAITLISTED: + return ; + case Status.CLOSED: + return ; + case Status.CANCELLED: + return ; + default: + } +} + /** * The "course block" to be used in the extension popup. * @@ -42,19 +50,25 @@ export default function PopupCourseBlock({ 'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3' )} > -
- +
+
- + {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}`} - {course.status !== Status.OPEN && ( - - )} + {course.status !== Status.OPEN && + getStatusIcon(course.status, `text-white justify-self-end rounded p-1px w-5 h-5 ${secondaryColor}`)}
); } From 1d10a1bdafce4b0174f8b60beb6b3860444d8ed6 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 16:02:51 -0600 Subject: [PATCH 11/19] create icon helper --- src/shared/util/icons.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/shared/util/icons.tsx diff --git a/src/shared/util/icons.tsx b/src/shared/util/icons.tsx new file mode 100644 index 000000000..fcfbcbfcb --- /dev/null +++ b/src/shared/util/icons.tsx @@ -0,0 +1,24 @@ +import classNames from 'classnames'; +import React from 'react'; +import { Status } from '../types/Course'; +import WaitlistIcon from '~icons/material-symbols/timelapse'; +import ClosedIcon from '~icons/material-symbols/lock'; +import CancelledIcon from '~icons/material-symbols/warning'; + +/** + * Get Icon component based on status + * @param status status + * @param className className string + * @returns React.ReactElement - the icon component + */ +export function getStatusIcon(status: Status, className = ''): React.ReactElement { + switch (status) { + case Status.WAITLISTED: + return ; + case Status.CLOSED: + return ; + case Status.CANCELLED: + return ; + default: + } +} From 69b1d5588c1021cb7488a5f9a414c546f6ec88b2 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 16:03:46 -0600 Subject: [PATCH 12/19] use icon helper --- .../common/PopupCourseBlock/PopupCourseBlock.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index a733c37ff..8b9d54223 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -3,9 +3,6 @@ import { Course, Status } from 'src/shared/types/Course'; import classNames from 'classnames'; import Text from '../Text/Text'; import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; -import WaitlistIcon from '~icons/material-symbols/timelapse'; -import ClosedIcon from '~icons/material-symbols/lock'; -import CancelledIcon from '~icons/material-symbols/warning'; /** * Props for PopupCourseBlock @@ -18,18 +15,6 @@ export interface PopupCourseBlockProps { whiteText?: boolean; } -function getStatusIcon(status: Status, classList = ''): React.ReactElement { - switch (status) { - case Status.WAITLISTED: - return ; - case Status.CLOSED: - return ; - case Status.CANCELLED: - return ; - default: - } -} - /** * The "course block" to be used in the extension popup. * From e42e66f8a21b60341bc3c72aaad60d2a869f708f Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 16:11:24 -0600 Subject: [PATCH 13/19] use icon helper --- .../components/common/PopupCourseBlock/PopupCourseBlock.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index 8b9d54223..91759e0e3 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Course, Status } from 'src/shared/types/Course'; import classNames from 'classnames'; +import { getStatusIcon } from 'src/shared/util/icons'; import Text from '../Text/Text'; import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; From 600096df4730cb92d8c15dd3449c0339adb5cf31 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 5 Feb 2024 20:00:58 -0600 Subject: [PATCH 14/19] update icons thingy to use new component version --- .../common/PopupCourseBlock/PopupCourseBlock.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index 91759e0e3..8e0ac45c1 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Course, Status } from 'src/shared/types/Course'; import classNames from 'classnames'; -import { getStatusIcon } from 'src/shared/util/icons'; +import { StatusIcon } from 'src/shared/util/icons'; import Text from '../Text/Text'; import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; @@ -53,8 +53,12 @@ export default function PopupCourseBlock({ > {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}`} - {course.status !== Status.OPEN && - getStatusIcon(course.status, `text-white justify-self-end rounded p-1px w-5 h-5 ${secondaryColor}`)} + {course.status !== Status.OPEN && ( + + )}
); } From 1f382571c4535492db8c8944dc60dfee5f9f6eb4 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 <93348668+DhruvArora-03@users.noreply.github.com> Date: Tue, 6 Feb 2024 11:04:25 -0600 Subject: [PATCH 15/19] switch to clsx --- .../common/PopupCourseBlock/PopupCourseBlock.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index 8e0ac45c1..bb7ee6d31 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Course, Status } from 'src/shared/types/Course'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { StatusIcon } from 'src/shared/util/icons'; import Text from '../Text/Text'; import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; @@ -30,14 +30,14 @@ export default function PopupCourseBlock({ }: PopupCourseBlockProps): JSX.Element { return (
Date: Wed, 7 Feb 2024 14:18:01 -0600 Subject: [PATCH 16/19] colors utility --- src/shared/util/colors.ts | 50 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/shared/util/colors.ts diff --git a/src/shared/util/colors.ts b/src/shared/util/colors.ts new file mode 100644 index 000000000..807a2c164 --- /dev/null +++ b/src/shared/util/colors.ts @@ -0,0 +1,50 @@ +import { theme } from 'unocss/preset-mini'; + +export interface CourseColors { + primaryColor: string; + secondaryColor: string; +} + +// calculates luminance of a hex string +function getLuminance(hex: string): number { + let r = parseInt(hex.substring(1, 3), 16); + let g = parseInt(hex.substring(3, 5), 16); + let b = parseInt(hex.substring(5, 7), 16); + + [r, g, b] = [r, g, b].map(color => { + let c = color / 255; + + c = c > 0.03928 ? ((c + 0.055) / 1.055) ** 2.4 : (c /= 12.92); + + return c; + }); + + return 0.2126 * r + 0.7152 * g + 0.0722 * b; +} + +// calculates contrast ratio between two hex strings +function contrastRatioPair(hex1: string, hex2: string) { + const lum1 = getLuminance(hex1); + const lum2 = getLuminance(hex2); + + return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05); +} + +/** + * Generate a tailwind classname for the font color based on the background color + * @param bgColor the tailwind classname for background ex. "bg-emerald-500" + */ +export function pickFontColor(bgColor: string): 'text-white' | 'text-black' { + return contrastRatioPair(bgColor, '#606060') > contrastRatioPair(bgColor, '#ffffff') ? 'text-black' : 'text-white'; +} + +/** + * 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 { + return { + primaryColor: theme.colors[colorway][600] as string, + secondaryColor: theme.colors[colorway][800] as string, + }; +} From 64809c76c9e96f0a70e772b3a1d4a81dcf4708ac Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Wed, 7 Feb 2024 14:18:35 -0600 Subject: [PATCH 17/19] unocss reset --- package.json | 1 + pnpm-lock.yaml | 7 +++++++ .../components/common/ExtensionRoot/ExtensionRoot.tsx | 1 + 3 files changed, 9 insertions(+) diff --git a/package.json b/package.json index fd7ab2a6a..1ed328d00 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@unocss/postcss": "^0.58.4", "@unocss/preset-uno": "^0.58.4", "@unocss/preset-web-fonts": "^0.58.4", + "@unocss/reset": "^0.58.5", "@unocss/transformer-directives": "^0.58.4", "@unocss/transformer-variant-group": "^0.58.4", "@vitejs/plugin-react-swc": "^3.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c5afb4a9a..4f6217648 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -123,6 +123,9 @@ devDependencies: '@unocss/preset-web-fonts': specifier: ^0.58.4 version: 0.58.4 + '@unocss/reset': + specifier: ^0.58.5 + version: 0.58.5 '@unocss/transformer-directives': specifier: ^0.58.4 version: 0.58.4 @@ -5046,6 +5049,10 @@ packages: resolution: {integrity: sha512-ZZTrAdl4WWmMjQdOqcOSWdgFH6kdFKZjPu4c6Ijxk7KvY2BW3nttTTBa7IYeuXFHVfcExUFqlOgRurt+NeWYyQ==} dev: true + /@unocss/reset@0.58.5: + resolution: {integrity: sha512-2wMrkCj3SSb5hrx9TKs5jZa34QIRkHv9FotbJutAPo7o8hx+XXn56ogzdoUrcFPJZJUx2R2nyOVbSlGMIjtFtw==} + dev: true + /@unocss/rule-utils@0.58.4: resolution: {integrity: sha512-52Jp4I+joGTaDm7ehB/7uZ2kJL+9BZcYRDUVk4IDacDH5W9yxf1F75LzYT8jJVWXD/HIhiS0r9V6qhcBq2OWZw==} engines: {node: '>=14'} diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx index 9bc27972a..bb2fd0814 100644 --- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx +++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styles from './ExtensionRoot.module.scss'; +import '@unocss/reset/tailwind-compat.css'; import 'uno.css'; interface Props { From dc01f84553b0182a1f686133db5d9c98fec18f02 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Wed, 7 Feb 2024 21:19:02 -0600 Subject: [PATCH 18/19] move text stylings to layer --- .../components/common/Text/Text.module.scss | 104 +++++++++--------- 1 file changed, 53 insertions(+), 51 deletions(-) diff --git a/src/views/components/common/Text/Text.module.scss b/src/views/components/common/Text/Text.module.scss index 1f52a96be..16f52b29c 100644 --- a/src/views/components/common/Text/Text.module.scss +++ b/src/views/components/common/Text/Text.module.scss @@ -1,65 +1,67 @@ @use 'src/views/styles/colors.module.scss'; @use 'src/views/styles/fonts.module.scss'; -.text { - font-family: 'Roboto Flex', sans-serif; - line-height: normal; - font-style: normal; -} +@layer theme { + .text { + font-family: 'Roboto Flex', sans-serif; + line-height: normal; + font-style: normal; + } -.mini { - font-size: 0.79rem; - font-weight: 500; -} + .mini { + font-size: 0.79rem; + font-weight: 500; + } -.small { - font-size: 0.88875rem; - font-weight: 500; -} + .small { + font-size: 0.88875rem; + font-weight: 500; + } -.p { - font-size: 1rem; - font-weight: 400; - letter-spacing: 0.025rem; -} + .p { + font-size: 1rem; + font-weight: 400; + letter-spacing: 0.025rem; + } -.h4 { - font-size: 1.125rem; - font-weight: 500; -} + .h4 { + font-size: 1.125rem; + font-weight: 500; + } -.h3-course { - font-size: 0.6875rem; - font-weight: 400; - line-height: 100%; /* 0.6875rem */ -} + .h3-course { + font-size: 0.6875rem; + font-weight: 400; + line-height: 100%; /* 0.6875rem */ + } -.h3 { - font-size: 1.26563rem; - font-weight: 600; - text-transform: uppercase; -} + .h3 { + font-size: 1.26563rem; + font-weight: 600; + text-transform: uppercase; + } -.h2-course { - font-size: 1rem; - font-weight: 500; - letter-spacing: 0.03125rem; - text-transform: capitalize; -} + .h2-course { + font-size: 1rem; + font-weight: 500; + letter-spacing: 0.03125rem; + text-transform: capitalize; + } -.h2 { - font-size: 1.42375rem; - font-weight: 500; -} + .h2 { + font-size: 1.42375rem; + font-weight: 500; + } -.h1-course { - font-size: 1rem; - font-weight: 600; - text-transform: capitalize; -} + .h1-course { + font-size: 1rem; + font-weight: 600; + text-transform: capitalize; + } -.h1 { - font-size: 1.60188rem; - font-weight: 700; - text-transform: uppercase; + .h1 { + font-size: 1.60188rem; + font-weight: 700; + text-transform: uppercase; + } } From 0939351a71b4546a5279c234e34c26fc641df193 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Wed, 7 Feb 2024 21:19:37 -0600 Subject: [PATCH 19/19] popup course block modifications --- .../components/PopupCourseBlock.stories.tsx | 90 +++++++------------ .../PopupCourseBlock/PopupCourseBlock.tsx | 63 +++++++------ 2 files changed, 60 insertions(+), 93 deletions(-) diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx index 8ff7c79e3..636617f57 100644 --- a/src/stories/components/PopupCourseBlock.stories.tsx +++ b/src/stories/components/PopupCourseBlock.stories.tsx @@ -3,7 +3,9 @@ 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 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({ courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB', @@ -59,30 +61,20 @@ const meta = { tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/api/argtypes args: { - primaryColor: 'bg-emerald-300', - secondaryColor: 'bg-emerald-500', - whiteText: false, + colors: getCourseColors('emerald'), course: exampleCourse, }, argTypes: { - primaryColor: { - description: 'background tailwind color', - control: 'text', - }, - secondaryColor: { - description: 'background tailwind for drag handle and icon', - control: 'text', - }, - whiteText: { - description: 'control text color', - control: 'boolean', + colors: { + description: 'the colors to use for the course block', + control: 'object', }, course: { description: 'the course to show data for', control: 'object', }, }, -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; @@ -92,51 +84,29 @@ export const Default: Story = { args: {}, }; -export const AllVariants: Story = { - args: { - course: exampleCourse, - primaryColor: 'bg-emerald-300', - secondaryColor: 'bg-emerald-500', - whiteText: false, - }, +export const Variants: Story = { + render: props => ( +
+ + + + +
+ ), +}; + +const colors = Object.keys(theme.colors) + // check that the color is a colorway (is an object) + .filter(color => typeof theme.colors[color] === 'object') + .slice(0, 17) + .map(color => getCourseColors(color as keyof typeof theme.colors)); + +export const AllColors: Story = { render: props => ( -
-
- - -
-
- - -
-
- - -
-
- - -
+
+ {colors.map((color, i) => ( + + ))}
), parameters: { diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx index bb7ee6d31..d13896493 100644 --- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx +++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx @@ -1,9 +1,10 @@ -import React from 'react'; -import { Course, Status } from 'src/shared/types/Course'; import clsx from 'clsx'; -import { StatusIcon } from 'src/shared/util/icons'; -import Text from '../Text/Text'; +import React, { useState } from 'react'; +import { Course, Status } from '@shared/types/Course'; +import { StatusIcon } from '@shared/util/icons'; +import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors'; import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; +import Text from '../Text/Text'; /** * Props for PopupCourseBlock @@ -11,9 +12,7 @@ import DragIndicatorIcon from '~icons/material-symbols/drag-indicator'; export interface PopupCourseBlockProps { className?: string; course: Course; - primaryColor: string; - secondaryColor: string; - whiteText?: boolean; + colors: CourseColors; } /** @@ -21,43 +20,41 @@ export interface PopupCourseBlockProps { * * @param props PopupCourseBlockProps */ -export default function PopupCourseBlock({ - className, - course, - primaryColor, - secondaryColor, - whiteText, -}: PopupCourseBlockProps): JSX.Element { +export default function PopupCourseBlock({ className, course, colors }: PopupCourseBlockProps): JSX.Element { + // whiteText based on secondaryColor + const fontColor = pickFontColor(colors.primaryColor); + return (
- +
- {`${course.uniqueId} ${course.department} ${course.number} - ${course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}`} + {course.uniqueId} {course.department} {course.number} –{' '} + {course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)} {course.status !== Status.OPEN && ( - +
+ +
)}
);