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

chore: cleanup/resolve PR comments

Browse Source
This commit is contained in:
Razboy20
2024-03-06 15:13:11 -06:00
parent 0c44849e15
commit 8f360206fb
36 changed files with 380 additions and 26853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
.eslintrc
View File

@@ -1,214 +0,0 @@
{
"root": true,
"env": {
"browser": true,
"es6": true,
"node": true,
"webextensions": true,
},
"ignorePatterns": ["*.html", "tsconfig.json"],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:storybook/recommended",
"airbnb-base",
"airbnb/rules/react",
"airbnb-typescript",
"@unocss",
"prettier",
],
"plugins": [
"import",
"import-essentials",
"jsdoc",
"react-prefer-function-component",
"@typescript-eslint",
"simple-import-sort",
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"debugger": true,
"browser": true,
"context": true,
"JSX": true,
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": 2022,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true,
},
},
"settings": {
"react": {
"version": "detect",
},
"jsdoc": {
"mode": "typescript",
},
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"],
},
"import/resolver": {
"typescript": {
"alwaysTryTypes": true,
"project": "./tsconfig.json",
},
},
},
"rules": {
"prefer-const": [
"off",
{
"destructuring": "any",
"ignoreReadBeforeAssign": false,
},
],
"no-plusplus": "off",
"no-inner-declarations": "off",
"sort-imports": "off",
"no-case-declarations": "off",
"no-unreachable": "warn",
"no-constant-condition": "error",
"space-before-function-paren": "off",
"no-undef": "off",
"no-return-await": "off",
"@typescript-eslint/return-await": "off",
"@typescript-eslint/no-shadow": ["off"],
"@typescript-eslint/no-use-before-define": ["off"],
"class-methods-use-this": "off",
"react-hooks/exhaustive-deps": "warn",
"@typescript-eslint/lines-between-class-members": "off",
"no-param-reassign": [
"error",
{
"props": false,
},
],
"no-console": "off",
"consistent-return": "off",
"react/destructuring-assignment": "off",
"import/prefer-default-export": "off",
"no-promise-executor-return": "off",
"import/no-cycle": "off",
"import/no-extraneous-dependencies": "off",
"react/jsx-props-no-spreading": "off",
"keyword-spacing": [
"error",
{
"before": true,
"after": true,
},
],
"no-continue": "off",
"space-before-blocks": [
"error",
{
"functions": "always",
"keywords": "always",
"classes": "always",
},
],
"react/jsx-filename-extension": [
1,
{
"extensions": [".tsx"],
},
],
"react/no-deprecated": "warn",
"react/prop-types": "off",
"react-prefer-function-component/react-prefer-function-component": [
"warn",
{
"allowComponentDidCatch": false,
},
],
"react/function-component-definition": "off",
"react/button-has-type": "off",
"jsdoc/require-param-type": "off",
"jsdoc/require-returns-type": "off",
"jsdoc/newline-after-description": "off",
"react/require-default-props": "off",
"jsdoc/require-jsdoc": [
"warn",
{
"enableFixer": false,
"publicOnly": true,
"checkConstructors": false,
"require": {
"ArrowFunctionExpression": true,
"ClassDeclaration": true,
"ClassExpression": true,
"FunctionExpression": true,
},
"contexts": [
"MethodDefinition:not([key.name=\"componentDidMount\"]):not([key.name=\"render\"])",
"ArrowFunctionExpression",
"ClassDeclaration",
"ClassExpression",
"ClassProperty:not([key.name=\"state\"]):not([key.name=\"componentDidMount\"])",
"FunctionDeclaration",
"FunctionExpression",
"TSDeclareFunction",
"TSEnumDeclaration",
"TSInterfaceDeclaration",
"TSMethodSignature",
"TSModuleDeclaration",
"TSTypeAliasDeclaration",
],
},
],
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-unused-vars": "warn",
"@typescript-eslint/naming-convention": "off",
"@typescript-eslint/space-before-function-paren": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-empty-interface": "warn",
"import/no-restricted-paths": [
"error",
{
"zones": [
{
"target": "./src/background",
"from": "./src/views",
"message": "You cannot import into the `background` directory from the `views` directory (i.e. content script files) because it will break the build!",
},
{
"target": "./src/views",
"from": "./src/background",
"message": "You cannot import into the `views` directory from the `background` directory (i.e. background script files) because it will break the build!",
},
{
"target": "./src/shared",
"from": "./",
"except": ["./src/shared", "./node_modules"],
"message": "You cannot import into `shared` from an external directory.",
},
],
},
],
"import/extensions": "off",
"no-restricted-syntax": [
"error",
"ForInStatement",
"LabeledStatement",
"WithStatement",
{
"selector": "TSEnumDeclaration",
"message": "Don't declare enums",
},
],
"@typescript-eslint/consistent-type-exports": "error",
"@typescript-eslint/consistent-type-imports": "error",
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
"import-essentials/restrict-import-depth": "error",
"import-essentials/check-path-alias": "error",
},
}

