kangaroo-and-rabbit/karusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Compare commits

merge into: kangaroo-and-rabbit:main
Branches Tags
kangaroo-and-rabbit:main
kangaroo-and-rabbit:develop
kangaroo-and-rabbit:feat_raw_react
kangaroo-and-rabbit:v1.2.0
kangaroo-and-rabbit:v1.0.4
kangaroo-and-rabbit:v1.0.2
kangaroo-and-rabbit:v0.2.0
kangaroo-and-rabbit:v0.1.0
...
pull from: kangaroo-and-rabbit:feat_raw_react
Branches Tags
kangaroo-and-rabbit:main
kangaroo-and-rabbit:develop
kangaroo-and-rabbit:feat_raw_react
kangaroo-and-rabbit:v1.2.0
kangaroo-and-rabbit:v1.0.4
kangaroo-and-rabbit:v1.0.2
kangaroo-and-rabbit:v0.2.0
kangaroo-and-rabbit:v0.1.0

3 Commits
main ... feat_raw_r

Author SHA1 Message Date
Edouard DUPIN
979ec4b576 [FEAT] local theme integration 2025-01-23 18:09:57 +01:00
Edouard DUPIN
12223347d3 [FEAT] add many basic element, ux bad but build is OK 2025-01-22 00:30:16 +01:00
Edouard DUPIN
f9019ec508 [DEV] restart from scratch with no toolbox ==> maybe slower but funny 2025-01-21 00:54:27 +01:00
112 changed files with 2456 additions and 4413 deletions
Show Stats Expand all files Collapse all files

11
front/package.json
View File

@ -29,16 +29,7 @@
"*.{ts,tsx,js,jsx,json}": "prettier --write" "*.{ts,tsx,js,jsx,json}": "prettier --write"
}, },
"dependencies": { "dependencies": {
"@chakra-ui/anatomy": "2.3.4",
"@chakra-ui/cli": "3.3.1",
"@chakra-ui/react": "3.3.1",
"@emotion/react": "11.14.0",
"@emotion/styled": "11.14.0",
"allotment": "1.20.2",
"css-mediaquery": "0.1.2",
"dayjs": "1.11.13",
"history": "5.3.0", "history": "5.3.0",
"next-themes": "^0.4.4",
"react": "18.3.1", "react": "18.3.1",
"react-dom": "18.3.1", "react-dom": "18.3.1",
"react-error-boundary": "5.0.0", "react-error-boundary": "5.0.0",
@ -50,7 +41,6 @@
"zustand": "5.0.3" "zustand": "5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@chakra-ui/styled-system": "^2.12.0",
"@playwright/test": "1.49.1", "@playwright/test": "1.49.1",
"@storybook/addon-actions": "8.4.7", "@storybook/addon-actions": "8.4.7",
"@storybook/addon-essentials": "8.4.7", "@storybook/addon-essentials": "8.4.7",
@ -82,7 +72,6 @@
"lint-staged": "15.3.0", "lint-staged": "15.3.0",
"npm-check-updates": "^17.1.13", "npm-check-updates": "^17.1.13",
"prettier": "3.4.2", "prettier": "3.4.2",
"puppeteer": "24.0.0",
"react-is": "19.0.0", "react-is": "19.0.0",
"storybook": "8.4.7", "storybook": "8.4.7",
"ts-node": "10.9.2", "ts-node": "10.9.2",

2104
front/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

155
front/src/App.tsx
View File

@ -1,31 +1,10 @@
import { useState } from 'react';
import {
Box,
Button,
ChakraProvider,
DialogBody,
DialogContent,
DialogFooter,
DialogHeader,
DialogRoot,
DialogTrigger,
SelectContent,
SelectItem,
SelectRoot,
SelectTrigger,
SelectValueText,
Stack,
Text,
useDisclosure,
} from '@chakra-ui/react';
import { environment } from '@/environment';
import { App as SpaApp } from '@/scene/App'; import { App as SpaApp } from '@/scene/App';
import { USERS, USERS_COLLECTION } from '@/service/session'; import { Div, FullPage } from './ui';
import { hashLocalData } from '@/utils/sso'; import { useDisclosure } from './utils/disclosure';
import { Toaster } from './components/ui/toaster'; import { useState } from 'react';
import { systemTheme } from './theme/theme'; import { environment } from './environment';
import { hashLocalData } from './utils/sso';
import { USERS } from './service/session';
const AppEnvHint = () => { const AppEnvHint = () => {
const dialog = useDisclosure(); const dialog = useDisclosure();
@ -55,66 +34,70 @@ const AppEnvHint = () => {
return ( return (
<> <>
<Box <Div style={{
zIndex="100000" zIndex: "100000",
position="fixed" position: "fixed",
top="0" top: "0",
insetStart="0" height: "2px",
insetEnd="0" width: "100%",
h="2px" background: "warning.400",
bg="warning.400" cursor: "pointer"
as="button" }}
cursor="pointer"
data-test-id="devtools" data-test-id="devtools"
onClick={dialog.onOpen} onClick={dialog.onOpen}
> >
<Text <Div style={{
position="fixed" position: "fixed",
top="0" top: "0",
insetStart="4" background: "warning.400",
bg="warning.400" color: "warning.900",
color="warning.900" fontSize: "0.6rem",
fontSize="0.6rem" fontWeight: "bold",
fontWeight="bold" paddingLeft: "10px",
px="10px" paddingRight: "10px",
marginLeft="25%" marginLeft: "25%",
borderBottomStartRadius="sm" borderRadius: "0 0 10px 10px",
borderBottomEndRadius="sm" textTransform: "uppercase",
textTransform="uppercase" }}
> >
{envName.join(' : ')} {envName.join(' : ')}
</Text> </Div>
</Box> </Div>
<DialogRoot open={dialog.open} onOpenChange={dialog.onClose}> {/* <Dialog.Root open={dialog.open} onOpenChange={dialog.onClose}>
<DialogContent> <Dialog.Trigger asChild>
<DialogHeader>Outils développeurs</DialogHeader> <Button>
<DialogTrigger asChild> {dialog.open ? "Close" : "Open"} Dialog
<Button variant="outline" size="sm"> </Button>
{dialog.open ? "Close" : "Open"} Dialog </Dialog.Trigger>
</Button> <Portal>
</DialogTrigger> <Dialog.Backdrop />
<DialogBody> <Dialog.Positioner>
<Stack> <Dialog.Content>
<Text>User</Text> <Dialog.Title>Outils développeurs</Dialog.Title>
<SelectRoot onChange={handleChange} collection={USERS_COLLECTION}> <Dialog.Description>
<SelectTrigger> <HStack>
<SelectValueText placeholder="Select test user" /> <Text>User</Text>
</SelectTrigger> <Select.Root onChange={handleChange} collection={USERS_COLLECTION}>
<SelectContent> <Select.Trigger>
{USERS_COLLECTION.items.map((value) => ( <SelectValueText placeholder="Select test user" />
<SelectItem item={value} key={value.value}> </Select.Trigger>
{value.label} <Select.Content>
</SelectItem> {USERS_COLLECTION.items.map((value) => (
))} <Select.Item item={value} key={value.value}>
</SelectContent> {value.label}
</SelectRoot> </Select.Item>
</Stack> ))}
</DialogBody> </Select.Content>
<DialogFooter> </Select.Root>
<Button onClick={onClose}>Apply</Button> </HStack>
</DialogFooter> </Dialog.Description>
</DialogContent> <Dialog.CloseTrigger>
</DialogRoot> <Button onClick={onClose}>Apply</Button>
</Dialog.CloseTrigger>
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root> */}
</> </>
); );
}; };
@ -122,11 +105,11 @@ const AppEnvHint = () => {
const App = () => { const App = () => {
return ( return (
<ChakraProvider value={systemTheme}> <FullPage data-test-id="Full-root-page">
<AppEnvHint /> <AppEnvHint />
<SpaApp /> <SpaApp data-test-id="app" />
<Toaster /> {/* <Toaster /> */}
</ChakraProvider> </FullPage>
); );
}; };

99
front/src/components/AudioPlayer.tsx
View File

@ -1,16 +1,6 @@
import { SyntheticEvent, useEffect, useRef, useState } from 'react'; import { SyntheticEvent, useEffect, useRef, useState } from 'react';
import {
Box,
Button,
Flex,
IconButton,
Slider,
SliderRoot,
SliderThumb,
SliderTrack,
Text,
} from '@chakra-ui/react';
import { import {
MdFastForward, MdFastForward,
MdFastRewind, MdFastRewind,
@ -32,9 +22,10 @@ import { useSpecificArtists } from '@/service/Artist';
import { useSpecificGender } from '@/service/Gender'; import { useSpecificGender } from '@/service/Gender';
import { useSpecificTrack } from '@/service/Track'; import { useSpecificTrack } from '@/service/Track';
import { DataUrlAccess } from '@/utils/data-url-access'; import { DataUrlAccess } from '@/utils/data-url-access';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Icon } from './Icon'; import { Icon } from './Icon';
import { Flex, Text } from '@/ui';
export enum PlayMode { export enum PlayMode {
PLAY_ONE, PLAY_ONE,
@ -86,10 +77,10 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
: '' : ''
); );
}, [dataTrack, setMediaSource]); }, [dataTrack, setMediaSource]);
const backColor = useColorModeValue('back.100', 'back.800'); const backColor = useColorThemeValue('back.100', 'back.800');
const configButton = { const configButton = {
borderRadius: 'full', borderRadius: 'full',
backgroundColor: '#00000000', background: '#00000000',
_hover: { _hover: {
boxShadow: 'outline-over', boxShadow: 'outline-over',
bgColor: 'brand.500', bgColor: 'brand.500',
@ -213,47 +204,53 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
<> <>
{!isNullOrUndefined(trackOffset) && ( {!isNullOrUndefined(trackOffset) && (
<Flex <Flex
position="absolute" style={{
height="150px" position: "absolute",
minHeight="150px" height: "150px",
paddingY="5px" minHeight: "150px",
paddingX="10px" padding: "5px 10px 5px 10px",
marginX="15px" margin: "0 15px 0 15px",
bottom={0} bottom: 0,
left={0} left: 0,
right={0} right: 0,
zIndex={1000} zIndex: 1000,
borderWidth="1px" borderWidth: "1px",
borderColor="brand.900" borderColor: "brand.900",
bgColor={backColor} background: backColor,
borderTopRadius="10px" borderRadius: "10px 10px 0 0",
}}
direction="column" direction="column"
> >
<Text <Text
alignContent="left"
fontSize="20px" fontSize="20px"
fontWeight="bold" fontWeight="bold"
userSelect="none" style={{
marginRight="auto" alignContent: "left",
overflow="hidden" userSelect: "none",
marginRight: "auto",
overflow: "hidden",
}}
// noOfLines={1} // noOfLines={1}
> >
{dataTrack?.name ?? '???'} {dataTrack?.name ?? '???'}
</Text> </Text>
<Text <Text
alignContent="left"
fontSize="16px" fontSize="16px"
userSelect="none" style={{
marginRight="auto" alignContent: "left",
overflow="hidden" userSelect: "none",
// noOfLines={1} marginRight: "auto",
overflow: "hidden",
//noOfLines:1
}}
> >
{dataArtists.map((data) => data.name).join(', ')} /{' '} {dataArtists.map((data) => data.name).join(', ')} /{' '}
{dataAlbum && dataAlbum?.name} {dataAlbum && dataAlbum?.name}
{dataGender && ` / ${dataGender.name}`} {dataGender && ` / ${dataGender.name}`}
</Text> </Text>
<Box width="full" paddingX="15px"> <Flex style={{ width: "100%", padding: "0 15px 0 15px" }}>
<Slider.Root <>TODO ... </>
{/* <Slider.Root
defaultValue={[0]} defaultValue={[0]}
value={[timeProgress]} value={[timeProgress]}
min={0} min={0}
@ -264,26 +261,28 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
// focusThumbOnChange={false} // focusThumbOnChange={false}
> >
<SliderTrack bg="gray.200" height="10px" borderRadius="full"> <SliderTrack bg="gray.200" height="10px" borderRadius="full">
{/* <SliderFilledTrack bg="brand.600" /> */} {/ * <SliderFilledTrack bg="brand.600" /> * /}
</SliderTrack> </SliderTrack>
</Slider.Root> </Slider.Root> */}
</Box> </Flex>
<Flex> <Flex>
<Text <Text
alignContent="left"
fontSize="16px" fontSize="16px"
userSelect="none" style={{
marginRight="auto" alignContent: "left",
overflow="hidden" userSelect: "none",
// noOfLines={1} marginRight: "auto",
overflow: "hidden",
// noOfLines={1},
}}
> >
{formatTime(timeProgress)} {formatTime(timeProgress)}
</Text> </Text>
<Text alignContent="left" fontSize="16px" userSelect="none"> <Text fontSize="16px" style={{ alignContent: "left", userSelect: "none" }}>
{formatTime(duration)} {formatTime(duration)}
</Text> </Text>
</Flex> </Flex>
<Flex gap="5px"> {/* <Flex gap="5px">
<IconButton <IconButton
{...configButton} {...configButton}
aria-label={'Play'} aria-label={'Play'}
@ -327,7 +326,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
aria-label={'continue to the end'} aria-label={'continue to the end'}
onClick={onTypePlay} onClick={onTypePlay}
>{playModeIcon[playingMode]}</IconButton> >{playModeIcon[playingMode]}</IconButton>
</Flex> </Flex> */}
</Flex> </Flex>
)} )}

36
front/src/components/Cover.tsx
View File

@ -1,15 +1,13 @@
import { ReactElement, useEffect, useState } from 'react'; import { CSSProperties, ReactElement, useEffect, useState } from 'react';
import { Box, BoxProps, Flex, FlexProps } from '@chakra-ui/react';
import { Image } from '@chakra-ui/react';
import { DataUrlAccess } from '@/utils/data-url-access'; import { DataUrlAccess } from '@/utils/data-url-access';
import { Icon } from './Icon'; import { Icon } from './Icon';
import { ObjectId } from '@/back-api'; import { ObjectId } from '@/back-api';
import { DivProps, Flex } from '@/ui';
export type CoversProps = Omit<BoxProps, "iconEmpty"> & { export type CoversProps = Omit<DivProps, "iconEmpty"> & {
data?: ObjectId[]; data?: ObjectId[];
size?: BoxProps["width"]; size?: CSSProperties["width"];
iconEmpty?: ReactElement; iconEmpty?: ReactElement;
slideshow?: boolean; slideshow?: boolean;
}; };
@ -45,26 +43,28 @@ export const Covers = ({
return <Icon icon={iconEmpty} sizeIcon={size} />; return <Icon icon={iconEmpty} sizeIcon={size} />;
} else { } else {
return ( return (
<Box <Flex
width={size} style={{
height={size} width: size,
minHeight={size} height: size,
minWidth={size} minHeight: size,
borderColor="blue" minWidth: size,
borderWidth="1px" borderColor: "blue",
margin="auto" borderWidth: "1px",
margin: "auto",
}}
{...rest} {...rest}
></Box> ></Flex>
); );
} }
} }
if (slideshow === false || data.length === 1) { if (slideshow === false || data.length === 1) {
const url = DataUrlAccess.getThumbnailUrl(data[0]); const url = DataUrlAccess.getThumbnailUrl(data[0]);
return <Image loading="lazy" src={url} maxWidth={size} boxSize={size} /*{...rest}*/ />; return <></>;//<image loading="lazy" src={url} maxWidth={size} boxSize={size} /*{...rest}*/ />;
} }
const urlCurrent = DataUrlAccess.getThumbnailUrl(data[currentImageIndex]); const urlCurrent = DataUrlAccess.getThumbnailUrl(data[currentImageIndex]);
const urlPrevious = DataUrlAccess.getThumbnailUrl(data[previousImageIndex]); const urlPrevious = DataUrlAccess.getThumbnailUrl(data[previousImageIndex]);
return <Flex return <></>/*<Flex
position="relative" position="relative"
// {...rest} // {...rest}
maxWidth={size} maxWidth={size}
@ -95,5 +95,5 @@ export const Covers = ({
opacity={topOpacity} opacity={topOpacity}
zIndex={2} zIndex={2}
/> />
</Flex> </Flex>*/
}; };

14
front/src/components/EmptyEnd.tsx
View File

@ -1,13 +1,15 @@
import { Box } from '@chakra-ui/react'; import { Flex } from "@/ui";
export const EmptyEnd = () => { export const EmptyEnd = () => {
return ( return (
<Box <Flex
width="full" style={{
height="25%" width: "100%",
minHeight="250px" height: "25%",
minHeight: "250px",
}}
// borderWidth="1px" // borderWidth="1px"
// borderColor="red" // borderColor="red"
></Box> ></Flex>
); );
}; };

42
front/src/components/Icon.tsx
View File

