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

[FEAT] add many basic element, ux bad but build is OK

Browse Source
This commit is contained in:
Edouard DUPIN 2025-01-22 00:30:16 +01:00
parent f9019ec508
commit 12223347d3
77 changed files with 1514 additions and 1163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/package.json
View File

@ -29,6 +29,7 @@
"*.{ts,tsx,js,jsx,json}": "prettier --write"
},
"dependencies": {
"history": "5.3.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-error-boundary": "5.0.0",

10
front/pnpm-lock.yaml generated
View File

@ -8,6 +8,9 @@ importers:
.:
dependencies:
history:
specifier: 5.3.0
version: 5.3.0
react:
specifier: 18.3.1
version: 18.3.1
@ -2372,6 +2375,9 @@ packages:
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
engines: {node: '>= 0.4'}
history@5.3.0:
resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
hoist-non-react-statics@3.3.2:
resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
@ -6820,6 +6826,10 @@ snapshots:
dependencies:
function-bind: 1.1.2
history@5.3.0:
dependencies:
'@babel/runtime': 7.24.7
hoist-non-react-statics@3.3.2:
dependencies:
react-is: 16.13.1

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

@ -22,7 +22,7 @@ import { useSpecificArtists } from '@/service/Artist';
import { useSpecificGender } from '@/service/Gender';
import { useSpecificTrack } from '@/service/Track';
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 { Icon } from './Icon';
import { Flex, Text } from '@/ui';
@ -77,7 +77,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
: ''
);
}, [dataTrack, setMediaSource]);
const backColor = useColorModeValue('back.100', 'back.800');
const backColor = useColorThemeValue('back.100', 'back.800');
const configButton = {
borderRadius: 'full',
backgroundColor: '#00000000',

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

@ -1,13 +1,13 @@
import { ReactElement, useEffect, useState } from 'react';
import { CSSProperties, ReactElement, useEffect, useState } from 'react';
import { DataUrlAccess } from '@/utils/data-url-access';
import { Icon } from './Icon';
import { ObjectId } from '@/back-api';
import { Flex } from '@/ui';
import { DivProps, Flex } from '@/ui';
export type CoversProps = Omit<BoxProps, "iconEmpty"> & {
export type CoversProps = Omit<DivProps, "iconEmpty"> & {
data?: ObjectId[];
size?: BoxProps["width"];
size?: CSSProperties["width"];
iconEmpty?: ReactElement;
slideshow?: boolean;
};

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

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

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

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

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

@ -38,15 +38,15 @@ export const SearchInput = ({
onSubmitValue(inputData);
}
}
return (
<Group maxWidth="200px" marginLeft="auto" {...searchInputProperty}>
<MdSearch color="gray.300" />
<Input
onFocus={onFocusKeep}
onBlur={() => setTimeout(() => onFocusLost(), 200)}
onChange={onChange}
onSubmit={onSubmit}
/>
</Group>
return (<></>
//<Group maxWidth="200px" marginLeft="auto" {...searchInputProperty}>
// <MdSearch color="gray.300" />
// <Input
// onFocus={onFocusKeep}
// onBlur={() => setTimeout(() => onFocusLost(), 200)}
// onChange={onChange}
// onSubmit={onSubmit}
// />
//</Group>
);
};

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

@ -14,12 +14,11 @@ import { useNavigate } from 'react-router-dom';
import { useServiceContext } from '@/service/ServiceContext';
import { SessionState } from '@/service/SessionState';
import { colors } from '@/theme/foundations/colors';
import { colors } from '@/theme/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 { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
import { THEME } from '@/theme/theme';
import { useColorThemeValue, useTheme } from '@/theme/ThemeContext';
import { useDisclosure } from '@/utils/disclosure';
import { Button, Flex, Text } from '@/ui';
@ -36,11 +35,11 @@ export type TopBarProps = {
};
export const TopBar = ({ title, children }: TopBarProps) => {
const { colorMode, toggleColorMode } = useColorMode();
const { theme, toggleTheme } = useTheme();
const { clearToken } = useSessionService();
const { session } = useServiceContext();
const backColor = useColorModeValue('back.100', 'back.800');
const backColor = useColorThemeValue('back.100', 'back.800');
const drawerDisclose = useDisclosure();
const onChangeTheme = () => {
drawerDisclose.onOpen();
@ -113,7 +112,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
<Flex style={{ right: 0 }}>
{session?.state !== SessionState.CONNECTED && (
<>
<Button {...BUTTON_TOP_BAR_PROPERTY} {...THEME.Button.primary} onClick={onSignIn}>
<Button {...BUTTON_TOP_BAR_PROPERTY} /*{...THEME.Button.primary}*/ onClick={onSignIn}>
<LuLogIn />
<Text style={{ paddingLeft: "0 0 0 3px" }} fontWeight="bold">
Sign-in

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

@ -5,6 +5,8 @@ import { Album } from '@/back-api';
import { Covers } from '@/components/Cover';
import { useCountTracksWithAlbumId } from '@/service/Track';
import { BASE_WRAP_ICON_SIZE } from '@/constants/genericSpacing';
import { Flex, Text } from '@/ui';
import { Span } from '@/ui/Span';
export type DisplayAlbumProps = {
dataAlbum?: Album;
@ -33,32 +35,37 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
//maxWidth="150px"
height="full"
paddingLeft="5px"
overflowX="hidden"
flex={1}
style={{
marginRight: "auto",
overflow: "hidden",
flex: 1,
}}
>
<Text
as="span"
<Span
// align="left"
fontSize="20px"
fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
style={{
marginRight: "auto",
overflow: "hidden",
}}
// noOfLines={[1, 2]}
>
{dataAlbum?.name}
</Text>
<Text
as="span"
</Span>
<Span
// align="left"
fontSize="15px"
userSelect="none"
marginRight="auto"
overflow="hidden"
style={{
marginRight: "auto",
overflow: "hidden",
}}
// noOfLines={1}
>
{countTracksOfAnAlbum} track{countTracksOfAnAlbum >= 1 && 's'}
</Text>
</Span>
</Flex>
</Flex>
);

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

@ -1,6 +1,6 @@
import { LuMenu } from 'react-icons/lu';
import { THEME } from '@/theme/theme';
export type MenuElement = {
name: string;
@ -12,28 +12,28 @@ export type ContextMenuProps = {
};
export const ContextMenu = ({ elements }: ContextMenuProps) => {
if (!elements) {
// if (!elements) {
return <></>;
}
return (
<Menu.Root
data-testid="context-menu">
<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.Button.primary} >
<LuMenu />
</Button>
</Menu.Trigger>
<Menu.Content
data-testid="context-menu_content">
{elements?.map((data) => (
<Menu.Item key={data.name} value={data.name} onClick={data.onClick}
data-testid="context-menu_item">
{data.name}
</Menu.Item>
))}
</Menu.Content>
</Menu.Root >
);
// }
// return (
// <Menu.Root
// data-testid="context-menu">
// <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.Button.primary} >
// <LuMenu />
// </Button>
// </Menu.Trigger>
// <Menu.Content
// data-testid="context-menu_content">
// {elements?.map((data) => (
// <Menu.Item key={data.name} value={data.name} onClick={data.onClick}
// data-testid="context-menu_item">
// {data.name}
// </Menu.Item>
// ))}
// </Menu.Content>
// </Menu.Root >
//);
};

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

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

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

@ -2,6 +2,7 @@ import { RefObject } from 'react';
import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable';
import { Input } from '@/ui';
export type FormInputProps = {
form: UseFormidableReturn;

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

@ -33,7 +33,8 @@ export const FormNumber = ({
onRestore={() => form.restoreValue({ [variableName]: true })}
{...rest}
>
<NumberInput.Root
<></>
{/* <NumberInput.Root
ref={ref}
value={form.values[variableName]}
onValueChange={(value) => form.setValues({ [variableName]: value })}
@ -43,7 +44,7 @@ export const FormNumber = ({
max={max}
>
<NumberInput.Input />
</NumberInput.Root>
</NumberInput.Root> */}
</FormGroup>
);
};

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

@ -4,6 +4,7 @@ import { LuDisc3 } from 'react-icons/lu';
import { Gender } from '@/back-api';
import { Covers } from '@/components/Cover';
import { useCountTracksOfAGender } from '@/service/Track';
import { Flex, Span, Text } from '@/ui';
export type DisplayGenderProps = {
dataGender?: Gender;
@ -31,31 +32,36 @@ export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
maxWidth="150px"
height="full"
paddingLeft="5px"
overflowX="hidden"
style={{
overflowX: "hidden"
}}
>
<Text
as="span"
alignContent="left"
<Span
fontSize="20px"
fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
style={{
userSelect: "none",
marginRight: "auto",
overflow: "hidden",
alignContent: "left",
}}
//TODO: noOfLines={[1, 2]}
>
{dataGender?.name}
</Text>
<Text
as="span"
alignContent="left"
</Span>
<Span
fontSize="15px"
userSelect="none"
marginRight="auto"
overflow="hidden"
style={{
userSelect: "none",
marginRight: "auto",
overflow: "hidden",
alignContent: "left",
}}
//TODO: noOfLines={1}
>
{countTracksOnAGender} track{countTracksOnAGender >= 1 && 's'}
</Text>
</Span>
</Flex>
</Flex>
);

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

@ -128,109 +128,110 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
})
);
};
return (
<Dialog.Root
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
onOpenChange={onClose}
open={true}
data-testid="album-edit-pop-up"
>
{/* <DialogOverlay /> */}
{/* <DialogCloseTrigger /> */}
<Dialog.Content>
<Dialog.Header>Edit Album</Dialog.Header>
{/* <DialogCloseButton ref={finalRef} /> */}
return <></>;
// return (
// <Dialog.Root
// //initialFocusRef={initialRef}
// //finalFocusRef={finalRef}
// //closeOnOverlayClick={false}
// onOpenChange={onClose}
// open={true}
// data-testid="album-edit-pop-up"
// >
// {/* <DialogOverlay /> */}
// {/* <DialogCloseTrigger /> */}
// <Dialog.Content>
// <Dialog.Header>Edit Album</Dialog.Header>
// {/* <DialogCloseButton ref={finalRef} /> */}
<Dialog.Body pb={6} gap="0px" paddingLeft="18px">
{admin && (
<>
<FormGroup isRequired label="Id">
<Text>{dataAlbum?.id}</Text>
</FormGroup>
{countTracksOfAnAlbum !== 0 && (
<Flex paddingLeft="14px">
<MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove album {countTracksOfAnAlbum} track(s) depend
on it.
</Text>
</Flex>
)}
<FormGroup label="Action(s):">
<Button
onClick={disclosure.onOpen}
marginRight="auto"
theme="@danger"
disabled={countTracksOfAnAlbum !== 0}
>
<MdDeleteForever /> Remove Media
</Button>
</FormGroup>
<ConfirmPopUp
disclosure={disclosure}
title="Remove album"
body={`Remove Album [${dataAlbum?.id}] ${dataAlbum?.name}`}
confirmTitle="Remove"
onConfirm={onRemove}
/>
</>
)}
{!admin && (
<>
<FormInput
form={form}
variableName="name"
isRequired
label="Title"
ref={initialRef}
/>
<FormTextarea
form={form}
variableName="description"
label="Description"
/>
<FormInput
form={form}
variableName="publication"
label="Publication"
/>
<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>
);
// <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
// {admin && (
// <>
// <FormGroup isRequired label="Id">
// <Text>{dataAlbum?.id}</Text>
// </FormGroup>
// {countTracksOfAnAlbum !== 0 && (
// <Flex paddingLeft="14px">
// <MdWarning color="red.600" />
// <Text paddingLeft="6px" color="red.600" fontWeight="bold">
// Can not remove album {countTracksOfAnAlbum} track(s) depend
// on it.
// </Text>
// </Flex>
// )}
// <FormGroup label="Action(s):">
// <Button
// onClick={disclosure.onOpen}
// marginRight="auto"
// theme="@danger"
// disabled={countTracksOfAnAlbum !== 0}
// >
// <MdDeleteForever /> Remove Media
// </Button>
// </FormGroup>
// <ConfirmPopUp
// disclosure={disclosure}
// title="Remove album"
// body={`Remove Album [${dataAlbum?.id}] ${dataAlbum?.name}`}
// confirmTitle="Remove"
// onConfirm={onRemove}
// />
// </>
// )}
// {!admin && (
// <>
// <FormInput
// form={form}
// variableName="name"
// isRequired
// label="Title"
// ref={initialRef}
// />
// <FormTextarea
// form={form}
// variableName="description"
// label="Description"
// />
// <FormInput
// form={form}
// variableName="publication"
// label="Publication"
// />
// <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>
// );
};

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

@ -23,29 +23,28 @@ export const ConfirmPopUp = ({
disclosure.onClose();
};
const cancelRef = useRef<HTMLButtonElement>(null);
return (
<Dialog.Root role="alertdialog"
open={disclosure.open}
//leastDestructiveRef={cancelRef}
onOpenChange={disclosure.onClose}
data-testid="confirm-pop-up"
>
<Dialog.Content>
<Dialog.Header fontSize="lg" fontWeight="bold">
{title}
</Dialog.Header>
<Dialog.Body>{body}</Dialog.Body>
<Dialog.Footer>
<Button onClick={disclosure.onClose} ref={cancelRef}>
Cancel
</Button>
<Button colorScheme="red" onClick={onClickConfirm} ml={3}>
{confirmTitle}
</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
);
return <></>;
// return (
// <Dialog.Root role="alertdialog"
// open={disclosure.open}
// //leastDestructiveRef={cancelRef}
// onOpenChange={disclosure.onClose}
// data-testid="confirm-pop-up"
// >
// <Dialog.Content>
// <Dialog.Header fontSize="lg" fontWeight="bold">
// {title}
// </Dialog.Header>
// <Dialog.Body>{body}</Dialog.Body>
// <Dialog.Footer>
// <Button onClick={disclosure.onClose} ref={cancelRef}>
// Cancel
// </Button>
// <Button colorScheme="red" onClick={onClickConfirm} ml={3}>
// {confirmTitle}
// </Button>
// </Dialog.Footer>
// </Dialog.Content>
// </Dialog.Root>
// );
};

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

@ -128,103 +128,104 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
})
);
};
return (
<Dialog.Root
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
onOpenChange={onClose}
open={true}
data-testid="gender-edit-pop-up"
>
{/* <DialogOverlay /> */}
<Dialog.Content>
<Dialog.Header>Edit Gender</Dialog.Header>
{/* <DialogCloseButton ref={finalRef} /> */}
return <></>;
// return (
// <Dialog.Root
// //initialFocusRef={initialRef}
// //finalFocusRef={finalRef}
// //closeOnOverlayClick={false}
// onOpenChange={onClose}
// open={true}
// data-testid="gender-edit-pop-up"
// >
// {/* <DialogOverlay /> */}
// <Dialog.Content>
// <Dialog.Header>Edit Gender</Dialog.Header>
// {/* <DialogCloseButton ref={finalRef} /> */}
<Dialog.Body pb={6} gap="0px" paddingLeft="18px">
{admin && (
<>
<FormGroup isRequired label="Id">
<Text>{dataGender?.id}</Text>
</FormGroup>
{countTracksOnAGender !== 0 && (
<Flex paddingLeft="14px">
<MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove gender {countTracksOnAGender} track(s) depend
on it.
</Text>
</Flex>
)}
<FormGroup label="Action(s):">
<Button
onClick={disclosure.onOpen}
marginRight="auto"
theme="@danger"
disabled={countTracksOnAGender !== 0}
>
<MdDeleteForever /> Remove gender
</Button>
</FormGroup>
<ConfirmPopUp
disclosure={disclosure}
title="Remove gender"
body={`Remove gender [${dataGender?.id}] ${dataGender?.name}`}
confirmTitle="Remove"
onConfirm={onRemove}
/>
</>
)}
{!admin && (
<>
<FormInput
form={form}
variableName="name"
isRequired
label="Gender name"
ref={initialRef}
/>
<FormTextarea
form={form}
variableName="description"
label="Description"
/>
<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>
);
// <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
// {admin && (
// <>
// <FormGroup isRequired label="Id">
// <Text>{dataGender?.id}</Text>
// </FormGroup>
// {countTracksOnAGender !== 0 && (
// <Flex paddingLeft="14px">
// <MdWarning color="red.600" />
// <Text paddingLeft="6px" color="red.600" fontWeight="bold">
// Can not remove gender {countTracksOnAGender} track(s) depend
// on it.
// </Text>
// </Flex>
// )}
// <FormGroup label="Action(s):">
// <Button
// onClick={disclosure.onOpen}
// marginRight="auto"
// theme="@danger"
// disabled={countTracksOnAGender !== 0}
// >
// <MdDeleteForever /> Remove gender
// </Button>
// </FormGroup>
// <ConfirmPopUp
// disclosure={disclosure}
// title="Remove gender"
// body={`Remove gender [${dataGender?.id}] ${dataGender?.name}`}
// confirmTitle="Remove"
// onConfirm={onRemove}
// />
// </>
// )}
// {!admin && (
// <>
// <FormInput
// form={form}
// variableName="name"
// isRequired
// label="Gender name"
// ref={initialRef}
// />
// <FormTextarea
// form={form}
// variableName="description"
// label="Description"
// />
// <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>
// );
};

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

@ -32,64 +32,66 @@ export const PopUpUploadProgress = ({
}: PopUpUploadProgressProps) => {
const initialRef = useRef<HTMLButtonElement>(null);
const finalRef = useRef<HTMLButtonElement>(null);
return (
<Dialog.Root
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
onOpenChange={onClose}
open={true}
data-testid="upload-progress-edit-pop-up"
>
{/* <DialogOverlay /> */}
<Dialog.Content>
<Dialog.Header>{title}</Dialog.Header>
{/* <DialogCloseButton ref={finalRef} /> */}
return <></>;
<Dialog.Body pb={6} paddingLeft="18px">
<Flex direction="column" gap="10px">
{isFinished ? (
<Text fontSize="20px" fontWeight="bold">
All {elements.length} element have been sent
</Text>
) : (
<Text fontSize="20px" fontWeight="bold">
[{index + 1}/{elements.length}] {elements[index]}
</Text>
)}
<Progress.Root
colorScheme="green"
striped
value={currentSize}
animated
max={totalSize}
height="24px"
/>
<Flex>
<Text>{currentSize.toLocaleString('fr-FR')} Bytes</Text>
<Text marginLeft="auto">
{totalSize.toLocaleString('fr-FR')} Bytes
</Text>
</Flex>
{error && (
<Text fontWeight="bold" color="darkred">
{error}
</Text>
)}
</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>
);
// return (
// <Dialog.Root
// //initialFocusRef={initialRef}
// //finalFocusRef={finalRef}
// //closeOnOverlayClick={false}
// onOpenChange={onClose}
// open={true}
// data-testid="upload-progress-edit-pop-up"
// >
// {/* <DialogOverlay /> */}
// <Dialog.Content>
// <Dialog.Header>{title}</Dialog.Header>
// {/* <DialogCloseButton ref={finalRef} /> */}
// <Dialog.Body pb={6} paddingLeft="18px">
// <Flex direction="column" gap="10px">
// {isFinished ? (
// <Text fontSize="20px" fontWeight="bold">
// All {elements.length} element have been sent
// </Text>
// ) : (
// <Text fontSize="20px" fontWeight="bold">
// [{index + 1}/{elements.length}] {elements[index]}
// </Text>
// )}
// <Progress.Root
// colorScheme="green"
// striped
// value={currentSize}
// animated
// max={totalSize}
// height="24px"
// />
// <Flex>
// <Text>{currentSize.toLocaleString('fr-FR')} Bytes</Text>
// <Text marginLeft="auto">
// {totalSize.toLocaleString('fr-FR')} Bytes
// </Text>
// </Flex>
// {error && (
// <Text fontWeight="bold" color="darkred">
// {error}
// </Text>
// )}
// </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>
// );
};

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

@ -80,116 +80,117 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
})
);
};
return (
<Dialog.Root
//initialFocusRef={initialRef}
//finalFocusRef={finalRef}
//closeOnOverlayClick={false}
onOpenChange={onClose}
open={true}
data-testid="track-edit-pop-up"
>
{/* <DialogOverlay /> */}
<Dialog.Content>
<Dialog.Header>Edit Track</Dialog.Header>
{/* <DialogCloseButton ref={finalRef} /> */}
return <></>;
// return (
// <Dialog.Root
// //initialFocusRef={initialRef}
// //finalFocusRef={finalRef}
// //closeOnOverlayClick={false}
// onOpenChange={onClose}
// open={true}
// data-testid="track-edit-pop-up"
// >
// {/* <DialogOverlay /> */}
// <Dialog.Content>
// <Dialog.Header>Edit Track</Dialog.Header>
// {/* <DialogCloseButton ref={finalRef} /> */}
<Dialog.Body pb={6} gap="0px" paddingLeft="18px">
{admin && (
<>
<FormGroup isRequired label="Id">
<Text>{dataTrack?.id}</Text>
</FormGroup>
<FormGroup label="Data Id">
<Text>{dataTrack?.dataId}</Text>
</FormGroup>
<FormGroup label="Action(s):">
<Button
onClick={disclosure.onOpen}
marginRight="auto"
theme="@danger"
>
<MdDeleteForever /> Remove Media
</Button>
</FormGroup>
<ConfirmPopUp
disclosure={disclosure}
title="Remove track"
body={`Remove Media [${dataTrack?.id}] ${dataTrack?.name}`}
confirmTitle="Remove"
onConfirm={onRemove}
/>
</>
)}
{!admin && (
<>
<FormInput
form={form}
variableName="name"
isRequired
label="Title"
ref={initialRef}
/>
<FormTextarea
form={form}
variableName="description"
label="Description"
/>
<FormSelect
form={form}
variableName="genderId"
options={dataGenders}
label="Gender"
/>
<FormSelectMultiple
form={form}
variableName="artists"
options={dataArtist}
label="Artist(s)"
/>
<FormSelect
form={form}
variableName="albumId"
options={dataAlbums}
label="Album"
/>
<FormNumber
form={form}
variableName="track"
label="Track n°"
step={1}
//defaultValue={0}
min={0}
max={1000}
/>
</>
)}
</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>
);
// <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
// {admin && (
// <>
// <FormGroup isRequired label="Id">
// <Text>{dataTrack?.id}</Text>
// </FormGroup>
// <FormGroup label="Data Id">
// <Text>{dataTrack?.dataId}</Text>
// </FormGroup>
// <FormGroup label="Action(s):">
// <Button
// onClick={disclosure.onOpen}
// marginRight="auto"
// theme="@danger"
// >
// <MdDeleteForever /> Remove Media
// </Button>
// </FormGroup>
// <ConfirmPopUp
// disclosure={disclosure}
// title="Remove track"
// body={`Remove Media [${dataTrack?.id}] ${dataTrack?.name}`}
// confirmTitle="Remove"
// onConfirm={onRemove}
// />
// </>
// )}
// {!admin && (
// <>
// <FormInput
// form={form}
// variableName="name"
// isRequired
// label="Title"
// ref={initialRef}
// />
// <FormTextarea
// form={form}
// variableName="description"
// label="Description"
// />
// <FormSelect
// form={form}
// variableName="genderId"
// options={dataGenders}
// label="Gender"
// />
// <FormSelectMultiple
// form={form}
// variableName="artists"
// options={dataArtist}
// label="Artist(s)"
// />
// <FormSelect
// form={form}
// variableName="albumId"
// options={dataAlbums}
// label="Album"
// />
// <FormNumber
// form={form}
// variableName="track"
// label="Track n°"
// step={1}
// //defaultValue={0}
// min={0}
// max={1000}
// />
// </>
// )}
// </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>
// );
};

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

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

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

