From 83bfeda4caff69b07570f1240ead99af3e6454a7 Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Sat, 25 Jan 2025 01:34:11 +0100 Subject: [PATCH] [FEAT] Chakra V3 full operational --- front/src/App.tsx | 8 +- front/src/components/AudioPlayer.tsx | 54 ++++--- front/src/components/Icon.tsx | 1 + .../Layout/PageLayoutInfoCenter.tsx | 2 +- front/src/components/TopBar/TopBar.tsx | 59 ++++--- front/src/components/album/DisplayAlbum.tsx | 4 +- .../components/contextMenu/ContextMenu.tsx | 8 +- front/src/components/form/FormNumber.tsx | 18 +-- front/src/components/gender/DisplayGender.tsx | 2 +- front/src/components/popup/AlbumEditPopUp.tsx | 6 +- .../src/components/popup/ArtistEditPopUp.tsx | 5 +- .../src/components/popup/GenderEditPopUp.tsx | 4 +- .../components/popup/PopUpUploadProgress.tsx | 5 +- front/src/components/popup/TrackEditPopUp.tsx | 4 +- .../src/components/select/SelectMultiple.tsx | 9 +- front/src/components/select/SelectSingle.tsx | 2 +- front/src/components/track/DisplayTrack.tsx | 6 +- .../src/components/track/DisplayTrackFull.tsx | 8 +- front/src/components/ui/number-input.tsx | 24 +++ front/src/components/ui/themed.tsx | 7 - front/src/errors/Error401.tsx | 2 +- front/src/errors/Error403.tsx | 4 +- front/src/errors/Error404.tsx | 2 +- front/src/errors/ErrorBoundary.tsx | 41 ++--- front/src/scene/album/AlbumDetailPage.tsx | 12 +- .../scene/artist/ArtistAlbumDetailPage.tsx | 13 +- front/src/scene/artist/ArtistDetailPage.tsx | 2 +- front/src/scene/artist/ArtistsPage.tsx | 9 +- front/src/scene/gender/GenderDetailPage.tsx | 4 +- front/src/scene/home/AddPage.tsx | 4 +- front/src/scene/onAir/OnAirPage.tsx | 63 +++++++- front/src/service/ActivePlaylist.ts | 4 +- front/src/theme/{foundations => }/colors.ts | 1 + front/src/theme/foundations/index.ts | 9 -- front/src/theme/foundations/shadows.ts | 23 --- front/src/theme/recipes/badge.ts | 24 --- front/src/theme/recipes/button.ts | 117 -------------- front/src/theme/recipes/checkbox.ts | 5 - front/src/theme/recipes/drawer.ts | 29 ---- front/src/theme/recipes/flex.ts | 20 --- front/src/theme/recipes/index.ts | 13 -- front/src/theme/recipes/input.ts | 21 --- front/src/theme/recipes/modal.ts__ | 17 -- front/src/theme/recipes/numberInput.ts_ | 27 ---- front/src/theme/recipes/popover.ts | 77 --------- front/src/theme/recipes/radio.ts | 5 - front/src/theme/recipes/select.ts | 20 --- front/src/theme/recipes/switch.ts | 5 - front/src/theme/recipes/textarea.ts | 18 --- .../src/theme/styleguide/buttons.stories.tsx | 67 -------- front/src/theme/styleguide/colors.stories.tsx | 66 -------- front/src/theme/theme.ts | 153 +++++------------- front/src/types/theme.d.ts | 2 +- 53 files changed, 281 insertions(+), 834 deletions(-) create mode 100644 front/src/components/ui/number-input.tsx delete mode 100644 front/src/components/ui/themed.tsx rename front/src/theme/{foundations => }/colors.ts (99%) delete mode 100644 front/src/theme/foundations/index.ts delete mode 100644 front/src/theme/foundations/shadows.ts delete mode 100644 front/src/theme/recipes/badge.ts delete mode 100644 front/src/theme/recipes/button.ts delete mode 100644 front/src/theme/recipes/checkbox.ts delete mode 100644 front/src/theme/recipes/drawer.ts delete mode 100644 front/src/theme/recipes/flex.ts delete mode 100644 front/src/theme/recipes/index.ts delete mode 100644 front/src/theme/recipes/input.ts delete mode 100644 front/src/theme/recipes/modal.ts__ delete mode 100644 front/src/theme/recipes/numberInput.ts_ delete mode 100644 front/src/theme/recipes/popover.ts delete mode 100644 front/src/theme/recipes/radio.ts delete mode 100644 front/src/theme/recipes/select.ts delete mode 100644 front/src/theme/recipes/switch.ts delete mode 100644 front/src/theme/recipes/textarea.ts delete mode 100644 front/src/theme/styleguide/buttons.stories.tsx delete mode 100644 front/src/theme/styleguide/colors.stories.tsx diff --git a/front/src/App.tsx b/front/src/App.tsx index efb8056..39f3e9c 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -26,6 +26,7 @@ import { USERS, USERS_COLLECTION } from '@/service/session'; import { hashLocalData } from '@/utils/sso'; import { Toaster } from './components/ui/toaster'; import { systemTheme } from './theme/theme'; +import { CloseButton } from './components/ui/close-button'; const AppEnvHint = () => { const dialog = useDisclosure(); @@ -88,11 +89,6 @@ const AppEnvHint = () => { Outils développeurs - - - User @@ -111,7 +107,7 @@ const AppEnvHint = () => { - + diff --git a/front/src/components/AudioPlayer.tsx b/front/src/components/AudioPlayer.tsx index 404daa7..10ea173 100644 --- a/front/src/components/AudioPlayer.tsx +++ b/front/src/components/AudioPlayer.tsx @@ -2,12 +2,8 @@ import { SyntheticEvent, useEffect, useRef, useState } from 'react'; import { Box, - Button, Flex, IconButton, - Slider, - SliderRoot, - SliderThumb, SliderTrack, Text, } from '@chakra-ui/react'; @@ -35,6 +31,7 @@ import { DataUrlAccess } from '@/utils/data-url-access'; import { useColorModeValue } from '@/components/ui/color-mode'; import { isNullOrUndefined } from '@/utils/validator'; import { Icon } from './Icon'; +import { Slider } from './ui/slider'; export enum PlayMode { PLAY_ONE, @@ -44,10 +41,10 @@ export enum PlayMode { } const playModeIcon = { - [PlayMode.PLAY_ONE]: , - [PlayMode.PLAY_ALL]: , - [PlayMode.PLAY_ONE_LOOP]: , - [PlayMode.PLAY_ALL_LOOP]: , + [PlayMode.PLAY_ONE]: , + [PlayMode.PLAY_ALL]: , + [PlayMode.PLAY_ONE_LOOP]: , + [PlayMode.PLAY_ALL_LOOP]: , }; export type AudioPlayerProps = {}; @@ -89,9 +86,8 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => { const backColor = useColorModeValue('back.100', 'back.800'); const configButton = { borderRadius: 'full', - backgroundColor: '#00000000', + backgroundColor: 'transparent', _hover: { - boxShadow: 'outline-over', bgColor: 'brand.500', }, width: "50px", @@ -209,6 +205,14 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => { const onChangeStateToPause = () => { setIsPlaying(false); }; + const marks = () => { + const minutes = Math.floor(duration / 60); + const result: number[] = []; + for (let i = 1; i <= minutes; i++) { + result.push(60 * i); + } + return result; + } return ( <> {!isNullOrUndefined(trackOffset) && ( @@ -253,20 +257,21 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => { {dataGender && ` / ${dataGender.name}`} - onSeek(e.value)} variant="outline" - // focusThumbOnChange={false} + colorPalette="brand" + marks={marks()} + //focusCapture={false} > - - {/* */} + - + { {...configButton} aria-label={'Play'} onClick={onPlay} + variant="ghost" > {isPlaying ? ( - + ) : ( - + )} + variant="ghost" + > + variant="ghost" + > + variant="ghost" + > {playModeIcon[playingMode]} diff --git a/front/src/components/Icon.tsx b/front/src/components/Icon.tsx index 8937957..196e654 100644 --- a/front/src/components/Icon.tsx +++ b/front/src/components/Icon.tsx @@ -29,6 +29,7 @@ export const Icon = forwardRef( minWidth="100%" height="100%" color={color} + asChild > {IconEl} diff --git a/front/src/components/Layout/PageLayoutInfoCenter.tsx b/front/src/components/Layout/PageLayoutInfoCenter.tsx index 7c5983c..e0f518e 100644 --- a/front/src/components/Layout/PageLayoutInfoCenter.tsx +++ b/front/src/components/Layout/PageLayoutInfoCenter.tsx @@ -4,7 +4,7 @@ import { Flex, FlexProps } from '@chakra-ui/react'; import { useLocation } from 'react-router-dom'; import { PageLayout } from '@/components/Layout/PageLayout'; -import { colors } from '@/theme/foundations/colors'; +import { colors } from '@/theme/colors'; import { useColorModeValue } from '@/components/ui/color-mode'; export type LayoutProps = FlexProps & { diff --git a/front/src/components/TopBar/TopBar.tsx b/front/src/components/TopBar/TopBar.tsx index 91a392b..ee1f032 100644 --- a/front/src/components/TopBar/TopBar.tsx +++ b/front/src/components/TopBar/TopBar.tsx @@ -7,10 +7,14 @@ import { IconButton, Text, useDisclosure, + Button, + ConditionalValue, + Span, } from '@chakra-ui/react'; import { LuAlignJustify, LuArrowBigLeft, + LuKeySquare, LuLogIn, LuLogOut, LuMoon, @@ -21,8 +25,8 @@ import { useNavigate } from 'react-router-dom'; import { useServiceContext } from '@/service/ServiceContext'; import { SessionState } from '@/service/SessionState'; -import { colors } from '@/theme/foundations/colors'; -import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso'; +import { colors } from '@/theme/colors'; +import { requestOpenSite, requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso'; import { useSessionService } from '@/service/session'; import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md'; import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu'; @@ -33,17 +37,12 @@ import { DrawerHeader, DrawerRoot, } from '@/components/ui/drawer'; -import { Button } from '../ui/themed'; export const TOP_BAR_HEIGHT = '50px'; export const BUTTON_TOP_BAR_PROPERTY = { - bg: 'back.100', - color: 'brand.900', - borderRadius: 0, - border: 0, - _hover: { background: 'back.300' }, - _focus: { border: 'none' }, + variant: "ghost" as ConditionalValue<"ghost" | "outline" | "solid" | "subtle" | "surface" | "plain" | undefined>, + //colorPalette: "brand", fontSize: '20px', textTransform: 'uppercase', height: TOP_BAR_HEIGHT, @@ -77,6 +76,9 @@ export const TopBar = ({ title, children }: TopBarProps) => { clearToken(); requestSignOut(); }; + const onKarso = (): void => { + requestOpenSite(); + }; const onSelectAdd = () => { navigate('/add'); }; @@ -108,10 +110,12 @@ export const TopBar = ({ title, children }: TopBarProps) => { zIndex={200} > {title && ( { textTransform="uppercase" marginRight="auto" userSelect="none" + color="brand.500" > {title} @@ -128,7 +133,7 @@ export const TopBar = ({ title, children }: TopBarProps) => { {session?.state !== SessionState.CONNECTED && ( <> - -
+ -
+ ) : ( diff --git a/front/src/components/popup/TrackEditPopUp.tsx b/front/src/components/popup/TrackEditPopUp.tsx index 08454d1..79698c7 100644 --- a/front/src/components/popup/TrackEditPopUp.tsx +++ b/front/src/components/popup/TrackEditPopUp.tsx @@ -3,6 +3,7 @@ import { useRef, useState } from 'react'; import { Text, useDisclosure, + Button, } from '@chakra-ui/react'; import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog'; @@ -25,7 +26,6 @@ import { useOrderedGenders } from '@/service/Gender'; import { useServiceContext } from '@/service/ServiceContext'; import { useSpecificTrack, useTrackService } from '@/service/Track'; import { isNullOrUndefined } from '@/utils/validator'; -import { Button } from '../ui/themed'; export type TrackEditPopUpProps = {}; @@ -113,7 +113,7 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => { diff --git a/front/src/components/select/SelectMultiple.tsx b/front/src/components/select/SelectMultiple.tsx index f5ab038..afd2fc2 100644 --- a/front/src/components/select/SelectMultiple.tsx +++ b/front/src/components/select/SelectMultiple.tsx @@ -113,14 +113,13 @@ export const SelectMultiple = ({ {selectedOptions.map((data) => ( {data[keyValue] ?? `id=${data[keyKey]}`} - selectValue(data)} /> + selectValue(data)} /> ))} diff --git a/front/src/components/select/SelectSingle.tsx b/front/src/components/select/SelectSingle.tsx index 59e60cb..4cadecc 100644 --- a/front/src/components/select/SelectSingle.tsx +++ b/front/src/components/select/SelectSingle.tsx @@ -113,7 +113,7 @@ export const SelectSingle = ({ showList ? (currentSearch ?? '') : (selectedOptions?.name ?? (hasSuggestion ? `suggest: ${currentSearch}` : '')) } backgroundColor={ - showList || !selectedOptions ? undefined : 'green.500' + showList || !selectedOptions ? undefined : 'green.800' } borderRadius="5px 0 0 5px" /> diff --git a/front/src/components/track/DisplayTrack.tsx b/front/src/components/track/DisplayTrack.tsx index a51c0ec..6c3e9e8 100644 --- a/front/src/components/track/DisplayTrack.tsx +++ b/front/src/components/track/DisplayTrack.tsx @@ -23,9 +23,9 @@ export const DisplayTrack = ({ data={track?.covers} size="50" height="full" - /* TODO: iconEmpty={ - trackActive?.id === track.id ? LuPlay : LuMusic2 - } */ + iconEmpty={ + trackActive?.id === track.id ? : + } onClick={onClick} /> : + } onClick={onClick} /> (function NumberInput(props, ref) { + const { children, ...rest } = props + return ( + + {children} + + + + + + ) +}) + +export const NumberInputField = ChakraNumberInput.Input +export const NumberInputScrubber = ChakraNumberInput.Scrubber +export const NumberInputLabel = ChakraNumberInput.Label diff --git a/front/src/components/ui/themed.tsx b/front/src/components/ui/themed.tsx deleted file mode 100644 index f4c48ad..0000000 --- a/front/src/components/ui/themed.tsx +++ /dev/null @@ -1,7 +0,0 @@ - -import buttonRecipe from '@/theme/recipes/button'; -import { chakra } from '@chakra-ui/react'; - -// we export the element with the application recipe theme. -// cf doc: https://www.chakra-ui.com/docs/theming/recipes -export const Button = chakra("button", buttonRecipe) diff --git a/front/src/errors/Error401.tsx b/front/src/errors/Error401.tsx index cd79e8d..8131078 100644 --- a/front/src/errors/Error401.tsx +++ b/front/src/errors/Error401.tsx @@ -10,7 +10,7 @@ export const Error401 = () => {
- +
Erreur 401 diff --git a/front/src/errors/Error403.tsx b/front/src/errors/Error403.tsx index d0a3888..3a4f63c 100644 --- a/front/src/errors/Error403.tsx +++ b/front/src/errors/Error403.tsx @@ -10,10 +10,10 @@ export const Error403 = () => {
- +
- Erreur 401 + Erreur 403 Cette page vous est interdite Retour à l'accueil diff --git a/front/src/errors/Error404.tsx b/front/src/errors/Error404.tsx index 738af20..9cae68b 100644 --- a/front/src/errors/Error404.tsx +++ b/front/src/errors/Error404.tsx @@ -10,7 +10,7 @@ export const Error404 = () => {
- +
Erreur 404 diff --git a/front/src/errors/ErrorBoundary.tsx b/front/src/errors/ErrorBoundary.tsx index 23c63ba..ea583ce 100644 --- a/front/src/errors/ErrorBoundary.tsx +++ b/front/src/errors/ErrorBoundary.tsx @@ -2,51 +2,28 @@ import React, { FC } from 'react'; import { AlertDescription, - AlertRoot, AlertTitle, Box, - Collapsible, - useDisclosure, - Text, - HStack, + Alert, } from '@chakra-ui/react'; import { FallbackProps, ErrorBoundary as ReactErrorBoundary, } from 'react-error-boundary'; -import { Button } from '@/components/ui/themed'; -import { LuChevronUp, LuChevronDown } from 'react-icons/lu'; const ErrorFallback = ({ error }: FallbackProps) => { - const { open, onToggle } = useDisclosure(); return ( - - - {/* */} + + + - An unexpected error has occurred. - - - - - - {error.message} - - - + An unexpected error has occurred. + +
+ {error.message} - + ); }; diff --git a/front/src/scene/album/AlbumDetailPage.tsx b/front/src/scene/album/AlbumDetailPage.tsx index 585296c..6e8a0fd 100644 --- a/front/src/scene/album/AlbumDetailPage.tsx +++ b/front/src/scene/album/AlbumDetailPage.tsx @@ -1,6 +1,6 @@ import { Box, Button, Flex, Text } from '@chakra-ui/react'; import { LuDisc3 } from 'react-icons/lu'; -import { MdEdit } from 'react-icons/md'; +import { Md1kPlus, MdAdd, MdEdit, MdPlusOne } from 'react-icons/md'; import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import { Covers } from '@/components/Cover'; @@ -10,7 +10,6 @@ import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp'; import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp'; -import { DisplayTrack } from '@/components/track/DisplayTrack'; import { DisplayTrackFull } from '@/components/track/DisplayTrackFull'; import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useSpecificAlbum } from '@/service/Album'; @@ -76,7 +75,7 @@ export const AlbumDetailPage = () => { > } slideshow /> @@ -121,11 +120,16 @@ export const AlbumDetailPage = () => { contextMenu={[ { name: 'Edit', + icon: , onClick: () => { navigate(`/album/${albumId}/edit-track/${data.id}`); }, }, - { name: 'Add Playlist', onClick: () => { } }, + { + icon: , + name: 'Add Playlist', + onClick: () => { } + }, ]} data-testid="Album-detail-page_display-detail" /> diff --git a/front/src/scene/artist/ArtistAlbumDetailPage.tsx b/front/src/scene/artist/ArtistAlbumDetailPage.tsx index 9e7a8b9..394954d 100644 --- a/front/src/scene/artist/ArtistAlbumDetailPage.tsx +++ b/front/src/scene/artist/ArtistAlbumDetailPage.tsx @@ -1,6 +1,6 @@ import { Box, Button, Flex, Text } from '@chakra-ui/react'; import { LuDisc3, LuUser } from 'react-icons/lu'; -import { MdEdit, MdPerson } from 'react-icons/md'; +import { MdAdd, MdEdit, MdPerson } from 'react-icons/md'; import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import { Covers } from '@/components/Cover'; @@ -67,7 +67,7 @@ export const ArtistAlbumDetailPage = () => { data={dataArtist?.covers} size="35px" borderRadius="full" - // TODO: iconEmpty={MdPerson} + iconEmpty={} /> {dataArtist?.name} @@ -94,7 +94,7 @@ export const ArtistAlbumDetailPage = () => { > } slideshow /> @@ -137,13 +137,18 @@ export const ArtistAlbumDetailPage = () => { contextMenu={[ { name: 'Edit', + icon: , onClick: () => { navigate( `/artist/${artistIdInt}/album/${albumId}/edit-track/${data.id}` ); }, }, - { name: 'Add Playlist', onClick: () => { } }, + { + icon: , + name: 'Add Playlist', + onClick: () => { } + }, ]} /> diff --git a/front/src/scene/artist/ArtistDetailPage.tsx b/front/src/scene/artist/ArtistDetailPage.tsx index c6af6f9..8364c7b 100644 --- a/front/src/scene/artist/ArtistDetailPage.tsx +++ b/front/src/scene/artist/ArtistDetailPage.tsx @@ -70,7 +70,7 @@ export const ArtistDetailPage = () => { > } slideshow /> diff --git a/front/src/scene/artist/ArtistsPage.tsx b/front/src/scene/artist/ArtistsPage.tsx index 4826683..72f55c5 100644 --- a/front/src/scene/artist/ArtistsPage.tsx +++ b/front/src/scene/artist/ArtistsPage.tsx @@ -59,7 +59,7 @@ export const ArtistsPage = () => { @@ -86,7 +86,7 @@ export const ArtistsPage = () => { data={data.covers} size={BASE_WRAP_ICON_SIZE} height="full" - // iconEmpty={LuUser} + iconEmpty={} /> { overflowX="hidden" > { ))} - + ); }; diff --git a/front/src/scene/gender/GenderDetailPage.tsx b/front/src/scene/gender/GenderDetailPage.tsx index fc727b1..6093b33 100644 --- a/front/src/scene/gender/GenderDetailPage.tsx +++ b/front/src/scene/gender/GenderDetailPage.tsx @@ -75,7 +75,7 @@ export const GenderDetailPage = () => { > } slideshow /> @@ -131,7 +131,7 @@ export const GenderDetailPage = () => { } /> } /> - + ); }; diff --git a/front/src/scene/home/AddPage.tsx b/front/src/scene/home/AddPage.tsx index 2f81f54..9777a6e 100644 --- a/front/src/scene/home/AddPage.tsx +++ b/front/src/scene/home/AddPage.tsx @@ -5,6 +5,7 @@ import { Input, Table, Text, + Button, } from '@chakra-ui/react'; import { LuTrash } from 'react-icons/lu'; import { MdCloudUpload } from 'react-icons/md'; @@ -31,7 +32,6 @@ import { useGenderService, useOrderedGenders } from '@/service/Gender'; import { useServiceContext } from '@/service/ServiceContext'; import { useTrackService } from '@/service/Track'; import { isNullOrUndefined } from '@/utils/validator'; -import { Button } from '@/components/ui/themed'; export class ElementList { constructor( @@ -540,7 +540,7 @@ export const AddPage = () => { { width="80%" > {!playTrackList && <>No playing} - {playTrackList && playTrackList?.map((data) => ( + {playTrackList && playTrackList?.map((data, index) => ( { contextMenu={[ { name: 'Edit', + icon: , onClick: () => { navigate(`edit-track/${data}`); }, }, { - name: 'Remove from playlist', + name: 'Remove previous', + icon: , + onClick: () => { + removePreviousTrack(index); + }, + }, + { + name: 'Remove', + icon: , onClick: () => { removeTrack(data); }, }, + { + name: 'Remove After', + icon: , + onClick: () => { + removeNextTrack(index); + }, + }, ]} /> diff --git a/front/src/service/ActivePlaylist.ts b/front/src/service/ActivePlaylist.ts index ad727b9..7bd885d 100644 --- a/front/src/service/ActivePlaylist.ts +++ b/front/src/service/ActivePlaylist.ts @@ -14,7 +14,7 @@ export type ActivePlaylistServiceProps = { trackActive?: Track; setNewPlaylist: (listIds: number[]) => void; setNewPlaylistShuffle: (listIds: number[]) => void; - playInList: (id: number, listIds: number[]) => void; + playInList: (id: number | undefined, listIds: number[]) => void; play: (id: number) => void; previous: () => void; next: () => void; @@ -65,7 +65,7 @@ export const useActivePlaylistServiceWrapped = ( [setPlayTrackList, setTrackOffset] ); const playInList = useCallback( - (id: number, listIds: number[]) => { + (id: number | undefined, listIds: number[]) => { console.log(`Request paly in list: ${id} in ${listIds}`); setPlayTrackList(listIds); setTrackOffset(id); diff --git a/front/src/theme/foundations/colors.ts b/front/src/theme/colors.ts similarity index 99% rename from front/src/theme/foundations/colors.ts rename to front/src/theme/colors.ts index 284f80a..e3900e2 100644 --- a/front/src/theme/foundations/colors.ts +++ b/front/src/theme/colors.ts @@ -111,4 +111,5 @@ export const colors = { success: green, error: red, warning: orange, + danger: red, } as const; diff --git a/front/src/theme/foundations/index.ts b/front/src/theme/foundations/index.ts deleted file mode 100644 index 5b58ee7..0000000 --- a/front/src/theme/foundations/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { colors } from './colors'; -import { shadows } from './shadows'; - -const foundations = { - colors, - shadows, -}; - -export default foundations; diff --git a/front/src/theme/foundations/shadows.ts b/front/src/theme/foundations/shadows.ts deleted file mode 100644 index 507be20..0000000 --- a/front/src/theme/foundations/shadows.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { SystemConfig } from '@chakra-ui/react'; -import { colors } from './colors'; - -const createOutline = (colorScheme = 'gray') => { - return { value: `0 0 0 3px ${colorScheme}.500/3` }; -} - -export const shadows = { - outline: createOutline('brand'), - // 'outline-brand': '0 0 0 1px brand.900', - // 'outline-gray': createOutline('gray'), - // 'outline-over': `4px 4px 5px #00000088`, - // 'outline-darkgray': `0 0 0 3px gray.500/8`, - // 'outline-success': createOutline('success'), - // 'outline-warning': createOutline('warning'), - // 'outline-error': createOutline('error'), - // 'outline-doing': createOutline('doing'), - // 'outline-paused': createOutline('paused'), - //layout: '0 0 24px 1px rgba(0, 0, 0, 0.05)', - //smooth: 'inset 0px 0px 16px rgba(0, 0, 0, 0.05)', - // smooth-light is used for dark backgrounds - //'smooth-light': 'inset 0px 0px 16px rgba(255, 255, 255, 0.1)', -}; diff --git a/front/src/theme/recipes/badge.ts b/front/src/theme/recipes/badge.ts deleted file mode 100644 index 67bdfec..0000000 --- a/front/src/theme/recipes/badge.ts +++ /dev/null @@ -1,24 +0,0 @@ -export default { - sizes: { - '2xs': { - fontSize: '0.5em', - }, - xs: { - fontSize: '0.6em', - }, - sm: { - fontSize: '0.7em', - }, - md: { - fontSize: '0.8em', - textTransform: 'none', - }, - lg: { - fontSize: '0.9em', - textTransform: 'none', - }, - }, - defaultProps: { - size: 'md', - }, -}; diff --git a/front/src/theme/recipes/button.ts b/front/src/theme/recipes/button.ts deleted file mode 100644 index 3a9d045..0000000 --- a/front/src/theme/recipes/button.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { defineRecipe, defineStyle, RecipeVariantRecord, SystemStyleObject } from '@chakra-ui/react'; - -// https://medium.com/@a.heydari.dev/simplifying-chakra-ui-v3-recipes-vs-chakra-factory-a-developers-perspective-4020b62f1b4d - -// const shimmer = keyframes` -// 100% { -// transform: translateX(100%); -// } -// `; - -export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxShadowHover }) => { - return defineStyle({ - bg, - color, - border: '1px solid transparent', - _focus: { - border: '1px solid', - borderColor: 'black', - }, - _hover: { - bg: bgHover, - color: colorHover, - boxShadow: boxShadowHover, - _disabled: { - bg, - boxShadow: 'none', - }, - }, - _active: { - bg: bgActive, - }, - }); -}; - -const buttonRecipe = defineRecipe({ - base: { - borderRadius: 0, - background: "green", - }, - variants: { - variant: { - "@primary": - customVariant({ - bg: { _light: 'brand.600', _dark: 'brand.300' }, - bgHover: { _light: 'brand.700', _dark: 'brand.400' }, - bgActive: { _light: 'brand.600', _dark: 'brand.300' }, - color: { _light: 'white', _dark: 'brand.900' }, - colorHover: { _light: 'brand.800', _dark: 'brand.100' }, - boxShadowHover: 'outline-over' - }), - "@secondary": - customVariant({ - bg: { _light: 'brand.100', _dark: 'brand.900' }, - bgHover: { _light: 'brand.200', _dark: 'brand.800' }, - bgActive: { _light: 'brand.300', _dark: 'brand.700' }, - color: { _light: 'brand.700', _dark: 'brand.50' }, - colorHover: { _light: 'brand.800', _dark: 'brand.100' }, - boxShadowHover: 'outline-over', - }), - "@danger": - customVariant({ - bg: { _light: 'error.600', _dark: 'error.600' }, - bgHover: { _light: 'error.700', _dark: 'error.500' }, - bgActive: { _light: 'error.600', _dark: 'error.500' }, - color: { _light: 'white', _dark: 'error.900' }, - colorHover: { _light: 'error.700', _dark: 'error.900' }, - boxShadowHover: 'outline-over', - }), - "@success": - customVariant({ - bg: { _light: 'green.300', _dark: 'green.300' }, - bgHover: { _light: 'green.400', _dark: 'green.400' }, - bgActive: { _light: 'green.500', _dark: 'green.400' }, - color: { _light: 'white', _dark: 'green.900' }, - colorHover: { _light: 'green.500', _dark: 'green.900' }, - boxShadowHover: 'outline-over', - }), - - "@progress": - defineStyle({ - bg: { _light: `brand.500`, _dark: `brand.300` }, - overflow: 'hidden', - /* - _after: !props.isLoading - ? { - content: '""', - position: 'absolute', - top: 0, - right: 0, - bottom: 0, - left: 0, - transform: 'translateX(-100%)', - bgGradient: `linear(90deg, brand.100/0 0%, brand.100/2 20%, brand.100/5 60%, v.100/0`, - } - : undefined, - */ - }), - - "@menu": defineStyle({ - bg: 'back.100', - color: 'brand.900', - borderRadius: 0, - border: 0, - _hover: { background: 'back.300' }, - _focus: { border: 'none' }, - fontSize: '20px', - textTransform: 'uppercase', - }), - }, - }, -}); - - -console.log(`buttonRecipe: ${JSON.stringify(buttonRecipe, null, 2)}`); - - -export default buttonRecipe; diff --git a/front/src/theme/recipes/checkbox.ts b/front/src/theme/recipes/checkbox.ts deleted file mode 100644 index 5d26314..0000000 --- a/front/src/theme/recipes/checkbox.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { - defaultProps: { - colorScheme: 'brand', - }, -}; diff --git a/front/src/theme/recipes/drawer.ts b/front/src/theme/recipes/drawer.ts deleted file mode 100644 index bd115f3..0000000 --- a/front/src/theme/recipes/drawer.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { defineRecipe } from '@chakra-ui/react'; - -const drawerRecipe = defineRecipe({ - base: { - bg: { _light: 'white', _dark: 'gray.800' }, - color: { _light: 'gray.900', _dark: 'whiteAlpha.900' }, - boxShadow: { _light: 'lg', _dark: 'dark-lg' }, - padding: 4, - borderRadius: 'md', - }, - variants: { - variant: { - solid: { - bg: { _light: 'blue.500', _dark: 'blue.300' }, - color: 'white', - }, - outline: { - border: '1px solid', - borderColor: { _light: 'gray.300', _dark: 'whiteAlpha.300' }, - bg: { _light: 'white', _dark: 'gray.900' }, - }, - } - }, - defaultVariants: { - variant: 'solid', - }, -}); - -export default drawerRecipe; diff --git a/front/src/theme/recipes/flex.ts b/front/src/theme/recipes/flex.ts deleted file mode 100644 index b5a05c3..0000000 --- a/front/src/theme/recipes/flex.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { defineRecipe } from '@chakra-ui/react'; - - -const flexTheme = defineRecipe({ - variants: { - variant: { - '@menu': { - bg: { _light: 'back.100', _dark: 'back.800' }, - color: { _light: 'brand.900', _dark: 'brand.100' }, - borderRadius: 0, - border: 0, - _hover: { background: { _light: 'back.300', _dark: 'back.600' } }, - _focus: { border: 'none' }, - fontSize: '20px', - }, - }, - }, -}); - -export default flexTheme; \ No newline at end of file diff --git a/front/src/theme/recipes/index.ts b/front/src/theme/recipes/index.ts deleted file mode 100644 index f921490..0000000 --- a/front/src/theme/recipes/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -export { default as Badge } from './badge'; -export { default as button } from './button'; -export { default as Checkbox } from './checkbox'; -export { default as Input } from './input'; -//export { default as NumberInput } from './numberInput.ts_'; -export { default as Popover } from './popover'; -export { default as Radio } from './radio'; -export { default as Select } from './select'; -export { default as Switch } from './switch'; -export { default as Textarea } from './textarea'; -//export { default as Modal } from './modal'; -export { default as Flex } from './flex'; -export { default as Drawer } from './drawer'; diff --git a/front/src/theme/recipes/input.ts b/front/src/theme/recipes/input.ts deleted file mode 100644 index 1362bb9..0000000 --- a/front/src/theme/recipes/input.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { defineRecipe } from '@chakra-ui/react'; - -const inputTheme = defineRecipe({ - variants: { - variant: { - outline: { - field: { - bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' }, - borderColor: { _light: 'gray.200', _dark: 'whiteAlpha.100' }, - color: { _light: 'gray.800', _dark: 'gray.50' }, - _focus: { - borderColor: { _light: 'gray.800', _dark: 'gray.50' }, - boxShadow: `0 0 0 1px gray.800`, - }, - }, - }, - }, - }, -}); - -export default inputTheme; diff --git a/front/src/theme/recipes/modal.ts__ b/front/src/theme/recipes/modal.ts__ deleted file mode 100644 index 96750c3..0000000 --- a/front/src/theme/recipes/modal.ts__ +++ /dev/null @@ -1,17 +0,0 @@ -import { modalAnatomy as parts } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(parts.keys); - -const baseStyle = definePartsStyle({ - header: { - textAlign: 'center', - }, -}); - -const modalTheme = defineMultiStyleConfig({ - baseStyle, -}); - -export default modalTheme; diff --git a/front/src/theme/recipes/numberInput.ts_ b/front/src/theme/recipes/numberInput.ts_ deleted file mode 100644 index 9f236ff..0000000 --- a/front/src/theme/recipes/numberInput.ts_ +++ /dev/null @@ -1,27 +0,0 @@ -import { numberInputAnatomy } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; -import { getColor, mode } from '@chakra-ui/theme-tools'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(numberInputAnatomy.keys); - -const baseStyle = definePartsStyle((props) => { - - return { - field: { - border: 0, - _focusVisible: { - borderColor: {_light:'brand.500', _dark:'brand.300'}, - boxShadow: `0 0 0 1px 'brand.500'`, - ring: '1px', - ringColor: {_light:'brand.500', _dark:'brand.300'}, - ringOffset: '1px', - ringOffsetColor: {_light:'brand.500', _dark:'brand.300'}, - }, - }, - }; -}); - -export default defineMultiStyleConfig({ - baseStyle, -}); diff --git a/front/src/theme/recipes/popover.ts b/front/src/theme/recipes/popover.ts deleted file mode 100644 index 664ec47..0000000 --- a/front/src/theme/recipes/popover.ts +++ /dev/null @@ -1,77 +0,0 @@ -export default { - sizes: { - '3xs': { - content: { - width: '3xs', - }, - }, - '2xs': { - content: { - width: '2xs', - }, - }, - xs: { - content: { - width: 'xs', - }, - }, - sm: { - content: { - width: 'sm', - }, - }, - md: { - content: { - width: 'md', - }, - }, - lg: { - content: { - width: 'lg', - }, - }, - xl: { - content: { - width: 'xl', - }, - }, - '2xl': { - content: { - width: '2xl', - }, - }, - '3xl': { - content: { - width: '3xl', - }, - }, - '4xl': { - content: { - width: '4xl', - }, - }, - '5xl': { - content: { - width: '5xl', - }, - }, - '6xl': { - content: { - width: '6xl', - }, - }, - '7xl': { - content: { - width: '7xl', - }, - }, - '8xl': { - content: { - width: '8xl', - }, - }, - }, - defaultProps: { - size: 'xs', - }, -}; diff --git a/front/src/theme/recipes/radio.ts b/front/src/theme/recipes/radio.ts deleted file mode 100644 index 5d26314..0000000 --- a/front/src/theme/recipes/radio.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { - defaultProps: { - colorScheme: 'brand', - }, -}; diff --git a/front/src/theme/recipes/select.ts b/front/src/theme/recipes/select.ts deleted file mode 100644 index a738755..0000000 --- a/front/src/theme/recipes/select.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { defineRecipe } from '@chakra-ui/react'; - -const selectTheme = defineRecipe({ - variants: { - variant: { - outline: { - field: { - bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' }, - borderColor: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' }, - _focus: { - borderColor: { _light: 'brand.500', _dark: 'brand.300' }, - boxShadow: `0 0 0 1px black`, - }, - }, - }, - }, - }, -}); - -export default selectTheme; diff --git a/front/src/theme/recipes/switch.ts b/front/src/theme/recipes/switch.ts deleted file mode 100644 index 5d26314..0000000 --- a/front/src/theme/recipes/switch.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { - defaultProps: { - colorScheme: 'brand', - }, -}; diff --git a/front/src/theme/recipes/textarea.ts b/front/src/theme/recipes/textarea.ts deleted file mode 100644 index 5291c08..0000000 --- a/front/src/theme/recipes/textarea.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { defineRecipe } from '@chakra-ui/react'; - - -const textAreaTheme = defineRecipe({ - variants: { - variant: { - outline: { - bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' }, - borderColor: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' }, - _focus: { - borderColor: { _light: 'brand.500', _dark: 'brand.300' }, - boxShadow: `0 0 0 1px brand.500`, - }, - }, - } - }, -}); -export default textAreaTheme; \ No newline at end of file diff --git a/front/src/theme/styleguide/buttons.stories.tsx b/front/src/theme/styleguide/buttons.stories.tsx deleted file mode 100644 index 2d79e8b..0000000 --- a/front/src/theme/styleguide/buttons.stories.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Group, VStack } from '@chakra-ui/react'; -import { HiMinus, HiPlus } from 'react-icons/hi'; - -const meta = { - title: 'StyleGuide/Buttons', -}; - -export default meta; - -export const Default = { - render: () => ( - - - - - ), -}; - -export const Primary = { - render: () => ( - - - - - ), -}; - -export const Secondary = { - render: () => ( - - - - - ), -}; - -export const Danger = { - render: () => ( - - - - - ), -}; - -export const Progress = { - render: () => ( - - - - - - - - - ), -}; diff --git a/front/src/theme/styleguide/colors.stories.tsx b/front/src/theme/styleguide/colors.stories.tsx deleted file mode 100644 index 1c8b94f..0000000 --- a/front/src/theme/styleguide/colors.stories.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { Box, Flex, FlexProps, HStack } from '@chakra-ui/react'; - -const Color = ({ children, ...rest }: FlexProps) => ( - - - {children} - - -); - -const Colors = ({ colorScheme = 'gray', ...rest }) => ( - - 50 - 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 - -); - -const meta = { - title: 'StyleGuide/Colors', -}; - -export default meta; - -export const Brand = { - render: () => , -}; - -export const Gray = { - render: () => , -}; - -export const Error = { - render: () => , -}; - -export const Warning = { - render: () => , -}; - -export const Success = { - render: () => , -}; diff --git a/front/src/theme/theme.ts b/front/src/theme/theme.ts index 8b1b9cf..b51afd8 100644 --- a/front/src/theme/theme.ts +++ b/front/src/theme/theme.ts @@ -1,8 +1,5 @@ -import * as recipes from './recipes'; import { createSystem, defaultConfig, mergeConfigs, SystemConfig } from "@chakra-ui/react" -import { colors } from "./foundations/colors" -import { shadows } from './foundations/shadows'; -import buttonRecipe from './recipes/button'; +import { colors } from "./colors" const baseTheme: SystemConfig = { globalCss: { @@ -19,99 +16,28 @@ const baseTheme: SystemConfig = { } }, theme: { - //recipes: {...recipes}, - recipes: { - button: buttonRecipe, - buttonqsdqsd: { + slotRecipes: { + dialog: { + slots: [ + "header" + ], base: { - "display": "inline-flex", - "appearance": "none", - "alignItems": "center", - "justifyContent": "center", - "userSelect": "none", - "position": "relative", - "borderRadius": "l2", - "whiteSpace": "nowrap", - "verticalAlign": "middle", - "borderWidth": "1px", - "borderColor": "transparent", - "cursor": "button", - "flexShrink": "0", - "outline": "0", - "lineHeight": "1.2", - "isolation": "isolate", - "fontWeight": "medium", - "transitionProperty": "common", - "transitionDuration": "moderate", - "focusVisibleRing": "outside", - "_disabled": { - "layerStyle": "disabled" + header: { + fontWeight: "bold", + fontSize: "2xl", + color: { _dark: "brand.400", _light: "brand.500" } }, - "_icon": { - "flexShrink": "0" + }, + }, + }, + recipes: { + button: { + base: { + borderRadius: 0, + _hover: { + //boxShadow: "3px 5px 8px gray" } }, - "variants": { - "variant": { - "solid": { - //"bg": "colorPalette.solid", - "bg": "brand.500", - "color": "colorPalette.contrast", - "_hover": { - "bg": "colorPalette.solid/90" - }, - "_expanded": { - "bg": "colorPalette.solid/90" - } - }, - "QSDQDS": { - - }, - "@primary": { - bg: { - _light: "brand.600", - _dark: "brand.300" - }, - color: { - _light: "white", - _dark: "brand.900" - }, - border: "1px solid transparent", - _focus: { - border: "1px solid", - borderColor: "black" - }, - "_hover": { - "bg": { - "_light": "brand.700", - "_dark": "brand.400" - }, - "color": { - "_light": "brand.800", - "_dark": "brand.100" - }, - "boxShadow": "outline-over", - "_disabled": { - "bg": { - "_light": "brand.600", - "_dark": "brand.300" - }, - "boxShadow": "none" - } - }, - "_active": { - "bg": { - "_light": "brand.600", - "_dark": "brand.300" - } - } - }, - } - }, - "defaultVariants": { - //"size": "md", - //"variant": "solid" - } }, }, tokens: { @@ -120,26 +46,31 @@ const baseTheme: SystemConfig = { body: { value: `Roboto, Helvetica, Arial, "sans-serif"` }, }, colors, - // spacing: { - // vGutter: { value: '6.25rem' }, - // }, - shadows }, - // semanticTokens: { - // colors: { - // brand: { - // solid: { value: "{colors.brand.500}" }, - // contrast: { value: "{colors.brand.100}" }, - // fg: { value: "{colors.brand.700}" }, - // muted: { value: "{colors.brand.100}" }, - // subtle: { value: "{colors.brand.200}" }, - // emphasized: { value: "{colors.brand.300}" }, - // focusRing: { value: "{colors.brand.500}" }, - // }, - // }, - // }, + semanticTokens: { + colors: { + "@danger": { + solid: { value: "{colors.danger.500}" }, + contrast: { value: "{colors.danger.100}" }, + fg: { value: "{colors.danger.900}" }, + muted: { value: "{colors.danger.100}" }, + subtle: { value: "{colors.danger.200}" }, + emphasized: { value: "{colors.danger.300}" }, + focusRing: { value: "{colors.danger.500}" }, + }, + "brand": { + solid: { value: "{colors.brand.500}" }, + contrast: { value: "{colors.brand.100}" }, + fg: { value: "{colors.brand.900}" }, + muted: { value: "{colors.brand.100}" }, + subtle: { value: "{colors.brand.200}" }, + emphasized: { value: "{colors.brand.300}" }, + focusRing: { value: "{colors.brand.500}" }, + }, + }, + }, }, }; const config = mergeConfigs(defaultConfig, baseTheme); //console.log("defaultConfig: " + JSON.stringify(defaultConfig, null, 2)); -export const systemTheme = createSystem(config); \ No newline at end of file +export const systemTheme = createSystem(config); diff --git a/front/src/types/theme.d.ts b/front/src/types/theme.d.ts index 651e6ca..49ce2da 100644 --- a/front/src/types/theme.d.ts +++ b/front/src/types/theme.d.ts @@ -1,5 +1,5 @@ import { ThemeTypings } from '@chakra-ui/react'; -import { colors } from '@/theme/foundations/colors'; +import { colors } from '@/theme/colors'; export type ColorSchemes = ThemeTypings['colorSchemes'] | keyof typeof colors;