@ -1,8 +1,5 @@
import {
Box, import { Flex, FlexProps } from '@/ui';
Flex,
FlexProps,
} from '@chakra-ui/react';
import { forwardRef, ReactNode } from 'react'; import { forwardRef, ReactNode } from 'react';
export type IconProps = FlexProps & { export type IconProps = FlexProps & {
@ -12,26 +9,31 @@ export type IconProps = FlexProps & {
}; };
export const Icon = forwardRef<HTMLDivElement, IconProps>( export const Icon = forwardRef<HTMLDivElement, IconProps>(
({ icon: IconEl, color, sizeIcon = '1em', ...rest }, ref) => { ({ icon: IconEl, color, sizeIcon = '1em', style, ...rest }, ref) => {
return ( return (
<Flex flex="none" <Flex
minWidth={sizeIcon}
minHeight={sizeIcon}
maxWidth={sizeIcon}
maxHeight={sizeIcon}
align="center" align="center"
padding="1px" style={{
ref={ref} flex: "none",
minWidth: sizeIcon,
minHeight: sizeIcon,
maxWidth: sizeIcon,
maxHeight: sizeIcon,
padding: "1px",
...style
}}
{...rest}> {...rest}>
<Box <Flex
marginX="auto" style={{
width="100%" margin: "0 auto 0 auto",
minWidth="100%" width: "100%",
height="100%" minWidth: "100%",
color={color} height: "100%",
color: color,
}}
> >
{IconEl} {IconEl}
</Box> </Flex>
</Flex> </Flex>
); );
} }

46
front/src/components/Layout/PageLayout.tsx
View File

@ -1,10 +1,10 @@
import React, { ReactNode, useEffect } from 'react'; import React, { ReactNode, useEffect } from 'react';
import { Flex, Image } from '@chakra-ui/react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import background from '@/assets/images/ikon.svg'; import background from '@/assets/images/ikon.svg';
import { TOP_BAR_HEIGHT } from '@/components/TopBar/TopBar'; import { TOP_BAR_HEIGHT } from '@/components/TopBar/TopBar';
import { Flex, Image } from '@/ui';
export type LayoutProps = React.PropsWithChildren<unknown> & { export type LayoutProps = React.PropsWithChildren<unknown> & {
topBar?: ReactNode; topBar?: ReactNode;
@ -20,30 +20,34 @@ export const PageLayout = ({ children }: LayoutProps) => {
return ( return (
<> <>
<Flex <Flex
minH={`calc(100vh - ${TOP_BAR_HEIGHT})`} style={{
maxH={`calc(100vh - ${TOP_BAR_HEIGHT})`} position: "absolute",
position="absolute" minHeight: `calc(100vh - ${TOP_BAR_HEIGHT})`,
top={TOP_BAR_HEIGHT} maxHeight: `calc(100vh - ${TOP_BAR_HEIGHT})`,
bottom={0} top: TOP_BAR_HEIGHT,
left={0} bottom: 0,
right={0} left: 0,
minWidth="300px" right: 0,
zIndex={-1} minWidth: "300px",
zIndex: -1,
background: "back.800",
}}
> >
<Image src={background} boxSize="90%" margin="auto" opacity="30%" /> <Image src={background} boxSize="90%" style={{ margin: "auto", opacity: "30%" }} />
</Flex> </Flex>
<Flex <Flex
direction="column" direction="column"
overflowX="auto" style={{
overflowY="auto" overflow: "auto",
minH={`calc(100vh - ${TOP_BAR_HEIGHT})`} minHeight: `calc(100vh - ${TOP_BAR_HEIGHT})`,
maxH={`calc(100vh - ${TOP_BAR_HEIGHT})`} maxHeight: `calc(100vh - ${TOP_BAR_HEIGHT})`,
position="absolute" position: "absolute",
top={TOP_BAR_HEIGHT} top: TOP_BAR_HEIGHT,
bottom={0} bottom: 0,
left={0} left: 0,
right={0} right: 0,
minWidth="300px" minWidth: "300px",
}}
> >
{children} {children}
</Flex> </Flex>

32
front/src/components/Layout/PageLayoutInfoCenter.tsx
View File

@ -1,19 +1,20 @@
import React, { ReactNode, useEffect } from 'react'; import { CSSProperties, useEffect } from 'react';
import { Flex, FlexProps } from '@chakra-ui/react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayout } from '@/components/Layout/PageLayout';
import { colors } from '@/theme/foundations/colors'; import { basicColor } from '@/theme/colors';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { Flex, FlexProps } from '@/ui';
export type LayoutProps = FlexProps & { export type LayoutProps = FlexProps & {
children: ReactNode; width?: CSSProperties['width'];
}; };
export const PageLayoutInfoCenter = ({ export const PageLayoutInfoCenter = ({
children, children,
width = '25%', width = "75%",
style,
...rest ...rest
}: LayoutProps) => { }: LayoutProps) => {
const { pathname } = useLocation(); const { pathname } = useLocation();
@ -26,14 +27,17 @@ export const PageLayoutInfoCenter = ({
<PageLayout> <PageLayout>
<Flex <Flex
direction="column" direction="column"
margin="auto" style={{
minWidth={width} margin: "auto",
border="back.900" width,
borderWidth="1px" border: "back.900",
borderRadius="8px" borderWidth: "1px",
padding="10px" borderRadius: "8px",
boxShadow={'0px 0px 16px ' + colors.back[900]} padding: "10px",
backgroundColor={useColorModeValue('#FFFFFF', '#000000')} boxShadow: '0px 0px 16px ' + basicColor.back[900],
background: useColorThemeValue('#FFFFFF', '#000000'),
...style
}}
{...rest} {...rest}
> >
{children} {children}

24
front/src/components/SearchInput.tsx
View File

@ -1,9 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import {
Group,
Input,
} from '@chakra-ui/react';
import { MdSearch } from 'react-icons/md'; import { MdSearch } from 'react-icons/md';
export type SearchInputProps = { export type SearchInputProps = {
@ -42,15 +38,15 @@ export const SearchInput = ({
onSubmitValue(inputData); onSubmitValue(inputData);
} }
} }
return ( return (<></>
<Group maxWidth="200px" marginLeft="auto" {...searchInputProperty}> //<Group maxWidth="200px" marginLeft="auto" {...searchInputProperty}>
<MdSearch color="gray.300" /> // <MdSearch color="gray.300" />
<Input // <Input
onFocus={onFocusKeep} // onFocus={onFocusKeep}
onBlur={() => setTimeout(() => onFocusLost(), 200)} // onBlur={() => setTimeout(() => onFocusLost(), 200)}
onChange={onChange} // onChange={onChange}
onSubmit={onSubmit} // onSubmit={onSubmit}
/> // />
</Group> //</Group>
); );
}; };

133
front/src/components/TopBar/TopBar.tsx
View File

@ -1,13 +1,6 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import {
Box,
Flex,
HStack,
IconButton,
Text,
useDisclosure,
} from '@chakra-ui/react';
import { import {
LuAlignJustify, LuAlignJustify,
LuArrowBigLeft, LuArrowBigLeft,
@ -21,19 +14,13 @@ import { useNavigate } from 'react-router-dom';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';
import { SessionState } from '@/service/SessionState'; import { SessionState } from '@/service/SessionState';
import { colors } from '@/theme/foundations/colors'; import { basicColor } from '@/theme/colors';
import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso'; import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
import { useSessionService } from '@/service/session'; import { useSessionService } from '@/service/session';
import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md'; import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu'; import { useColorThemeValue, useTheme } from '@/theme/ThemeContext';
import { useColorMode, useColorModeValue } from '@/components/ui/color-mode'; import { useDisclosure } from '@/utils/disclosure';
import { import { Button, Flex, Text } from '@/ui';
DrawerBody,
DrawerContent,
DrawerHeader,
DrawerRoot,
} from '@/components/ui/drawer';
import { Button } from '../ui/themed';
export const TOP_BAR_HEIGHT = '50px'; export const TOP_BAR_HEIGHT = '50px';
@ -48,11 +35,11 @@ export type TopBarProps = {
}; };
export const TopBar = ({ title, children }: TopBarProps) => { export const TopBar = ({ title, children }: TopBarProps) => {
const { colorMode, toggleColorMode } = useColorMode(); const { theme, toggleTheme } = useTheme();
const { clearToken } = useSessionService(); const { clearToken } = useSessionService();
const { session } = useServiceContext(); const { session } = useServiceContext();
const backColor = useColorModeValue('back.100', 'back.800'); const backColor = useColorThemeValue('back.100', 'back.800');
const drawerDisclose = useDisclosure(); const drawerDisclose = useDisclosure();
const onChangeTheme = () => { const onChangeTheme = () => {
drawerDisclose.onOpen(); drawerDisclose.onOpen();
@ -87,22 +74,24 @@ export const TopBar = ({ title, children }: TopBarProps) => {
}; };
return ( return (
<Flex <Flex
position="absolute"
top={0}
left={0}
right={0}
height={TOP_BAR_HEIGHT}
alignItems="center"
justifyContent="space-between"
backgroundColor={backColor}
gap="2" gap="2"
px="2" align="center"
boxShadow={'0px 2px 4px ' + colors.back[900]} justify="space-between"
zIndex={200} style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
height: TOP_BAR_HEIGHT,
background: backColor,
padding: "0 2 0 2",
boxShadow: `0px 2px 4px ${basicColor.back[900]}`,
zIndex: 200,
}}
> >
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onChangeTheme}> <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onChangeTheme}>
<LuAlignJustify /> <LuAlignJustify />
<Text paddingLeft="3px" fontWeight="bold"> <Text style={{ padding: "0 0 0 3px" }} fontWeight="bold">
Karusic Karusic
</Text> </Text>
</Button> </Button>
@ -110,82 +99,84 @@ export const TopBar = ({ title, children }: TopBarProps) => {
<Text <Text
fontSize="20px" fontSize="20px"
fontWeight="bold" fontWeight="bold"
textTransform="uppercase" style={{
marginRight="auto" textTransform: "uppercase",
userSelect="none" marginRight: "auto",
userSelect: "none",
}}
> >
{title} {title}
</Text> </Text>
)} )}
{children} {children}
<Flex right="0"> <Flex style={{ right: 0 }}>
{session?.state !== SessionState.CONNECTED && ( {session?.state !== SessionState.CONNECTED && (
<> <>
<Button {...BUTTON_TOP_BAR_PROPERTY} theme="@primary" onClick={onSignIn}> <Button {...BUTTON_TOP_BAR_PROPERTY} /*{...THEME.Button.primary}*/ onClick={onSignIn}>
<LuLogIn /> <LuLogIn />
<Text paddingLeft="3px" fontWeight="bold"> <Text style={{ paddingLeft: "0 0 0 3px" }} fontWeight="bold">
Sign-in Sign-in
</Text> </Text>
</Button> </Button>
<Button <Button
{...BUTTON_TOP_BAR_PROPERTY} {...BUTTON_TOP_BAR_PROPERTY}
onClick={onSignUp} onClick={onSignUp}
disabled={true} // disabled={true}
> >
<MdMore /> <MdMore />
<Text paddingLeft="3px" fontWeight="bold"> <Text style={{ padding: "0 0 0 3px" }} fontWeight="bold">
Sign-up Sign-up
</Text> </Text>
</Button> </Button>
</> </>
)} )}
{session?.state === SessionState.CONNECTED && ( {/* {session?.state === SessionState.CONNECTED && (
<MenuRoot> <Menu.Root>
<MenuTrigger asChild> <Menu.Trigger asChild>
<IconButton <IconButton
as={IconButton} as={IconButton}
aria-label="Options" aria-label="Options"
{...BUTTON_TOP_BAR_PROPERTY} {...BUTTON_TOP_BAR_PROPERTY}
width={TOP_BAR_HEIGHT} width={TOP_BAR_HEIGHT}
><MdSupervisedUserCircle /></IconButton> ><MdSupervisedUserCircle /></IconButton>
</MenuTrigger> </Menu.Trigger>
<MenuContent> <Menu.Content>
<MenuItem value="user" valueText="user" _hover={{}} color={useColorModeValue('brand.800', 'brand.200')}> <Menu.Item value="user" valueText="user" _hover={{}} color={useColorModeValue('brand.800', 'brand.200')}>
<MdSupervisedUserCircle /> <MdSupervisedUserCircle />
<Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box> <Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box>
</MenuItem> </Menu.Item>
<MenuItem value="Settings" valueText="Settings" onClick={onSettings}><LuSettings />Settings</MenuItem> <Menu.Item value="Settings" valueText="Settings" onClick={onSettings}><LuSettings />Settings</Menu.Item>
<MenuItem value="Help" valueText="Help" onClick={onHelp}><MdHelp /> Help</MenuItem> <Menu.Item value="Help" valueText="Help" onClick={onHelp}><MdHelp /> Help</Menu.Item>
<MenuItem value="Sign-out" valueText="Sign-out" onClick={onSignOut}> <Menu.Item value="Sign-out" valueText="Sign-out" onClick={onSignOut}>
<LuLogOut /> Sign-out <LuLogOut /> Sign-out
</MenuItem> </Menu.Item>
{colorMode === 'light' ? ( {colorMode === 'light' ? (
<MenuItem value="set-dark" valueText="set-dark" onClick={toggleColorMode}> <Menu.Item value="set-dark" valueText="set-dark" onClick={toggleColorMode}>
<LuMoon /> Set dark mode <LuMoon /> Set dark mode
</MenuItem> </Menu.Item>
) : ( ) : (
<MenuItem value="set-light" valueText="set-light" onClick={toggleColorMode}> <Menu.Item value="set-light" valueText="set-light" onClick={toggleColorMode}>
<LuSun /> Set light mode <LuSun /> Set light mode
</MenuItem> </Menu.Item>
)} )}
</MenuContent> </Menu.Content>
</MenuRoot> </Menu.Root>
)} )} */}
</Flex> </Flex>
<DrawerRoot {/* <Drawer.Root
placement="start" placement="start"
onOpenChange={drawerDisclose.onClose} onOpenChange={drawerDisclose.onClose}
open={drawerDisclose.open} open={drawerDisclose.open}
data-testid="top-bar_drawer-root" data-testid="top-bar_drawer-root"
> >
<DrawerContent <Drawer.Content
data-testid="top-bar_drawer-content"> data-test-id="top-bar_drawer-content">
<DrawerHeader <Drawer.Header
paddingY="auto" paddingY="auto"
as="button" as="button"
onClick={drawerDisclose.onClose} onClick={drawerDisclose.onClose}
boxShadow={'0px 2px 4px ' + colors.back[900]} boxShadow={'0px 2px 4px ' + colors.back[900]}
backgroundColor={backColor} background={backColor}
color={useColorModeValue('brand.900', 'brand.50')} color={useColorModeValue('brand.900', 'brand.50')}
textTransform="uppercase" textTransform="uppercase"
> >
@ -195,13 +186,13 @@ export const TopBar = ({ title, children }: TopBarProps) => {
Karusic Karusic
</Text> </Text>
</HStack> </HStack>
</DrawerHeader> </Drawer.Header>
<DrawerBody paddingX="0px"> <Drawer.Body paddingX="0px">
<Button <Button
background="#00000000" background="#00000000"
borderRadius="0px" borderRadius="0px"
onClick={onSelectHome} onClick={onSelectHome}
width="full" width="100%"
> >
<MdHome /> <MdHome />
<Text paddingLeft="3px" fontWeight="bold" marginRight="auto"> <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
@ -213,7 +204,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
background="#00000000" background="#00000000"
borderRadius="0px" borderRadius="0px"
onClick={onSelectOnAir} onClick={onSelectOnAir}
width="full" width="100%"
> >
<MdOutlinePlaylistPlay /> <MdOutlinePlaylistPlay />
<Text paddingLeft="3px" fontWeight="bold" marginRight="auto"> <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
@ -225,16 +216,16 @@ export const TopBar = ({ title, children }: TopBarProps) => {
background="#00000000" background="#00000000"
borderRadius="0px" borderRadius="0px"
onClick={onSelectAdd} onClick={onSelectAdd}
width="full" width="100%"
> >
<MdOutlineUploadFile /> <MdOutlineUploadFile />
<Text paddingLeft="3px" fontWeight="bold" marginRight="auto"> <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
Add Media Add Media
</Text> </Text>
</Button> </Button>
</DrawerBody> </Drawer.Body>
</DrawerContent> </Drawer.Content>
</DrawerRoot> </Drawer.Root> */}
</Flex> </Flex>
); );
}; };

37
front/src/components/album/DisplayAlbum.tsx
View File

@ -1,10 +1,12 @@
import { Flex, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu'; import { LuDisc3 } from 'react-icons/lu';
import { Album } from '@/back-api'; import { Album } from '@/back-api';
import { Covers } from '@/components/Cover'; import { Covers } from '@/components/Cover';
import { useCountTracksWithAlbumId } from '@/service/Track'; import { useCountTracksWithAlbumId } from '@/service/Track';
import { BASE_WRAP_ICON_SIZE } from '@/constants/genericSpacing'; import { BASE_WRAP_ICON_SIZE } from '@/constants/genericSpacing';
import { Flex, Text } from '@/ui';
import { Span } from '@/ui/Span';
export type DisplayAlbumProps = { export type DisplayAlbumProps = {
dataAlbum?: Album; dataAlbum?: Album;
@ -13,13 +15,13 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
const { countTracksOfAnAlbum } = useCountTracksWithAlbumId(dataAlbum?.id); const { countTracksOfAnAlbum } = useCountTracksWithAlbumId(dataAlbum?.id);
if (!dataAlbum) { if (!dataAlbum) {
return ( return (
<Flex direction="row" width="full" height="full"> <Flex direction="row" width="100%" height="full">
Fail to retrieve Album Data. Fail to retrieve Album Data.
</Flex> </Flex>
); );
} }
return ( return (
<Flex direction="row" width="full" height="full" <Flex direction="row" width="100%" height="full"
data-testid="display-album_flex"> data-testid="display-album_flex">
<Covers <Covers
data={dataAlbum?.covers} data={dataAlbum?.covers}
@ -33,32 +35,37 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
//maxWidth="150px" //maxWidth="150px"
height="full" height="full"
paddingLeft="5px" paddingLeft="5px"
overflowX="hidden" style={{
flex={1} marginRight: "auto",
overflow: "hidden",
flex: 1,
}}
> >
<Text <Span
as="span"
// align="left" // align="left"
fontSize="20px" fontSize="20px"
fontWeight="bold" fontWeight="bold"
userSelect="none" userSelect="none"
marginRight="auto" style={{
overflow="hidden" marginRight: "auto",
overflow: "hidden",
}}
// noOfLines={[1, 2]} // noOfLines={[1, 2]}
> >
{dataAlbum?.name} {dataAlbum?.name}
</Text> </Span>
<Text <Span
as="span"
// align="left" // align="left"
fontSize="15px" fontSize="15px"
userSelect="none" userSelect="none"
marginRight="auto" style={{
overflow="hidden" marginRight: "auto",
overflow: "hidden",
}}
// noOfLines={1} // noOfLines={1}
> >
{countTracksOfAnAlbum} track{countTracksOfAnAlbum >= 1 && 's'} {countTracksOfAnAlbum} track{countTracksOfAnAlbum >= 1 && 's'}
</Text> </Span>
</Flex> </Flex>
</Flex> </Flex>
); );

71
front/src/components/contextMenu/ContextMenu.tsx
View File

@ -1,12 +1,6 @@
import { useState } from 'react';
import {
IconButton,
} from '@chakra-ui/react';
import { LuMenu } from 'react-icons/lu'; import { LuMenu } from 'react-icons/lu';
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
import { Button } from '../ui/themed';
import { customVariant } from '@/theme/recipes/button';
export type MenuElement = { export type MenuElement = {
name: string; name: string;
@ -17,44 +11,29 @@ export type ContextMenuProps = {
elements?: MenuElement[]; elements?: MenuElement[];
}; };
const theme = {
plop: {
bg: { _light: 'red', _dark: 'brand.300', _pink: "orange" },
_hover: { bg: { _light: 'green', _dark: 'brand.400', _pink: "black" } },
// bg: { _light: 'brand.600', _dark: 'brand.300' },
// _hover: { bg: { _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'
*/
}
};
export const ContextMenu = ({ elements }: ContextMenuProps) => { export const ContextMenu = ({ elements }: ContextMenuProps) => {
if (!elements) { // if (!elements) {
return <></>; return <></>;
} // }
return ( // return (
<MenuRoot // <Menu.Root
data-testid="context-menu"> // data-testid="context-menu">
<MenuTrigger asChild // <Menu.Trigger asChild
data-testid="context-menu_trigger"> // data-testid="context-menu_trigger">
{/* This is very stupid, we need to set as span to prevent a button in button... WTF */} // {/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
<Button {...theme.plop} /*theme="@primary"*/> // <Button {...THEME.Button.primary} >
<LuMenu /> // <LuMenu />
</Button> // </Button>
</MenuTrigger> // </Menu.Trigger>
<MenuContent // <Menu.Content
data-testid="context-menu_content"> // data-testid="context-menu_content">
{elements?.map((data) => ( // {elements?.map((data) => (
<MenuItem key={data.name} value={data.name} onClick={data.onClick} // <Menu.Item key={data.name} value={data.name} onClick={data.onClick}
data-testid="context-menu_item"> // data-testid="context-menu_item">
{data.name} // {data.name}
</MenuItem> // </Menu.Item>
))} // ))}
</MenuContent> // </Menu.Content>
</MenuRoot > // </Menu.Root >
); //);
}; };

92
front/src/components/form/FormCovers.tsx
View File

@ -3,14 +3,7 @@ import {
RefObject, RefObject,
} from 'react'; } from 'react';
import {
Box,
BoxProps,
Center,
Flex,
HStack,
Image,
} from '@chakra-ui/react';
import { import {
MdHighlightOff, MdHighlightOff,
MdUploadFile, MdUploadFile,
@ -19,6 +12,7 @@ import {
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable'; import { UseFormidableReturn } from '@/components/form/Formidable';
import { DataUrlAccess } from '@/utils/data-url-access'; import { DataUrlAccess } from '@/utils/data-url-access';
import { Flex, FlexProps } from '@/ui';
export type DragNdropProps = { export type DragNdropProps = {
onFilesSelected?: (file: File[]) => void; onFilesSelected?: (file: File[]) => void;
@ -58,40 +52,42 @@ export const DragNdrop = ({
onUriSelected(listUri); onUriSelected(listUri);
} }
}; };
return <></>;
return ( /*
<Box return (
width={width} <Box
height={height} width={width}
border="2px" height={height}
borderRadius="5px" border="2px"
borderStyle="dashed" borderRadius="5px"
onDrop={handleDrop} borderStyle="dashed"
onDragOver={(event) => event.preventDefault()} onDrop={handleDrop}
> onDragOver={(event) => event.preventDefault()}
<label htmlFor="browse"> >
<Box paddingY="15%" height="100%" cursor="pointer"> <label htmlFor="browse">
<Center> <Box paddingY="15%" height="100%" cursor="pointer">
<MdUploadFile size="50%" /> <Center>
</Center> <MdUploadFile size="50%" />
<Center> </Center>
<input <Center>
type="file" <input
hidden type="file"
id="browse" hidden
onChange={handleFileChange} id="browse"
//accept=".pdf,.docx,.pptx,.txt,.xlsx" onChange={handleFileChange}
multiple //accept=".pdf,.docx,.pptx,.txt,.xlsx"
/> multiple
Browse files />
</Center> Browse files
</Box> </Center>
</label> </Box>
</Box> </label>
); </Box>
);
*/
}; };
export type CenterIconProps = BoxProps & { export type CenterIconProps = FlexProps & {
icon: any; icon: any;
sizeIcon?: string; sizeIcon?: string;
}; };
@ -99,11 +95,13 @@ export type CenterIconProps = BoxProps & {
export const CenterIcon = ({ export const CenterIcon = ({
icon: IconEl, icon: IconEl,
sizeIcon = '15px', sizeIcon = '15px',
style,
...rest ...rest
}: CenterIconProps) => { }: CenterIconProps) => {
return ( return (
<Box position="relative" w={sizeIcon} h={sizeIcon} flex="none" {...rest}> <Flex style={{ position: "relative", width: sizeIcon, height: sizeIcon, flex: "none", ...style }}
<Box {...rest}>
{/*<Flex
as={IconEl} as={IconEl}
w={sizeIcon} w={sizeIcon}
h={sizeIcon} h={sizeIcon}
@ -111,8 +109,8 @@ export const CenterIcon = ({
top="50%" top="50%"
left="50%" left="50%"
transform="translate(-50%, -50%)" transform="translate(-50%, -50%)"
/> />*/}
</Box> </Flex>
); );
}; };
@ -143,8 +141,8 @@ export const FormCovers = ({
isModify={form.isModify[variableName]} isModify={form.isModify[variableName]}
onRestore={() => form.restoreValue({ [variableName]: true })} onRestore={() => form.restoreValue({ [variableName]: true })}
{...rest} {...rest}
> > <></>
<HStack wrap="wrap" width="full"> {/* <HStack wrap="wrap" width="100%">
{urls.map((data, index) => ( {urls.map((data, index) => (
<Flex align="flex-start" key={data}> <Flex align="flex-start" key={data}>
<Box width="125px" height="125px" position="relative"> <Box width="125px" height="125px" position="relative">
@ -171,7 +169,7 @@ export const FormCovers = ({
onUriSelected={onUriSelected} onUriSelected={onUriSelected}
/> />
</Flex> </Flex>
</HStack> </HStack> */}
</FormGroup> </FormGroup>
); );
}; };

19
front/src/components/form/FormGroup.tsx
View File

@ -1,6 +1,7 @@
import { Flex, Text } from '@/ui';
import { Span } from '@/ui/Span';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Flex, Text } from '@chakra-ui/react';
import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md'; import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
export type FormGroupProps = { export type FormGroupProps = {
@ -23,20 +24,22 @@ export const FormGroup = ({
onRestore, onRestore,
}: FormGroupProps) => ( }: FormGroupProps) => (
<Flex <Flex
borderLeftWidth="3px" style={{
borderLeftColor={error ? 'red' : isModify ? 'blue' : '#00000000'} borderLeftWidth: "3px",
borderLeftColor: error ? 'red' : isModify ? 'blue' : '#00000000',
}}
paddingLeft="7px" paddingLeft="7px"
paddingY="4px" padding="0 4px"
direction="column" direction="column"
> >
<Flex direction="row" width="full" gap="52px"> <Flex direction="row" width="100%" gap="52px">
{!!label && ( {!!label && (
<Text marginRight="auto" fontWeight="bold"> <Text style={{ marginRight: "auto" }} fontWeight="bold">
{label}{' '} {label}{' '}
{isRequired && ( {isRequired && (
<Text as="span" color="red.600"> <Span color="red.600">
* *
</Text> </Span>
)} )}
</Text> </Text>
)} )}

3
front/src/components/form/FormInput.tsx
View File

@ -1,9 +1,8 @@
import { RefObject } from 'react'; import { RefObject } from 'react';
import { Input } from '@chakra-ui/react';
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable'; import { UseFormidableReturn } from '@/components/form/Formidable';
import { Input } from '@/ui';
export type FormInputProps = { export type FormInputProps = {
form: UseFormidableReturn; form: UseFormidableReturn;

8
front/src/components/form/FormNumber.tsx
View File

@ -1,8 +1,5 @@
import { RefObject } from 'react'; import { RefObject } from 'react';
import {
NumberInput,
} from '@chakra-ui/react';
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable'; import { UseFormidableReturn } from '@/components/form/Formidable';
@ -36,7 +33,8 @@ export const FormNumber = ({
onRestore={() => form.restoreValue({ [variableName]: true })} onRestore={() => form.restoreValue({ [variableName]: true })}
{...rest} {...rest}
> >
<NumberInput.Root <></>
{/* <NumberInput.Root
ref={ref} ref={ref}
value={form.values[variableName]} value={form.values[variableName]}
onValueChange={(value) => form.setValues({ [variableName]: value })} onValueChange={(value) => form.setValues({ [variableName]: value })}
@ -46,7 +44,7 @@ export const FormNumber = ({
max={max} max={max}
> >
<NumberInput.Input /> <NumberInput.Input />
</NumberInput.Root> </NumberInput.Root> */}
</FormGroup> </FormGroup>
); );
}; };

6
front/src/components/form/FormSelect.stories.tsx
View File

@ -1,9 +1,9 @@
import { useState } from 'react'; import { useState } from 'react';
import { Box } from '@chakra-ui/react';
import { FormSelect } from '@/components/form/FormSelect'; import { FormSelect } from '@/components/form/FormSelect';
import { useFormidable } from '@/components/form/Formidable'; import { useFormidable } from '@/components/form/Formidable';
import { Flex } from '@/ui';
export default { export default {
title: 'Components/FormSelect', title: 'Components/FormSelect',
@ -94,7 +94,7 @@ export const DarkBackground = {
render: () => { render: () => {
const form = useFormidable<BasicFormData>({}); const form = useFormidable<BasicFormData>({});
return ( return (
<Box p="4" color="white" bg="gray.800"> <Flex style={{ padding: "4", color: "white", background: "gray.800" }}>
<FormSelect <FormSelect
label="Simple Title for (DarkBackground)" label="Simple Title for (DarkBackground)"
form={form} form={form}
@ -105,7 +105,7 @@ export const DarkBackground = {
{ id: 333, name: 'third item' }, { id: 333, name: 'third item' },
]} ]}
/> />
</Box> </Flex>
); );
}, },

1
front/src/components/form/FormSelect.tsx
View File

@ -1,6 +1,5 @@
import { RefObject } from 'react'; import { RefObject } from 'react';
import { Text } from '@chakra-ui/react';
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable'; import { UseFormidableReturn } from '@/components/form/Formidable';

6
front/src/components/form/FormSelectMultiple.stories.tsx
View File

@ -1,9 +1,9 @@
import { useState } from 'react'; import { useState } from 'react';
import { Box } from '@chakra-ui/react';
import { FormSelectMultiple } from '@/components/form/FormSelectMultiple'; import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
import { useFormidable } from '@/components/form/Formidable'; import { useFormidable } from '@/components/form/Formidable';
import { Flex } from '@/ui';
export default { export default {
title: 'Components/FormSelectMultipleMultiple', title: 'Components/FormSelectMultipleMultiple',
@ -94,7 +94,7 @@ export const DarkBackground = {
render: () => { render: () => {
const form = useFormidable<BasicFormData>({}); const form = useFormidable<BasicFormData>({});
return ( return (
<Box p="4" color="white" bg="gray.800"> <Flex style={{ padding: "4", color: "white", background: "gray.800" }}>
<FormSelectMultiple <FormSelectMultiple
label="Simple Title for (DarkBackground)" label="Simple Title for (DarkBackground)"
form={form} form={form}
@ -105,7 +105,7 @@ export const DarkBackground = {
{ id: 333, name: 'third item' }, { id: 333, name: 'third item' },
]} ]}
/> />
</Box> </Flex>
); );
}, },

1
front/src/components/form/FormTextarea.tsx
View File

@ -1,6 +1,5 @@
import { RefObject } from 'react'; import { RefObject } from 'react';
import { Textarea } from '@chakra-ui/react';
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable'; import { UseFormidableReturn } from '@/components/form/Formidable';

42
front/src/components/gender/DisplayGender.tsx
View File

@ -1,9 +1,10 @@
import { Flex, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu'; import { LuDisc3 } from 'react-icons/lu';
import { Gender } from '@/back-api'; import { Gender } from '@/back-api';
import { Covers } from '@/components/Cover'; import { Covers } from '@/components/Cover';
import { useCountTracksOfAGender } from '@/service/Track'; import { useCountTracksOfAGender } from '@/service/Track';
import { Flex, Span, Text } from '@/ui';
export type DisplayGenderProps = { export type DisplayGenderProps = {
dataGender?: Gender; dataGender?: Gender;
@ -12,13 +13,13 @@ export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
const { countTracksOnAGender } = useCountTracksOfAGender(dataGender?.id); const { countTracksOnAGender } = useCountTracksOfAGender(dataGender?.id);
if (!dataGender) { if (!dataGender) {
return ( return (
<Flex direction="row" width="full" height="full"> <Flex direction="row" width="100%" height="full">
Fail to retrieve Gender Data. Fail to retrieve Gender Data.
</Flex> </Flex>
); );
} }
return ( return (
<Flex direction="row" width="full" height="full"> <Flex direction="row" width="100%" height="full">
<Covers <Covers
data={dataGender?.covers} data={dataGender?.covers}
size="100" size="100"
@ -31,31 +32,36 @@ export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
maxWidth="150px" maxWidth="150px"
height="full" height="full"
paddingLeft="5px" paddingLeft="5px"
overflowX="hidden" style={{
overflowX: "hidden"
}}
> >
<Text <Span
as="span"
alignContent="left"
fontSize="20px" fontSize="20px"
fontWeight="bold" fontWeight="bold"
userSelect="none" style={{
marginRight="auto" userSelect: "none",
overflow="hidden" marginRight: "auto",
overflow: "hidden",
alignContent: "left",
}}
//TODO: noOfLines={[1, 2]} //TODO: noOfLines={[1, 2]}
> >
{dataGender?.name} {dataGender?.name}
</Text> </Span>
<Text <Span
as="span"
alignContent="left"
fontSize="15px" fontSize="15px"
userSelect="none" style={{
marginRight="auto" userSelect: "none",
overflow="hidden" marginRight: "auto",
overflow: "hidden",
alignContent: "left",
}}
//TODO: noOfLines={1} //TODO: noOfLines={1}
> >
{countTracksOnAGender} track{countTracksOnAGender >= 1 && 's'} {countTracksOnAGender} track{countTracksOnAGender >= 1 && 's'}
</Text> </Span>
</Flex> </Flex>
</Flex> </Flex>
); );

217
front/src/components/popup/AlbumEditPopUp.tsx
View File

@ -1,10 +1,5 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import {
Flex,
Text,
useDisclosure,
} from '@chakra-ui/react';
import { import {
MdAdminPanelSettings, MdAdminPanelSettings,
MdDeleteForever, MdDeleteForever,
@ -24,8 +19,7 @@ import { useAlbumService, useSpecificAlbum } from '@/service/Album';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksWithAlbumId } from '@/service/Track'; import { useCountTracksWithAlbumId } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog'; import { useDisclosure } from '@/utils/disclosure';
import { Button } from '../ui/themed';
export type AlbumEditPopUpProps = {}; export type AlbumEditPopUpProps = {};
@ -134,109 +128,110 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
}) })
); );
}; };
return ( return <></>;
<DialogRoot // return (
//initialFocusRef={initialRef} // <Dialog.Root
//finalFocusRef={finalRef} // //initialFocusRef={initialRef}
//closeOnOverlayClick={false} // //finalFocusRef={finalRef}
onOpenChange={onClose} // //closeOnOverlayClick={false}
open={true} // onOpenChange={onClose}
data-testid="album-edit-pop-up" // open={true}
> // data-testid="album-edit-pop-up"
{/* <DialogOverlay /> */} // >
{/* <DialogCloseTrigger /> */} // {/* <DialogOverlay /> */}
<DialogContent> // {/* <DialogCloseTrigger /> */}
<DialogHeader>Edit Album</DialogHeader> // <Dialog.Content>
{/* <DialogCloseButton ref={finalRef} /> */} // <Dialog.Header>Edit Album</Dialog.Header>
// {/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> // <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
{admin && ( // {admin && (
<> // <>
<FormGroup isRequired label="Id"> // <FormGroup isRequired label="Id">
<Text>{dataAlbum?.id}</Text> // <Text>{dataAlbum?.id}</Text>
</FormGroup> // </FormGroup>
{countTracksOfAnAlbum !== 0 && ( // {countTracksOfAnAlbum !== 0 && (
<Flex paddingLeft="14px"> // <Flex paddingLeft="14px">
<MdWarning color="red.600" /> // <MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold"> // <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove album {countTracksOfAnAlbum} track(s) depend // Can not remove album {countTracksOfAnAlbum} track(s) depend
on it. // on it.
</Text> // </Text>
</Flex> // </Flex>
)} // )}
<FormGroup label="Action(s):"> // <FormGroup label="Action(s):">
<Button // <Button
onClick={disclosure.onOpen} // onClick={disclosure.onOpen}
marginRight="auto" // marginRight="auto"
theme="@danger" // theme="@danger"
disabled={countTracksOfAnAlbum !== 0} // disabled={countTracksOfAnAlbum !== 0}
> // >
<MdDeleteForever /> Remove Media // <MdDeleteForever /> Remove Media
</Button> // </Button>
</FormGroup> // </FormGroup>
<ConfirmPopUp // <ConfirmPopUp
disclosure={disclosure} // disclosure={disclosure}
title="Remove album" // title="Remove album"
body={`Remove Album [${dataAlbum?.id}] ${dataAlbum?.name}`} // body={`Remove Album [${dataAlbum?.id}] ${dataAlbum?.name}`}
confirmTitle="Remove" // confirmTitle="Remove"
onConfirm={onRemove} // onConfirm={onRemove}
/> // />
</> // </>
)} // )}
{!admin && ( // {!admin && (
<> // <>
<FormInput // <FormInput
form={form} // form={form}
variableName="name" // variableName="name"
isRequired // isRequired
label="Title" // label="Title"
ref={initialRef} // ref={initialRef}
/> // />
<FormTextarea // <FormTextarea
form={form} // form={form}
variableName="description" // variableName="description"
label="Description" // label="Description"
/> // />
<FormInput // <FormInput
form={form} // form={form}
variableName="publication" // variableName="publication"
label="Publication" // label="Publication"
/> // />
<FormCovers // <FormCovers
form={form} // form={form}
variableName="covers" // variableName="covers"
onFilesSelected={onFilesSelected} // onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected} // onUriSelected={onUriSelected}
onRemove={onRemoveCover} // onRemove={onRemoveCover}
/> // />
</> // </>
)} // )}
</DialogBody> // </Dialog.Body>
<DialogFooter> // <Dialog.Footer>
<Button // <Button
onClick={() => setAdmin((value) => !value)} // onClick={() => setAdmin((value) => !value)}
marginRight="auto" // marginRight="auto"
> // >
{admin ? ( // {admin ? (
<> // <>
<MdEdit /> // <MdEdit />
Edit // Edit
</> // </>
) : ( // ) : (
<> // <>
<MdAdminPanelSettings /> // <MdAdminPanelSettings />
Admin // Admin
</> // </>
)} // )}
</Button> // </Button>
{!admin && form.isFormModified && ( // {!admin && form.isFormModified && (
<Button colorScheme="blue" mr={3} onClick={onSave}> // <Button colorScheme="blue" mr={3} onClick={onSave}>
Save // Save
</Button> // </Button>
)} // )}
<Button onClick={onClose}>Cancel</Button> // <Button onClick={onClose}>Cancel</Button>
</DialogFooter> // </Dialog.Footer>
</DialogContent> // </Dialog.Content>
</DialogRoot> // </Dialog.Root>
); // );
}; };

219
front/src/components/popup/ArtistEditPopUp.tsx
View File

@ -1,11 +1,6 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import {
Flex,
Text,
useDisclosure,
} from '@chakra-ui/react';
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
import { import {
MdAdminPanelSettings, MdAdminPanelSettings,
MdDeleteForever, MdDeleteForever,
@ -25,7 +20,7 @@ import { useArtistService, useSpecificArtist } from '@/service/Artist';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksOfAnArtist } from '@/service/Track'; import { useCountTracksOfAnArtist } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Button } from '../ui/themed'; import { useDisclosure } from '@/utils/disclosure';
export type ArtistEditPopUpProps = {}; export type ArtistEditPopUpProps = {};
@ -134,110 +129,110 @@ export const ArtistEditPopUp = ({ }: ArtistEditPopUpProps) => {
); );
}; };
return ( return (
<DialogRoot // <Dialog.Root
//initialFocusRef={initialRef} // //initialFocusRef={initialRef}
//finalFocusRef={finalRef} // //finalFocusRef={finalRef}
//closeOnOverlayClick={false} // //closeOnOverlayClick={false}
onOpenChange={onClose} // onOpenChange={onClose}
open={true} // open={true}
data-testid="artist-edit-pop-up" // data-testid="artist-edit-pop-up"
> // >
{/* <DialogOverlay /> */} // {/* <DialogOverlay /> */}
<DialogContent> // <Dialog.Content>
<DialogHeader>Edit Artist</DialogHeader> // <Dialog.Header>Edit Artist</Dialog.Header>
{/* <DialogCloseButton ref={finalRef} /> */} // {/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> // <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
{admin && ( // {admin && (
<> // <>
<FormGroup isRequired label="Id"> // <FormGroup isRequired label="Id">
<Text>{dataArtist?.id}</Text> // <Text>{dataArtist?.id}</Text>
</FormGroup> // </FormGroup>
{countTracksOnAnArtist !== 0 && ( // {countTracksOnAnArtist !== 0 && (
<Flex paddingLeft="14px"> // <Flex paddingLeft="14px">
<MdWarning color="red.600" /> // <MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold"> // <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove artist {countTracksOnAnArtist} track(s) // Can not remove artist {countTracksOnAnArtist} track(s)
depend on it. // depend on it.
</Text> // </Text>
</Flex> // </Flex>
)} // )}
<FormGroup label="Action(s):"> // <FormGroup label="Action(s):">
<Button // <Button
onClick={disclosure.onOpen} // onClick={disclosure.onOpen}
marginRight="auto" // marginRight="auto"
theme="@danger" // theme="@danger"
disabled={countTracksOnAnArtist !== 0} // disabled={countTracksOnAnArtist !== 0}
> // >
<MdDeleteForever /> Remove Media // <MdDeleteForever /> Remove Media
</Button> // </Button>
</FormGroup> // </FormGroup>
<ConfirmPopUp // <ConfirmPopUp
disclosure={disclosure} // disclosure={disclosure}
title="Remove artist" // title="Remove artist"
body={`Remove Artist [${dataArtist?.id}] ${dataArtist?.name}`} // body={`Remove Artist [${dataArtist?.id}] ${dataArtist?.name}`}
confirmTitle="Remove" // confirmTitle="Remove"
onConfirm={onRemove} // onConfirm={onRemove}
/> // />
</> // </>
)} // )}
{!admin && ( // {!admin && (
<> // <>
<FormInput // <FormInput
form={form} // form={form}
variableName="name" // variableName="name"
isRequired // isRequired
label="Artist name" // label="Artist name"
ref={initialRef} // ref={initialRef}
/> // />
<FormTextarea // <FormTextarea
form={form} // form={form}
variableName="description" // variableName="description"
label="Description" // label="Description"
/> // />
<FormInput // <FormInput
form={form} // form={form}
variableName="firstName" // variableName="firstName"
label="First Name" // label="First Name"
/> // />
<FormInput form={form} variableName="surname" label="SurName" /> // <FormInput form={form} variableName="surname" label="SurName" />
<FormInput form={form} variableName="birth" label="Birth date" /> // <FormInput form={form} variableName="birth" label="Birth date" />
<FormInput form={form} variableName="death" label="Death date" /> // <FormInput form={form} variableName="death" label="Death date" />
<FormCovers // <FormCovers
form={form} // form={form}
variableName="covers" // variableName="covers"
onFilesSelected={onFilesSelected} // onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected} // onUriSelected={onUriSelected}
onRemove={onRemoveCover} // onRemove={onRemoveCover}
/> // />
</> // </>
)} // )}
</DialogBody> // </Dialog.Body>
<DialogFooter> // <Dialog.Footer>
<Button // <Button
onClick={() => setAdmin((value) => !value)} // onClick={() => setAdmin((value) => !value)}
marginRight="auto" // marginRight="auto"
> // >
{admin ? ( // {admin ? (
<> // <>
<MdEdit /> // <MdEdit />
Edit // Edit
</> // </>
) : ( // ) : (
<> // <>
<MdAdminPanelSettings /> // <MdAdminPanelSettings />
Admin // Admin
</> // </>
)} // )}
</Button> // </Button>
{!admin && form.isFormModified && ( // {!admin && form.isFormModified && (
<Button colorScheme="blue" mr={3} onClick={onSave}> // <Button colorScheme="blue" mr={3} onClick={onSave}>
Save // Save
</Button> // </Button>
)} // )}
<Button onClick={onClose}>Cancel</Button> // <Button onClick={onClose}>Cancel</Button>
</DialogFooter> // </Dialog.Footer>
</DialogContent> // </Dialog.Content>
</DialogRoot> // </Dialog.Root>
); <></>);
}; };

56
front/src/components/popup/ConfirmPopUp.tsx
View File

@ -1,11 +1,8 @@
import { UseDisclosureReturn } from '@/utils/disclosure';
import { useRef } from 'react'; import { useRef } from 'react';
import {
Button,
UseDisclosureReturn,
} from '@chakra-ui/react';
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
export type ConfirmPopUpProps = { export type ConfirmPopUpProps = {
title: string; title: string;
body: string; body: string;
@ -26,29 +23,28 @@ export const ConfirmPopUp = ({
disclosure.onClose(); disclosure.onClose();
}; };
const cancelRef = useRef<HTMLButtonElement>(null); const cancelRef = useRef<HTMLButtonElement>(null);
return ( return <></>;
<DialogRoot role="alertdialog" // return (
open={disclosure.open} // <Dialog.Root role="alertdialog"
//leastDestructiveRef={cancelRef} // open={disclosure.open}
onOpenChange={disclosure.onClose} // //leastDestructiveRef={cancelRef}
data-testid="confirm-pop-up" // onOpenChange={disclosure.onClose}
> // data-testid="confirm-pop-up"
<DialogContent> // >
<DialogHeader fontSize="lg" fontWeight="bold"> // <Dialog.Content>
{title} // <Dialog.Header fontSize="lg" fontWeight="bold">
</DialogHeader> // {title}
// </Dialog.Header>
<DialogBody>{body}</DialogBody> // <Dialog.Body>{body}</Dialog.Body>
// <Dialog.Footer>
<DialogFooter> // <Button onClick={disclosure.onClose} ref={cancelRef}>
<Button onClick={disclosure.onClose} ref={cancelRef}> // Cancel
Cancel // </Button>
</Button> // <Button colorScheme="red" onClick={onClickConfirm} ml={3}>
<Button colorScheme="red" onClick={onClickConfirm} ml={3}> // {confirmTitle}
{confirmTitle} // </Button>
</Button> // </Dialog.Footer>
</DialogFooter> // </Dialog.Content>
</DialogContent> // </Dialog.Root>
</DialogRoot> // );
);
}; };

206
front/src/components/popup/GenderEditPopUp.tsx
View File

@ -1,10 +1,6 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import {
Flex,
Text,
useDisclosure,
} from '@chakra-ui/react';
import { import {
MdAdminPanelSettings, MdAdminPanelSettings,
MdDeleteForever, MdDeleteForever,
@ -12,7 +8,6 @@ import {
MdWarning, MdWarning,
} from 'react-icons/md'; } from 'react-icons/md';
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { Gender, GenderResource } from '@/back-api'; import { Gender, GenderResource } from '@/back-api';
@ -26,7 +21,7 @@ import { useGenderService, useSpecificGender } from '@/service/Gender';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksOfAGender } from '@/service/Track'; import { useCountTracksOfAGender } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Button } from '../ui/themed'; import { useDisclosure } from '@/utils/disclosure';
export type GenderEditPopUpProps = {}; export type GenderEditPopUpProps = {};
@ -133,103 +128,104 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
}) })
); );
}; };
return ( return <></>;
<DialogRoot // return (
//initialFocusRef={initialRef} // <Dialog.Root
//finalFocusRef={finalRef} // //initialFocusRef={initialRef}
//closeOnOverlayClick={false} // //finalFocusRef={finalRef}
onOpenChange={onClose} // //closeOnOverlayClick={false}
open={true} // onOpenChange={onClose}
data-testid="gender-edit-pop-up" // open={true}
> // data-testid="gender-edit-pop-up"
{/* <DialogOverlay /> */} // >
<DialogContent> // {/* <DialogOverlay /> */}
<DialogHeader>Edit Gender</DialogHeader> // <Dialog.Content>
{/* <DialogCloseButton ref={finalRef} /> */} // <Dialog.Header>Edit Gender</Dialog.Header>
// {/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> // <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
{admin && ( // {admin && (
<> // <>
<FormGroup isRequired label="Id"> // <FormGroup isRequired label="Id">
<Text>{dataGender?.id}</Text> // <Text>{dataGender?.id}</Text>
</FormGroup> // </FormGroup>
{countTracksOnAGender !== 0 && ( // {countTracksOnAGender !== 0 && (
<Flex paddingLeft="14px"> // <Flex paddingLeft="14px">
<MdWarning color="red.600" /> // <MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold"> // <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove gender {countTracksOnAGender} track(s) depend // Can not remove gender {countTracksOnAGender} track(s) depend
on it. // on it.
</Text> // </Text>
</Flex> // </Flex>
)} // )}
<FormGroup label="Action(s):"> // <FormGroup label="Action(s):">
<Button // <Button
onClick={disclosure.onOpen} // onClick={disclosure.onOpen}
marginRight="auto" // marginRight="auto"
theme="@danger" // theme="@danger"
disabled={countTracksOnAGender !== 0} // disabled={countTracksOnAGender !== 0}
> // >
<MdDeleteForever /> Remove gender // <MdDeleteForever /> Remove gender
</Button> // </Button>
</FormGroup> // </FormGroup>
<ConfirmPopUp // <ConfirmPopUp
disclosure={disclosure} // disclosure={disclosure}
title="Remove gender" // title="Remove gender"
body={`Remove gender [${dataGender?.id}] ${dataGender?.name}`} // body={`Remove gender [${dataGender?.id}] ${dataGender?.name}`}
confirmTitle="Remove" // confirmTitle="Remove"
onConfirm={onRemove} // onConfirm={onRemove}
/> // />
</> // </>
)} // )}
{!admin && ( // {!admin && (
<> // <>
<FormInput // <FormInput
form={form} // form={form}
variableName="name" // variableName="name"
isRequired // isRequired
label="Gender name" // label="Gender name"
ref={initialRef} // ref={initialRef}
/> // />
<FormTextarea // <FormTextarea
form={form} // form={form}
variableName="description" // variableName="description"
label="Description" // label="Description"
/> // />
<FormCovers // <FormCovers
form={form} // form={form}
variableName="covers" // variableName="covers"
onFilesSelected={onFilesSelected} // onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected} // onUriSelected={onUriSelected}
onRemove={onRemoveCover} // onRemove={onRemoveCover}
/> // />
</> // </>
)} // )}
</DialogBody> // </Dialog.Body>
<DialogFooter> // <Dialog.Footer>
<Button // <Button
onClick={() => setAdmin((value) => !value)} // onClick={() => setAdmin((value) => !value)}
marginRight="auto" // marginRight="auto"
> // >
{admin ? ( // {admin ? (
<> // <>
<MdEdit /> // <MdEdit />
Edit // Edit
</> // </>
) : ( // ) : (
<> // <>
<MdAdminPanelSettings /> // <MdAdminPanelSettings />
Admin // Admin
</> // </>
)} // )}
</Button> // </Button>
{!admin && form.isFormModified && ( // {!admin && form.isFormModified && (
<Button colorScheme="blue" mr={3} onClick={onSave}> // <Button colorScheme="blue" mr={3} onClick={onSave}>
Save // Save
</Button> // </Button>
)} // )}
<Button onClick={onClose}>Cancel</Button> // <Button onClick={onClose}>Cancel</Button>
</DialogFooter> // </Dialog.Footer>
</DialogContent> // </Dialog.Content>
</DialogRoot> // </Dialog.Root>
); // );
}; };

