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
@@ -3,6 +3,7 @@ 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';
|
||||
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
|
||||
import React from 'react';
|
||||
|
||||
const exampleGovCourse: Course = new Course({
|
||||
@@ -91,9 +92,18 @@ export const Default: Story = {
|
||||
async: true,
|
||||
calendarGridPoint: { dayIndex: -1, endIndex: -1, startIndex: -1 },
|
||||
componentProps: {
|
||||
colors: getCourseColors('pink', 200),
|
||||
courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0]!.lastName}`,
|
||||
status: exampleGovCourse.status,
|
||||
blockData: {
|
||||
calendarGridPoint: { dayIndex: -1, endIndex: -1, startIndex: -1 },
|
||||
componentProps: {
|
||||
courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0]!.lastName}`,
|
||||
status: exampleGovCourse.status,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: exampleGovCourse,
|
||||
async: true,
|
||||
},
|
||||
},
|
||||
course: exampleGovCourse,
|
||||
},
|
||||
@@ -101,9 +111,18 @@ export const Default: Story = {
|
||||
async: true,
|
||||
calendarGridPoint: { dayIndex: -1, endIndex: -1, startIndex: -1 },
|
||||
componentProps: {
|
||||
colors: getCourseColors('slate', 500),
|
||||
courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0]!.lastName}`,
|
||||
status: examplePsyCourse.status,
|
||||
blockData: {
|
||||
calendarGridPoint: { dayIndex: -1, endIndex: -1, startIndex: -1 },
|
||||
componentProps: {
|
||||
courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0]!.lastName}`,
|
||||
status: examplePsyCourse.status,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: examplePsyCourse,
|
||||
async: true,
|
||||
},
|
||||
},
|
||||
course: examplePsyCourse,
|
||||
},
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Status } from '@shared/types/Course';
|
||||
import { getCourseColors } from '@shared/util/colors';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import type { CalendarCourseCellProps } from '@views/components/calendar/CalendarCourseCell';
|
||||
import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
|
||||
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
|
||||
import React from 'react';
|
||||
|
||||
import { ExampleCourse } from '../PopupCourseBlock.stories';
|
||||
@@ -19,7 +19,6 @@ const meta = {
|
||||
className: { control: { type: 'text' } },
|
||||
status: { control: { type: 'select', options: Object.values(Status) } },
|
||||
timeAndLocation: { control: { type: 'text' } },
|
||||
colors: { control: { type: 'object' } },
|
||||
},
|
||||
render: (args: CalendarCourseCellProps) => (
|
||||
<div className='w-45'>
|
||||
@@ -31,23 +30,70 @@ const meta = {
|
||||
className: ExampleCourse.number,
|
||||
status: ExampleCourse.status,
|
||||
timeAndLocation: ExampleCourse.schedule.meetings[0]!.getTimeString({ separator: '–' }),
|
||||
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
} satisfies Meta<typeof CalendarCourseCell>;
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {};
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
courseDeptAndInstr: ExampleCourse.department,
|
||||
className: ExampleCourse.number,
|
||||
status: ExampleCourse.status,
|
||||
timeAndLocation: ExampleCourse.schedule.meetings[0]!.getTimeString({ separator: '-' }),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 4,
|
||||
startIndex: 10,
|
||||
endIndex: 11,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
componentProps: {
|
||||
courseDeptAndInstr: ExampleCourse.department,
|
||||
status: ExampleCourse.status,
|
||||
timeAndLocation: ExampleCourse.schedule.meetings[0]!.getTimeString({ separator: '-' }),
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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} colors={getCourseColors('green', 500)} />
|
||||
<CalendarCourseCell {...props} colors={getCourseColors('teal', 400)} />
|
||||
<CalendarCourseCell {...props} colors={getCourseColors('indigo', 400)} />
|
||||
<CalendarCourseCell {...props} colors={getCourseColors('red', 500)} />
|
||||
</div>
|
||||
),
|
||||
args: {
|
||||
courseDeptAndInstr: ExampleCourse.department,
|
||||
className: ExampleCourse.number,
|
||||
status: ExampleCourse.status,
|
||||
timeAndLocation: ExampleCourse.schedule.meetings[0]!.getTimeString({ separator: '-' }),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 4,
|
||||
startIndex: 10,
|
||||
endIndex: 11,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
componentProps: {
|
||||
courseDeptAndInstr: ExampleCourse.department,
|
||||
status: ExampleCourse.status,
|
||||
timeAndLocation: ExampleCourse.schedule.meetings[0]!.getTimeString({ separator: '-' }),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 4,
|
||||
startIndex: 10,
|
||||
endIndex: 11,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: ExampleCourse.department,
|
||||
status: ExampleCourse.status,
|
||||
timeAndLocation: ExampleCourse.schedule.meetings[0]!.getTimeString({ separator: '-' }),
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
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';
|
||||
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
|
||||
@@ -32,7 +31,21 @@ const testData: CalendarGridCourse[] = [
|
||||
courseDeptAndInstr: 'Course 1',
|
||||
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
||||
status: Status.OPEN,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 4,
|
||||
startIndex: 10,
|
||||
endIndex: 11,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 1',
|
||||
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
||||
status: Status.OPEN,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
@@ -47,7 +60,21 @@ const testData: CalendarGridCourse[] = [
|
||||
courseDeptAndInstr: 'Course 1',
|
||||
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
||||
status: Status.OPEN,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 2,
|
||||
startIndex: 5,
|
||||
endIndex: 6,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 1',
|
||||
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
||||
status: Status.OPEN,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
@@ -62,7 +89,21 @@ const testData: CalendarGridCourse[] = [
|
||||
courseDeptAndInstr: 'Course 2',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 1,
|
||||
startIndex: 10,
|
||||
endIndex: 12,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 2',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
@@ -77,7 +118,21 @@ const testData: CalendarGridCourse[] = [
|
||||
courseDeptAndInstr: 'Course 1',
|
||||
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
||||
status: Status.OPEN,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 4,
|
||||
startIndex: 10,
|
||||
endIndex: 11,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 1',
|
||||
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
||||
status: Status.OPEN,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
@@ -92,7 +147,21 @@ const testData: CalendarGridCourse[] = [
|
||||
courseDeptAndInstr: 'Course 2',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 1,
|
||||
startIndex: 10,
|
||||
endIndex: 12,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 2',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
@@ -107,7 +176,21 @@ const testData: CalendarGridCourse[] = [
|
||||
courseDeptAndInstr: 'Course 3',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 1,
|
||||
startIndex: 10,
|
||||
endIndex: 12,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 3',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
@@ -122,7 +205,21 @@ const testData: CalendarGridCourse[] = [
|
||||
courseDeptAndInstr: 'Course 4',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
colors: getCourseColors('emerald', 500),
|
||||
blockData: {
|
||||
calendarGridPoint: {
|
||||
dayIndex: 1,
|
||||
startIndex: 10,
|
||||
endIndex: 12,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr: 'Course 4',
|
||||
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
||||
status: Status.CLOSED,
|
||||
blockData: {} as CalendarGridCourse,
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import type { ThemeColor } from '@shared/types/ThemeColors';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import CourseCellColorPicker from '@views/components/calendar/CalendarCourseCellColorPicker/CourseCellColorPicker';
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Calendar/CourseCellColorPicker',
|
||||
@@ -12,15 +11,7 @@ export default meta;
|
||||
type Story = StoryObj<typeof CourseCellColorPicker>;
|
||||
|
||||
function CourseCellColorPickerWithState() {
|
||||
const [, setSelectedColor] = useState<ThemeColor | null>(null);
|
||||
const [isInvertColorsToggled, setIsInvertColorsToggled] = useState<boolean>(false);
|
||||
return (
|
||||
<CourseCellColorPicker
|
||||
setSelectedColor={setSelectedColor}
|
||||
isInvertColorsToggled={isInvertColorsToggled}
|
||||
setIsInvertColorsToggled={setIsInvertColorsToggled}
|
||||
/>
|
||||
);
|
||||
return <CourseCellColorPicker defaultColor='#000000' />;
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
|
||||
Reference in New Issue
Block a user