216
.eslintrc.cjs Normal file
View File

@@ -0,0 +1,216 @@
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true,
webextensions: true,
},
ignorePatterns: ['*.html', 'tsconfig.json'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:storybook/recommended',
'airbnb-base',
'airbnb/rules/react',
'airbnb-typescript',
'@unocss',
'prettier',
],
plugins: [
'import',
'import-essentials',
'jsdoc',
'react-prefer-function-component',
'@typescript-eslint',
'simple-import-sort',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
debugger: true,
browser: true,
context: true,
JSX: true,
},
parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
ecmaVersion: 2022,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
modules: true,
experimentalObjectRestSpread: true,
},
},
settings: {
react: {
version: 'detect',
},
jsdoc: {
mode: 'typescript',
},
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx'],
},
'import/resolver': {
typescript: {
alwaysTryTypes: true,
project: './tsconfig.json',
},
},
},
rules: {
'prefer-const': [
'off',
{
destructuring: 'any',
ignoreReadBeforeAssign: false,
},
],
'no-plusplus': 'off',
'no-inner-declarations': 'off',
'sort-imports': 'off',
'no-case-declarations': 'off',
'no-unreachable': 'warn',
'no-constant-condition': 'error',
'space-before-function-paren': 'off',
'no-undef': 'off',
'no-return-await': 'off',
'@typescript-eslint/return-await': 'off',
'@typescript-eslint/no-shadow': ['off'],
'@typescript-eslint/no-use-before-define': ['off'],
'class-methods-use-this': 'off',
'react-hooks/exhaustive-deps': 'warn',
'@typescript-eslint/lines-between-class-members': 'off',
'no-param-reassign': [
'error',
{
props: false,
},
],
'no-console': 'off',
'consistent-return': 'off',
'react/destructuring-assignment': 'off',
'import/prefer-default-export': 'off',
'no-promise-executor-return': 'off',
'import/no-cycle': 'off',
'import/no-extraneous-dependencies': 'off',
'react/jsx-props-no-spreading': 'off',
'keyword-spacing': [
'error',
{
before: true,
after: true,
},
],
'no-continue': 'off',
'space-before-blocks': [
'error',
{
functions: 'always',
keywords: 'always',
classes: 'always',
},
],
'react/jsx-filename-extension': [
1,
{
extensions: ['.tsx'],
},
],
'react/no-deprecated': 'warn',
'react/prop-types': 'off',
'react-prefer-function-component/react-prefer-function-component': [
'warn',
{
allowComponentDidCatch: false,
},
],
'react/function-component-definition': 'off',
'react/button-has-type': 'off',
'jsdoc/require-param-type': 'off',
'jsdoc/require-returns-type': 'off',
'jsdoc/newline-after-description': 'off',
'react/require-default-props': 'off',
'jsdoc/require-jsdoc': [
'warn',
{
enableFixer: false,
publicOnly: true,
checkConstructors: false,
require: {
ArrowFunctionExpression: true,
ClassDeclaration: true,
ClassExpression: true,
FunctionExpression: true,
},
contexts: [
'MethodDefinition:not([key.name="componentDidMount"]):not([key.name="render"])',
'ArrowFunctionExpression',
'ClassDeclaration',
'ClassExpression',
'ClassProperty:not([key.name="state"]):not([key.name="componentDidMount"])',
'FunctionDeclaration',
'FunctionExpression',
'TSDeclareFunction',
'TSEnumDeclaration',
'TSInterfaceDeclaration',
'TSMethodSignature',
'TSModuleDeclaration',
'TSTypeAliasDeclaration',
],
},
],
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/naming-convention': 'off',
'@typescript-eslint/space-before-function-paren': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/no-empty-interface': 'warn',
'import/no-restricted-paths': [
'error',
{
zones: [
{
target: './src/background',
from: './src/views',
message:
'You cannot import into the `background` directory from the `views` directory (i.e. content script files) because it will break the build!',
},
{
target: './src/views',
from: './src/background',
message:
'You cannot import into the `views` directory from the `background` directory (i.e. background script files) because it will break the build!',
},
{
target: './src/shared',
from: './',
except: ['./src/shared', './node_modules'],
message: 'You cannot import into `shared` from an external directory.',
},
],
},
],
'import/extensions': 'off',
'no-restricted-syntax': [
'error',
'ForInStatement',
'LabeledStatement',
'WithStatement',
{
selector: 'TSEnumDeclaration',
message: "Don't declare enums",
},
],
'@typescript-eslint/consistent-type-exports': 'error',
'@typescript-eslint/consistent-type-imports': 'error',
'simple-import-sort/imports': 'error',
'simple-import-sort/exports': 'error',
'import-essentials/restrict-import-depth': 'error',
'import-essentials/check-path-alias': 'error',
},
};

