feat(ui): course color picker (#382)
* 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 --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Ethan
GitHub
@@ -9,7 +9,7 @@ export interface UserScheduleMessages {
|
||||
*
|
||||
* @param data - The schedule id and course to add
|
||||
*/
|
||||
addCourse: (data: { scheduleId: string; course: Course }) => void;
|
||||
addCourse: (data: { scheduleId: string; course: Course; hasColor?: boolean }) => void;
|
||||
|
||||
/**
|
||||
* Adds a course by URL
|
||||
|
||||
@@ -25,3 +25,8 @@ export type sRGB = [r: number, g: number, b: number];
|
||||
* Represents a Lab color value.
|
||||
*/
|
||||
export type Lab = [l: number, a: number, b: number];
|
||||
|
||||
/**
|
||||
* Represents a HSL color value.
|
||||
*/
|
||||
export type HSL = [h: number, s: number, l: number];
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import type { Serialized } from 'chrome-extension-toolkit';
|
||||
import { theme } from 'unocss/preset-mini';
|
||||
|
||||
import type { HexColor, Lab, RGB, sRGB } from '../types/Color';
|
||||
import type { HexColor, HSL, Lab, RGB, sRGB } from '../types/Color';
|
||||
import { isHexColor } from '../types/Color';
|
||||
import type { Course } from '../types/Course';
|
||||
import type { CourseColors, TWColorway, TWIndex } from '../types/ThemeColors';
|
||||
import { colorwayIndexes } from '../types/ThemeColors';
|
||||
import { colors, colorwayIndexes } from '../types/ThemeColors';
|
||||
import type { UserSchedule } from '../types/UserSchedule';
|
||||
|
||||
/**
|
||||
@@ -26,6 +26,19 @@ export function hexToRGB(hex: HexColor): RGB | undefined {
|
||||
return [parseInt(result[1]!, 16), parseInt(result[2]!, 16), parseInt(result[3]!, 16)];
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a given string is a valid hex color.
|
||||
*
|
||||
* A valid hex color is a string that starts with a '#' followed by either
|
||||
* 3 or 6 hexadecimal characters (0-9, A-F, a-f).
|
||||
*
|
||||
* @param hex - The hex color string to validate.
|
||||
* @returns True if the string is a valid hex color, false otherwise.
|
||||
*/
|
||||
export function isValidHexColor(hex: string): boolean {
|
||||
return /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex);
|
||||
}
|
||||
|
||||
export const useableColorways = Object.keys(theme.colors)
|
||||
// check that the color is a colorway (is an object)
|
||||
.filter(color => typeof theme.colors[color as keyof typeof theme.colors] === 'object')
|
||||
@@ -56,6 +69,13 @@ export function pickFontColor(bgColor: HexColor): 'text-white' | 'text-black' |
|
||||
return Ys < 0.365 ? 'text-black' : 'text-theme-black';
|
||||
}
|
||||
|
||||
// Mapping of Tailwind CSS class names to their corresponding hex values
|
||||
export const tailwindColorMap: Record<string, HexColor> = {
|
||||
'text-white': '#FFFFFF',
|
||||
'text-black': '#000000',
|
||||
'text-theme-black': colors.theme.black,
|
||||
};
|
||||
|
||||
/**
|
||||
* Get primary and secondary colors from a Tailwind colorway
|
||||
*
|
||||
@@ -82,10 +102,15 @@ export function getCourseColors(colorway: TWColorway, index?: number, offset: nu
|
||||
* @param color - The hexadecimal color value.
|
||||
* @returns The Tailwind colorway.
|
||||
*/
|
||||
export function getColorwayFromColor(color: HexColor): TWColorway {
|
||||
export function getColorwayFromColor(color: HexColor): {
|
||||
colorway: TWColorway;
|
||||
index: TWIndex;
|
||||
} {
|
||||
for (const colorway of useableColorways) {
|
||||
if (Object.values(theme.colors[colorway]).includes(color)) {
|
||||
return colorway as TWColorway;
|
||||
const colorValues = Object.values(theme.colors[colorway]);
|
||||
const index = colorValues.indexOf(color);
|
||||
if (index !== -1) {
|
||||
return { colorway: colorway as TWColorway, index: (index * 100) as TWIndex };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,6 +146,124 @@ export function getColorwayFromColor(color: HexColor): TWColorway {
|
||||
return getColorwayFromColor(closestColor);
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a hexadecimal color value to HSL (Hue, Saturation, Lightness) format
|
||||
*
|
||||
* @param hex - The hexadecimal color string
|
||||
* @returns An array of [hue (0-360), saturation (0-100), lightness (0-100)]
|
||||
* @throws If the hex color cannot be converted to RGB
|
||||
*/
|
||||
export const hexToHSL = (hex: HexColor): HSL => {
|
||||
const rgb = hexToRGB(hex);
|
||||
|
||||
if (!rgb) {
|
||||
throw new Error('hexToRGB returned undefined');
|
||||
}
|
||||
|
||||
// Convert RGB to decimals
|
||||
const r = rgb[0] / 255;
|
||||
const g = rgb[1] / 255;
|
||||
const b = rgb[2] / 255;
|
||||
|
||||
// Find min/max/delta
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const delta = max - min;
|
||||
|
||||
// Calculate HSL values
|
||||
let h = 0;
|
||||
let s = 0;
|
||||
let l = (max + min) / 2;
|
||||
|
||||
if (delta !== 0) {
|
||||
// Calculate saturation
|
||||
s = delta / (1 - Math.abs(2 * l - 1));
|
||||
|
||||
// Calculate hue
|
||||
if (max === r) {
|
||||
h = ((g - b) / delta) % 6;
|
||||
} else if (max === g) {
|
||||
h = (b - r) / delta + 2;
|
||||
} else {
|
||||
h = (r - g) / delta + 4;
|
||||
}
|
||||
h *= 60;
|
||||
}
|
||||
|
||||
// Normalize values
|
||||
h = Math.round(h < 0 ? h + 360 : h);
|
||||
s = Math.round(s * 100);
|
||||
l = Math.round(l * 100);
|
||||
|
||||
return [h, s, l];
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts an HSL color value to RGB format.
|
||||
*
|
||||
* @param hsl - The HSL color value
|
||||
* @returns An RGB color value
|
||||
*/
|
||||
function hslToRGB([hue, saturation, lightness]: HSL): RGB {
|
||||
// Convert percentages to decimals
|
||||
const s = saturation / 100;
|
||||
const l = lightness / 100;
|
||||
|
||||
// Calculate intermediate values
|
||||
const c = (1 - Math.abs(2 * l - 1)) * s;
|
||||
const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
|
||||
const m = l - c / 2;
|
||||
|
||||
let r = 0;
|
||||
let g = 0;
|
||||
let b = 0;
|
||||
|
||||
// Determine RGB values based on hue
|
||||
if (hue >= 0 && hue < 60) {
|
||||
[r, g, b] = [c, x, 0];
|
||||
} else if (hue >= 60 && hue < 120) {
|
||||
[r, g, b] = [x, c, 0];
|
||||
} else if (hue >= 120 && hue < 180) {
|
||||
[r, g, b] = [0, c, x];
|
||||
} else if (hue >= 180 && hue < 240) {
|
||||
[r, g, b] = [0, x, c];
|
||||
} else if (hue >= 240 && hue < 300) {
|
||||
[r, g, b] = [x, 0, c];
|
||||
} else {
|
||||
[r, g, b] = [c, 0, x];
|
||||
}
|
||||
|
||||
// Convert to 0-255 range and round
|
||||
return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a darker shade of the given hex color by reducing the lightness in HSL color space.
|
||||
*
|
||||
* @param color - The hexadecimal color value to darken.
|
||||
* @param offset - The percentage to reduce the lightness by (default is 20).
|
||||
* @returns The darker shade of the given hex color.
|
||||
* @throws If the provided color is not a valid hex color.
|
||||
*/
|
||||
export function getDarkerShade(color: HexColor, offset: number = 20): HexColor {
|
||||
const rgb = hexToRGB(color);
|
||||
if (!rgb) {
|
||||
throw new Error('color: Invalid hex.');
|
||||
}
|
||||
|
||||
// Convert to HSL
|
||||
const [h, s, l] = hexToHSL(color);
|
||||
|
||||
// Reduce lightness by offset percentage, ensuring it doesn't go below 0
|
||||
const newL = Math.max(0, l - offset);
|
||||
|
||||
// Convert back to RGB
|
||||
const newRGB = hslToRGB([h, s, newL]);
|
||||
|
||||
// Convert to hex
|
||||
return `#${newRGB.map(c => Math.round(c).toString(16).padStart(2, '0')).join('')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get next unused color in a tailwind colorway for a given schedule
|
||||
*
|
||||
@@ -153,17 +296,28 @@ export function getUnusedColor(
|
||||
|
||||
const scheduleCourses = schedule.courses.map(c => ({
|
||||
...c,
|
||||
colorway: getColorwayFromColor(c.colors.primaryColor),
|
||||
theme: (() => {
|
||||
try {
|
||||
return getColorwayFromColor(c.colors.primaryColor);
|
||||
} catch (error) {
|
||||
// Default to emerald colorway with index 500
|
||||
return {
|
||||
colorway: 'emerald' as TWColorway,
|
||||
index: 500 as TWIndex,
|
||||
};
|
||||
}
|
||||
})(),
|
||||
}));
|
||||
const usedColorways = new Set(scheduleCourses.map(c => c.colorway));
|
||||
|
||||
const usedColorways = new Set(scheduleCourses.map(c => c.theme.colorway));
|
||||
const availableColorways = new Set(useableColorways.filter(c => !usedColorways.has(c)));
|
||||
|
||||
if (availableColorways.size > 0) {
|
||||
let sameDepartment = scheduleCourses.filter(c => c.department === course.department);
|
||||
|
||||
sameDepartment.sort((a, b) => {
|
||||
const aIndex = useableColorways.indexOf(a.colorway);
|
||||
const bIndex = useableColorways.indexOf(b.colorway);
|
||||
const aIndex = useableColorways.indexOf(a.theme.colorway);
|
||||
const bIndex = useableColorways.indexOf(b.theme.colorway);
|
||||
|
||||
return aIndex - bIndex;
|
||||
});
|
||||
@@ -172,8 +326,8 @@ export function getUnusedColor(
|
||||
// check to see if any adjacent colorways are available
|
||||
const centerCourse = sameDepartment[Math.floor(Math.random() * sameDepartment.length)]!;
|
||||
|
||||
let nextColorway = getNextColorway(centerCourse.colorway);
|
||||
let prevColorway = getPreviousColorway(centerCourse.colorway);
|
||||
let nextColorway = getNextColorway(centerCourse.theme.colorway);
|
||||
let prevColorway = getPreviousColorway(centerCourse.theme.colorway);
|
||||
|
||||
// eslint-disable-next-line no-constant-condition
|
||||
while (true) {
|
||||
|
||||
81
src/shared/util/tests/colors.test.ts
Normal file
81
src/shared/util/tests/colors.test.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import { hexToHSL, isValidHexColor } from '@shared/util/colors';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
describe('hexToHSL', () => {
|
||||
it('should convert pure red to HSL', () => {
|
||||
const result = hexToHSL('#FF0000');
|
||||
expect(result).toEqual([0, 100, 50]);
|
||||
});
|
||||
|
||||
it('should convert pure green to HSL', () => {
|
||||
const result = hexToHSL('#00FF00');
|
||||
expect(result).toEqual([120, 100, 50]);
|
||||
});
|
||||
|
||||
it('should convert pure blue to HSL', () => {
|
||||
const result = hexToHSL('#0000FF');
|
||||
expect(result).toEqual([240, 100, 50]);
|
||||
});
|
||||
|
||||
it('should convert white to HSL', () => {
|
||||
const result = hexToHSL('#FFFFFF');
|
||||
expect(result).toEqual([0, 0, 100]);
|
||||
});
|
||||
|
||||
it('should convert black to HSL', () => {
|
||||
const result = hexToHSL('#000000');
|
||||
expect(result).toEqual([0, 0, 0]);
|
||||
});
|
||||
|
||||
it('should convert UT burnt orange to HSL', () => {
|
||||
const result = hexToHSL('#BF5700');
|
||||
expect(result).toEqual([27, 100, 37]);
|
||||
});
|
||||
|
||||
it('should convert gray to HSL', () => {
|
||||
const result = hexToHSL('#808080');
|
||||
expect(result).toEqual([0, 0, 50]);
|
||||
});
|
||||
|
||||
it('should throw error for invalid hex color', () => {
|
||||
expect(() => hexToHSL('#GGGGGG')).toThrow('hexToRGB returned undefined');
|
||||
});
|
||||
});
|
||||
|
||||
describe('isValidHexColor', () => {
|
||||
it('should validate 6-digit hex colors with hash', () => {
|
||||
expect(isValidHexColor('#000000')).toBe(true);
|
||||
expect(isValidHexColor('#FFFFFF')).toBe(true);
|
||||
expect(isValidHexColor('#BF5700')).toBe(true);
|
||||
expect(isValidHexColor('#D6D2C4')).toBe(true);
|
||||
});
|
||||
|
||||
it('should validate 6-digit hex colors without hash', () => {
|
||||
expect(isValidHexColor('000000')).toBe(true);
|
||||
expect(isValidHexColor('FFFFFF')).toBe(true);
|
||||
expect(isValidHexColor('BF5700')).toBe(true);
|
||||
});
|
||||
|
||||
it('should validate 3-digit hex colors with hash', () => {
|
||||
expect(isValidHexColor('#000')).toBe(true);
|
||||
expect(isValidHexColor('#FFF')).toBe(true);
|
||||
expect(isValidHexColor('#F0F')).toBe(true);
|
||||
});
|
||||
|
||||
it('should validate 3-digit hex colors without hash', () => {
|
||||
expect(isValidHexColor('000')).toBe(true);
|
||||
expect(isValidHexColor('FFF')).toBe(true);
|
||||
expect(isValidHexColor('F0F')).toBe(true);
|
||||
});
|
||||
|
||||
it('should reject invalid hex colors', () => {
|
||||
expect(isValidHexColor('#')).toBe(false);
|
||||
expect(isValidHexColor('#GGG')).toBe(false);
|
||||
expect(isValidHexColor('#GGGGGG')).toBe(false);
|
||||
expect(isValidHexColor('GGGGGG')).toBe(false);
|
||||
expect(isValidHexColor('#12345')).toBe(false);
|
||||
expect(isValidHexColor('#1234567')).toBe(false);
|
||||
expect(isValidHexColor('not a color')).toBe(false);
|
||||
expect(isValidHexColor('')).toBe(false);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user