From 9dfd87e16bbfd1767322a4a7940d9431e185e5a5 Mon Sep 17 00:00:00 2001 From: Oleksandra Nedashkivska Date: Wed, 21 Aug 2024 00:59:43 +0300 Subject: [PATCH 1/3] OV-27: + studio page --- frontend/src/app/app.tsx | 56 +------------------ .../common/components/button/button.tsx | 27 ++++++++- .../bundles/common/components/components.ts | 2 + .../common/components/header/header.tsx | 29 ++++++---- .../bundles/common/enums/app-route.enum.ts | 1 + frontend/src/bundles/studio/pages/studio.tsx | 31 ++++++++++ .../theme/styles/components.styles.ts | 13 +++++ frontend/src/index.tsx | 5 ++ 8 files changed, 95 insertions(+), 69 deletions(-) create mode 100644 frontend/src/bundles/studio/pages/studio.tsx diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx index e1f671b35..54a2eff7f 100644 --- a/frontend/src/app/app.tsx +++ b/frontend/src/app/app.tsx @@ -1,61 +1,9 @@ -import reactLogo from '~/assets/img/react.svg'; -import { Link, RouterOutlet } from '~/bundles/common/components/components.js'; -import { AppRoute } from '~/bundles/common/enums/enums.js'; -import { - useAppDispatch, - useAppSelector, - useEffect, - useLocation, -} from '~/bundles/common/hooks/hooks.js'; -import { actions as userActions } from '~/bundles/users/store/users.js'; +import { RouterOutlet } from '~/bundles/common/components/components.js'; const App: React.FC = () => { - const { pathname } = useLocation(); - const dispatch = useAppDispatch(); - const { users, dataStatus } = useAppSelector(({ users }) => ({ - users: users.users, - dataStatus: users.dataStatus, - })); - - const isRoot = pathname === AppRoute.ROOT; - - useEffect(() => { - if (isRoot) { - void dispatch(userActions.loadAll()); - } - }, [isRoot, dispatch]); - return ( <> - logo - - -

Current path: {pathname}

- -
- -
- {isRoot && ( - <> -

Users:

-

Status: {dataStatus}

- - - )} + ); }; diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx index fa9006438..81e033ac0 100644 --- a/frontend/src/bundles/common/components/button/button.tsx +++ b/frontend/src/bundles/common/components/button/button.tsx @@ -1,12 +1,33 @@ -import { Button as LibraryButton } from '@chakra-ui/react'; +import { + type SystemStyleObject, + Button as LibraryButton, +} from '@chakra-ui/react'; type Properties = { label: string; type?: 'button' | 'submit'; + variant?: string; + size?: 'md' | 'lg'; + isDisabled?: boolean; + sx?: SystemStyleObject; }; -const Button: React.FC = ({ type = 'button', label }) => ( - +const Button: React.FC = ({ + type = 'button', + label, + variant = 'solid', + size = 'md', + isDisabled = false, + sx = {}, +}) => ( + {label} ); diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 45422fab3..b5c255fa7 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -5,12 +5,14 @@ export { Link } from './link/link.js'; export { Loader } from './loader/loader.js'; export { Overlay } from './overlay/overlay.js'; export { RouterProvider } from './router-provider/router-provider.js'; +export { DownloadIcon } from '@chakra-ui/icons'; export { Box, Circle, ChakraProvider as ComponentsProvider, Flex, Heading, + IconButton, Text, VStack, } from '@chakra-ui/react'; diff --git a/frontend/src/bundles/common/components/header/header.tsx b/frontend/src/bundles/common/components/header/header.tsx index 2a0322074..7846ddee7 100644 --- a/frontend/src/bundles/common/components/header/header.tsx +++ b/frontend/src/bundles/common/components/header/header.tsx @@ -1,6 +1,12 @@ -import { Flex, Text } from '@chakra-ui/react'; +import { Box, Flex, Text } from '@chakra-ui/react'; -const Header = (): JSX.Element => { +type Properties = { + left?: React.ReactNode; + center?: React.ReactNode; + right?: React.ReactNode; +}; + +const Header: React.FC = ({ left, center, right }) => { return ( { position="sticky" top="0" left="0" - width="100%" + width="full" backgroundColor="background.900" - color="white" boxShadow="md" zIndex="1000" padding="4" marginBottom="20px" + alignItems="center" + justifyContent="space-between" > - - + {left ?? ( + // {/* TODO: Add logo */} + Logo - + )} + {center} + {right} ); }; diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts index dfc5352ec..9d1c5334e 100644 --- a/frontend/src/bundles/common/enums/app-route.enum.ts +++ b/frontend/src/bundles/common/enums/app-route.enum.ts @@ -2,6 +2,7 @@ const AppRoute = { ROOT: '/', SIGN_IN: '/sign-in', SIGN_UP: '/sign-up', + STUDIO: '/studio', } as const; export { AppRoute }; diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx new file mode 100644 index 000000000..fd0acd3d0 --- /dev/null +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -0,0 +1,31 @@ +import { + Button, + DownloadIcon, + Header, + IconButton, +} from '~/bundles/common/components/components.js'; + +const Studio: React.FC = () => { + return ( + <> +
+ } + right={ + } + /> + } + /> + + ); +}; + +export { Studio }; diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts index 417d40ef9..01b8d24f2 100644 --- a/frontend/src/framework/theme/styles/components.styles.ts +++ b/frontend/src/framework/theme/styles/components.styles.ts @@ -18,6 +18,19 @@ const components = { }, }, }, + primaryOutlined: { + color: colors.background[300], + border: '1px solid', + borderColor: colors.background[300], + _hover: { + color: 'white', + bg: colors.background[300], + _disabled: { + color: colors.background[300], + bg: 'none', + }, + }, + }, ghostIcon: { color: colors.white, _hover: { diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 1412d521b..901c2d1de 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -9,6 +9,7 @@ import { StoreProvider, } from '~/bundles/common/components/components.js'; import { AppRoute } from '~/bundles/common/enums/enums.js'; +import { Studio } from '~/bundles/studio/pages/studio.js'; import { store } from '~/framework/store/store.js'; import { theme } from '~/framework/theme/theme.js'; @@ -29,6 +30,10 @@ const routes = [ path: AppRoute.SIGN_UP, element: , }, + { + path: AppRoute.STUDIO, + element: , + }, ], }, ]; From 2e8f11a0a3acede6c43683ea4aef8f15f242ddb2 Mon Sep 17 00:00:00 2001 From: Oleksandra Nedashkivska Date: Wed, 21 Aug 2024 10:52:23 +0300 Subject: [PATCH 2/3] OV-27: + chakra icons --- frontend/package.json | 1 + package-lock.json | 13 +++++++++++++ 2 files changed, 14 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index 881769413..41ff12932 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,7 @@ "vite": "5.4.0" }, "dependencies": { + "@chakra-ui/icons": "2.1.1", "@chakra-ui/react": "2.8.2", "@emotion/react": "11.13.0", "@emotion/styled": "11.13.0", diff --git a/package-lock.json b/package-lock.json index 711edfde0..c679dfd41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,6 +71,7 @@ "frontend": { "version": "1.0.0", "dependencies": { + "@chakra-ui/icons": "2.1.1", "@chakra-ui/react": "2.8.2", "@emotion/react": "11.13.0", "@emotion/styled": "11.13.0", @@ -803,6 +804,18 @@ "react": ">=18" } }, + "node_modules/@chakra-ui/icons": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz", + "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==", + "dependencies": { + "@chakra-ui/icon": "3.2.0" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, "node_modules/@chakra-ui/image": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz", From 3fd0034b920104f04d22e0e5d445f2befc326ab4 Mon Sep 17 00:00:00 2001 From: Oleksandra Nedashkivska Date: Wed, 21 Aug 2024 14:09:22 +0300 Subject: [PATCH 3/3] OV-27: * change button props order --- frontend/src/bundles/common/components/button/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx index 81e033ac0..69b312847 100644 --- a/frontend/src/bundles/common/components/button/button.tsx +++ b/frontend/src/bundles/common/components/button/button.tsx @@ -13,8 +13,8 @@ type Properties = { }; const Button: React.FC = ({ - type = 'button', label, + type = 'button', variant = 'solid', size = 'md', isDisabled = false,