1f635d2515
* 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>
238 lines
7.2 KiB
TypeScript
238 lines
7.2 KiB
TypeScript
import { Status } from '@shared/types/Course';
|
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
import CalendarGrid from '@views/components/calendar/CalendarGrid';
|
|
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
|
|
|
|
import { ExampleCourse } from '../PopupCourseBlock.stories';
|
|
|
|
const meta = {
|
|
title: 'Components/Calendar/CalendarGrid',
|
|
component: CalendarGrid,
|
|
parameters: {
|
|
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
layout: 'centered',
|
|
tags: ['autodocs'],
|
|
},
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
saturdayClass: { control: 'boolean' },
|
|
},
|
|
} satisfies Meta<typeof CalendarGrid>;
|
|
export default meta;
|
|
|
|
const testData: CalendarGridCourse[] = [
|
|
{
|
|
calendarGridPoint: {
|
|
dayIndex: 4,
|
|
startIndex: 10,
|
|
endIndex: 11,
|
|
},
|
|
componentProps: {
|
|
courseDeptAndInstr: 'Course 1',
|
|
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
|
status: Status.OPEN,
|
|
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,
|
|
},
|
|
{
|
|
calendarGridPoint: {
|
|
dayIndex: 2,
|
|
startIndex: 5,
|
|
endIndex: 6,
|
|
},
|
|
componentProps: {
|
|
courseDeptAndInstr: 'Course 1',
|
|
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
|
status: Status.OPEN,
|
|
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,
|
|
},
|
|
{
|
|
calendarGridPoint: {
|
|
dayIndex: 1,
|
|
startIndex: 10,
|
|
endIndex: 12,
|
|
},
|
|
componentProps: {
|
|
courseDeptAndInstr: 'Course 2',
|
|
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
|
status: Status.CLOSED,
|
|
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,
|
|
},
|
|
{
|
|
calendarGridPoint: {
|
|
dayIndex: 4,
|
|
startIndex: 10,
|
|
endIndex: 11,
|
|
},
|
|
componentProps: {
|
|
courseDeptAndInstr: 'Course 1',
|
|
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
|
|
status: Status.OPEN,
|
|
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,
|
|
},
|
|
{
|
|
calendarGridPoint: {
|
|
dayIndex: 1,
|
|
startIndex: 10,
|
|
endIndex: 12,
|
|
},
|
|
componentProps: {
|
|
courseDeptAndInstr: 'Course 2',
|
|
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
|
status: Status.CLOSED,
|
|
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,
|
|
},
|
|
{
|
|
calendarGridPoint: {
|
|
dayIndex: 1,
|
|
startIndex: 10,
|
|
endIndex: 12,
|
|
},
|
|
componentProps: {
|
|
courseDeptAndInstr: 'Course 3',
|
|
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
|
status: Status.CLOSED,
|
|
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,
|
|
},
|
|
{
|
|
calendarGridPoint: {
|
|
dayIndex: 1,
|
|
startIndex: 10,
|
|
endIndex: 12,
|
|
},
|
|
componentProps: {
|
|
courseDeptAndInstr: 'Course 4',
|
|
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
|
|
status: Status.CLOSED,
|
|
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,
|
|
},
|
|
];
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
saturdayClass: true,
|
|
courseCells: testData,
|
|
setCourse: () => {},
|
|
},
|
|
};
|