128
front/src/components/popup/PopUpUploadProgress.tsx
View File

@ -1,13 +1,5 @@
import { useRef } from 'react'; import { useRef } from 'react';
import {
Flex,
Progress,
Text,
} from '@chakra-ui/react';
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
import { Button } from '../ui/themed';
export type PopUpUploadProgressProps = { export type PopUpUploadProgressProps = {
title: string; title: string;
@ -40,64 +32,66 @@ export const PopUpUploadProgress = ({
}: PopUpUploadProgressProps) => { }: PopUpUploadProgressProps) => {
const initialRef = useRef<HTMLButtonElement>(null); const initialRef = useRef<HTMLButtonElement>(null);
const finalRef = useRef<HTMLButtonElement>(null); const finalRef = useRef<HTMLButtonElement>(null);
return ( return <></>;
<DialogRoot
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
onOpenChange={onClose}
open={true}
data-testid="upload-progress-edit-pop-up"
>
{/* <DialogOverlay /> */}
<DialogContent>
<DialogHeader>{title}</DialogHeader>
{/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} paddingLeft="18px"> // return (
<Flex direction="column" gap="10px"> // <Dialog.Root
{isFinished ? ( // //initialFocusRef={initialRef}
<Text fontSize="20px" fontWeight="bold"> // //finalFocusRef={finalRef}
All {elements.length} element have been sent // //closeOnOverlayClick={false}
</Text> // onOpenChange={onClose}
) : ( // open={true}
<Text fontSize="20px" fontWeight="bold"> // data-testid="upload-progress-edit-pop-up"
[{index + 1}/{elements.length}] {elements[index]} // >
</Text> // {/* <DialogOverlay /> */}
)} // <Dialog.Content>
<Progress.Root // <Dialog.Header>{title}</Dialog.Header>
colorScheme="green" // {/* <DialogCloseButton ref={finalRef} /> */}
striped
value={currentSize} // <Dialog.Body pb={6} paddingLeft="18px">
animated // <Flex direction="column" gap="10px">
max={totalSize} // {isFinished ? (
height="24px" // <Text fontSize="20px" fontWeight="bold">
/> // All {elements.length} element have been sent
<Flex> // </Text>
<Text>{currentSize.toLocaleString('fr-FR')} Bytes</Text> // ) : (
<Text marginLeft="auto"> // <Text fontSize="20px" fontWeight="bold">
{totalSize.toLocaleString('fr-FR')} Bytes // [{index + 1}/{elements.length}] {elements[index]}
</Text> // </Text>
</Flex> // )}
{error && ( // <Progress.Root
<Text fontWeight="bold" color="darkred"> // colorScheme="green"
{error} // striped
</Text> // value={currentSize}
)} // animated
</Flex> // max={totalSize}
</DialogBody> // height="24px"
<DialogFooter> // />
{isFinished ? ( // <Flex>
<Button onClick={onClose} theme="@success"> // <Text>{currentSize.toLocaleString('fr-FR')} Bytes</Text>
Ok // <Text marginLeft="auto">
</Button> // {totalSize.toLocaleString('fr-FR')} Bytes
) : ( // </Text>
<Button colorScheme="red" mr={3} onClick={onAbort} ref={initialRef}> // </Flex>
Abort // {error && (
</Button> // <Text fontWeight="bold" color="darkred">
)} // {error}
</DialogFooter> // </Text>
</DialogContent> // )}
</DialogRoot> // </Flex>
); // </Dialog.Body>
// <Dialog.Footer>
// {isFinished ? (
// <Button onClick={onClose} theme="@success">
// Ok
// </Button>
// ) : (
// <Button colorScheme="red" mr={3} onClick={onAbort} ref={initialRef}>
// Abort
// </Button>
// )}
// </Dialog.Footer>
// </Dialog.Content>
// </Dialog.Root>
// );
}; };

