From aae16c7a576ec8a53e2a2592e7ac2446d00779d9 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 20 Aug 2024 23:02:11 -0400 Subject: [PATCH 01/32] OV-29: + routing to video editor view --- frontend/src/app/app.tsx | 3 +++ frontend/src/bundles/common/enums/app-route.enum.ts | 1 + 2 files changed, 4 insertions(+) diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx index e1f671b35..ef5cb8e8a 100644 --- a/frontend/src/app/app.tsx +++ b/frontend/src/app/app.tsx @@ -39,6 +39,9 @@ const App: React.FC = () => {
  • Sign up
    • +
  • + Video Editor +

    • Current path: {pathname}

    diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts index dfc5352ec..097c48a67 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', + VIDEO_EDITOR: '/video-editor', } as const; export { AppRoute }; From e2ec702bc504d4431cfcecccb1b98f1cae092f98 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 20 Aug 2024 23:03:59 -0400 Subject: [PATCH 02/32] OV-29: + script to use lint fix --- frontend/package.json | 2 ++ package.json | 3 +++ 2 files changed, 5 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index 881769413..1ceea11b0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,8 +9,10 @@ "scripts": { "lint:css": "npx stylelint \"src/**/*.scss\" --aei", "lint:js": "npx eslint \"src/**/*.{ts,tsx}\"", + "lint:js:fix": "npx eslint --fix \"src/**/*.{ts,tsx}\"", "lint:type": "npx tsc --noEmit", "lint": "npm run lint:type && npm run lint:js", + "lint:fix": "npm run lint:js:fix", "start:dev": "vite", "build": "tsc -p tsconfig.build.json && vite build", "preview": "vite preview" diff --git a/package.json b/package.json index 8bf4426ea..2d5f15238 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,12 @@ "lint:fs": "ls-lint", "lint:type": "npm run lint:type --workspaces --if-present", "lint:js": "npm run lint:js --workspaces --if-present -- --max-warnings=0", + "lint:js:fix": "eslint --fix \"**/*.{ts,tsx}\" --max-warnings=0", "lint:css": "npm run lint:css --workspaces --if-present", + "lint:css:fix": "stylelint --fix \"**/*.{scss,css}\"", "lint:format": "prettier --check \"**/*.{ts,tsx,json,md,scss,html,yml}\"", "lint": "npm run lint:editor && npm run lint:fs && npm run lint:format && npm run lint:type && npm run lint:js && npm run lint:css", + "lint:fix": "npm run lint:editor && npm run lint:fs && npm run lint:format && npm run lint:type && npm run lint:js:fix && npm run lint:css:fix", "format": "prettier --write \"**/*.{ts,tsx,json,md,css,html,yml}\"" }, "devDependencies": { From b0e6fbfa3cd1673d4c46808e7f6d63bb8dd2172d Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 20 Aug 2024 23:04:57 -0400 Subject: [PATCH 03/32] OV-29: + use of new components of chackra ui --- frontend/src/bundles/common/components/components.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 71c774689..5efac73e2 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -7,6 +7,8 @@ export { RouterProvider } from './router-provider/router-provider.js'; export { Box, Circle, + CloseButton, + Collapse, ChakraProvider as ComponentsProvider, Flex, Heading, From 8f5e21be1a09a927faf1c4cfaf12a4eb9050c363 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 20 Aug 2024 23:06:51 -0400 Subject: [PATCH 04/32] OV-29: + simple menu for vidao editor --- .../video-editor/components/menu/menu.tsx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 frontend/src/bundles/video-editor/components/menu/menu.tsx diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx new file mode 100644 index 000000000..7944ae7a1 --- /dev/null +++ b/frontend/src/bundles/video-editor/components/menu/menu.tsx @@ -0,0 +1,36 @@ +import { Box, Flex, VStack } from '~/bundles/common/components/components.js'; + +type MenuItem = { + label: string; + icon: React.ReactNode; + onClick: () => void; +}; + +type MenuProperties = { + items: MenuItem[]; +}; + +const Menu: React.FC = ({ items }) => { + return ( + + + {items.map((item, index) => ( + + {item.icon} +
    {item.label}
    +     + ))} +     +     + ); +}; + +export { Menu }; From 3dd913d3b07289f51f360e145293a8e58a021977 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 20 Aug 2024 23:08:07 -0400 Subject: [PATCH 05/32] OV-29: + mock components for the menu body --- .../video-editor/components/mock/menu-mock.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 frontend/src/bundles/video-editor/components/mock/menu-mock.tsx diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx new file mode 100644 index 000000000..1e930a664 --- /dev/null +++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx @@ -0,0 +1,15 @@ +const TemplatesContent: React.FC = () => ( +
    This is the Templates content.
    +); +const AvatarsContent: React.FC = () =>
    This is the Avatars content.
    ; +const ScriptContent: React.FC = () =>
    This is the Script content.
    ; +const TextContent: React.FC = () =>
    This is the Text content.
    ; +const AssetsContent: React.FC = () =>
    This is the Assets content.
    ; + +export { + AssetsContent, + AvatarsContent, + ScriptContent, + TemplatesContent, + TextContent, +}; From d318403064e37a043b926ab2d55fa0e9d3a58285 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 20 Aug 2024 23:10:22 -0400 Subject: [PATCH 06/32] OV-29: + simple menu body for video editor --- .../components/menu-body/menu-body.tsx | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx diff --git a/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx b/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx new file mode 100644 index 000000000..966ca85e0 --- /dev/null +++ b/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx @@ -0,0 +1,50 @@ +import { + Box, + CloseButton, + Flex, + Heading, + VStack, +} from '~/bundles/common/components/components.js'; + +type Properties = { + title: string; + children: React.ReactNode; + isOpen: boolean; + onClose: () => void; +}; + +const MenuBody: React.FC = ({ + title, + children, + isOpen, + onClose, +}) => { + return ( + <> + {isOpen && ( + + + + {title} + + + + + {children} + + + )} + + ); +}; + +export { MenuBody }; From cbe63e4fe271eab1e3ca464850d81506070aeddf Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 20 Aug 2024 23:12:02 -0400 Subject: [PATCH 07/32] OV-29: + creating video editor component to use menu and menu body --- .../video-editor/components/components.ts | 2 + .../video-editor/pages/video-editor.tsx | 68 +++++++++++++++++++ frontend/src/index.tsx | 6 ++ 3 files changed, 76 insertions(+) create mode 100644 frontend/src/bundles/video-editor/components/components.ts create mode 100644 frontend/src/bundles/video-editor/pages/video-editor.tsx diff --git a/frontend/src/bundles/video-editor/components/components.ts b/frontend/src/bundles/video-editor/components/components.ts new file mode 100644 index 000000000..10b0aa452 --- /dev/null +++ b/frontend/src/bundles/video-editor/components/components.ts @@ -0,0 +1,2 @@ +export { Menu } from './menu/menu.js'; +export { MenuBody } from './menu-body/menu-body.js'; diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx new file mode 100644 index 000000000..e6986ff19 --- /dev/null +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -0,0 +1,68 @@ +import { CalendarIcon } from '@chakra-ui/icons'; +import { useCallback, useState } from 'react'; + +import { Menu, MenuBody } from '../components/components.js'; +import { + AssetsContent, + AvatarsContent, + ScriptContent, + TemplatesContent, + TextContent, +} from '../components/mock/menu-mock.js'; + +const VideoEditor: React.FC = () => { + const [activeContent, setActiveContent] = useState( + null, + ); + const [activeTitle, setActiveTitle] = useState(''); + const [isOpen, setIsOpen] = useState(false); + + const handleMenuClick = (label: string, content: React.ReactNode): void => { + setActiveContent(content); + setActiveTitle(label); + setIsOpen(true); + }; + + const handleClose = useCallback((): void => { + setIsOpen(false); + }, []); + + const menuItems = [ + { + label: 'Templates', + icon: , + onClick: () => handleMenuClick('Templates', ), + }, + { + label: 'Avatars', + icon: , + onClick: () => handleMenuClick('Avatars', ), + }, + { + label: 'Script', + icon: , + onClick: () => handleMenuClick('Script', ), + }, + { + label: 'Text', + icon: , + onClick: () => handleMenuClick('Text', ), + }, + { + label: 'Assets', + icon: , + onClick: () => handleMenuClick('Assets', ), + }, + ]; + + return ( + <> + + + {activeContent} + + + ); +}; + +export { VideoEditor }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 1412d521b..5053607ab 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -12,6 +12,8 @@ import { AppRoute } from '~/bundles/common/enums/enums.js'; import { store } from '~/framework/store/store.js'; import { theme } from '~/framework/theme/theme.js'; +import { VideoEditor } from './bundles/video-editor/pages/video-editor.js'; + const routes = [ { path: AppRoute.ROOT, @@ -29,6 +31,10 @@ const routes = [ path: AppRoute.SIGN_UP, element: , }, + { + path: AppRoute.VIDEO_EDITOR, + element: , + }, ], }, ]; From 23f84263e4562fb92859c346dfce0c40717dc012 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 21:17:25 -0400 Subject: [PATCH 08/32] OV-29: + components to create icon from svg --- .../bundles/common/components/components.ts | 1 + .../bundles/common/components/icons/icons.tsx | 80 +++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 frontend/src/bundles/common/components/icons/icons.tsx diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index d3ba4c1e6..f553b549b 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -8,6 +8,7 @@ export { RouterProvider } from './router-provider/router-provider.js'; export { VideoModal } from './video-modal/video-modal.js'; export { DownloadIcon } from '@chakra-ui/icons'; export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; +export { createIcon } from '@chakra-ui/react'; export { Box, Center, diff --git a/frontend/src/bundles/common/components/icons/icons.tsx b/frontend/src/bundles/common/components/icons/icons.tsx new file mode 100644 index 000000000..a412bcb82 --- /dev/null +++ b/frontend/src/bundles/common/components/icons/icons.tsx @@ -0,0 +1,80 @@ +import { createIcon } from '../components.js'; + +const TemplatesIcon = createIcon({ + displayName: 'Templates', + viewBox: '0 0 18 18', + d: 'M2 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 010 16V2C0 1.45.196.98.588.587A1.926 1.926 0 012 0h14c.55 0 1.02.196 1.413.588C17.803.979 18 1.45 18 2v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0116 18H2zm14-5H2v3h14v-3zm-2.5-2H16V2h-2.5v9zM2 11h2.5V2H2v9zm4.5 0h5V2h-5v9z', +}); + +const AvatarIcon = createIcon({ + displayName: 'Avatar', + viewBox: '0 0 20 20', + d: 'M7 12.25c-.35 0-.646-.12-.888-.363A1.207 1.207 0 015.75 11c0-.35.12-.646.362-.887.242-.242.538-.363.888-.363s.646.12.888.363c.241.241.362.537.362.887s-.12.646-.362.887A1.207 1.207 0 017 12.25zm6 0c-.35 0-.646-.12-.887-.363A1.207 1.207 0 0111.75 11c0-.35.12-.646.363-.887.241-.242.537-.363.887-.363s.646.12.887.363c.242.241.363.537.363.887s-.12.646-.363.887a1.207 1.207 0 01-.887.363zM10 18c2.233 0 4.125-.775 5.675-2.325C17.225 14.125 18 12.233 18 10c0-.4-.025-.787-.075-1.162a4.844 4.844 0 00-.275-1.088c-.35.083-.7.146-1.05.188-.35.041-.717.062-1.1.062a9.787 9.787 0 01-4.3-.975A9.983 9.983 0 017.75 4.3a9.86 9.86 0 01-2.287 3.388A9.768 9.768 0 012 9.85V10c0 2.233.775 4.125 2.325 5.675C5.875 17.225 7.767 18 10 18zm0 2a9.738 9.738 0 01-3.9-.788 10.099 10.099 0 01-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 010 10c0-1.383.263-2.683.787-3.9a10.099 10.099 0 012.138-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0110 0c1.383 0 2.683.263 3.9.787a10.098 10.098 0 013.175 2.138c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0120 10a9.738 9.738 0 01-.788 3.9 10.098 10.098 0 01-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0110 20zM8.65 2.125a8.016 8.016 0 002.85 2.813C12.7 5.646 14.033 6 15.5 6c.233 0 .458-.013.675-.037.217-.026.442-.055.675-.088A8.016 8.016 0 0014 3.062C12.8 2.354 11.467 2 10 2c-.233 0-.458.013-.675.038-.217.025-.442.054-.675.087zm-6.225 5.35A7.987 7.987 0 004.65 5.6a7.96 7.96 0 001.425-2.575A7.987 7.987 0 003.85 4.9a7.96 7.96 0 00-1.425 2.575z', +}); + +const ScriptIcon = createIcon({ + displayName: 'Script', + viewBox: '0 0 20 20', + d: 'M6.45 15.975c.267 0 .458-.088.575-.262a1.46 1.46 0 00.225-.613c.033-.167.063-.333.088-.5.024-.167.054-.35.087-.55.033-.183.07-.383.112-.6.042-.217.088-.467.138-.75.383-.083.758-.154 1.125-.212.367-.059.725-.105 1.075-.138.383-.05.762-.088 1.137-.112.375-.025.738-.055 1.088-.088a14.583 14.583 0 00.55 1.975c.133.383.28.7.438.95.158.25.354.467.587.65.233.183.487.283.762.3a.98.98 0 00.713-.225c.15-.117.225-.292.225-.525 0-.233-.067-.525-.2-.875a4.578 4.578 0 01-.213-.563 6.29 6.29 0 00-.212-.587 84.039 84.039 0 01-.225-.637 8.6 8.6 0 01-.175-.563c.217-.017.412-.054.588-.113a1.29 1.29 0 00.437-.237c.117-.1.204-.22.262-.362.059-.142.088-.296.088-.463a.885.885 0 00-.112-.463.878.878 0 00-.338-.312 1.494 1.494 0 00-.563-.162 3.379 3.379 0 00-.762.012l-.1-.887a17.417 17.417 0 00-.125-.888 24.24 24.24 0 01-.137-.875 6.051 6.051 0 00-.188-.875 3.873 3.873 0 00-.425-1.112 3.034 3.034 0 00-.625-.763 2.274 2.274 0 00-.713-.412A2.565 2.565 0 0010.775 4a2.53 2.53 0 00-1.05.225c-.333.15-.667.375-1 .675-.183.183-.367.38-.55.587a4.789 4.789 0 00-.525.738 1.231 1.231 0 00-.363-.2 1.23 1.23 0 00-.362-.05.717.717 0 00-.462.15c-.125.1-.188.267-.188.5a8.145 8.145 0 01-.2 1.8c-.083.433-.175.862-.275 1.287-.1.425-.192.855-.275 1.288-.183.033-.346.08-.488.137-.141.059-.262.121-.362.188a.735.735 0 00-.287.313.907.907 0 00-.088.387c0 .117.017.225.05.325s.092.192.175.275a.798.798 0 00.3.188c.117.041.25.07.4.087-.017.2-.03.387-.037.563-.009.175-.013.345-.013.512 0 .35.025.65.075.9.05.25.125.458.225.625.1.167.23.287.388.363.158.075.354.112.587.112zM8.225 10.4c.1-.383.217-.754.35-1.113.133-.358.283-.729.45-1.112.267-.617.55-1.108.85-1.475.3-.367.567-.55.8-.55.183 0 .342.142.475.425.133.283.242.708.325 1.275.05.333.092.692.125 1.075s.067.742.1 1.075c-.283.017-.575.037-.875.063-.3.024-.592.054-.875.087-.283.033-.57.07-.862.112-.292.042-.58.088-.863.138zM2 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 010 18V2C0 1.45.196.98.588.587A1.926 1.926 0 012 0h16c.55 0 1.02.196 1.413.588C19.803.979 20 1.45 20 2v16c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0118 20H2zm0-2h16V2H2v16z', +}); + +const TextIcon = createIcon({ + displayName: 'Text', + viewBox: '0 0 20 16', + d: 'M5 16V3H0V0h13v3H8v13H5zm9 0V8h-3V5h9v3h-3v8h-3z', +}); + +const AssetsIcon = createIcon({ + displayName: 'Assets', + viewBox: '0 0 22 16', + d: 'M5.5 16c-1.517 0-2.813-.525-3.888-1.575C.537 13.375 0 12.092 0 10.575c0-1.3.392-2.458 1.175-3.475S2.983 5.433 4.25 5.15c.417-1.533 1.25-2.775 2.5-3.725C8 .475 9.417 0 11 0c1.95 0 3.604.68 4.963 2.038C17.32 3.396 18 5.05 18 7c1.15.133 2.104.63 2.863 1.488A4.407 4.407 0 0122 11.5c0 1.25-.438 2.313-1.313 3.188C19.813 15.562 18.75 16 17.5 16H12c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0110 14V8.85L8.4 10.4 7 9l4-4 4 4-1.4 1.4L12 8.85V14h5.5c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C18.792 9.242 18.2 9 17.5 9H16V7c0-1.383-.488-2.563-1.463-3.538C13.563 2.487 12.383 2 11 2s-2.563.487-3.537 1.462C6.487 4.438 6 5.617 6 7h-.5c-.967 0-1.792.342-2.475 1.025A3.372 3.372 0 002 10.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 005.5 14H8v2H5.5z', +}); + +const ChatGhptIcon = createIcon({ + displayName: 'ChatGhpt', + viewBox: '0 0 24 20', + path: ( + <> + + + + + + + + ), +}); + +const LanguageIcon = createIcon({ + displayName: 'Language', + viewBox: '0 0 20 18', + d: 'M9.864 18l4.118-10.8h1.9L20 18h-1.9l-.973-2.745h-4.39L11.766 18h-1.9zm-7.15-2.7l-1.266-1.26 4.57-4.545a10.416 10.416 0 01-1.437-1.8A15.57 15.57 0 013.394 5.4h1.9c.302.585.603 1.095.905 1.53.302.435.664.87 1.086 1.305.498-.495 1.014-1.189 1.55-2.081.535-.893.939-1.744 1.21-2.554H0V1.8h6.335V0h1.81v1.8h6.335v1.8h-2.625c-.316 1.08-.792 2.19-1.425 3.33-.634 1.14-1.26 2.01-1.878 2.61l2.172 2.205-.679 1.845-2.76-2.813-4.57 4.523zm10.59-1.62h3.257l-1.629-4.59-1.629 4.59z', +}); + +export { + AssetsIcon, + AvatarIcon, + ChatGhptIcon, + LanguageIcon, + ScriptIcon, + TemplatesIcon, + TextIcon, +}; From b6ea3d8807c7210df6555f8dedf7868392af5826 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 21:19:12 -0400 Subject: [PATCH 09/32] OV-29: + new mock for header component --- .../video-editor/components/mock/menu-mock.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx index 1e930a664..7dcbeb0b9 100644 --- a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx +++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx @@ -1,7 +1,20 @@ +import { Flex } from '~/bundles/common/components/components.js'; +import { ChatGhptIcon } from '~/bundles/common/components/icons/icons.js'; + const TemplatesContent: React.FC = () => (
    This is the Templates content.
    ); const AvatarsContent: React.FC = () =>
    This is the Avatars content.
    ; +const ScriptHeader: React.FC = () => ( + +
    + Script +
    +
    + +
    +     +); const ScriptContent: React.FC = () =>
    This is the Script content.
    ; const TextContent: React.FC = () =>
    This is the Text content.
    ; const AssetsContent: React.FC = () =>
    This is the Assets content.
    ; @@ -10,6 +23,7 @@ export { AssetsContent, AvatarsContent, ScriptContent, + ScriptHeader, TemplatesContent, TextContent, }; From 1d4db78922a256fda80d81edabf4392b6b7b3d50 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 21:28:42 -0400 Subject: [PATCH 10/32] OV-29: * script for lint --- frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 57e2f88f0..159e25561 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,7 +12,7 @@ "lint:js:fix": "npx eslint --fix \"src/**/*.{ts,tsx}\"", "lint:type": "npx tsc --noEmit", "lint": "npm run lint:type && npm run lint:js", - "lint:fix": "npm run lint:js:fix", + "lint:fix": "npm run lint:type && npm run lint:js:fix", "start:dev": "vite", "build": "tsc -p tsconfig.build.json && vite build", "preview": "vite preview" From fd6cf4fa7443a290317644a94f3c2dc2f73186c9 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 21:32:54 -0400 Subject: [PATCH 11/32] OV-29: + menu-item types on it on folder --- frontend/src/bundles/video-editor/types/menu-item.type.ts | 7 +++++++ frontend/src/bundles/video-editor/types/types.ts | 1 + 2 files changed, 8 insertions(+) create mode 100644 frontend/src/bundles/video-editor/types/menu-item.type.ts create mode 100644 frontend/src/bundles/video-editor/types/types.ts diff --git a/frontend/src/bundles/video-editor/types/menu-item.type.ts b/frontend/src/bundles/video-editor/types/menu-item.type.ts new file mode 100644 index 000000000..c40212a7a --- /dev/null +++ b/frontend/src/bundles/video-editor/types/menu-item.type.ts @@ -0,0 +1,7 @@ +type MenuItem = { + label: string; + icon: React.ReactNode; + onClick: () => void; +}; + +export { type MenuItem }; diff --git a/frontend/src/bundles/video-editor/types/types.ts b/frontend/src/bundles/video-editor/types/types.ts new file mode 100644 index 000000000..c650f58cd --- /dev/null +++ b/frontend/src/bundles/video-editor/types/types.ts @@ -0,0 +1 @@ +export { type MenuItem } from './menu-item.type.js'; From 394b92f1c46a96d5fa86ccf93f53545ec7392d7c Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 21:35:01 -0400 Subject: [PATCH 12/32] OV-29: * styles for menu component --- .../video-editor/components/menu/menu.tsx | 56 ++++++++++++++----- 1 file changed, 42 insertions(+), 14 deletions(-) diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx index 7944ae7a1..941ad782b 100644 --- a/frontend/src/bundles/video-editor/components/menu/menu.tsx +++ b/frontend/src/bundles/video-editor/components/menu/menu.tsx @@ -1,10 +1,6 @@ import { Box, Flex, VStack } from '~/bundles/common/components/components.js'; -type MenuItem = { - label: string; - icon: React.ReactNode; - onClick: () => void; -}; +import { type MenuItem } from '../../types/types.js'; type MenuProperties = { items: MenuItem[]; @@ -12,20 +8,52 @@ type MenuProperties = { const Menu: React.FC = ({ items }) => { return ( - - + + {items.map((item, index) => ( - {item.icon} -
    {item.label}
    + + {item.icon} + + + {item.label} +     ))}     From a0e0f820ce1a7f3f2f1ca8aae70b4e4af534892c Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 21:37:30 -0400 Subject: [PATCH 13/32] OV-29: * styles for menu-body component --- .../components/menu-body/menu-body.tsx | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx b/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx index 966ca85e0..e92377d91 100644 --- a/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx +++ b/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx @@ -7,7 +7,7 @@ import { } from '~/bundles/common/components/components.js'; type Properties = { - title: string; + title: string | React.ReactNode; children: React.ReactNode; isOpen: boolean; onClose: () => void; @@ -23,20 +23,26 @@ const MenuBody: React.FC = ({ <> {isOpen && ( {title} - + {children} From da525ad770b8b21d0def32150a3b4c69b174d96f Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 21:39:22 -0400 Subject: [PATCH 14/32] OV-29: * header can be string o other component for video-editor --- .../video-editor/pages/video-editor.tsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index e6986ff19..51eef8a05 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -1,25 +1,28 @@ -import { CalendarIcon } from '@chakra-ui/icons'; import { useCallback, useState } from 'react'; +import { AssetsIcon, AvatarIcon, ScriptIcon, TemplatesIcon, TextIcon } from '~/bundles/common/components/icons/icons.js'; + import { Menu, MenuBody } from '../components/components.js'; import { AssetsContent, AvatarsContent, ScriptContent, + ScriptHeader, TemplatesContent, TextContent, } from '../components/mock/menu-mock.js'; +import { type MenuItem } from '../types/menu-item.type.js'; const VideoEditor: React.FC = () => { const [activeContent, setActiveContent] = useState( null, ); - const [activeTitle, setActiveTitle] = useState(''); + const [activeTitle, setActiveTitle] = useState(''); const [isOpen, setIsOpen] = useState(false); - const handleMenuClick = (label: string, content: React.ReactNode): void => { + const handleMenuClick = (header: string | React.ReactNode, content: React.ReactNode): void => { setActiveContent(content); - setActiveTitle(label); + setActiveTitle(header); setIsOpen(true); }; @@ -27,30 +30,30 @@ const VideoEditor: React.FC = () => { setIsOpen(false); }, []); - const menuItems = [ + const menuItems: MenuItem[] = [ { label: 'Templates', - icon: , + icon: , onClick: () => handleMenuClick('Templates', ), }, { label: 'Avatars', - icon: , + icon: , onClick: () => handleMenuClick('Avatars', ), }, { label: 'Script', - icon: , - onClick: () => handleMenuClick('Script', ), + icon: , + onClick: () => handleMenuClick(, ), }, { label: 'Text', - icon: , + icon: , onClick: () => handleMenuClick('Text', ), }, { label: 'Assets', - icon: , + icon: , onClick: () => handleMenuClick('Assets', ), }, ]; From b70210037b6f922a1ea7344bcf1a950611c28e1e Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 22:15:53 -0400 Subject: [PATCH 15/32] OV-29: + utilities methods to validate array and obj --- frontend/src/bundles/common/helpers/helpers.ts | 1 + frontend/src/bundles/common/helpers/utilities.ts | 9 +++++++++ 2 files changed, 10 insertions(+) create mode 100644 frontend/src/bundles/common/helpers/utilities.ts diff --git a/frontend/src/bundles/common/helpers/helpers.ts b/frontend/src/bundles/common/helpers/helpers.ts index 5acdb8642..c2872899c 100644 --- a/frontend/src/bundles/common/helpers/helpers.ts +++ b/frontend/src/bundles/common/helpers/helpers.ts @@ -1 +1,2 @@ +export { isEmptyArray,isNullOrUndefined, isStringNullOrEmpty } from './utilities.js'; export { configureString } from 'shared'; diff --git a/frontend/src/bundles/common/helpers/utilities.ts b/frontend/src/bundles/common/helpers/utilities.ts new file mode 100644 index 000000000..913288a3f --- /dev/null +++ b/frontend/src/bundles/common/helpers/utilities.ts @@ -0,0 +1,9 @@ +const isNullOrUndefined = (value: T | null | undefined): value is null | undefined => + value === undefined || value === null; + +const isStringNullOrEmpty = (value: string | null | undefined): value is null | undefined => + isNullOrUndefined(value) || (value ).trim().length === 0; + +const isEmptyArray = (value: T[]): boolean => isNullOrUndefined(value) || value.length === 0; + +export { isEmptyArray, isNullOrUndefined, isStringNullOrEmpty }; From dd6dde19db45d6b6c563856023e2f4ede3eb8412 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 22:19:23 -0400 Subject: [PATCH 16/32] OV-29: * show and remove active element of meu --- .../video-editor/components/menu/menu.tsx | 24 +++++++++++++++++-- .../video-editor/pages/video-editor.tsx | 11 +++++---- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx index 941ad782b..3619fdb7a 100644 --- a/frontend/src/bundles/video-editor/components/menu/menu.tsx +++ b/frontend/src/bundles/video-editor/components/menu/menu.tsx @@ -1,12 +1,31 @@ import { Box, Flex, VStack } from '~/bundles/common/components/components.js'; +import { isEmptyArray, isNullOrUndefined } from '~/bundles/common/helpers/helpers.js'; +import { useCallback } from '~/bundles/common/hooks/hooks.js'; import { type MenuItem } from '../../types/types.js'; type MenuProperties = { items: MenuItem[]; + activeIndex: number | null; + setActiveIndex: (index: number) => void; }; -const Menu: React.FC = ({ items }) => { +const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) => { + const handleClick = useCallback( + (index: number) => { + return () => { + if (isEmptyArray(items) || index >= items.length) + {return;} + + const item = items[index]; + if(isNullOrUndefined(item)) {return;} + + setActiveIndex(index); + item.onClick(); + }; + }, + [setActiveIndex, items] + ); return ( = ({ items }) => { {items.map((item, index) => ( = ({ items }) => { gap: 1, cursor: 'pointer', borderRadius: '8px', + bg: activeIndex === index ? 'background.600' : 'transparent', _hover: { bg: 'background.600', }, diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index 51eef8a05..3ab55053e 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -1,6 +1,5 @@ -import { useCallback, useState } from 'react'; - import { AssetsIcon, AvatarIcon, ScriptIcon, TemplatesIcon, TextIcon } from '~/bundles/common/components/icons/icons.js'; +import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { Menu, MenuBody } from '../components/components.js'; import { @@ -14,6 +13,7 @@ import { import { type MenuItem } from '../types/menu-item.type.js'; const VideoEditor: React.FC = () => { + const [activeIndex, setActiveIndex] = useState(null); const [activeContent, setActiveContent] = useState( null, ); @@ -26,8 +26,9 @@ const VideoEditor: React.FC = () => { setIsOpen(true); }; - const handleClose = useCallback((): void => { + const resetActiveItem = useCallback((): void => { setIsOpen(false); + setActiveIndex(null); }, []); const menuItems: MenuItem[] = [ @@ -60,8 +61,8 @@ const VideoEditor: React.FC = () => { return ( <> - - + + {activeContent} From 5bbe156c2f7ae54550ac6975211baceeeb9354fb Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 21 Aug 2024 22:23:07 -0400 Subject: [PATCH 17/32] OV-29: * prettier adjusments --- .../src/bundles/common/helpers/helpers.ts | 6 +++- .../src/bundles/common/helpers/utilities.ts | 14 ++++++--- .../video-editor/components/menu/menu.tsx | 31 +++++++++++++------ .../components/mock/menu-mock.tsx | 4 +-- .../video-editor/pages/video-editor.tsx | 29 ++++++++++++++--- 5 files changed, 61 insertions(+), 23 deletions(-) diff --git a/frontend/src/bundles/common/helpers/helpers.ts b/frontend/src/bundles/common/helpers/helpers.ts index c2872899c..33ace1c0e 100644 --- a/frontend/src/bundles/common/helpers/helpers.ts +++ b/frontend/src/bundles/common/helpers/helpers.ts @@ -1,2 +1,6 @@ -export { isEmptyArray,isNullOrUndefined, isStringNullOrEmpty } from './utilities.js'; +export { + isEmptyArray, + isNullOrUndefined, + isStringNullOrEmpty, +} from './utilities.js'; export { configureString } from 'shared'; diff --git a/frontend/src/bundles/common/helpers/utilities.ts b/frontend/src/bundles/common/helpers/utilities.ts index 913288a3f..fdd22fd1f 100644 --- a/frontend/src/bundles/common/helpers/utilities.ts +++ b/frontend/src/bundles/common/helpers/utilities.ts @@ -1,9 +1,13 @@ -const isNullOrUndefined = (value: T | null | undefined): value is null | undefined => - value === undefined || value === null; +const isNullOrUndefined = ( + value: T | null | undefined, +): value is null | undefined => value === undefined || value === null; -const isStringNullOrEmpty = (value: string | null | undefined): value is null | undefined => - isNullOrUndefined(value) || (value ).trim().length === 0; +const isStringNullOrEmpty = ( + value: string | null | undefined, +): value is null | undefined => + isNullOrUndefined(value) || value.trim().length === 0; -const isEmptyArray = (value: T[]): boolean => isNullOrUndefined(value) || value.length === 0; +const isEmptyArray = (value: T[]): boolean => + isNullOrUndefined(value) || value.length === 0; export { isEmptyArray, isNullOrUndefined, isStringNullOrEmpty }; diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx index 3619fdb7a..5784d74eb 100644 --- a/frontend/src/bundles/video-editor/components/menu/menu.tsx +++ b/frontend/src/bundles/video-editor/components/menu/menu.tsx @@ -1,5 +1,8 @@ import { Box, Flex, VStack } from '~/bundles/common/components/components.js'; -import { isEmptyArray, isNullOrUndefined } from '~/bundles/common/helpers/helpers.js'; +import { + isEmptyArray, + isNullOrUndefined, +} from '~/bundles/common/helpers/helpers.js'; import { useCallback } from '~/bundles/common/hooks/hooks.js'; import { type MenuItem } from '../../types/types.js'; @@ -10,21 +13,28 @@ type MenuProperties = { setActiveIndex: (index: number) => void; }; -const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) => { +const Menu: React.FC = ({ + items, + activeIndex, + setActiveIndex, +}) => { const handleClick = useCallback( (index: number) => { return () => { - if (isEmptyArray(items) || index >= items.length) - {return;} + if (isEmptyArray(items) || index >= items.length) { + return; + } const item = items[index]; - if(isNullOrUndefined(item)) {return;} + if (isNullOrUndefined(item)) { + return; + } setActiveIndex(index); item.onClick(); }; }, - [setActiveIndex, items] + [setActiveIndex, items], ); return ( = ({ items, activeIndex, setActiveIndex }) gap: 1, cursor: 'pointer', borderRadius: '8px', - bg: activeIndex === index ? 'background.600' : 'transparent', + bg: + activeIndex === index + ? 'background.600' + : 'transparent', _hover: { bg: 'background.600', }, @@ -62,14 +75,14 @@ const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) > {item.icon} {item.label} diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx index 7dcbeb0b9..2a0155255 100644 --- a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx +++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx @@ -7,9 +7,7 @@ const TemplatesContent: React.FC = () => ( const AvatarsContent: React.FC = () =>
    This is the Avatars content.
    ; const ScriptHeader: React.FC = () => ( -
    - Script -
    +
    Script
    diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index 3ab55053e..9772b983d 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -1,4 +1,10 @@ -import { AssetsIcon, AvatarIcon, ScriptIcon, TemplatesIcon, TextIcon } from '~/bundles/common/components/icons/icons.js'; +import { + AssetsIcon, + AvatarIcon, + ScriptIcon, + TemplatesIcon, + TextIcon, +} from '~/bundles/common/components/icons/icons.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { Menu, MenuBody } from '../components/components.js'; @@ -17,10 +23,15 @@ const VideoEditor: React.FC = () => { const [activeContent, setActiveContent] = useState( null, ); - const [activeTitle, setActiveTitle] = useState(''); + const [activeTitle, setActiveTitle] = useState( + '', + ); const [isOpen, setIsOpen] = useState(false); - const handleMenuClick = (header: string | React.ReactNode, content: React.ReactNode): void => { + const handleMenuClick = ( + header: string | React.ReactNode, + content: React.ReactNode, + ): void => { setActiveContent(content); setActiveTitle(header); setIsOpen(true); @@ -61,8 +72,16 @@ const VideoEditor: React.FC = () => { return ( <> - - + + {activeContent} From 61fd859539e5fc9fa3ebdafb52290284cc4082e9 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Thu, 22 Aug 2024 23:12:13 -0400 Subject: [PATCH 18/32] OV-29: * use of icons of FontAwsome as suggested --- .../bundles/common/components/components.ts | 10 ++- .../bundles/common/components/icons/icons.tsx | 80 ------------------- 2 files changed, 9 insertions(+), 81 deletions(-) delete mode 100644 frontend/src/bundles/common/components/icons/icons.tsx diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index f553b549b..67c22df79 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -8,7 +8,6 @@ export { RouterProvider } from './router-provider/router-provider.js'; export { VideoModal } from './video-modal/video-modal.js'; export { DownloadIcon } from '@chakra-ui/icons'; export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; -export { createIcon } from '@chakra-ui/react'; export { Box, Center, @@ -20,6 +19,7 @@ export { FormControl, FormErrorMessage, Heading, + Icon, IconButton, InputGroup, InputRightElement, @@ -27,6 +27,14 @@ export { Text, VStack, } from '@chakra-ui/react'; +export { + faCircleUser, + faCloudArrowUp, + faFont, + faT, + faTableColumns, +} from '@fortawesome/free-solid-svg-icons'; +export { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export { FormikProvider as FormProvider } from 'formik'; export { Provider as StoreProvider } from 'react-redux'; export { Outlet as RouterOutlet } from 'react-router-dom'; diff --git a/frontend/src/bundles/common/components/icons/icons.tsx b/frontend/src/bundles/common/components/icons/icons.tsx deleted file mode 100644 index a412bcb82..000000000 --- a/frontend/src/bundles/common/components/icons/icons.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { createIcon } from '../components.js'; - -const TemplatesIcon = createIcon({ - displayName: 'Templates', - viewBox: '0 0 18 18', - d: 'M2 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 010 16V2C0 1.45.196.98.588.587A1.926 1.926 0 012 0h14c.55 0 1.02.196 1.413.588C17.803.979 18 1.45 18 2v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0116 18H2zm14-5H2v3h14v-3zm-2.5-2H16V2h-2.5v9zM2 11h2.5V2H2v9zm4.5 0h5V2h-5v9z', -}); - -const AvatarIcon = createIcon({ - displayName: 'Avatar', - viewBox: '0 0 20 20', - d: 'M7 12.25c-.35 0-.646-.12-.888-.363A1.207 1.207 0 015.75 11c0-.35.12-.646.362-.887.242-.242.538-.363.888-.363s.646.12.888.363c.241.241.362.537.362.887s-.12.646-.362.887A1.207 1.207 0 017 12.25zm6 0c-.35 0-.646-.12-.887-.363A1.207 1.207 0 0111.75 11c0-.35.12-.646.363-.887.241-.242.537-.363.887-.363s.646.12.887.363c.242.241.363.537.363.887s-.12.646-.363.887a1.207 1.207 0 01-.887.363zM10 18c2.233 0 4.125-.775 5.675-2.325C17.225 14.125 18 12.233 18 10c0-.4-.025-.787-.075-1.162a4.844 4.844 0 00-.275-1.088c-.35.083-.7.146-1.05.188-.35.041-.717.062-1.1.062a9.787 9.787 0 01-4.3-.975A9.983 9.983 0 017.75 4.3a9.86 9.86 0 01-2.287 3.388A9.768 9.768 0 012 9.85V10c0 2.233.775 4.125 2.325 5.675C5.875 17.225 7.767 18 10 18zm0 2a9.738 9.738 0 01-3.9-.788 10.099 10.099 0 01-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 010 10c0-1.383.263-2.683.787-3.9a10.099 10.099 0 012.138-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0110 0c1.383 0 2.683.263 3.9.787a10.098 10.098 0 013.175 2.138c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0120 10a9.738 9.738 0 01-.788 3.9 10.098 10.098 0 01-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0110 20zM8.65 2.125a8.016 8.016 0 002.85 2.813C12.7 5.646 14.033 6 15.5 6c.233 0 .458-.013.675-.037.217-.026.442-.055.675-.088A8.016 8.016 0 0014 3.062C12.8 2.354 11.467 2 10 2c-.233 0-.458.013-.675.038-.217.025-.442.054-.675.087zm-6.225 5.35A7.987 7.987 0 004.65 5.6a7.96 7.96 0 001.425-2.575A7.987 7.987 0 003.85 4.9a7.96 7.96 0 00-1.425 2.575z', -}); - -const ScriptIcon = createIcon({ - displayName: 'Script', - viewBox: '0 0 20 20', - d: 'M6.45 15.975c.267 0 .458-.088.575-.262a1.46 1.46 0 00.225-.613c.033-.167.063-.333.088-.5.024-.167.054-.35.087-.55.033-.183.07-.383.112-.6.042-.217.088-.467.138-.75.383-.083.758-.154 1.125-.212.367-.059.725-.105 1.075-.138.383-.05.762-.088 1.137-.112.375-.025.738-.055 1.088-.088a14.583 14.583 0 00.55 1.975c.133.383.28.7.438.95.158.25.354.467.587.65.233.183.487.283.762.3a.98.98 0 00.713-.225c.15-.117.225-.292.225-.525 0-.233-.067-.525-.2-.875a4.578 4.578 0 01-.213-.563 6.29 6.29 0 00-.212-.587 84.039 84.039 0 01-.225-.637 8.6 8.6 0 01-.175-.563c.217-.017.412-.054.588-.113a1.29 1.29 0 00.437-.237c.117-.1.204-.22.262-.362.059-.142.088-.296.088-.463a.885.885 0 00-.112-.463.878.878 0 00-.338-.312 1.494 1.494 0 00-.563-.162 3.379 3.379 0 00-.762.012l-.1-.887a17.417 17.417 0 00-.125-.888 24.24 24.24 0 01-.137-.875 6.051 6.051 0 00-.188-.875 3.873 3.873 0 00-.425-1.112 3.034 3.034 0 00-.625-.763 2.274 2.274 0 00-.713-.412A2.565 2.565 0 0010.775 4a2.53 2.53 0 00-1.05.225c-.333.15-.667.375-1 .675-.183.183-.367.38-.55.587a4.789 4.789 0 00-.525.738 1.231 1.231 0 00-.363-.2 1.23 1.23 0 00-.362-.05.717.717 0 00-.462.15c-.125.1-.188.267-.188.5a8.145 8.145 0 01-.2 1.8c-.083.433-.175.862-.275 1.287-.1.425-.192.855-.275 1.288-.183.033-.346.08-.488.137-.141.059-.262.121-.362.188a.735.735 0 00-.287.313.907.907 0 00-.088.387c0 .117.017.225.05.325s.092.192.175.275a.798.798 0 00.3.188c.117.041.25.07.4.087-.017.2-.03.387-.037.563-.009.175-.013.345-.013.512 0 .35.025.65.075.9.05.25.125.458.225.625.1.167.23.287.388.363.158.075.354.112.587.112zM8.225 10.4c.1-.383.217-.754.35-1.113.133-.358.283-.729.45-1.112.267-.617.55-1.108.85-1.475.3-.367.567-.55.8-.55.183 0 .342.142.475.425.133.283.242.708.325 1.275.05.333.092.692.125 1.075s.067.742.1 1.075c-.283.017-.575.037-.875.063-.3.024-.592.054-.875.087-.283.033-.57.07-.862.112-.292.042-.58.088-.863.138zM2 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 010 18V2C0 1.45.196.98.588.587A1.926 1.926 0 012 0h16c.55 0 1.02.196 1.413.588C19.803.979 20 1.45 20 2v16c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0118 20H2zm0-2h16V2H2v16z', -}); - -const TextIcon = createIcon({ - displayName: 'Text', - viewBox: '0 0 20 16', - d: 'M5 16V3H0V0h13v3H8v13H5zm9 0V8h-3V5h9v3h-3v8h-3z', -}); - -const AssetsIcon = createIcon({ - displayName: 'Assets', - viewBox: '0 0 22 16', - d: 'M5.5 16c-1.517 0-2.813-.525-3.888-1.575C.537 13.375 0 12.092 0 10.575c0-1.3.392-2.458 1.175-3.475S2.983 5.433 4.25 5.15c.417-1.533 1.25-2.775 2.5-3.725C8 .475 9.417 0 11 0c1.95 0 3.604.68 4.963 2.038C17.32 3.396 18 5.05 18 7c1.15.133 2.104.63 2.863 1.488A4.407 4.407 0 0122 11.5c0 1.25-.438 2.313-1.313 3.188C19.813 15.562 18.75 16 17.5 16H12c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0110 14V8.85L8.4 10.4 7 9l4-4 4 4-1.4 1.4L12 8.85V14h5.5c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C18.792 9.242 18.2 9 17.5 9H16V7c0-1.383-.488-2.563-1.463-3.538C13.563 2.487 12.383 2 11 2s-2.563.487-3.537 1.462C6.487 4.438 6 5.617 6 7h-.5c-.967 0-1.792.342-2.475 1.025A3.372 3.372 0 002 10.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 005.5 14H8v2H5.5z', -}); - -const ChatGhptIcon = createIcon({ - displayName: 'ChatGhpt', - viewBox: '0 0 24 20', - path: ( - <> - - - - - - - - ), -}); - -const LanguageIcon = createIcon({ - displayName: 'Language', - viewBox: '0 0 20 18', - d: 'M9.864 18l4.118-10.8h1.9L20 18h-1.9l-.973-2.745h-4.39L11.766 18h-1.9zm-7.15-2.7l-1.266-1.26 4.57-4.545a10.416 10.416 0 01-1.437-1.8A15.57 15.57 0 013.394 5.4h1.9c.302.585.603 1.095.905 1.53.302.435.664.87 1.086 1.305.498-.495 1.014-1.189 1.55-2.081.535-.893.939-1.744 1.21-2.554H0V1.8h6.335V0h1.81v1.8h6.335v1.8h-2.625c-.316 1.08-.792 2.19-1.425 3.33-.634 1.14-1.26 2.01-1.878 2.61l2.172 2.205-.679 1.845-2.76-2.813-4.57 4.523zm10.59-1.62h3.257l-1.629-4.59-1.629 4.59z', -}); - -export { - AssetsIcon, - AvatarIcon, - ChatGhptIcon, - LanguageIcon, - ScriptIcon, - TemplatesIcon, - TextIcon, -}; From a24b6c7c82abf112ce785ef9560a6e2dda14ce14 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Thu, 22 Aug 2024 23:16:16 -0400 Subject: [PATCH 19/32] OV-29: * better strcuture for helpers methods --- .../common/helpers/array-helper/array-helper.ts | 1 + .../common/helpers/array-helper/is-empty-array.ts | 6 ++++++ frontend/src/bundles/common/helpers/helpers.ts | 8 +++----- .../is-null-or-undefined/is-null-or-undefined.ts | 5 +++++ .../helpers/string-helpers/is-null-or-undefined.ts | 8 ++++++++ .../common/helpers/string-helpers/string-helper.ts | 1 + frontend/src/bundles/common/helpers/utilities.ts | 13 ------------- 7 files changed, 24 insertions(+), 18 deletions(-) create mode 100644 frontend/src/bundles/common/helpers/array-helper/array-helper.ts create mode 100644 frontend/src/bundles/common/helpers/array-helper/is-empty-array.ts create mode 100644 frontend/src/bundles/common/helpers/is-null-or-undefined/is-null-or-undefined.ts create mode 100644 frontend/src/bundles/common/helpers/string-helpers/is-null-or-undefined.ts create mode 100644 frontend/src/bundles/common/helpers/string-helpers/string-helper.ts delete mode 100644 frontend/src/bundles/common/helpers/utilities.ts diff --git a/frontend/src/bundles/common/helpers/array-helper/array-helper.ts b/frontend/src/bundles/common/helpers/array-helper/array-helper.ts new file mode 100644 index 000000000..751b3a9c4 --- /dev/null +++ b/frontend/src/bundles/common/helpers/array-helper/array-helper.ts @@ -0,0 +1 @@ +export { isEmptyArray } from './is-empty-array.js'; diff --git a/frontend/src/bundles/common/helpers/array-helper/is-empty-array.ts b/frontend/src/bundles/common/helpers/array-helper/is-empty-array.ts new file mode 100644 index 000000000..80f21391d --- /dev/null +++ b/frontend/src/bundles/common/helpers/array-helper/is-empty-array.ts @@ -0,0 +1,6 @@ +import { isNullOrUndefined } from '../helpers.js'; + +const isEmptyArray = (value: T[]): boolean => + isNullOrUndefined(value) || value.length === 0; + +export { isEmptyArray }; diff --git a/frontend/src/bundles/common/helpers/helpers.ts b/frontend/src/bundles/common/helpers/helpers.ts index 33ace1c0e..537329cd7 100644 --- a/frontend/src/bundles/common/helpers/helpers.ts +++ b/frontend/src/bundles/common/helpers/helpers.ts @@ -1,6 +1,4 @@ -export { - isEmptyArray, - isNullOrUndefined, - isStringNullOrEmpty, -} from './utilities.js'; +export { isEmptyArray } from './array-helper/array-helper.js'; +export { isNullOrUndefined } from './is-null-or-undefined/is-null-or-undefined.js'; +export { isStringNullOrEmpty } from './string-helpers/string-helper.js'; export { configureString } from 'shared'; diff --git a/frontend/src/bundles/common/helpers/is-null-or-undefined/is-null-or-undefined.ts b/frontend/src/bundles/common/helpers/is-null-or-undefined/is-null-or-undefined.ts new file mode 100644 index 000000000..835237306 --- /dev/null +++ b/frontend/src/bundles/common/helpers/is-null-or-undefined/is-null-or-undefined.ts @@ -0,0 +1,5 @@ +const isNullOrUndefined = ( + value: T | null | undefined, +): value is null | undefined => value === undefined || value === null; + +export { isNullOrUndefined }; diff --git a/frontend/src/bundles/common/helpers/string-helpers/is-null-or-undefined.ts b/frontend/src/bundles/common/helpers/string-helpers/is-null-or-undefined.ts new file mode 100644 index 000000000..4154a5eb6 --- /dev/null +++ b/frontend/src/bundles/common/helpers/string-helpers/is-null-or-undefined.ts @@ -0,0 +1,8 @@ +import { isNullOrUndefined } from '../helpers.js'; + +const isStringNullOrEmpty = ( + value: string | null | undefined, +): value is null | undefined => + isNullOrUndefined(value) || value.trim().length === 0; + +export { isStringNullOrEmpty }; diff --git a/frontend/src/bundles/common/helpers/string-helpers/string-helper.ts b/frontend/src/bundles/common/helpers/string-helpers/string-helper.ts new file mode 100644 index 000000000..a5ad63b66 --- /dev/null +++ b/frontend/src/bundles/common/helpers/string-helpers/string-helper.ts @@ -0,0 +1 @@ +export { isStringNullOrEmpty } from './is-null-or-undefined.js'; diff --git a/frontend/src/bundles/common/helpers/utilities.ts b/frontend/src/bundles/common/helpers/utilities.ts deleted file mode 100644 index fdd22fd1f..000000000 --- a/frontend/src/bundles/common/helpers/utilities.ts +++ /dev/null @@ -1,13 +0,0 @@ -const isNullOrUndefined = ( - value: T | null | undefined, -): value is null | undefined => value === undefined || value === null; - -const isStringNullOrEmpty = ( - value: string | null | undefined, -): value is null | undefined => - isNullOrUndefined(value) || value.trim().length === 0; - -const isEmptyArray = (value: T[]): boolean => - isNullOrUndefined(value) || value.length === 0; - -export { isEmptyArray, isNullOrUndefined, isStringNullOrEmpty }; From 6ac97d01fc7c7e1ed26f6a6baabcb4ab28d5a2b7 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Thu, 22 Aug 2024 23:21:23 -0400 Subject: [PATCH 20/32] OV-29: * change of properties type name --- .../src/bundles/video-editor/components/menu/menu.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx index 5784d74eb..66f15260e 100644 --- a/frontend/src/bundles/video-editor/components/menu/menu.tsx +++ b/frontend/src/bundles/video-editor/components/menu/menu.tsx @@ -7,17 +7,13 @@ import { useCallback } from '~/bundles/common/hooks/hooks.js'; import { type MenuItem } from '../../types/types.js'; -type MenuProperties = { +type Properties = { items: MenuItem[]; activeIndex: number | null; setActiveIndex: (index: number) => void; }; -const Menu: React.FC = ({ - items, - activeIndex, - setActiveIndex, -}) => { +const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) => { const handleClick = useCallback( (index: number) => { return () => { From 155e002ddd7a2268b34e8b308025618d3f981287 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Thu, 22 Aug 2024 23:27:10 -0400 Subject: [PATCH 21/32] OV-29: * use h3 styles variant of heading --- .../bundles/video-editor/components/menu-body/menu-body.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx b/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx index e92377d91..fa439a5ef 100644 --- a/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx +++ b/frontend/src/bundles/video-editor/components/menu-body/menu-body.tsx @@ -39,9 +39,7 @@ const MenuBody: React.FC = ({ }} > - - {title} - + {title} From d989e6ce371f7372e899819483c53220a4bf2902 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Thu, 22 Aug 2024 23:30:17 -0400 Subject: [PATCH 22/32] OV-29: * use of icons of FontAwsome as suggested --- .../components/mock/menu-mock.tsx | 10 +++++--- .../video-editor/pages/video-editor.tsx | 24 ++++++++++--------- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx index 2a0155255..2572bd3d7 100644 --- a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx +++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx @@ -1,5 +1,9 @@ -import { Flex } from '~/bundles/common/components/components.js'; -import { ChatGhptIcon } from '~/bundles/common/components/icons/icons.js'; +import { + faCloudArrowUp, + Flex, + FontAwesomeIcon, + Icon, +} from '~/bundles/common/components/components.js'; const TemplatesContent: React.FC = () => (
    This is the Templates content.
    @@ -9,7 +13,7 @@ const ScriptHeader: React.FC = () => (
    Script
    - +
    ); diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index 9772b983d..86987f99d 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -1,10 +1,12 @@ import { - AssetsIcon, - AvatarIcon, - ScriptIcon, - TemplatesIcon, - TextIcon, -} from '~/bundles/common/components/icons/icons.js'; + faCircleUser, + faCloudArrowUp, + faFont, + faT, + faTableColumns, + FontAwesomeIcon, + Icon, +} from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { Menu, MenuBody } from '../components/components.js'; @@ -45,27 +47,27 @@ const VideoEditor: React.FC = () => { const menuItems: MenuItem[] = [ { label: 'Templates', - icon: , + icon: , onClick: () => handleMenuClick('Templates', ), }, { label: 'Avatars', - icon: , + icon: , onClick: () => handleMenuClick('Avatars', ), }, { label: 'Script', - icon: , + icon: , onClick: () => handleMenuClick(, ), }, { label: 'Text', - icon: , + icon: , onClick: () => handleMenuClick('Text', ), }, { label: 'Assets', - icon: , + icon: , onClick: () => handleMenuClick('Assets', ), }, ]; From 634bdfbab32251ae8b18ecb7edcb72c07b12898c Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Fri, 23 Aug 2024 09:26:49 -0400 Subject: [PATCH 23/32] OV-29: + new video editor route --- frontend/src/router/routes/protected-routes.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx index 4724f0a4b..30781cbe2 100644 --- a/frontend/src/router/routes/protected-routes.tsx +++ b/frontend/src/router/routes/protected-routes.tsx @@ -2,6 +2,7 @@ import { Navigate } from 'react-router-dom'; import { AppRoute } from '~/bundles/common/enums/app-route.enum.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; +import { VideoEditor } from '~/bundles/video-editor/pages/video-editor.js'; import { ProtectedRoute } from '../components/protected-route.js'; @@ -14,6 +15,10 @@ const protectedRoutes = { path: AppRoute.STUDIO, element: , }, + { + path: AppRoute.VIDEO_EDITOR, + element: , + }, { path: AppRoute.ANY, element: , From 80b0bcf1445d78a376ef343234e566911d8cbde6 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Fri, 23 Aug 2024 09:39:58 -0400 Subject: [PATCH 24/32] OV-29: * remove as suggested in review all helpers of null and undefiend values --- .../bundles/common/helpers/array-helper/array-helper.ts | 1 - .../bundles/common/helpers/array-helper/is-empty-array.ts | 6 ------ frontend/src/bundles/common/helpers/helpers.ts | 3 --- .../helpers/is-null-or-undefined/is-null-or-undefined.ts | 5 ----- .../common/helpers/string-helpers/is-null-or-undefined.ts | 8 -------- .../common/helpers/string-helpers/string-helper.ts | 1 - .../src/bundles/video-editor/components/menu/menu.tsx | 8 ++------ 7 files changed, 2 insertions(+), 30 deletions(-) delete mode 100644 frontend/src/bundles/common/helpers/array-helper/array-helper.ts delete mode 100644 frontend/src/bundles/common/helpers/array-helper/is-empty-array.ts delete mode 100644 frontend/src/bundles/common/helpers/is-null-or-undefined/is-null-or-undefined.ts delete mode 100644 frontend/src/bundles/common/helpers/string-helpers/is-null-or-undefined.ts delete mode 100644 frontend/src/bundles/common/helpers/string-helpers/string-helper.ts diff --git a/frontend/src/bundles/common/helpers/array-helper/array-helper.ts b/frontend/src/bundles/common/helpers/array-helper/array-helper.ts deleted file mode 100644 index 751b3a9c4..000000000 --- a/frontend/src/bundles/common/helpers/array-helper/array-helper.ts +++ /dev/null @@ -1 +0,0 @@ -export { isEmptyArray } from './is-empty-array.js'; diff --git a/frontend/src/bundles/common/helpers/array-helper/is-empty-array.ts b/frontend/src/bundles/common/helpers/array-helper/is-empty-array.ts deleted file mode 100644 index 80f21391d..000000000 --- a/frontend/src/bundles/common/helpers/array-helper/is-empty-array.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { isNullOrUndefined } from '../helpers.js'; - -const isEmptyArray = (value: T[]): boolean => - isNullOrUndefined(value) || value.length === 0; - -export { isEmptyArray }; diff --git a/frontend/src/bundles/common/helpers/helpers.ts b/frontend/src/bundles/common/helpers/helpers.ts index 537329cd7..5acdb8642 100644 --- a/frontend/src/bundles/common/helpers/helpers.ts +++ b/frontend/src/bundles/common/helpers/helpers.ts @@ -1,4 +1 @@ -export { isEmptyArray } from './array-helper/array-helper.js'; -export { isNullOrUndefined } from './is-null-or-undefined/is-null-or-undefined.js'; -export { isStringNullOrEmpty } from './string-helpers/string-helper.js'; export { configureString } from 'shared'; diff --git a/frontend/src/bundles/common/helpers/is-null-or-undefined/is-null-or-undefined.ts b/frontend/src/bundles/common/helpers/is-null-or-undefined/is-null-or-undefined.ts deleted file mode 100644 index 835237306..000000000 --- a/frontend/src/bundles/common/helpers/is-null-or-undefined/is-null-or-undefined.ts +++ /dev/null @@ -1,5 +0,0 @@ -const isNullOrUndefined = ( - value: T | null | undefined, -): value is null | undefined => value === undefined || value === null; - -export { isNullOrUndefined }; diff --git a/frontend/src/bundles/common/helpers/string-helpers/is-null-or-undefined.ts b/frontend/src/bundles/common/helpers/string-helpers/is-null-or-undefined.ts deleted file mode 100644 index 4154a5eb6..000000000 --- a/frontend/src/bundles/common/helpers/string-helpers/is-null-or-undefined.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { isNullOrUndefined } from '../helpers.js'; - -const isStringNullOrEmpty = ( - value: string | null | undefined, -): value is null | undefined => - isNullOrUndefined(value) || value.trim().length === 0; - -export { isStringNullOrEmpty }; diff --git a/frontend/src/bundles/common/helpers/string-helpers/string-helper.ts b/frontend/src/bundles/common/helpers/string-helpers/string-helper.ts deleted file mode 100644 index a5ad63b66..000000000 --- a/frontend/src/bundles/common/helpers/string-helpers/string-helper.ts +++ /dev/null @@ -1 +0,0 @@ -export { isStringNullOrEmpty } from './is-null-or-undefined.js'; diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx index 66f15260e..95e6038db 100644 --- a/frontend/src/bundles/video-editor/components/menu/menu.tsx +++ b/frontend/src/bundles/video-editor/components/menu/menu.tsx @@ -1,8 +1,4 @@ import { Box, Flex, VStack } from '~/bundles/common/components/components.js'; -import { - isEmptyArray, - isNullOrUndefined, -} from '~/bundles/common/helpers/helpers.js'; import { useCallback } from '~/bundles/common/hooks/hooks.js'; import { type MenuItem } from '../../types/types.js'; @@ -17,12 +13,12 @@ const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) => { const handleClick = useCallback( (index: number) => { return () => { - if (isEmptyArray(items) || index >= items.length) { + if (!items || items.length === 0 || index >= items.length) { return; } const item = items[index]; - if (isNullOrUndefined(item)) { + if (!item) { return; } From 090e086a0c33ecb58f8bc79cd43265cbfe49def6 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Fri, 23 Aug 2024 11:46:10 -0400 Subject: [PATCH 25/32] OV-29: * add a separted folder for icons --- .../components/common/password-input/password-input.tsx | 5 ++--- frontend/src/bundles/common/components/components.ts | 9 --------- .../src/bundles/common/icons/chakra-icon/chakra-icon.ts | 1 + .../common/icons/font-awesome-icon/font-awesome-icon.ts | 7 +++++++ frontend/src/bundles/common/icons/icons.ts | 8 ++++++++ frontend/src/bundles/studio/pages/studio.tsx | 2 +- .../bundles/video-editor/components/mock/menu-mock.tsx | 2 +- frontend/src/bundles/video-editor/pages/video-editor.tsx | 7 +++---- 8 files changed, 23 insertions(+), 18 deletions(-) create mode 100644 frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts create mode 100644 frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts create mode 100644 frontend/src/bundles/common/icons/icons.ts diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx index 57e8cf7ae..2fd9ead15 100644 --- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx +++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx @@ -2,11 +2,10 @@ import { IconButton, Input, InputGroup, - InputRightElement, - ViewIcon, - ViewOffIcon, + InputRightElement } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; +import { ViewIcon, ViewOffIcon } from '~/bundles/common/icons/icons.js'; type Properties = { label: string; diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 505f6fddd..0d51b8619 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -7,8 +7,6 @@ export { Overlay } from './overlay/overlay.js'; export { Player } from './player/player.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { VideoModal } from './video-modal/video-modal.js'; -export { DownloadIcon } from '@chakra-ui/icons'; -export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; export { Box, Center, @@ -28,13 +26,6 @@ export { Text, VStack, } from '@chakra-ui/react'; -export { - faCircleUser, - faCloudArrowUp, - faFont, - faT, - faTableColumns, -} from '@fortawesome/free-solid-svg-icons'; export { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export { FormikProvider as FormProvider } from 'formik'; export { Provider as StoreProvider } from 'react-redux'; diff --git a/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts b/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts new file mode 100644 index 000000000..e7db7d667 --- /dev/null +++ b/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts @@ -0,0 +1 @@ +export { DownloadIcon, ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; diff --git a/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts b/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts new file mode 100644 index 000000000..e549ce1d0 --- /dev/null +++ b/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts @@ -0,0 +1,7 @@ +export { + faCircleUser, + faCloudArrowUp, + faFont, + faT, + faTableColumns, +} from '@fortawesome/free-solid-svg-icons'; diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts new file mode 100644 index 000000000..216e49d57 --- /dev/null +++ b/frontend/src/bundles/common/icons/icons.ts @@ -0,0 +1,8 @@ +export { DownloadIcon, ViewIcon, ViewOffIcon } from './chakra-icon/chakra-icon.js'; +export { + faCircleUser, + faCloudArrowUp, + faFont, + faT, + faTableColumns, +} from './font-awesome-icon/font-awesome-icon.js'; diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx index fd0acd3d0..b04aa87c2 100644 --- a/frontend/src/bundles/studio/pages/studio.tsx +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -1,9 +1,9 @@ import { Button, - DownloadIcon, Header, IconButton, } from '~/bundles/common/components/components.js'; +import { DownloadIcon } from '~/bundles/common/icons/icons.js'; const Studio: React.FC = () => { return ( diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx index 2572bd3d7..b1f28c4d3 100644 --- a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx +++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx @@ -1,9 +1,9 @@ import { - faCloudArrowUp, Flex, FontAwesomeIcon, Icon, } from '~/bundles/common/components/components.js'; +import { faCloudArrowUp } from '~/bundles/common/icons/icons.js'; const TemplatesContent: React.FC = () => (
    This is the Templates content.
    diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index 86987f99d..f5211e854 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -1,13 +1,12 @@ +import { FontAwesomeIcon, Icon } from '~/bundles/common/components/components.js'; +import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { faCircleUser, faCloudArrowUp, faFont, faT, faTableColumns, - FontAwesomeIcon, - Icon, -} from '~/bundles/common/components/components.js'; -import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; +} from '~/bundles/common/icons/icons.js'; import { Menu, MenuBody } from '../components/components.js'; import { From e9de78c11d411918995a7db4532d36ec3753c91f Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Fri, 23 Aug 2024 11:56:04 -0400 Subject: [PATCH 26/32] OV-29: * use of prettier --- .../components/common/password-input/password-input.tsx | 2 +- frontend/src/bundles/common/icons/icons.ts | 6 +++++- frontend/src/bundles/video-editor/pages/video-editor.tsx | 5 ++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx index 2fd9ead15..74ffcf527 100644 --- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx +++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx @@ -2,7 +2,7 @@ import { IconButton, Input, InputGroup, - InputRightElement + InputRightElement, } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { ViewIcon, ViewOffIcon } from '~/bundles/common/icons/icons.js'; diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts index 216e49d57..6d5ebf174 100644 --- a/frontend/src/bundles/common/icons/icons.ts +++ b/frontend/src/bundles/common/icons/icons.ts @@ -1,4 +1,8 @@ -export { DownloadIcon, ViewIcon, ViewOffIcon } from './chakra-icon/chakra-icon.js'; +export { + DownloadIcon, + ViewIcon, + ViewOffIcon, +} from './chakra-icon/chakra-icon.js'; export { faCircleUser, faCloudArrowUp, diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index f5211e854..0f5faff9e 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -1,4 +1,7 @@ -import { FontAwesomeIcon, Icon } from '~/bundles/common/components/components.js'; +import { + FontAwesomeIcon, + Icon, +} from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { faCircleUser, From 2b3dbd36fee4eb2001b644c47228d352d84a6f0d Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Mon, 26 Aug 2024 22:23:41 -0400 Subject: [PATCH 27/32] OV-29: * abstract uses of icons --- .../common/password-input/password-input.tsx | 12 +++++++++-- .../common/icons/chakra-icon/chakra-icon.ts | 1 - .../font-awesome-icon/font-awesome-icon.ts | 7 ------- .../src/bundles/common/icons/icons-map.ts | 21 +++++++++++++++++++ frontend/src/bundles/common/icons/icons.ts | 13 +----------- frontend/src/bundles/studio/pages/studio.tsx | 5 +++-- .../components/mock/menu-mock.tsx | 4 ++-- .../video-editor/pages/video-editor.tsx | 18 ++++++---------- 8 files changed, 43 insertions(+), 38 deletions(-) delete mode 100644 frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts delete mode 100644 frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts create mode 100644 frontend/src/bundles/common/icons/icons-map.ts diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx index 74ffcf527..03a19fc62 100644 --- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx +++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx @@ -1,11 +1,12 @@ import { + Icon, IconButton, Input, InputGroup, InputRightElement, } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; -import { ViewIcon, ViewOffIcon } from '~/bundles/common/icons/icons.js'; +import { IconMap } from '~/bundles/common/icons/icons.js'; type Properties = { label: string; @@ -36,7 +37,14 @@ const PasswordInput: React.FC = ({ label, name, hasError }) => { aria-label={ isPasswordVisible ? 'Hide password' : 'Show password' } - icon={isPasswordVisible ? : } + as={Icon} + icon={ + isPasswordVisible ? ( + + ) : ( + + ) + } onClick={handlePasswordIconClick} variant="ghostIcon" /> diff --git a/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts b/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts deleted file mode 100644 index e7db7d667..000000000 --- a/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts +++ /dev/null @@ -1 +0,0 @@ -export { DownloadIcon, ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; diff --git a/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts b/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts deleted file mode 100644 index e549ce1d0..000000000 --- a/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { - faCircleUser, - faCloudArrowUp, - faFont, - faT, - faTableColumns, -} from '@fortawesome/free-solid-svg-icons'; diff --git a/frontend/src/bundles/common/icons/icons-map.ts b/frontend/src/bundles/common/icons/icons-map.ts new file mode 100644 index 000000000..94818864c --- /dev/null +++ b/frontend/src/bundles/common/icons/icons-map.ts @@ -0,0 +1,21 @@ +import { DownloadIcon, ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; +import { + faCircleUser, + faCloudArrowUp, + faFont, + faT, + faTableColumns, +} from '@fortawesome/free-solid-svg-icons'; + +const IconMap = { + DOWNLOAD: DownloadIcon, + VIEW: ViewIcon, + VIEW_OFF: ViewOffIcon, + AVATAR: faCircleUser, + UPLOAD: faCloudArrowUp, + TEMPLATE: faTableColumns, + SCRIPT: faFont, + TEXT: faT, +} as const; + +export { IconMap }; diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts index 6d5ebf174..8ef7dc27d 100644 --- a/frontend/src/bundles/common/icons/icons.ts +++ b/frontend/src/bundles/common/icons/icons.ts @@ -1,12 +1 @@ -export { - DownloadIcon, - ViewIcon, - ViewOffIcon, -} from './chakra-icon/chakra-icon.js'; -export { - faCircleUser, - faCloudArrowUp, - faFont, - faT, - faTableColumns, -} from './font-awesome-icon/font-awesome-icon.js'; +export { IconMap } from './icons-map.js'; diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx index b04aa87c2..71c46cfef 100644 --- a/frontend/src/bundles/studio/pages/studio.tsx +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -1,9 +1,10 @@ import { Button, Header, + Icon, IconButton, } from '~/bundles/common/components/components.js'; -import { DownloadIcon } from '~/bundles/common/icons/icons.js'; +import { IconMap } from '~/bundles/common/icons/icons.js'; const Studio: React.FC = () => { return ( @@ -20,7 +21,7 @@ const Studio: React.FC = () => { } + icon={} /> } /> diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx index b1f28c4d3..f33057e20 100644 --- a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx +++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon, Icon, } from '~/bundles/common/components/components.js'; -import { faCloudArrowUp } from '~/bundles/common/icons/icons.js'; +import { IconMap } from '~/bundles/common/icons/icons.js'; const TemplatesContent: React.FC = () => (
    This is the Templates content.
    @@ -13,7 +13,7 @@ const ScriptHeader: React.FC = () => (
    Script
    - +
    ); diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index 0f5faff9e..81370bc2f 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -3,13 +3,7 @@ import { Icon, } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; -import { - faCircleUser, - faCloudArrowUp, - faFont, - faT, - faTableColumns, -} from '~/bundles/common/icons/icons.js'; +import { IconMap } from '~/bundles/common/icons/icons.js'; import { Menu, MenuBody } from '../components/components.js'; import { @@ -49,27 +43,27 @@ const VideoEditor: React.FC = () => { const menuItems: MenuItem[] = [ { label: 'Templates', - icon: , + icon: , onClick: () => handleMenuClick('Templates', ), }, { label: 'Avatars', - icon: , + icon: , onClick: () => handleMenuClick('Avatars', ), }, { label: 'Script', - icon: , + icon: , onClick: () => handleMenuClick(, ), }, { label: 'Text', - icon: , + icon: , onClick: () => handleMenuClick('Text', ), }, { label: 'Assets', - icon: , + icon: , onClick: () => handleMenuClick('Assets', ), }, ]; From 30c8d158121edf40f3ba71f83ae07b35202344a7 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 27 Aug 2024 12:46:17 -0400 Subject: [PATCH 28/32] OV-29: - Remove rout of video editor --- frontend/src/bundles/common/enums/app-route.enum.ts | 1 - frontend/src/router/routes/protected-routes.tsx | 5 ----- 2 files changed, 6 deletions(-) diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts index 9aee45de6..7e9dd441d 100644 --- a/frontend/src/bundles/common/enums/app-route.enum.ts +++ b/frontend/src/bundles/common/enums/app-route.enum.ts @@ -3,7 +3,6 @@ const AppRoute = { SIGN_IN: '/sign-in', SIGN_UP: '/sign-up', STUDIO: '/studio', - VIDEO_EDITOR: '/video-editor', ANY: '*', } as const; diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx index 30781cbe2..4724f0a4b 100644 --- a/frontend/src/router/routes/protected-routes.tsx +++ b/frontend/src/router/routes/protected-routes.tsx @@ -2,7 +2,6 @@ import { Navigate } from 'react-router-dom'; import { AppRoute } from '~/bundles/common/enums/app-route.enum.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; -import { VideoEditor } from '~/bundles/video-editor/pages/video-editor.js'; import { ProtectedRoute } from '../components/protected-route.js'; @@ -15,10 +14,6 @@ const protectedRoutes = { path: AppRoute.STUDIO, element: , }, - { - path: AppRoute.VIDEO_EDITOR, - element: , - }, { path: AppRoute.ANY, element: , From 055b4f3520fbdace7a80c41599cd03c33e262273 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 27 Aug 2024 12:49:29 -0400 Subject: [PATCH 29/32] OV-29: * changes of properties names suggested on review of PR --- .../common/password-input/password-input.tsx | 8 ++------ frontend/src/bundles/common/icons/icons-map.ts | 4 ++-- frontend/src/bundles/common/icons/icons.ts | 2 +- frontend/src/bundles/studio/pages/studio.tsx | 4 ++-- .../bundles/video-editor/components/menu/menu.tsx | 12 ++++++++---- .../video-editor/components/mock/menu-mock.tsx | 4 ++-- .../bundles/video-editor/pages/video-editor.tsx | 14 +++++++------- 7 files changed, 24 insertions(+), 24 deletions(-) diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx index 03a19fc62..8b2b11735 100644 --- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx +++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx @@ -6,7 +6,7 @@ import { InputRightElement, } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; -import { IconMap } from '~/bundles/common/icons/icons.js'; +import { IconEnum } from '~/bundles/common/icons/icons.js'; type Properties = { label: string; @@ -39,11 +39,7 @@ const PasswordInput: React.FC = ({ label, name, hasError }) => { } as={Icon} icon={ - isPasswordVisible ? ( - - ) : ( - - ) + } onClick={handlePasswordIconClick} variant="ghostIcon" diff --git a/frontend/src/bundles/common/icons/icons-map.ts b/frontend/src/bundles/common/icons/icons-map.ts index 94818864c..8bd669622 100644 --- a/frontend/src/bundles/common/icons/icons-map.ts +++ b/frontend/src/bundles/common/icons/icons-map.ts @@ -7,7 +7,7 @@ import { faTableColumns, } from '@fortawesome/free-solid-svg-icons'; -const IconMap = { +const IconEnum = { DOWNLOAD: DownloadIcon, VIEW: ViewIcon, VIEW_OFF: ViewOffIcon, @@ -18,4 +18,4 @@ const IconMap = { TEXT: faT, } as const; -export { IconMap }; +export { IconEnum }; diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts index 8ef7dc27d..4b51eaa13 100644 --- a/frontend/src/bundles/common/icons/icons.ts +++ b/frontend/src/bundles/common/icons/icons.ts @@ -1 +1 @@ -export { IconMap } from './icons-map.js'; +export { IconEnum } from './icons-map.js'; diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx index 71c46cfef..cedc43ca8 100644 --- a/frontend/src/bundles/studio/pages/studio.tsx +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -4,7 +4,7 @@ import { Icon, IconButton, } from '~/bundles/common/components/components.js'; -import { IconMap } from '~/bundles/common/icons/icons.js'; +import { IconEnum } from '~/bundles/common/icons/icons.js'; const Studio: React.FC = () => { return ( @@ -21,7 +21,7 @@ const Studio: React.FC = () => { } + icon={} /> } /> diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx index 95e6038db..09e1c4a72 100644 --- a/frontend/src/bundles/video-editor/components/menu/menu.tsx +++ b/frontend/src/bundles/video-editor/components/menu/menu.tsx @@ -6,10 +6,14 @@ import { type MenuItem } from '../../types/types.js'; type Properties = { items: MenuItem[]; activeIndex: number | null; - setActiveIndex: (index: number) => void; + onActiveIndexSet: (index: number) => void; }; -const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) => { +const Menu: React.FC = ({ + items, + activeIndex, + onActiveIndexSet, +}) => { const handleClick = useCallback( (index: number) => { return () => { @@ -22,11 +26,11 @@ const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) => { return; } - setActiveIndex(index); + onActiveIndexSet(index); item.onClick(); }; }, - [setActiveIndex, items], + [onActiveIndexSet, items], ); return ( (
    This is the Templates content.
    @@ -13,7 +13,7 @@ const ScriptHeader: React.FC = () => (
    Script
    - +
    ); diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index 81370bc2f..77688b9bf 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -3,7 +3,7 @@ import { Icon, } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; -import { IconMap } from '~/bundles/common/icons/icons.js'; +import { IconEnum } from '~/bundles/common/icons/icons.js'; import { Menu, MenuBody } from '../components/components.js'; import { @@ -43,27 +43,27 @@ const VideoEditor: React.FC = () => { const menuItems: MenuItem[] = [ { label: 'Templates', - icon: , + icon: , onClick: () => handleMenuClick('Templates', ), }, { label: 'Avatars', - icon: , + icon: , onClick: () => handleMenuClick('Avatars', ), }, { label: 'Script', - icon: , + icon: , onClick: () => handleMenuClick(, ), }, { label: 'Text', - icon: , + icon: , onClick: () => handleMenuClick('Text', ), }, { label: 'Assets', - icon: , + icon: , onClick: () => handleMenuClick('Assets', ), }, ]; @@ -73,7 +73,7 @@ const VideoEditor: React.FC = () => { Date: Tue, 27 Aug 2024 14:50:59 -0400 Subject: [PATCH 30/32] OV-29: * changes of properties names suggested on review of PR --- .../common/password-input/password-input.tsx | 4 ++-- .../common/icons/{icons-map.ts => icon-name.ts} | 4 ++-- frontend/src/bundles/common/icons/icons.ts | 2 +- frontend/src/bundles/studio/pages/studio.tsx | 4 ++-- .../video-editor/components/mock/menu-mock.tsx | 4 ++-- .../src/bundles/video-editor/pages/video-editor.tsx | 12 ++++++------ 6 files changed, 15 insertions(+), 15 deletions(-) rename frontend/src/bundles/common/icons/{icons-map.ts => icon-name.ts} (91%) diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx index 8b2b11735..5959235f6 100644 --- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx +++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx @@ -6,7 +6,7 @@ import { InputRightElement, } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; -import { IconEnum } from '~/bundles/common/icons/icons.js'; +import { IconName } from '~/bundles/common/icons/icons.js'; type Properties = { label: string; @@ -39,7 +39,7 @@ const PasswordInput: React.FC = ({ label, name, hasError }) => { } as={Icon} icon={ - + } onClick={handlePasswordIconClick} variant="ghostIcon" diff --git a/frontend/src/bundles/common/icons/icons-map.ts b/frontend/src/bundles/common/icons/icon-name.ts similarity index 91% rename from frontend/src/bundles/common/icons/icons-map.ts rename to frontend/src/bundles/common/icons/icon-name.ts index 8bd669622..f5ad7ed1c 100644 --- a/frontend/src/bundles/common/icons/icons-map.ts +++ b/frontend/src/bundles/common/icons/icon-name.ts @@ -7,7 +7,7 @@ import { faTableColumns, } from '@fortawesome/free-solid-svg-icons'; -const IconEnum = { +const IconName = { DOWNLOAD: DownloadIcon, VIEW: ViewIcon, VIEW_OFF: ViewOffIcon, @@ -18,4 +18,4 @@ const IconEnum = { TEXT: faT, } as const; -export { IconEnum }; +export { IconName }; diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts index 4b51eaa13..ef6aab744 100644 --- a/frontend/src/bundles/common/icons/icons.ts +++ b/frontend/src/bundles/common/icons/icons.ts @@ -1 +1 @@ -export { IconEnum } from './icons-map.js'; +export { IconName } from './icon-name.js'; diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx index cedc43ca8..4bb9e35fc 100644 --- a/frontend/src/bundles/studio/pages/studio.tsx +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -4,7 +4,7 @@ import { Icon, IconButton, } from '~/bundles/common/components/components.js'; -import { IconEnum } from '~/bundles/common/icons/icons.js'; +import { IconName } from '~/bundles/common/icons/icons.js'; const Studio: React.FC = () => { return ( @@ -21,7 +21,7 @@ const Studio: React.FC = () => { } + icon={} /> } /> diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx index b4a08b168..84d1c00e9 100644 --- a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx +++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon, Icon, } from '~/bundles/common/components/components.js'; -import { IconEnum } from '~/bundles/common/icons/icons.js'; +import { IconName } from '~/bundles/common/icons/icons.js'; const TemplatesContent: React.FC = () => (
    This is the Templates content.
    @@ -13,7 +13,7 @@ const ScriptHeader: React.FC = () => (
    Script
    - +
    ); diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index 77688b9bf..80bd0a70c 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -3,7 +3,7 @@ import { Icon, } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; -import { IconEnum } from '~/bundles/common/icons/icons.js'; +import { IconName } from '~/bundles/common/icons/icons.js'; import { Menu, MenuBody } from '../components/components.js'; import { @@ -43,27 +43,27 @@ const VideoEditor: React.FC = () => { const menuItems: MenuItem[] = [ { label: 'Templates', - icon: , + icon: , onClick: () => handleMenuClick('Templates', ), }, { label: 'Avatars', - icon: , + icon: , onClick: () => handleMenuClick('Avatars', ), }, { label: 'Script', - icon: , + icon: , onClick: () => handleMenuClick(, ), }, { label: 'Text', - icon: , + icon: , onClick: () => handleMenuClick('Text', ), }, { label: 'Assets', - icon: , + icon: , onClick: () => handleMenuClick('Assets', ), }, ]; From 9b2447bee2e4223faa0bd32b1b5af179188f37b8 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 27 Aug 2024 14:53:14 -0400 Subject: [PATCH 31/32] OV-29: * changes of prettier --- .../components/common/password-input/password-input.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx index 5959235f6..e3dd6e3c8 100644 --- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx +++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx @@ -39,7 +39,13 @@ const PasswordInput: React.FC = ({ label, name, hasError }) => { } as={Icon} icon={ - + } onClick={handlePasswordIconClick} variant="ghostIcon" From 6f908934ebdf47e04e1feafb4e5a4088ff8a91c1 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 27 Aug 2024 15:45:40 -0400 Subject: [PATCH 32/32] OV-29: - inncesary using as icon --- .../auth/components/common/password-input/password-input.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx index 98015ff14..974d79a9f 100644 --- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx +++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx @@ -44,7 +44,6 @@ const PasswordInput: React.FC = ({ aria-label={ isPasswordVisible ? 'Hide password' : 'Show password' } - as={Icon} icon={