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

chore: merge branch 'main' into sgunter/button-component

Browse Source 
for clsx, and other features
This commit is contained in:
Samuel Gunter
2024-02-07 00:27:55 -06:00
parent ae08ee02f4 dd2f696f8d
commit 16cc2f071e
18 changed files with 282 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -21,7 +21,7 @@
"@unocss/reset": "^0.58.5",
"@vitejs/plugin-react": "^4.2.1",
"chrome-extension-toolkit": "^0.0.51",
"classnames": "^2.5.1",
"clsx": "^2.1.0",
"highcharts": "^11.3.0",
"highcharts-react-official": "^3.2.1",
"react": "^18.2.0",

15
pnpm-lock.yaml generated
View File

@@ -25,9 +25,9 @@ dependencies:
chrome-extension-toolkit:
specifier: ^0.0.51
version: 0.0.51
classnames:
specifier: ^2.5.1
version: 2.5.1
clsx:
specifier: ^2.1.0
version: 2.1.0
highcharts:
specifier: ^11.3.0
version: 11.3.0
@@ -6111,10 +6111,6 @@ packages:
consola: 3.2.3
dev: true
/classnames@2.5.1:
resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
dev: false
/clean-stack@2.2.0:
resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
engines: {node: '>=6'}
@@ -6166,6 +6162,11 @@ packages:
engines: {node: '>=0.8'}
dev: true
/clsx@2.1.0:
resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
engines: {node: '>=6'}
dev: false
/color-convert@1.9.3:
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
dependencies:

24
src/shared/util/icons.tsx Normal file
View File

@@ -0,0 +1,24 @@
import React, { SVGProps } from 'react';
import ClosedIcon from '~icons/material-symbols/lock';
import WaitlistIcon from '~icons/material-symbols/timelapse';
import CancelledIcon from '~icons/material-symbols/warning';
import { Status } from '../types/Course';
/**
* Get Icon component based on status
* @param props.status status
* @returns React.ReactElement - the icon component
*/
export function StatusIcon(props: SVGProps<SVGSVGElement> & { status: Status }): React.ReactElement {
const { status, ...rest } = props;
switch (props.status) {
case Status.WAITLISTED:
return <WaitlistIcon {...rest} />;
case Status.CLOSED:
return <ClosedIcon {...rest} />;
case Status.CANCELLED:
return <CancelledIcon {...rest} />;
default:
}
}

67
src/stories/components/CalendarCourseCell.stories.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Meta, StoryObj } from '@storybook/react';
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';
const meta = {
title: 'Components/Common/CalendarCourseCell',
component: CalendarCourseCell,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
course: { control: 'object' },
meetingIdx: { control: 'number' },
color: { control: 'color' },
},
render: (args: any) => (
<div className="w-45">
<CalendarCourseCell {...args} />
</div>
),
} satisfies Meta<typeof CalendarCourseCell>;
export default meta;
type Story = StoryObj<typeof meta>;
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.M, DAY_MAP.W, DAY_MAP.F],
startTime: 480,
endTime: 570,
location: {
building: 'UTC',
room: '123',
},
}),
],
}),
instructionMode: 'In Person',
semester: {
year: 2024,
season: 'Spring',
},
}),
meetingIdx: 0,
color: 'red',
},
};

4
src/views/components/common/Button/Button.tsx
View File

