Merge pull request #70 from BinaryStudioAcademy/task/OV-61-add-stepper

OV-61: Add Stepper

frontend/src/bundles/common/components/components.ts

@@ -13,6 +13,7 @@ export { ProtectedRoute } from './protected-route/protected-route.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export { Select } from './select/select.js';
 export { Sidebar } from './sidebar/sidebar.js';
+export { Stepper } from './stepper/stepper.js';
 export { Textarea } from './textarea/textarea.js';
 export { UploadVideo } from './upload-video/upload-video.js';
 export { VideoModal } from './video-modal/video-modal.js';
@@ -51,6 +52,7 @@ export {
     Input as LibraryInput,
     Link as LibraryLink,
     Modal as LibraryModal,
+    Stepper as LibraryStepper,
     ListItem,
     Menu,
     MenuButton,
@@ -61,6 +63,7 @@ export {
     ModalCloseButton,
     ModalContent,
     ModalOverlay,
+    Progress,
     SimpleGrid,
     Slider,
     SliderFilledTrack,
@@ -69,6 +72,9 @@ export {
     Spacer,
     Spinner,
     Stack,
+    Step,
+    StepIndicator,
+    StepStatus,
     Tab,
     TabList,
     TabPanel,

frontend/src/bundles/common/components/header/header.tsx

@@ -23,7 +23,7 @@ const Header: React.FC<Properties> = ({ left, center, right }) => {
                 </Box>
             )}
             <Box className={styles['center']}>{center}</Box>
-            <Box className={styles['right']}>{right}</Box>
+            {right && <Box className={styles['right']}>{right}</Box>};
         </Flex>
     );
 };

frontend/src/bundles/common/components/stepper/components/components.ts

@@ -0,0 +1 @@
+export { StepStatus } from './step-status/step-status.js';

frontend/src/bundles/common/components/stepper/components/step-status/step-status.tsx

@@ -0,0 +1,41 @@
+import { type ValueOf } from 'shared';
+
+import { Box, Icon } from '~/bundles/common/components/components.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<typeof StepStatusEnum>;
+};
+
+const StepStatus: React.FC<Properties> = ({ step }) => {
+    switch (step) {
+        case StepStatusEnum.COMPLETE: {
+            return (
+                <Box className={styles['complete']}>
+                    <Icon as={IconName.CHECK_CIRCLE} boxSize={3} />
+                </Box>
+            );
+        }
+
+        case StepStatusEnum.ACTIVE: {
+            return (
+                <Box className={styles['active']}>
+                    <Icon as={IconName.CIRCLE} boxSize={3} />
+                </Box>
+            );
+        }
+
+        case StepStatusEnum.INCOMPLETE: {
+            return (
+                <Box className={styles['incomplete']}>
+                    <Icon as={IconName.CIRCLE} boxSize={3} />
+                </Box>
+            );
+        }
+    }
+};
+
+export { StepStatus };

frontend/src/bundles/common/components/stepper/components/step-status/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;
+}

frontend/src/bundles/common/components/stepper/enums/enums.ts

@@ -0,0 +1 @@
+export { StepStatus } from './step-status.enum.js';

frontend/src/bundles/common/components/stepper/enums/step-status.enum.ts

@@ -0,0 +1,7 @@
+const StepStatus = {
+    COMPLETE: 'complete',
+    ACTIVE: 'active',
+    INCOMPLETE: 'incomplete',
+} as const;
+
+export { StepStatus };

frontend/src/bundles/common/components/stepper/stepper.tsx

@@ -0,0 +1,91 @@
+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 { StepStatus as StepIcon } from './components/components.js';
+import { StepStatus as StepStatusEnum } from './enums/enums.js';
+import styles from './styles.module.css';
+
+type Properties = {
+    steps: string[];
+    currentStep: string;
+};
+
+const Stepper: React.FC<Properties> = ({ steps, currentStep }) => {
+    const activeStepIndex = steps.indexOf(currentStep);
+    const progressPercent = (activeStepIndex / (steps.length - 1)) * 100;
+
+    const backButton = (
+        <IconButton
+            variant="ghostIcon"
+            aria-label="back"
+            icon={<Icon as={IconName.ARROW_BACK} boxSize={4} />}
+        />
+    );
+
+    const stepProgressBar = (
+        <Box className={styles['stepperWrapper']}>
+            <Box className={styles['innerStepper']}>
+                <LibraryStepper size="sm" index={activeStepIndex} gap="0">
+                    {steps.map((step, index) => (
+                        <Step key={index}>
+                            <StepIndicator
+                                bg="white"
+                                height="12px"
+                                width="12px"
+                            >
+                                <StepStatus
+                                    complete={
+                                        <StepIcon
+                                            step={StepStatusEnum.COMPLETE}
+                                        />
+                                    }
+                                    active={
+                                        <StepIcon
+                                            step={StepStatusEnum.ACTIVE}
+                                        />
+                                    }
+                                    incomplete={
+                                        <StepIcon
+                                            step={StepStatusEnum.INCOMPLETE}
+                                        />
+                                    }
+                                />
+                                <Text
+                                    variant="body1"
+                                    color={
+                                        index <= activeStepIndex
+                                            ? 'white'
+                                            : 'background.600'
+                                    }
+                                    position="absolute"
+                                    top="20px"
+                                >
+                                    {step}
+                                </Text>
+                            </StepIndicator>
+                        </Step>
+                    ))}
+                </LibraryStepper>
+                <Progress
+                    variant="stepper"
+                    value={progressPercent}
+                    className={styles['progressBar']}
+                />
+            </Box>
+        </Box>
+    );
+    return <Header left={backButton} center={stepProgressBar} />;
+};
+
+export { Stepper };

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

frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts

@@ -1,5 +1,6 @@
 import {
     faBackwardStep,
+    faCircle,
     faCircleUser,
     faCloudArrowDown,
     faCloudArrowUp,
@@ -45,9 +46,11 @@ const VolumeOff = convertIcon(faVolumeOff);
 const Stop = convertIcon(faStop);
 const VideoCamera = convertIcon(faVideoCamera);
 const Image = convertIcon(faImage);
+const Circle = convertIcon(faCircle);
 
 export {
     BackwardStep,
+    Circle,
     CircleUser,
     CloudArrowDown,
     CloudArrowUp,

frontend/src/bundles/common/icons/icon-name.ts

@@ -1,5 +1,6 @@
 import {
     AddIcon,
+    ArrowBackIcon,
     ArrowLeftIcon,
     ArrowRightIcon,
     CheckCircleIcon,
@@ -15,6 +16,7 @@ import {
 import { Logo, LogoText, OpenAi } from './custom-icons/custom-icons.js';
 import {
     BackwardStep,
+    Circle,
     CircleUser,
     CloudArrowDown,
     CloudArrowUp,
@@ -73,6 +75,8 @@ const IconName = {
     WARNING: WarningIcon,
     VIDEO_CAMERA: VideoCamera,
     IMAGE: Image,
+    CIRCLE: Circle,
+    ARROW_BACK: ArrowBackIcon,
 } as const;
 
 export { IconName };

frontend/src/framework/theme/styles/components.styles.ts

@@ -272,6 +272,18 @@ const components = {
             },
         },
     },
+    Progress: {
+        variants: {
+            stepper: {
+                filledTrack: {
+                    bg: colors.white,
+                },
+                track: {
+                    bg: colors.background[600],
+                },
+            },
+        },
+    },
 };
 
 export { components };