2
.gitignore vendored
View File

@@ -208,4 +208,4 @@ sketch
# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,node,react,storybookjs
# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
package-lock.json

8
.vscode/extensions.json vendored
View File

@@ -1,5 +1,9 @@
{
"recommendations": [
"clinyong.vscode-css-modules"
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"antfu.unocss",
"editorconfig.editorconfig",
"figma.figma-vscode-extension"
]
}
}

3
.vscode/settings.json vendored
View File

@@ -37,7 +37,4 @@
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.tsdk": "node_modules/typescript/lib",
"tailwindCSS.includeLanguages": {
"plaintext": "javascript"
}
}

26
README.md
View File

@@ -2,29 +2,27 @@
## Built Using
- React 18
- TypeScript
- Vite 5
- ESLint
- Prettier
- Semantic-Release
- Custom Messaging & Storage Wrappers
- React 18
- TypeScript
- Vite 5
- ESLint
- Prettier
- Semantic-Release
- Custom Messaging & Storage Wrappers
## Getting Started
1. Clone this repo
2. Run `pnpm install` to install and patch all the required dependencies
- If you want to run the development build:
- If you want to run the development build:
- Run `pnpm run dev`
- Run `pnpm run dev`
- If you want to build the extension for production:
- If you want to build the extension for production:
- Run `pnpm build`
You may have to rename the `__uno.css.js` to `uno.css.js` in dist
- Run `pnpm build`
Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked'
Navigate to the 'dist' folder and click 'select' to import the extension
Navigate to the 'dist' folder and click 'select' to import the extension.

