Ethan Lanting c2328e461e feat(ui): color picker final touches (#491)
* fix: update CourseCellColorPicker.tsx background to white

* feat: add color picker to CalendarCourseCell component

* feat: add color picker functionality to update course colors

* fix: type issues with storybook components

* feat: add useColorPicker hook, isValidHexColor and updateCourseColors utilities

* refactor: color picker logic and UI components

* refactor: update useFlattenedCourseSchedule hook to include courseID property

* refactor: update storybook calendar components with updated props

* refactor: update color picker ui logic to account for position of cell

* fix: revert back to error handling for invalid rgb

* refactor: update jsdocs

* refactor: integrate ColorPickerContext into Calendar components and update props

* refactor: integrate ColorPickerContext into Calendar components and update related props

* refactor: change JSDocs comments and remove unused color inversion state

* refactor: update story components

* feat: add functionality for selecting secondary course colors

* refactor: enhance HexColorEditor to dynamically adjust tag icon color based on preview color

* refactor: simplify JSDoc comment in useColorPicker hook

* fix: revert Button component

* refactor: update CalendarCourseCell component positioning and styling

* fix: correct types in color.ts

* feat: add getDarkerShade function to compute darker shades of hex colors

* feat: add shadow to color picker button

* fix: update button size in ColorPatch component

* feat: implement debounced input for hex color editor and add useDebounce hook

* chore: utilize the logical and && operator instead of the ternary operator

* fix: imports and palette icon

* refactor: remove unused import

* fix: bug when course add fails with custom colors

* chore: run lint

* chore: run check-types

* feat: add HSL color type and conversion functions

* refactor: rename colorway to theme

* fix: hide color picker on screenshot

* fix: undo important syntax

* refactor: rename SomeFunction to DebouncedCallback

* refactor: remove inner function

* refactor: update return type to DebouncedCallback

* fix: adjust sizes for hash and palette button

* feat: create tests for hexToHSL and isValidHexColor

* refactor: update parameter type to use HexColor

* fix: increase size of palette button

* fix: update dependency array for hex code debounce

* fix: change colorPickerRef element ref

* feat: add Roboto Mono font

* fix: update input class to use monospace font

* feat: add getLighterShade function

* chore: run prettier and lint

* feat: synchronize local hex code with hexCode prop changes

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
2025-01-29 20:32:06 -06:00
2024-03-06 15:11:27 -06:00
2024-05-20 17:08:36 -05:00
2024-10-23 14:15:47 -05:00
2024-10-03 13:49:10 -05:00
2024-10-12 17:05:37 -05:00
2024-10-14 22:08:45 -05:00
2024-01-30 16:43:30 -06:00
2024-10-14 22:08:45 -05:00
2024-10-12 17:05:37 -05:00
2023-02-22 22:51:38 -06:00
2023-02-22 22:51:38 -06:00
2024-11-04 18:15:09 -06:00
2024-11-12 21:57:59 -06:00

UT Registration Plus

UTRP Social Preview

Chrome Web Store Downloads License

UT Registration Plus (UTRP) streamlines the process of registering for classes at UT Austin by reducing the chaos of juggling multiple tabs like Rate My Professor, Google Sheets, and the UT Course Schedule. With UTRP, you can simplify class selection and schedule management. We've all been there. 20 tabs of Rate My Professor, Google Spreadsheet, and the UT Course Schedule open and you still don't know what classes to take.

Demo

UTRP v2 Demo

Features

  • Quick Access to Class Info: For each class in the UT Course Schedule, UTRP provides a "breakdown" popup with direct links to RateMyProfessor, Course Evaluation Surveys (CES), and past syllabi.
  • Prerequisite & Restriction Highlights: Displays course descriptions with highlighted details on prerequisites, restrictions, and other important info.
  • Grade Distribution Graphs: View an aggregate and semester-specific graph of grade distributions for each course.
  • Saved Courses List: Easily add courses to a list and view them in the extension popup. Copy unique numbers with a single click.
  • Conflict Detection: Automatically highlights and strikes out courses that conflict with your saved courses in the UT Course Catalog.
  • Weekly Schedule View: Displays your saved courses in a weekly schedule format for easier planning.
  • Multiple Schedule Support: Create multiple schedules to plan for different registration scenarios.
  • And much more!

Toolchain

  • React v20.9.0 (LTS)
  • TypeScript
  • Vite 5
  • UnoCSS
  • ESLint
  • Prettier
  • Storybook
  • Figma
  • Semantic-Release
  • Custom Messaging & Storage Wrappers

VSCode Extensions

We recommend using the following VSCode extensions to improve your development experience:

Contributing

Contributions are welcome and encouraged! To get started:

  1. Fork the repository.
  2. Create a new branch: git checkout -b feature/your-feature.
  3. Make changes and ensure your code passes linting and formatting checks: pnpm run lint and pnpm run prettier.
  4. Commit your changes following the Conventional Commits specification.
  5. Push your branch: git push origin feature/your-feature.
  6. Open a Pull Request.

For significant changes, its recommended to open an issue first to discuss the proposed updates.

Development

Getting Started

  1. Clone this repository: git clone https://github.com/Longhorn-Developers/UT-Registration-Plus.git
  2. Node Version: This project requires the Node.js version specified in .nvmrc. Use nvm to install and manage the correct version:
    nvm install
    nvm use
    
    Note: Installing the wrong Node version can lead to errors during setup.
  3. Install dependencies using pnpm (which manages and patches dependencies):
    pnpm install
    

Once set up, the extension can be built to the dist/ directory using the following methods:

Development Builds

  • Run the development server:
    pnpm dev
    

Note

: Injected content on UT pages may not display correctly in development mode. To develop with accurate styles, use the following command:

NODE_ENV='development' pnpm run dev build --mode development -w

Production Builds

  • To generate production builds:
    pnpm build
    
Beta Builds

Use BETA=true pnpm build to generate a beta build.

Docker

This project includes a Dockerfile that allows you to build, zip, or run the extension in development mode using Docker. Refer to Docker Dev Setup to get started.

Loading the Extension Manually

To load the extension manually in Chrome:

  1. Open chrome://extensions.
  2. Enable 'Developer Mode'.
  3. Click 'Load unpacked'.
  4. Navigate to the dist/ directory and select it.

Bug Reporting

If you encounter bugs or issues, please report them in the Issues section, including:

  • A clear, descriptive title
  • Steps to reproduce the issue
  • Expected behavior
  • Screenshots or logs (if applicable)

We aim to address issues promptly.

Conventional Commits & Branch Naming Convention

We follow the Conventional Commits specification for commit messages. This ensures a consistent commit history and enables automated versioning and changelog generation.

Commit Messages

Follow this structure for commit messages:

<type>(<scope>): <subject>

Where:

  • type: One of the following:
    • feat: A new feature
    • fix: A bug fix
    • docs: Documentation updates
    • style: Code formatting changes (whitespace, semicolons, etc.)
    • refactor: Code restructuring (without adding features or fixing bugs)
    • test: Adding or modifying tests
    • chore: Maintenance tasks or build process changes

Example:

feat(auth): add login functionality
fix(ui): align buttons in navbar

Branch Naming

Branch names should follow the format:

<type>/<short-description>

Examples:

  • feat/user-login
  • fix/navbar-layout
  • docs/update-readme

License

This project is licensed under the MIT License. See the LICENSE for more details.

Code of Conduct

We maintain a strict code of conduct. By contributing, you agree to adhere to the rules outlined in CODE_OF_CONDUCT.md.

Acknowledgements

Special thanks to the developers and contributors behind these amazing tools and libraries:

Activity

UT-Registration-Plus Activity

Star History

Star History Chart
Description
UT Registration Plus: Open source Chrome Extension that improves the course registration experience at UT Austin by presenting more information to students on the Course Catalog! 60,000+ peak Users!
Readme 96 MiB
Languages
TypeScript 96.6%
CSS 0.9%
SCSS 0.8%
Nix 0.7%
HTML 0.4%
Other 0.6%