231
front/src/components/popup/TrackEditPopUp.tsx
View File

@ -1,11 +1,5 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import {
Text,
useDisclosure,
} from '@chakra-ui/react';
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
import { MdAdminPanelSettings, MdDeleteForever, MdEdit } from 'react-icons/md'; import { MdAdminPanelSettings, MdDeleteForever, MdEdit } from 'react-icons/md';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
@ -25,7 +19,7 @@ import { useOrderedGenders } from '@/service/Gender';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';
import { useSpecificTrack, useTrackService } from '@/service/Track'; import { useSpecificTrack, useTrackService } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Button } from '../ui/themed'; import { useDisclosure } from '@/utils/disclosure';
export type TrackEditPopUpProps = {}; export type TrackEditPopUpProps = {};
@ -86,116 +80,117 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
}) })
); );
}; };
return ( return <></>;
<DialogRoot // return (
//initialFocusRef={initialRef} // <Dialog.Root
//finalFocusRef={finalRef} // //initialFocusRef={initialRef}
//closeOnOverlayClick={false} // //finalFocusRef={finalRef}
onOpenChange={onClose} // //closeOnOverlayClick={false}
open={true} // onOpenChange={onClose}
data-testid="track-edit-pop-up" // open={true}
> // data-testid="track-edit-pop-up"
{/* <DialogOverlay /> */} // >
<DialogContent> // {/* <DialogOverlay /> */}
<DialogHeader>Edit Track</DialogHeader> // <Dialog.Content>
{/* <DialogCloseButton ref={finalRef} /> */} // <Dialog.Header>Edit Track</Dialog.Header>
// {/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> // <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
{admin && ( // {admin && (
<> // <>
<FormGroup isRequired label="Id"> // <FormGroup isRequired label="Id">
<Text>{dataTrack?.id}</Text> // <Text>{dataTrack?.id}</Text>
</FormGroup> // </FormGroup>
<FormGroup label="Data Id"> // <FormGroup label="Data Id">
<Text>{dataTrack?.dataId}</Text> // <Text>{dataTrack?.dataId}</Text>
</FormGroup> // </FormGroup>
<FormGroup label="Action(s):"> // <FormGroup label="Action(s):">
<Button // <Button
onClick={disclosure.onOpen} // onClick={disclosure.onOpen}
marginRight="auto" // marginRight="auto"
theme="@danger" // theme="@danger"
> // >
<MdDeleteForever /> Remove Media // <MdDeleteForever /> Remove Media
</Button> // </Button>
</FormGroup> // </FormGroup>
<ConfirmPopUp // <ConfirmPopUp
disclosure={disclosure} // disclosure={disclosure}
title="Remove track" // title="Remove track"
body={`Remove Media [${dataTrack?.id}] ${dataTrack?.name}`} // body={`Remove Media [${dataTrack?.id}] ${dataTrack?.name}`}
confirmTitle="Remove" // confirmTitle="Remove"
onConfirm={onRemove} // onConfirm={onRemove}
/> // />
</> // </>
)} // )}
{!admin && ( // {!admin && (
<> // <>
<FormInput // <FormInput
form={form} // form={form}
variableName="name" // variableName="name"
isRequired // isRequired
label="Title" // label="Title"
ref={initialRef} // ref={initialRef}
/> // />
<FormTextarea // <FormTextarea
form={form} // form={form}
variableName="description" // variableName="description"
label="Description" // label="Description"
/> // />
<FormSelect // <FormSelect
form={form} // form={form}
variableName="genderId" // variableName="genderId"
options={dataGenders} // options={dataGenders}
label="Gender" // label="Gender"
/> // />
<FormSelectMultiple // <FormSelectMultiple
form={form} // form={form}
variableName="artists" // variableName="artists"
options={dataArtist} // options={dataArtist}
label="Artist(s)" // label="Artist(s)"
/> // />
<FormSelect // <FormSelect
form={form} // form={form}
variableName="albumId" // variableName="albumId"
options={dataAlbums} // options={dataAlbums}
label="Album" // label="Album"
/> // />
<FormNumber // <FormNumber
form={form} // form={form}
variableName="track" // variableName="track"
label="Track n°" // label="Track n°"
step={1} // step={1}
//defaultValue={0} // //defaultValue={0}
min={0} // min={0}
max={1000} // max={1000}
/> // />
</> // </>
)} // )}
</DialogBody> // </Dialog.Body>
<DialogFooter> // <Dialog.Footer>
<Button // <Button
onClick={() => setAdmin((value) => !value)} // onClick={() => setAdmin((value) => !value)}
marginRight="auto" // marginRight="auto"
> // >
{admin ? ( // {admin ? (
<> // <>
<MdEdit /> // <MdEdit />
Edit // Edit
</> // </>
) : ( // ) : (
<> // <>
<MdAdminPanelSettings /> // <MdAdminPanelSettings />
Admin // Admin
</> // </>
)} // )}
</Button> // </Button>
{!admin && form.isFormModified && ( // {!admin && form.isFormModified && (
<Button colorScheme="blue" mr={3} onClick={onSave}> // <Button colorScheme="blue" mr={3} onClick={onSave}>
Save // Save
</Button> // </Button>
)} // )}
<Button onClick={onClose}>Cancel</Button> // <Button onClick={onClose}>Cancel</Button>
</DialogFooter> // </Dialog.Footer>
</DialogContent> // </Dialog.Content>
</DialogRoot> // </Dialog.Root>
); // );
}; };

63
front/src/components/select/SelectList.tsx
View File

@ -1,9 +1,9 @@
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { Box, Button, Flex, Text } from '@chakra-ui/react';
import { MdAdd } from 'react-icons/md'; import { MdAdd } from 'react-icons/md';
import { isNullOrUndefined, isNumber } from '@/utils/validator'; import { isNullOrUndefined, isNumber } from '@/utils/validator';
import { Button, Flex, Text } from '@/ui';
export type SelectListModel = { export type SelectListModel = {
id: any; id: any;
@ -65,56 +65,65 @@ export const SelectList = ({
} }
}, []); }, []);
return ( return (
<Box position="relative"> <Flex style={{ position: "relative" }}>
<Flex <Flex
direction="column" direction="column"
width="full" style={{
position="absolute" width: "100%",
border="1px" position: "absolute",
borderColor="black" border: "1px",
backgroundColor="gray.700" borderColor: "black",
overflowY="auto" background: "gray.700",
overflowX="hidden" overflowY: "auto",
maxHeight="300px" overflowX: "hidden",
zIndex={300} maxHeight: "300px",
transform="translateY(1px)" zIndex: 300,
transform: "translateY(1px)",
}}
> >
{displayedValue.length === 0 && ( {displayedValue.length === 0 && (
<Text marginX="auto" color="red.500" fontWeight="bold" marginY="10px"> <Text fontWeight="bold" color="red.500" style={{ margin: "0 auto" }}>
... No element found... ... No element found...
</Text> </Text>
)} )}
{displayedValue.map((data) => ( {displayedValue.map((data) => (
<Button <Button
key={data.id} key={data.id}
marginY="1px" style={{
borderRadius="0px" margin: "1px 0",
autoFocus={false} borderRadius: "0px",
backgroundColor={data.isSelected ? 'green.800' : '0x00000000'} //autoFocus: false,
_hover={{ backgroundColor: 'gray.400' }} background: data.isSelected ? 'green.800' : '0x00000000',
//_hover={ background: 'gray.400' },
}}
onClick={() => onSelectValue(data)} onClick={() => onSelectValue(data)}
ref={data.isSelected ? scrollToRef : undefined} //ref={data.isSelected ? scrollToRef : undefined}
> >
<Text marginRight="auto" autoFocus={false}> <Text style={{ margin: "0 auto", }} /*autoFocus={false}*/>
{data.name} {data.name}
</Text> </Text>
</Button> </Button>
))} ))}
{onCreate && search && search.length > 0 && ( {onCreate && search && search.length > 0 && (
<Button <Button
marginY="1px" style={{
borderRadius="0px" margin: "1px 0",
autoFocus={false} borderRadius: "0px",
_hover={{ backgroundColor: 'gray.400' }} //autoFocus:false,
//_hover={ background: 'gray.400' }
}}
onClick={() => onCreate(search)} onClick={() => onCreate(search)}
> >
<Flex marginRight="auto"> <Flex
style={{
margin: "0 auto",
}}>
<MdAdd /> <MdAdd />
<Text autoFocus={false}>Create '{search}'</Text> <Text /*autoFocus={false}*/>Create '{search}'</Text>
</Flex> </Flex>
</Button> </Button>
)} )}
</Flex> </Flex>
</Box> </Flex>
); );
}; };

41
front/src/components/select/SelectMultiple.tsx
View File

