From d51508c3214119010b6c76afb070aa6d862502c7 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 20:10:21 -0500 Subject: [PATCH 01/58] OV-61: + icon object --- frontend/src/bundles/common/icons/icon-map.ts | 10 ++++++++++ frontend/src/bundles/common/icons/icons.ts | 2 ++ frontend/src/bundles/common/icons/size.enum.ts | 7 +++++++ 3 files changed, 19 insertions(+) create mode 100644 frontend/src/bundles/common/icons/icon-map.ts create mode 100644 frontend/src/bundles/common/icons/icons.ts create mode 100644 frontend/src/bundles/common/icons/size.enum.ts diff --git a/frontend/src/bundles/common/icons/icon-map.ts b/frontend/src/bundles/common/icons/icon-map.ts new file mode 100644 index 000000000..d740ea1d1 --- /dev/null +++ b/frontend/src/bundles/common/icons/icon-map.ts @@ -0,0 +1,10 @@ +import { ArrowBackIcon, CheckCircleIcon } from '@chakra-ui/icons'; +import { faCircle } from '@fortawesome/free-solid-svg-icons'; + +const IconMap = { + ARROW_BACK: ArrowBackIcon, + CHECK_CIRCLE: CheckCircleIcon, + CIRCLE: faCircle, +} as const; + +export { IconMap }; diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts new file mode 100644 index 000000000..ccda85af1 --- /dev/null +++ b/frontend/src/bundles/common/icons/icons.ts @@ -0,0 +1,2 @@ +export { IconMap } from './icon-map.js'; +export { Size } from './size.enum.js'; diff --git a/frontend/src/bundles/common/icons/size.enum.ts b/frontend/src/bundles/common/icons/size.enum.ts new file mode 100644 index 000000000..32e11d162 --- /dev/null +++ b/frontend/src/bundles/common/icons/size.enum.ts @@ -0,0 +1,7 @@ +const Size = { + LG: 5, + SM: 4, + XS: 3, +} as const; + +export { Size }; From 760c4fe41ad264121c757362a8e9d46781dde047 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 20:13:49 -0500 Subject: [PATCH 02/58] OV-61: + stepper helpers --- .../stepper/common/helpers/get-step-status.ts | 34 +++++++++++++++++++ .../stepper/common/helpers/helpers.ts | 1 + 2 files changed, 35 insertions(+) create mode 100644 frontend/src/bundles/common/components/stepper/common/helpers/get-step-status.ts create mode 100644 frontend/src/bundles/common/components/stepper/common/helpers/helpers.ts diff --git a/frontend/src/bundles/common/components/stepper/common/helpers/get-step-status.ts b/frontend/src/bundles/common/components/stepper/common/helpers/get-step-status.ts new file mode 100644 index 000000000..46bbcaea2 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/common/helpers/get-step-status.ts @@ -0,0 +1,34 @@ +type Properties = { + stepName: string; + index: number; + currentStep: string; + steps: string[]; +}; + +const getStepStatus = ({ + stepName, + index, + currentStep, + steps, +}: Properties): + | 'completed' + | 'current' + | 'default' + | 'lastIncompleted' + | 'lastCompleted' => { + if (index < steps.indexOf(currentStep)) { + return 'completed'; + } + if (currentStep === steps.at(-1)) { + return 'lastCompleted'; + } + if (index === steps.length - 1) { + return 'lastIncompleted'; + } + if (currentStep === stepName) { + return 'current'; + } + return 'default'; +}; + +export { getStepStatus }; diff --git a/frontend/src/bundles/common/components/stepper/common/helpers/helpers.ts b/frontend/src/bundles/common/components/stepper/common/helpers/helpers.ts new file mode 100644 index 000000000..e55781ddf --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/common/helpers/helpers.ts @@ -0,0 +1 @@ +export { getStepStatus } from './get-step-status.js'; From d62090b6e0ad1b0503fa0232b874eae3fbf1cb22 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 20:22:38 -0500 Subject: [PATCH 03/58] OV-61: + stepper components --- .../stepper/common/components/components.ts | 2 + .../components/select-icon/select-icon.tsx | 62 ++++++++++++++++++ .../stepper/common/components/step/step.tsx | 65 +++++++++++++++++++ 3 files changed, 129 insertions(+) create mode 100644 frontend/src/bundles/common/components/stepper/common/components/components.ts create mode 100644 frontend/src/bundles/common/components/stepper/common/components/select-icon/select-icon.tsx create mode 100644 frontend/src/bundles/common/components/stepper/common/components/step/step.tsx diff --git a/frontend/src/bundles/common/components/stepper/common/components/components.ts b/frontend/src/bundles/common/components/stepper/common/components/components.ts new file mode 100644 index 000000000..229f97b14 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/common/components/components.ts @@ -0,0 +1,2 @@ +export { selectIcon } from './select-icon/select-icon.js'; +export { Step } from './step/step.js'; diff --git a/frontend/src/bundles/common/components/stepper/common/components/select-icon/select-icon.tsx b/frontend/src/bundles/common/components/stepper/common/components/select-icon/select-icon.tsx new file mode 100644 index 000000000..4e5459ee3 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/common/components/select-icon/select-icon.tsx @@ -0,0 +1,62 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import { IconMap, Size } from '~/bundles/common/icons/icons.js'; + +import { Icon, Text } from '../../../../components.js'; + +const selectIcon = ( + step: + | 'completed' + | 'current' + | 'default' + | 'lastIncompleted' + | 'lastCompleted', +): JSX.Element => { + if (step === 'completed') { + return ( + + + + ); + } + + if (step === 'current' || step === 'lastCompleted') { + return ( + + + + ); + } + return ( + + + + ); +}; + +export { selectIcon }; diff --git a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx new file mode 100644 index 000000000..5cc9a89d2 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx @@ -0,0 +1,65 @@ +import { Box, Flex, Text } from '../../../../components.js'; +import { selectIcon } from '../components.js'; + +const Step = ({ + step, + stepDescription, +}: { + step: + | 'completed' + | 'current' + | 'default' + | 'lastIncompleted' + | 'lastCompleted'; + stepDescription: string; +}): JSX.Element => { + return ( + + {selectIcon(step)} + + {stepDescription} + + + ); +}; + +export { Step }; From e39536d8a116f2e86459e0160ef87a39e75337b3 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 20:29:52 -0500 Subject: [PATCH 04/58] OV-61: + stepper component --- .../bundles/common/components/components.ts | 4 +- .../common/components/stepper/stepper.tsx | 61 +++++++++++++++++++ 2 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 frontend/src/bundles/common/components/stepper/stepper.tsx diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 24a7b0098..74ab72abc 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -6,8 +6,9 @@ export { Loader } from './loader/loader.js'; export { Overlay } from './overlay/overlay.js'; export { Player } from './player/player.js'; export { RouterProvider } from './router-provider/router-provider.js'; +export { Stepper } from './stepper/stepper.js'; export { VideoModal } from './video-modal/video-modal.js'; -export { DownloadIcon } from '@chakra-ui/icons'; +export { ArrowBackIcon, DownloadIcon } from '@chakra-ui/icons'; export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; export { Box, @@ -18,6 +19,7 @@ export { FormControl, FormErrorMessage, Heading, + Icon, IconButton, InputGroup, InputRightElement, diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx new file mode 100644 index 000000000..92aa9c13c --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -0,0 +1,61 @@ +import { Box, Flex } from '@chakra-ui/react'; + +import { IconMap, Size } from '../../icons/icons.js'; +import { Header, Icon, IconButton } from '../components.js'; +import { Step } from './common/components/components.js'; +import { getStepStatus } from './common/helpers/helpers.js'; + +type Properties = { + steps: string[]; + currentStep: string; +}; + +const stepsElements = ({ steps, currentStep }: Properties): JSX.Element[] => { + return steps.map((stepName, index) => { + return ( + + ); + }); +}; + +const Stepper: React.FC = ({ steps, currentStep }) => { + const backButton = ( + } + /> + ); + + const stepProgressBar = ( + + + {stepsElements({ steps, currentStep })} + + + ); + + return
; +}; + +export { Stepper }; From 453325b67e04aff00fbc6aa5fdb3ad68b89edf88 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 20:36:14 -0500 Subject: [PATCH 05/58] OV-61: - arrow back icon --- 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 74ab72abc..c8da29417 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -8,7 +8,7 @@ export { Player } from './player/player.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { Stepper } from './stepper/stepper.js'; export { VideoModal } from './video-modal/video-modal.js'; -export { ArrowBackIcon, DownloadIcon } from '@chakra-ui/icons'; +export { DownloadIcon } from '@chakra-ui/icons'; export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; export { Box, From fc3b7f67d140b24bdb7cbb1733e07a49efc36e0e Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 21:11:04 -0500 Subject: [PATCH 06/58] OV-61: * left padding spaces --- .../stepper/common/components/step/step.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx index 5cc9a89d2..b9e30b067 100644 --- a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx +++ b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx @@ -32,15 +32,15 @@ const Step = ({ step === 'lastIncompleted' || step === 'lastCompleted' ? {} : { - zIndex: -1, - content: '\'\'', - position: 'relative', - top: '1.5rem', - left: '50%', - height: '2px', - backgroundColor: - step === 'completed' ? 'white' : '#35399a', - order: -1, + zIndex: -1, + content: '\'\'', + position: 'relative', + top: '1.5rem', + left: '50%', + height: '2px', + backgroundColor: + step === 'completed' ? 'white' : '#35399a', + order: -1, } } > From 1dad9e2ac9e479587194ac1b2b155b7a38c9dedf Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 21:13:23 -0500 Subject: [PATCH 07/58] OV-61: * left padding spaces --- .../common/components/stepper/common/components/step/step.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx index b9e30b067..70455e1a4 100644 --- a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx +++ b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx @@ -41,7 +41,7 @@ const Step = ({ backgroundColor: step === 'completed' ? 'white' : '#35399a', order: -1, - } + } } > {selectIcon(step)} From 92322d7f908021ac2cf013724f005395d895c767 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 21:39:23 -0500 Subject: [PATCH 08/58] OV-61: * left padding spaces --- .../stepper/common/components/step/step.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx index 70455e1a4..e04d204ec 100644 --- a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx +++ b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx @@ -13,6 +13,17 @@ const Step = ({ | 'lastCompleted'; stepDescription: string; }): JSX.Element => { + const afterStyles = { + zIndex: -1, + content: '\'\'', + position: 'relative', + top: '1.5rem', + left: '50%', + height: '2px', + backgroundColor: step === 'completed' ? 'white' : '#35399a', + order: -1, + }; + return ( {selectIcon(step)} From 51813911db471f89e1f239838dcfd826161970c8 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 21:44:12 -0500 Subject: [PATCH 09/58] OV-61: * content value --- .../common/components/stepper/common/components/step/step.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx index e04d204ec..193a2953e 100644 --- a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx +++ b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx @@ -15,7 +15,7 @@ const Step = ({ }): JSX.Element => { const afterStyles = { zIndex: -1, - content: '\'\'', + content: `${''}`, position: 'relative', top: '1.5rem', left: '50%', @@ -32,7 +32,7 @@ const Step = ({ textAlign: 'center', }} _before={{ - content: '\'\'', + content: `${''}`, position: 'relative', zIndex: 1, display: 'block', From b3a2a25f7acd5b292440a15fe95d2a2267f21505 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 26 Aug 2024 21:50:18 -0500 Subject: [PATCH 10/58] OV-61: * content value --- .../common/components/stepper/common/components/step/step.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx index 193a2953e..34fb845c4 100644 --- a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx +++ b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx @@ -15,7 +15,7 @@ const Step = ({ }): JSX.Element => { const afterStyles = { zIndex: -1, - content: `${''}`, + content: '""', position: 'relative', top: '1.5rem', left: '50%', @@ -32,7 +32,7 @@ const Step = ({ textAlign: 'center', }} _before={{ - content: `${''}`, + content: '""', position: 'relative', zIndex: 1, display: 'block', From 36cb8cc95a246ac71de13b9ccc898f5380eef523 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 27 Aug 2024 13:46:51 -0500 Subject: [PATCH 11/58] OV-61: - delete common folder --- .../stepper/common/components/components.ts | 2 - .../components/select-icon/select-icon.tsx | 62 ----------------- .../stepper/common/components/step/step.tsx | 66 ------------------- .../stepper/common/helpers/get-step-status.ts | 34 ---------- .../stepper/common/helpers/helpers.ts | 1 - 5 files changed, 165 deletions(-) delete mode 100644 frontend/src/bundles/common/components/stepper/common/components/components.ts delete mode 100644 frontend/src/bundles/common/components/stepper/common/components/select-icon/select-icon.tsx delete mode 100644 frontend/src/bundles/common/components/stepper/common/components/step/step.tsx delete mode 100644 frontend/src/bundles/common/components/stepper/common/helpers/get-step-status.ts delete mode 100644 frontend/src/bundles/common/components/stepper/common/helpers/helpers.ts diff --git a/frontend/src/bundles/common/components/stepper/common/components/components.ts b/frontend/src/bundles/common/components/stepper/common/components/components.ts deleted file mode 100644 index 229f97b14..000000000 --- a/frontend/src/bundles/common/components/stepper/common/components/components.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { selectIcon } from './select-icon/select-icon.js'; -export { Step } from './step/step.js'; diff --git a/frontend/src/bundles/common/components/stepper/common/components/select-icon/select-icon.tsx b/frontend/src/bundles/common/components/stepper/common/components/select-icon/select-icon.tsx deleted file mode 100644 index 4e5459ee3..000000000 --- a/frontend/src/bundles/common/components/stepper/common/components/select-icon/select-icon.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - -import { IconMap, Size } from '~/bundles/common/icons/icons.js'; - -import { Icon, Text } from '../../../../components.js'; - -const selectIcon = ( - step: - | 'completed' - | 'current' - | 'default' - | 'lastIncompleted' - | 'lastCompleted', -): JSX.Element => { - if (step === 'completed') { - return ( - - - - ); - } - - if (step === 'current' || step === 'lastCompleted') { - return ( - - - - ); - } - return ( - - - - ); -}; - -export { selectIcon }; diff --git a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx deleted file mode 100644 index 34fb845c4..000000000 --- a/frontend/src/bundles/common/components/stepper/common/components/step/step.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { Box, Flex, Text } from '../../../../components.js'; -import { selectIcon } from '../components.js'; - -const Step = ({ - step, - stepDescription, -}: { - step: - | 'completed' - | 'current' - | 'default' - | 'lastIncompleted' - | 'lastCompleted'; - stepDescription: string; -}): JSX.Element => { - const afterStyles = { - zIndex: -1, - content: '""', - position: 'relative', - top: '1.5rem', - left: '50%', - height: '2px', - backgroundColor: step === 'completed' ? 'white' : '#35399a', - order: -1, - }; - - return ( - - {selectIcon(step)} - - {stepDescription} - - - ); -}; - -export { Step }; diff --git a/frontend/src/bundles/common/components/stepper/common/helpers/get-step-status.ts b/frontend/src/bundles/common/components/stepper/common/helpers/get-step-status.ts deleted file mode 100644 index 46bbcaea2..000000000 --- a/frontend/src/bundles/common/components/stepper/common/helpers/get-step-status.ts +++ /dev/null @@ -1,34 +0,0 @@ -type Properties = { - stepName: string; - index: number; - currentStep: string; - steps: string[]; -}; - -const getStepStatus = ({ - stepName, - index, - currentStep, - steps, -}: Properties): - | 'completed' - | 'current' - | 'default' - | 'lastIncompleted' - | 'lastCompleted' => { - if (index < steps.indexOf(currentStep)) { - return 'completed'; - } - if (currentStep === steps.at(-1)) { - return 'lastCompleted'; - } - if (index === steps.length - 1) { - return 'lastIncompleted'; - } - if (currentStep === stepName) { - return 'current'; - } - return 'default'; -}; - -export { getStepStatus }; diff --git a/frontend/src/bundles/common/components/stepper/common/helpers/helpers.ts b/frontend/src/bundles/common/components/stepper/common/helpers/helpers.ts deleted file mode 100644 index e55781ddf..000000000 --- a/frontend/src/bundles/common/components/stepper/common/helpers/helpers.ts +++ /dev/null @@ -1 +0,0 @@ -export { getStepStatus } from './get-step-status.js'; From 9a5f02af4ce3c170fc486806fca9276c5dc1c514 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 27 Aug 2024 13:48:17 -0500 Subject: [PATCH 12/58] OV-61: + step type --- .../bundles/common/components/stepper/types/step.type.ts | 8 ++++++++ .../src/bundles/common/components/stepper/types/types.ts | 1 + 2 files changed, 9 insertions(+) create mode 100644 frontend/src/bundles/common/components/stepper/types/step.type.ts create mode 100644 frontend/src/bundles/common/components/stepper/types/types.ts diff --git a/frontend/src/bundles/common/components/stepper/types/step.type.ts b/frontend/src/bundles/common/components/stepper/types/step.type.ts new file mode 100644 index 000000000..29b50e238 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/types/step.type.ts @@ -0,0 +1,8 @@ +type Step = + | 'completed' + | 'current' + | 'default' + | 'lastUncompleted' + | 'lastCompleted'; + +export { type Step }; diff --git a/frontend/src/bundles/common/components/stepper/types/types.ts b/frontend/src/bundles/common/components/stepper/types/types.ts new file mode 100644 index 000000000..cb649336b --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/types/types.ts @@ -0,0 +1 @@ +export { type Step } from './step.type.js'; From f5352d6cb5942a6ecdb7f7a9185bdb349315a14d Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 27 Aug 2024 13:51:24 -0500 Subject: [PATCH 13/58] OV-61: * select icon to step icon --- .../stepper/components/components.ts | 2 + .../components/step-icon/step-icon.tsx | 61 +++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 frontend/src/bundles/common/components/stepper/components/components.ts create mode 100644 frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx diff --git a/frontend/src/bundles/common/components/stepper/components/components.ts b/frontend/src/bundles/common/components/stepper/components/components.ts new file mode 100644 index 000000000..43e038a10 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/components/components.ts @@ -0,0 +1,2 @@ +export { Step } from './step/step.js'; +export { StepIcon } from './step-icon/step-icon.js'; diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx new file mode 100644 index 000000000..3a46a2291 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -0,0 +1,61 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import { Box, Icon } from '~/bundles/common/components/components.js'; +import { IconMap, Size } from '~/bundles/common/icons/icons.js'; + +import { type Step as StepType } from '../../types/step.type.js'; + +type Properties = { + step: StepType; +}; + +const StepIcon = ({ step }: Properties): JSX.Element => { + if (step === 'completed') { + return ( + + + + + + ); + } + + if (step === 'current' || step === 'lastCompleted') { + return ( + + + + + + ); + } + return ( + + + + + + ); +}; + +export { StepIcon }; From 70edd57009b74467b962666afb9aba31bb937d66 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 27 Aug 2024 13:55:11 -0500 Subject: [PATCH 14/58] OV-61: * refactored folder structure --- .../stepper/helpers/get-step-status.ts | 31 +++++++++++++++++++ .../components/stepper/helpers/helpers.ts | 1 + 2 files changed, 32 insertions(+) create mode 100644 frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts create mode 100644 frontend/src/bundles/common/components/stepper/helpers/helpers.ts diff --git a/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts b/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts new file mode 100644 index 000000000..f5c423832 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts @@ -0,0 +1,31 @@ +import { type Step as StepType } from '../types/step.type.js'; + +type Properties = { + stepName: string; + index: number; + currentStep: string; + steps: string[]; +}; + +const getStepStatus = ({ + stepName, + index, + currentStep, + steps, +}: Properties): StepType => { + if (index < steps.indexOf(currentStep)) { + return 'completed'; + } + if (currentStep === steps.at(-1)) { + return 'lastCompleted'; + } + if (index === steps.length - 1) { + return 'lastUncompleted'; + } + if (currentStep === stepName) { + return 'current'; + } + return 'default'; +}; + +export { getStepStatus }; diff --git a/frontend/src/bundles/common/components/stepper/helpers/helpers.ts b/frontend/src/bundles/common/components/stepper/helpers/helpers.ts new file mode 100644 index 000000000..e55781ddf --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/helpers/helpers.ts @@ -0,0 +1 @@ +export { getStepStatus } from './get-step-status.js'; From 0708502aa56be94ced1d1d722cd1dc791716de6c Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 27 Aug 2024 13:57:48 -0500 Subject: [PATCH 15/58] OV-61: * refactored folder structure --- .../stepper/components/step/step.tsx | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 frontend/src/bundles/common/components/stepper/components/step/step.tsx diff --git a/frontend/src/bundles/common/components/stepper/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/components/step/step.tsx new file mode 100644 index 000000000..41be7bc77 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/components/step/step.tsx @@ -0,0 +1,63 @@ +import { Flex, Text } from '~/bundles/common/components/components.js'; + +import { type Step as StepType } from '../../types/step.type.js'; +import { StepIcon } from '../step-icon/step-icon.js'; + +const Step = ({ + step, + stepDescription, +}: { + step: StepType; + stepDescription: string; +}): JSX.Element => { + const afterStyles = { + zIndex: -1, + content: '""', + position: 'relative', + top: '24px', + left: '50%', + height: '2px', + backgroundColor: step === 'completed' ? 'white' : 'background.600', + order: -1, + }; + + return ( + + + + {stepDescription} + + + ); +}; + +export { Step }; From 76f07fa97c8769e5a54ee7ac98ff91f8f1c79390 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 27 Aug 2024 14:00:09 -0500 Subject: [PATCH 16/58] OV-61: * import from components --- .../src/bundles/common/components/stepper/stepper.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index 92aa9c13c..3ff538452 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -1,9 +1,7 @@ -import { Box, Flex } from '@chakra-ui/react'; - import { IconMap, Size } from '../../icons/icons.js'; -import { Header, Icon, IconButton } from '../components.js'; -import { Step } from './common/components/components.js'; -import { getStepStatus } from './common/helpers/helpers.js'; +import { Box, Flex, Header, Icon, IconButton } from '../components.js'; +import { Step } from './components/components.js'; +import { getStepStatus } from './helpers/helpers.js'; type Properties = { steps: string[]; From 027b3f9f16f3b575393d214958052d234fb618e8 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 27 Aug 2024 14:09:16 -0500 Subject: [PATCH 17/58] OV-61: * icon map to icon name --- .../components/stepper/components/step-icon/step-icon.tsx | 8 ++++---- .../src/bundles/common/components/stepper/stepper.tsx | 4 ++-- .../bundles/common/icons/{icon-map.ts => icon-name.ts} | 4 ++-- frontend/src/bundles/common/icons/icons.ts | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) rename frontend/src/bundles/common/icons/{icon-map.ts => icon-name.ts} (85%) diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index 3a46a2291..a58d33ada 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Box, Icon } from '~/bundles/common/components/components.js'; -import { IconMap, Size } from '~/bundles/common/icons/icons.js'; +import { IconName, Size } from '~/bundles/common/icons/icons.js'; import { type Step as StepType } from '../../types/step.type.js'; @@ -14,7 +14,7 @@ const StepIcon = ({ step }: Properties): JSX.Element => { return ( - + ); @@ -38,7 +38,7 @@ const StepIcon = ({ step }: Properties): JSX.Element => { > @@ -50,7 +50,7 @@ const StepIcon = ({ step }: Properties): JSX.Element => { diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index 3ff538452..e7aa1eb8a 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -1,4 +1,4 @@ -import { IconMap, Size } from '../../icons/icons.js'; +import { IconName, Size } from '../../icons/icons.js'; import { Box, Flex, Header, Icon, IconButton } from '../components.js'; import { Step } from './components/components.js'; import { getStepStatus } from './helpers/helpers.js'; @@ -25,7 +25,7 @@ const Stepper: React.FC = ({ steps, currentStep }) => { } + icon={} /> ); diff --git a/frontend/src/bundles/common/icons/icon-map.ts b/frontend/src/bundles/common/icons/icon-name.ts similarity index 85% rename from frontend/src/bundles/common/icons/icon-map.ts rename to frontend/src/bundles/common/icons/icon-name.ts index d740ea1d1..9776878d2 100644 --- a/frontend/src/bundles/common/icons/icon-map.ts +++ b/frontend/src/bundles/common/icons/icon-name.ts @@ -1,10 +1,10 @@ import { ArrowBackIcon, CheckCircleIcon } from '@chakra-ui/icons'; import { faCircle } from '@fortawesome/free-solid-svg-icons'; -const IconMap = { +const IconName = { ARROW_BACK: ArrowBackIcon, CHECK_CIRCLE: CheckCircleIcon, CIRCLE: faCircle, } as const; -export { IconMap }; +export { IconName }; diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts index ccda85af1..886a2694f 100644 --- a/frontend/src/bundles/common/icons/icons.ts +++ b/frontend/src/bundles/common/icons/icons.ts @@ -1,2 +1,2 @@ -export { IconMap } from './icon-map.js'; +export { IconName } from './icon-name.js'; export { Size } from './size.enum.js'; From e1471a613f788fd72b3112e80e37ba16bed25550 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Wed, 28 Aug 2024 13:21:50 -0500 Subject: [PATCH 18/58] OV-61: * replace jsx element with react fc --- .../stepper/components/step-icon/step-icon.tsx | 2 +- .../common/components/stepper/components/step/step.tsx | 9 ++++----- .../src/bundles/common/components/stepper/stepper.tsx | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index a58d33ada..87ea1a704 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -9,7 +9,7 @@ type Properties = { step: StepType; }; -const StepIcon = ({ step }: Properties): JSX.Element => { +const StepIcon: React.FC = ({ step }) => { if (step === 'completed') { return ( diff --git a/frontend/src/bundles/common/components/stepper/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/components/step/step.tsx index 41be7bc77..41ccba813 100644 --- a/frontend/src/bundles/common/components/stepper/components/step/step.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step/step.tsx @@ -3,13 +3,12 @@ import { Flex, Text } from '~/bundles/common/components/components.js'; import { type Step as StepType } from '../../types/step.type.js'; import { StepIcon } from '../step-icon/step-icon.js'; -const Step = ({ - step, - stepDescription, -}: { +type Properties = { step: StepType; stepDescription: string; -}): JSX.Element => { +}; + +const Step: React.FC = ({ step, stepDescription }) => { const afterStyles = { zIndex: -1, content: '""', diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index e7aa1eb8a..dc878675e 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -8,7 +8,7 @@ type Properties = { currentStep: string; }; -const stepsElements = ({ steps, currentStep }: Properties): JSX.Element[] => { +const stepsElements: React.FC = ({ steps, currentStep }) => { return steps.map((stepName, index) => { return ( Date: Wed, 28 Aug 2024 13:27:01 -0500 Subject: [PATCH 19/58] OV-61: - icons size enum --- .../stepper/components/step-icon/step-icon.tsx | 12 ++++-------- .../bundles/common/components/stepper/stepper.tsx | 4 ++-- frontend/src/bundles/common/icons/icon-name.ts | 8 +++++++- frontend/src/bundles/common/icons/icons.ts | 1 - frontend/src/bundles/common/icons/size.enum.ts | 7 ------- 5 files changed, 13 insertions(+), 19 deletions(-) delete mode 100644 frontend/src/bundles/common/icons/size.enum.ts diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index 87ea1a704..2bc5084c6 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Box, Icon } from '~/bundles/common/components/components.js'; -import { IconName, Size } from '~/bundles/common/icons/icons.js'; +import { IconName } from '~/bundles/common/icons/icons.js'; import { type Step as StepType } from '../../types/step.type.js'; @@ -14,7 +14,7 @@ const StepIcon: React.FC = ({ step }) => { return ( - + ); @@ -39,7 +39,7 @@ const StepIcon: React.FC = ({ step }) => { @@ -48,11 +48,7 @@ const StepIcon: React.FC = ({ step }) => { return ( - + ); diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index dc878675e..b8f889431 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -1,4 +1,4 @@ -import { IconName, Size } from '../../icons/icons.js'; +import { IconName } from '../../icons/icons.js'; import { Box, Flex, Header, Icon, IconButton } from '../components.js'; import { Step } from './components/components.js'; import { getStepStatus } from './helpers/helpers.js'; @@ -25,7 +25,7 @@ const Stepper: React.FC = ({ steps, currentStep }) => { } + icon={} /> ); diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts index 9776878d2..d7b4cebca 100644 --- a/frontend/src/bundles/common/icons/icon-name.ts +++ b/frontend/src/bundles/common/icons/icon-name.ts @@ -1,7 +1,13 @@ import { ArrowBackIcon, CheckCircleIcon } from '@chakra-ui/icons'; -import { faCircle } from '@fortawesome/free-solid-svg-icons'; +import { + faCircle, + faEllipsisVertical, + faPen, +} from '@fortawesome/free-solid-svg-icons'; const IconName = { + OPTIONS_VERTICAL: faEllipsisVertical, + PEN: faPen, ARROW_BACK: ArrowBackIcon, CHECK_CIRCLE: CheckCircleIcon, CIRCLE: faCircle, diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts index 886a2694f..ef6aab744 100644 --- a/frontend/src/bundles/common/icons/icons.ts +++ b/frontend/src/bundles/common/icons/icons.ts @@ -1,2 +1 @@ export { IconName } from './icon-name.js'; -export { Size } from './size.enum.js'; diff --git a/frontend/src/bundles/common/icons/size.enum.ts b/frontend/src/bundles/common/icons/size.enum.ts deleted file mode 100644 index 32e11d162..000000000 --- a/frontend/src/bundles/common/icons/size.enum.ts +++ /dev/null @@ -1,7 +0,0 @@ -const Size = { - LG: 5, - SM: 4, - XS: 3, -} as const; - -export { Size }; From 5a04df352236d7c28595fc46ab77d7fbcb0b18fd Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Wed, 28 Aug 2024 15:30:09 -0500 Subject: [PATCH 20/58] OV-61: + step enum --- .../components/step-icon/step-icon.tsx | 9 ++++--- .../stepper/components/step/step.tsx | 15 +++++++---- .../common/components/stepper/enums/enums.ts | 1 + .../components/stepper/enums/step.enum.ts | 9 +++++++ .../stepper/helpers/get-step-status.ts | 16 ++++++----- .../common/components/stepper/stepper.tsx | 27 ++++++++++--------- .../components/stepper/types/step.type.ts | 8 ------ .../common/components/stepper/types/types.ts | 1 - 8 files changed, 48 insertions(+), 38 deletions(-) create mode 100644 frontend/src/bundles/common/components/stepper/enums/enums.ts create mode 100644 frontend/src/bundles/common/components/stepper/enums/step.enum.ts delete mode 100644 frontend/src/bundles/common/components/stepper/types/step.type.ts delete mode 100644 frontend/src/bundles/common/components/stepper/types/types.ts diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index 2bc5084c6..a99c82458 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -1,16 +1,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { type ValueOf } from 'shared'; import { Box, Icon } from '~/bundles/common/components/components.js'; import { IconName } from '~/bundles/common/icons/icons.js'; -import { type Step as StepType } from '../../types/step.type.js'; +import { Step } from '../../enums/enums.js'; type Properties = { - step: StepType; + step: ValueOf; }; const StepIcon: React.FC = ({ step }) => { - if (step === 'completed') { + if (step === Step.COMPLETED) { return ( @@ -20,7 +21,7 @@ const StepIcon: React.FC = ({ step }) => { ); } - if (step === 'current' || step === 'lastCompleted') { + if (step === Step.CURRENT || step === Step.LAST_COMPLETED) { return ( ; stepDescription: string; }; @@ -16,7 +18,8 @@ const Step: React.FC = ({ step, stepDescription }) => { top: '24px', left: '50%', height: '2px', - backgroundColor: step === 'completed' ? 'white' : 'background.600', + backgroundColor: + step === StepEnum.COMPLETED ? 'white' : 'background.600', order: -1, }; @@ -36,7 +39,8 @@ const Step: React.FC = ({ step, stepDescription }) => { margin: '11px auto 0', }} _after={ - step === 'lastUncompleted' || step === 'lastCompleted' + step === StepEnum.LAST_UNCOMPLETED || + step === StepEnum.LAST_COMPLETED ? {} : afterStyles } @@ -48,7 +52,8 @@ const Step: React.FC = ({ step, stepDescription }) => { marginTop: '5px', textAlign: 'center', color: - step === 'default' || step === 'lastUncompleted' + step === StepEnum.DEFAULT || + step === StepEnum.LAST_UNCOMPLETED ? 'background.600' : 'white', }} diff --git a/frontend/src/bundles/common/components/stepper/enums/enums.ts b/frontend/src/bundles/common/components/stepper/enums/enums.ts new file mode 100644 index 000000000..ea8c823b6 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/enums/enums.ts @@ -0,0 +1 @@ +export { Step } from './step.enum.js'; diff --git a/frontend/src/bundles/common/components/stepper/enums/step.enum.ts b/frontend/src/bundles/common/components/stepper/enums/step.enum.ts new file mode 100644 index 000000000..f8b5c5c61 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/enums/step.enum.ts @@ -0,0 +1,9 @@ +const Step = { + COMPLETED: 'completed', + CURRENT: 'current', + DEFAULT: 'default', + LAST_UNCOMPLETED: 'lastUncompleted', + LAST_COMPLETED: 'lastCompleted', +} as const; + +export { Step }; diff --git a/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts b/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts index f5c423832..3187d4dd8 100644 --- a/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts +++ b/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts @@ -1,4 +1,6 @@ -import { type Step as StepType } from '../types/step.type.js'; +import { type ValueOf } from 'shared'; + +import { Step } from '../enums/enums.js'; type Properties = { stepName: string; @@ -12,20 +14,20 @@ const getStepStatus = ({ index, currentStep, steps, -}: Properties): StepType => { +}: Properties): ValueOf => { if (index < steps.indexOf(currentStep)) { - return 'completed'; + return Step.COMPLETED; } if (currentStep === steps.at(-1)) { - return 'lastCompleted'; + return Step.LAST_COMPLETED; } if (index === steps.length - 1) { - return 'lastUncompleted'; + return Step.LAST_UNCOMPLETED; } if (currentStep === stepName) { - return 'current'; + return Step.CURRENT; } - return 'default'; + return Step.DEFAULT; }; export { getStepStatus }; diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index b8f889431..c1b5020ab 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -8,18 +8,6 @@ type Properties = { currentStep: string; }; -const stepsElements: React.FC = ({ steps, currentStep }) => { - return steps.map((stepName, index) => { - return ( - - ); - }); -}; - const Stepper: React.FC = ({ steps, currentStep }) => { const backButton = ( = ({ steps, currentStep }) => { color: 'white', }} > - {stepsElements({ steps, currentStep })} + {steps.map((stepName, index) => { + return ( + + ); + })} ); diff --git a/frontend/src/bundles/common/components/stepper/types/step.type.ts b/frontend/src/bundles/common/components/stepper/types/step.type.ts deleted file mode 100644 index 29b50e238..000000000 --- a/frontend/src/bundles/common/components/stepper/types/step.type.ts +++ /dev/null @@ -1,8 +0,0 @@ -type Step = - | 'completed' - | 'current' - | 'default' - | 'lastUncompleted' - | 'lastCompleted'; - -export { type Step }; diff --git a/frontend/src/bundles/common/components/stepper/types/types.ts b/frontend/src/bundles/common/components/stepper/types/types.ts deleted file mode 100644 index cb649336b..000000000 --- a/frontend/src/bundles/common/components/stepper/types/types.ts +++ /dev/null @@ -1 +0,0 @@ -export { type Step } from './step.type.js'; From 7a220d63701c28d7de54e99ac32c6fbefcfcf10a Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Thu, 29 Aug 2024 11:06:54 -0500 Subject: [PATCH 21/58] OV-61: * responsive stepper --- frontend/src/bundles/common/components/stepper/stepper.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index c1b5020ab..e047819a5 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -21,7 +21,8 @@ const Stepper: React.FC = ({ steps, currentStep }) => { From 0c4985639b16c92daee75532610aaa308c0042a2 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 2 Sep 2024 23:08:08 -0500 Subject: [PATCH 22/58] OV-61: - custom stepper --- .../stepper/components/step/step.tsx | 67 ------------------- .../common/components/stepper/enums/enums.ts | 1 - .../components/stepper/enums/step.enum.ts | 9 --- .../stepper/helpers/get-step-status.ts | 33 --------- 4 files changed, 110 deletions(-) delete mode 100644 frontend/src/bundles/common/components/stepper/components/step/step.tsx delete mode 100644 frontend/src/bundles/common/components/stepper/enums/enums.ts delete mode 100644 frontend/src/bundles/common/components/stepper/enums/step.enum.ts delete mode 100644 frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts diff --git a/frontend/src/bundles/common/components/stepper/components/step/step.tsx b/frontend/src/bundles/common/components/stepper/components/step/step.tsx deleted file mode 100644 index 497211d60..000000000 --- a/frontend/src/bundles/common/components/stepper/components/step/step.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { type ValueOf } from 'shared'; - -import { Flex, Text } from '~/bundles/common/components/components.js'; - -import { Step as StepEnum } from '../../enums/enums.js'; -import { StepIcon } from '../step-icon/step-icon.js'; - -type Properties = { - step: ValueOf; - stepDescription: string; -}; - -const Step: React.FC = ({ step, stepDescription }) => { - const afterStyles = { - zIndex: -1, - content: '""', - position: 'relative', - top: '24px', - left: '50%', - height: '2px', - backgroundColor: - step === StepEnum.COMPLETED ? 'white' : 'background.600', - order: -1, - }; - - return ( - - - - {stepDescription} - - - ); -}; - -export { Step }; diff --git a/frontend/src/bundles/common/components/stepper/enums/enums.ts b/frontend/src/bundles/common/components/stepper/enums/enums.ts deleted file mode 100644 index ea8c823b6..000000000 --- a/frontend/src/bundles/common/components/stepper/enums/enums.ts +++ /dev/null @@ -1 +0,0 @@ -export { Step } from './step.enum.js'; diff --git a/frontend/src/bundles/common/components/stepper/enums/step.enum.ts b/frontend/src/bundles/common/components/stepper/enums/step.enum.ts deleted file mode 100644 index f8b5c5c61..000000000 --- a/frontend/src/bundles/common/components/stepper/enums/step.enum.ts +++ /dev/null @@ -1,9 +0,0 @@ -const Step = { - COMPLETED: 'completed', - CURRENT: 'current', - DEFAULT: 'default', - LAST_UNCOMPLETED: 'lastUncompleted', - LAST_COMPLETED: 'lastCompleted', -} as const; - -export { Step }; diff --git a/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts b/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts deleted file mode 100644 index 3187d4dd8..000000000 --- a/frontend/src/bundles/common/components/stepper/helpers/get-step-status.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { type ValueOf } from 'shared'; - -import { Step } from '../enums/enums.js'; - -type Properties = { - stepName: string; - index: number; - currentStep: string; - steps: string[]; -}; - -const getStepStatus = ({ - stepName, - index, - currentStep, - steps, -}: Properties): ValueOf => { - if (index < steps.indexOf(currentStep)) { - return Step.COMPLETED; - } - if (currentStep === steps.at(-1)) { - return Step.LAST_COMPLETED; - } - if (index === steps.length - 1) { - return Step.LAST_UNCOMPLETED; - } - if (currentStep === stepName) { - return Step.CURRENT; - } - return Step.DEFAULT; -}; - -export { getStepStatus }; From 9ac94dbfabf6930bf99116e8a21179813df051af Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 2 Sep 2024 23:09:26 -0500 Subject: [PATCH 23/58] OV-61: - get step icon by step name --- .../stepper/components/components.ts | 1 - .../components/step-icon/step-icon.tsx | 55 +++++++------------ 2 files changed, 21 insertions(+), 35 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/components/components.ts b/frontend/src/bundles/common/components/stepper/components/components.ts index 43e038a10..3632e879f 100644 --- a/frontend/src/bundles/common/components/stepper/components/components.ts +++ b/frontend/src/bundles/common/components/stepper/components/components.ts @@ -1,2 +1 @@ -export { Step } from './step/step.js'; export { StepIcon } from './step-icon/step-icon.js'; diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index a99c82458..cc3ee35e6 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -1,56 +1,43 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { type ValueOf } from 'shared'; import { Box, Icon } from '~/bundles/common/components/components.js'; import { IconName } from '~/bundles/common/icons/icons.js'; -import { Step } from '../../enums/enums.js'; - type Properties = { - step: ValueOf; + step: 'complete' | 'active' | 'incomplete'; }; const StepIcon: React.FC = ({ step }) => { - if (step === Step.COMPLETED) { + if (step === 'complete') { return ( - - - - + + ); } - if (step === Step.CURRENT || step === Step.LAST_COMPLETED) { + if (step === 'active') { return ( - - - - + + ); } return ( - - - - + + ); }; From 92569e9456f3d942c5066753e84bbc782af9829e Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 2 Sep 2024 23:11:08 -0500 Subject: [PATCH 24/58] OV-61: + get index helper --- .../components/stepper/helpers/get-active-step-index.ts | 9 +++++++++ .../bundles/common/components/stepper/helpers/helpers.ts | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 frontend/src/bundles/common/components/stepper/helpers/get-active-step-index.ts diff --git a/frontend/src/bundles/common/components/stepper/helpers/get-active-step-index.ts b/frontend/src/bundles/common/components/stepper/helpers/get-active-step-index.ts new file mode 100644 index 000000000..e289733cc --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/helpers/get-active-step-index.ts @@ -0,0 +1,9 @@ +const getActiveStepIndex = ({ + currentStep, + steps, +}: { + currentStep: string; + steps: string[]; +}): number => steps.indexOf(currentStep); + +export { getActiveStepIndex }; diff --git a/frontend/src/bundles/common/components/stepper/helpers/helpers.ts b/frontend/src/bundles/common/components/stepper/helpers/helpers.ts index e55781ddf..4f4f9c57d 100644 --- a/frontend/src/bundles/common/components/stepper/helpers/helpers.ts +++ b/frontend/src/bundles/common/components/stepper/helpers/helpers.ts @@ -1 +1 @@ -export { getStepStatus } from './get-step-status.js'; +export { getActiveStepIndex } from './get-active-step-index.js'; From c1873d3aa1cacd6b962673ae2891ca20402a5ecf Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 2 Sep 2024 23:12:37 -0500 Subject: [PATCH 25/58] OV-61: + progress stepper variant --- .../src/framework/theme/styles/components.styles.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts index 070571443..91ac97c30 100644 --- a/frontend/src/framework/theme/styles/components.styles.ts +++ b/frontend/src/framework/theme/styles/components.styles.ts @@ -139,6 +139,18 @@ const components = { }, }, }, + Progress: { + variants: { + stepper: { + filledTrack: { + bg: colors.white, + }, + track: { + bg: colors.background[600], + }, + }, + }, + }, }; export { components }; From f7764e2eaea31ccd7db73f8e6abd455321c047a7 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 2 Sep 2024 23:13:49 -0500 Subject: [PATCH 26/58] OV-61: + stepper component --- .../bundles/common/components/components.ts | 5 ++ .../common/components/stepper/stepper.tsx | 87 +++++++++++++------ 2 files changed, 67 insertions(+), 25 deletions(-) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index b7998dc3b..6f4244480 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -25,7 +25,12 @@ export { Image, InputGroup, InputRightElement, + Stepper as LibraryStepper, + Progress, SimpleGrid, + Step, + StepIndicator, + StepStatus, Text, VStack, } from '@chakra-ui/react'; diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index e047819a5..818f4cd30 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -1,7 +1,19 @@ -import { IconName } from '../../icons/icons.js'; -import { Box, Flex, Header, Icon, IconButton } from '../components.js'; -import { Step } from './components/components.js'; -import { getStepStatus } from './helpers/helpers.js'; +import { + Box, + Header, + Icon, + IconButton, + LibraryStepper, + Progress, + Step, + StepIndicator, + StepStatus, + Text, +} from '~/bundles/common/components/components.js'; +import { IconName } from '~/bundles/common/icons/icons.js'; + +import { StepIcon } from './components/components.js'; +import { getActiveStepIndex } from './helpers/helpers.js'; type Properties = { steps: string[]; @@ -9,6 +21,9 @@ type Properties = { }; const Stepper: React.FC = ({ steps, currentStep }) => { + const activeStep = getActiveStepIndex({ steps, currentStep }); + const progressPercent = (activeStep / (steps.length - 1)) * 100; + const backButton = ( = ({ steps, currentStep }) => { height: '100%', }} > - - {steps.map((stepName, index) => { - return ( - - ); - })} - + + {steps.map((step, index) => ( + + + } + active={} + incomplete={} + /> + + {step} + + + + ))} + + + ); - return
; }; From f651e7d0335085a0f3feae1dac93b0d84c4cc9eb Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Mon, 2 Sep 2024 23:47:25 -0500 Subject: [PATCH 27/58] OV-61: * stepper chakra icons --- .../components/stepper/components/step-icon/step-icon.tsx | 6 ++---- .../bundles/common/icons/helper/icon-conversion.helper.ts | 4 +++- frontend/src/bundles/common/icons/icon-name.ts | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index cc3ee35e6..b25570d58 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -1,5 +1,3 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - import { Box, Icon } from '~/bundles/common/components/components.js'; import { IconName } from '~/bundles/common/icons/icons.js'; @@ -31,13 +29,13 @@ const StepIcon: React.FC = ({ step }) => { backgroundColor: 'background.900', }} > - + ); } return ( - + ); }; diff --git a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts index d899d1ba6..10be78adb 100644 --- a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts +++ b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts @@ -1,4 +1,5 @@ import { + faCircle, faCircleUser, faHouse, faRightFromBracket, @@ -9,5 +10,6 @@ import { iconConverter } from './icon-converter.helper.js'; const HouseIcon = iconConverter(faHouse); const RightFromBracketIcon = iconConverter(faRightFromBracket); const CircleUserIcon = iconConverter(faCircleUser); +const Circle = iconConverter(faCircle); -export { CircleUserIcon, HouseIcon, RightFromBracketIcon }; +export { Circle, CircleUserIcon, HouseIcon, RightFromBracketIcon }; diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts index 249636627..8355ffa5c 100644 --- a/frontend/src/bundles/common/icons/icon-name.ts +++ b/frontend/src/bundles/common/icons/icon-name.ts @@ -8,7 +8,6 @@ import { ViewOffIcon, } from '@chakra-ui/icons'; import { - faCircle, faCloudArrowUp, faEllipsisVertical, faFileLines, @@ -21,6 +20,7 @@ import { } from '@fortawesome/free-solid-svg-icons'; import { + Circle, CircleUserIcon, HouseIcon, RightFromBracketIcon, @@ -45,7 +45,7 @@ const IconName = { SCRIPT: faFont, TEXT: faT, CHECK_CIRCLE: CheckCircleIcon, - CIRCLE: faCircle, + CIRCLE: Circle, ARROW_BACK: ArrowBackIcon, } as const; From 779c29d07d5c994c5bc400c226e2ce1a9b245a20 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 3 Sep 2024 10:49:19 -0500 Subject: [PATCH 28/58] OV-61: - get active step index helper --- .../components/stepper/helpers/get-active-step-index.ts | 9 --------- .../bundles/common/components/stepper/helpers/helpers.ts | 1 - 2 files changed, 10 deletions(-) delete mode 100644 frontend/src/bundles/common/components/stepper/helpers/get-active-step-index.ts delete mode 100644 frontend/src/bundles/common/components/stepper/helpers/helpers.ts diff --git a/frontend/src/bundles/common/components/stepper/helpers/get-active-step-index.ts b/frontend/src/bundles/common/components/stepper/helpers/get-active-step-index.ts deleted file mode 100644 index e289733cc..000000000 --- a/frontend/src/bundles/common/components/stepper/helpers/get-active-step-index.ts +++ /dev/null @@ -1,9 +0,0 @@ -const getActiveStepIndex = ({ - currentStep, - steps, -}: { - currentStep: string; - steps: string[]; -}): number => steps.indexOf(currentStep); - -export { getActiveStepIndex }; diff --git a/frontend/src/bundles/common/components/stepper/helpers/helpers.ts b/frontend/src/bundles/common/components/stepper/helpers/helpers.ts deleted file mode 100644 index 4f4f9c57d..000000000 --- a/frontend/src/bundles/common/components/stepper/helpers/helpers.ts +++ /dev/null @@ -1 +0,0 @@ -export { getActiveStepIndex } from './get-active-step-index.js'; From 6256fac98c8f357758c94aed9869b1b49cf8b511 Mon Sep 17 00:00:00 2001 From: Wilson Bravo Date: Tue, 3 Sep 2024 10:50:33 -0500 Subject: [PATCH 29/58] OV-61: + step icon enum --- .../components/step-icon/step-icon.tsx | 10 +++++++--- .../common/components/stepper/enums/enums.ts | 1 + .../stepper/enums/step-icon.enum.ts | 7 +++++++ .../common/components/stepper/stepper.tsx | 20 ++++++++++++++----- 4 files changed, 30 insertions(+), 8 deletions(-) create mode 100644 frontend/src/bundles/common/components/stepper/enums/enums.ts create mode 100644 frontend/src/bundles/common/components/stepper/enums/step-icon.enum.ts diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index b25570d58..26ebc8ee9 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -1,12 +1,16 @@ +import { type ValueOf } from 'shared'; + import { Box, Icon } from '~/bundles/common/components/components.js'; import { IconName } from '~/bundles/common/icons/icons.js'; +import { StepIcon as StepIconEnum } from '../../enums/enums.js'; + type Properties = { - step: 'complete' | 'active' | 'incomplete'; + step: ValueOf; }; const StepIcon: React.FC = ({ step }) => { - if (step === 'complete') { + if (step === StepIconEnum.COMPLETE) { return ( @@ -14,7 +18,7 @@ const StepIcon: React.FC = ({ step }) => { ); } - if (step === 'active') { + if (step === StepIconEnum.ACTIVE) { return ( = ({ steps, currentStep }) => { - const activeStep = getActiveStepIndex({ steps, currentStep }); + const activeStep = steps.indexOf(currentStep); const progressPercent = (activeStep / (steps.length - 1)) * 100; const backButton = ( @@ -58,9 +58,19 @@ const Stepper: React.FC = ({ steps, currentStep }) => { width="12px" > } - active={} - incomplete={} + complete={ + + } + active={ + + } + incomplete={ + + } /> Date: Tue, 10 Sep 2024 01:53:42 -0300 Subject: [PATCH 30/58] OV-61: * Use of switch in step-icon --- .../components/step-icon/step-icon.tsx | 63 ++++++++++--------- .../common/components/stepper/stepper.tsx | 33 ++++------ 2 files changed, 44 insertions(+), 52 deletions(-) diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index 26ebc8ee9..4f690440a 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -10,38 +10,41 @@ type Properties = { }; const StepIcon: React.FC = ({ step }) => { - if (step === StepIconEnum.COMPLETE) { - return ( - - - - ); - } + switch (step) { + case StepIconEnum.COMPLETE: { + return ( + + + + ); + } + + case StepIconEnum.ACTIVE: { + return ( + + + + ); + } - if (step === StepIconEnum.ACTIVE) { - return ( - - - - ); + case StepIconEnum.INCOMPLETE: { + return ( + + + + ); + } } - return ( - - - - ); }; export { StepIcon }; diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index cd7a4643b..a0f3c2266 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -21,8 +21,8 @@ type Properties = { }; const Stepper: React.FC = ({ steps, currentStep }) => { - const activeStep = steps.indexOf(currentStep); - const progressPercent = (activeStep / (steps.length - 1)) * 100; + const activeStepIndex = steps.indexOf(currentStep); + const progressPercent = (activeStepIndex / (steps.length - 1)) * 100; const backButton = ( = ({ steps, currentStep }) => { const stepProgressBar = ( - - + + {steps.map((step, index) => ( = ({ steps, currentStep }) => { {step} From 15f0c72d74a789302b2ed4506f20972d6a8f0eec Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Tue, 10 Sep 2024 22:40:05 -0300 Subject: [PATCH 31/58] OV-61: * suggested changes --- .../components/step-icon/step-icon.tsx | 19 +++++------------ .../components/step-icon/styles.module.css | 21 +++++++++++++++++++ .../common/components/stepper/stepper.tsx | 18 +++++----------- .../components/stepper/styles.module.css | 21 +++++++++++++++++++ 4 files changed, 52 insertions(+), 27 deletions(-) create mode 100644 frontend/src/bundles/common/components/stepper/components/step-icon/styles.module.css create mode 100644 frontend/src/bundles/common/components/stepper/styles.module.css diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx index 4f690440a..e94ae6695 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx @@ -1,9 +1,10 @@ import { type ValueOf } from 'shared'; import { Box, Icon } from '~/bundles/common/components/components.js'; +import { StepIcon as StepIconEnum } from '~/bundles/common/components/stepper/enums/enums.js'; import { IconName } from '~/bundles/common/icons/icons.js'; -import { StepIcon as StepIconEnum } from '../../enums/enums.js'; +import styles from './styles.module.css'; type Properties = { step: ValueOf; @@ -13,7 +14,7 @@ const StepIcon: React.FC = ({ step }) => { switch (step) { case StepIconEnum.COMPLETE: { return ( - + ); @@ -21,17 +22,7 @@ const StepIcon: React.FC = ({ step }) => { case StepIconEnum.ACTIVE: { return ( - + ); @@ -39,7 +30,7 @@ const StepIcon: React.FC = ({ step }) => { case StepIconEnum.INCOMPLETE: { return ( - + ); diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/styles.module.css b/frontend/src/bundles/common/components/stepper/components/step-icon/styles.module.css new file mode 100644 index 000000000..ae06572a8 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/components/step-icon/styles.module.css @@ -0,0 +1,21 @@ +.complete { + background-color: var(--chakra-colors-background-900); + display: inline-flex; +} + +.active { + display: inline-flex; + justify-content: center; + align-items: center; + padding: 4px; + color: white; + border: 2px solid; + border-color: var(--chakra-colors-background-600); + border-radius: 50%; + background-color: var(--chakra-colors-background-900); +} + +.incomplete { + color: var(--chakra-colors-background-600); + display: inline-flex; +} diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index a0f3c2266..d2d458615 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -14,6 +14,7 @@ import { IconName } from '~/bundles/common/icons/icons.js'; import { StepIcon } from './components/components.js'; import { StepIcon as StepIconEnum } from './enums/enums.js'; +import styles from './styles.module.css'; type Properties = { steps: string[]; @@ -33,13 +34,8 @@ const Stepper: React.FC = ({ steps, currentStep }) => { ); const stepProgressBar = ( - - + + {steps.map((step, index) => ( @@ -64,7 +60,7 @@ const Stepper: React.FC = ({ steps, currentStep }) => { } /> = ({ steps, currentStep }) => { diff --git a/frontend/src/bundles/common/components/stepper/styles.module.css b/frontend/src/bundles/common/components/stepper/styles.module.css new file mode 100644 index 000000000..f2147db40 --- /dev/null +++ b/frontend/src/bundles/common/components/stepper/styles.module.css @@ -0,0 +1,21 @@ +.stepperWrapper { + position: relative; + max-width: 340px; + min-width: 300px; + height: 100%; +} + +.innerStepper { + position: absolute; + bottom: 20px; + width: 100%; + height: 100%; +} + +.progressBar { + position: absolute; + height: 3px; + width: 100%; + top: 5px; + z-index: -1; +} From e37c09e7ba7652e775be461ff902627170e71749 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Wed, 11 Sep 2024 16:18:56 -0300 Subject: [PATCH 32/58] OV-61: * change step-icon to step-status --- .../components/stepper/components/components.ts | 2 +- .../step-icon.tsx => step-status/step-status.tsx} | 14 +++++++------- .../{step-icon => step-status}/styles.module.css | 0 .../common/components/stepper/enums/enums.ts | 2 +- .../{step-icon.enum.ts => step-status.enum.ts} | 4 ++-- .../bundles/common/components/stepper/stepper.tsx | 12 +++++++----- 6 files changed, 18 insertions(+), 16 deletions(-) rename frontend/src/bundles/common/components/stepper/components/{step-icon/step-icon.tsx => step-status/step-status.tsx} (70%) rename frontend/src/bundles/common/components/stepper/components/{step-icon => step-status}/styles.module.css (100%) rename frontend/src/bundles/common/components/stepper/enums/{step-icon.enum.ts => step-status.enum.ts} (67%) diff --git a/frontend/src/bundles/common/components/stepper/components/components.ts b/frontend/src/bundles/common/components/stepper/components/components.ts index 3632e879f..5d19273be 100644 --- a/frontend/src/bundles/common/components/stepper/components/components.ts +++ b/frontend/src/bundles/common/components/stepper/components/components.ts @@ -1 +1 @@ -export { StepIcon } from './step-icon/step-icon.js'; +export { StepStatus } from './step-status/step-status.js'; diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx b/frontend/src/bundles/common/components/stepper/components/step-status/step-status.tsx similarity index 70% rename from frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx rename to frontend/src/bundles/common/components/stepper/components/step-status/step-status.tsx index e94ae6695..d184dff16 100644 --- a/frontend/src/bundles/common/components/stepper/components/step-icon/step-icon.tsx +++ b/frontend/src/bundles/common/components/stepper/components/step-status/step-status.tsx @@ -1,18 +1,18 @@ import { type ValueOf } from 'shared'; import { Box, Icon } from '~/bundles/common/components/components.js'; -import { StepIcon as StepIconEnum } from '~/bundles/common/components/stepper/enums/enums.js'; +import { StepStatus as StepStatusEnum } from '~/bundles/common/components/stepper/enums/enums.js'; import { IconName } from '~/bundles/common/icons/icons.js'; import styles from './styles.module.css'; type Properties = { - step: ValueOf; + step: ValueOf; }; -const StepIcon: React.FC = ({ step }) => { +const StepStatus: React.FC = ({ step }) => { switch (step) { - case StepIconEnum.COMPLETE: { + case StepStatusEnum.COMPLETE: { return ( @@ -20,7 +20,7 @@ const StepIcon: React.FC = ({ step }) => { ); } - case StepIconEnum.ACTIVE: { + case StepStatusEnum.ACTIVE: { return ( @@ -28,7 +28,7 @@ const StepIcon: React.FC = ({ step }) => { ); } - case StepIconEnum.INCOMPLETE: { + case StepStatusEnum.INCOMPLETE: { return ( @@ -38,4 +38,4 @@ const StepIcon: React.FC = ({ step }) => { } }; -export { StepIcon }; +export { StepStatus }; diff --git a/frontend/src/bundles/common/components/stepper/components/step-icon/styles.module.css b/frontend/src/bundles/common/components/stepper/components/step-status/styles.module.css similarity index 100% rename from frontend/src/bundles/common/components/stepper/components/step-icon/styles.module.css rename to frontend/src/bundles/common/components/stepper/components/step-status/styles.module.css diff --git a/frontend/src/bundles/common/components/stepper/enums/enums.ts b/frontend/src/bundles/common/components/stepper/enums/enums.ts index 94e138d46..16d1af784 100644 --- a/frontend/src/bundles/common/components/stepper/enums/enums.ts +++ b/frontend/src/bundles/common/components/stepper/enums/enums.ts @@ -1 +1 @@ -export { StepIcon } from './step-icon.enum.js'; +export { StepStatus } from './step-status.enum.js'; diff --git a/frontend/src/bundles/common/components/stepper/enums/step-icon.enum.ts b/frontend/src/bundles/common/components/stepper/enums/step-status.enum.ts similarity index 67% rename from frontend/src/bundles/common/components/stepper/enums/step-icon.enum.ts rename to frontend/src/bundles/common/components/stepper/enums/step-status.enum.ts index 03db2b5ba..617c7aba2 100644 --- a/frontend/src/bundles/common/components/stepper/enums/step-icon.enum.ts +++ b/frontend/src/bundles/common/components/stepper/enums/step-status.enum.ts @@ -1,7 +1,7 @@ -const StepIcon = { +const StepStatus = { COMPLETE: 'complete', ACTIVE: 'active', INCOMPLETE: 'incomplete', } as const; -export { StepIcon }; +export { StepStatus }; diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx index d2d458615..675bd5f7d 100644 --- a/frontend/src/bundles/common/components/stepper/stepper.tsx +++ b/frontend/src/bundles/common/components/stepper/stepper.tsx @@ -12,8 +12,8 @@ import { } from '~/bundles/common/components/components.js'; import { IconName } from '~/bundles/common/icons/icons.js'; -import { StepIcon } from './components/components.js'; -import { StepIcon as StepIconEnum } from './enums/enums.js'; +import { StepStatus as StepIcon } from './components/components.js'; +import { StepStatus as StepStatusEnum } from './enums/enums.js'; import styles from './styles.module.css'; type Properties = { @@ -47,15 +47,17 @@ const Stepper: React.FC = ({ steps, currentStep }) => { } active={ - + } incomplete={ } /> From 6f1c54e32a951a330e055365b7b3f562d2c36b39 Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Wed, 18 Sep 2024 22:20:31 -0400 Subject: [PATCH 33/58] OV-347: * initial step to connect script generation with studio --- frontend/src/bundles/chat/helpers/helpers.ts | 1 + .../sanitize-json-string.ts | 0 frontend/src/bundles/chat/store/slice.ts | 40 +++++++++- .../generate-script-placeholder.tsx | 56 ++++++++++++-- .../styles.module.css | 9 +++ .../generate-script-view.tsx | 48 ++++-------- .../video-modal-content/helpers/helpers.ts | 1 - .../video-modal-content.tsx | 7 +- .../components/video-modal/video-modal.tsx | 2 +- .../components/video-menu/video-menu.tsx | 76 ++++++++++++++++++- 10 files changed, 191 insertions(+), 49 deletions(-) create mode 100644 frontend/src/bundles/chat/helpers/helpers.ts rename frontend/src/bundles/{common/components/video-modal/components/video-modal-content => chat}/helpers/sanitize-json-string/sanitize-json-string.ts (100%) diff --git a/frontend/src/bundles/chat/helpers/helpers.ts b/frontend/src/bundles/chat/helpers/helpers.ts new file mode 100644 index 000000000..ccbda568c --- /dev/null +++ b/frontend/src/bundles/chat/helpers/helpers.ts @@ -0,0 +1 @@ +export { sanitizeJsonString } from './sanitize-json-string/sanitize-json-string.js'; diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts b/frontend/src/bundles/chat/helpers/sanitize-json-string/sanitize-json-string.ts similarity index 100% rename from frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts rename to frontend/src/bundles/chat/helpers/sanitize-json-string/sanitize-json-string.ts diff --git a/frontend/src/bundles/chat/store/slice.ts b/frontend/src/bundles/chat/store/slice.ts index 937b925d6..bcf8b9c03 100644 --- a/frontend/src/bundles/chat/store/slice.ts +++ b/frontend/src/bundles/chat/store/slice.ts @@ -1,29 +1,64 @@ import { createSlice } from '@reduxjs/toolkit'; import { MessageSender } from '~/bundles/chat/enums/enums.js'; +import { sanitizeJsonString } from '~/bundles/chat/helpers/helpers.js'; import { type GenerateTextRequestDto, type Message, } from '~/bundles/chat/types/types.js'; import { DataStatus } from '~/bundles/common/enums/enums.js'; -import { type ValueOf } from '~/bundles/common/types/types.js'; +import { + type ValueOf, + type VideoScript, +} from '~/bundles/common/types/types.js'; import { deleteChat, sendMessage } from './actions.js'; type State = { messages: Message[]; + videoScripts: VideoScript[]; dataStatus: ValueOf; }; const initialState: State = { messages: [], + videoScripts: [], dataStatus: DataStatus.IDLE, }; const { reducer, actions, name } = createSlice({ initialState, name: 'chat', - reducers: {}, + reducers: { + generateVideoScript(state) { + const messages = state.messages.filter( + (message) => message.sender === MessageSender.AI, + ); + + if (!messages || messages.length === 0) { + return; + } + + const lastMessage = messages.at(-1); + if (!lastMessage) { + return; + } + + try { + const sanitizedJson = sanitizeJsonString(lastMessage.text); + const videoScripts: VideoScript[] = JSON.parse(sanitizedJson); + + state.videoScripts = videoScripts; + } catch { + state.videoScripts = [ + { + title: 'Scene', + description: lastMessage.text, + }, + ]; + } + }, + }, extraReducers(builder) { builder.addCase(sendMessage.pending, (state) => { state.dataStatus = DataStatus.PENDING; @@ -60,6 +95,7 @@ const { reducer, actions, name } = createSlice({ }); builder.addCase(deleteChat.fulfilled, (state) => { state.messages = []; + state.videoScripts = []; state.dataStatus = DataStatus.FULFILLED; }); builder.addCase(deleteChat.rejected, (state) => { diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx index 7c1c2eb74..594221ced 100644 --- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx +++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx @@ -1,6 +1,19 @@ -import { Box, Loader, VStack } from '~/bundles/common/components/components.js'; +import { + Box, + Button, + Flex, + Loader, + Navigate, + VStack, +} from '~/bundles/common/components/components.js'; import { DataStatus } from '~/bundles/common/enums/data-status.enum.js'; -import { useAppSelector } from '~/bundles/common/hooks/hooks.js'; +import { AppRoute } from '~/bundles/common/enums/enums.js'; +import { + useAppSelector, + useCallback, + useMemo, + useState, +} from '~/bundles/common/hooks/hooks.js'; import { IconName } from '~/bundles/common/icons/icons.js'; import { type VideoScript } from '~/bundles/common/types/types.js'; @@ -10,9 +23,14 @@ import styles from './styles.module.css'; type Properties = { videoScripts: VideoScript[]; + onClose: () => void; }; -const GenerateScriptPlaceholder: React.FC = ({ videoScripts }) => { +const GenerateScriptPlaceholder: React.FC = ({ + videoScripts, + onClose, +}) => { + const [shouldRedirect, setShouldRedirect] = useState(false); const { dataStatus } = useAppSelector(({ chat }) => ({ dataStatus: chat.dataStatus, })); @@ -42,16 +60,42 @@ const GenerateScriptPlaceholder: React.FC = ({ videoScripts }) => { if (dataStatus === DataStatus.PENDING) { return renderLoadingState(); } + if (videoScripts.length === 0) { return renderEmptyState(); } + return renderScripts(); }; + const isScriptAvailable: boolean = useMemo(() => { + return dataStatus !== DataStatus.PENDING && videoScripts.length > 0; + }, [dataStatus, videoScripts]); + + const goToStudio = useCallback(() => { + onClose(); + setShouldRedirect(true); + }, [onClose]); + + if (shouldRedirect) { + return ; + } + return ( - - {getContent()} - + + + {getContent()} + + + {isScriptAvailable && ( +