@ -9,6 +9,7 @@ import {
import { SelectList, SelectListModel } from '@/components/select/SelectList';
import { isNullOrUndefined } from '@/utils/validator';
import { Button, Flex, Input } from '@/ui';
export type SelectSingleProps = {
options?: object[];
@ -69,7 +70,7 @@ export const SelectSingle = ({
}
};
if (!transformedOption) {
return <Spinner />;
return <></>; // TODO: <Spinner />;
}
function onChangeInput(value: string): void {
setHasSuggestion(false);
@ -104,25 +105,28 @@ export const SelectSingle = ({
<Flex>
<Input
ref={refFocus}
width="full"
style={{
width: "full",
backgroundColor: showList || !selectedOptions ? undefined : 'green.500',
borderRadius: "5px 0 0 5px",
}}
onChange={(e) => onChangeInput(e.target.value)}
onFocus={() => setShowList(true)}
onBlur={() => setTimeout(() => setShowList(false), 200)}
//onFocus={() => setShowList(true)}
//onBlur={() => setTimeout(() => setShowList(false), 200)}
value={
showList ? (currentSearch ?? '') : (selectedOptions?.name ?? (hasSuggestion ? `suggest: ${currentSearch}` : ''))
}
backgroundColor={
showList || !selectedOptions ? undefined : 'green.500'
}
borderRadius="5px 0 0 5px"
/>
<Button
onClick={onRemoveItem}
variant="outline"
borderRadius="0 5px 5px 0"
borderWidth="1px 1px 1px 0"
// TODO: variant="outline"
style={{
borderRadius: "0 5px 5px 0",
borderWidth: "1px 1px 1px 0",
}}
>
{selectedOptions ? (
{
selectedOptions ? (
<MdClose color="gray.300" />
) : showList ? (
<MdKeyboardArrowUp color="gray.300" />
@ -133,7 +137,8 @@ export const SelectSingle = ({
)}
</Button>
</Flex>
{showList && (
{
showList && (
<SelectList
options={transformedOption}
selected={selectedOptions ? [selectedOptions] : []}
@ -141,7 +146,8 @@ export const SelectSingle = ({
onSelectValue={selectValue}
onCreate={createNewItem}
/>
)}
)
}
</Flex >
);
};

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

@ -4,6 +4,7 @@ import { Track } from '@/back-api';
import { Covers } from '@/components/Cover';
import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { Flex, Span } from '@/ui';
export type DisplayTrackProps = {
track: Track;
@ -32,23 +33,26 @@ export const DisplayTrack = ({
width="full"
height="full"
paddingLeft="5px"
overflowX="hidden"
style={{
overflowX: "hidden",
}}
onClick={onClick}
>
<Text
as="span"
alignContent="left"
<Span
fontSize="20px"
fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
// TODO: noOfLines={[1, 2]}
marginY="auto"
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}
</Text>
</Span>
</Flex>
<ContextMenu elements={contextMenu} />
</Flex>

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

@ -7,6 +7,7 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album';
import { useSpecificArtists } from '@/service/Artist';
import { useSpecificGender } from '@/service/Gender';
import { Flex, Span } from '@/ui';
export type DisplayTrackProps = {
track: Track;
@ -39,69 +40,78 @@ export const DisplayTrackFull = ({
width="full"
height="full"
paddingLeft="5px"
overflowX="hidden"
onClick={onClick}
style={{
overflowX: "hidden",
}}
>
<Text
as="span"
alignContent="left"
<Span
fontSize="20px"
fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
// TODO: noOfLines={1}
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}]`}
</Text>
</Span>
{dataAlbum && (
<Text
as="span"
alignContent="left"
<Span
fontSize="15px"
fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
//noOfLines={1}
marginY="auto"
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}
</Text>
<Span fontWeight="normal">Album:</Span> {dataAlbum.name}
</Span>
)}
{dataArtists && (
<Text
as="span"
alignContent="left"
<Span
fontSize="15px"
fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
//noOfLines={1}
marginY="auto"
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(', ')}
</Text>
<Span fontWeight="normal">Artist(s):</Span> {dataArtists.map((data) => data.name).join(', ')}
</Span>
)}
{dataGender && (
<Text
as="span"
alignContent="left"
<Span
fontSize="15px"
fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
//noOfLines={1}
marginY="auto"
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}
</Text>
<Span fontWeight="normal">Gender:</Span> {dataGender.name}
</Span>
)}
</Flex>
<ContextMenu elements={contextMenu}

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

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

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

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

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
}

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_WIDTH = { base: "90%", md: "45%", lg: "270px" };
export const BASE_WRAP_HEIGHT = { base: "75px", lg: "120px" };
export const BASE_WRAP_ICON_SIZE = { base: "50px", lg: "100px" };
export const BASE_WRAP_SPACING = "5px"; // { base: "5px", md: "10px", lg: "20px" };
export const BASE_WRAP_WIDTH = "90%"; // { base: "90%", md: "45%", lg: "270px" };
export const BASE_WRAP_HEIGHT = "75px"; // { base: "75px", lg: "120px" };
export const BASE_WRAP_ICON_SIZE = "50px";// { base: "50px", lg: "100px" };

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

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

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

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

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

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

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

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

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

@ -1,14 +1,15 @@
export const DoubleArrowIcon = createIcon({
displayName: 'DoubleArrowIcon',
viewBox: '0 0 24 24',
path: (
<path
fillRule="evenodd"
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"
/>
),
});
export const DoubleArrowIcon = <></>;
// createIcon({
// displayName: 'DoubleArrowIcon',
// viewBox: '0 0 24 24',
// path: (
// <path
// fillRule="evenodd"
// 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"
// />
// ),
// });

5
front/src/main.tsx
View File

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

14
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,11 +21,11 @@ import { OnAirPage } from './onAir/OnAirPage';
export const AppRoutes = () => {
const { isReadable } = useHasRight('user');
return (
// <HistoryRouter
// // @ts-expect-error
// history={createBrowserHistory({ window })}
// basename="/karusic"
// >
<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 />} />
@ -46,6 +46,6 @@ export const AppRoutes = () => {
<Route path="*" element={<Error401 />} />
)}
</Routes>
// </HistoryRouter>
</HistoryRouter>
);
};

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

@ -13,8 +13,9 @@ import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album';
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 { Button, Flex, Text } from '@/ui';
export const AlbumDetailPage = () => {
const { albumId } = useParams();
@ -45,7 +46,7 @@ export const AlbumDetailPage = () => {
return (
<>
<TopBar title="Album detail" />
<PageLayoutInfoCenter>
<PageLayoutInfoCenter width="75%">
Fail to load artist id: {albumId}
</PageLayoutInfoCenter>
</>
@ -67,17 +68,19 @@ export const AlbumDetailPage = () => {
data-testid="Album-detail-page_layout">
<Flex
direction="row"
width="80%"
marginX="auto"
padding="10px"
gap="10px"
style={{
width: "80%",
margin: "0 auto",
padding: "10px",
}}
>
<Covers
data={dataAlbum?.covers}
// TODO: iconEmpty={LuDisc3}
slideshow
/>
<Flex direction="column" width="80%" marginRight="auto">
<Flex direction="column" style={{ width: "80%", marginRight: "auto" }}>
<Text fontSize="24px" fontWeight="bold">
{dataAlbum?.name}
</Text>
@ -92,25 +95,27 @@ export const AlbumDetailPage = () => {
<Flex
direction="column"
gap={BASE_WRAP_SPACING}
marginX="auto"
padding="20px"
width="80%"
data-testid="Album-detail-page_flex-list"
gap={BASE_WRAP_SPACING} style={{
margin: "0 auto",
padding: "20px",
width: "80%",
}}
data-test-id="Album-detail-page_flex-list"
>
{tracksOnAnAlbum?.map((data) => (
<Box
minWidth="100%"
//height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
<Flex
key={data.id}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
style={{
minWidth: "100%",
//height="60px"
border: "1px",
borderColor: "brand.900",
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}}
>
<DisplayTrackFull
@ -127,7 +132,7 @@ export const AlbumDetailPage = () => {
]}
data-testid="Album-detail-page_display-detail"
/>
</Box>
</Flex>
))}
<EmptyEnd />
</Flex>

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

@ -9,8 +9,9 @@ import { SearchInput } from '@/components/SearchInput';
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 { useColorThemeValue } from '@/theme/ThemeContext';
import { BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing';
import { Button, Flex, HStack } from '@/ui';
export const AlbumsPage = () => {
const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
@ -24,7 +25,7 @@ export const AlbumsPage = () => {
return (
<>
<TopBar title="All Albums" />
<PageLayoutInfoCenter>No Album available</PageLayoutInfoCenter>
<PageLayoutInfoCenter width="75%">No Album available</PageLayoutInfoCenter>
</>
);
}
@ -35,25 +36,27 @@ export const AlbumsPage = () => {
<SearchInput onChange={setFilterTitle} />
</TopBar>
<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) => (
<Flex align="flex-start"
width={BASE_WRAP_WIDTH}
height={BASE_WRAP_HEIGHT}
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
<Button
key={data.id}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
style={{
width: BASE_WRAP_WIDTH,
height: BASE_WRAP_HEIGHT,
border: "1px",
borderColor: "brand.900",
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover={
// boxShadow: 'outline-over',
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
// }
alignContent: "flex-start",
}}
onClick={() => onSelect.Item(data.id)}
onClick={() => onSelectItem(data.id)}
>
<DisplayAlbum dataAlbum={data} />
</Flex>
</Button>
))}
</HStack>
<EmptyEnd />

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

@ -14,7 +14,8 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album';
import { useSpecificArtist } from '@/service/Artist';
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 = () => {
const { artistId, albumId } = useParams();
@ -59,13 +60,18 @@ export const ArtistAlbumDetailPage = () => {
<>
<Button
{...BUTTON_TOP_BAR_PROPERTY}
marginRight="auto"
style={{
marginRight: "auto"
}}
onClick={() => navigate(`/artist/${dataArtist.id}`)}
>
<Covers
data={dataArtist?.covers}
size="35px"
borderRadius="full"
style={{
borderRadius: "full",
}}
// TODO: iconEmpty={MdPerson}
/>
<Text fontSize="24px" fontWeight="bold">
@ -86,9 +92,11 @@ export const ArtistAlbumDetailPage = () => {
<PageLayout>
<Flex
direction="row"
width="80%"
marginX="auto"
padding="10px"
style={{
width: "80%",
margin: "0 auto",
padding: "10px",
}}
gap="10px"
>
<Covers
@ -96,7 +104,8 @@ export const ArtistAlbumDetailPage = () => {
// TODO: iconEmpty={LuDisc3}
slideshow
/>
<Flex direction="column" width="80%" marginRight="auto">
<Flex direction="column"
style={{ width: "80%", marginRight: "auto" }}>
<Text fontSize="24px" fontWeight="bold">
{dataAlbum?.name}
</Text>
@ -112,23 +121,28 @@ export const ArtistAlbumDetailPage = () => {
<Flex
direction="column"
gap="20px"
marginX="auto"
padding="20px"
width="80%"
style={{
margin: "0 auto",
padding: "20px",
width: "80%",
}}
>
{tracksOnAnAlbum?.map((data) => (
<Box
minWidth="100%"
height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
<Flex
key={data.id}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
style={{
minWidth: "100%",
height: "60px",
border: "1px",
borderColor: "brand.900",
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}}
>
<DisplayTrack
@ -146,7 +160,7 @@ export const ArtistAlbumDetailPage = () => {
{ name: 'Add Playlist', onClick: () => { } },
]}
/>
</Box>
</Flex>
))}
<EmptyEnd />
</Flex>

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

@ -11,8 +11,9 @@ import { DisplayAlbumId } from '@/components/album/DisplayAlbumId';
import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp';
import { useSpecificArtist } from '@/service/Artist';
import { useAlbumIdsOfAnArtist } from '@/service/Track';
import { useColorModeValue } from '@/components/ui/color-mode';
import { useColorThemeValue } from '@/theme/ThemeContext';
import { BASE_WRAP_HEIGHT, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
import { Button, Flex, HStack, Text } from '@/ui';
export const ArtistDetailPage = () => {
const { artistId } = useParams();
@ -40,7 +41,7 @@ export const ArtistDetailPage = () => {
<>
<Button
{...BUTTON_TOP_BAR_PROPERTY}
marginRight="auto"
style={{ marginRight: "auto" }}
onClick={() => navigate(`/artist/all`)}
>
<MdGroup height="full" />
@ -63,7 +64,7 @@ export const ArtistDetailPage = () => {
<Flex
direction="row"
width="80%"
marginX="auto"
margin="0 auto"
padding="10px"
gap="10px"
>
@ -87,25 +88,27 @@ export const ArtistDetailPage = () => {
</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) => (
<Flex align="flex-start"
width={BASE_WRAP_WIDTH}
height={BASE_WRAP_HEIGHT}
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
<Button
key={data}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
style={{
alignContent: "flex-start",
width: BASE_WRAP_WIDTH,
height: BASE_WRAP_HEIGHT,
border: "1px",
borderColor: "brand.900",
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover={
// boxShadow: 'outline-over',
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
// }
}}
onClick={() => onSelectItem(data)}
>
<DisplayAlbumId id={data} key={data} />
</Flex>
</Button>
))}
</HStack>
<EmptyEnd />

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

@ -9,13 +9,14 @@ import { PageLayout } from '@/components/Layout/PageLayout';
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 { useColorThemeValue } from '@/theme/ThemeContext';
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';
import { useTrackService } from '@/service/Track';
import { DataTools, TypeCheck } from '@/utils/data-tools';
import { Button, Flex, HStack, Span, Text } from '@/ui';
const LIMIT_RANDOM_VALUES = 25;
export const ArtistsPage = () => {
@ -55,27 +56,27 @@ export const ArtistsPage = () => {
<>
<TopBar title="All artists">
<SearchInput onChange={setFilterName} />
<Tooltip.Root aria-label="Random play">
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onRandomPlay}>
<MdOutlineForkRight />
</Button>
</Tooltip.Root>
</TopBar>
<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) => (
<Flex align="flex-start"
width={BASE_WRAP_WIDTH}
height={BASE_WRAP_HEIGHT}
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
<Button
key={data.id}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
style={{
width: BASE_WRAP_WIDTH,
height: BASE_WRAP_HEIGHT,
alignContent: "flex-start",
border: "1px",
borderColor: "brand.900",
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover:{
// boxShadow: 'outline-over',
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
// }
}}
onClick={() => onSelectItem(data)}
>
@ -83,7 +84,7 @@ export const ArtistsPage = () => {
<Covers
data={data.covers}
size={BASE_WRAP_ICON_SIZE}
height="full"
style={{ height: "full" }}
// iconEmpty={LuUser}
/>
<Flex
@ -92,19 +93,20 @@ export const ArtistsPage = () => {
maxWidth="150px"
height="full"
paddingLeft="5px"
overflowX="hidden"
style={{ overflowX: "hidden" }}
>
<Text
/*align="left"*/
/*noOfLines={[1, 2]}*/
>
<Span
as="span"
fontSize="20px"
fontWeight="bold"
userSelect="none"
marginRight="auto"
overflow="hidden"
style={{
marginRight: "auto",
overflow: "hidden",
}}
>
{data.name}
</Span>
@ -112,7 +114,7 @@ export const ArtistsPage = () => {
</Text>
</Flex>
</Flex>
</Flex>
</Button>
))}
</HStack>
<EmptyEnd />

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

@ -14,7 +14,8 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificGender } from '@/service/Gender';
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 = () => {
const { genderId } = useParams();
@ -66,17 +67,19 @@ export const GenderDetailPage = () => {
<PageLayout>
<Flex
direction="row"
width="80%"
marginX="auto"
padding="10px"
gap="10px"
style={{
width: "80%",
margin: "0 auto",
padding: "10px",
}}
>
<Covers
data={dataGender?.covers}
// TODO: iconEmpty={LuDisc3}
slideshow
/>
<Flex direction="column" width="80%" marginRight="auto">
<Flex direction="column" style={{ width: "80%", marginRight: "auto" }}>
<Text fontSize="24px" fontWeight="bold">
{dataGender?.name}
</Text>
@ -89,23 +92,26 @@ export const GenderDetailPage = () => {
<Flex
direction="column"
gap="20px"
marginX="auto"
padding="20px"
width="80%"
style={{
margin: "0 auto",
padding: "20px",
width: "80%",
}}
>
{tracksOnAGender?.map((data) => (
<Box
minWidth="100%"
//height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
<Flex
key={data.id}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
style={{
minWidth: "100%",
//height="60px",
border: "1px",
borderColor: "brand.900",
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}}
>
<DisplayTrackFull
@ -121,7 +127,7 @@ export const GenderDetailPage = () => {
{ name: 'Add Playlist', onClick: () => { } },
]}
/>
</Box>
</Flex>
))}
<EmptyEnd />
</Flex>

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

@ -9,7 +9,7 @@ import { SearchInput } from '@/components/SearchInput';
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 { useColorThemeValue } from '@/theme/ThemeContext';
import { Flex, HStack } from '@/ui';
export const GendersPage = () => {

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

@ -7,7 +7,8 @@ import { useNavigate } from 'react-router-dom';
import { PageLayout } from '@/components/Layout/PageLayout';
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 = {
id: number;
@ -57,35 +58,38 @@ export const HomePage = () => {
<>
<TopBar title="Home" />
<PageLayout>
<HStack wrap="wrap" /*spacing="20px"*/ marginX="auto" padding="20px" justify="center">
<HStack style={{ flexWrap: "wrap", /*spacing="20px"*/ margin: "0 auto", padding: "20px", justify: "center" }}>
{homeList.map((data) => (
<Flex align="flex-start"
width="200px"
height="190px"
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: "200px",
height: "190px",
border: "1px",
borderColor: "brand.900",
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover:{
// boxShadow: 'outline-over',
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
// }
}}
onClick={() => onSelectItem(data)}
>
<Flex direction="column" width="full" height="full">
<Center height="full">{data.icon}</Center>
<Center>
<Flex direction="column" style={{ width: "full", height: "full" }}>
<Div style={{ alignContent: "center", height: "full" }}>{data.icon}</Div>
<Div style={{ alignContent: "center", height: "full" }}>
<Text
fontSize="25px"
fontWeight="bold"
textTransform="uppercase"
userSelect="none"
style={{
textTransform: "uppercase",
userSelect: "none",
}}
>
{data.name}
</Text>
</Center>
</Div>
</Flex>
</Flex>
))}

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

@ -7,9 +7,10 @@ import { TopBar } from '@/components/TopBar/TopBar';
import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
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 { DisplayTrackFullId } from '@/components/track/DisplayTrackFullId';
import { Flex } from '@/ui';
export const OnAirPage = () => {
const { playInList } = useActivePlaylistService();
@ -72,24 +73,27 @@ export const OnAirPage = () => {
<Flex
direction="column"
gap={BASE_WRAP_SPACING}
marginX="auto"
padding="20px"
width="80%"
style={{
margin: "0 auto",
padding: "20px",
width: "80%",
}}
>
{!playTrackList && <>No playing</>}
{playTrackList && playTrackList?.map((data) => (
<Box
minWidth="100%"
//height="60px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
<Flex
key={data}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
style={{
minWidth: "100%",
//height:"60px",
border: "1px",
borderColor: "brand.900",
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
padding: "5px",
// _hover: {
// boxShadow: 'outline-over',
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
// }
}}
>
<DisplayTrackFullId
@ -110,7 +114,7 @@ export const OnAirPage = () => {
},
]}
/>
</Box>
</Flex>
))}
<EmptyEnd />
</Flex>

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

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

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

@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar';
import { useColorModeValue } from '@/components/ui/color-mode';
import { useColorThemeValue } from '@/theme/ThemeContext';
export const alphabet = [
'a',
@ -50,13 +50,13 @@ export const TrackSelectionPage = () => {
height="75px"
border="1px"
borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
backgroundColor={useColorThemeValue('#FFFFFF88', '#00000088')}
key={data}
padding="5px"
as="button"
_hover={{
boxShadow: 'outline-over',
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
}}
onClick={() => onSelectItem(data)}
>

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

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

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

@ -0,0 +1,115 @@
import { createContext, useContext, useState, useEffect, CSSProperties, ReactNode, useCallback } from "react";
import { basicColor } from "./colors";
type themeContextProps = {
theme: string;
themeList: string[];
setTheme: (string) => void;
toggleTheme: () => void;
convertStyle: (style: CSSProperties) => CSSProperties,
}
const ThemeContext = createContext<themeContextProps>({
theme: "error",
themeList: ["error"],
setTheme: (_: string) => { },
toggleTheme: () => { },
convertStyle: (style: CSSProperties): CSSProperties => { 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",
},
}
};
export function ThemeProvider({ children, themeList = ["light", "dark"] }: { children: ReactNode, themeList?: string[] }) {
const [theme, setTheme] = useState<string>(themeList[0]);
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(() => {
console.log(`plop: ${theme}`);
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;
}
if (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, "borderColor");
convertElementStyle(out, "color");
return out;
}, [convertElementStyle]);
return (
<ThemeContext.Provider value={{ theme, themeList, setTheme, toggleTheme, convertStyle }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = () => useContext(ThemeContext);
export function useColorThemeValue<T>(firstTheme: T, secondTheme: T) {
const { theme, themeList } = useTheme()
return theme === themeList[0] ? firstTheme : secondTheme
}

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

@ -0,0 +1,125 @@
// 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 back = {
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 = {
green, red, orange, back, blue, yellow, purple, cyan
}
export const colors = {
brand: brand,
back: back,
success: green,
error: red,
warning: orange,
} as const;

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

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

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

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

@ -1,48 +0,0 @@
import * as recipes from './recipes';
import { colors } from "./foundations/colors"
const baseTheme = {
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: {
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);
*/
export const THEME = {
...recipes
};

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

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

13
front/src/ui/Button.tsx
View File

@ -1,3 +1,4 @@
import { useTheme } from "@/theme/ThemeContext";
import { ReactNode, CSSProperties } from "react";
export type ButtonProps = {
@ -7,10 +8,8 @@ export type ButtonProps = {
};
export const Button = ({ children, onClick, style }: ButtonProps) => {
return (
<button
onClick={onClick}
style={{
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle({
padding: '10px 20px',
backgroundColor: '#3182CE',
color: '#FFF',
@ -19,7 +18,11 @@ export const Button = ({ children, onClick, style }: ButtonProps) => {
cursor: 'pointer',
fontSize: '16px',
...style,
}}
}) : undefined;
return (
<button
onClick={onClick}
style={themedStyle}
>
{children}
</button>

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

@ -0,0 +1,21 @@
import { useTheme } from '@/theme/ThemeContext';
import { CSSProperties, ReactNode } from 'react';
export type DivProps = {
children?: ReactNode;
onClick?: () => void;
style?: CSSProperties
};
export const Div = ({ children, onClick, style }: DivProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle(style) : undefined;
return (
<div
onClick={onClick}
style={themedStyle}
>
{children}
</div>
);
};

47
front/src/ui/Flex.tsx
View File

@ -1,4 +1,5 @@
import React, { CSSProperties, ReactNode } from 'react';
import { Div } from './Div';
export type FlexProps = {
children?: ReactNode;
@ -7,12 +8,44 @@ export type FlexProps = {
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">
};
export const Flex = ({ children, onClick, direction = 'row', justify = 'flex-start', gap, align = 'stretch', style }: FlexProps) => {
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,
style }: FlexProps) => {
return (
<div
<Div
onClick={onClick}
style={{
display: 'flex',
@ -20,10 +53,18 @@ export const Flex = ({ children, onClick, direction = 'row', justify = 'flex-sta
justifyContent: justify,
gap: gap,
alignItems: align,
width,
height,
padding,
margin,
maxWidth,
minWidth,
maxHeight,
minHeight, paddingLeft, paddingRight, paddingTop, paddingBottom, marginLeft, marginRight, marginTop, marginBottom,
...style,
}}
>
{children}
</div>
</Div>
);
};

5
front/src/ui/FullPage.tsx
View File

@ -1,4 +1,5 @@
import { ReactNode, CSSProperties } from "react";
import { Div } from "./Div";
export type FullPageProps = {
children: ReactNode;
@ -7,7 +8,7 @@ export type FullPageProps = {
export const FullPage = ({ children, style }: FullPageProps) => {
return (
<div
<Div
style={{
top: '0',
bottom: '0',
@ -17,6 +18,6 @@ export const FullPage = ({ children, style }: FullPageProps) => {
}}
>
{children}
</div>
</Div>
);
};

5
front/src/ui/HStack.tsx
View File

@ -1,4 +1,5 @@
import { ReactNode, CSSProperties } from "react";
import { Div } from "./Div";
export type HStackProps = {
children: ReactNode;
@ -9,7 +10,7 @@ export type HStackProps = {
export const HStack = ({ children, spacing = '8px', align = 'flex-start', style }: HStackProps) => {
return (
<div
<Div
style={{
display: 'flex',
flexDirection: 'column',
@ -19,6 +20,6 @@ export const HStack = ({ children, spacing = '8px', align = 'flex-start', style
}}
>
{children}
</div>
</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>;
href?: string;
boxSize?: string;
onChange?: (e) => void;
style?: Omit<CSSProperties, "fontSize" | "fontWeight" | "color">;
};
export const Image = ({
ref,
href,
boxSize,
onChange,
style,
}: ImageProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle({ width: boxSize, height: boxSize, ...style }) : undefined;
return (
<image
ref={ref}
href={href}
onChange={onChange}
style={themedStyle}
>
</image>
);
};

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

5
front/src/ui/Table/body.tsx
View File

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

5
front/src/ui/Table/cell.tsx
View File

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

5
front/src/ui/Table/columnHeader.tsx
View File

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

5
front/src/ui/Table/header.tsx
View File

@ -1,3 +1,4 @@
import { useTheme } from "@/theme/ThemeContext";
import { CSSProperties, ReactNode } from "react"
export type HeaderProps = {
@ -5,5 +6,7 @@ export type HeaderProps = {
style?: CSSProperties;
};
export const Header = ({ children, style }: HeaderProps) => {
return <thead style={style}>{children}</thead>
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle(style) : undefined;
return <thead style={themedStyle}>{children}</thead>
}

9
front/src/ui/Table/root.tsx
View File

@ -1,3 +1,4 @@
import { useTheme } from '@/theme/ThemeContext';
import { CSSProperties, ReactNode } from 'react'
export type RootProps = {
@ -7,9 +8,11 @@ export type RootProps = {
}
export const Root = ({ background, children, style }: RootProps) => {
return (<table
style={{
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle({
backgroundColor: background,
...style
}}>{children}</table>);
}) : undefined;
return (<table
style={themedStyle}>{children}</table>);
}

5
front/src/ui/Table/row.tsx
View File

@ -1,3 +1,4 @@
import { useTheme } from "@/theme/ThemeContext";
import { CSSProperties, ReactNode } from "react"
export type RowProps = {
@ -6,5 +7,7 @@ export type RowProps = {
};
export const Row = ({ children, style }: RowProps) => {
return <tr style={style}>{children}</tr>
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle(style) : undefined;
return <tr style={themedStyle}>{children}</tr>
}

8
front/src/ui/Text.tsx
View File

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

29
front/src/ui/Textarea.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 TextareaProps = {
ref?: RefObject<any>;
value?: string;
onChange?: (e) => void;
style?: Omit<CSSProperties, "fontSize" | "fontWeight" | "color">;
};
export const Textarea = ({
ref,
value,
onChange,
style,
}: TextareaProps) => {
const { convertStyle } = useTheme();
const themedStyle = style ? convertStyle(style) : undefined;
return (
<textarea
ref={ref}
value={value}
onChange={onChange}
style={themedStyle}
>
</textarea>
);
};

5
front/src/ui/VStack.tsx
View File

@ -1,4 +1,5 @@
import { ReactNode, CSSProperties } from "react";
import { Div } from "./Div";
export type VStackProps = {
children: ReactNode;
@ -9,7 +10,7 @@ export type VStackProps = {
export const VStack = ({ children, spacing = '8px', align = 'flex-start', style }: VStackProps) => {
return (
<div
<Div
style={{
display: 'flex',
flexDirection: 'row',
@ -19,6 +20,6 @@ export const VStack = ({ children, spacing = '8px', align = 'flex-start', style
}}
>
{children}
</div>
</Div>
);
};

6
front/src/ui/index.tsx
View File

@ -4,4 +4,10 @@ export * from "./Flex.tsx"
export * from "./HStack.tsx"
export * from "./VStack.tsx"
export * from "./FullPage.tsx"
export * from "./Link.tsx"
export * from "./Div.tsx"
export * from "./Span.tsx"
export * from "./Input.tsx"
export * from "./Textarea.tsx"
export * from "./Image.tsx"
export * as Table from "./Table"

1
front/tsconfig.tsbuildinfo Normal file
View File

File diff suppressed because one or more lines are too long