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

chore: lint-format-docs-tests-bugfixes (#105)

Browse Source 
* docs: add jsdoc

* feat: change enums to as const objects

* chore(test): add themeColors.test.ts

* fix: fix tests and bugs with strings.ts util

* fix: path alias imports and tsconfig file bug

* fix: remove --max-warnings 0
This commit is contained in:
doprz
2024-02-22 22:42:58 -06:00
parent 8ab60c9f01
commit 8a6e9070e0
134 changed files with 986 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.releaserc.json
View File

@@ -34,4 +34,4 @@
}
]
]
}
}

4
package.json
View File

@@ -11,8 +11,8 @@
"build": "tsc && vite build",
"prettier": "prettier src --check",
"prettier:fix": "prettier src --write",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
"lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage",

1
src/manifest.ts
View File

@@ -1,4 +1,5 @@
import { defineManifest } from '@crxjs/vite-plugin';
import packageJson from '../package.json';
// Convert from Semver (example: 0.1.0-beta6)

3
src/pages/background/background.ts
View File

@@ -1,5 +1,6 @@
import { BACKGROUND_MESSAGES } from '@shared/messages';
import type { BACKGROUND_MESSAGES } from '@shared/messages';
import { MessageListener } from 'chrome-extension-toolkit';
import onInstall from './events/onInstall';
import onServiceWorkerAlive from './events/onServiceWorkerAlive';
import onUpdate from './events/onUpdate';

4
src/pages/background/handler/browserActionHandler.ts
View File

