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

[DEV] restart from scratch with no toolbox ==> maybe slower but funny

Browse Source
This commit is contained in:
Edouard DUPIN 2025-01-21 00:54:27 +01:00
parent d52052de90
commit f9019ec508
96 changed files with 999 additions and 3437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
front/package.json
View File

@ -29,16 +29,6 @@
"*.{ts,tsx,js,jsx,json}": "prettier --write"
},
"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",
"next-themes": "^0.4.4",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-error-boundary": "5.0.0",
@ -50,7 +40,6 @@
"zustand": "5.0.3"
},
"devDependencies": {
"@chakra-ui/styled-system": "^2.12.0",
"@playwright/test": "1.49.1",
"@storybook/addon-actions": "8.4.7",
"@storybook/addon-essentials": "8.4.7",
@ -82,7 +71,6 @@
"lint-staged": "15.3.0",
"npm-check-updates": "^17.1.13",
"prettier": "3.4.2",
"puppeteer": "24.0.0",
"react-is": "19.0.0",
"storybook": "8.4.7",
"ts-node": "10.9.2",

2114
front/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

221
front/src/App.tsx
View File

@ -1,132 +1,109 @@
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 { USERS, USERS_COLLECTION } from '@/service/session';
import { hashLocalData } from '@/utils/sso';
import { Toaster } from './components/ui/toaster';
import { systemTheme } from './theme/theme';
import { FullPage } from './ui';
const AppEnvHint = () => {
const dialog = useDisclosure();
const [selectUserTest, setSelectUserTest] = useState<string>('NO_USER');
//const setUser = useRightsStore((store) => store.setUser);
const buildEnv =
process.env.NODE_ENV === 'development'
? 'Development'
: import.meta.env.VITE_DEV_ENV_NAME;
const envName: Array<string> = [];
!!buildEnv && envName.push(buildEnv);
if (!envName.length) {
return null;
}
const handleChange = (selectedOption) => {
console.log(`SELECT: [${selectedOption.target.value}]`);
setSelectUserTest(selectedOption.target.value);
};
const onClose = () => {
dialog.onClose();
if (selectUserTest == 'NO_USER') {
window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
} else {
window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
}
};
// const AppEnvHint = () => {
// const dialog = useDisclosure();
// const [selectUserTest, setSelectUserTest] = useState<string>('NO_USER');
// //const setUser = useRightsStore((store) => store.setUser);
// const buildEnv =
// process.env.NODE_ENV === 'development'
// ? 'Development'
// : import.meta.env.VITE_DEV_ENV_NAME;
// const envName: Array<string> = [];
// !!buildEnv && envName.push(buildEnv);
// if (!envName.length) {
// return null;
// }
// const handleChange = (selectedOption) => {
// console.log(`SELECT: [${selectedOption.target.value}]`);
// setSelectUserTest(selectedOption.target.value);
// };
// const onClose = () => {
// dialog.onClose();
// if (selectUserTest == 'NO_USER') {
// window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
// } else {
// window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
// }
// };
return (
<>
<Box
zIndex="100000"
position="fixed"
top="0"
insetStart="0"
insetEnd="0"
h="2px"
bg="warning.400"
as="button"
cursor="pointer"
data-test-id="devtools"
onClick={dialog.onOpen}
>
<Text
position="fixed"
top="0"
insetStart="4"
bg="warning.400"
color="warning.900"
fontSize="0.6rem"
fontWeight="bold"
px="10px"
marginLeft="25%"
borderBottomStartRadius="sm"
borderBottomEndRadius="sm"
textTransform="uppercase"
>
{envName.join(' : ')}
</Text>
</Box>
<DialogRoot open={dialog.open} onOpenChange={dialog.onClose}>
<DialogContent>
<DialogHeader>Outils développeurs</DialogHeader>
<DialogTrigger asChild>
<Button variant="outline" size="sm">
{dialog.open ? "Close" : "Open"} Dialog
</Button>
</DialogTrigger>
<DialogBody>
<Stack>
<Text>User</Text>
<SelectRoot onChange={handleChange} collection={USERS_COLLECTION}>
<SelectTrigger>
<SelectValueText placeholder="Select test user" />
</SelectTrigger>
<SelectContent>
{USERS_COLLECTION.items.map((value) => (
<SelectItem item={value} key={value.value}>
{value.label}
</SelectItem>
))}
</SelectContent>
</SelectRoot>
</Stack>
</DialogBody>
<DialogFooter>
<Button onClick={onClose}>Apply</Button>
</DialogFooter>
</DialogContent>
</DialogRoot>
</>
);
};
// return (
// <>
// <div style={{
// zIndex: "100000",
// position: "fixed",
// top: "0",
// height: "2px",
// background: "warning.400",
// cursor: "pointer"
// }}
// data-test-id="devtools"
// onClick={dialog.onOpen}
// >
// <div style={{
// position: "fixed",
// top: "0",
// background: "warning.400",
// color: "warning.900",
// fontSize: "0.6rem",
// fontWeight: "bold",
// paddingLeft: "10px",
// paddingRight: "10px",
// marginLeft: "25%",
// borderRadius: "10px 0 10px 0",
// textTransform: "uppercase",
// }}
// >
// {envName.join(' : ')}
// </div>
// </div>
// <Dialog.Root open={dialog.open} onOpenChange={dialog.onClose}>
// <Dialog.Trigger asChild>
// <Button>
// {dialog.open ? "Close" : "Open"} Dialog
// </Button>
// </Dialog.Trigger>
// <Portal>
// <Dialog.Backdrop />
// <Dialog.Positioner>
// <Dialog.Content>
// <Dialog.Title>Outils développeurs</Dialog.Title>
// <Dialog.Description>
// <HStack>
// <Text>User</Text>
// <Select.Root onChange={handleChange} collection={USERS_COLLECTION}>
// <Select.Trigger>
// <SelectValueText placeholder="Select test user" />
// </Select.Trigger>
// <Select.Content>
// {USERS_COLLECTION.items.map((value) => (
// <Select.Item item={value} key={value.value}>
// {value.label}
// </Select.Item>
// ))}
// </Select.Content>
// </Select.Root>
// </HStack>
// </Dialog.Description>
// <Dialog.CloseTrigger>
// <Button onClick={onClose}>Apply</Button>
// </Dialog.CloseTrigger>
// </Dialog.Content>
// </Dialog.Positioner>
// </Portal>
// </Dialog.Root>
// </>
// );
// };
const App = () => {
return (
<ChakraProvider value={systemTheme}>
<AppEnvHint />
<SpaApp />
<Toaster />
</ChakraProvider>
<FullPage data-test-id="Full-root-page">
{/* <AppEnvHint /> */}
<SpaApp data-test-id="app" />
{/* <Toaster /> */}
</FullPage>
);
};

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

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

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

@ -1,11 +1,9 @@
import { 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 { Icon } from './Icon';
import { ObjectId } from '@/back-api';
import { Flex } from '@/ui';
export type CoversProps = Omit<BoxProps, "iconEmpty"> & {
data?: ObjectId[];
@ -45,26 +43,28 @@ export const Covers = ({
return <Icon icon={iconEmpty} sizeIcon={size} />;
} else {
return (
<Box
width={size}
height={size}
minHeight={size}
minWidth={size}
borderColor="blue"
borderWidth="1px"
margin="auto"
<Flex
style={{
width: size,
height: size,
minHeight: size,
minWidth: size,
borderColor: "blue",
borderWidth: "1px",
margin: "auto",
}}
{...rest}
></Box>
></Flex>
);
}
}
if (slideshow === false || data.length === 1) {
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 urlPrevious = DataUrlAccess.getThumbnailUrl(data[previousImageIndex]);
return <Flex
return <></>/*<Flex
position="relative"
// {...rest}
maxWidth={size}
@ -95,5 +95,5 @@ export const Covers = ({
opacity={topOpacity}
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 = () => {
return (
<Box
width="full"
height="25%"
minHeight="250px"
<Flex
style={{
width: "full",
height: "25%",
minHeight: "250px",
}}
// borderWidth="1px"
// borderColor="red"
></Box>
></Flex>
);
};

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

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

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

@ -1,6 +1,5 @@
import React, { ReactNode, useEffect } from 'react';
import { Flex, Image } from '@chakra-ui/react';
import { useLocation } from 'react-router-dom';
import background from '@/assets/images/ikon.svg';

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

@ -1,6 +1,5 @@
import React, { ReactNode, useEffect } from 'react';
import { Flex, FlexProps } from '@chakra-ui/react';
import { useLocation } from 'react-router-dom';
import { PageLayout } from '@/components/Layout/PageLayout';

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

@ -1,9 +1,5 @@
import { useState } from 'react';
import {
Group,
Input,
} from '@chakra-ui/react';
import { MdSearch } from 'react-icons/md';
export type SearchInputProps = {

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

@ -1,13 +1,6 @@
import { ReactNode } from 'react';
import {
Box,
Flex,
HStack,
IconButton,
Text,
useDisclosure,
} from '@chakra-ui/react';
import {
LuAlignJustify,
LuArrowBigLeft,
@ -25,15 +18,10 @@ import { colors } from '@/theme/foundations/colors';
import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
import { useSessionService } from '@/service/session';
import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
import {
DrawerBody,
DrawerContent,
DrawerHeader,
DrawerRoot,
} from '@/components/ui/drawer';
import { Button } from '../ui/themed';
import { THEME } from '@/theme/theme';
import { useDisclosure } from '@/utils/disclosure';
import { Button, Flex, Text } from '@/ui';
export const TOP_BAR_HEIGHT = '50px';
@ -87,22 +75,24 @@ export const TopBar = ({ title, children }: TopBarProps) => {
};
return (
<Flex
position="absolute"
top={0}
left={0}
right={0}
height={TOP_BAR_HEIGHT}
alignItems="center"
justifyContent="space-between"
backgroundColor={backColor}
gap="2"
px="2"
boxShadow={'0px 2px 4px ' + colors.back[900]}
zIndex={200}
align="center"
justify="space-between"
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
height: TOP_BAR_HEIGHT,
backgroundColor: backColor,
padding: "0 2 0 2",
boxShadow: `0px 2px 4px ${colors.back[900]}`,
zIndex: 200,
}}
>
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onChangeTheme}>
<LuAlignJustify />
<Text paddingLeft="3px" fontWeight="bold">
<Text style={{ padding: "0 0 0 3px" }} fontWeight="bold">
Karusic
</Text>
</Button>
@ -110,77 +100,79 @@ export const TopBar = ({ title, children }: TopBarProps) => {
<Text
fontSize="20px"
fontWeight="bold"
textTransform="uppercase"
marginRight="auto"
userSelect="none"
style={{
textTransform: "uppercase",
marginRight: "auto",
userSelect: "none",
}}
>
{title}
</Text>
)}
{children}
<Flex right="0">
<Flex style={{ right: 0 }}>
{session?.state !== SessionState.CONNECTED && (
<>
<Button {...BUTTON_TOP_BAR_PROPERTY} theme="@primary" onClick={onSignIn}>
<Button {...BUTTON_TOP_BAR_PROPERTY} {...THEME.Button.primary} onClick={onSignIn}>
<LuLogIn />
<Text paddingLeft="3px" fontWeight="bold">
<Text style={{ paddingLeft: "0 0 0 3px" }} fontWeight="bold">
Sign-in
</Text>
</Button>
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={onSignUp}
disabled={true}
// disabled={true}
>
<MdMore />
<Text paddingLeft="3px" fontWeight="bold">
<Text style={{ padding: "0 0 0 3px" }} fontWeight="bold">
Sign-up
</Text>
</Button>
</>
)}
{session?.state === SessionState.CONNECTED && (
<MenuRoot>
<MenuTrigger asChild>
{/* {session?.state === SessionState.CONNECTED && (
<Menu.Root>
<Menu.Trigger asChild>
<IconButton
as={IconButton}
aria-label="Options"
{...BUTTON_TOP_BAR_PROPERTY}
width={TOP_BAR_HEIGHT}
><MdSupervisedUserCircle /></IconButton>
</MenuTrigger>
<MenuContent>
<MenuItem value="user" valueText="user" _hover={{}} color={useColorModeValue('brand.800', 'brand.200')}>
</Menu.Trigger>
<Menu.Content>
<Menu.Item value="user" valueText="user" _hover={{}} color={useColorModeValue('brand.800', 'brand.200')}>
<MdSupervisedUserCircle />
<Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box>
</MenuItem>
<MenuItem value="Settings" valueText="Settings" onClick={onSettings}><LuSettings />Settings</MenuItem>
<MenuItem value="Help" valueText="Help" onClick={onHelp}><MdHelp /> Help</MenuItem>
<MenuItem value="Sign-out" valueText="Sign-out" onClick={onSignOut}>
</Menu.Item>
<Menu.Item value="Settings" valueText="Settings" onClick={onSettings}><LuSettings />Settings</Menu.Item>
<Menu.Item value="Help" valueText="Help" onClick={onHelp}><MdHelp /> Help</Menu.Item>
<Menu.Item value="Sign-out" valueText="Sign-out" onClick={onSignOut}>
<LuLogOut /> Sign-out
</MenuItem>
</Menu.Item>
{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
</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
</MenuItem>
</Menu.Item>
)}
</MenuContent>
</MenuRoot>
)}
</Menu.Content>
</Menu.Root>
)} */}
</Flex>
<DrawerRoot
{/* <Drawer.Root
placement="start"
onOpenChange={drawerDisclose.onClose}
open={drawerDisclose.open}
data-testid="top-bar_drawer-root"
>
<DrawerContent
data-testid="top-bar_drawer-content">
<DrawerHeader
<Drawer.Content
data-test-id="top-bar_drawer-content">
<Drawer.Header
paddingY="auto"
as="button"
onClick={drawerDisclose.onClose}
@ -195,8 +187,8 @@ export const TopBar = ({ title, children }: TopBarProps) => {
Karusic
</Text>
</HStack>
</DrawerHeader>
<DrawerBody paddingX="0px">
</Drawer.Header>
<Drawer.Body paddingX="0px">
<Button
background="#00000000"
borderRadius="0px"
@ -232,9 +224,9 @@ export const TopBar = ({ title, children }: TopBarProps) => {
Add Media
</Text>
</Button>
</DrawerBody>
</DrawerContent>
</DrawerRoot>
</Drawer.Body>
</Drawer.Content>
</Drawer.Root> */}
</Flex>
);
};

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

@ -1,4 +1,4 @@
import { Flex, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu';
import { Album } from '@/back-api';

41
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 { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
import { Button } from '../ui/themed';
import { customVariant } from '@/theme/recipes/button';
import { THEME } from '@/theme/theme';
export type MenuElement = {
name: string;
@ -17,44 +11,29 @@ export type ContextMenuProps = {
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) => {
if (!elements) {
return <></>;
}
return (
<MenuRoot
<Menu.Root
data-testid="context-menu">
<MenuTrigger asChild
<Menu.Trigger asChild
data-testid="context-menu_trigger">
{/* 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 />
</Button>
</MenuTrigger>
<MenuContent
</Menu.Trigger>
<Menu.Content
data-testid="context-menu_content">
{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.name}
</MenuItem>
</Menu.Item>
))}
</MenuContent>
</MenuRoot >
</Menu.Content>
</Menu.Root >
);
};

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

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

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

@ -1,6 +1,5 @@
import { ReactNode } from 'react';
import { Flex, Text } from '@chakra-ui/react';
import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
export type FormGroupProps = {

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

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

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

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

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

@ -1,9 +1,9 @@
import { useState } from 'react';
import { Box } from '@chakra-ui/react';
import { FormSelect } from '@/components/form/FormSelect';
import { useFormidable } from '@/components/form/Formidable';
import { Flex } from '@/ui';
export default {
title: 'Components/FormSelect',
@ -94,7 +94,7 @@ export const DarkBackground = {
render: () => {
const form = useFormidable<BasicFormData>({});
return (
<Box p="4" color="white" bg="gray.800">
<Flex style={{ padding: "4", color: "white", background: "gray.800" }}>
<FormSelect
label="Simple Title for (DarkBackground)"
form={form}
@ -105,7 +105,7 @@ export const DarkBackground = {
{ 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 { Text } from '@chakra-ui/react';
import { FormGroup } from '@/components/form/FormGroup';
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 { Box } from '@chakra-ui/react';
import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
import { useFormidable } from '@/components/form/Formidable';
import { Flex } from '@/ui';
export default {
title: 'Components/FormSelectMultipleMultiple',
@ -94,7 +94,7 @@ export const DarkBackground = {
render: () => {
const form = useFormidable<BasicFormData>({});
return (
<Box p="4" color="white" bg="gray.800">
<Flex style={{ padding: "4", color: "white", background: "gray.800" }}>
<FormSelectMultiple
label="Simple Title for (DarkBackground)"
form={form}
@ -105,7 +105,7 @@ export const DarkBackground = {
{ 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 { Textarea } from '@chakra-ui/react';
import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable';

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

@ -1,4 +1,4 @@
import { Flex, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu';
import { Gender } from '@/back-api';

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

@ -1,10 +1,5 @@
import { useRef, useState } from 'react';
import {
Flex,
Text,
useDisclosure,
} from '@chakra-ui/react';
import {
MdAdminPanelSettings,
MdDeleteForever,
@ -24,8 +19,7 @@ import { useAlbumService, useSpecificAlbum } from '@/service/Album';
import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksWithAlbumId } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator';
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
import { Button } from '../ui/themed';
import { useDisclosure } from '@/utils/disclosure';
export type AlbumEditPopUpProps = {};
@ -135,7 +129,7 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
);
};
return (
<DialogRoot
<Dialog.Root
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
@ -145,11 +139,11 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
>
{/* <DialogOverlay /> */}
{/* <DialogCloseTrigger /> */}
<DialogContent>
<DialogHeader>Edit Album</DialogHeader>
<Dialog.Content>
<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 && (
<>
<FormGroup isRequired label="Id">
@ -211,8 +205,8 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
/>
</>
)}
</DialogBody>
<DialogFooter>
</Dialog.Body>
<Dialog.Footer>
<Button
onClick={() => setAdmin((value) => !value)}
marginRight="auto"
@ -235,8 +229,8 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</DialogContent>
</DialogRoot>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
);
};

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

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

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

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

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

@ -1,10 +1,6 @@
import { useRef, useState } from 'react';
import {
Flex,
Text,
useDisclosure,
} from '@chakra-ui/react';
import {
MdAdminPanelSettings,
MdDeleteForever,
@ -12,7 +8,6 @@ import {
MdWarning,
} from 'react-icons/md';
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
import { useNavigate, useParams } from 'react-router-dom';
import { Gender, GenderResource } from '@/back-api';
@ -26,7 +21,7 @@ import { useGenderService, useSpecificGender } from '@/service/Gender';
import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksOfAGender } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator';
import { Button } from '../ui/themed';
import { useDisclosure } from '@/utils/disclosure';
export type GenderEditPopUpProps = {};
@ -134,7 +129,7 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
);
};
return (
<DialogRoot
<Dialog.Root
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
@ -143,11 +138,11 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
data-testid="gender-edit-pop-up"
>
{/* <DialogOverlay /> */}
<DialogContent>
<DialogHeader>Edit Gender</DialogHeader>
<Dialog.Content>
<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 && (
<>
<FormGroup isRequired label="Id">
@ -204,8 +199,8 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
/>
</>
)}
</DialogBody>
<DialogFooter>
</Dialog.Body>
<Dialog.Footer>
<Button
onClick={() => setAdmin((value) => !value)}
marginRight="auto"
@ -228,8 +223,8 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</DialogContent>
</DialogRoot>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
);
};

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

