From 710594c2819621724e92d4f4003c096d0d744e2e Mon Sep 17 00:00:00 2001 From: JKaypa Date: Wed, 21 Aug 2024 21:53:02 -0500 Subject: [PATCH 01/31] OV-13: + create svg icons logic --- .../components/icon/components/icons.tsx | 28 +++++++++++++++++++ .../common/components/icon/icon-map.ts | 12 ++++++++ .../bundles/common/components/icon/icon.ts | 2 ++ .../common/components/icon/size.enum.ts | 5 ++++ 4 files changed, 47 insertions(+) create mode 100644 frontend/src/bundles/common/components/icon/components/icons.tsx create mode 100644 frontend/src/bundles/common/components/icon/icon-map.ts create mode 100644 frontend/src/bundles/common/components/icon/icon.ts create mode 100644 frontend/src/bundles/common/components/icon/size.enum.ts diff --git a/frontend/src/bundles/common/components/icon/components/icons.tsx b/frontend/src/bundles/common/components/icon/components/icons.tsx new file mode 100644 index 000000000..107e67174 --- /dev/null +++ b/frontend/src/bundles/common/components/icon/components/icons.tsx @@ -0,0 +1,28 @@ +import { type IconProps } from '@chakra-ui/react'; +import { type ReactElement } from 'react'; + +import { Icon } from '../../components.js'; + +const HomeIcon = (properties: IconProps): ReactElement => { + return ( + + + + ); +}; + +const LogOutIcon = (properties: IconProps): ReactElement => { + return ( + + + + ); +}; + +export { HomeIcon, LogOutIcon }; diff --git a/frontend/src/bundles/common/components/icon/icon-map.ts b/frontend/src/bundles/common/components/icon/icon-map.ts new file mode 100644 index 000000000..ad4fb1768 --- /dev/null +++ b/frontend/src/bundles/common/components/icon/icon-map.ts @@ -0,0 +1,12 @@ +import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons'; + +import { HomeIcon, LogOutIcon } from './components/icons.js'; + +const IconMap = { + HOME: HomeIcon, + LOG_OUT: LogOutIcon, + ARROW_LEFT: ArrowLeftIcon, + ARROW_RIGHT: ArrowRightIcon, +} as const; + +export { IconMap }; diff --git a/frontend/src/bundles/common/components/icon/icon.ts b/frontend/src/bundles/common/components/icon/icon.ts new file mode 100644 index 000000000..ccda85af1 --- /dev/null +++ b/frontend/src/bundles/common/components/icon/icon.ts @@ -0,0 +1,2 @@ +export { IconMap } from './icon-map.js'; +export { Size } from './size.enum.js'; diff --git a/frontend/src/bundles/common/components/icon/size.enum.ts b/frontend/src/bundles/common/components/icon/size.enum.ts new file mode 100644 index 000000000..4c3debdd1 --- /dev/null +++ b/frontend/src/bundles/common/components/icon/size.enum.ts @@ -0,0 +1,5 @@ +const Size = { + LG: 5, +}; + +export { Size }; From bd262ca7ecd06e9ceb87c64b8300fee48dab4dd3 Mon Sep 17 00:00:00 2001 From: JKaypa Date: Wed, 21 Aug 2024 21:55:32 -0500 Subject: [PATCH 02/31] OV-13: + create side bar component --- .../libs/components/collapse-button-link.tsx | 40 +++++++ .../libs/components/collapse-button.tsx | 45 ++++++++ .../side-bar/libs/components/components.ts | 2 + .../common/components/side-bar/side-bar.tsx | 102 ++++++++++++++++++ 4 files changed, 189 insertions(+) create mode 100644 frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx create mode 100644 frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx create mode 100644 frontend/src/bundles/common/components/side-bar/libs/components/components.ts create mode 100644 frontend/src/bundles/common/components/side-bar/side-bar.tsx diff --git a/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx new file mode 100644 index 000000000..a891c2e66 --- /dev/null +++ b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx @@ -0,0 +1,40 @@ +import { useLocation } from 'react-router-dom'; + +import { Link } from '~/bundles/common/components/components.js'; +import { type AppRoute } from '~/bundles/common/enums/enums.js'; +import { type ValueOf } from '~/bundles/common/types/types.js'; + +import { + type CollapseButtonProperties, + CollapseButton, +} from './collapse-button.js'; + +type Properties = Omit & { + to: ValueOf; +}; + +const CollapseButtonLink = ({ + icon, + isCollapsed, + label, + to, +}: Properties): JSX.Element => { + const { pathname } = useLocation(); + + const activeButtonPage = (page: ValueOf): string => { + return pathname === page ? 'background.600' : ''; + }; + + return ( + + + + ); +}; + +export { CollapseButtonLink }; diff --git a/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx new file mode 100644 index 000000000..9663162ac --- /dev/null +++ b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx @@ -0,0 +1,45 @@ +import { type ReactElement } from 'react'; + +import { Box } from '~/bundles/common/components/components.js'; + +type Properties = { + bg?: string; + color?: string; + handleClick?: () => void; + icon: ReactElement; + isCollapsed: boolean; + label: string; +}; + +const CollapseButton = ({ + bg = 'none', + color = 'white', + handleClick = (): void => {}, + icon, + isCollapsed, + label, +}: Properties): JSX.Element => { + return ( + + {icon} + {isCollapsed ? '' : label} + + ); +}; + +export { type Properties as CollapseButtonProperties, CollapseButton }; diff --git a/frontend/src/bundles/common/components/side-bar/libs/components/components.ts b/frontend/src/bundles/common/components/side-bar/libs/components/components.ts new file mode 100644 index 000000000..6da1f4533 --- /dev/null +++ b/frontend/src/bundles/common/components/side-bar/libs/components/components.ts @@ -0,0 +1,2 @@ +export { CollapseButton } from './collapse-button.js'; +export { CollapseButtonLink } from './collapse-button-link.js'; diff --git a/frontend/src/bundles/common/components/side-bar/side-bar.tsx b/frontend/src/bundles/common/components/side-bar/side-bar.tsx new file mode 100644 index 000000000..50de0e201 --- /dev/null +++ b/frontend/src/bundles/common/components/side-bar/side-bar.tsx @@ -0,0 +1,102 @@ +import { useCallback, useState } from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; + +import { + Box, + Flex, + Icon, + IconButton, + IconMap, + Spacer, +} from '~/bundles/common/components/components.js'; +import { AppRoute } from '~/bundles/common/enums/enums.js'; +import { type ValueOf } from '~/bundles/common/types/types.js'; + +import { Size } from '../icon/icon.js'; +import { + CollapseButton, + CollapseButtonLink, +} from './libs/components/components.js'; + +const SideBar = (): JSX.Element => { + const [isCollapsed, setIsCollapsed] = useState(false); + const { pathname } = useLocation(); + const navigate = useNavigate(); + + const toggle = useCallback( + (): void => setIsCollapsed(!isCollapsed), + [isCollapsed], + ); + + const activeIconPage = (page: ValueOf): string => { + return pathname === page ? 'white' : 'background.600'; + }; + + const logOut = useCallback(() => { + //ToDo: log out user with token + navigate(AppRoute.SIGN_IN); + }, [navigate]); + + return ( + + + ) : ( + + ) + } + mb="10px" + onClick={toggle} + _active={{ bg: 'none' }} + _hover={{ bg: 'none' }} + justifyContent={isCollapsed ? 'center' : 'flex-end'} + /> + + + + } + label="Home" + to="/" + isCollapsed={isCollapsed} + /> + + + + + + } + isCollapsed={isCollapsed} + label={'log out'} + handleClick={logOut} + /> + + ); +}; + +export { SideBar }; From 70576307b943d69b4e1331a997796275d815b6ce Mon Sep 17 00:00:00 2001 From: JKaypa Date: Wed, 21 Aug 2024 22:12:09 -0500 Subject: [PATCH 03/31] OV-13: + export components --- frontend/src/bundles/common/components/components.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index ab06c5910..996cda9a8 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -1,13 +1,16 @@ export { Button } from './button/button.js'; export { Header } from './header/header.js'; +export { IconMap } from './icon/icon.js'; export { Input } from './input/input.js'; 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 { SideBar } from './side-bar/side-bar.js'; export { VideoModal } from './video-modal/video-modal.js'; export { DownloadIcon } from '@chakra-ui/icons'; export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; +export { Icon } from '@chakra-ui/react'; export { Box, Center, @@ -21,6 +24,7 @@ export { InputGroup, InputRightElement, SimpleGrid, + Spacer, Text, VStack, } from '@chakra-ui/react'; From ca68a7cd1420470c8c808ee3b84b045b2cf6b21a Mon Sep 17 00:00:00 2001 From: JKaypa Date: Wed, 21 Aug 2024 23:36:23 -0500 Subject: [PATCH 04/31] OV-13: + export icon component --- frontend/src/bundles/common/components/components.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 996cda9a8..72b0b284e 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -10,7 +10,6 @@ export { SideBar } from './side-bar/side-bar.js'; export { VideoModal } from './video-modal/video-modal.js'; export { DownloadIcon } from '@chakra-ui/icons'; export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; -export { Icon } from '@chakra-ui/react'; export { Box, Center, @@ -20,6 +19,7 @@ export { FormControl, FormErrorMessage, Heading, + Icon, IconButton, InputGroup, InputRightElement, From 423aed206046f76e7cc1ab2dba0f04e57e69c0d1 Mon Sep 17 00:00:00 2001 From: JKaypa Date: Thu, 22 Aug 2024 07:01:23 -0500 Subject: [PATCH 05/31] OV-50: * update user card and extract user circle component --- .../bundles/users/components/components.ts | 1 + .../user-card/components/user-circle.tsx | 20 +++++++++++++++++++ .../users/components/user-card/user-card.tsx | 11 +++------- 3 files changed, 24 insertions(+), 8 deletions(-) create mode 100644 frontend/src/bundles/users/components/user-card/components/user-circle.tsx diff --git a/frontend/src/bundles/users/components/components.ts b/frontend/src/bundles/users/components/components.ts index dcbd2c9a1..a34b28eed 100644 --- a/frontend/src/bundles/users/components/components.ts +++ b/frontend/src/bundles/users/components/components.ts @@ -1 +1,2 @@ +export { UserCircle } from './user-card/components/user-circle.js'; export { UserCard } from './user-card/user-card.js'; diff --git a/frontend/src/bundles/users/components/user-card/components/user-circle.tsx b/frontend/src/bundles/users/components/user-card/components/user-circle.tsx new file mode 100644 index 000000000..9c6791ead --- /dev/null +++ b/frontend/src/bundles/users/components/user-card/components/user-circle.tsx @@ -0,0 +1,20 @@ +import { Circle } from '~/bundles/common/components/components.js'; + +type Properties = { + username: string; +}; + +const UserCircle: React.FC = ({ username }) => { + return ( + + {username} + + ); +}; + +export { UserCircle }; diff --git a/frontend/src/bundles/users/components/user-card/user-card.tsx b/frontend/src/bundles/users/components/user-card/user-card.tsx index 1d340aa6c..3761eab98 100644 --- a/frontend/src/bundles/users/components/user-card/user-card.tsx +++ b/frontend/src/bundles/users/components/user-card/user-card.tsx @@ -1,11 +1,12 @@ import { Button, - Circle, Flex, Text, VStack, } from '~/bundles/common/components/components.js'; +import { UserCircle } from '../components.js'; + const UserCard: React.FC = () => ( ( pl="10px" > {/* TODO: replace Circle and Text content with dynamic values */} - - FN - + Firstname Lastname