@@ -1,5 +1,5 @@
import BrowserActionMessages from '@shared/messages/BrowserActionMessages';
import { MessageHandler } from 'chrome-extension-toolkit';
import type BrowserActionMessages from '@shared/messages/BrowserActionMessages';
import type { MessageHandler } from 'chrome-extension-toolkit';
const browserActionHandler: MessageHandler<BrowserActionMessages> = {
disableBrowserAction({ sender, sendResponse }) {

4
src/pages/background/handler/hotReloadingHandler.ts
View File

@@ -1,6 +1,6 @@
import HotReloadingMessages from '@shared/messages/HotReloadingMessages';
import type HotReloadingMessages from '@shared/messages/HotReloadingMessages';
import { DevStore } from '@shared/storage/DevStore';
import { MessageHandler } from 'chrome-extension-toolkit';
import type { MessageHandler } from 'chrome-extension-toolkit';
const hotReloadingHandler: MessageHandler<HotReloadingMessages> = {
async reloadExtension({ sendResponse }) {

5
src/pages/background/handler/tabManagementHandler.ts
View File

@@ -1,5 +1,6 @@
import TabManagementMessages from '@shared/messages/TabManagementMessages';
import { MessageHandler } from 'chrome-extension-toolkit';
import type TabManagementMessages from '@shared/messages/TabManagementMessages';
import type { MessageHandler } from 'chrome-extension-toolkit';
import openNewTab from '../util/openNewTab';
const tabManagementHandler: MessageHandler<TabManagementMessages> = {

5
src/pages/background/handler/userScheduleHandler.ts
View File

@@ -1,6 +1,7 @@
import { UserScheduleMessages } from '@shared/messages/UserScheduleMessages';
import type { UserScheduleMessages } from '@shared/messages/UserScheduleMessages';
import { Course } from '@shared/types/Course';
import { MessageHandler } from 'chrome-extension-toolkit';
import type { MessageHandler } from 'chrome-extension-toolkit';
import addCourse from '../lib/addCourse';
import clearCourses from '../lib/clearCourses';
import createSchedule from '../lib/createSchedule';

2
src/pages/background/lib/addCourse.ts
View File

@@ -1,5 +1,5 @@
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
import { Course } from '@shared/types/Course';
import type { Course } from '@shared/types/Course';
/**
*

5
src/pages/background/lib/clearCourses.ts
View File

@@ -1,5 +1,10 @@
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
/**
* Clears the courses for a given schedule.
* @param scheduleName - The name of the schedule.
* @throws Error if the schedule does not exist.
*/
export default async function clearCourses(scheduleName: string): Promise<void> {
const schedules = await UserScheduleStore.get('schedules');
const schedule = schedules.find(schedule => schedule.name === scheduleName);

2
src/pages/background/lib/createSchedule.ts
View File

@@ -14,7 +14,7 @@ export default async function createSchedule(scheduleName: string): Promise<stri
schedules.push({
name: scheduleName,
courses: [],
hours: 0
hours: 0,
});
await UserScheduleStore.set('schedules', schedules);

6
src/pages/background/lib/deleteSchedule.ts
View File

@@ -1,5 +1,11 @@
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
/**
* Deletes a schedule with the specified name.
*
* @param scheduleName - The name of the schedule to delete.
* @returns A promise that resolves to a string if there is an error, or undefined if the schedule is deleted successfully.
*/
export default async function deleteSchedule(scheduleName: string): Promise<string | undefined> {
const [schedules, activeIndex] = await Promise.all([
UserScheduleStore.get('schedules'),

2
src/pages/background/lib/removeCourse.ts
View File

@@ -1,5 +1,5 @@
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
import { Course } from '@shared/types/Course';
import type { Course } from '@shared/types/Course';
/**
*

6
src/pages/background/lib/renameSchedule.ts
View File

@@ -1,5 +1,11 @@
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
/**
* Renames a schedule with the specified name to a new name.
* @param scheduleName - The name of the schedule to be renamed.
* @param newName - The new name for the schedule.
* @returns A promise that resolves to a string if there is an error, or undefined if the schedule is renamed successfully.
*/
export default async function renameSchedule(scheduleName: string, newName: string): Promise<string | undefined> {
const schedules = await UserScheduleStore.get('schedules');
const scheduleIndex = schedules.findIndex(schedule => schedule.name === scheduleName);

6
src/pages/background/lib/switchSchedule.ts
View File

@@ -1,5 +1,11 @@
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
/**
* Switches the active schedule to the specified schedule name.
* Throws an error if the schedule does not exist.
* @param scheduleName - The name of the schedule to switch to.
* @returns A Promise that resolves when the active schedule is successfully switched.
*/
export default async function switchSchedule(scheduleName: string): Promise<void> {
const schedules = await UserScheduleStore.get('schedules');

2
src/pages/calendar/CalendarMain.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
import React from 'react';
import { Calendar } from 'src/views/components/calendar/Calendar/Calendar';
/**

26
src/pages/calendar/index.html
View File

@@ -1,18 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Calendar</title>
</head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Calendar</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
</html>

1
src/pages/calendar/index.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import CalendarMain from './CalendarMain';
createRoot(document.getElementById('root')).render(<CalendarMain />);

4
src/pages/content/index.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import CourseCatalogMain from '@views/components/CourseCatalogMain';
import getSiteSupport, { SiteSupport } from '@views/lib/getSiteSupport';
import React from 'react';
import { createRoot } from 'react-dom/client';
const support = getSiteSupport(window.location.href);

2
src/pages/debug/App.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
import React from 'react';
/**
*

26
src/pages/debug/index.html
View File

@@ -1,18 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Debug</title>
</head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Debug</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
</html>

2
src/pages/options/App.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
import React from 'react';
/**
*

26
src/pages/options/index.html
View File

@@ -1,18 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Popup</title>
</head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Popup</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
</html>

1
src/pages/options/index.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')).render(<App />);

26
src/pages/popup/index.html
View File

@@ -1,18 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Popup</title>
</head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Popup</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
</html>

1
src/pages/popup/index.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import PopupMain from '../../views/components/PopupMain';
createRoot(document.getElementById('root')).render(<PopupMain />);

1
src/shared/messages/BrowserActionMessages.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable jsdoc/require-jsdoc */
export default interface BrowserActionMessages {
/** make it so that clicking the browser action will open the popup.html */
enableBrowserAction: () => void;

1
src/shared/messages/HotReloadingMessages.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable jsdoc/require-jsdoc */
export default interface HotReloadingMessages {
reloadExtension: () => void;
}

5
src/shared/messages/UserScheduleMessages.ts
View File

@@ -1,5 +1,8 @@
import { Course } from '../types/Course';
import type { Course } from '@shared/types/Course';
/**
* Represents a collection of user schedule messages.
*/
export interface UserScheduleMessages {
/**
* Add a course to a schedule

9
src/shared/messages/index.ts
View File

@@ -1,8 +1,9 @@
import { createMessenger } from 'chrome-extension-toolkit';
import BrowserActionMessages from './BrowserActionMessages';
import TabManagementMessages from './TabManagementMessages';
import TAB_MESSAGES from './TabMessages';
import { UserScheduleMessages } from './UserScheduleMessages';
import type BrowserActionMessages from './BrowserActionMessages';
import type TabManagementMessages from './TabManagementMessages';
import type TAB_MESSAGES from './TabMessages';
import type { UserScheduleMessages } from './UserScheduleMessages';
/**
* This is a type with all the message definitions that can be sent TO the background script

2
src/shared/storage/ExtensionStore.ts
View File

@@ -15,6 +15,4 @@ export const ExtensionStore = createLocalStore<IExtensionStore>({
lastUpdate: Date.now(),
});
debugStore({ ExtensionStore });

25
src/shared/types/Course.ts
View File

@@ -1,6 +1,6 @@
/* eslint-disable max-classes-per-file */
import { Serialized } from 'chrome-extension-toolkit';
import { CourseMeeting } from './CourseMeeting';
import type { Serialized } from 'chrome-extension-toolkit';
import type { CourseMeeting } from './CourseMeeting';
import { CourseSchedule } from './CourseSchedule';
import Instructor from './Instructor';
@@ -12,12 +12,17 @@ export type InstructionMode = 'Online' | 'In Person' | 'Hybrid';
/**
* The status of a course (e.g. open, closed, waitlisted, cancelled)
*/
export enum Status {
OPEN = 'OPEN',
CLOSED = 'CLOSED',
WAITLISTED = 'WAITLISTED',
CANCELLED = 'CANCELLED',
}
export const Status = {
OPEN: 'OPEN',
CLOSED: 'CLOSED',
WAITLISTED: 'WAITLISTED',
CANCELLED: 'CANCELLED',
} as const;
/**
* Represents the type of status for a course.
*/
export type StatusType = (typeof Status)[keyof typeof Status];
/**
* Represents a semester, with the year and the season for when a course is offered
@@ -49,7 +54,7 @@ export class Course {
/** The number of credits that a course is worth */
creditHours: number;
/** Is the course open, closed, waitlisted, or cancelled? */
status: Status;
status: StatusType;
/** all the people that are teaching this course, and some metadata about their names */
instructors: Instructor[];
/** Some courses at UT are reserved for certain groups of people or people within a certain major, which makes it difficult for people outside of that group to register for the course. */

2
src/shared/types/CourseMeeting.ts
View File

@@ -1,4 +1,4 @@
import { Serialized } from 'chrome-extension-toolkit';
import type { Serialized } from 'chrome-extension-toolkit';
/**
* a map of the days of the week that a class is taught, and the corresponding abbreviation

6
src/shared/types/CourseSchedule.ts
View File

@@ -1,5 +1,7 @@
import { Serialized } from 'chrome-extension-toolkit';
import { CourseMeeting, Day, DAY_MAP } from './CourseMeeting';
import type { Serialized } from 'chrome-extension-toolkit';
import type { Day } from './CourseMeeting';
import { CourseMeeting, DAY_MAP } from './CourseMeeting';
/**
* This represents the schedule for a course, which includes all the meeting times for the course, as well as helper functions for parsing, serializing, and deserializing the schedule

2
src/shared/types/Distribution.ts
View File

@@ -1,5 +1,5 @@
/* eslint-disable max-classes-per-file */
import { PointOptionsObject } from 'highcharts';
import { Semester } from './Course';
/**
* Each of the possible letter grades that can be given in a course

3
src/shared/types/Instructor.ts
View File

@@ -1,4 +1,5 @@
import { Serialized } from 'chrome-extension-toolkit';
import type { Serialized } from 'chrome-extension-toolkit';
import { capitalize } from '../util/string';
/**

3
src/shared/types/UserSchedule.ts
View File

@@ -1,4 +1,5 @@
import { Serialized } from 'chrome-extension-toolkit';
import type { Serialized } from 'chrome-extension-toolkit';
import { Course } from './Course';
/**

10
src/shared/util/colors.ts
View File

@@ -1,11 +1,19 @@
import { theme } from 'unocss/preset-mini';
/**
* Represents the colors for a course.
*/
export interface CourseColors {
primaryColor: string;
secondaryColor: string;
}
// calculates luminance of a hex string
/**
* Calculates the luminance of a given hexadecimal color.
*
* @param hex - The hexadecimal color value.
* @returns The luminance value between 0 and 1.
*/
export function getLuminance(hex: string): number {
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);

9
src/shared/util/icons.tsx
View File

@@ -1,15 +1,18 @@
import React, { SVGProps } from 'react';
import type { StatusType } from '@shared/types/Course';
import { Status } from '@shared/types/Course';
import type { SVGProps } from 'react';
import React 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 {
export function StatusIcon(props: SVGProps<SVGSVGElement> & { status: StatusType }): React.ReactElement {
const { status, ...rest } = props;
switch (props.status) {

4
src/shared/util/string.ts
View File

@@ -18,6 +18,8 @@ export function capitalize(input: string): string {
}
capitalized += ' ';
}
capitalized = capitalized.trim(); // Remove extra space
return capitalized;
}
@@ -31,7 +33,7 @@ export function capitalizeFirstLetter(input: string): string {
}
/**
* Cuts the
* Cuts the input string to the specified length and adds an ellipsis if the string is longer than the specified length.
* @param input The string to ellipsify.
* @param length The length of the string to return.
* @returns The ellipsified string.

51
src/shared/util/tests/string.test.ts
View File

@@ -1,17 +1,17 @@
import { describe, expect, it } from 'vitest';
import { capitalize } from '../string';
import { capitalize, capitalizeFirstLetter, ellipsify } from '../string';
// TODO: Fix `string.ts` and `string.test.ts` to make the tests pass
// `capitalize` is adding an extra space at the end of the word.
describe('capitalize', () => {
it('should capitalize the first letter of each word', () => {
// Debug
const word = 'hello world';
const capitalized = capitalize(word);
console.log(capitalize(word));
console.log(capitalized.length);
console.log(capitalized.split(''));
// const word = 'hello world';
// const capitalized = capitalize(word);
// console.log(capitalize(word));
// console.log(capitalized.length);
// console.log(capitalized.split(''));
// Test case 1: Single word
expect(capitalize('hello')).toBe('Hello');
@@ -25,15 +25,40 @@ describe('capitalize', () => {
// Test case 4: Words with hyphens and spaces
expect(capitalize('hello-world test')).toBe('Hello-World Test');
});
});
it('should not change the capitalization of the remaining letters', () => {
// Test case 1: All lowercase
expect(capitalize('hello')).toBe('Hello');
describe('capitalizeFirstLetter', () => {
it('should return a string with the first letter capitalized', () => {
// Test case 1: Single word
expect(capitalizeFirstLetter('hello')).toBe('Hello');
// Test case 2: All uppercase
expect(capitalize('WORLD')).toBe('WORLD');
// Test case 2: Word with all lowercase letters
expect(capitalizeFirstLetter('world')).toBe('World');
// Test case 3: Mixed case
expect(capitalize('HeLLo WoRLd')).toBe('Hello World');
// Test case 3: Word with all uppercase letters
expect(capitalizeFirstLetter('EXAMPLE')).toBe('Example');
// Test case 4: Word with mixed case letters
expect(capitalizeFirstLetter('tEsT')).toBe('Test');
});
it('should handle empty string input', () => {
expect(capitalizeFirstLetter('')).toBe('');
});
});
describe('ellipsify', () => {
it('should add ellipsis if the input string exceeds the specified character limit', () => {
// Test case 1: Input string is shorter than the character limit
expect(ellipsify('Hello', 10)).toBe('Hello');
// Test case 2: Input string is equal to the character limit
expect(ellipsify('Hello World', 11)).toBe('Hello World');
// Test case 3: Input string is longer than the character limit
expect(ellipsify('Hello World', 5)).toBe('Hello...');
// Test case 4: Input string is empty
expect(ellipsify('', 5)).toBe('');
});
});

51
src/shared/util/tests/themeColors.test.ts Normal file
View File

@@ -0,0 +1,51 @@
import { describe, expect, it } from 'vitest';
import { getThemeColorHexByName, getThemeColorRgbByName, hexToRgb } from '../themeColors';
describe('hexToRgb', () => {
it('should convert hex color to RGB', () => {
expect(hexToRgb('#BF5700')).toEqual([191, 87, 0]);
expect(hexToRgb('#333F48')).toEqual([51, 63, 72]);
expect(hexToRgb('#f8971f')).toEqual([248, 151, 31]);
expect(hexToRgb('#ffd600')).toEqual([255, 214, 0]);
expect(hexToRgb('#a6cd57')).toEqual([166, 205, 87]);
expect(hexToRgb('#579d42')).toEqual([87, 157, 66]);
expect(hexToRgb('#00a9b7')).toEqual([0, 169, 183]);
expect(hexToRgb('#005f86')).toEqual([0, 95, 134]);
expect(hexToRgb('#9cadb7')).toEqual([156, 173, 183]);
expect(hexToRgb('#d6d2c4')).toEqual([214, 210, 196]);
expect(hexToRgb('#95a5a6')).toEqual([149, 165, 166]);
expect(hexToRgb('#B91C1C')).toEqual([185, 28, 28]);
expect(hexToRgb('#af2e2d')).toEqual([175, 46, 45]);
expect(hexToRgb('#1a2024')).toEqual([26, 32, 36]);
expect(hexToRgb('#22c55e')).toEqual([34, 197, 94]);
expect(hexToRgb('#a3e635')).toEqual([163, 230, 53]);
expect(hexToRgb('#84CC16')).toEqual([132, 204, 22]);
expect(hexToRgb('#FDE047')).toEqual([253, 224, 71]);
expect(hexToRgb('#FACC15')).toEqual([250, 204, 21]);
expect(hexToRgb('#F59E0B')).toEqual([245, 158, 11]);
expect(hexToRgb('#FB923C')).toEqual([251, 146, 60]);
expect(hexToRgb('#F97316')).toEqual([249, 115, 22]);
expect(hexToRgb('#EA580C')).toEqual([234, 88, 12]);
expect(hexToRgb('#DC2626')).toEqual([220, 38, 38]);
expect(hexToRgb('#B91C1C')).toEqual([185, 28, 28]);
});
});
describe('getThemeColorHexByName', () => {
it('should return the hex color value by name', () => {
expect(getThemeColorHexByName('ut-burntorange')).toEqual('#BF5700');
expect(getThemeColorHexByName('ut-offwhite')).toEqual('#D6D2C4');
expect(getThemeColorHexByName('ut-black')).toEqual('#333F48');
// Add more test cases for other theme color names
});
});
describe('getThemeColorRgbByName', () => {
it('should return the RGB color value by name', () => {
expect(getThemeColorRgbByName('ut-burntorange')).toEqual([191, 87, 0]);
expect(getThemeColorRgbByName('ut-offwhite')).toEqual([214, 210, 196]);
expect(getThemeColorRgbByName('ut-black')).toEqual([51, 63, 72]);
// Add more test cases for other theme color names
});
});

45
src/shared/util/themeColors.ts
View File

@@ -2,24 +2,24 @@ export const colors = {
ut: {
burntorange: '#BF5700',
black: '#333F48',
orange: '#f8971f',
yellow: '#ffd600',
lightgreen: '#a6cd57',
green: '#579d42',
teal: '#00a9b7',
blue: '#005f86',
gray: '#9cadb7',
offwhite: '#d6d2c4',
concrete: '#95a5a6',
red: '#B91C1C' // Not sure if this should be here, but it's used for remove course, and add course is ut-green
orange: '#F8971F',
yellow: '#FFD600',
lightgreen: '#A6CD57',
green: '#579D42',
teal: '#00A9B7',
blue: '#005F86',
gray: '#9CADB7',
offwhite: '#D6D2C4',
concrete: '#95A5A6',
red: '#B91C1C', // Not sure if this should be here, but it's used for remove course, and add course is ut-green
},
theme: {
red: '#af2e2d',
black: '#1a2024',
red: '#AF2E2D',
black: '#1A2024',
},
gradeDistribution: {
a: '#22c55e',
aminus: '#a3e635',
a: '#22C55E',
aminus: '#A3E635',
bplus: '#84CC16',
b: '#FDE047',
bminus: '#FACC15',
@@ -31,7 +31,7 @@ export const colors = {
dminus: '#B91C1C',
f: '#B91C1C',
},
} as const;
} as const satisfies Record<string, Record<string, string>>;
type NestedKeys<T> = {
[K in keyof T]: T[K] extends Record<string, any> ? `${string & K}-${string & keyof T[K]}` : never;
@@ -42,6 +42,10 @@ type NestedKeys<T> = {
*/
export type ThemeColor = NestedKeys<typeof colors>;
/**
* Flattened colors object.
* @type {Record<ThemeColor, string>}
*/
export const colorsFlattened = Object.entries(colors).reduce(
(acc, [prefix, group]) => {
for (const [name, hex] of Object.entries(group)) {
@@ -52,9 +56,18 @@ export const colorsFlattened = Object.entries(colors).reduce(
{} as Record<ThemeColor, string>
);
const hexToRgb = (hex: string) =>
/**
* Converts a hexadecimal color code to an RGB color array.
* @param hex The hexadecimal color code to convert.
* @returns An array representing the RGB color values.
*/
export const hexToRgb = (hex: string) =>
hex.match(/[0-9a-f]{2}/gi).map(partialHex => parseInt(partialHex, 16)) as [number, number, number];
/**
* Represents the flattened RGB values of the colors.
* @type {Record<ThemeColor, ReturnType<typeof hexToRgb>>}
*/
const colorsFlattenedRgb = Object.fromEntries(
Object.entries(colorsFlattened).map(([name, hex]) => [name, hexToRgb(hex)])
) as Record<ThemeColor, ReturnType<typeof hexToRgb>>;

4
src/shared/util/time.ts
View File

@@ -5,7 +5,9 @@ export const HOUR = 60 * MINUTE;
export const DAY = 24 * HOUR;
/**
*
* Pauses the execution for the specified number of milliseconds.
* @param milliseconds - The number of milliseconds to sleep.
* @returns A promise that resolves after the specified number of milliseconds.
*/
export const sleep = (milliseconds: number): Promise<void> => new Promise(resolve => setTimeout(resolve, milliseconds));

5
src/stories/components/Button.stories.tsx
View File

@@ -1,7 +1,8 @@
import { colorsFlattened } from '@shared/util/themeColors';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '@views/components/common/Button/Button';
import React from 'react';
import { colorsFlattened } from 'src/shared/util/themeColors';
import { Button } from 'src/views/components/common/Button/Button';
import AddIcon from '~icons/material-symbols/add';
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
import DescriptionIcon from '~icons/material-symbols/description';

24
src/stories/components/Card.stories.tsx
View File

@@ -1,20 +1,20 @@
import Card from 'src/views/components/common/Card/Card';
import type { Meta, StoryObj } from '@storybook/react';
import Card from '@views/components/common/Card/Card';
import React from 'react';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
title: 'Components/Common/Card',
component: Card,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
args: {
children: <div>Hello</div>,
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
title: 'Components/Common/Card',
component: Card,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
args: {
children: <div>Hello</div>,
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
} satisfies Meta<typeof Card>;
export default meta;

6
src/stories/components/Chip.stories.tsx
View File

@@ -1,5 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { Chip } from 'src/views/components/common/Chip/Chip';
import type { Meta, StoryObj } from '@storybook/react';
import { Chip } from '@views/components/common/Chip/Chip';
const meta = {
title: 'Components/Common/Chip',
@@ -20,4 +20,4 @@ export const Default: Story = {
args: {
label: 'QR',
},
};
};

8
src/stories/components/ConflictsWithWarning.stories.tsx
View File

@@ -1,8 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting } from '@shared/types/CourseMeeting';
import Instructor from '@shared/types/Instructor';
import type { Meta, StoryObj } from '@storybook/react';
import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
import { Course, Status } from 'src/shared/types/Course';
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
import Instructor from 'src/shared/types/Instructor';
export const ExampleCourse: Course = new Course({
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',

7
src/stories/components/CourseStatus.stories.tsx
View File

@@ -1,8 +1,7 @@
import React from 'react';
import { Status } from '@shared/types/Course';
import { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import CourseStatus from '@views/components/common/CourseStatus/CourseStatus';
import React from 'react';
const meta = {
title: 'Components/Common/CourseStatus',
@@ -40,7 +39,7 @@ export const Default: Story = {};
export const Variants: Story = {
render: args => (
<div className='flex flex-col gap-4 items-center'>
<div className='flex flex-col items-center gap-4'>
<CourseStatus {...args} size='small' />
<CourseStatus {...args} size='mini' />
</div>

7
src/stories/components/Divider.stories.tsx
View File

@@ -1,7 +1,8 @@
import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import Divider from '@views/components/common/Divider/Divider';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '@views/components/common/Button/Button';
import Divider from '@views/components/common/Divider/Divider';
import React from 'react';
import AddIcon from '~icons/material-symbols/add';
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
import DescriptionIcon from '~icons/material-symbols/description';

12
src/stories/components/Dropdown.stories.tsx
View File

@@ -1,13 +1,13 @@
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
import { CourseSchedule } from '@shared/types/CourseSchedule';
import Instructor from '@shared/types/Instructor';
import { UserSchedule } from '@shared/types/UserSchedule';
import type { Meta, StoryObj } from '@storybook/react';
import { Serialized } from 'chrome-extension-toolkit';
import Dropdown from '@views/components/common/Dropdown/Dropdown';
import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
import type { Serialized } from 'chrome-extension-toolkit';
import React from 'react';
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
import Instructor from 'src/shared/types/Instructor';
import Dropdown from 'src/views/components/common/Dropdown/Dropdown';
import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
const meta: Meta<typeof Dropdown> = {
title: 'Components/Common/Dropdown',

4
src/stories/components/ImportantLinks.stories.tsx
View File

@@ -1,5 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import ImportantLinks from 'src/views/components/calendar/ImportantLinks';
import type { Meta, StoryObj } from '@storybook/react';
import ImportantLinks from '@views/components/calendar/ImportantLinks';
const meta = {
title: 'Components/Common/ImportantLinks',

6
src/stories/components/InfoCard.stories.tsx
View File

@@ -1,5 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { InfoCard } from 'src/views/components/common/InfoCard/InfoCard';
import type { Meta, StoryObj } from '@storybook/react';
import { InfoCard } from '@views/components/common/InfoCard/InfoCard';
const meta = {
title: 'Components/Common/InfoCard',
@@ -22,4 +22,4 @@ export const Default: Story = {
titleText: 'WAITLIST SIZE',
bodyText: '14 Students',
},
};
};

28
src/stories/components/Link.stories.ts
View File

@@ -1,21 +1,21 @@
import Link from 'src/views/components/common/Link/Link';
import type { Meta, StoryObj } from '@storybook/react';
import Link from '@views/components/common/Link/Link';
const meta = {
title: 'Components/Common/Link',
component: Link,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
color: {
control: 'color',
title: 'Components/Common/Link',
component: Link,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
color: {
control: 'color',
},
},
args: {
children: 'Link',
},
},
args: {
children: 'Link',
},
} satisfies Meta<typeof Link>;
export default meta;

19
src/stories/components/List.stories.tsx
View File

@@ -1,15 +1,22 @@
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting } from '@shared/types/CourseMeeting';
import Instructor from '@shared/types/Instructor';
import { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import List from '@views/components/common/List/List';
import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
import React from 'react';
import { test_colors } from './PopupCourseBlock.stories';
import { TestColors } from './PopupCourseBlock.stories';
const numberOfCourses = 5;
export const generateCourses = count => {
/**
* Generates an array of courses.
*
* @param count - The number of courses to generate.
* @returns An array of generated courses.
*/
export const GenerateCourses = count => {
const courses = [];
for (let i = 0; i < count; i++) {
@@ -61,10 +68,10 @@ export const generateCourses = count => {
return courses;
};
const exampleCourses = generateCourses(numberOfCourses);
const exampleCourses = GenerateCourses(numberOfCourses);
const generateCourseBlocks = (exampleCourses, colors) =>
exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
export const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
export const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, TestColors);
const meta = {
title: 'Components/Common/List',
@@ -87,7 +94,7 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
draggableElements: exampleCourseBlocks,
draggableElements: ExampleCourseBlocks,
itemHeight: 55,
listHeight: 300,
listWidth: 300,

32
src/stories/components/PopupCourseBlock.stories.tsx
View File

@@ -1,13 +1,19 @@
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting } from '@shared/types/CourseMeeting';
import Instructor from '@shared/types/Instructor';
import { getCourseColors } from '@shared/util/colors';
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 { getCourseColors } from 'src/shared/util/colors';
import { theme } from 'unocss/preset-mini';
export const exampleCourse: Course = new Course({
/**
* Represents an example course.
*
* @remarks
* This is a sample course object that provides information about a specific course.
*/
export const ExampleCourse: Course = new Course({
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
creditHours: 3,
department: 'C S',
@@ -62,7 +68,7 @@ const meta = {
// More on argTypes: https://storybook.js.org/docs/api/argtypes
args: {
colors: getCourseColors('emerald'),
course: exampleCourse,
course: ExampleCourse,
},
argTypes: {
colors: {
@@ -87,15 +93,15 @@ export const Default: Story = {
export const Variants: Story = {
render: props => (
<div className='grid grid-cols-2 max-w-2xl w-90vw gap-x-4 gap-y-2'>
<PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.OPEN })} />
<PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.CLOSED })} />
<PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.WAITLISTED })} />
<PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.CANCELLED })} />
<PopupCourseBlock {...props} course={new Course({ ...ExampleCourse, status: Status.OPEN })} />
<PopupCourseBlock {...props} course={new Course({ ...ExampleCourse, status: Status.CLOSED })} />
<PopupCourseBlock {...props} course={new Course({ ...ExampleCourse, status: Status.WAITLISTED })} />
<PopupCourseBlock {...props} course={new Course({ ...ExampleCourse, status: Status.CANCELLED })} />
</div>
),
};
export const test_colors = Object.keys(theme.colors)
export const TestColors = Object.keys(theme.colors)
// check that the color is a colorway (is an object)
.filter(color => typeof theme.colors[color] === 'object')
.slice(0, 17)
@@ -104,8 +110,8 @@ export const test_colors = Object.keys(theme.colors)
export const AllColors: Story = {
render: props => (
<div className='grid grid-flow-col grid-cols-2 grid-rows-9 max-w-2xl w-90vw gap-x-4 gap-y-2'>
{test_colors.map((color, i) => (
<PopupCourseBlock key={color.primaryColor} course={exampleCourse} colors={color} />
{TestColors.map((color, i) => (
<PopupCourseBlock key={color.primaryColor} course={ExampleCourse} colors={color} />
))}
</div>
),

12
src/stories/components/PopupMain.stories.tsx
View File

@@ -1,4 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import PopupMain from '@views/components/PopupMain';
const meta = {
@@ -8,16 +8,12 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
},
argTypes: {},
} satisfies Meta<typeof PopupMain>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
},
};
args: {},
};

8
src/stories/components/SchedulTotalHoursAndCourses.stories.tsx
View File

@@ -1,4 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
const meta = {
@@ -11,7 +11,7 @@ const meta = {
argTypes: {
scheduleName: { control: 'text' },
totalHours: { control: 'number' },
totalCourses: { control: 'number' }
totalCourses: { control: 'number' },
},
} satisfies Meta<typeof ScheduleTotalHoursAndCourses>;
export default meta;
@@ -22,6 +22,6 @@ export const Default: Story = {
args: {
scheduleName: 'SCHEDULE',
totalHours: 22,
totalCourses: 8
totalCourses: 8,
},
};
};

9
src/stories/components/ScheduleListItem.stories.tsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable jsdoc/require-jsdoc */
import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
import React from 'react';
import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
export default {
title: 'Components/Common/ScheduleListItem',
@@ -14,21 +15,21 @@ export default {
},
};
export const Default = (args) => <ScheduleListItem {...args} />;
export const Default = args => <ScheduleListItem {...args} />;
Default.args = {
name: 'My Schedule',
active: true,
};
export const Active = (args) => <ScheduleListItem {...args} />;
export const Active = args => <ScheduleListItem {...args} />;
Active.args = {
name: 'My Schedule',
active: true,
};
export const Inactive = (args) => <ScheduleListItem {...args} />;
export const Inactive = args => <ScheduleListItem {...args} />;
Inactive.args = {
name: 'My Schedule',

4
src/stories/components/Settings.stories.tsx
View File

@@ -1,5 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import Settings from 'src/views/components/Settings';
import type { Meta, StoryObj } from '@storybook/react';
import Settings from '@views/components/Settings';
const meta = {
title: 'Components/Common/Settings',

10
src/stories/components/Spinner.stories.ts
View File

@@ -1,11 +1,11 @@
import Spinner from 'src/views/components/common/Spinner/Spinner';
import type { Meta, StoryObj } from '@storybook/react';
import Spinner from '@views/components/common/Spinner/Spinner';
const meta = {
title: 'Components/Common/Spinner',
component: Spinner,
tags: ['autodocs'],
argTypes: {},
title: 'Components/Common/Spinner',
component: Spinner,
tags: ['autodocs'],
argTypes: {},
} satisfies Meta<typeof Spinner>;
export default meta;

3
src/stories/components/Text.stories.tsx
View File

@@ -1,7 +1,6 @@
import { Button } from 'src/views/components/common/Button/Button';
import type { Meta, StoryObj } from '@storybook/react';
import Text from '@views/components/common/Text/Text';
import React from 'react';
import Text from '../../views/components/common/Text/Text';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {

14
src/stories/components/calendar/Calendar.stories.tsx
View File

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

8
src/stories/components/calendar/CalendarBottomBar.stories.tsx
View File

@@ -1,9 +1,9 @@
import React from 'react';
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';
import type { Meta, StoryObj } from '@storybook/react';
import { CalendarBottomBar } from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
import React from 'react';
const exampleGovCourse: Course = new Course({
courseName: 'Nope',

4
src/stories/components/calendar/CalendarCourse.stories.tsx
View File

@@ -1,9 +1,9 @@
import { Meta, StoryObj } from '@storybook/react';
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
import { CourseSchedule } from '@shared/types/CourseSchedule';
import Instructor from '@shared/types/Instructor';
import CalendarCourse from 'src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
import type { Meta, StoryObj } from '@storybook/react';
import CalendarCourse from '@views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
const meta = {
title: 'Components/Calendar/CalendarCourseMeeting',

15
src/stories/components/calendar/CalendarCourseCell.stories.tsx
View File

@@ -1,9 +1,10 @@
import { Course, Status } from '@shared/types/Course';
import { getCourseColors } from '@shared/util/colors';
import { Meta, StoryObj } from '@storybook/react';
import CalendarCourseCell from 'src/views/components/calendar/CalendarCourseCell/CalendarCourseCell';
import type { Meta, StoryObj } from '@storybook/react';
import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
import React from 'react';
import { exampleCourse } from '../PopupCourseBlock.stories';
import { ExampleCourse } from '../PopupCourseBlock.stories';
const meta = {
title: 'Components/Calendar/CalendarCourseCell',
@@ -25,10 +26,10 @@ const meta = {
</div>
),
args: {
courseDeptAndInstr: exampleCourse.department,
className: exampleCourse.number,
status: exampleCourse.status,
timeAndLocation: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
courseDeptAndInstr: ExampleCourse.department,
className: ExampleCourse.number,
status: ExampleCourse.status,
timeAndLocation: ExampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
colors: getCourseColors('emerald', 500),
},

8
src/stories/components/calendar/CalendarGrid.stories.tsx
View File

@@ -1,8 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import CalendarGrid from 'src/views/components/calendar/CalendarGrid/CalendarGrid';
import { getCourseColors } from '@shared/util/colors';
import { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import { Status } from '@shared/types/Course';
import { getCourseColors } from '@shared/util/colors';
import type { Meta, StoryObj } from '@storybook/react';
import CalendarGrid from '@views/components/calendar/CalendarGrid/CalendarGrid';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
const meta = {
title: 'Components/Calendar/CalendarGrid',

3
src/stories/components/calendar/CalendarGridCell.stories.tsx
View File

@@ -1,7 +1,6 @@
// Calendar.stories.tsx
import React from 'react';
import CalendarCell from 'src/views/components/calendar/CalendarGridCell/CalendarGridCell';
import type { Meta, StoryObj } from '@storybook/react';
import CalendarCell from '@views/components/calendar/CalendarGridCell/CalendarGridCell';
const meta = {
title: 'Components/Calendar/CalendarGridCell',

5
src/stories/components/calendar/CalendarHeader.stories.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
import type { Meta, StoryObj } from '@storybook/react';
import CalendarHeader from '@views/components/calendar/CalendarHeader/CalenderHeader';
const meta = {
title: 'Components/Calendar/CalendarHeader',

8
src/stories/components/calendar/CalendarSchedules.stories.tsx
View File

@@ -1,11 +1,11 @@
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
import { CourseSchedule } from '@shared/types/CourseSchedule';
import Instructor from '@shared/types/Instructor';
import { UserSchedule } from '@shared/types/UserSchedule';
import type { Meta, StoryObj } from '@storybook/react';
import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules';
import React from 'react';
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
import Instructor from 'src/shared/types/Instructor';
import { CalendarSchedules } from 'src/views/components/calendar/CalendarSchedules/CalendarSchedules';
const meta = {
title: 'Components/Calendar/CalendarSchedules',

11
src/stories/injected/CourseCatalogInjectedPopup.stories.ts
View File

@@ -1,10 +1,9 @@
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
import { CourseSchedule } from '@shared/types/CourseSchedule';
import Instructor from '@shared/types/Instructor';
import type { Meta, StoryObj } from '@storybook/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 CourseCatalogInjectedPopup from 'src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
const exampleCourse: Course = new Course({
uniqueId: 50805,

10
src/stories/injected/CoursePopup.stories.ts
View File

@@ -1,9 +1,9 @@
import { Course, Status } from 'src/shared/types/Course';
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
import { UserSchedule } from 'src/shared/types/UserSchedule';
import CoursePopup from 'src/views/components/injected/CoursePopupOld/CoursePopup';
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting } from '@shared/types/CourseMeeting';
import Instructor from '@shared/types/Instructor';
import { UserSchedule } from '@shared/types/UserSchedule';
import type { Meta, StoryObj } from '@storybook/react';
import Instructor from 'src/shared/types/Instructor';
import CoursePopup from '@views/components/injected/CoursePopupOld/CoursePopup';
const exampleCourse: Course = new Course({
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',

12
src/tsconfig.json
View File

@@ -2,13 +2,7 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"composite": true,
"lib": [
"DOM",
"es2021"
],
"types": [
"chrome",
"node",
],
},
"lib": ["DOM", "es2021"],
"types": ["chrome", "node"]
}
}

7
src/views/components/CourseCatalogMain.tsx
View File

@@ -1,19 +1,20 @@
import { Course, ScrapedRow } from '@shared/types/Course';
import type { Course, ScrapedRow } from '@shared/types/Course';
import React, { useEffect, useState } from 'react';
import { useKeyPress } from '../hooks/useKeyPress';
import useSchedules from '../hooks/useSchedules';
import { CourseCatalogScraper } from '../lib/CourseCatalogScraper';
import getCourseTableRows from '../lib/getCourseTableRows';
import { SiteSupport } from '../lib/getSiteSupport';
import type { SiteSupport } from '../lib/getSiteSupport';
import { populateSearchInputs } from '../lib/populateSearchInputs';
import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
import AutoLoad from './injected/AutoLoad/AutoLoad';
import CourseCatalogInjectedPopup from './injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
import CoursePopup from './injected/CoursePopupOld/CoursePopup';
import RecruitmentBanner from './injected/RecruitmentBanner/RecruitmentBanner';
import TableHead from './injected/TableHead';
import TableRow from './injected/TableRow/TableRow';
import TableSubheading from './injected/TableSubheading/TableSubheading';
import CourseCatalogInjectedPopup from './injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
interface Props {
support: SiteSupport.COURSE_CATALOG_DETAILS | SiteSupport.COURSE_CATALOG_LIST;

187
src/views/components/PopupMain.tsx
View File

@@ -1,97 +1,158 @@
import logoImage from '@assets/logo.png'; // Adjust the path as necessary
import { Status } from '@shared/types/Course';
import { StatusIcon } from '@shared/util/icons';
import Divider from '@views/components/common/Divider/Divider';
import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
import List from '@views/components/common/List/List'; // Ensure this path is correctly pointing to your List component
import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
import Text from '@views/components/common/Text/Text';
import { handleOpenCalendar } from '@views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions';
import useSchedules from '@views/hooks/useSchedules';
import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
import React from 'react';
import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
import { StatusIcon } from '@shared/util/icons';
import { Status } from 'src/shared/types/Course';
import { test_colors } from 'src/stories/components/PopupCourseBlock.stories';
import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
import Text from './common/Text/Text';
import Divider from './common/Divider/Divider';
import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
import List from './common/List/List'; // Ensure this path is correctly pointing to your List component
import useSchedules from '../hooks/useSchedules';
import { handleOpenCalendar } from './injected/CourseCatalogInjectedPopup/HeadingAndActions';
import { openTabFromContentScript } from '../lib/openNewTabFromContentScript';
import { TestColors } from 'src/stories/components/PopupCourseBlock.stories';
/**
* Renders the main popup component.
* This component displays the main schedule, courses, and options buttons.
*/
export default function PopupMain() {
const [activeSchedule] = useSchedules();
const [activeSchedule] = useSchedules();
const draggableElements = activeSchedule?.courses.map((course, i) => (
<PopupCourseBlock
key={course.uniqueId}
course={course}
colors={test_colors[i]}
/>
const draggableElements = activeSchedule?.courses.map((course, i) => (
<PopupCourseBlock key={course.uniqueId} course={course} colors={TestColors[i]} />
));
const handleOpenOptions = async () => { // Not sure if it's bad practice to export this
const handleOpenOptions = async () => {
// Not sure if it's bad practice to export this
const url = chrome.runtime.getURL('/src/pages/options/index.html');
await openTabFromContentScript(url);
};
return (
<ExtensionRoot>
<div className="mx-auto max-w-sm rounded-lg bg-white p-4 shadow-md">
<div className="mb-2 flex items-center justify-between bg-white">
<div className="flex items-center">
<img src={logoImage} alt="Logo" style={{ width: '40px', height: '40px', marginRight: '8px' }} />
<div className='mx-auto max-w-sm rounded-lg bg-white p-4 shadow-md'>
<div className='mb-2 flex items-center justify-between bg-white'>
<div className='flex items-center'>
<img src={logoImage} alt='Logo' style={{ width: '40px', height: '40px', marginRight: '8px' }} />
<div>
<Text as="div" variant="h1-course" style={{ color: '#bf5700', fontSize: '1.3rem' }}>UT Registration</Text>
<Text as="div" variant="h1-course" style={{ color: '#f8971f', fontSize: '1.3rem' }}>Plus</Text>
<Text as='div' variant='h1-course' style={{ color: '#bf5700', fontSize: '1.3rem' }}>
UT Registration
</Text>
<Text as='div' variant='h1-course' style={{ color: '#f8971f', fontSize: '1.3rem' }}>
Plus
</Text>
</div>
</div>
<div className="flex items-center">
<button style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }} onClick={handleOpenCalendar}>
<FaCalendarAlt color="white" />
<div className='flex items-center'>
<button
style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }}
onClick={handleOpenCalendar}
>
<FaCalendarAlt color='white' />
</button>
<button style={{ backgroundColor: 'white', marginLeft: '10px', borderRadius: '8px', padding: '8px', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
onClick = {handleOpenOptions}>
<FaCog color="#C05621" />
<button
style={{
backgroundColor: 'white',
marginLeft: '10px',
borderRadius: '8px',
padding: '8px',
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
}}
onClick={handleOpenOptions}
>
<FaCog color='#C05621' />
</button>
</div>
</div>
<Divider color="#E2E8F0" type="solid" style={{ margin: '1rem 0' }} />
<div className="mb-4 rounded-lg bg-white p-2 text-left shadow-inner" style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}>
<Text as="div" variant="h2-course" style={{ color: '#DD6B20', fontSize: '1.2rem' }}>MAIN SCHEDULE:</Text>
<Divider color='#E2E8F0' type='solid' style={{ margin: '1rem 0' }} />
<div
className='mb-4 rounded-lg bg-white p-2 text-left shadow-inner'
style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}
>
<Text as='div' variant='h2-course' style={{ color: '#DD6B20', fontSize: '1.2rem' }}>
MAIN SCHEDULE:
</Text>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', color: '#333f48' }}>
<Text as="div" variant="h1" style={{ fontSize: '1.2rem', fontWeight: 'bold', marginRight: '0.5rem' }}>22 HOURS</Text>
<Text as="div" variant="h2-course" style={{ fontSize: '1.2rem' }}>8 Courses</Text>
<Text
as='div'
variant='h1'
style={{ fontSize: '1.2rem', fontWeight: 'bold', marginRight: '0.5rem' }}
>
22 HOURS
</Text>
<Text as='div' variant='h2-course' style={{ fontSize: '1.2rem' }}>
8 Courses
</Text>
</div>
</div>
{/* Integrate the List component here */}
{activeSchedule ? <List
draggableElements={draggableElements}
itemHeight={100} // Adjust based on your content size
listHeight={500} // Adjust based on total height you want for the list
listWidth={350} // Adjust based on your layout/design
gap={12} // Spacing between items
/> : null}
<div className="mt-4 flex justify-between border-t border-gray-200 p-4 text-xs">
<div className="flex items-center">
<div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
<StatusIcon status={Status.WAITLISTED} className="h-5 w-5 text-white" />
{activeSchedule ? (
<List
draggableElements={draggableElements}
itemHeight={100} // Adjust based on your content size
listHeight={500} // Adjust based on total height you want for the list
listWidth={350} // Adjust based on your layout/design
gap={12} // Spacing between items
/>
) : null}
<div className='mt-4 flex justify-between border-t border-gray-200 p-4 text-xs'>
<div className='flex items-center'>
<div
style={{
backgroundColor: '#6B7280',
padding: '1px',
borderRadius: '4px',
marginRight: '3px',
marginLeft: '8px',
}}
>
<StatusIcon status={Status.WAITLISTED} className='h-5 w-5 text-white' />
</div>
<Text as="span" variant="mini">WAITLISTED</Text>
<Text as='span' variant='mini'>
WAITLISTED
</Text>
</div>
<div className="flex items-center">
<div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
<StatusIcon status={Status.CLOSED} className="h-5 w-5 text-white" />
<div className='flex items-center'>
<div
style={{
backgroundColor: '#6B7280',
padding: '1px',
borderRadius: '4px',
marginRight: '3px',
marginLeft: '8px',
}}
>
<StatusIcon status={Status.CLOSED} className='h-5 w-5 text-white' />
</div>
<Text as="span" variant="mini">CLOSED</Text>
<Text as='span' variant='mini'>
CLOSED
</Text>
</div>
<div className="flex items-center">
<div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
<StatusIcon status={Status.CANCELLED} className="h-5 w-5 text-white" />
<div className='flex items-center'>
<div
style={{
backgroundColor: '#6B7280',
padding: '1px',
borderRadius: '4px',
marginRight: '3px',
marginLeft: '8px',
}}
>
<StatusIcon status={Status.CANCELLED} className='h-5 w-5 text-white' />
</div>
<Text as="span" variant="mini">CANCELLED</Text>
<Text as='span' variant='mini'>
CANCELLED
</Text>
</div>
</div>
<div className="mt-2 text-center text-xs">
<div className="inline-flex items-center justify-center">
<Text as="div" variant="mini">DATA UPDATED ON: 12:00 AM 02/01/2024</Text>
<FaRedo className="ml-2 h-4 w-4 text-gray-600" />
<div className='mt-2 text-center text-xs'>
<div className='inline-flex items-center justify-center'>
<Text as='div' variant='mini'>
DATA UPDATED ON: 12:00 AM 02/01/2024
</Text>
<FaRedo className='ml-2 h-4 w-4 text-gray-600' />
</div>
</div>
</div>

3
src/views/components/calendar/Calendar/Calendar.tsx
View File

@@ -1,9 +1,10 @@
import React from 'react';
import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
import { CalendarBottomBar } from '../CalendarBottomBar/CalendarBottomBar';
import CalendarGrid from '../CalendarGrid/CalendarGrid';
import { CalendarSchedules } from '../CalendarSchedules/CalendarSchedules';
import ImportantLinks from '../ImportantLinks';
import CalendarGrid from '../CalendarGrid/CalendarGrid';
export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];

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

@@ -1,10 +1,13 @@
import React from 'react';
import clsx from 'clsx';
import Text from '../../common/Text/Text';
import CalendarCourseBlock, { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
import { Button } from '../../common/Button/Button';
import ImageIcon from '~icons/material-symbols/image';
import React from 'react';
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
import ImageIcon from '~icons/material-symbols/image';
import { Button } from '../../common/Button/Button';
import Text from '../../common/Text/Text';
import type { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
import CalendarCourseBlock from '../CalendarCourseCell/CalendarCourseCell';
type CalendarBottomBarProps = {
courses?: CalendarCourseCellProps[];

7
src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Course } from 'src/shared/types/Course';
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
import type { Course } from 'src/shared/types/Course';
import type { CourseMeeting } from 'src/shared/types/CourseMeeting';
import styles from './CalendarCourseMeeting.module.scss';
/**
@@ -26,6 +27,8 @@ export interface CalendarCourseMeetingProps {
const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
course,
meetingIdx,
color,
rightIcon,
}: CalendarCourseMeetingProps) => {
let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
return (

21
src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
View File

@@ -1,12 +1,17 @@
import { Status } from '@shared/types/Course';
import Text from '@views/components/common/Text/Text';
import clsx from 'clsx';
import React from 'react';
import { CourseColors, pickFontColor } from 'src/shared/util/colors';
import type { CourseColors } from 'src/shared/util/colors';
import { 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';
import Text from '../../common/Text/Text';
/**
* Props for the CalendarCourseCell component.
*/
export interface CalendarCourseCellProps {
courseDeptAndInstr: string;
timeAndLocation?: string;
@@ -15,6 +20,18 @@ export interface CalendarCourseCellProps {
className?: string;
}
/**
* Renders a cell for a calendar course.
*
* @component
* @param {CalendarCourseCellProps} props - The component props.
* @param {string} props.courseDeptAndInstr - The course department and instructor.
* @param {string} props.timeAndLocation - The time and location of the course.
* @param {Status} props.status - The status of the course.
* @param {Colors} props.colors - The colors for styling the cell.
* @param {string} props.className - Additional CSS class name for the cell.
* @returns {JSX.Element} The rendered component.
*/
const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
courseDeptAndInstr,
timeAndLocation,

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

@@ -1,12 +1,13 @@
import React, { useState, useRef, useEffect } from 'react';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import React, { useEffect, useRef, useState } from 'react';
// import html2canvas from 'html2canvas';
import { DAY_MAP } from 'src/shared/types/CourseMeeting';
import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
/* import calIcon from 'src/assets/icons/cal.svg';
import pngIcon from 'src/assets/icons/png.svg';
*/
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
import styles from './CalendarGrid.module.scss';
/* const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
@@ -107,7 +108,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
newGrid.push(row);
}
setGrid(newGrid);
}, []);
}, [hoursOfDay]);
return (
<div className={styles.calendarGrid}>
@@ -119,7 +120,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
</div>
))}
{grid.map((row, rowIndex) => row)}
{courseCells ? <AccountForCourseConflicts courseCells={courseCells}/> : null}
{courseCells ? <AccountForCourseConflicts courseCells={courseCells} /> : null}
{/* courseCells.map((block: CalendarGridCourse) => (
<div
key={`${block}`}

1
src/views/components/calendar/CalendarGridCell/CalendarGridCell.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import styles from './CalendarGridCell.module.scss';
interface Props {

29
src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
View File

@@ -1,16 +1,21 @@
import React from 'react';
import { Status } from '@shared/types/Course';
import Divider from '../../common/Divider/Divider';
import { Button } from '../../common/Button/Button';
import Text from '../../common/Text/Text';
import MenuIcon from '~icons/material-symbols/menu';
import UndoIcon from '~icons/material-symbols/undo';
import RedoIcon from '~icons/material-symbols/redo';
import SettingsIcon from '~icons/material-symbols/settings';
import ScheduleTotalHoursAndCourses from '../../common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
import CourseStatus from '../../common/CourseStatus/CourseStatus';
import { Button } from '@views/components/common/Button/Button';
import CourseStatus from '@views/components/common/CourseStatus/CourseStatus';
import Divider from '@views/components/common/Divider/Divider';
import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
import Text from '@views/components/common/Text/Text';
import React from 'react';
import calIcon from 'src/assets/logo.png';
import MenuIcon from '~icons/material-symbols/menu';
import RedoIcon from '~icons/material-symbols/redo';
import SettingsIcon from '~icons/material-symbols/settings';
import UndoIcon from '~icons/material-symbols/undo';
/**
* Renders the header component for the calendar.
* @returns The CalendarHeader component.
*/
const CalendarHeader = () => (
<div className='min-h-79px min-w-672px flex px-0 py-15'>
<div className='flex flex-row gap-20'>
@@ -18,9 +23,9 @@ const CalendarHeader = () => (
<div className='flex gap-1'>
<Button variant='single' icon={MenuIcon} color='ut-gray' />
<div className='flex items-center'>
<img src={calIcon} className='min-w-[48px] max-w-[48px]' alt='UT Registration Plus Logo' />
<img src={calIcon} className='max-w-[48px] min-w-[48px]' alt='UT Registration Plus Logo' />
<div className='flex flex-col whitespace-nowrap'>
<Text className='leading-trim text-cap font-roboto text-base text-ut-burntorange font-medium'>
<Text className='leading-trim font-roboto text-cap text-base text-ut-burntorange font-medium'>
UT Registration
</Text>
<Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>

20
src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
View File

@@ -1,16 +1,26 @@
import { UserSchedule } from '@shared/types/UserSchedule';
import type { UserSchedule } from '@shared/types/UserSchedule';
import List from '@views/components/common/List/List';
import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
import Text from '@views/components/common/Text/Text';
import React, { useState } from 'react';
import AddSchedule from '~icons/material-symbols/add';
import List from '../../common/List/List';
import ScheduleListItem from '../../common/ScheduleListItem/ScheduleListItem';
import Text from '../../common/Text/Text';
import AddSchedule from '~icons/material-symbols/add';
/**
* Props for the CalendarSchedules component.
*/
export type Props = {
style?: React.CSSProperties;
dummySchedules?: UserSchedule[];
dummyActiveIndex?: number;
};
/**
* Renders a component that displays a list of schedules.
*
* @param props - The component props.
* @returns The rendered component.
*/
export function CalendarSchedules(props: Props) {
const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
const [schedules, setSchedules] = useState(props.dummySchedules || []);

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

@@ -1,8 +1,10 @@
import React from 'react';
import clsx from 'clsx';
import Text from '../common/Text/Text';
import React from 'react';
import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
import Text from '../common/Text/Text';
type Props = {
className?: string;
};

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

@@ -1,7 +1,10 @@
import clsx from 'clsx';
import React from 'react';
import type IconComponent from '~icons/material-symbols';
import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
import type { ThemeColor } from '../../../../shared/util/themeColors';
import { getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
import Text from '../Text/Text';
interface Props {

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

@@ -1,7 +1,11 @@
import clsx from 'clsx';
import React from 'react';
import styles from './Card.module.scss';
/**
* Props for the Card component.
*/
export type Props = {
style?: React.CSSProperties;
className?: string;

1
src/views/components/common/Chip/Chip.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import Text from '../Text/Text';
/**

9
src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Course } from 'src/shared/types/Course';
import clsx from 'clsx';
import React from 'react';
import type { Course } from 'src/shared/types/Course';
import Text from '../Text/Text';
/**
@@ -28,9 +29,7 @@ export default function ConflictsWithWarning({ className, conflicts }: Conflicts
>
<div>Conflicts With:</div>
{conflicts.map(course => (
<div>
{`${course.department} ${course.number} (${course.uniqueId})`}
</div>
<div>{`${course.department} ${course.number} (${course.uniqueId})`}</div>
))}
</Text>
);

3
src/views/components/common/CourseStatus/CourseStatus.tsx
View File

@@ -1,7 +1,8 @@
import { Status } from '@shared/types/Course';
import type { Status } from '@shared/types/Course';
import { StatusIcon } from '@shared/util/icons';
import clsx from 'clsx';
import React from 'react';
import Text from '../Text/Text';
type SizeType = 'small' | 'mini';

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

@@ -1,3 +1,4 @@
import type { Color } from '@views/styles/colors.module.scss';
import clsx from 'clsx';
import React from 'react';

14
src/views/components/common/Dropdown/Dropdown.tsx
View File

@@ -1,12 +1,16 @@
import { Disclosure, Transition } from '@headlessui/react';
import { UserSchedule } from '@shared/types/UserSchedule';
import type { UserSchedule } from '@shared/types/UserSchedule';
import List from '@views/components/common/List/List';
import Text from '@views/components/common/Text/Text';
import React from 'react';
import userScheduleHandler from 'src/pages/background/handler/userScheduleHandler';
import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
import List from '../List/List';
import Text from '../Text/Text';
/**
* Props for the Dropdown component.
*/
export type Props = {
style?: React.CSSProperties;
// Dummy value solely for storybook
@@ -62,7 +66,7 @@ export default function Dropdown(props: Props) {
<Disclosure.Button>
<div className='flex items-center border-none bg-white p-3 text-left'>
<div className='flex-1'>
<Text as='div' variant='h4' className='text-ut-burntorange mb-1 w-100%'>
<Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
MAIN SCHEDULE:
</Text>
<div>
@@ -74,7 +78,7 @@ export default function Dropdown(props: Props) {
</Text>
</div>
</div>
<Text className='text-ut-burntorange text-2xl font-normal'>
<Text className='text-2xl text-ut-burntorange font-normal'>
{expanded ? <DropdownArrowDown /> : <DropdownArrowUp />}
</Text>
</div>

7
src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
View File

@@ -1,9 +1,10 @@
import React from 'react';
import styles from './ExtensionRoot.module.scss';
import '@unocss/reset/tailwind-compat.css';
import 'uno.css';
import React from 'react';
import styles from './ExtensionRoot.module.scss';
interface Props {
testId?: string;
}

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

@@ -1,9 +1,12 @@
import type { Color } from '@views/styles/colors.module.scss';
import colors from '@views/styles/colors.module.scss';
import type { Size } from '@views/styles/fonts.module.scss';
import fonts from '@views/styles/fonts.module.scss';
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';
import styles from './Icon.module.scss';
import { MaterialIconCode } from './MaterialIcons';
import type { MaterialIconCode } from './MaterialIcons';
/**
*

5
src/views/components/common/Icon/MaterialIcons.d.ts vendored
View File

@@ -2194,4 +2194,7 @@ const icons = [
'zoom_out_map',
] as const;
export type MaterialIconCode = typeof icons[number];
/**
* Represents a type that corresponds to a material icon code.
*/
export type MaterialIconCode = (typeof icons)[number];

51
src/views/components/common/InfoCard/InfoCard.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import Text from '../Text/Text';
interface Props {
@@ -10,31 +11,35 @@ interface Props {
* A maybe reusable InfoCard component that follows the design system of the extension.
* @returns
*/
export function InfoCard({
titleText,
bodyText
}: React.PropsWithChildren<Props>): JSX.Element {
export function InfoCard({ titleText, bodyText }: React.PropsWithChildren<Props>): JSX.Element {
return (
<div
className = 'w-50 flex flex-col items-start justify-center border rounded p-4'
style = {{
border: "1px solid #D6D2C4",
background: "#FFF" // White
}}>
<div className="flex flex-col items-start self-stretch gap-1.5">
<Text variant = "h4" as = 'span'
style = {{
color: '#F8971F', // Orange
}}>
{titleText}
</Text>
<Text variant = "small" as = 'span'
style = {{
color: '#333F48', // Black
}}>
{bodyText}
</Text>
</ div>
className='w-50 flex flex-col items-start justify-center border rounded p-4'
style={{
border: '1px solid #D6D2C4',
background: '#FFF', // White
}}
>
<div className='flex flex-col items-start self-stretch gap-1.5'>
<Text
variant='h4'
as='span'
style={{
color: '#F8971F', // Orange
}}
>
{titleText}
</Text>
<Text
variant='small'
as='span'
style={{
color: '#333F48', // Black
}}
>
{bodyText}
</Text>
</div>
</div>
);
}

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

@@ -1,7 +1,10 @@
import { background } from '@shared/messages';
import clsx from 'clsx';
import React, { PropsWithChildren } from 'react';
import Text, { TextProps } from '../Text/Text';
import type { PropsWithChildren } from 'react';
import React from 'react';
import type { TextProps } from '../Text/Text';
import Text from '../Text/Text';
import styles from './Link.module.scss';
type Props = Omit<TextProps, 'span'> & {

3
src/views/components/common/List/List.tsx
View File

@@ -1,5 +1,6 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import React, { ReactElement, useCallback, useState } from 'react';
import type { ReactElement } from 'react';
import React, { useCallback, useState } from 'react';
import { areEqual } from 'react-window';
/*

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

@@ -1,5 +1,7 @@
import clsx from 'clsx';
import React, { PropsWithChildren, useCallback } from 'react';
import type { PropsWithChildren } from 'react';
import React, { useCallback } from 'react';
import styles from './Popup.module.scss';
interface Props {
@@ -19,8 +21,6 @@ export default function Popup({ onClose, children, className, style, testId, ove
const containerRef = React.useRef<HTMLDivElement>(null);
const bodyRef = React.useRef<HTMLDivElement>(null);
const handleClickOutside = useCallback(
(event: MouseEvent) => {
if (!bodyRef.current) return;

8
src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
View File

@@ -1,9 +1,13 @@
import { Course, Status } from '@shared/types/Course';
import { CourseColors, pickFontColor } from '@shared/util/colors';
import type { Course } from '@shared/types/Course';
import { Status } from '@shared/types/Course';
import type { CourseColors } from '@shared/util/colors';
import { pickFontColor } from '@shared/util/colors';
import { StatusIcon } from '@shared/util/icons';
import clsx from 'clsx';
import React from 'react';
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
import Text from '../Text/Text';
/**

14
src/views/components/common/ScheduleListItem/ScheduleListItem.tsx
View File

@@ -1,8 +1,12 @@
import Text from '@views/components/common/Text/Text';
import clsx from 'clsx';
import React from 'react';
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
import Text from '../Text/Text';
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
/**
* Props for the ScheduleListItem component.
*/
export type Props = {
style?: React.CSSProperties;
active?: boolean;
@@ -18,11 +22,11 @@ export default function ScheduleListItem(props: Props) {
console.log(props);
return (
<div style={{ ...props.style }} className='items-center'>
<li className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'>
<li className='w-100% flex cursor-pointer items-center self-stretch justify-left text-ut-burntorange'>
<div className='group flex justify-center'>
<div
<div
className='flex cursor-move items-center self-stretch rounded rounded-r-0'
{...dragHandleProps}
{...dragHandleProps}
>
<DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
</div>

Some files were not shown because too many files have changed in this diff Show More