From 51bbd6590bf284ce54644b014466c8b2c73b8925 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Thu, 7 Mar 2024 18:09:46 -0600 Subject: [PATCH] revert: color palette for calendar (#118) --- .../CourseCellColorPicker.stories.tsx | 20 - .../CourseCellColorPicker/ColorPatch.tsx | 48 --- .../CourseCellColorPicker.tsx | 392 ------------------ .../CourseCellColorPicker/DivWrapper.tsx | 20 - .../CourseCellColorPicker/HexColorEditor.tsx | 46 -- .../CourseCellColorPicker/HuePicker.tsx | 41 -- 6 files changed, 567 deletions(-) delete mode 100644 src/stories/components/CourseCellColorPicker.stories.tsx delete mode 100644 src/views/components/common/CourseCellColorPicker/ColorPatch.tsx delete mode 100644 src/views/components/common/CourseCellColorPicker/CourseCellColorPicker.tsx delete mode 100644 src/views/components/common/CourseCellColorPicker/DivWrapper.tsx delete mode 100644 src/views/components/common/CourseCellColorPicker/HexColorEditor.tsx delete mode 100644 src/views/components/common/CourseCellColorPicker/HuePicker.tsx diff --git a/src/stories/components/CourseCellColorPicker.stories.tsx b/src/stories/components/CourseCellColorPicker.stories.tsx deleted file mode 100644 index 464e357b3..000000000 --- a/src/stories/components/CourseCellColorPicker.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ThemeColor } from '@shared/util/themeColors'; -import type { Meta, StoryObj } from '@storybook/react'; -import CourseCellColorPicker from '@views/components/common/CourseCellColorPicker/CourseCellColorPicker'; -import React, { useState } from 'react'; - -const meta = { - title: 'Components/Common/CourseCellColorPicker', - component: CourseCellColorPicker, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - render: () => { - // TODO - const [selectedColor, setSelectedColor] = useState(null); - return ; - }, -}; diff --git a/src/views/components/common/CourseCellColorPicker/ColorPatch.tsx b/src/views/components/common/CourseCellColorPicker/ColorPatch.tsx deleted file mode 100644 index 51619fcc4..000000000 --- a/src/views/components/common/CourseCellColorPicker/ColorPatch.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import type { ThemeColor } from '@shared/util/themeColors'; -import { Button } from '@views/components/common/Button/Button'; -import React from 'react'; - -import CheckIcon from '~icons/material-symbols/check'; - -/** - * Props for the ColorPatch component - */ -interface ColorPatchProps { - color: ThemeColor; - index: number; - selectedColor: number; - handleSetSelectedColorPatch: (colorPatchIndex: number) => void; -} - -/** - * - * @param {ColorPatchProps} props - the props for the component - * @param {ThemeColor} props.color - the color to display - * @param {number} props.index - the index of this color patch in the parent color palette - * @param {number} props.selectedColor - the index of the selected color patch in the parent color palette - * @param {(colorPatchIndex: number) => void} props.handleSetSelectedColorPatch - fn called when a color patch is selected. This function - * is passed from the parent and updates the necessary parent state when this color patch is selected. - * @returns {JSX.Element} - the color patch component - */ -export default function ColorPatch({ - color, - index, - selectedColor, - handleSetSelectedColorPatch, -}: ColorPatchProps): JSX.Element { - const isSelected = selectedColor === index; - const handleClick = () => { - handleSetSelectedColorPatch(isSelected ? -1 : index); - }; - return ( - - ); -} diff --git a/src/views/components/common/CourseCellColorPicker/CourseCellColorPicker.tsx b/src/views/components/common/CourseCellColorPicker/CourseCellColorPicker.tsx deleted file mode 100644 index 893fffab8..000000000 --- a/src/views/components/common/CourseCellColorPicker/CourseCellColorPicker.tsx +++ /dev/null @@ -1,392 +0,0 @@ -import type { ThemeColor } from '@shared/util/themeColors'; -import { getThemeColorHexByName } from '@shared/util/themeColors'; -import { Button } from '@views/components/common/Button/Button'; -import React from 'react'; - -import InvertColorsOffIcon from '~icons/material-symbols/invert-colors-off'; - -import Divider from '../Divider/Divider'; -import ColorPatch from './ColorPatch'; -import DivWrapper from './DivWrapper'; -import HexColorEditor from './HexColorEditor'; -import HuePicker from './HuePicker'; - -interface Color { - baseColor: ThemeColor; - shades: ThemeColor[]; -} - -// TODO: Replace with UnoCSS theme -// const colorPatches: Color[] = [ -// { -// baseColor: 'palette-slateBase', -// shades: [ -// 'palette-slate200', -// 'palette-slate300', -// 'palette-slate400', -// 'palette-slateBase', -// 'palette-slate600', -// 'palette-slate700', -// ], -// }, -// { -// baseColor: 'palette-grayBase', -// shades: [ -// 'palette-gray200', -// 'palette-gray300', -// 'palette-gray400', -// 'palette-grayBase', -// 'palette-gray600', -// 'palette-gray700', -// ], -// }, -// { -// baseColor: 'palette-stoneBase', -// shades: [ -// 'palette-stone200', -// 'palette-stone300', -// 'palette-stone400', -// 'palette-stoneBase', -// 'palette-stone600', -// 'palette-stone700', -// ], -// }, -// { -// baseColor: 'palette-redBase', -// shades: [ -// 'palette-red200', -// 'palette-red300', -// 'palette-red400', -// 'palette-redBase', -// 'palette-red600', -// 'palette-red700', -// ], -// }, -// { -// baseColor: 'palette-orangeBase', -// shades: [ -// 'palette-orange200', -// 'palette-orange300', -// 'palette-orange400', -// 'palette-orangeBase', -// 'palette-orange600', -// 'palette-orange700', -// ], -// }, -// { -// baseColor: 'palette-amberBase', -// shades: [ -// 'palette-amber200', -// 'palette-amber300', -// 'palette-amber400', -// 'palette-amberBase', -// 'palette-amber600', -// 'palette-amber700', -// ], -// }, -// { -// baseColor: 'palette-yellowBase', -// shades: [ -// 'palette-yellow200', -// 'palette-yellow300', -// 'palette-yellow400', -// 'palette-yellowBase', -// 'palette-yellow600', -// 'palette-yellow700', -// ], -// }, -// { -// baseColor: 'palette-limeBase', -// shades: [ -// 'palette-lime200', -// 'palette-lime300', -// 'palette-lime400', -// 'palette-limeBase', -// 'palette-lime600', -// 'palette-lime700', -// ], -// }, -// { -// baseColor: 'palette-greenBase', -// shades: [ -// 'palette-green200', -// 'palette-green300', -// 'palette-green400', -// 'palette-greenBase', -// 'palette-green600', -// 'palette-green700', -// ], -// }, -// { -// baseColor: 'palette-emeraldBase', -// shades: [ -// 'palette-emerald200', -// 'palette-emerald300', -// 'palette-emerald400', -// 'palette-emeraldBase', -// 'palette-emerald600', -// 'palette-emerald700', -// ], -// }, -// { -// baseColor: 'palette-tealBase', -// shades: [ -// 'palette-teal200', -// 'palette-teal300', -// 'palette-teal400', -// 'palette-tealBase', -// 'palette-teal600', -// 'palette-teal700', -// ], -// }, -// { -// baseColor: 'palette-cyanBase', -// shades: [ -// 'palette-cyan200', -// 'palette-cyan300', -// 'palette-cyan400', -// 'palette-cyanBase', -// 'palette-cyan600', -// 'palette-cyan700', -// ], -// }, -// { -// baseColor: 'palette-skyBase', -// shades: [ -// 'palette-sky200', -// 'palette-sky300', -// 'palette-sky400', -// 'palette-skyBase', -// 'palette-sky600', -// 'palette-sky700', -// ], -// }, -// { -// baseColor: 'palette-blueBase', -// shades: [ -// 'palette-blue200', -// 'palette-blue300', -// 'palette-blue400', -// 'palette-blueBase', -// 'palette-blue600', -// 'palette-blue700', -// ], -// }, -// { -// baseColor: 'palette-indigoBase', -// shades: [ -// 'palette-indigo200', -// 'palette-indigo300', -// 'palette-indigo400', -// 'palette-indigoBase', -// 'palette-indigo600', -// 'palette-indigo700', -// ], -// }, -// { -// baseColor: 'palette-violetBase', -// shades: [ -// 'palette-violet200', -// 'palette-violet300', -// 'palette-violet400', -// 'palette-violetBase', -// 'palette-violet600', -// 'palette-violet700', -// ], -// }, -// { -// baseColor: 'palette-purpleBase', -// shades: [ -// 'palette-purple200', -// 'palette-purple300', -// 'palette-purple400', -// 'palette-purpleBase', -// 'palette-purple600', -// 'palette-purple700', -// ], -// }, -// { -// baseColor: 'palette-fuschiaBase', -// shades: [ -// 'palette-fuschia200', -// 'palette-fuschia300', -// 'palette-fuschia400', -// 'palette-fuschiaBase', -// 'palette-fuschia600', -// 'palette-fuschia700', -// ], -// }, -// { -// baseColor: 'palette-pinkBase', -// shades: [ -// 'palette-pink200', -// 'palette-pink300', -// 'palette-pink400', -// 'palette-pinkBase', -// 'palette-pink600', -// 'palette-pink700', -// ], -// }, -// { -// baseColor: 'palette-roseBase', -// shades: [ -// 'palette-rose200', -// 'palette-rose300', -// 'palette-rose400', -// 'palette-roseBase', -// 'palette-rose600', -// 'palette-rose700', -// ], -// }, -// ]; - -const hexCodeToBaseColorPatchIndex = new Map( - colorPatches.map((color: Color, index: number) => [getThemeColorHexByName(color.baseColor), index]) -); - -const hexCodeToShadeColorPatchIndex = new Map( - colorPatches.flatMap((color: Color, index: number) => - color.shades.map(shade => [getThemeColorHexByName(shade), index]) - ) -); - -/** - * Props for the CourseCellColorPicker component. - */ -export interface CourseCellColorPickerProps { - setSelectedColor: React.Dispatch>; -} - -/** - * @param {CourseCellColorPickerProps} props - the props for the component - * @param {React.Dispatch>} props.setSelectedColor - set state function passed down from the parent component - * that will be called when a color is selected. The user can set any valid hex color they want. - * - * @example - * ``` - * const CourseCell = () => { - * const [selectedColor, setSelectedColor] = useState(null); - * ... - * return ( - *
- ... - * - * ); - * }; - * ``` - * - * @returns {JSX.Element} - the color picker component that displays a color palette with a list of color patches. - * This component is available when a user hovers over a course cell in their calendar to - * color for the course cell. The user can set any valid hex color they want. - */ -export default function CourseCellColorPicker({ - setSelectedColor: setFinalColor, -}: CourseCellColorPickerProps): JSX.Element { - const [selectedBaseColorPatch, setSelectedBaseColorPatch] = React.useState(-1); - const [selectedShadeColorPatch, setSelectShadeColorPatch] = React.useState(-1); - const [hexCode, setHexCode] = React.useState(''); - const numColumns = 6; - const numFullRows = 3; - - const handleSelectBaseColorPatch = (baseColorPatchIndex: number) => { - const color = baseColorPatchIndex > -1 ? colorPatches[baseColorPatchIndex].baseColor : 'ut-gray'; - const newHexCode = baseColorPatchIndex > -1 ? getThemeColorHexByName(color).slice(1) : ''; - setHexCode(newHexCode); - setSelectedBaseColorPatch(baseColorPatchIndex); - setSelectShadeColorPatch(3); - }; - - const handleSelectShadeColorPatch = (shadeColorPatchIndex: number) => { - const color = colorPatches[selectedBaseColorPatch].shades[shadeColorPatchIndex]; - const newHexCode = getThemeColorHexByName(color).slice(1); - setHexCode(newHexCode); - setSelectShadeColorPatch(shadeColorPatchIndex); - }; - - React.useEffect(() => { - const hexCodeWithHash = `#${hexCode}`; - if (hexCodeToBaseColorPatchIndex.has(hexCodeWithHash)) { - setSelectedBaseColorPatch(hexCodeToBaseColorPatchIndex.get(hexCodeWithHash)); - } - if (hexCodeToShadeColorPatchIndex.has(hexCodeWithHash)) { - setSelectedBaseColorPatch(hexCodeToShadeColorPatchIndex.get(hexCodeWithHash)); - } - if (!hexCodeToBaseColorPatchIndex.has(hexCodeWithHash) && !hexCodeToShadeColorPatchIndex.has(hexCodeWithHash)) { - setSelectedBaseColorPatch(-1); - } - }, [hexCode]); - - React.useEffect(() => { - let finalColor: string | null = null; - if (selectedBaseColorPatch === -1 && hexCode.length === 6) { - finalColor = `#${hexCode}`; - } else if (selectedBaseColorPatch > -1 && selectedShadeColorPatch === -1) { - finalColor = getThemeColorHexByName(colorPatches[selectedBaseColorPatch].baseColor); - } else if (selectedBaseColorPatch > -1 && selectedShadeColorPatch > -1) { - finalColor = getThemeColorHexByName(colorPatches[selectedBaseColorPatch].shades[selectedShadeColorPatch]); - } else { - finalColor = null; - } - console.log('finalColor', finalColor); - setFinalColor(finalColor); - }, [hexCode, selectedBaseColorPatch, selectedShadeColorPatch, setFinalColor]); - - return ( -
- {Array.from({ length: numFullRows }, (_, rowIndex) => ( -
- {colorPatches.map((color: Color, index) => { - if (index >= rowIndex * numColumns && index < (rowIndex + 1) * numColumns) { - return ( - - - - ); - } - return null; - })} -
- ))} -
- - - - - - -
- -
- - {/* TODO (achadaga): Not really sure what this button is actually supposed to do */} - - -
- - {selectedBaseColorPatch !== -1 && ( - - )} -
- ); -} diff --git a/src/views/components/common/CourseCellColorPicker/DivWrapper.tsx b/src/views/components/common/CourseCellColorPicker/DivWrapper.tsx deleted file mode 100644 index 96060c8a3..000000000 --- a/src/views/components/common/CourseCellColorPicker/DivWrapper.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -/** - * Props for the DivWrapper component - */ -interface ItemWrapperProps { - children: React.ReactNode; -} - -/** - * Utility component to space all the color patches in the color picker component - * - * - * @param {ItemWrapperProps} props - the props for the component - * @param {React.ReactNode} props.children - the children to be wrapped in the div - * @returns {JSX.Element} - the div wrapper component - */ -export default function DivWrapper({ children }: ItemWrapperProps): JSX.Element { - return
{children}
; -} diff --git a/src/views/components/common/CourseCellColorPicker/HexColorEditor.tsx b/src/views/components/common/CourseCellColorPicker/HexColorEditor.tsx deleted file mode 100644 index a815329ce..000000000 --- a/src/views/components/common/CourseCellColorPicker/HexColorEditor.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { getThemeColorHexByName } from '@shared/util/themeColors'; -import React from 'react'; - -import TagIcon from '~icons/material-symbols/tag'; - -/** - * Props for the HexColorEditor component - */ -export interface HexColorEditorProps { - hexCode: string; - setHexCode: React.Dispatch>; -} - -/** - * Utility component to allow the user to enter a valid hex color code - * - * @param {HexColorEditorProps} props - the props for the component - * @param {string} props.hexCode - the current hex color code displayed in this component. Note that this code does not - * include the leading '#' character since it is already included in the component. Passed down from the parent component. - * @param {React.Dispatch>} props.setHexCode - set state fn to control the hex color code from parent - * @returns {JSX.Element} - the hex color editor component - */ -export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorProps): JSX.Element { - const baseColor = React.useMemo(() => getThemeColorHexByName('ut-gray'), []); - const previewColor = hexCode.length === 6 ? `#${hexCode}` : baseColor; - - return ( -
-
- -
-
- setHexCode(e.target.value)} - /> -
-
- ); -} diff --git a/src/views/components/common/CourseCellColorPicker/HuePicker.tsx b/src/views/components/common/CourseCellColorPicker/HuePicker.tsx deleted file mode 100644 index e89abc616..000000000 --- a/src/views/components/common/CourseCellColorPicker/HuePicker.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import type { ThemeColor } from '@shared/util/themeColors'; -import React from 'react'; - -import ColorPatch from './ColorPatch'; -import DivWrapper from './DivWrapper'; - -/** - * Props for the HuePicker component - */ -interface HuePickerProps { - shades: ThemeColor[]; - selectedColor: number; - setSelectedColor: React.Dispatch>; -} - -/** - * Bottom row of the color picker component that displays all the shades of a base color - * - * @param {HuePickerProps} props - the props for the component - * @param {ThemeColor[]} props.shades - the list of shades of the base color - * @param {number} props.selectedColor - the index of the selected color patch in the parent color palette - * @param {React.Dispatch>} props.setSelectedColor - set state fn to control the selected color patch from parent - * @returns {JSX.Element} - the hue picker component - */ -export default function HuePicker({ shades, selectedColor, setSelectedColor }: HuePickerProps): JSX.Element { - const numColumns = 6; - return ( -
- {Array.from({ length: numColumns }, (_, index) => ( - - - - ))} -
- ); -}