23602
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@@ -25,10 +25,7 @@
},
"dependencies": {
"@headlessui/react": "^1.7.18",
"@headlessui/tailwindcss": "^0.2.0",
"@hello-pangea/dnd": "^16.5.0",
"@types/sql.js": "^1.4.9",
"@unocss/reset": "^0.58.5",
"@vitejs/plugin-react": "^4.2.1",
"chrome-extension-toolkit": "^0.0.51",
"clsx": "^2.1.0",
@@ -40,12 +37,12 @@
"react-devtools-core": "^5.0.0",
"react-dom": "^18.2.0",
"sass": "^1.71.1",
"sql.js": "1.10.2",
"styled-components": "^6.1.8"
"sql.js": "1.10.2"
},
"devDependencies": {
"@commitlint/cli": "^18.6.1",
"@commitlint/config-conventional": "^18.6.2",
"@commitlint/types": "^19.0.3",
"@crxjs/vite-plugin": "2.0.0-beta.21",
"@iconify-json/material-symbols": "^1.1.73",
"@storybook/addon-designs": "^7.0.9",
@@ -55,14 +52,13 @@
"@storybook/react": "^7.6.17",
"@storybook/react-vite": "^7.6.17",
"@storybook/test": "^7.6.17",
"@svgr/core": "^8.1.0",
"@svgr/plugin-jsx": "^8.1.0",
"@types/chrome": "^0.0.260",
"@types/node": "^20.11.24",
"@types/prompts": "^2.4.9",
"@types/react": "^18.2.61",
"@types/react-dom": "^18.2.19",
"@types/semver": "^7.5.8",
"@types/sql.js": "^1.4.9",
"@types/uuid": "^9.0.8",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
@@ -105,6 +101,7 @@
"storybook": "^7.6.17",
"typescript": "^5.3.3",
"unocss": "^0.58.5",
"unocss-preset-primitives": "0.0.2-beta.0",
"unplugin-icons": "^0.18.5",
"vite": "^5.1.4",
"vite-plugin-inspect": "^0.8.3",

546
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

8
src/assets/icons/cal.svg
View File

@@ -1,8 +0,0 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_3175_7842" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_3175_7842)">
<path d="M12 14.5C11.7167 14.5 11.4792 14.4042 11.2875 14.2125C11.0958 14.0208 11 13.7833 11 13.5C11 13.2167 11.0958 12.9792 11.2875 12.7875C11.4792 12.5958 11.7167 12.5 12 12.5C12.2833 12.5 12.5208 12.5958 12.7125 12.7875C12.9042 12.9792 13 13.2167 13 13.5C13 13.7833 12.9042 14.0208 12.7125 14.2125C12.5208 14.4042 12.2833 14.5 12 14.5ZM8 14.5C7.71667 14.5 7.47917 14.4042 7.2875 14.2125C7.09583 14.0208 7 13.7833 7 13.5C7 13.2167 7.09583 12.9792 7.2875 12.7875C7.47917 12.5958 7.71667 12.5 8 12.5C8.28333 12.5 8.52083 12.5958 8.7125 12.7875C8.90417 12.9792 9 13.2167 9 13.5C9 13.7833 8.90417 14.0208 8.7125 14.2125C8.52083 14.4042 8.28333 14.5 8 14.5ZM16 14.5C15.7167 14.5 15.4792 14.4042 15.2875 14.2125C15.0958 14.0208 15 13.7833 15 13.5C15 13.2167 15.0958 12.9792 15.2875 12.7875C15.4792 12.5958 15.7167 12.5 16 12.5C16.2833 12.5 16.5208 12.5958 16.7125 12.7875C16.9042 12.9792 17 13.2167 17 13.5C17 13.7833 16.9042 14.0208 16.7125 14.2125C16.5208 14.4042 16.2833 14.5 16 14.5ZM12 18.5C11.7167 18.5 11.4792 18.4042 11.2875 18.2125C11.0958 18.0208 11 17.7833 11 17.5C11 17.2167 11.0958 16.9792 11.2875 16.7875C11.4792 16.5958 11.7167 16.5 12 16.5C12.2833 16.5 12.5208 16.5958 12.7125 16.7875C12.9042 16.9792 13 17.2167 13 17.5C13 17.7833 12.9042 18.0208 12.7125 18.2125C12.5208 18.4042 12.2833 18.5 12 18.5ZM8 18.5C7.71667 18.5 7.47917 18.4042 7.2875 18.2125C7.09583 18.0208 7 17.7833 7 17.5C7 17.2167 7.09583 16.9792 7.2875 16.7875C7.47917 16.5958 7.71667 16.5 8 16.5C8.28333 16.5 8.52083 16.5958 8.7125 16.7875C8.90417 16.9792 9 17.2167 9 17.5C9 17.7833 8.90417 18.0208 8.7125 18.2125C8.52083 18.4042 8.28333 18.5 8 18.5ZM16 18.5C15.7167 18.5 15.4792 18.4042 15.2875 18.2125C15.0958 18.0208 15 17.7833 15 17.5C15 17.2167 15.0958 16.9792 15.2875 16.7875C15.4792 16.5958 15.7167 16.5 16 16.5C16.2833 16.5 16.5208 16.5958 16.7125 16.7875C16.9042 16.9792 17 17.2167 17 17.5C17 17.7833 16.9042 18.0208 16.7125 18.2125C16.5208 18.4042 16.2833 18.5 16 18.5ZM5 22.5C4.45 22.5 3.97917 22.3042 3.5875 21.9125C3.19583 21.5208 3 21.05 3 20.5V6.5C3 5.95 3.19583 5.47917 3.5875 5.0875C3.97917 4.69583 4.45 4.5 5 4.5H6V2.5H8V4.5H16V2.5H18V4.5H19C19.55 4.5 20.0208 4.69583 20.4125 5.0875C20.8042 5.47917 21 5.95 21 6.5V20.5C21 21.05 20.8042 21.5208 20.4125 21.9125C20.0208 22.3042 19.55 22.5 19 22.5H5ZM5 20.5H19V10.5H5V20.5Z" fill="#333F48"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

8
src/assets/icons/png.svg
View File

@@ -1,8 +0,0 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_3211_5369" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_3211_5369)">
<path d="M5 21.5C4.45 21.5 3.97917 21.3042 3.5875 20.9125C3.19583 20.5208 3 20.05 3 19.5V5.5C3 4.95 3.19583 4.47917 3.5875 4.0875C3.97917 3.69583 4.45 3.5 5 3.5H19C19.55 3.5 20.0208 3.69583 20.4125 4.0875C20.8042 4.47917 21 4.95 21 5.5V19.5C21 20.05 20.8042 20.5208 20.4125 20.9125C20.0208 21.3042 19.55 21.5 19 21.5H5ZM6 17.5H18L14.25 12.5L11.25 16.5L9 13.5L6 17.5Z" fill="#333F48"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 702 B

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

@@ -1,24 +0,0 @@
import type HotReloadingMessages from '@shared/messages/HotReloadingMessages';
import { DevStore } from '@shared/storage/DevStore';
import type { MessageHandler } from 'chrome-extension-toolkit';
const hotReloadingHandler: MessageHandler<HotReloadingMessages> = {
async reloadExtension({ sendResponse }) {
const [isExtensionReloading, isTabReloading] = await Promise.all([
DevStore.get('isExtensionReloading'),
DevStore.get('isTabReloading'),
]);
if (!isExtensionReloading) return sendResponse();
if (isTabReloading) {
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
const tabToReload = tabs[0];
await DevStore.set('reloadTabId', tabToReload?.id);
}
chrome.runtime.reload();
},
};
export default hotReloadingHandler;

42
src/pages/background/util/hotReloadTab.ts
View File

@@ -1,42 +0,0 @@
import { DevStore } from '@shared/storage/DevStore';
/**
* A list of websites that we don't want to reload when the extension reloads (becuase it'd be hella annoying lmao)
*/
const HOT_RELOADING_WHITELIST = [
'youtube.com',
'twitch.tv',
'github.dev',
'figma.com',
'netflix.com',
'disneyplus.com',
'hbomax.com',
'spotify.com',
'localhost:6006',
'docs.google.com',
'reddit.com',
'gmail.com',
'photopea.com',
'chat.openai.com',
];
/**
* Reloads the tab that was open when the extension was reloaded
* @returns a promise that resolves when the tab is reloaded
*/
export async function hotReloadTab(): Promise<void> {
const [isTabReloading, reloadTabId] = await Promise.all([
DevStore.get('isTabReloading'),
DevStore.get('reloadTabId'),
]);
if (!isTabReloading || !reloadTabId) return;
chrome.tabs.get(reloadTabId, tab => {
if (!tab?.id) return;
if (!tab.url) return;
if (!HOT_RELOADING_WHITELIST.find(url => tab.url?.includes(url))) {
chrome.tabs.reload(tab.id);
}
});
}

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

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

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

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

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

@@ -5,13 +5,6 @@ import { describe, expect, it } from 'vitest';
// `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(''));
// Test case 1: Single word
expect(capitalize('hello')).toBe('Hello');

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

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

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

@@ -81,8 +81,6 @@ const meta = {
tags: ['autodocs'],
argTypes: {
draggableElements: { control: 'object' },
itemHeight: { control: 'number' },
listHeight: { control: 'number' },
listWidth: { control: 'number' },
gap: { control: 'number' },
},
@@ -94,8 +92,6 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
draggableElements: ExampleCourseBlocks,
itemHeight: 55,
listHeight: 300,
listWidth: 300,
gap: 12,
},

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

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

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

@@ -2,7 +2,7 @@ import { Course, Status } from '@shared/types/Course';
import Instructor from '@shared/types/Instructor';
import { getCourseColors } from '@shared/util/colors';
import type { Meta, StoryObj } from '@storybook/react';
import { CalendarBottomBar } from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
import React from 'react';
const exampleGovCourse: Course = new Course({

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

@@ -1,4 +1,4 @@
import { Course, Status } from '@shared/types/Course';
import { Status } from '@shared/types/Course';
import { getCourseColors } from '@shared/util/colors';
import type { Meta, StoryObj } from '@storybook/react';
import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
@@ -43,73 +43,10 @@ export const Default: Story = {};
export const Variants: Story = {
render: props => (
<div className='grid grid-cols-2 h-40 max-w-60 w-90vw gap-x-4 gap-y-2'>
<CalendarCourseCell
{...props}
// course={new Course({ ...exampleCourse, status: Status.OPEN })}
// Course = new Course({
// courseName: 'PRINCIPLES OF COMPUTER SYSTEMS',
// creditHours: 3,
// department: 'C S',
// description: [
// 'Restricted to computer science majors.',
// 'An introduction to computer systems software abstractions with an emphasis on the connection of these abstractions to underlying computer hardware. Key abstractions include threads, virtual memory, protection, and I/O. Requires writing of synchronized multithreaded programs and pieces of an operating system.',
// 'Computer Science 439 and 439H may not both be counted.',
// 'Prerequisite: Computer Science 429, or 429H with a grade of at least C-.',
// 'May be counted toward the Independent Inquiry flag requirement.',
// ],
// flags: ['Independent Inquiry'],
// fullName: 'C S 439 PRINCIPLES OF COMPUTER SYSTEMS',
// instructionMode: 'In Person',
// instructors: [
// new Instructor({
// firstName: 'Allison',
// lastName: 'Norman',
// fullName: 'Allison Norman',
// }),
// ],
// isReserved: false,
// number: '439',
// schedule: {
// meetings: [
// new CourseMeeting({
// days: ['Tuesday', 'Thursday'],
// startTime: 930,
// endTime: 1050,
// }),
// new CourseMeeting({
// days: ['Friday'],
// startTime: 600,
// endTime: 720,
// }),
// ],
// },
// semester: {
// code: '12345',
// season: 'Spring',
// year: 2024,
// },
// status: Status.WAITLISTED,
// uniqueId: 67890,
// url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
// });
colors={getCourseColors('green', 500)}
/>
<CalendarCourseCell
{...props}
// course={new Course({ ...exampleCourse, status: Status.CLOSED })}
colors={getCourseColors('teal', 400)}
/>
<CalendarCourseCell
{...props}
// course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
colors={getCourseColors('indigo', 400)}
/>
<CalendarCourseCell
{...props}
// course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
colors={getCourseColors('red', 500)}
/>
<CalendarCourseCell {...props} colors={getCourseColors('green', 500)} />
<CalendarCourseCell {...props} colors={getCourseColors('teal', 400)} />
<CalendarCourseCell {...props} colors={getCourseColors('indigo', 400)} />
<CalendarCourseCell {...props} colors={getCourseColors('red', 500)} />
</div>
),
};

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

@@ -10,7 +10,7 @@ import Text from '@views/components/common/Text/Text';
import { handleOpenCalendar } from '@views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions';
import useSchedules, { switchSchedule } from '@views/hooks/useSchedules';
import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
import styles from '@views/styles/popupMain.module.scss';
import clsx from 'clsx';
import React, { useEffect, useRef, useState } from 'react';
import CalendarIcon from '~icons/material-symbols/calendar-month';
@@ -97,26 +97,31 @@ export default function PopupMain(): JSX.Element {
{`${activeSchedule.name}`}:
</Text>
<div className='flex items-center justify-start gap2.5 color-ut-black'>
<Text variant='h1'>{`${activeSchedule.hours} HOURS`}</Text>
<Text variant='h2-course'>{`${activeSchedule.courses.length} Courses`}</Text>
<Text variant='h1'>{activeSchedule.hours} HOURS</Text>
<Text variant='h2-course'>{activeSchedule.courses.length} Courses</Text>
</div>
</div>
<div className={`${styles.arrow} ${isPopupVisible ? styles.expanded : ''}`} />
<div
className={clsx(
'ml-auto inline-block h-0 w-0 border-l-5 border-r-5 border-t-5 border-transparent border-ut-orange transition-transform duration-300 ease-in-out',
{ 'rotate-180': isPopupVisible }
)}
/>
</div>
{isPopupVisible && (
<div ref={popupRef}>
{nonActiveSchedules.map(schedule => (
<div
key={schedule.name}
className={styles.scheduleItem}
className='my-2 cursor-pointer border border-gray-300 rounded-md border-solid bg-white py-4 shadow-sm hover:bg-gray-100'
onClick={() => selectSchedule(schedule)}
>
<Text as='div' variant='h1-course' className='color-ut-burntorange'>
{schedule.name}:
</Text>
<div className='flex items-center justify-start gap2.5 color-ut-black'>
<Text variant='h1'>{`${schedule.hours} HOURS`}</Text>
<Text variant='h2-course'>{`${schedule.courses.length} Courses`}</Text>
<Text variant='h1'>{schedule.hours} HOURS</Text>
<Text variant='h2-course'>{schedule.courses.length} Courses</Text>
</div>
</div>
))}
@@ -127,8 +132,6 @@ export default function PopupMain(): JSX.Element {
draggableElements={activeSchedule?.courses.map((course, i) => (
<PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
))}
itemHeight={100}
listHeight={500}
listWidth={350}
gap={12}
/>

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

@@ -1,5 +1,5 @@
import type { Course } from '@shared/types/Course';
import { CalendarBottomBar } from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
import CalendarGrid from '@views/components/calendar/CalendarGrid/CalendarGrid';
import CalendarHeader from '@views/components/calendar/CalendarHeader/CalenderHeader';
import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules';
@@ -9,8 +9,6 @@ import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSched
import React, { useRef } from 'react';
import { ExampleCourse } from 'src/stories/components/PopupCourseBlock.stories';
export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
/**
* A reusable chip component that follows the design system of the extension.
* @returns
@@ -23,9 +21,10 @@ export default function Calendar(): JSX.Element {
return (
<div className='flex flex-col'>
<CalendarHeader
totalHours={activeSchedule.hours}
scheduleName={activeSchedule.name}
totalCourses={activeSchedule?.courses.length}
// TODO: implement props
// totalHours={activeSchedule.hours}
// scheduleName={activeSchedule.name}
// totalCourses={activeSchedule?.courses.length}
/>
<div className='h-screen w-full flex flex-col md:flex-row'>
<div className='min-h-[30%] flex flex-col items-start gap-2.5 p-5 pl-7'>
@@ -43,7 +42,7 @@ export default function Calendar(): JSX.Element {
</div>
</div>
</div>
{/* TODO: Doesn't work when exampleCourse is replaced with an actual course through setCourse.
{/* TODO: Doesn't work when exampleCourse is replaced with an actual course through setCourse.
Check CalendarGrid.tsx and AccountForCourseConflicts for an example */}
{course ? (
<CourseCatalogInjectedPopup

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

@@ -15,10 +15,10 @@ import UndoIcon from '~icons/material-symbols/undo';
/**
* Opens the options page in a new tab.
* @returns {Promise<void>} A promise that resolves when the options page is opened.
* @returns A promise that resolves when the options page is opened.
*/
const handleOpenOptions = async () => {
const url = chrome.runtime.getURL('/src/pages/options/index.html');
const handleOpenOptions = async (): Promise<void> => {
const url = chrome.runtime.getURL('/options.html');
await openTabFromContentScript(url);
};

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

@@ -77,7 +77,7 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
</div>
</div>
<div className='flex flex-col space-y-2.5'>
<List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
<List gap={10} draggableElements={scheduleComponents} listWidth={240} />
<input
type='text'
placeholder='Enter new schedule'

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

@@ -97,13 +97,7 @@ export default function Dropdown(props: Props) {
afterLeave={toggleSwitch}
>
<Disclosure.Panel>
<List
draggableElements={scheduleComponents}
itemHeight={30}
listHeight={30}
listWidth={240}
gap={10}
/>
<List draggableElements={scheduleComponents} listWidth={240} gap={10} />
</Disclosure.Panel>
</Transition>
</Disclosure>

18
src/views/components/common/Icon/Icon.module.scss
View File

@@ -1,18 +0,0 @@
@use 'src/views/styles/fonts.module.scss';
.icon {
font-family: 'Material Icons Round';
font-weight: fonts.$normal_weight;
font-style: normal;
font-size: fonts.$medium_size;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

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

@@ -1,48 +0,0 @@
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 styles from './Icon.module.scss';
import type { MaterialIconCode } from './MaterialIcons';
/**
* Props for the Icon component.
*/
export type Props = {
name: MaterialIconCode;
className?: string;
style?: React.CSSProperties;
color?: Color;
backgroundColor?: Color;
weight?: 'normal' | 'bold';
size?: Size | number;
onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
testId?: string;
};
/**
* This is a reusable Icon component that uses the Material Icons Round font internally
* You can find the list of icons here: https://fonts.google.com/icons?selected=Material+Icons+Round
*/
export default function Icon(props: Props): JSX.Element {
const style = props.style || {};
style.color ??= colors?.[props.color ?? 'charcoal'];
style.backgroundColor ??= props.backgroundColor ? colors?.[props.backgroundColor] : undefined;
style.fontSize ??= fonts?.[`${props.size}_size`];
style.fontWeight ??= fonts?.[`${props.weight ?? 'normal'}_weight`];
return (
<span
data-testid={props.testId}
style={style}
className={clsx(styles.icon, props.className)}
onClick={props.onClick}
>
{props.name}
</span>
);
}

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

File diff suppressed because it is too large Load Diff

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

@@ -12,30 +12,12 @@ interface Props {
*/
export default 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
}}
>
<div className='w-50 border rounded p-4 border-gray-300 bg-white'>
<div className='flex flex-col gap-1.5'>
<Text variant='h4' as='span' className='text-ut-orange'>
{titleText}
</Text>
<Text
variant='small'
as='span'
style={{
color: '#333F48', // Black
}}
>
<Text variant='small' as='span' className='text-ut-black'>
{bodyText}
</Text>
</div>

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

@@ -1,11 +1,9 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import type { ReactElement } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { satisfies } from 'semver';
/*
* Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
*
*/
/**
@@ -14,8 +12,6 @@ import { satisfies } from 'semver';
export interface ListProps {
draggableElements: any[]; // TODO: Will later define draggableElements based on what types
// of components are draggable.
itemHeight: number;
listHeight: number;
listWidth: number;
gap: number; // Impacts the spacing between items in the list
}
@@ -56,40 +52,13 @@ function Item({ provided, item, style, isDragging /* , gap */ }) {
);
}
interface RowProps {
data: any; // DraggableElements[]; Need to define DraggableElements interface once those components are ready
index: number;
style: React.CSSProperties;
}
const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style }) => {
const item = items[index];
const adjustedStyle = {
...style,
height: `calc(${style.height}px - ${gap}px)`, // Reduce the height by gap to accommodate the margin
marginBottom: `${gap}px`, // Add gap as bottom margin
};
return (
<Draggable draggableId={item.id} index={index} key={item.id}>
{/* @ts-ignore */}
{provided => <Item provided={provided} item={item} style={adjustedStyle} gap={gap} />}
</Draggable>
);
});
/**
* `List` is a functional component that displays a course meeting.
*
* @example
* <List draggableElements={elements} />
*/
export default function List({
draggableElements,
itemHeight,
listHeight,
listWidth,
gap = 12,
}: ListProps): JSX.Element {
export default function List({ draggableElements, listWidth, gap = 12 }: ListProps): JSX.Element {
const [items, setItems] = useState(() => initial(0, draggableElements));
useEffect(() => {

10
src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
View File

@@ -22,13 +22,13 @@ export default function ScheduleTotalHoursAndCourses({
}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
return (
<div className='min-w-64 flex content-center items-baseline gap-2 whitespace-nowrap uppercase'>
<Text className='text-[#BF5700]' variant='h1' as='span'>
<Text className='text-ut-burntorange' variant='h1' as='span'>
{`${scheduleName}: `}
</Text>
<Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-[#1A2024]'>
{`${totalHours} HOURS`}
<Text variant='h4' as='span' className='text-[#333F48]'>
{`${totalCourses} courses`}
<Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-theme-black'>
{totalHours} HOURS
<Text variant='h4' as='span' className='text-ut-black'>
{totalCourses} courses
</Text>
</Text>
</div>

10
src/views/styles/fonts.module.scss
View File

@@ -25,16 +25,6 @@
font-style: normal;
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-display: block;
font-weight: 400;
src: url('@public/fonts/material-icons.woff2') format('woff2');
}
$normal_weight: 500; // Used by <Icon>, will be removed later
$medium_size: 16px;
:export {

28
src/views/styles/popupMain.module.scss
View File

@@ -1,28 +0,0 @@
.arrow {
margin-left: auto; // Pushes the arrow to the right
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid orange; // Use your desired color for the arrow
transition: transform 0.3s ease; // smooth transition for rotation
}
.expanded {
transform: rotate(180deg);
}
.scheduleItem {
border: 1px solid #ccc; /* Example border */
margin: 8px 0; /* Increased spacing */
padding: 10px; /* Inner spacing */
border-radius: 4px; /* Rounded corners */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
background-color: #fff; /* Ensure background contrast */
cursor: pointer;
&:hover {
background-color: #f9f9f9; /* Hover effect */
}
}

2
tsconfig.json
View File

@@ -31,7 +31,7 @@
"node_modules/@types",
"src/manifest.ts",
"package.json",
".eslintrc",
".eslintrc.cjs",
"postcss.config.cjs",
".storybook",
"unocss.config.ts"

2
vite.config.ts
View File

@@ -107,7 +107,7 @@ export default defineConfig({
return code;
},
},
// renameFile('src/pages/debug/index.html', 'debug.html'),
renameFile('src/pages/options/index.html', 'options.html'),
renameFile('src/pages/calendar/index.html', 'calendar.html'),
],
resolve: {