-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: color palette for calendar (#118)
* feat: work on the palette * feat: palette basically done? * fix: lint warnings and errors * fix: minor fixes * fix: color patch colors and shades * fix: prettier issue * chore: use TS satisfies * chore: remove eslint-disable comment --------- Co-authored-by: doprz <[email protected]>
- Loading branch information
1 parent
ceb6c19
commit 38bfd75
Showing
7 changed files
with
702 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import CourseCellColorPicker from '@views/components/common/CourseCellColorPicker/CourseCellColorPicker'; | ||
| import React, { useState } from 'react'; | ||
| import type { ThemeColor } from 'src/shared/util/themeColors'; | ||
|
|
||
| const meta = { | ||
| title: 'Components/Common/CourseCellColorPicker', | ||
| component: CourseCellColorPicker, | ||
| } satisfies Meta<typeof CourseCellColorPicker>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof CourseCellColorPicker>; | ||
|
|
||
| export const Default: Story = { | ||
| render: () => { | ||
| const [selectedColor, setSelectedColor] = useState<ThemeColor | null>(null); | ||
| return <CourseCellColorPicker setSelectedColor={setSelectedColor} />; | ||
| }, | ||
| }; |
50 changes: 50 additions & 0 deletions
50
src/views/components/common/CourseCellColorPicker/ColorPatch.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Button } from '@views/components/common/Button/Button'; | ||
| import React from 'react'; | ||
| import type { ThemeColor } from 'src/shared/util/themeColors'; | ||
|
|
||
| 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 | ||
| */ | ||
| const ColorPatch: React.FC<ColorPatchProps> = ({ | ||
| color, | ||
| index, | ||
| selectedColor, | ||
| handleSetSelectedColorPatch, | ||
| }: ColorPatchProps): JSX.Element => { | ||
| const isSelected = selectedColor === index; | ||
| const handleClick = () => { | ||
| handleSetSelectedColorPatch(isSelected ? -1 : index); | ||
| }; | ||
| return ( | ||
| <Button | ||
| style={{ backgroundColor: color }} | ||
| className='h-[22px] w-[22px] p-0' | ||
| variant='filled' | ||
| onClick={handleClick} | ||
| color={color} | ||
| > | ||
| {isSelected && <CheckIcon className='h-[20px] w-[20px]' />} | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default ColorPatch; |
Oops, something went wrong.