@ -1,18 +1,10 @@
import { RefObject, useEffect, useMemo, useRef, useState } from 'react'; import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
import {
Button,
Flex,
HStack,
Input,
Spinner,
Tag,
TagLabel,
} from '@chakra-ui/react';
import { MdEdit, MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md'; import { MdEdit, MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
import { SelectList, SelectListModel } from '@/components/select/SelectList'; import { SelectList, SelectListModel } from '@/components/select/SelectList';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Button, Flex, HStack, Input } from '@/ui';
export type SelectMultipleProps = { export type SelectMultipleProps = {
options?: object[]; options?: object[];
@ -83,7 +75,7 @@ export const SelectMultiple = ({
} }
}; };
if (!options) { if (!options) {
return <Spinner />; return <></>;// TODO: <Spinner />;
} }
const onChangeInput = (value: string): void => { const onChangeInput = (value: string): void => {
setHasSuggestion(false); setHasSuggestion(false);
@ -107,21 +99,21 @@ export const SelectMultiple = ({
}; };
return ( return (
<Flex direction="column" width="full" gap="0px"> <Flex direction="column" width="100%" gap="0px">
{selectedOptions && ( {selectedOptions && (
<HStack wrap="wrap" /*spacing="5px"*/ justify="left" width="full" marginBottom="2px"> <HStack style={{ flexWrap: "wrap", /*spacing="5px"*/ justifyContent: "left", width: "100%", marginBottom: "2px" }}>
{selectedOptions.map((data) => ( {selectedOptions.map((data) => (
<Flex align="flex-start" key={data[keyKey]}> <Flex align="flex-start" key={data[keyKey]}>
<Tag.Root {/* <Tag.Root
size="md" size="md"
key="md" key="md"
borderRadius="5px" borderRadius="5px"
variant="solid" variant="solid"
backgroundColor="green.500" background="green.500"
> >
<Tag.Label>{data[keyValue] ?? `id=${data[keyKey]}`}</Tag.Label> <Tag.Label>{data[keyValue] ?? `id=${data[keyKey]}`}</Tag.Label>
<Tag.CloseTrigger onClick={() => selectValue(data)} /> <Tag.CloseTrigger onClick={() => selectValue(data)} />
</Tag.Root> </Tag.Root> */}
</Flex> </Flex>
))} ))}
</HStack> </HStack>
@ -130,19 +122,24 @@ export const SelectMultiple = ({
<Flex> <Flex>
<Input <Input
ref={refFocus} ref={refFocus}
width="full" style={{
width: "100%",
borderRadius: "5px 0 0 5px",
}}
onChange={(e) => onChangeInput(e.target.value)} onChange={(e) => onChangeInput(e.target.value)}
//onSubmit={onSubmit} //onSubmit={onSubmit}
onFocus={() => setShowList(true)} // TODO: onFocus={() => setShowList(true)}
onBlur={() => setTimeout(() => setShowList(false), 200)} // TODO: onBlur={() => setTimeout(() => setShowList(false), 200)}
value={showList ? (currentSearch ?? '') : hasSuggestion ? `suggest: ${currentSearch}` : ''} value={showList ? (currentSearch ?? '') : hasSuggestion ? `suggest: ${currentSearch}` : ''}
borderRadius="5px 0 0 5px"
/> />
<Button <Button
onClick={onOpenClose} onClick={onOpenClose}
variant="outline" //variant="outline"
borderRadius="0 5px 5px 0" style={{
borderWidth="1px 1px 1px 0" borderRadius: "0 5px 5px 0",
borderWidth: "1px 1px 1px 0",
}}
> >
{showList ? ( {showList ? (
<MdKeyboardArrowUp color="gray.300" /> <MdKeyboardArrowUp color="gray.300" />

69
front/src/components/select/SelectSingle.tsx
View File

@ -1,6 +1,5 @@
import { RefObject, useEffect, useMemo, useRef, useState } from 'react'; import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
import { Button, Flex, Input, Spinner } from '@chakra-ui/react';
import { import {
MdClose, MdClose,
MdEdit, MdEdit,
@ -10,6 +9,7 @@ import {
import { SelectList, SelectListModel } from '@/components/select/SelectList'; import { SelectList, SelectListModel } from '@/components/select/SelectList';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Button, Flex, Input } from '@/ui';
export type SelectSingleProps = { export type SelectSingleProps = {
options?: object[]; options?: object[];
@ -70,7 +70,7 @@ export const SelectSingle = ({
} }
}; };
if (!transformedOption) { if (!transformedOption) {
return <Spinner />; return <></>; // TODO: <Spinner />;
} }
function onChangeInput(value: string): void { function onChangeInput(value: string): void {
setHasSuggestion(false); setHasSuggestion(false);
@ -101,48 +101,53 @@ export const SelectSingle = ({
}; };
return ( return (
<Flex direction="column" width="full" gap="0px"> <Flex direction="column" width="100%" gap="0px">
<Flex> <Flex>
<Input <Input
ref={refFocus} ref={refFocus}
width="full" style={{
width: "100%",
background: showList || !selectedOptions ? undefined : 'green.500',
borderRadius: "5px 0 0 5px",
}}
onChange={(e) => onChangeInput(e.target.value)} onChange={(e) => onChangeInput(e.target.value)}
onFocus={() => setShowList(true)} //onFocus={() => setShowList(true)}
onBlur={() => setTimeout(() => setShowList(false), 200)} //onBlur={() => setTimeout(() => setShowList(false), 200)}
value={ value={
showList ? (currentSearch ?? '') : (selectedOptions?.name ?? (hasSuggestion ? `suggest: ${currentSearch}` : '')) showList ? (currentSearch ?? '') : (selectedOptions?.name ?? (hasSuggestion ? `suggest: ${currentSearch}` : ''))
} }
backgroundColor={
showList || !selectedOptions ? undefined : 'green.500'
}
borderRadius="5px 0 0 5px"
/> />
<Button <Button
onClick={onRemoveItem} onClick={onRemoveItem}
variant="outline" // TODO: variant="outline"
borderRadius="0 5px 5px 0" style={{
borderWidth="1px 1px 1px 0" borderRadius: "0 5px 5px 0",
borderWidth: "1px 1px 1px 0",
}}
> >
{selectedOptions ? ( {
<MdClose color="gray.300" /> selectedOptions ? (
) : showList ? ( <MdClose color="gray.300" />
<MdKeyboardArrowUp color="gray.300" /> ) : showList ? (
) : hasSuggestion ? ( <MdKeyboardArrowUp color="gray.300" />
<MdEdit color="gray.300" /> ) : hasSuggestion ? (
) : ( <MdEdit color="gray.300" />
<MdKeyboardArrowDown color="gray.300" /> ) : (
)} <MdKeyboardArrowDown color="gray.300" />
)}
</Button> </Button>
</Flex> </Flex>
{showList && ( {
<SelectList showList && (
options={transformedOption} <SelectList
selected={selectedOptions ? [selectedOptions] : []} options={transformedOption}
search={currentSearch} selected={selectedOptions ? [selectedOptions] : []}
onSelectValue={selectValue} search={currentSearch}
onCreate={createNewItem} onSelectValue={selectValue}
/> onCreate={createNewItem}
)} />
</Flex> )
}
</Flex >
); );
}; };

31
front/src/components/track/DisplayTrack.tsx
View File

@ -1,10 +1,10 @@
import { Flex, Text } from '@chakra-ui/react';
import { LuMusic2, LuPlay } from 'react-icons/lu';
import { Track } from '@/back-api'; import { Track } from '@/back-api';
import { Covers } from '@/components/Cover'; import { Covers } from '@/components/Cover';
import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu'; import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu';
import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { Flex, Span } from '@/ui';
export type DisplayTrackProps = { export type DisplayTrackProps = {
track: Track; track: Track;
@ -18,7 +18,7 @@ export const DisplayTrack = ({
}: DisplayTrackProps) => { }: DisplayTrackProps) => {
const { trackActive } = useActivePlaylistService(); const { trackActive } = useActivePlaylistService();
return ( return (
<Flex direction="row" width="full" height="full"> <Flex direction="row" width="100%" height="full">
<Covers <Covers
data={track?.covers} data={track?.covers}
size="50" size="50"
@ -30,26 +30,29 @@ export const DisplayTrack = ({
/> />
<Flex <Flex
direction="column" direction="column"
width="full" width="100%"
height="full" height="full"
paddingLeft="5px" paddingLeft="5px"
overflowX="hidden" style={{
overflowX: "hidden",
}}
onClick={onClick} onClick={onClick}
> >
<Text <Span
as="span"
alignContent="left"
fontSize="20px" fontSize="20px"
fontWeight="bold" fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
// TODO: noOfLines={[1, 2]}
marginY="auto"
color={trackActive?.id === track.id ? 'green.700' : undefined} color={trackActive?.id === track.id ? 'green.700' : undefined}
style={{
alignContent: "left",
userSelect: "none",
marginRight: "auto",
overflow: "hidden",
// TODO: noOfLines={[1, 2]}
margin: "auto 0",
}}
> >
[{track.track}] {track.name} [{track.track}] {track.name}
</Text> </Span>
</Flex> </Flex>
<ContextMenu elements={contextMenu} /> <ContextMenu elements={contextMenu} />
</Flex> </Flex>

91
front/src/components/track/DisplayTrackFull.tsx
View File

@ -1,7 +1,4 @@
import { Suspense } from 'react';
import { Flex, Text } from '@chakra-ui/react';
import { LuMusic2, LuPlay } from 'react-icons/lu';
import { Track } from '@/back-api'; import { Track } from '@/back-api';
import { Covers } from '@/components/Cover'; import { Covers } from '@/components/Cover';
@ -10,6 +7,7 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album'; import { useSpecificAlbum } from '@/service/Album';
import { useSpecificArtists } from '@/service/Artist'; import { useSpecificArtists } from '@/service/Artist';
import { useSpecificGender } from '@/service/Gender'; import { useSpecificGender } from '@/service/Gender';
import { Flex, Span } from '@/ui';
export type DisplayTrackProps = { export type DisplayTrackProps = {
track: Track; track: Track;
@ -26,7 +24,7 @@ export const DisplayTrackFull = ({
const { dataGender } = useSpecificGender(track?.genderId); const { dataGender } = useSpecificGender(track?.genderId);
const { dataArtists } = useSpecificArtists(track?.artists); const { dataArtists } = useSpecificArtists(track?.artists);
return ( return (
<Flex direction="row" width="full" height="full" <Flex direction="row" width="100%" height="full"
data-testid="display-track-full"> data-testid="display-track-full">
<Covers <Covers
data={track?.covers} data={track?.covers}
@ -39,72 +37,81 @@ export const DisplayTrackFull = ({
/> />
<Flex <Flex
direction="column" direction="column"
width="full" width="100%"
height="full" height="full"
paddingLeft="5px" paddingLeft="5px"
overflowX="hidden"
onClick={onClick} onClick={onClick}
style={{
overflowX: "hidden",
}}
> >
<Text <Span
as="span"
alignContent="left"
fontSize="20px" fontSize="20px"
fontWeight="bold" fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
// TODO: noOfLines={1}
color={trackActive?.id === track.id ? 'green.700' : undefined} color={trackActive?.id === track.id ? 'green.700' : undefined}
style={{
alignContent: "left",
userSelect: "none",
marginRight: "auto",
overflow: "hidden",
// TODO: noOfLines={1}
margin: "auto 0",
}}
> >
{track.name} {track.track && ` [${track.track}]`} {track.name} {track.track && ` [${track.track}]`}
</Text> </Span>
{dataAlbum && ( {dataAlbum && (
<Text <Span
as="span"
alignContent="left"
fontSize="15px" fontSize="15px"
fontWeight="bold" fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
//noOfLines={1} //noOfLines={1}
marginY="auto"
color={trackActive?.id === track.id ? 'green.700' : undefined} color={trackActive?.id === track.id ? 'green.700' : undefined}
style={{
alignContent: "left",
userSelect: "none",
marginRight: "auto",
overflow: "hidden",
// TODO: noOfLines={[1, 2]}
margin: "auto 0",
}}
> >
<Text as="span" fontWeight="normal">Album:</Text> {dataAlbum.name} <Span fontWeight="normal">Album:</Span> {dataAlbum.name}
</Text> </Span>
)} )}
{dataArtists && ( {dataArtists && (
<Text <Span
as="span"
alignContent="left"
fontSize="15px" fontSize="15px"
fontWeight="bold" fontWeight="bold"
userSelect="none" userSelect="none"
marginRight="auto"
overflow="hidden"
//noOfLines={1}
marginY="auto"
color={trackActive?.id === track.id ? 'green.700' : undefined} color={trackActive?.id === track.id ? 'green.700' : undefined}
style={{
alignContent: "left",
userSelect: "none",
marginRight: "auto",
overflow: "hidden",
// TODO: noOfLines={[1, 2]}
margin: "auto 0",
}}
> >
<Text as="span" fontWeight="normal">Artist(s):</Text> {dataArtists.map((data) => data.name).join(', ')} <Span fontWeight="normal">Artist(s):</Span> {dataArtists.map((data) => data.name).join(', ')}
</Text> </Span>
)} )}
{dataGender && ( {dataGender && (
<Text <Span
as="span"
alignContent="left"
fontSize="15px" fontSize="15px"
fontWeight="bold" fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
//noOfLines={1}
marginY="auto"
color={trackActive?.id === track.id ? 'green.700' : undefined} color={trackActive?.id === track.id ? 'green.700' : undefined}
style={{
alignContent: "left",
userSelect: "none",
marginRight: "auto",
overflow: "hidden",
// TODO: noOfLines={[1, 2]}
margin: "auto 0",
}}
> >
<Text as="span" fontWeight="normal">Gender:</Text> {dataGender.name} <Span fontWeight="normal">Gender:</Span> {dataGender.name}
</Text> </Span>
)} )}
</Flex> </Flex>
<ContextMenu elements={contextMenu} <ContextMenu elements={contextMenu}

1
front/src/components/track/DisplayTrackFullId.tsx
View File

@ -1,5 +1,4 @@
import { Track } from '@/back-api'; import { Track } from '@/back-api';
import { Covers } from '@/components/Cover';
import { MenuElement } from '@/components/contextMenu/ContextMenu'; import { MenuElement } from '@/components/contextMenu/ContextMenu';
import { useSpecificTrack } from '@/service/Track'; import { useSpecificTrack } from '@/service/Track';
import { DisplayTrackFull } from './DisplayTrackFull'; import { DisplayTrackFull } from './DisplayTrackFull';

15
front/src/components/track/DisplayTrackSkeleton.tsx
View File

@ -1,21 +1,24 @@
import { Flex, Skeleton } from '@chakra-ui/react'; import { Flex } from "@/ui";
export const DisplayTrackSkeleton = () => { export const DisplayTrackSkeleton = () => {
return ( return (
<Flex direction="row" width="full" height="full"> <Flex direction="row" width="100%" height="full">
<Skeleton {/* <Skeleton
borderRadius="0px" borderRadius="0px"
height="50" height="50"
width="50" width="50"
minWidth="50" minWidth="50"
minHeight="50" minHeight="50"
/> /> */}
<Flex <Flex
direction="column" direction="column"
width="full" width="100%"
height="full" height="full"
paddingLeft="5px" paddingLeft="5px"
overflowX="hidden" style={{
overflowX: "hidden"
}}
> >
{/* <SkeletonText {/* <SkeletonText
skeletonHeight="20px" skeletonHeight="20px"

17
front/src/components/ui/close-button.tsx
View File

@ -1,17 +0,0 @@
import type { ButtonProps } from "@chakra-ui/react"
import { IconButton as ChakraIconButton } from "@chakra-ui/react"
import * as React from "react"
import { LuX } from "react-icons/lu"
export type CloseButtonProps = ButtonProps
export const CloseButton = React.forwardRef<
HTMLButtonElement,
CloseButtonProps
>(function CloseButton(props, ref) {
return (
<ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
{props.children ?? <LuX />}
</ChakraIconButton>
)
})

29
front/src/components/ui/color-mode.tsx
View File

@ -1,29 +0,0 @@
"use client"
import { ThemeProvider, useTheme, ThemeProviderProps } from "next-themes"
export interface ColorModeProviderProps extends ThemeProviderProps { }
export function ColorModeProvider(props: ColorModeProviderProps) {
return (
<ThemeProvider attribute="class" themes={['pink', 'dark', 'light']} disableTransitionOnChange {...props} />
)
}
export function useColorMode() {
const { resolvedTheme, setTheme } = useTheme()
const toggleColorMode = () => {
console.log(`plop: ${resolvedTheme}`);
setTheme(resolvedTheme === "light" ? "pink" : resolvedTheme === "pink" ? "dark" : "light")
}
return {
colorMode: resolvedTheme,
setColorMode: setTheme,
toggleColorMode,
}
}
export function useColorModeValue<T>(light: T, dark: T) {
const { colorMode } = useColorMode()
return colorMode === "light" ? light : dark
}

62
front/src/components/ui/dialog.tsx
View File

@ -1,62 +0,0 @@
import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
import { CloseButton } from "./close-button"
import * as React from "react"
interface DialogContentProps extends ChakraDialog.ContentProps {
portalled?: boolean
portalRef?: React.RefObject<HTMLElement>
backdrop?: boolean
}
export const DialogContent = React.forwardRef<
HTMLDivElement,
DialogContentProps
>(function DialogContent(props, ref) {
const {
children,
portalled = true,
portalRef,
backdrop = true,
...rest
} = props
return (
<Portal disabled={!portalled} container={portalRef}>
{backdrop && <ChakraDialog.Backdrop />}
<ChakraDialog.Positioner>
<ChakraDialog.Content ref={ref} {...rest} asChild={false}>
{children}
</ChakraDialog.Content>
</ChakraDialog.Positioner>
</Portal>
)
})
export const DialogCloseTrigger = React.forwardRef<
HTMLButtonElement,
ChakraDialog.CloseTriggerProps
>(function DialogCloseTrigger(props, ref) {
return (
<ChakraDialog.CloseTrigger
position="absolute"
top="2"
insetEnd="2"
{...props}
asChild
>
<CloseButton size="sm" ref={ref}>
{props.children}
</CloseButton>
</ChakraDialog.CloseTrigger>
)
})
export const DialogRoot = ChakraDialog.Root
export const DialogFooter = ChakraDialog.Footer
export const DialogHeader = ChakraDialog.Header
export const DialogBody = ChakraDialog.Body
export const DialogBackdrop = ChakraDialog.Backdrop
export const DialogTitle = ChakraDialog.Title
export const DialogDescription = ChakraDialog.Description
export const DialogTrigger = ChakraDialog.Trigger
export const DialogActionTrigger = ChakraDialog.ActionTrigger

52
front/src/components/ui/drawer.tsx
View File

@ -1,52 +0,0 @@
import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"
import { CloseButton } from "./close-button"
import * as React from "react"
interface DrawerContentProps extends ChakraDrawer.ContentProps {
portalled?: boolean
portalRef?: React.RefObject<HTMLElement>
offset?: ChakraDrawer.ContentProps["padding"]
}
export const DrawerContent = React.forwardRef<
HTMLDivElement,
DrawerContentProps
>(function DrawerContent(props, ref) {
const { children, portalled = true, portalRef, offset, ...rest } = props
return (
<Portal disabled={!portalled} container={portalRef}>
<ChakraDrawer.Positioner padding={offset}>
<ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
{children}
</ChakraDrawer.Content>
</ChakraDrawer.Positioner>
</Portal>
)
})
export const DrawerCloseTrigger = React.forwardRef<
HTMLButtonElement,
ChakraDrawer.CloseTriggerProps
>(function DrawerCloseTrigger(props, ref) {
return (
<ChakraDrawer.CloseTrigger
position="absolute"
top="2"
insetEnd="2"
{...props}
asChild
>
<CloseButton size="sm" ref={ref} />
</ChakraDrawer.CloseTrigger>
)
})
export const DrawerTrigger = ChakraDrawer.Trigger
export const DrawerRoot = ChakraDrawer.Root
export const DrawerFooter = ChakraDrawer.Footer
export const DrawerHeader = ChakraDrawer.Header
export const DrawerBody = ChakraDrawer.Body
export const DrawerBackdrop = ChakraDrawer.Backdrop
export const DrawerDescription = ChakraDrawer.Description
export const DrawerTitle = ChakraDrawer.Title
export const DrawerActionTrigger = ChakraDrawer.ActionTrigger

110
front/src/components/ui/menu.tsx
View File

@ -1,110 +0,0 @@
"use client"
import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
import * as React from "react"
import { LuCheck, LuChevronRight } from "react-icons/lu"
interface MenuContentProps extends ChakraMenu.ContentProps {
portalled?: boolean
portalRef?: React.RefObject<HTMLElement>
}
export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
function MenuContent(props, ref) {
const { portalled = true, portalRef, ...rest } = props
return (
<Portal disabled={!portalled} container={portalRef}>
<ChakraMenu.Positioner>
<ChakraMenu.Content ref={ref} {...rest} />
</ChakraMenu.Positioner>
</Portal>
)
},
)
export const MenuArrow = React.forwardRef<
HTMLDivElement,
ChakraMenu.ArrowProps
>(function MenuArrow(props, ref) {
return (
<ChakraMenu.Arrow ref={ref} {...props}>
<ChakraMenu.ArrowTip />
</ChakraMenu.Arrow>
)
})
export const MenuCheckboxItem = React.forwardRef<
HTMLDivElement,
ChakraMenu.CheckboxItemProps
>(function MenuCheckboxItem(props, ref) {
return (
<ChakraMenu.CheckboxItem ref={ref} {...props}>
<ChakraMenu.ItemIndicator hidden={false}>
<LuCheck />
</ChakraMenu.ItemIndicator>
{props.children}
</ChakraMenu.CheckboxItem>
)
})
export const MenuRadioItem = React.forwardRef<
HTMLDivElement,
ChakraMenu.RadioItemProps
>(function MenuRadioItem(props, ref) {
const { children, ...rest } = props
return (
<ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
<AbsoluteCenter axis="horizontal" left="4" asChild>
<ChakraMenu.ItemIndicator>
<LuCheck />
</ChakraMenu.ItemIndicator>
</AbsoluteCenter>
<ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
</ChakraMenu.RadioItem>
)
})
export const MenuItemGroup = React.forwardRef<
HTMLDivElement,
ChakraMenu.ItemGroupProps
>(function MenuItemGroup(props, ref) {
const { title, children, ...rest } = props
return (
<ChakraMenu.ItemGroup ref={ref} {...rest}>
{title && (
<ChakraMenu.ItemGroupLabel userSelect="none">
{title}
</ChakraMenu.ItemGroupLabel>
)}
{children}
</ChakraMenu.ItemGroup>
)
})
export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
startIcon?: React.ReactNode
}
export const MenuTriggerItem = React.forwardRef<
HTMLDivElement,
MenuTriggerItemProps
>(function MenuTriggerItem(props, ref) {
const { startIcon, children, ...rest } = props
return (
<ChakraMenu.TriggerItem ref={ref} {...rest}>
{startIcon}
{children}
<LuChevronRight />
</ChakraMenu.TriggerItem>
)
})
export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
export const MenuContextTrigger = ChakraMenu.ContextTrigger
export const MenuRoot = ChakraMenu.Root
export const MenuSeparator = ChakraMenu.Separator
export const MenuItem = ChakraMenu.Item
export const MenuItemText = ChakraMenu.ItemText
export const MenuItemCommand = ChakraMenu.ItemCommand
export const MenuTrigger = ChakraMenu.Trigger

7
front/src/components/ui/themed.tsx
View File

@ -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)

78
front/src/components/ui/toaster.tsx
View File

@ -1,51 +1,39 @@
"use client" "use client"
import { RestErrorResponse } from "@/back-api"; import { RestErrorResponse } from "@/back-api";
import { import { HStack } from "@/ui";
Toaster as ChakraToaster,
Portal,
Spinner,
Stack,
Toast,
createToaster,
} from "@chakra-ui/react"
export const toaster = createToaster({ // export const toaster = createToaster({
placement: "bottom-end", // placement: "bottom-end",
pauseOnPageIdle: true, // pauseOnPageIdle: true,
}) // })
export const toasterAPIError = (error: RestErrorResponse) => { // export const toasterAPIError = (error: RestErrorResponse) => {
toaster.create({ // toaster.create({
title: `[${error.status}] ${error.statusMessage}`, // title: `[${error.status}] ${error.statusMessage}`,
description: error.message, // description: error.message,
}); // });
}; // };
export const Toaster = () => { // export const Toaster = () => {
return ( // return (
<Portal> // <Portal>
<ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}> // <ArkToaster toaster={toaster}>
{(toast) => ( // {(toast) => (
<Toast.Root width={{ md: "sm" }}> // <Toast.Root>
{toast.type === "loading" ? ( // <HStack spacing="1" style={{ width: "100%" }}>
<Spinner size="sm" color="blue.solid" /> // {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
) : ( // {toast.description && (
<Toast.Indicator /> // <Toast.Description>{toast.description}</Toast.Description>
)} // )}
<Stack gap="1" flex="1" maxWidth="100%"> // </HStack>
{toast.title && <Toast.Title>{toast.title}</Toast.Title>} // {toast.action && (
{toast.description && ( // <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
<Toast.Description>{toast.description}</Toast.Description> // )}
)} // {toast.meta?.closable && <Toast.CloseTrigger />}
</Stack> // </Toast.Root>
{toast.action && ( // )}
<Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger> // </ArkToaster>
)} // </Portal>
{toast.meta?.closable && <Toast.CloseTrigger />} // )
</Toast.Root> // }
)}
</ChakraToaster>
</Portal>
)
}

28
front/src/config/dayjs.ts
View File

@ -1,28 +0,0 @@
import dayjs from 'dayjs';
import 'dayjs/locale/fr';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import dayOfYear from 'dayjs/plugin/dayOfYear';
import duration from 'dayjs/plugin/duration';
import isBetween from 'dayjs/plugin/isBetween';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isToday from 'dayjs/plugin/isToday';
import isTomorrow from 'dayjs/plugin/isTomorrow';
import isYesterday from 'dayjs/plugin/isYesterday';
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
import relativeTime from 'dayjs/plugin/relativeTime';
import weekOfYear from 'dayjs/plugin/weekOfYear';
dayjs.locale('fr');
dayjs.extend(relativeTime);
dayjs.extend(customParseFormat);
dayjs.extend(weekOfYear);
dayjs.extend(isSameOrAfter);
dayjs.extend(isToday);
dayjs.extend(isTomorrow);
dayjs.extend(isYesterday);
dayjs.extend(dayOfYear);
dayjs.extend(isBetween);
dayjs.extend(advancedFormat);
dayjs.extend(quarterOfYear);
dayjs.extend(duration);

2
front/src/config/index.ts
View File

@ -1,2 +0,0 @@
import './axios';
import './dayjs';

8
front/src/constants/genericSpacing.ts
View File

@ -1,4 +1,4 @@
export const BASE_WRAP_SPACING = { base: "5px", md: "10px", lg: "20px" }; export const BASE_WRAP_SPACING = "5px"; // { base: "5px", md: "10px", lg: "20px" };
export const BASE_WRAP_WIDTH = { base: "90%", md: "45%", lg: "270px" }; export const BASE_WRAP_WIDTH = "90%"; // { base: "90%", md: "45%", lg: "270px" };
export const BASE_WRAP_HEIGHT = { base: "75px", lg: "120px" }; export const BASE_WRAP_HEIGHT = "75px"; // { base: "75px", lg: "120px" };
export const BASE_WRAP_ICON_SIZE = { base: "50px", lg: "100px" }; export const BASE_WRAP_ICON_SIZE = "50px";// { base: "50px", lg: "100px" };

17
front/src/errors/Error401.tsx
View File

@ -1,26 +1,27 @@
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
import { MdControlCamera } from 'react-icons/md'; import { MdControlCamera } from 'react-icons/md';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { TopBar } from '@/components/TopBar/TopBar'; import { TopBar } from '@/components/TopBar/TopBar';
import { Flex, Link, Text } from '@/ui';
export const Error401 = () => { export const Error401 = () => {
return ( return (
<> <>
<TopBar /> <TopBar />
<PageLayoutInfoCenter padding="25px"> <PageLayoutInfoCenter padding="25px" width="75%">
<Center> <Flex align="center">
<MdControlCamera size="250px" color="red.600" /> <MdControlCamera size="250px" color="red.600" />
</Center> </Flex>
<Box textAlign="center"> <Flex style={{ textAlign: "center" }}>
<Heading>Erreur 401</Heading> <Text fontSize="px">Erreur 401</Text>
<Text color="red.600"> <Text color="red.600">
Vous n'êtes pas autorisé a accéder a ce contenu. Vous n'êtes pas autorisé a accéder a ce contenu.
</Text> </Text>
<Link as="a" href="/"> <Link href="/">
Retour à l'accueil Retour à l'accueil
</Link> </Link>
</Box> </Flex>
</PageLayoutInfoCenter> </PageLayoutInfoCenter>
</> </>
); );

22
front/src/errors/Error403.tsx
View File

@ -1,24 +1,26 @@
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react'; import { MdControlCamera } from 'react-icons/md';
import { MdDangerous } from 'react-icons/md';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { TopBar } from '@/components/TopBar/TopBar'; import { TopBar } from '@/components/TopBar/TopBar';
import { Flex, Link, Text } from '@/ui';
export const Error403 = () => { export const Error403 = () => {
return ( return (
<> <>
<TopBar /> <TopBar />
<PageLayoutInfoCenter padding="25px"> <PageLayoutInfoCenter padding="25px" width="75%">
<Center> <Flex align="center">
<MdDangerous size="250px" color="orange.600" /> <MdControlCamera size="250px" color="red.600" />
</Center> </Flex>
<Box textAlign="center"> <Flex style={{ textAlign: "center" }}>
<Heading>Erreur 401</Heading> <Text fontSize="px">Erreur 403</Text>
<Text color="orange.600">Cette page vous est interdite</Text> <Text color="red.600">
Cette page vous est interdite.
</Text>
<Link href="/"> <Link href="/">
Retour à l'accueil Retour à l'accueil
</Link> </Link>
</Box> </Flex>
</PageLayoutInfoCenter> </PageLayoutInfoCenter>
</> </>
); );

22
front/src/errors/Error404.tsx
View File

@ -1,26 +1,26 @@
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react'; import { MdControlCamera } from 'react-icons/md';
import { MdSignpost } from 'react-icons/md';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { TopBar } from '@/components/TopBar/TopBar'; import { TopBar } from '@/components/TopBar/TopBar';
import { Flex, Link, Text } from '@/ui';
export const Error404 = () => { export const Error404 = () => {
return ( return (
<> <>
<TopBar /> <TopBar />
<PageLayoutInfoCenter padding="25px"> <PageLayoutInfoCenter padding="25px" width="75%">
<Center> <Flex align="center">
<MdSignpost size="250px" /> <MdControlCamera size="250px" color="red.600" />
</Center> </Flex>
<Box textAlign="center"> <Flex style={{ textAlign: "center" }}>
<Heading>Erreur 404</Heading> <Text fontSize="px">Erreur 404</Text>
<Text color="gray.600"> <Text color="red.600">
Cette page n'existe plus ou l'URL a changé Cette page n'existe plus ou l'URL a changé.
</Text> </Text>
<Link href="/"> <Link href="/">
Retour à l'accueil Retour à l'accueil
</Link> </Link>
</Box> </Flex>
</PageLayoutInfoCenter> </PageLayoutInfoCenter>
</> </>
); );

32
front/src/errors/ErrorBoundary.tsx
View File

@ -1,31 +1,27 @@
import { Button, Flex, Text } from '@/ui';
import { useDisclosure } from '@/utils/disclosure';
import React, { FC } from 'react'; import React, { FC } from 'react';
import {
AlertDescription,
AlertRoot,
AlertTitle,
Box,
Collapsible,
useDisclosure,
} from '@chakra-ui/react';
import { import {
FallbackProps, FallbackProps,
ErrorBoundary as ReactErrorBoundary, ErrorBoundary as ReactErrorBoundary,
} from 'react-error-boundary'; } from 'react-error-boundary';
import { Button } from '@/components/ui/themed';
import { LuChevronUp, LuChevronDown } from 'react-icons/lu'; import { LuChevronUp, LuChevronDown } from 'react-icons/lu';
const ErrorFallback = ({ error }: FallbackProps) => { const ErrorFallback = ({ error }: FallbackProps) => {
const { open, onToggle } = useDisclosure(); const { open, onToggle } = useDisclosure();
return ( return (
<Box p="4" m="auto"> <Flex direction="column" style={{ padding: 4, margin: "auto", background: "red.500" }}>
<Text color='red'>An unexpected error has occurred.</Text>
<Text>Message: {error.message}</Text>
{/*
<AlertRoot status="error" borderRadius="md"> <AlertRoot status="error" borderRadius="md">
{/* <AlertIcon /> */} <Flex style={{ flex: "1" }}>
<Box flex="1">
<AlertTitle>An unexpected error has occurred.</AlertTitle> <AlertTitle>An unexpected error has occurred.</AlertTitle>
<AlertDescription display="block" lineHeight="1.4"> <AlertDescription display="block" lineHeight="1.4">
<Button <Button
theme="@secondary" //theme="@secondary"
color="red.800" color="red.800"
//size="sm" //size="sm"
onClick={onToggle} onClick={onToggle}
@ -34,15 +30,15 @@ const ErrorFallback = ({ error }: FallbackProps) => {
</Button> </Button>
<Collapsible.Root open={open}> <Collapsible.Root open={open}>
<Collapsible.Content> <Collapsible.Content>
<Box mt={4} fontFamily="monospace"> <Flex mt={4} fontFamily="monospace">
{error.message} {error.message}
</Box> </Flex>
</Collapsible.Content> </Collapsible.Content>
</Collapsible.Root> </Collapsible.Root>
</AlertDescription> </AlertDescription>
</Box> </Flex>
</AlertRoot> </AlertRoot> */}
</Box> </Flex >
); );
}; };

27
front/src/icons/DoubleArrowIcon.tsx
View File

@ -1,14 +1,15 @@
import { createIcon } from '@chakra-ui/react';
export const DoubleArrowIcon = createIcon({
displayName: 'DoubleArrowIcon', export const DoubleArrowIcon = <></>;
viewBox: '0 0 24 24', // createIcon({
path: ( // displayName: 'DoubleArrowIcon',
<path // viewBox: '0 0 24 24',
fillRule="evenodd" // path: (
clipRule="evenodd" // <path
d="M1.293 12.207a1 1 0 0 1 0-1.414l6.364-6.364A1 1 0 0 1 9.07 5.843L4.414 10.5h15.172l-4.657-4.657a1 1 0 0 1 1.414-1.414l6.364 6.364a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414-1.414l4.657-4.657H4.414l4.657 4.657a1 1 0 1 1-1.414 1.414l-6.364-6.364Z" // fillRule="evenodd"
fill="currentColor" // clipRule="evenodd"
/> // d="M1.293 12.207a1 1 0 0 1 0-1.414l6.364-6.364A1 1 0 0 1 9.07 5.843L4.414 10.5h15.172l-4.657-4.657a1 1 0 0 1 1.414-1.414l6.364 6.364a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414-1.414l4.657-4.657H4.414l4.657 4.657a1 1 0 1 1-1.414 1.414l-6.364-6.364Z"
), // fill="currentColor"
}); // />
// ),
// });

11
front/src/main.tsx
View File

@ -1,19 +1,16 @@
import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from '@/App'; import App from '@/App';
import { ColorModeProvider } from './components/ui/color-mode'; import { ThemeProvider } from './theme/ThemeContext';
import { StrictMode } from 'react';
// Render the app // Render the app
const rootElement = document.getElementById('root'); const rootElement = document.getElementById('root');
if (rootElement && !rootElement.innerHTML) { if (rootElement && !rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement); const root = ReactDOM.createRoot(rootElement);
root.render( root.render(
<StrictMode> <StrictMode>
<ColorModeProvider> <ThemeProvider>
<App /> <App />
</ColorModeProvider> </ThemeProvider>
</StrictMode> </StrictMode>
); );
} }

1
front/src/scene/App.tsx
View File

@ -1,6 +1,7 @@
import { AudioPlayer } from '@/components/AudioPlayer'; import { AudioPlayer } from '@/components/AudioPlayer';
import { ErrorBoundary } from '@/errors/ErrorBoundary'; import { ErrorBoundary } from '@/errors/ErrorBoundary';
import { AppRoutes } from '@/scene/AppRoutes'; import { AppRoutes } from '@/scene/AppRoutes';
import { Text } from '@/ui';
import { ServiceContextProvider } from '@/service/ServiceContext'; import { ServiceContextProvider } from '@/service/ServiceContext';
export const App = () => { export const App = () => {

55
front/src/scene/album/AlbumDetailPage.tsx
View File

@ -1,5 +1,4 @@
import { Box, Button, Flex, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu';
import { MdEdit } from 'react-icons/md'; import { MdEdit } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
@ -10,13 +9,13 @@ import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp'; import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp'; import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
import { DisplayTrack } from '@/components/track/DisplayTrack';
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull'; import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album'; import { useSpecificAlbum } from '@/service/Album';
import { useTracksOfAnAlbum } from '@/service/Track'; import { useTracksOfAnAlbum } from '@/service/Track';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing'; import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
import { Button, Flex, Text } from '@/ui';
export const AlbumDetailPage = () => { export const AlbumDetailPage = () => {
const { albumId } = useParams(); const { albumId } = useParams();
@ -47,7 +46,7 @@ export const AlbumDetailPage = () => {
return ( return (
<> <>
<TopBar title="Album detail" /> <TopBar title="Album detail" />
<PageLayoutInfoCenter> <PageLayoutInfoCenter width="75%">
Fail to load artist id: {albumId} Fail to load artist id: {albumId}
</PageLayoutInfoCenter> </PageLayoutInfoCenter>
</> </>
@ -69,17 +68,19 @@ export const AlbumDetailPage = () => {
data-testid="Album-detail-page_layout"> data-testid="Album-detail-page_layout">
<Flex <Flex
direction="row" direction="row"
width="80%"
marginX="auto"
padding="10px"
gap="10px" gap="10px"
style={{
width: "80%",
margin: "0 auto",
padding: "10px",
}}
> >
<Covers <Covers
data={dataAlbum?.covers} data={dataAlbum?.covers}
// TODO: iconEmpty={LuDisc3} // TODO: iconEmpty={LuDisc3}
slideshow slideshow
/> />
<Flex direction="column" width="80%" marginRight="auto"> <Flex direction="column" style={{ width: "80%", marginRight: "auto" }}>
<Text fontSize="24px" fontWeight="bold"> <Text fontSize="24px" fontWeight="bold">
{dataAlbum?.name} {dataAlbum?.name}
</Text> </Text>
@ -94,25 +95,27 @@ export const AlbumDetailPage = () => {
<Flex <Flex
direction="column" direction="column"
gap={BASE_WRAP_SPACING} gap={BASE_WRAP_SPACING} style={{
marginX="auto" margin: "0 auto",
padding="20px" padding: "20px",
width="80%" width: "80%",
data-testid="Album-detail-page_flex-list" }}
data-test-id="Album-detail-page_flex-list"
> >
{tracksOnAnAlbum?.map((data) => ( {tracksOnAnAlbum?.map((data) => (
<Box <Flex
minWidth="100%"
//height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id} key={data.id}
padding="5px" style={{
as="button" minWidth: "100%",
_hover={{ //height="60px"
boxShadow: 'outline-over', border: "1px",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
> >
<DisplayTrackFull <DisplayTrackFull
@ -129,7 +132,7 @@ export const AlbumDetailPage = () => {
]} ]}
data-testid="Album-detail-page_display-detail" data-testid="Album-detail-page_display-detail"
/> />
</Box> </Flex>
))} ))}
<EmptyEnd /> <EmptyEnd />
</Flex> </Flex>

38
front/src/scene/album/AlbumsPage.tsx
View File

@ -9,9 +9,9 @@ import { SearchInput } from '@/components/SearchInput';
import { TopBar } from '@/components/TopBar/TopBar'; import { TopBar } from '@/components/TopBar/TopBar';
import { DisplayAlbum } from '@/components/album/DisplayAlbum'; import { DisplayAlbum } from '@/components/album/DisplayAlbum';
import { useOrderedAlbums } from '@/service/Album'; import { useOrderedAlbums } from '@/service/Album';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { BASE_WRAP_SPACING, BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing'; import { BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing';
import { Flex, HStack } from '@chakra-ui/react'; import { Button, Flex, HStack } from '@/ui';
export const AlbumsPage = () => { export const AlbumsPage = () => {
const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined); const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
@ -25,7 +25,7 @@ export const AlbumsPage = () => {
return ( return (
<> <>
<TopBar title="All Albums" /> <TopBar title="All Albums" />
<PageLayoutInfoCenter>No Album available</PageLayoutInfoCenter> <PageLayoutInfoCenter width="75%">No Album available</PageLayoutInfoCenter>
</> </>
); );
} }
@ -36,29 +36,31 @@ export const AlbumsPage = () => {
<SearchInput onChange={setFilterTitle} /> <SearchInput onChange={setFilterTitle} />
</TopBar> </TopBar>
<PageLayout> <PageLayout>
<HStack wrap="wrap" /*spacing={BASE_WRAP_SPACING}*/ marginX="auto" padding="20px" justify="center"> <HStack style={{ flexWrap: "wrap", /*spacing={BASE_WRAP_SPACING}*/ margin: "0 auto", padding: "20px", justifyContent: "center" }}>
{dataAlbums.map((data) => ( {dataAlbums.map((data) => (
<Flex align="flex-start" <Button
width={BASE_WRAP_WIDTH}
height={BASE_WRAP_HEIGHT}
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id} key={data.id}
padding="5px" style={{
as="button" width: BASE_WRAP_WIDTH,
_hover={{ height: BASE_WRAP_HEIGHT,
boxShadow: 'outline-over', border: "1px",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover={
// boxShadow: 'outline-over',
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
// }
alignContent: "flex-start",
}} }}
onClick={() => onSelectItem(data.id)} onClick={() => onSelectItem(data.id)}
> >
<DisplayAlbum dataAlbum={data} /> <DisplayAlbum dataAlbum={data} />
</Flex> </Button>
))} ))}
</HStack> </HStack>
<EmptyEnd /> <EmptyEnd />
</PageLayout> </PageLayout >
</> </>
); );
}; };

63
front/src/scene/artist/ArtistAlbumDetailPage.tsx
View File

@ -1,6 +1,5 @@
import { Box, Button, Flex, Text } from '@chakra-ui/react';
import { LuDisc3, LuUser } from 'react-icons/lu'; import { MdEdit } from 'react-icons/md';
import { MdEdit, MdPerson } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
import { Covers } from '@/components/Cover'; import { Covers } from '@/components/Cover';
@ -15,7 +14,8 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album'; import { useSpecificAlbum } from '@/service/Album';
import { useSpecificArtist } from '@/service/Artist'; import { useSpecificArtist } from '@/service/Artist';
import { useTracksOfAnAlbum } from '@/service/Track'; import { useTracksOfAnAlbum } from '@/service/Track';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { Button, Flex, Text } from '@/ui';
export const ArtistAlbumDetailPage = () => { export const ArtistAlbumDetailPage = () => {
const { artistId, albumId } = useParams(); const { artistId, albumId } = useParams();
@ -60,13 +60,18 @@ export const ArtistAlbumDetailPage = () => {
<> <>
<Button <Button
{...BUTTON_TOP_BAR_PROPERTY} {...BUTTON_TOP_BAR_PROPERTY}
marginRight="auto"
style={{
marginRight: "auto"
}}
onClick={() => navigate(`/artist/${dataArtist.id}`)} onClick={() => navigate(`/artist/${dataArtist.id}`)}
> >
<Covers <Covers
data={dataArtist?.covers} data={dataArtist?.covers}
size="35px" size="35px"
borderRadius="full" style={{
borderRadius: "full",
}}
// TODO: iconEmpty={MdPerson} // TODO: iconEmpty={MdPerson}
/> />
<Text fontSize="24px" fontWeight="bold"> <Text fontSize="24px" fontWeight="bold">
@ -87,9 +92,11 @@ export const ArtistAlbumDetailPage = () => {
<PageLayout> <PageLayout>
<Flex <Flex
direction="row" direction="row"
width="80%" style={{
marginX="auto" width: "80%",
padding="10px" margin: "0 auto",
padding: "10px",
}}
gap="10px" gap="10px"
> >
<Covers <Covers
@ -97,7 +104,8 @@ export const ArtistAlbumDetailPage = () => {
// TODO: iconEmpty={LuDisc3} // TODO: iconEmpty={LuDisc3}
slideshow slideshow
/> />
<Flex direction="column" width="80%" marginRight="auto"> <Flex direction="column"
style={{ width: "80%", marginRight: "auto" }}>
<Text fontSize="24px" fontWeight="bold"> <Text fontSize="24px" fontWeight="bold">
{dataAlbum?.name} {dataAlbum?.name}
</Text> </Text>
@ -113,23 +121,28 @@ export const ArtistAlbumDetailPage = () => {
<Flex <Flex
direction="column" direction="column"
gap="20px" gap="20px"
marginX="auto"
padding="20px" style={{
width="80%" margin: "0 auto",
padding: "20px",
width: "80%",
}}
> >
{tracksOnAnAlbum?.map((data) => ( {tracksOnAnAlbum?.map((data) => (
<Box <Flex
minWidth="100%"
height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id} key={data.id}
padding="5px"
as="button" style={{
_hover={{ minWidth: "100%",
boxShadow: 'outline-over', height: "60px",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), border: "1px",
borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
> >
<DisplayTrack <DisplayTrack
@ -147,7 +160,7 @@ export const ArtistAlbumDetailPage = () => {
{ name: 'Add Playlist', onClick: () => { } }, { name: 'Add Playlist', onClick: () => { } },
]} ]}
/> />
</Box> </Flex>
))} ))}
<EmptyEnd /> <EmptyEnd />
</Flex> </Flex>

40
front/src/scene/artist/ArtistDetailPage.tsx
View File

@ -1,5 +1,4 @@
import { Button, Flex, Text, HStack } from '@chakra-ui/react';
import { LuUser } from 'react-icons/lu';
import { MdEdit, MdGroup } from 'react-icons/md'; import { MdEdit, MdGroup } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
@ -12,8 +11,9 @@ import { DisplayAlbumId } from '@/components/album/DisplayAlbumId';
import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp'; import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp';
import { useSpecificArtist } from '@/service/Artist'; import { useSpecificArtist } from '@/service/Artist';
import { useAlbumIdsOfAnArtist } from '@/service/Track'; import { useAlbumIdsOfAnArtist } from '@/service/Track';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { BASE_WRAP_HEIGHT, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing'; import { BASE_WRAP_HEIGHT, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
import { Button, Flex, HStack, Text } from '@/ui';
export const ArtistDetailPage = () => { export const ArtistDetailPage = () => {
const { artistId } = useParams(); const { artistId } = useParams();
@ -41,7 +41,7 @@ export const ArtistDetailPage = () => {
<> <>
<Button <Button
{...BUTTON_TOP_BAR_PROPERTY} {...BUTTON_TOP_BAR_PROPERTY}
marginRight="auto" style={{ marginRight: "auto" }}
onClick={() => navigate(`/artist/all`)} onClick={() => navigate(`/artist/all`)}
> >
<MdGroup height="full" /> <MdGroup height="full" />
@ -64,7 +64,7 @@ export const ArtistDetailPage = () => {
<Flex <Flex
direction="row" direction="row"
width="80%" width="80%"
marginX="auto" margin="0 auto"
padding="10px" padding="10px"
gap="10px" gap="10px"
> >
@ -88,25 +88,27 @@ export const ArtistDetailPage = () => {
</Flex> </Flex>
</Flex> </Flex>
<HStack wrap="wrap" /*spacing={BASE_WRAP_SPACING}*/ marginX="auto" padding="20px" justify="center"> <HStack style={{ flexWrap: "wrap", /*spacing={BASE_WRAP_SPACING}*/ margin: "0 auto", padding: "20px", justifyContent: "center" }}>
{albumIdsOfAnArtist?.map((data) => ( {albumIdsOfAnArtist?.map((data) => (
<Flex align="flex-start" <Button
width={BASE_WRAP_WIDTH}
height={BASE_WRAP_HEIGHT}
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data} key={data}
padding="5px" style={{
as="button" alignContent: "flex-start",
_hover={{ width: BASE_WRAP_WIDTH,
boxShadow: 'outline-over', height: BASE_WRAP_HEIGHT,
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), border: "1px",
borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover={
// boxShadow: 'outline-over',
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
onClick={() => onSelectItem(data)} onClick={() => onSelectItem(data)}
> >
<DisplayAlbumId id={data} key={data} /> <DisplayAlbumId id={data} key={data} />
</Flex> </Button>
))} ))}
</HStack> </HStack>
<EmptyEnd /> <EmptyEnd />

56
front/src/scene/artist/ArtistsPage.tsx
View File

@ -1,7 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { Button, Flex, Text, Tooltip, HStack, Span } from '@chakra-ui/react';
import { LuUser } from 'react-icons/lu';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Artist, Track } from '@/back-api'; import { Artist, Track } from '@/back-api';
@ -11,13 +9,14 @@ import { PageLayout } from '@/components/Layout/PageLayout';
import { SearchInput } from '@/components/SearchInput'; import { SearchInput } from '@/components/SearchInput';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { useOrderedArtists } from '@/service/Artist'; import { useOrderedArtists } from '@/service/Artist';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { BASE_WRAP_HEIGHT, BASE_WRAP_ICON_SIZE, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing'; import { BASE_WRAP_HEIGHT, BASE_WRAP_ICON_SIZE, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
import { MdOutlineForkRight } from 'react-icons/md'; import { MdOutlineForkRight } from 'react-icons/md';
import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { shuffleArray } from '@/utils/arrayTools'; import { shuffleArray } from '@/utils/arrayTools';
import { useTrackService } from '@/service/Track'; import { useTrackService } from '@/service/Track';
import { DataTools, TypeCheck } from '@/utils/data-tools'; import { DataTools, TypeCheck } from '@/utils/data-tools';
import { Button, Flex, HStack, Span, Text } from '@/ui';
const LIMIT_RANDOM_VALUES = 25; const LIMIT_RANDOM_VALUES = 25;
export const ArtistsPage = () => { export const ArtistsPage = () => {
@ -57,35 +56,35 @@ export const ArtistsPage = () => {
<> <>
<TopBar title="All artists"> <TopBar title="All artists">
<SearchInput onChange={setFilterName} /> <SearchInput onChange={setFilterName} />
<Tooltip.Root aria-label="Random play"> <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onRandomPlay}>
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onRandomPlay}> <MdOutlineForkRight />
<MdOutlineForkRight /> </Button>
</Button>
</Tooltip.Root>
</TopBar> </TopBar>
<PageLayout> <PageLayout>
<HStack wrap="wrap" /*spacing={BASE_WRAP_SPACING}*/ marginX="auto" padding="20px" justify="center"> <HStack style={{ flexWrap: "wrap", /*spacing={BASE_WRAP_SPACING}*/ margin: "0 auto", padding: "20px", alignContent: "center" }}>
{dataArtist?.map((data) => ( {dataArtist?.map((data) => (
<Flex align="flex-start" <Button
width={BASE_WRAP_WIDTH}
height={BASE_WRAP_HEIGHT}
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id} key={data.id}
padding="5px" style={{
as="button" width: BASE_WRAP_WIDTH,
_hover={{ height: BASE_WRAP_HEIGHT,
boxShadow: 'outline-over', alignContent: "flex-start",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), border: "1px",
borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover:{
// boxShadow: 'outline-over',
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
onClick={() => onSelectItem(data)} onClick={() => onSelectItem(data)}
> >
<Flex direction="row" width="full" height="full"> <Flex direction="row" width="100%" height="full">
<Covers <Covers
data={data.covers} data={data.covers}
size={BASE_WRAP_ICON_SIZE} size={BASE_WRAP_ICON_SIZE}
height="full" style={{ height: "100%" }}
// iconEmpty={LuUser} // iconEmpty={LuUser}
/> />
<Flex <Flex
@ -94,19 +93,20 @@ export const ArtistsPage = () => {
maxWidth="150px" maxWidth="150px"
height="full" height="full"
paddingLeft="5px" paddingLeft="5px"
overflowX="hidden" style={{ overflowX: "hidden" }}
> >
<Text <Text
/*align="left"*/ /*align="left"*/
/*noOfLines={[1, 2]}*/ /*noOfLines={[1, 2]}*/
> >
<Span <Span
as="span"
fontSize="20px" fontSize="20px"
fontWeight="bold" fontWeight="bold"
userSelect="none" userSelect="none"
marginRight="auto" style={{
overflow="hidden" marginRight: "auto",
overflow: "hidden",
}}
> >
{data.name} {data.name}
</Span> </Span>
@ -114,7 +114,7 @@ export const ArtistsPage = () => {
</Text> </Text>
</Flex> </Flex>
</Flex> </Flex>
</Flex> </Button>
))} ))}
</HStack> </HStack>
<EmptyEnd /> <EmptyEnd />

50
front/src/scene/gender/GenderDetailPage.tsx
View File

@ -1,5 +1,4 @@
import { Box, Button, Flex, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu';
import { MdEdit } from 'react-icons/md'; import { MdEdit } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
@ -10,13 +9,13 @@ import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { GenderEditPopUp } from '@/components/popup/GenderEditPopUp'; import { GenderEditPopUp } from '@/components/popup/GenderEditPopUp';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp'; import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
import { DisplayTrack } from '@/components/track/DisplayTrack';
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull'; import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificGender } from '@/service/Gender'; import { useSpecificGender } from '@/service/Gender';
import { useTracksOfAGender } from '@/service/Track'; import { useTracksOfAGender } from '@/service/Track';
//import { useTracksOfAGender } from '@/service/Track'; //import { useTracksOfAGender } from '@/service/Track';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { Button, Flex, Text } from '@/ui';
export const GenderDetailPage = () => { export const GenderDetailPage = () => {
const { genderId } = useParams(); const { genderId } = useParams();
@ -68,17 +67,19 @@ export const GenderDetailPage = () => {
<PageLayout> <PageLayout>
<Flex <Flex
direction="row" direction="row"
width="80%"
marginX="auto"
padding="10px"
gap="10px" gap="10px"
style={{
width: "80%",
margin: "0 auto",
padding: "10px",
}}
> >
<Covers <Covers
data={dataGender?.covers} data={dataGender?.covers}
// TODO: iconEmpty={LuDisc3} // TODO: iconEmpty={LuDisc3}
slideshow slideshow
/> />
<Flex direction="column" width="80%" marginRight="auto"> <Flex direction="column" style={{ width: "80%", marginRight: "auto" }}>
<Text fontSize="24px" fontWeight="bold"> <Text fontSize="24px" fontWeight="bold">
{dataGender?.name} {dataGender?.name}
</Text> </Text>
@ -91,23 +92,26 @@ export const GenderDetailPage = () => {
<Flex <Flex
direction="column" direction="column"
gap="20px" gap="20px"
marginX="auto" style={{
padding="20px" margin: "0 auto",
width="80%" padding: "20px",
width: "80%",
}}
> >
{tracksOnAGender?.map((data) => ( {tracksOnAGender?.map((data) => (
<Box <Flex
minWidth="100%"
//height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id} key={data.id}
padding="5px" style={{
as="button" minWidth: "100%",
_hover={{ //height="60px",
boxShadow: 'outline-over', border: "1px",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
> >
<DisplayTrackFull <DisplayTrackFull
@ -123,7 +127,7 @@ export const GenderDetailPage = () => {
{ name: 'Add Playlist', onClick: () => { } }, { name: 'Add Playlist', onClick: () => { } },
]} ]}
/> />
</Box> </Flex>
))} ))}
<EmptyEnd /> <EmptyEnd />
</Flex> </Flex>

30
front/src/scene/gender/GendersPage.tsx
View File

@ -9,8 +9,8 @@ import { SearchInput } from '@/components/SearchInput';
import { TopBar } from '@/components/TopBar/TopBar'; import { TopBar } from '@/components/TopBar/TopBar';
import { DisplayGender } from '@/components/gender/DisplayGender'; import { DisplayGender } from '@/components/gender/DisplayGender';
import { useOrderedGenders } from '@/service/Gender'; import { useOrderedGenders } from '@/service/Gender';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { Flex, HStack } from '@chakra-ui/react'; import { Flex, HStack } from '@/ui';
export const GendersPage = () => { export const GendersPage = () => {
const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined); const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
@ -35,20 +35,24 @@ export const GendersPage = () => {
<SearchInput onChange={setFilterTitle} /> <SearchInput onChange={setFilterTitle} />
</TopBar> </TopBar>
<PageLayout> <PageLayout>
<HStack wrap="wrap" /*spacing="20px"*/ marginX="auto" padding="20px" justify="center"> <HStack style={{
// wrap: "wrap",
/*spacing="20px"*/ margin: "0 auto 0 auto", padding: "20px", justifyContent: "center"
}}>
{dataGenders.map((data) => ( {dataGenders.map((data) => (
<Flex align="flex-start" <Flex align="flex-start"
width="270px"
height="120px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id} key={data.id}
padding="5px" style={{
as="button" width: "270px",
_hover={{ height: "120px",
boxShadow: 'outline-over', border: "1px",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), borderColor: "brand.900",
//background:{useColorModeValue('#FFFFFF88', '#00000088')},
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
onClick={() => onSelectItem(data.id)} onClick={() => onSelectItem(data.id)}
> >

81
front/src/scene/home/AddPage.tsx
View File

@ -1,11 +1,5 @@
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import {
Flex,
Input,
Table,
Text,
} from '@chakra-ui/react';
import { LuTrash } from 'react-icons/lu'; import { LuTrash } from 'react-icons/lu';
import { MdCloudUpload } from 'react-icons/md'; import { MdCloudUpload } from 'react-icons/md';
@ -31,7 +25,7 @@ import { useGenderService, useOrderedGenders } from '@/service/Gender';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';
import { useTrackService } from '@/service/Track'; import { useTrackService } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Button } from '@/components/ui/themed'; import { Button, Flex, Table, Text } from '@/ui';
export class ElementList { export class ElementList {
constructor( constructor(
@ -121,7 +115,7 @@ export const AddPage = () => {
updateNeedSend(); updateNeedSend();
}; };
const removeElementFromList = (data: FileParsedElement, value: any): void => { const removeElementFromList = (data: FileParsedElement): void => {
const parsedElementTmp = [...parsedElement]; const parsedElementTmp = [...parsedElement];
for (let iii = 0; iii < parsedElementTmp.length; iii++) { for (let iii = 0; iii < parsedElementTmp.length; iii++) {
if (parsedElementTmp[iii] === data) { if (parsedElementTmp[iii] === data) {
@ -420,15 +414,17 @@ export const AddPage = () => {
<PageLayout> <PageLayout>
<Flex <Flex
direction="column" direction="column"
width="80%"
marginX="auto"
padding="10px"
gap="10px" gap="10px"
style={{
width: "80%",
margin: "0 auto 0 auto",
padding: "10px",
}}
> >
<Flex direction="column" width="full"> <Flex direction="column" style={{ width: "100%" }}>
<Flex> <Flex>
<Text flex={1}>format:</Text> <Text>format:</Text>
<Text flex={4}> <Text>
The format of the media permit to automatic find meta-data: The format of the media permit to automatic find meta-data:
<br /> <br />
Artist~album#idTrack-my name of my media.webm Artist~album#idTrack-my name of my media.webm
@ -437,15 +433,15 @@ export const AddPage = () => {
</Text> </Text>
</Flex> </Flex>
<Flex> <Flex>
<Text flex={1}>Media:</Text> <Text>Media:</Text>
<Input {/* <Input
flex={4} flex={4}
type="file" type="file"
placeholder="Select a media file" placeholder="Select a media file"
accept=".webm" accept=".webm"
multiple multiple
onChange={onChangeFile} onChange={onChangeFile}
/> /> */}
</Flex> </Flex>
</Flex> </Flex>
{parsedElement && parsedElement.length !== 0 && ( {parsedElement && parsedElement.length !== 0 && (
@ -478,14 +474,12 @@ export const AddPage = () => {
suggestion={suggestedAlbum} suggestion={suggestedAlbum}
/> />
<Table.Root <Table.Root
colorPalette="striped"
colorScheme="teal"
background="gray.700" background="gray.700"
> >
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader>track ID</Table.ColumnHeader> <Table.ColumnHeader>track ID</Table.ColumnHeader>
<Table.ColumnHeader width="full">Title</Table.ColumnHeader> <Table.ColumnHeader style={{ width: "100%" }}>Title</Table.ColumnHeader>
<Table.ColumnHeader>actions</Table.ColumnHeader> <Table.ColumnHeader>actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
@ -493,33 +487,33 @@ export const AddPage = () => {
{parsedElement.map((data) => ( {parsedElement.map((data) => (
<Table.Row key={data.uniqueId}> <Table.Row key={data.uniqueId}>
<Table.Cell> <Table.Cell>
<Input {/* <Input
type="number" type="number"
pattern="[0-9]{0-4}" pattern="[0-9]{0-4}"
placeholder="e?" placeholder="e?"
value={data.trackId} value={data.trackId}
onChange={(e) => onTrackId(data, e.target.value)} onChange={(e) => onTrackId(data, e.target.value)}
backgroundColor={ background={
data.trackIdDetected === true data.trackIdDetected === true
? 'darkred' ? 'darkred'
: undefined : undefined
} }
/> /> */}
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Input {/* <Input
type="text" type="text"
placeholder="Name of the Media" placeholder="Name of the Media"
value={data.title} value={data.title}
onChange={(e) => onTitle(data, e.target.value)} onChange={(e) => onTitle(data, e.target.value)}
backgroundColor={ background={
data.title === '' ? 'darkred' : undefined data.title === '' ? 'darkred' : undefined
} }
/> /> */}
{data.nameDetected === true && ( {data.nameDetected === true && (
<> <>
<br /> <br />
<Text as="span" color="@danger"> <Text style={{ background: "red" }}>
^^^This title already exist !!! ^^^This title already exist !!!
</Text> </Text>
</> </>
@ -527,8 +521,8 @@ export const AddPage = () => {
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Button <Button
onClick={(e) => onClick={() =>
removeElementFromList(data, e.target) removeElementFromList(data)
} }
> >
<LuTrash /> Remove <LuTrash /> Remove
@ -538,13 +532,14 @@ export const AddPage = () => {
))} ))}
</Table.Body> </Table.Body>
</Table.Root> </Table.Root>
<Flex marginY="15px"> <Flex style={{ margin: "15px 0 15px 0" }}>
<Button <Button
theme="@primary" //theme="@primary"
onClick={sendFile} onClick={sendFile}
disabled={!needSend} style={{
marginLeft="auto" //disabled:!needSend,
marginRight="30px" margin: "0 auto 0 30px"
}}
> >
<MdCloudUpload /> Upload <MdCloudUpload /> Upload
</Button> </Button>
@ -554,14 +549,16 @@ export const AddPage = () => {
{listFileInBdd && ( {listFileInBdd && (
<Table.Root <Table.Root
fontPalette="striped" //fontPalette="striped"
colorScheme="teal" //colorScheme="teal"
background="gray.700" style={{
background: "gray.700"
}}
> >
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader>track ID</Table.ColumnHeader> <Table.ColumnHeader>track ID</Table.ColumnHeader>
<Table.ColumnHeader width="full">Title</Table.ColumnHeader> <Table.ColumnHeader style={{ width: "100%" }}>Title</Table.ColumnHeader>
<Table.ColumnHeader>actions</Table.ColumnHeader> <Table.ColumnHeader>actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
@ -597,13 +594,13 @@ export const AddPage = () => {
<> <>
<Text fontSize="30px">Rejected:</Text> <Text fontSize="30px">Rejected:</Text>
<Table.Root <Table.Root
colorPalette="striped" //colorPalette="striped"
colorScheme="teal" //colorScheme="teal"
background="gray.700" style={{ background: "gray.700" }}
> >
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader maxWidth="80%">file</Table.ColumnHeader> <Table.ColumnHeader style={{ maxWidth: "80%" }}>file</Table.ColumnHeader>
<Table.ColumnHeader>Reason</Table.ColumnHeader> <Table.ColumnHeader>Reason</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>

52
front/src/scene/home/HomePage.tsx
View File

@ -1,6 +1,5 @@
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { Center, Flex, HStack, Text } from '@chakra-ui/react';
import { LuCrown, LuDisc3, LuEar, LuFileAudio } from 'react-icons/lu'; import { LuCrown, LuDisc3, LuEar, LuFileAudio } from 'react-icons/lu';
import { MdGroup } from 'react-icons/md'; import { MdGroup } from 'react-icons/md';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -8,7 +7,8 @@ import { useNavigate } from 'react-router-dom';
import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar'; import { TopBar } from '@/components/TopBar/TopBar';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { Div, Flex, HStack, Text } from '@/ui';
type HomeListType = { type HomeListType = {
id: number; id: number;
@ -58,40 +58,56 @@ export const HomePage = () => {
<> <>
<TopBar title="Home" /> <TopBar title="Home" />
<PageLayout> <PageLayout>
<HStack wrap="wrap" /*spacing="20px"*/ marginX="auto" padding="20px" justify="center"> <HStack style={{
flexWrap: "wrap",
/*spacing:"20px",*/
margin: "0 auto",
padding: "20px",
alignContent: "center"
}}>
{homeList.map((data) => ( {homeList.map((data) => (
<Flex align="flex-start" <Flex align="flex-start"
width="200px" margin="auto"
height="190px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id} key={data.id}
padding="5px" style={{
as="button" width: "200px",
height: "190px",
border: "1px",
borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
}}
_hover={{ _hover={{
boxShadow: 'outline-over', boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), background: useColorThemeValue('#FFFFFFF7', '#000000F7'),
}} }}
onClick={() => onSelectItem(data)} onClick={() => onSelectItem(data)}
> >
<Flex direction="column" width="full" height="full"> <Flex
<Center height="full">{data.icon}</Center> direction="column"
<Center> style={{
width: "100%",
margin: "auto"
}}>
<Div style={{ margin: "auto", height: "100%", color: "black.50" }}>{data.icon}</Div>
<Div style={{ margin: "auto", height: "100%" }}>
<Text <Text
fontSize="25px" fontSize="25px"
fontWeight="bold" fontWeight="bold"
textTransform="uppercase" color="black.50"
userSelect="none" style={{
textTransform: "uppercase",
userSelect: "none",
}}
> >
{data.name} {data.name}
</Text> </Text>
</Center> </Div>
</Flex> </Flex>
</Flex> </Flex>
))} ))}
</HStack> </HStack>
</PageLayout> </PageLayout >
</> </>
); );
}; };

37
front/src/scene/onAir/OnAirPage.tsx
View File

@ -1,4 +1,3 @@
import { Box, Flex, Text } from '@chakra-ui/react';
import { Route, Routes, useNavigate } from 'react-router-dom'; import { Route, Routes, useNavigate } from 'react-router-dom';
import { EmptyEnd } from '@/components/EmptyEnd'; import { EmptyEnd } from '@/components/EmptyEnd';
@ -8,9 +7,10 @@ import { TopBar } from '@/components/TopBar/TopBar';
import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp'; import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp'; import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing'; import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
import { DisplayTrackFullId } from '@/components/track/DisplayTrackFullId'; import { DisplayTrackFullId } from '@/components/track/DisplayTrackFullId';
import { Flex } from '@/ui';
export const OnAirPage = () => { export const OnAirPage = () => {
const { playInList } = useActivePlaylistService(); const { playInList } = useActivePlaylistService();
@ -73,24 +73,27 @@ export const OnAirPage = () => {
<Flex <Flex
direction="column" direction="column"
gap={BASE_WRAP_SPACING} gap={BASE_WRAP_SPACING}
marginX="auto" style={{
padding="20px" margin: "0 auto",
width="80%" padding: "20px",
width: "80%",
}}
> >
{!playTrackList && <>No playing</>} {!playTrackList && <>No playing</>}
{playTrackList && playTrackList?.map((data) => ( {playTrackList && playTrackList?.map((data) => (
<Box <Flex
minWidth="100%"
//height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data} key={data}
padding="5px" style={{
as="button" minWidth: "100%",
_hover={{ //height:"60px",
boxShadow: 'outline-over', border: "1px",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
> >
<DisplayTrackFullId <DisplayTrackFullId
@ -111,7 +114,7 @@ export const OnAirPage = () => {
}, },
]} ]}
/> />
</Box> </Flex>
))} ))}
<EmptyEnd /> <EmptyEnd />
</Flex> </Flex>

13
front/src/scene/sso/SSOPage.tsx
View File

@ -1,6 +1,5 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Center, Heading, Image, Text } from '@chakra-ui/react';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import avatar_generic from '@/assets/images/avatar_generic.svg'; import avatar_generic from '@/assets/images/avatar_generic.svg';
@ -11,6 +10,8 @@ import { SessionState } from '@/service/SessionState';
import { useSessionService } from '@/service/session'; import { useSessionService } from '@/service/session';
import { b64_to_utf8 } from '@/utils/sso'; import { b64_to_utf8 } from '@/utils/sso';
import { Flex, Text, Image } from '@/ui';
export const SSOPage = () => { export const SSOPage = () => {
const { data, keepConnected, token } = useParams(); const { data, keepConnected, token } = useParams();
console.log(`- data: ${data}`); console.log(`- data: ${data}`);
@ -47,13 +48,11 @@ export const SSOPage = () => {
<> <>
<TopBar /> <TopBar />
<PageLayoutInfoCenter width="35%" gap="15px"> <PageLayoutInfoCenter width="35%" gap="15px">
<Center w="full"> <Text>LOGIN (after SSO)</Text>
<Heading size="xl">LOGIN (after SSO) </Heading>
</Center>
<Center w="full"> <Flex width="100%">
<Image src={avatar_generic} boxSize="150px" borderRadius="full" /> <Image src={avatar_generic} boxSize="150px" style={{ borderRadius: "full" }} />
</Center> </Flex>
{token === '__CANCEL__' && ( {token === '__CANCEL__' && (
<Text> <Text>
<b>ERROR: </b> Request cancel of connection ! <b>ERROR: </b> Request cancel of connection !

12
front/src/scene/track/TrackSelectionPage.tsx
View File

@ -1,12 +1,8 @@
import { ReactElement } from 'react';
import { Flex, Text, HStack } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar'; import { TopBar } from '@/components/TopBar/TopBar';
import { DataTools, TypeCheck } from '@/utils/data-tools'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { useColorModeValue } from '@/components/ui/color-mode';
export const alphabet = [ export const alphabet = [
'a', 'a',
@ -54,17 +50,17 @@ export const TrackSelectionPage = () => {
height="75px" height="75px"
border="1px" border="1px"
borderColor="brand.900" borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')} background={useColorThemeValue('#FFFFFF88', '#00000088')}
key={data} key={data}
padding="5px" padding="5px"
as="button" as="button"
_hover={{ _hover={{
boxShadow: 'outline-over', boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
}} }}
onClick={() => onSelectItem(data)} onClick={() => onSelectItem(data)}
> >
<Flex direction="column" width="full" height="full"> <Flex direction="column" width="100%" height="full">
<Text <Text
margin="auto" margin="auto"
fontSize="25px" fontSize="25px"

65
front/src/scene/track/TracksStartLetterDetailPage.tsx
View File

@ -1,6 +1,3 @@
import { ReactElement } from 'react';
import { Box, Flex } from '@chakra-ui/react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { EmptyEnd } from '@/components/EmptyEnd'; import { EmptyEnd } from '@/components/EmptyEnd';
@ -11,7 +8,8 @@ import { DisplayTrackSkeleton } from '@/components/track/DisplayTrackSkeleton';
import { alphabet } from '@/scene/track/TrackSelectionPage'; import { alphabet } from '@/scene/track/TrackSelectionPage';
import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useTracksWithStartName } from '@/service/Track'; import { useTracksWithStartName } from '@/service/Track';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorThemeValue } from '@/theme/ThemeContext';
import { Flex } from '@/ui';
export const TracksStartLetterDetailPage = () => { export const TracksStartLetterDetailPage = () => {
const { startLetter } = useParams(); const { startLetter } = useParams();
@ -50,50 +48,55 @@ export const TracksStartLetterDetailPage = () => {
<Flex <Flex
direction="column" direction="column"
gap="20px" gap="20px"
marginX="auto" style={{
padding="20px" margin: "0 auto",
width="80%" padding: "20px",
width: "80%",
}}
> >
{isLoading && {isLoading &&
[1, 2, 3, 4]?.map((data) => ( [1, 2, 3, 4]?.map((data) => (
<Box <Flex
minWidth="100%"
//height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data} key={data}
padding="5px" style={{
as="button" minWidth: "100%",
_hover={{ //height:"60px",
boxShadow: 'outline-over', border: "1px",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
> >
<DisplayTrackSkeleton /> <DisplayTrackSkeleton />
</Box> </Flex>
))} ))}
{!isLoading && {!isLoading &&
tracksStartsWith?.map((data) => ( tracksStartsWith?.map((data) => (
<Box <Flex
minWidth="100%"
//height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id} key={data.id}
padding="5px" style={{
as="button" minWidth: "100%",
_hover={{ //height:"60px",
boxShadow: 'outline-over', border: "1px",
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'), borderColor: "brand.900",
background: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}} }}
> >
<DisplayTrackFull <DisplayTrackFull
track={data} track={data}
onClick={() => onSelectItem(data.id)} onClick={() => onSelectItem(data.id)}
/> />
</Box> </Flex>
))} ))}
<EmptyEnd /> <EmptyEnd />
</Flex> </Flex>

2
front/src/service/Album.ts
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react'; import { useMemo } from 'react';
import { Album, AlbumResource } from '@/back-api'; import { Album, AlbumResource } from '@/back-api';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';

2
front/src/service/Track.ts
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useMemo } from 'react';
import { Track, TrackResource } from '@/back-api'; import { Track, TrackResource } from '@/back-api';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';

11
front/src/service/session.ts
View File

@ -6,16 +6,13 @@ import { useServiceContext } from '@/service/ServiceContext';
import { SessionState } from '@/service/SessionState'; import { SessionState } from '@/service/SessionState';
import { isBrowser } from '@/utils/layout'; import { isBrowser } from '@/utils/layout';
import { parseToken } from '@/utils/sso'; import { parseToken } from '@/utils/sso';
import { createListCollection } from '@chakra-ui/react';
const TOKEN_KEY = 'karusic-token-key-storage'; const TOKEN_KEY = 'karusic-token-key-storage';
export const USERS_COLLECTION = createListCollection({ export const USERS_COLLECTION = [
items: [ { label: "admin", value: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E" },
{ label: "admin", value: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E" }, { label: "NO_USER", value: "svelte" },
{ label: "NO_USER", value: "svelte" }, ];
],
})
export const USERS = { export const USERS = {
admin: admin:
'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E',

1
front/src/test/utils.tsx
View File

@ -1,6 +1,5 @@
import { ReactElement, ReactNode } from 'react'; import { ReactElement, ReactNode } from 'react';
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { RenderOptions, render } from '@testing-library/react'; import { RenderOptions, render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';

202
front/src/theme/ThemeContext.tsx Normal file
View File

@ -0,0 +1,202 @@
import { createContext, useContext, useState, useEffect, CSSProperties, ReactNode, useCallback } from "react";
import { basicColor } from "./colors";
export type ApplyThemeProperty = {
componentType?: String;
// define the format of the shape
shape?: String;
// Define the color model used
palette?: String;
}
export type ThemeContextProps = {
theme: string;
themeList: string[];
setTheme: (string) => void;
toggleTheme: () => void;
convertStyle: (style: CSSProperties) => CSSProperties,
applyTheme: (style: CSSProperties, theme: ApplyThemeProperty) => CSSProperties,
}
const ThemeContext = createContext<ThemeContextProps>({
theme: "error",
themeList: ["error"],
setTheme: (_: string) => {
console.error("Request setTheme without context");
},
toggleTheme: () => {
console.error("Request toggleTheme without context");
},
convertStyle: (style: CSSProperties): CSSProperties => {
console.error("Request convertStyle without context");
return style;
},
applyTheme: (style: CSSProperties, _theme: ApplyThemeProperty) => {
console.error("Request applyTheme without context");
return style;
},
});
const themes = {
baseColors: {
...basicColor
},
themeColors: {
light: {
primary: "#007bff",
secondary: "#6c757d",
background: "#ffffff",
text: "#000000",
},
dark: {
primary: "#375a7f",
secondary: "#444444",
background: "#181818",
text: "#ffffff",
},
},
base: {
Button: {
border: '1px solid red',
},
Flex: {
},
},
shape: {
outline: {
border: '1px solid transparent',
},
},
palette: {
primary: {
borderColor: "green"
},
secondary: {
},
danger: {
},
success: {
}
}
};
export function ThemeProvider({ children, themeList = ["light", "dark"] }: { children: ReactNode, themeList?: string[] }) {
const [theme, setTheme] = useState<string>(themeList[1]);
const [basicsColor, setBasicsColor] = useState<{ [key: string]: string }>({});
// update the global CSS wen theme is updated:
useEffect(() => {
// generates the colors:
const baseColor = themes.baseColors;
const newBasicsColor: { [key: string]: string } = {}
Object.entries(baseColor).forEach(([tableColorName, colorValues]) => {
Object.entries(colorValues).forEach(([key, value]) => {
const colorName = `${tableColorName}.${key}`;
newBasicsColor[colorName] = value;
});
});
setBasicsColor(newBasicsColor);
const root = document.documentElement;
//const currentColorTheme = themes.baseColors[theme];
Object.entries(newBasicsColor).forEach(([key, value]) => {
const cssKeyValue = `--${key.replace(".", "-")}`;
console.log(` generate CSS color: ${cssKeyValue}:${value}`);
root.style.setProperty(cssKeyValue, value);
});
}, [theme, setBasicsColor]);
const toggleTheme = useCallback(() => {
setTheme((previous) => {
if (themeList.length <= 1) {
return previous;
}
for (let iii = 0; iii < themeList.length - 1; iii++) {
if (themeList[iii] == theme) {
return themeList[iii + 1]
}
}
return themeList[0];
})
}, [setTheme]);
const convertElementStyle = useCallback((style: CSSProperties, key: string) => {
const value = style[key];
if (typeof value !== "string") {
return;
}
// console.log(`request convert value: ${value}`);
if (basicsColor[value]) {
// console.log(`convert value: ${value} in ${basicsColor[value]}`);
style[key] = basicsColor[value];
}
}, [basicsColor]);
const convertStyle = useCallback((style: CSSProperties): CSSProperties => {
//console.log(`plop: ${theme}`);
if (!style) {
return style;
}
const out = { ...style }
convertElementStyle(out, "background");
convertElementStyle(out, "backgroundColor");
convertElementStyle(out, "borderColor");
convertElementStyle(out, "color");
return out;
}, [convertElementStyle]);
const applyTheme = useCallback((style: CSSProperties, selectedTheme?: ApplyThemeProperty): CSSProperties => {
let out = style;
console.log(`apply style ... ${JSON.stringify(selectedTheme, null, 2)}`);
// Apply the basic theme of the component:
if (selectedTheme?.componentType) {
console.log(`detect component type theme ... ${selectedTheme?.componentType}`);
const base = themes?.base[selectedTheme.componentType];
console.log(` base = ${JSON.stringify(base, null, 2)}`);
if (base) {
out = { ...base, ...out };
}
}
// Apply the variant selected:
if (selectedTheme?.shape) {
const shape = themes?.shape[selectedTheme.shape];
if (shape) {
out = { ...shape, ...out };
}
}
// Apply the palette selected:
if (selectedTheme?.palette) {
const palette = themes?.shape[selectedTheme.palette];
if (palette) {
const palette2 = palette[theme];
if (palette2) {
out = { ...palette2, ...out };
}
}
}
return convertStyle(out);
}, [convertStyle]);
return (
<ThemeContext.Provider value={{ theme, themeList, setTheme, toggleTheme, convertStyle, applyTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = () => useContext(ThemeContext);
export function useColorThemeValue<T>(firstTheme: T, secondTheme: T) {
const { theme, themeList } = useTheme()
//console.log(`use theme =${theme} ==> ${theme === themeList[0] ? firstTheme : secondTheme}`);
return theme === themeList[0] ? firstTheme : secondTheme
}

126
front/src/theme/colors.ts Normal file
View File

@ -0,0 +1,126 @@
// Update me with other Tailwind colors or with https://smart-swatch.netlify.app/
const brand = {
50: '#e3edff',
100: '#b6c9fd',
200: '#88a5f7',
300: '#5a81f2',
400: '#2c5ded',
500: '#1543d4',
600: '#0d34a5',
700: '#062577',
800: '#02164a',
900: '#00071e',
};
const black = {
50: '#f2f2f2',
100: '#d9d9d9',
200: '#bfbfbf',
300: '#a6a6a6',
400: '#8c8c8c',
500: '#737373',
600: '#595959',
700: '#404040',
800: '#262626',
900: '#0d0d0d',
};
const green = {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
};
const blue = {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
};
const orange = {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#f97316',
600: '#ea580c',
700: '#c2410c',
800: '#9a3412',
900: '#7c2d12',
};
const red = {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d',
};
const yellow = {
50: '#ffffda',
100: '#ffffad',
200: '#ffff7d',
300: '#ffff4b',
400: '#ffff1a',
500: '#e5e600',
600: '#b2b300',
700: '#7f8000',
800: '#4c4d00',
900: '#191b00',
};
const purple = {
50: '#ffe3ff',
100: '#ffb2ff',
200: '#ff80ff',
300: '#fe4efe',
400: '#fe20fe',
500: '#e50ce4',
600: '#b204b1',
700: '#80007f',
800: '#4e004d',
900: '#1d001c',
};
const cyan = {
50: '#d6ffff',
100: '#aaffff',
200: '#7affff',
300: '#47ffff',
400: '#1affff',
500: '#00e5e6',
600: '#00b2b3',
700: '#008081',
800: '#004d4e',
900: '#001b1d',
}
export const basicColor = {
brand,
green,
red,
orange,
black,
blue,
yellow,
purple,
cyan,
back: black,
warning: orange,
}

110
front/src/theme/foundations/colors.ts
View File

@ -1,110 +0,0 @@
type ThemeModel = {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
const back = {
50: { value: '#ebf4fa' },
100: { value: '#d1dbe0' },
200: { value: '#b6c2c9' },
300: { value: '#99aab4' },
400: { value: '#7c939e' },
500: { value: '#637985' },
600: { value: '#4d5e67' },
700: { value: '#37444a' },
800: { value: '#1f292e' },
900: { value: '#020f12' },
};
const brand = {
50: { value: '#e3edff' },
100: { value: '#b6c9fd' },
200: { value: '#88a5f7' },
300: { value: '#5a81f2' },
400: { value: '#2c5ded' },
500: { value: '#1543d4' },
600: { value: '#0d34a5' },
700: { value: '#062577' },
800: { value: '#02164a' },
900: { value: '#00071e' },
};
const normalText = {
50: { value: '#f2f2f2' },
100: { value: '#d9d9d9' },
200: { value: '#bfbfbf' },
300: { value: '#a6a6a6' },
400: { value: '#8c8c8c' },
500: { value: '#737373' },
600: { value: '#595959' },
700: { value: '#404040' },
800: { value: '#262626' },
900: { value: '#0d0d0d' },
};
const green = {
50: { value: '#f0fdf4' },
100: { value: '#dcfce7' },
200: { value: '#bbf7d0' },
300: { value: '#86efac' },
400: { value: '#4ade80' },
500: { value: '#22c55e' },
600: { value: '#16a34a' },
700: { value: '#15803d' },
800: { value: '#166534' },
900: { value: '#14532d' },
};
const blue = {
50: { value: '#eff6ff' },
100: { value: '#dbeafe' },
200: { value: '#bfdbfe' },
300: { value: '#93c5fd' },
400: { value: '#60a5fa' },
500: { value: '#3b82f6' },
600: { value: '#2563eb' },
700: { value: '#1d4ed8' },
800: { value: '#1e40af' },
900: { value: '#1e3a8a' },
};
const orange = {
50: { value: '#fff7ed' },
100: { value: '#ffedd5' },
200: { value: '#fed7aa' },
300: { value: '#fdba74' },
400: { value: '#fb923c' },
500: { value: '#f97316' },
600: { value: '#ea580c' },
700: { value: '#c2410c' },
800: { value: '#9a3412' },
900: { value: '#7c2d12' },
};
const red = {
50: { value: '#fef2f2' },
100: { value: '#fee2e2' },
200: { value: '#fecaca' },
300: { value: '#fca5a5' },
400: { value: '#f87171' },
500: { value: '#ef4444' },
600: { value: '#dc2626' },
700: { value: '#b91c1c' },
800: { value: '#991b1b' },
900: { value: '#7f1d1d' },
};
export const colors = {
// Update me with other Tailwind colors or with https://smart-swatch.netlify.app/
brand: brand,
back: back,
text: normalText,
success: green,
error: red,
warning: orange,
} as const;

9
front/src/theme/foundations/index.ts
View File

@ -1,9 +0,0 @@
import { colors } from './colors';
import { shadows } from './shadows';
const foundations = {
colors,
shadows,
};
export default foundations;

21
front/src/theme/foundations/shadows.ts
View File

@ -1,21 +0,0 @@
import { colors } from './colors';
const createOutline = (colorScheme = 'gray') =>
`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)',
};

146
front/src/theme/recipes/button.ts
View File

@ -1,4 +1,3 @@
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 // https://medium.com/@a.heydari.dev/simplifying-chakra-ui-v3-recipes-vs-chakra-factory-a-developers-perspective-4020b62f1b4d
@ -9,7 +8,7 @@ import { defineRecipe, defineStyle, RecipeVariantRecord, SystemStyleObject } fro
// `; // `;
export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxShadowHover }) => { export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxShadowHover }) => {
return defineStyle({ return {
bg, bg,
color, color,
border: '1px solid transparent', border: '1px solid transparent',
@ -29,81 +28,76 @@ export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxSha
_active: { _active: {
bg: bgActive, bg: bgActive,
}, },
}); };
}; };
const buttonRecipe = defineRecipe({ const buttonTheme = {
variants: { primary:
theme: { customVariant({
"@primary": bg: { _light: 'brand.600', _dark: 'brand.300' },
customVariant({ bgHover: { _light: 'brand.700', _dark: 'brand.400' },
bg: { _light: 'brand.600', _dark: 'brand.300' }, bgActive: { _light: 'brand.600', _dark: 'brand.300' },
bgHover: { _light: 'brand.700', _dark: 'brand.400' }, color: { _light: 'white', _dark: 'brand.900' },
bgActive: { _light: 'brand.600', _dark: 'brand.300' }, colorHover: { _light: 'brand.800', _dark: 'brand.100' },
color: { _light: 'white', _dark: 'brand.900' }, boxShadowHover: 'outline-over'
colorHover: { _light: 'brand.800', _dark: 'brand.100' }, }),
boxShadowHover: 'outline-over' secondary:
}), customVariant({
"@secondary": bg: { _light: 'brand.100', _dark: 'brand.900' },
customVariant({ bgHover: { _light: 'brand.200', _dark: 'brand.800' },
bg: { _light: 'brand.100', _dark: 'brand.900' }, bgActive: { _light: 'brand.300', _dark: 'brand.700' },
bgHover: { _light: 'brand.200', _dark: 'brand.800' }, color: { _light: 'brand.700', _dark: 'brand.50' },
bgActive: { _light: 'brand.300', _dark: 'brand.700' }, colorHover: { _light: 'brand.800', _dark: 'brand.100' },
color: { _light: 'brand.700', _dark: 'brand.50' }, boxShadowHover: 'outline-over',
colorHover: { _light: 'brand.800', _dark: 'brand.100' }, }),
boxShadowHover: 'outline-over', danger:
}), customVariant({
"@danger": bg: { _light: 'error.600', _dark: 'error.600' },
customVariant({ bgHover: { _light: 'error.700', _dark: 'error.500' },
bg: { _light: 'error.600', _dark: 'error.600' }, bgActive: { _light: 'error.600', _dark: 'error.500' },
bgHover: { _light: 'error.700', _dark: 'error.500' }, color: { _light: 'white', _dark: 'error.900' },
bgActive: { _light: 'error.600', _dark: 'error.500' }, colorHover: { _light: 'error.700', _dark: 'error.900' },
color: { _light: 'white', _dark: 'error.900' }, boxShadowHover: 'outline-over',
colorHover: { _light: 'error.700', _dark: 'error.900' }, }),
boxShadowHover: 'outline-over', success:
}), customVariant({
"@success": bg: { _light: 'green.300', _dark: 'green.300' },
customVariant({ bgHover: { _light: 'green.400', _dark: 'green.400' },
bg: { _light: 'green.300', _dark: 'green.300' }, bgActive: { _light: 'green.500', _dark: 'green.400' },
bgHover: { _light: 'green.400', _dark: 'green.400' }, color: { _light: 'white', _dark: 'green.900' },
bgActive: { _light: 'green.500', _dark: 'green.400' }, colorHover: { _light: 'green.500', _dark: 'green.900' },
color: { _light: 'white', _dark: 'green.900' }, boxShadowHover: 'outline-over',
colorHover: { _light: 'green.500', _dark: 'green.900' }, }),
boxShadowHover: 'outline-over', progress:
}), {
bg: { _light: `brand.500`, _dark: `brand.300` },
"@progress": overflow: 'hidden',
defineStyle({ /*
bg: { _light: `brand.500`, _dark: `brand.300` }, _after: !props.isLoading
overflow: 'hidden', ? {
/* content: '""',
_after: !props.isLoading position: 'absolute',
? { top: 0,
content: '""', right: 0,
position: 'absolute', bottom: 0,
top: 0, left: 0,
right: 0, transform: 'translateX(-100%)',
bottom: 0, bgGradient: `linear(90deg, brand.100/0 0%, brand.100/2 20%, brand.100/5 60%, v.100/0`,
left: 0, }
transform: 'translateX(-100%)', : undefined,
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',
}),
},
}, },
});
export default buttonRecipe; menu: {
bg: 'back.100',
color: 'brand.900',
borderRadius: 0,
border: 0,
_hover: { background: 'back.300' },
_focus: { border: 'none' },
fontSize: '20px',
textTransform: 'uppercase',
},
};
export default buttonTheme;

6
front/src/theme/recipes/drawer.ts
View File

@ -1,6 +1,6 @@
import { defineRecipe } from '@chakra-ui/react';
const drawerRecipe = defineRecipe({
const drawerRecipe = {
base: { base: {
bg: { _light: 'white', _dark: 'gray.800' }, bg: { _light: 'white', _dark: 'gray.800' },
color: { _light: 'gray.900', _dark: 'whiteAlpha.900' }, color: { _light: 'gray.900', _dark: 'whiteAlpha.900' },
@ -24,6 +24,6 @@ const drawerRecipe = defineRecipe({
defaultVariants: { defaultVariants: {
variant: 'solid', variant: 'solid',
}, },
}); };
export default drawerRecipe; export default drawerRecipe;

6
front/src/theme/recipes/flex.ts
View File

@ -1,7 +1,7 @@
import { defineRecipe } from '@chakra-ui/react';
const flexTheme = defineRecipe({
const flexTheme = {
variants: { variants: {
variant: { variant: {
'@menu': { '@menu': {
@ -15,6 +15,6 @@ const flexTheme = defineRecipe({
}, },
}, },
}, },
}); };
export default flexTheme; export default flexTheme;

5
front/src/theme/recipes/input.ts
View File

@ -1,6 +1,5 @@
import { defineRecipe } from '@chakra-ui/react';
const inputTheme = defineRecipe({ const inputTheme = {
variants: { variants: {
variant: { variant: {
outline: { outline: {
@ -16,6 +15,6 @@ const inputTheme = defineRecipe({
}, },
}, },
}, },
}); };
export default inputTheme; export default inputTheme;

2
front/src/theme/recipes/modal.ts__
View File

@ -1,5 +1,3 @@
import { modalAnatomy as parts } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
const { definePartsStyle, defineMultiStyleConfig } = const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);

27
front/src/theme/recipes/numberInput.ts_
View File

@ -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,
});

5
front/src/theme/recipes/select.ts
View File

@ -1,6 +1,5 @@
import { defineRecipe } from '@chakra-ui/react';
const selectTheme = defineRecipe({ const selectTheme = {
variants: { variants: {
variant: { variant: {
outline: { outline: {
@ -15,6 +14,6 @@ const selectTheme = defineRecipe({
}, },
}, },
}, },
}); };
export default selectTheme; export default selectTheme;

6
front/src/theme/recipes/textarea.ts
View File

@ -1,7 +1,5 @@
import { defineRecipe } from '@chakra-ui/react';
const textAreaTheme = {
const textAreaTheme = defineRecipe({
variants: { variants: {
variant: { variant: {
outline: { outline: {
@ -14,5 +12,5 @@ const textAreaTheme = defineRecipe({
}, },
} }
}, },
}); };
export default textAreaTheme; export default textAreaTheme;

67
front/src/theme/styleguide/buttons.stories.tsx
View File

@ -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: () => (
<Group>
<Button>Default Button</Button>
<IconButton aria-label="Add" ><HiPlus /></IconButton>
</Group>
),
};
export const Primary = {
render: () => (
<Group>
<Button theme="@primary">Primary Button</Button>
<IconButton theme="@primary" aria-label="Add" ><HiPlus /></IconButton>
</Group>
),
};
export const Secondary = {
render: () => (
<Group>
<Button theme="@secondary">Secondary Button</Button>
<IconButton theme="@secondary" aria-label="Add" ><HiPlus /></IconButton>
</Group>
),
};
export const Danger = {
render: () => (
<Group>
<Button theme="@danger">Danger Button</Button>
<IconButton theme="@danger" aria-label="Remove"><HiMinus /></IconButton>
</Group>
),
};
export const Progress = {
render: () => (
<Group>
<VStack>
<Button variant="solid" colorScheme="brand">
Progress Button with Brand ColorScheme
</Button>
<Button variant="solid" colorScheme="error">
Progress Button with Error ColorScheme
</Button>
<Button variant="solid">
Button
</Button>
<IconButton
variant="solid"
theme="@danger"
aria-label="Remove"
><HiMinus /></IconButton>
</VStack>
</Group>
),
};

66
front/src/theme/styleguide/colors.stories.tsx
View File

@ -1,66 +0,0 @@
import { Box, Flex, FlexProps, HStack } from '@chakra-ui/react';
const Color = ({ children, ...rest }: FlexProps) => (
<Flex flex="1" h="16" p="2" {...rest}>
<Box
bg="white"
display="inline-block"
px="2"
py="1"
m="auto"
fontSize="xs"
fontWeight="bold"
borderRadius="md"
>
{children}
</Box>
</Flex>
);
const Colors = ({ colorScheme = 'gray', ...rest }) => (
<HStack
// spacing="0"
overflow="hidden"
boxShadow="lg"
color={`${colorScheme}.700`}
borderRadius="md"
{...rest}
>
<Color bg={`${colorScheme}.50`}>50</Color>
<Color bg={`${colorScheme}.100`}>100</Color>
<Color bg={`${colorScheme}.200`}>200</Color>
<Color bg={`${colorScheme}.300`}>300</Color>
<Color bg={`${colorScheme}.400`}>400</Color>
<Color bg={`${colorScheme}.500`}>500</Color>
<Color bg={`${colorScheme}.600`}>600</Color>
<Color bg={`${colorScheme}.700`}>700</Color>
<Color bg={`${colorScheme}.800`}>800</Color>
<Color bg={`${colorScheme}.900`}>900</Color>
</HStack>
);
const meta = {
title: 'StyleGuide/Colors',
};
export default meta;
export const Brand = {
render: () => <Colors colorScheme="brand" />,
};
export const Gray = {
render: () => <Colors colorScheme="gray" />,
};
export const Error = {
render: () => <Colors colorScheme="error" />,
};
export const Warning = {
render: () => <Colors colorScheme="warning" />,
};
export const Success = {
render: () => <Colors colorScheme="success" />,
};

4
front/src/theme/styles.ts
View File

@ -1,4 +0,0 @@
import { Styles } from '@chakra-ui/theme-tools';
export const styles: Styles = {
};

44
front/src/theme/theme.ts
View File

@ -1,44 +0,0 @@
import * as recipes from './recipes';
import { createSystem, defaultConfig, mergeConfigs, SystemConfig } from "@chakra-ui/react"
import { colors } from "./foundations/colors"
const baseTheme: SystemConfig = {
globalCss: {
body: {
overflowY: 'none',
bg: { _light: 'back.50', _dark: 'back.700' },
color: { _light: 'text.900', _dark: 'text.50' },
fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
},
svg: {
width: "32px",
height: "32px",
aspectRatio: "square",
}
},
theme: {
...recipes,
tokens: {
fonts: {
heading: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
body: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
},
colors,
},
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}" },
},
},
},
},
};
const config = mergeConfigs(defaultConfig, baseTheme);
export const systemTheme = createSystem(config);

5
front/src/types/theme.d.ts vendored
View File

@ -1,5 +0,0 @@
import { ThemeTypings } from '@chakra-ui/react';
import { colors } from '@/theme/foundations/colors';
export type ColorSchemes = ThemeTypings['colorSchemes'] | keyof typeof colors;

33
front/src/ui/Button.tsx Normal file
View File

@ -0,0 +1,33 @@
import { ApplyThemeProperty, useTheme } from "@/theme/ThemeContext";
import { ReactNode, CSSProperties } from "react";
export type ButtonProps = {
children: ReactNode;
onClick?: () => void;
style?: CSSProperties;
componentType?: ApplyThemeProperty['componentType'];
shape?: ApplyThemeProperty['shape'];
palette?: ApplyThemeProperty['palette'];
};
export const Button = ({ children, onClick, style, componentType = "Button", shape, palette }: ButtonProps) => {
const { applyTheme } = useTheme();
const themedStyle = style ? applyTheme({
padding: '10px 20px',
background: '#3182CE',
color: '#FFF',
//border: 'none',
//borderRadius: '4px',
cursor: 'pointer',
fontSize: '16px',
...style,
}, { componentType, shape, palette }) : undefined;
return (
<button
onClick={onClick}
style={themedStyle}
>
{children}
</button>
);
};

33
front/src/ui/Div.tsx Normal file
View File

@ -0,0 +1,33 @@
import { ApplyThemeProperty, useTheme } from '@/theme/ThemeContext';
import { CSSProperties, ReactNode, useState } from 'react';
export type DivProps = {
children?: ReactNode;
onClick?: () => void;
style?: CSSProperties;
_hover?: CSSProperties;
componentType?: ApplyThemeProperty['componentType'];
shape?: ApplyThemeProperty['shape'];
palette?: ApplyThemeProperty['palette'];
};
export const Div = ({ children, onClick, style, _hover, ...themeToApply }: DivProps) => {
const { applyTheme } = useTheme();
const [hover, setHover] = useState(false);
const hoverTheme = hover ? _hover : {};
const themedStyle = style ? applyTheme({ ...style, ...hoverTheme }, themeToApply) : undefined;
return (
<div
onMouseEnter={() => {
setHover(true);
}}
onMouseLeave={() => {
setHover(false);
}}
onClick={onClick}
style={themedStyle}
>
{children}
</div>
);
};

9
front/src/ui/ErrorManager.tsx Normal file
View File

@ -0,0 +1,9 @@
import { RestErrorResponse } from "@/back-api";
export const registerAnError = (error) => {
console.error(`Detect error: ${JSON.stringify(error, null, 2)}`);
}
export const registerAnApiError = (error: RestErrorResponse) => {
console.error(`Detect error: ${JSON.stringify(error, null, 2)}`);
}

76
front/src/ui/Flex.tsx Normal file
View File

@ -0,0 +1,76 @@
import React, { CSSProperties, ReactNode } from 'react';
import { Div } from './Div';
import { ApplyThemeProperty } from '@/theme/ThemeContext';
export type FlexProps = {
children?: ReactNode;
componentType?: ApplyThemeProperty['componentType'];
shape?: ApplyThemeProperty['shape'];
palette?: ApplyThemeProperty['palette'];
onClick?: () => void;
direction?: 'row' | 'column';
gap?: string | number;
justify?: CSSProperties['justifyContent'];
align?: CSSProperties['alignItems'];
width?: CSSProperties['width'];
height?: CSSProperties['height'];
padding?: CSSProperties['padding'];
margin?: CSSProperties['margin'];
maxWidth?: CSSProperties['maxWidth'];
minWidth?: CSSProperties['minWidth'];
maxHeight?: CSSProperties['maxHeight'];
minHeight?: CSSProperties['maxHeight'];
paddingLeft?: CSSProperties['paddingLeft'];
paddingRight?: CSSProperties['paddingRight'];
paddingTop?: CSSProperties['paddingTop'];
paddingBottom?: CSSProperties['paddingBottom'];
marginLeft?: CSSProperties['marginLeft'];
marginRight?: CSSProperties['marginRight'];
marginTop?: CSSProperties['marginTop'];
marginBottom?: CSSProperties['marginBottom'];
style?: Omit<CSSProperties, "flexDirection" | "display" | "justifyContent" | "alignItems" | "alignItems" | "direction">
_hover?: CSSProperties;
};
export const Flex = ({
children,
onClick,
direction = 'row',
justify = 'flex-start',
gap,
align = 'stretch',
width,
height,
padding,
margin,
maxWidth, minWidth, maxHeight, minHeight,
paddingLeft, paddingRight, paddingTop, paddingBottom,
marginLeft, marginRight, marginTop, marginBottom,
componentType = "Flex", shape, palette,
style, _hover }: FlexProps) => {
return (
<Div
onClick={onClick}
style={{
display: 'flex',
flexDirection: direction,
justifyContent: justify,
gap: gap,
alignItems: align,
width,
height,
padding,
margin,
maxWidth, minWidth, maxHeight, minHeight,
paddingLeft, paddingRight, paddingTop, paddingBottom,
marginLeft, marginRight, marginTop, marginBottom,
...style,
}}
_hover={_hover}
componentType={componentType} shape={shape} palette={palette}
>
{children}
</Div >
);
};

23
front/src/ui/FullPage.tsx Normal file
View File

@ -0,0 +1,23 @@
import { ReactNode, CSSProperties } from "react";
import { Div } from "./Div";
export type FullPageProps = {
children: ReactNode;
style?: CSSProperties;
};
export const FullPage = ({ children, style }: FullPageProps) => {
return (
<Div
style={{
top: '0',
bottom: '0',
right: '0',
left: '0',
...style,
}}
>
{children}
</Div>
);
};

25
front/src/ui/HStack.tsx Normal file
View File

@ -0,0 +1,25 @@
import { ReactNode, CSSProperties } from "react";
import { Div } from "./Div";
export type HStackProps = {
children: ReactNode;
spacing?: CSSProperties['gap'];
align?: CSSProperties['alignItems'];
style?: Omit<CSSProperties, "gap" | "alignItems">;
};
export const HStack = ({ children, spacing = '8px', align = 'flex-start', style }: HStackProps) => {
return (
<Div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: align,
gap: spacing,
...style,
}}
>
{children}
</Div>
);
};

30
front/src/ui/Image.tsx Normal file
View File

@ -0,0 +1,30 @@
import { CSSProperties, RefObject } from "react";
import { useTheme } from "@/theme/ThemeContext";
export type ImageProps = {
ref?: RefObject<any>;
src?: string;
boxSize?: string;
onChange?: (e) => void;
style?: Omit<CSSProperties, "fontSize" | "fontWeight" | "color">;
};
export const Image = ({
ref,
src,
boxSize,
onChange,
style,
}: ImageProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle({ width: boxSize, height: boxSize, ...style }) : undefined;
return (
<img
ref={ref}
src={src}
onChange={onChange}
style={themedStyle}
>
</img>
);
};

29
front/src/ui/Input.tsx Normal file
View File

@ -0,0 +1,29 @@
import { ReactNode, CSSProperties, RefObject } from "react";
import { Div } from "./Div";
import { useTheme } from "@/theme/ThemeContext";
export type InputProps = {
ref?: RefObject<any>;
value?: string;
onChange?: (e) => void;
style?: Omit<CSSProperties, "fontSize" | "fontWeight" | "color">;
};
export const Input = ({
ref,
value,
onChange,
style,
}: InputProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle(style) : undefined;
return (
<input
ref={ref}
value={value}
onChange={onChange}
style={themedStyle}
>
</input>
);
};

16
front/src/ui/Link.tsx Normal file
View File

@ -0,0 +1,16 @@
import { CSSProperties, ReactNode } from 'react'
import { useNavigate } from 'react-router-dom';
import { Div } from './Div';
export type LinkProps = {
href?: string;
style?: CSSProperties;
children?: ReactNode;
}
export const Link = ({ href = "/", style, children }: LinkProps) => {
const navigate = useNavigate();
return (<Div onClick={() => navigate(href)}
style={style}
> {children}</Div >);
}

36
front/src/ui/Span.tsx Normal file
View File

@ -0,0 +1,36 @@
import { ReactNode, CSSProperties } from "react";
import { Div } from "./Div";
import { useTheme } from "@/theme/ThemeContext";
export type SpanProps = {
children: ReactNode;
color?: string;
fontSize?: CSSProperties["fontSize"];
fontWeight?: CSSProperties["fontWeight"];
userSelect?: CSSProperties["userSelect"];
style?: Omit<CSSProperties, "fontSize" | "fontWeight" | "color">;
};
export const Span = ({ children,
fontSize = '16px',
fontWeight = "normal",
color = "#000000",
userSelect,
style,
}: SpanProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle({
fontSize,
color,
fontWeight,
userSelect,
...style,
}) : undefined;
return (
<span
style={themedStyle}
>
{children}
</span>
);
};

12
front/src/ui/Table/body.tsx Normal file
View File

@ -0,0 +1,12 @@
import { useTheme } from "@/theme/ThemeContext";
import { CSSProperties, ReactNode } from "react"
export type BodyProps = {
children?: ReactNode;
style?: CSSProperties;
};
export const Body = ({ children, style }: BodyProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle(style) : undefined;
return <tbody style={themedStyle}>{children}</tbody>
}

12
front/src/ui/Table/cell.tsx Normal file
View File

@ -0,0 +1,12 @@
import { useTheme } from "@/theme/ThemeContext";
import { CSSProperties, ReactNode } from "react"
export type CellProps = {
children?: ReactNode;
style?: CSSProperties;
};
export const Cell = ({ children, style }: CellProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle(style) : undefined;
return <td style={themedStyle}>{children}</td>
}

12
front/src/ui/Table/columnHeader.tsx Normal file
View File

@ -0,0 +1,12 @@
import { useTheme } from "@/theme/ThemeContext";
import { CSSProperties, ReactNode } from "react"
export type ColumnHeaderProps = {
children?: ReactNode;
style?: CSSProperties;
};
export const ColumnHeader = ({ children, style }: ColumnHeaderProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle(style) : undefined;
return <th style={themedStyle}>{children}</th>
}

Some files were not shown because too many files have changed in this diff Show More