@ -1,13 +1,5 @@
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 = {
title: string;
@ -41,7 +33,7 @@ export const PopUpUploadProgress = ({
const initialRef = useRef<HTMLButtonElement>(null);
const finalRef = useRef<HTMLButtonElement>(null);
return (
<DialogRoot
<Dialog.Root
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
@ -50,11 +42,11 @@ export const PopUpUploadProgress = ({
data-testid="upload-progress-edit-pop-up"
>
{/* <DialogOverlay /> */}
<DialogContent>
<DialogHeader>{title}</DialogHeader>
<Dialog.Content>
<Dialog.Header>{title}</Dialog.Header>
{/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} paddingLeft="18px">
<Dialog.Body pb={6} paddingLeft="18px">
<Flex direction="column" gap="10px">
{isFinished ? (
<Text fontSize="20px" fontWeight="bold">
@ -85,8 +77,8 @@ export const PopUpUploadProgress = ({
</Text>
)}
</Flex>
</DialogBody>
<DialogFooter>
</Dialog.Body>
<Dialog.Footer>
{isFinished ? (
<Button onClick={onClose} theme="@success">
Ok
@ -96,8 +88,8 @@ export const PopUpUploadProgress = ({
Abort
</Button>
)}
</DialogFooter>
</DialogContent>
</DialogRoot>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
);
};

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

@ -1,11 +1,5 @@
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 { useNavigate, useParams } from 'react-router-dom';
@ -25,7 +19,7 @@ import { useOrderedGenders } from '@/service/Gender';
import { useServiceContext } from '@/service/ServiceContext';
import { useSpecificTrack, useTrackService } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator';
import { Button } from '../ui/themed';
import { useDisclosure } from '@/utils/disclosure';
export type TrackEditPopUpProps = {};
@ -87,7 +81,7 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
);
};
return (
<DialogRoot
<Dialog.Root
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
@ -96,11 +90,11 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
data-testid="track-edit-pop-up"
>
{/* <DialogOverlay /> */}
<DialogContent>
<DialogHeader>Edit Track</DialogHeader>
<Dialog.Content>
<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 && (
<>
<FormGroup isRequired label="Id">
@ -170,8 +164,8 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
/>
</>
)}
</DialogBody>
<DialogFooter>
</Dialog.Body>
<Dialog.Footer>
<Button
onClick={() => setAdmin((value) => !value)}
marginRight="auto"
@ -194,8 +188,8 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</DialogContent>
</DialogRoot>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
);
};

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

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

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

@ -1,14 +1,5 @@
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 { SelectList, SelectListModel } from '@/components/select/SelectList';

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

@ -1,6 +1,5 @@
import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
import { Button, Flex, Input, Spinner } from '@chakra-ui/react';
import {
MdClose,
MdEdit,

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

@ -1,5 +1,4 @@
import { Flex, Text } from '@chakra-ui/react';
import { LuMusic2, LuPlay } from 'react-icons/lu';
import { Track } from '@/back-api';
import { Covers } from '@/components/Cover';

3
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 { Covers } from '@/components/Cover';

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

@ -1,4 +1,4 @@
import { Flex, Skeleton } from '@chakra-ui/react';
export const DisplayTrackSkeleton = () => {
return (

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

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

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

@ -1,4 +1,4 @@
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
import { MdControlCamera } from 'react-icons/md';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';

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

@ -1,4 +1,4 @@
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
import { MdDangerous } from 'react-icons/md';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';

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

@ -1,4 +1,4 @@
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
import { MdSignpost } from 'react-icons/md';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';

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

@ -1,18 +1,12 @@
import { Button } from '@/ui';
import { useDisclosure } from '@/utils/disclosure';
import React, { FC } from 'react';
import {
AlertDescription,
AlertRoot,
AlertTitle,
Box,
Collapsible,
useDisclosure,
} from '@chakra-ui/react';
import {
FallbackProps,
ErrorBoundary as ReactErrorBoundary,
} from 'react-error-boundary';
import { Button } from '@/components/ui/themed';
import { LuChevronUp, LuChevronDown } from 'react-icons/lu';
const ErrorFallback = ({ error }: FallbackProps) => {

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

@ -1,4 +1,4 @@
import { createIcon } from '@chakra-ui/react';
export const DoubleArrowIcon = createIcon({
displayName: 'DoubleArrowIcon',

15
front/src/main.tsx
View File

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

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

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

54
front/src/scene/AppRoutes.tsx
View File

@ -1,4 +1,4 @@
import { createBrowserHistory } from 'history';
// import { createBrowserHistory } from 'history';
import {
unstable_HistoryRouter as HistoryRouter,
Route,
@ -21,31 +21,31 @@ import { OnAirPage } from './onAir/OnAirPage';
export const AppRoutes = () => {
const { isReadable } = useHasRight('user');
return (
<HistoryRouter
// @ts-expect-error
history={createBrowserHistory({ window })}
basename="/karusic"
>
<Routes>
{/* Need to keep it in all case, it is the only way to log-in */}
<Route path="sso/*" element={<SSORoutes />} />
{isReadable ? (
<>
<Route path="/" element={<HomePage />} />
<Route path="help" element={<HelpPage />} />
<Route path="settings" element={<SettingsPage />} />
<Route path="add" element={<AddPage />} />
<Route path="on-air/*" element={<OnAirPage />} />
<Route path="artist/*" element={<ArtistRoutes />} />
<Route path="album/*" element={<AlbumRoutes />} />
<Route path="gender/*" element={<GenderRoutes />} />
<Route path="track/*" element={<TrackRoutes />} />
<Route path="*" element={<Error404 />} />
</>
) : (
<Route path="*" element={<Error401 />} />
)}
</Routes>
</HistoryRouter>
// <HistoryRouter
// // @ts-expect-error
// history={createBrowserHistory({ window })}
// basename="/karusic"
// >
<Routes>
{/* Need to keep it in all case, it is the only way to log-in */}
<Route path="sso/*" element={<SSORoutes />} />
{isReadable ? (
<>
<Route path="/" element={<HomePage />} />
<Route path="help" element={<HelpPage />} />
<Route path="settings" element={<SettingsPage />} />
<Route path="add" element={<AddPage />} />
<Route path="on-air/*" element={<OnAirPage />} />
<Route path="artist/*" element={<ArtistRoutes />} />
<Route path="album/*" element={<AlbumRoutes />} />
<Route path="gender/*" element={<GenderRoutes />} />
<Route path="track/*" element={<TrackRoutes />} />
<Route path="*" element={<Error404 />} />
</>
) : (
<Route path="*" element={<Error401 />} />
)}
</Routes>
// </HistoryRouter>
);
};

4
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 { Route, Routes, useNavigate, useParams } from 'react-router-dom';
@ -10,7 +9,6 @@ import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
import { DisplayTrack } from '@/components/track/DisplayTrack';
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album';

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

@ -10,8 +10,7 @@ import { TopBar } from '@/components/TopBar/TopBar';
import { DisplayAlbum } from '@/components/album/DisplayAlbum';
import { useOrderedAlbums } from '@/service/Album';
import { useColorModeValue } from '@/components/ui/color-mode';
import { BASE_WRAP_SPACING, BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing';
import { Flex, HStack } from '@chakra-ui/react';
import { BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing';
export const AlbumsPage = () => {
const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
@ -51,7 +50,7 @@ export const AlbumsPage = () => {
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
}}
onClick={() => onSelectItem(data.id)}
onClick={() => onSelect.Item(data.id)}
>
<DisplayAlbum dataAlbum={data} />
</Flex>

5
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, MdPerson } from 'react-icons/md';
import { MdEdit } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
import { Covers } from '@/components/Cover';

5
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 { Route, Routes, useNavigate, useParams } from 'react-router-dom';
@ -13,7 +12,7 @@ import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp';
import { useSpecificArtist } from '@/service/Artist';
import { useAlbumIdsOfAnArtist } from '@/service/Track';
import { useColorModeValue } from '@/components/ui/color-mode';
import { BASE_WRAP_HEIGHT, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
import { BASE_WRAP_HEIGHT, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
export const ArtistDetailPage = () => {
const { artistId } = useParams();

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

@ -1,7 +1,5 @@
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 { Artist, Track } from '@/back-api';
@ -12,7 +10,7 @@ import { SearchInput } from '@/components/SearchInput';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { useOrderedArtists } from '@/service/Artist';
import { useColorModeValue } from '@/components/ui/color-mode';
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 { useActivePlaylistService } from '@/service/ActivePlaylist';
import { shuffleArray } from '@/utils/arrayTools';

4
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 { Route, Routes, useNavigate, useParams } from 'react-router-dom';
@ -10,7 +9,6 @@ import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { GenderEditPopUp } from '@/components/popup/GenderEditPopUp';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
import { DisplayTrack } from '@/components/track/DisplayTrack';
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificGender } from '@/service/Gender';

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

@ -10,7 +10,7 @@ import { TopBar } from '@/components/TopBar/TopBar';
import { DisplayGender } from '@/components/gender/DisplayGender';
import { useOrderedGenders } from '@/service/Gender';
import { useColorModeValue } from '@/components/ui/color-mode';
import { Flex, HStack } from '@chakra-ui/react';
import { Flex, HStack } from '@/ui';
export const GendersPage = () => {
const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
@ -35,20 +35,24 @@ export const GendersPage = () => {
<SearchInput onChange={setFilterTitle} />
</TopBar>
<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) => (
<Flex align="flex-start"
width="270px"
height="120px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
key={data.id}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
style={{
width: "270px",
height: "120px",
border: "1px",
borderColor: "brand.900",
//backgroundColor:{useColorModeValue('#FFFFFF88', '#00000088')},
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}}
onClick={() => onSelectItem(data.id)}
>

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

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

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

@ -1,6 +1,5 @@
import { ReactElement } from 'react';
import { Center, Flex, HStack, Text } from '@chakra-ui/react';
import { LuCrown, LuDisc3, LuEar, LuFileAudio } from 'react-icons/lu';
import { MdGroup } from 'react-icons/md';
import { useNavigate } from 'react-router-dom';

1
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 { EmptyEnd } from '@/components/EmptyEnd';

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

@ -1,6 +1,5 @@
import { useEffect } from 'react';
import { Center, Heading, Image, Text } from '@chakra-ui/react';
import { useNavigate, useParams } from 'react-router-dom';
import avatar_generic from '@/assets/images/avatar_generic.svg';

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

@ -1,11 +1,7 @@
import { ReactElement } from 'react';
import { Flex, Text, HStack } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom';
import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar';
import { DataTools, TypeCheck } from '@/utils/data-tools';
import { useColorModeValue } from '@/components/ui/color-mode';
export const alphabet = [

3
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 { EmptyEnd } from '@/components/EmptyEnd';

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 { 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 { 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 { isBrowser } from '@/utils/layout';
import { parseToken } from '@/utils/sso';
import { createListCollection } from '@chakra-ui/react';
const TOKEN_KEY = 'karusic-token-key-storage';
export const USERS_COLLECTION = createListCollection({
items: [
{ label: "admin", value: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E" },
{ label: "NO_USER", value: "svelte" },
],
})
export const USERS_COLLECTION = [
{ label: "admin", value: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E" },
{ label: "NO_USER", value: "svelte" },
];
export const USERS = {
admin:
'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 { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { RenderOptions, render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

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
@ -9,7 +8,7 @@ import { defineRecipe, defineStyle, RecipeVariantRecord, SystemStyleObject } fro
// `;
export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxShadowHover }) => {
return defineStyle({
return {
bg,
color,
border: '1px solid transparent',
@ -29,81 +28,76 @@ export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxSha
_active: {
bg: bgActive,
},
});
};
};
const buttonRecipe = defineRecipe({
variants: {
theme: {
"@primary":
customVariant({
bg: { _light: 'brand.600', _dark: 'brand.300' },
bgHover: { _light: 'brand.700', _dark: 'brand.400' },
bgActive: { _light: 'brand.600', _dark: 'brand.300' },
color: { _light: 'white', _dark: 'brand.900' },
colorHover: { _light: 'brand.800', _dark: 'brand.100' },
boxShadowHover: 'outline-over'
}),
"@secondary":
customVariant({
bg: { _light: 'brand.100', _dark: 'brand.900' },
bgHover: { _light: 'brand.200', _dark: 'brand.800' },
bgActive: { _light: 'brand.300', _dark: 'brand.700' },
color: { _light: 'brand.700', _dark: 'brand.50' },
colorHover: { _light: 'brand.800', _dark: 'brand.100' },
boxShadowHover: 'outline-over',
}),
"@danger":
customVariant({
bg: { _light: 'error.600', _dark: 'error.600' },
bgHover: { _light: 'error.700', _dark: 'error.500' },
bgActive: { _light: 'error.600', _dark: 'error.500' },
color: { _light: 'white', _dark: 'error.900' },
colorHover: { _light: 'error.700', _dark: 'error.900' },
boxShadowHover: 'outline-over',
}),
"@success":
customVariant({
bg: { _light: 'green.300', _dark: 'green.300' },
bgHover: { _light: 'green.400', _dark: 'green.400' },
bgActive: { _light: 'green.500', _dark: 'green.400' },
color: { _light: 'white', _dark: 'green.900' },
colorHover: { _light: 'green.500', _dark: 'green.900' },
boxShadowHover: 'outline-over',
}),
"@progress":
defineStyle({
bg: { _light: `brand.500`, _dark: `brand.300` },
overflow: 'hidden',
/*
_after: !props.isLoading
? {
content: '""',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
transform: 'translateX(-100%)',
bgGradient: `linear(90deg, brand.100/0 0%, brand.100/2 20%, brand.100/5 60%, v.100/0`,
}
: undefined,
*/
}),
"@menu": defineStyle({
bg: 'back.100',
color: 'brand.900',
borderRadius: 0,
border: 0,
_hover: { background: 'back.300' },
_focus: { border: 'none' },
fontSize: '20px',
textTransform: 'uppercase',
}),
},
const buttonTheme = {
primary:
customVariant({
bg: { _light: 'brand.600', _dark: 'brand.300' },
bgHover: { _light: 'brand.700', _dark: 'brand.400' },
bgActive: { _light: 'brand.600', _dark: 'brand.300' },
color: { _light: 'white', _dark: 'brand.900' },
colorHover: { _light: 'brand.800', _dark: 'brand.100' },
boxShadowHover: 'outline-over'
}),
secondary:
customVariant({
bg: { _light: 'brand.100', _dark: 'brand.900' },
bgHover: { _light: 'brand.200', _dark: 'brand.800' },
bgActive: { _light: 'brand.300', _dark: 'brand.700' },
color: { _light: 'brand.700', _dark: 'brand.50' },
colorHover: { _light: 'brand.800', _dark: 'brand.100' },
boxShadowHover: 'outline-over',
}),
danger:
customVariant({
bg: { _light: 'error.600', _dark: 'error.600' },
bgHover: { _light: 'error.700', _dark: 'error.500' },
bgActive: { _light: 'error.600', _dark: 'error.500' },
color: { _light: 'white', _dark: 'error.900' },
colorHover: { _light: 'error.700', _dark: 'error.900' },
boxShadowHover: 'outline-over',
}),
success:
customVariant({
bg: { _light: 'green.300', _dark: 'green.300' },
bgHover: { _light: 'green.400', _dark: 'green.400' },
bgActive: { _light: 'green.500', _dark: 'green.400' },
color: { _light: 'white', _dark: 'green.900' },
colorHover: { _light: 'green.500', _dark: 'green.900' },
boxShadowHover: 'outline-over',
}),
progress:
{
bg: { _light: `brand.500`, _dark: `brand.300` },
overflow: 'hidden',
/*
_after: !props.isLoading
? {
content: '""',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
transform: 'translateX(-100%)',
bgGradient: `linear(90deg, brand.100/0 0%, brand.100/2 20%, brand.100/5 60%, v.100/0`,
}
: undefined,
*/
},
});
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: {
bg: { _light: 'white', _dark: 'gray.800' },
color: { _light: 'gray.900', _dark: 'whiteAlpha.900' },
@ -24,6 +24,6 @@ const drawerRecipe = defineRecipe({
defaultVariants: {
variant: 'solid',
},
});
};
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: {
variant: {
'@menu': {
@ -15,6 +15,6 @@ const flexTheme = defineRecipe({
},
},
},
});
};
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: {
variant: {
outline: {
@ -16,6 +15,6 @@ const inputTheme = defineRecipe({
},
},
},
});
};
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 } =
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: {
variant: {
outline: {
@ -15,6 +14,6 @@ const selectTheme = defineRecipe({
},
},
},
});
};
export default selectTheme;

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

@ -1,7 +1,5 @@
import { defineRecipe } from '@chakra-ui/react';
const textAreaTheme = defineRecipe({
const textAreaTheme = {
variants: {
variant: {
outline: {
@ -14,5 +12,5 @@ const textAreaTheme = defineRecipe({
},
}
},
});
};
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 = {
};

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

@ -1,8 +1,7 @@
import * as recipes from './recipes';
import { createSystem, defaultConfig, mergeConfigs, SystemConfig } from "@chakra-ui/react"
import { colors } from "./foundations/colors"
const baseTheme: SystemConfig = {
const baseTheme = {
globalCss: {
body: {
overflowY: 'none',
@ -17,7 +16,6 @@ const baseTheme: SystemConfig = {
}
},
theme: {
...recipes,
tokens: {
fonts: {
heading: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
@ -40,5 +38,11 @@ const baseTheme: SystemConfig = {
},
},
};
/*
const config = mergeConfigs(defaultConfig, baseTheme);
export const systemTheme = createSystem(config);
export const systemTheme = createSystem(config);
*/
export const THEME = {
...recipes
};

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

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

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

@ -0,0 +1,27 @@
import { ReactNode, CSSProperties } from "react";
export type ButtonProps = {
children: ReactNode;
onClick?: () => void;
style?: CSSProperties;
};
export const Button = ({ children, onClick, style }: ButtonProps) => {
return (
<button
onClick={onClick}
style={{
padding: '10px 20px',
backgroundColor: '#3182CE',
color: '#FFF',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '16px',
...style,
}}
>
{children}
</button>
);
};

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)}`);
}

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

@ -0,0 +1,29 @@
import React, { CSSProperties, ReactNode } from 'react';
export type FlexProps = {
children?: ReactNode;
onClick?: () => void;
direction?: 'row' | 'column';
gap?: string | number;
justify?: CSSProperties['justifyContent'];
align?: CSSProperties['alignItems'];
style?: Omit<CSSProperties, "flexDirection" | "display" | "justifyContent" | "alignItems" | "alignItems" | "direction">
};
export const Flex = ({ children, onClick, direction = 'row', justify = 'flex-start', gap, align = 'stretch', style }: FlexProps) => {
return (
<div
onClick={onClick}
style={{
display: 'flex',
flexDirection: direction,
justifyContent: justify,
gap: gap,
alignItems: align,
...style,
}}
>
{children}
</div>
);
};

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

@ -0,0 +1,22 @@
import { ReactNode, CSSProperties } from "react";
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>
);
};

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

@ -0,0 +1,24 @@
import { ReactNode, CSSProperties } from "react";
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: 'column',
alignItems: align,
gap: spacing,
...style,
}}
>
{children}
</div>
);
};

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

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

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

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

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

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

9
front/src/ui/Table/header.tsx Normal file
View File

@ -0,0 +1,9 @@
import { CSSProperties, ReactNode } from "react"
export type HeaderProps = {
children?: ReactNode;
style?: CSSProperties;
};
export const Header = ({ children, style }: HeaderProps) => {
return <thead style={style}>{children}</thead>
}

6
front/src/ui/Table/index.tsx Normal file
View File

@ -0,0 +1,6 @@
export { Body } from './body'
export { Cell } from './cell'
export { ColumnHeader } from './columnHeader'
export { Header } from './header'
export { Root } from './root'
export { Row } from './row'

15
front/src/ui/Table/root.tsx Normal file
View File

@ -0,0 +1,15 @@
import { CSSProperties, ReactNode } from 'react'
export type RootProps = {
children?: ReactNode;
background?: CSSProperties['backgroundColor'];
style?: CSSProperties;
}
export const Root = ({ background, children, style }: RootProps) => {
return (<table
style={{
backgroundColor: background,
...style
}}>{children}</table>);
}

10
front/src/ui/Table/row.tsx Normal file
View File

@ -0,0 +1,10 @@
import { CSSProperties, ReactNode } from "react"
export type RowProps = {
children?: ReactNode;
style?: CSSProperties;
};
export const Row = ({ children, style }: RowProps) => {
return <tr style={style}>{children}</tr>
}

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

@ -0,0 +1,29 @@
import { ReactNode, CSSProperties } from "react";
export type TextProps = {
children: ReactNode;
color?: string;
fontSize?: CSSProperties["fontSize"];
fontWeight?: CSSProperties["fontWeight"];
style?: Omit<CSSProperties, "fontSize" | "fontWeight" | "color">;
};
export const Text = ({ children,
fontSize = '16px',
fontWeight = "normal",
color = "#000000",
style,
}: TextProps) => {
return (
<span
style={{
fontSize,
color,
fontWeight,
...style,
}}
>
{children}
</span>
);
};

24
front/src/ui/VStack.tsx Normal file
View File

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

7
front/src/ui/index.tsx Normal file
View File

@ -0,0 +1,7 @@
export * from "./Button.tsx"
export * from "./Text.tsx"
export * from "./Flex.tsx"
export * from "./HStack.tsx"
export * from "./VStack.tsx"
export * from "./FullPage.tsx"
export * as Table from "./Table"

12
front/src/utils/data-store.ts
View File

@ -7,7 +7,7 @@ import { DependencyList, useCallback, useEffect, useState } from 'react';
import { RestErrorResponse } from '@/back-api';
import { isNullOrUndefined } from '@/utils/validator';
import { toasterAPIError } from '@/components/ui/toaster';
import { registerAnApiError } from '@/ui/ErrorManager';
export type DataStoreType<TYPE> = {
isLoading: boolean;
@ -57,7 +57,7 @@ export const useDataStore = <TYPE>(
setIsLoading(false);
})
.catch((error: RestErrorResponse) => {
toasterAPIError(error);
registerAnApiError(error);
console.log(
`[${restApiName}] catch error: ${JSON.stringify(error, null, 2)}`
);
@ -116,7 +116,7 @@ export const useDataStore = <TYPE>(
resolve(responseData);
})
.catch((error: RestErrorResponse) => {
toasterAPIError(error);
registerAnAPIError(error);
rejects(error);
});
});
@ -134,7 +134,7 @@ export const useDataStore = <TYPE>(
setData(filterData);
})
.catch((error) => {
toasterAPIError(error);
registerAnApiError(error);
console.log(
`catch an error on delete: ... ${JSON.stringify(error, null, 2)}`
);
@ -145,3 +145,7 @@ export const useDataStore = <TYPE>(
return { isLoading, error, data, get, gets, update, updateRaw, remove };
};
function registerAnAPIError(error: { name: string; message: string; time: string; status: number; statusMessage: string; oid?: string | undefined; }) {
throw new Error('Function not implemented.');
}

18
front/src/utils/disclosure.ts Normal file
View File

@ -0,0 +1,18 @@
import { useState, useCallback } from "react";
export interface UseDisclosureReturn {
open: boolean;
onOpen: () => void;
onClose: () => void;
onToggle: () => void;
}
export function useDisclosure(initialState = false): UseDisclosureReturn {
const [open, setOpen] = useState(initialState);
const onOpen = useCallback(() => setOpen(true), []);
const onClose = useCallback(() => setOpen(false), []);
const onToggle = useCallback(() => setOpen((prev) => !prev), []);
return { open, onOpen, onClose, onToggle };
}

3
front/src/utils/layout.ts
View File

@ -1,12 +1,9 @@
import { useEffect, useState } from 'react';
import { useBreakpointValue } from '@chakra-ui/react';
import { useWindowSize } from 'react-use';
export const isBrowser: boolean = typeof window !== 'undefined';
export const useIsMobile = () => useBreakpointValue({ base: true, md: false });
export const useIsLandscape = (): { isLandscape: boolean } => {
const [isLandscape, setIsLandscape] = useState(false);
const windowsSize = useWindowSize();