@@ -1,4 +1,4 @@
import classNames from 'classnames';
import clsx from 'clsx';
import React from 'react';
import styles from './Button.module.scss';
@@ -43,7 +43,7 @@ export function Button({
} as React.CSSProperties
}
data-testid={testId}
className={classNames(useScss ? styles.button : BUTTON_BASE_CLASS, className, {
className={clsx(useScss ? styles.button : BUTTON_BASE_CLASS, className, {
[styles[variant]]: useScss,
[styles.disabled]: disabled && useScss,
'disabled:(cursor-not-allowed opacity-50)': disabled && !useScss,

50
src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx Normal file
View File

@@ -0,0 +1,50 @@
import React from 'react';
import { Course, Status } from 'src/shared/types/Course';
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
import ClosedIcon from '~icons/material-symbols/lock';
import WaitlistIcon from '~icons/material-symbols/timelapse';
import CancelledIcon from '~icons/material-symbols/warning';
import Text from '../Text/Text';
export interface CalendarCourseBlockProps {
/** The Course that the meeting is for. */
course: Course;
/* index into course meeting array to display */
meetingIdx?: number;
/** The background color for the course. */
color: string;
}
const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ 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) {
rightIcon = <WaitlistIcon className='h-5 w-5' />;
} else if (course.status === Status.CLOSED) {
rightIcon = <ClosedIcon className='h-5 w-5' />;
} else if (course.status === Status.CANCELLED) {
rightIcon = <CancelledIcon className='h-5 w-5' />;
}
return (
<div className='w-full flex justify-center rounded bg-slate-300 p-2 text-ut-black'>
<div className='flex flex-1 flex-col gap-1'>
<Text variant='h1-course' className='leading-[75%]!'>
{course.department} {course.number} - {course.instructors[0].lastName}
</Text>
<Text variant='h3-course' className='leading-[75%]!'>
{`${meeting.getTimeString({ separator: '–', capitalize: true })}${
meeting.location ? ` – ${meeting.location.building}` : ''
}`}
</Text>
</div>
{rightIcon && (
<div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
{rightIcon}
</div>
)}
</div>
);
};
export default CalendarCourseBlock;

76
src/views/components/common/CalendarGrid/CalendarGrid.module.scss
View File

@@ -3,6 +3,7 @@
.dayLabelContainer {
display: flex;
flex-direction: row;
height: 13px;
min-width: 40px;
min-height: 13px;
@@ -13,24 +14,44 @@
flex: 1 0 0;
}
.dayLabel {
.calendarGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(13, 1fr);
}
.calendarRow {
display: flex;
}
.calendar {
// display: grid;
// grid-template-columns: auto repeat(5, 1fr);
gap: 10px;
}
.day {
gap: 5px;
color: colors.$burnt_orange;
text-align: center;
font-family: Roboto;
font-size: 14.22px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.calendar {
display: grid;
grid-template-columns: auto repeat(5, 1fr);
gap: 10px;
.timeAndGrid {
display: flex;
}
.day {
gap: 5px;
.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);
}
.timeBlock {
@@ -41,18 +62,33 @@
max-width: 50px;
min-height: 40px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
.timeLabelContainer {
display: flex;
max-height: 20px;
flex-direction: column;
align-items: flex-end;
gap: 17px;
flex: 1 0 0;
align-self: stretch;
border-radius: var(--border-radius-none, 0px);
}
p {
color: #1A2024;
text-align: left;
height: 6.6px;
align-self: stretch;
margin-top: 0;
margin-bottom: 0;
/* Type scale/small */
font-family: "Roboto Flex";
font-size: 14.22px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
}
.timeLabelContainer {
display: flex;
max-height: 20px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
gap: 17px;
flex: 1 0 0;
align-self: stretch;
border-radius: var(--border-radius-none, 0px);
}

59
src/views/components/common/CalendarGrid/CalendarGrid.tsx
View File

@@ -3,35 +3,50 @@ import styles from './CalendarGrid.module.scss';
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
import { DAY_MAP } from 'src/shared/types/CourseMeeting';
const daysOfWeek = Object.values(DAY_MAP);
const daysOfWeek = Object.values(DAY_MAP).filter(d => d != "Saturday" && d != "Sunday")
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
const grid = Array.from({ length: 5 }, () =>
Array.from({ length: 13 }, (_, columnIndex) => (
<CalendarCell key={columnIndex} />
))
);
/**
* Grid of CalendarGridCell components forming the user's course schedule calendar view
* @param props
*/
const Calendar: React.FC = (props) => {
return (
<div className={styles.calendar}>
<div className={styles.dayLabelContainer}></div>
{daysOfWeek.map((day, dayIndex) => (
<div key={dayIndex} className={styles.day}>
<div className={styles.dayLabelContainer}>
<div className={styles.dayLabel}>{day}</div>
</div>
{hoursOfDay.map((hour) => (
<div key={`${day}-${hour}`} className={styles.timeBlock}>
<div className={styles.timeLabelContainer}>
<span>{hour}:00</span>
</div>
<CalendarCell />
</div>
))}
return (
<div className={styles.calendar}>
<div className={styles.dayLabelContainer}>
{/* Empty cell in the top-left corner */}
<div className={styles.day} />
{/* Displaying day labels */}
{daysOfWeek.map(day => (
<div key={day} className={styles.day}>
{day}
</div>
))}
</div>
);
};
export default Calendar;
{/* Displaying the rest of the calendar */}
<div className={styles.timeAndGrid}>
<div className={styles.timeColumn}>
{hoursOfDay.map((hour) => (
<div key={hour} className={styles.timeBlock}>
<div className={styles.timeLabelContainer}>
<p>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</p>
</div>
</div>
))}
</div>
<div className={styles.calendarGrid}>
{grid.map((row, rowIndex) => (
row
))}
</div>
</div>
</div>
)
};
export default Calendar;

34
src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss
View File

@@ -1,20 +1,18 @@
.calendarCell {
display: flex;
width: 165px;
height: 52.231px;
min-width: 45px;
min-height: 40px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
}
display: flex;
width: 165px;
height: 52.231px;
min-width: 45px;
min-height: 40px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border: 1px solid #DADCE0;
}
.hourLine {
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 1px solid black; /* Adjust line styles as needed */
}
.hourLine {
width: 165px;
height: 1px;
border-radius: var(--border-radius-none, 0px);
background: rgba(218, 220, 224, 0.25);
}

4
src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
View File

@@ -8,7 +8,9 @@ import styles from './CalendarGridCell.module.scss';
const CalendarCell: React.FC = (props) => {
return (
<div className={styles.calendarCell}>
<div className={styles.hourLine}></div>
<div className={styles.hourLine}>
</div>
</div>
);
};

6
src/views/components/common/Card/Card.tsx
View File

@@ -1,5 +1,5 @@
import classNames from 'classnames';
import React, { Component } from 'react';
import clsx from 'clsx';
import React from 'react';
import styles from './Card.module.scss';
export type Props = {
@@ -17,7 +17,7 @@ export default function Card(props: Props) {
return (
<div
style={props.style}
className={classNames(styles.card, props.className)}
className={clsx(styles.card, props.className)}
onClick={props.onClick}
data-testid={props.testId}
>

4
src/views/components/common/Divider/Divider.tsx
View File

@@ -1,4 +1,4 @@
import classnames from 'classnames';
import clsx from 'clsx';
import React from 'react';
import { Color } from '@views/styles/colors.module.scss';
import styles from './Divider.module.scss';
@@ -21,5 +21,5 @@ export default function Divider(props: Props) {
borderStyle: props.type,
};
return <hr data-testid={props.testId} style={style} className={classnames(styles.divider, props.className)} />;
return <hr data-testid={props.testId} style={style} className={clsx(styles.divider, props.className)} />;
}

4
src/views/components/common/Icon/Icon.tsx
View File

@@ -1,4 +1,4 @@
import classNames from 'classnames';
import clsx from 'clsx';
import React from 'react';
import colors, { Color } from '@views/styles/colors.module.scss';
import fonts, { Size } from '@views/styles/fonts.module.scss';
@@ -36,7 +36,7 @@ export default function Icon(props: Props) {
<span
data-testid={props.testId}
style={style}
className={classNames(styles.icon, props.className)}
className={clsx(styles.icon, props.className)}
onClick={props.onClick}
>
{props.name}

4
src/views/components/common/Link/Link.tsx
View File

@@ -1,5 +1,5 @@
import { background } from '@shared/messages';
import classNames from 'classnames';
import clsx from 'clsx';
import React, { PropsWithChildren } from 'react';
import Text, { TextProps } from '../Text/Text';
import styles from './Link.module.scss';
@@ -29,7 +29,7 @@ export default function Link(props: PropsWithChildren<Props>) {
color='bluebonnet'
{...passedProps}
span
className={classNames(
className={clsx(
styles.link,
{
[styles.disabled]: isDisabled,

6
src/views/components/common/Popup/Popup.tsx
View File

@@ -1,4 +1,4 @@
import classNames from 'classnames';
import clsx from 'clsx';
import React, { PropsWithChildren, useCallback } from 'react';
import styles from './Popup.module.scss';
@@ -46,12 +46,12 @@ export default function Popup({ onClose, children, className, style, testId, ove
<div
style={style}
ref={containerRef}
className={classNames(styles.container, {
className={clsx(styles.container, {
[styles.overlay]: overlay,
})}
data-testid={testId}
>
<div ref={bodyRef} className={classNames(styles.body, className)}>
<div ref={bodyRef} className={clsx(styles.body, className)}>
{children}
</div>
</div>

4
src/views/components/common/Spinner/Spinner.tsx
View File

@@ -1,4 +1,4 @@
import classNames from 'classnames';
import clsx from 'clsx';
import React from 'react';
import styles from './Spinner.module.scss';
@@ -12,5 +12,5 @@ type Props = {
* A simple spinner component that can be used to indicate loading.
*/
export default function Spinner({ className, testId, style }: Props) {
return <div data-testid={testId} style={style} className={classNames(styles.spinner, className)} />;
return <div data-testid={testId} style={style} className={clsx(styles.spinner, className)} />;
}

4
src/views/components/common/Text/Text.tsx
View File

@@ -1,4 +1,4 @@
import classNames from 'classnames';
import clsx from 'clsx';
import React, { PropsWithChildren } from 'react';
import styles from './Text.module.scss';
@@ -20,7 +20,7 @@ type Variant = (typeof variants)[number];
* A reusable Text component with props that build on top of the design system for the extension
*/
export default function Text({ variant, as, className, ...props }: PropsWithChildren<TextProps>) {
const mergedClassName = classNames(styles.text, styles[variant], className);
const mergedClassName = clsx(styles.text, styles[variant], className);
if (as === 'div') return <div className={mergedClassName} {...props} />;

4
src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx
View File

@@ -1,5 +1,5 @@
import { Course } from '@shared/types/Course';
import classNames from 'classnames';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import Spinner from '@views/components/common/Spinner/Spinner';
import Text from '@views/components/common/Text/Text';
@@ -64,7 +64,7 @@ interface LineProps {
function DescriptionLine({ line }: LineProps) {
const lowerCaseLine = line.toLowerCase();
const className = classNames({
const className = clsx({
[styles.prerequisite]: lowerCaseLine.includes('prerequisite'),
[styles.onlyOne]:
lowerCaseLine.includes('may be') || lowerCaseLine.includes('only one') || lowerCaseLine.includes('may not'),