From bcdb14539ff7ccecafded9c7b22ecba97724796d Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Fri, 25 Oct 2024 11:34:04 +0800
Subject: [PATCH] fix: stepper css build issue

---
 lib/components/Stepper/base.tsx               | 92 +++++++++++++++++++
 .../Stepper/horizontal-stepper/index.tsx      | 10 +-
 lib/components/Stepper/index.ts               |  2 +
 lib/components/Stepper/index.tsx              | 77 ----------------
 .../__tests__/vertical-stepper.test.tsx       |  6 +-
 .../Stepper/vertical-stepper/index.tsx        |  8 +-
 .../stepper-vertical.stories.tsx              | 23 +++--
 7 files changed, 118 insertions(+), 100 deletions(-)
 create mode 100644 lib/components/Stepper/base.tsx
 create mode 100644 lib/components/Stepper/index.ts
 delete mode 100644 lib/components/Stepper/index.tsx

diff --git a/lib/components/Stepper/base.tsx b/lib/components/Stepper/base.tsx
new file mode 100644
index 00000000..d181b400
--- /dev/null
+++ b/lib/components/Stepper/base.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+import clsx from "clsx";
+import "./stepper.scss";
+import {
+    LabelPairedCheckLgFillIcon,
+    LabelPairedCheckMdFillIcon,
+    LabelPairedCheckSmFillIcon,
+} from "@deriv/quill-icons";
+import { Text } from "@components/Typography";
+import { TBasicStepperProps, TTypographySizes } from "./types";
+
+const fillColor = "var(--semantic-color-slate-solid-surface-frame-low)";
+
+const icon = {
+    sm: <LabelPairedCheckSmFillIcon fill={fillColor} />,
+    md: <LabelPairedCheckMdFillIcon fill={fillColor} />,
+    lg: <LabelPairedCheckLgFillIcon fill={fillColor} />,
+};
+
+const IconOk = ({ size }: { size: TTypographySizes }) => <>{icon[size]}</>;
+
+export const BasicStepper = ({
+    currentStep,
+    Icon = IconOk,
+    size = "md",
+    labels = [],
+    lineSize = "md",
+}: TBasicStepperProps) => (
+    <div className="quill-steps-container">
+        {typeof currentStep === "number" &&
+            labels.map((step, index) => {
+                const isActive = index <= currentStep;
+                const isPreviousInactive = index > currentStep + 1;
+
+                return (
+                    index !== 0 && (
+                        <React.Fragment key={step}>
+                            <div className="step">
+                                <div className="step-circle__pointer">
+                                    <div
+                                        className={clsx(
+                                            "step-circle",
+                                            `step-circle__size-${size}`,
+                                            {
+                                                "step-circle--active": isActive,
+                                                "step-circle--inactive":
+                                                    !isActive,
+                                                "step-circle--disabled":
+                                                    isPreviousInactive,
+                                            },
+                                        )}
+                                        data-testid="dt-step-circle"
+                                    >
+                                        {isActive && <Icon size={size} />}
+                                    </div>
+                                    {index < labels.length - 1 && (
+                                        <div
+                                            className={clsx(
+                                                "step-line",
+                                                `step-line--size-${lineSize}`,
+                                                {
+                                                    "step-line--disabled":
+                                                        index > currentStep,
+                                                },
+                                            )}
+                                            data-testid="dt-step-line"
+                                        />
+                                    )}
+                                </div>
+                                <Text
+                                    as="span"
+                                    bold
+                                    size={size}
+                                    className={clsx(
+                                        `step-circle__label-${size}`,
+                                        {
+                                            "step-circle__label--disabled":
+                                                isPreviousInactive,
+                                        },
+                                    )}
+                                >
+                                    {labels[index]}
+                                </Text>
+                            </div>
+                        </React.Fragment>
+                    )
+                );
+            })}
+    </div>
+);
+
+export default BasicStepper;
diff --git a/lib/components/Stepper/horizontal-stepper/index.tsx b/lib/components/Stepper/horizontal-stepper/index.tsx
index eaccc7a7..738f223e 100644
--- a/lib/components/Stepper/horizontal-stepper/index.tsx
+++ b/lib/components/Stepper/horizontal-stepper/index.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
-import { BasicStepper } from '../../index';
-import { TBasicStepperProps } from '../types';
+import React from "react";
+import { BasicStepper } from "../base";
+import { TBasicStepperProps } from "../types";
 
 export const HorizontalStepper = (props: TBasicStepperProps) => {
     return <BasicStepper {...props} orientation="vertical" />;
-};
\ No newline at end of file
+};
+
+export default HorizontalStepper;
diff --git a/lib/components/Stepper/index.ts b/lib/components/Stepper/index.ts
new file mode 100644
index 00000000..bb9e1330
--- /dev/null
+++ b/lib/components/Stepper/index.ts
@@ -0,0 +1,2 @@
+export * from "./horizontal-stepper";
+export * from "./vertical-stepper";
diff --git a/lib/components/Stepper/index.tsx b/lib/components/Stepper/index.tsx
deleted file mode 100644
index 9aa92bcc..00000000
--- a/lib/components/Stepper/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import "./stepper.scss";
-import { LabelPairedCheckLgFillIcon, LabelPairedCheckMdFillIcon, LabelPairedCheckSmFillIcon } from "@deriv/quill-icons";
-import { Text } from "@components/Typography";
-import { TBasicStepperProps, TTypographySizes } from "./types";
-import { VerticalStepper } from './vertical-stepper';
-import { HorizontalStepper } from './horizontal-stepper';
-
-const fillColor = "var(--semantic-color-slate-solid-surface-frame-low)";
-
-const icon = {
-    sm: <LabelPairedCheckSmFillIcon fill={fillColor} />,
-    md: <LabelPairedCheckMdFillIcon fill={fillColor} />,
-    lg: <LabelPairedCheckLgFillIcon fill={fillColor} />,
-};
-
-const IconOk = ({ size }: { size: TTypographySizes }) => (<>{icon[size]}</>);
-
-export const BasicStepper = ({
-    currentStep,
-    Icon = IconOk,
-    size = "md",
-    labels = [],
-    lineSize = "md",
-}: TBasicStepperProps) => (
-    <div className="quill-steps-container">
-        {typeof currentStep === 'number' && labels.map((step, index) => {
-            const isActive = index <= currentStep;
-            const isPreviousInactive = index > currentStep + 1;
-
-            return (
-                index !== 0 && (
-                    <React.Fragment key={step}>
-                        <div className="step">
-                            <div className="step-circle__pointer">
-                                <div
-                                    className={clsx("step-circle", `step-circle__size-${size}`, {
-                                        "step-circle--active": isActive,
-                                        "step-circle--inactive": !isActive,
-                                        "step-circle--disabled": isPreviousInactive,
-                                    })}
-                                    data-testid="dt-step-circle"
-                                >
-                                    {isActive && <Icon size={size} />}
-                                </div>
-                                {index < labels.length - 1 && (
-                                    <div
-                                        className={clsx("step-line", `step-line--size-${lineSize}`, {
-                                            "step-line--disabled": index > currentStep,
-                                        })}
-                                        data-testid="dt-step-line" />
-                                )}
-                            </div>
-                            <Text
-                                as="span"
-                                bold
-                                size={size}
-                                className={clsx(`step-circle__label-${size}`, {
-                                    "step-circle__label--disabled": isPreviousInactive
-                                })}>
-                                {labels[index]}
-                            </Text>
-                        </div>
-                    </React.Fragment>
-                )
-            );
-        })}
-    </div>
-);
-
-export const Stepper = {
-    Vertical: VerticalStepper,
-    Horizontal: HorizontalStepper,
-};
-
-export default Stepper;
diff --git a/lib/components/Stepper/vertical-stepper/__tests__/vertical-stepper.test.tsx b/lib/components/Stepper/vertical-stepper/__tests__/vertical-stepper.test.tsx
index 63cb3824..af6fc830 100644
--- a/lib/components/Stepper/vertical-stepper/__tests__/vertical-stepper.test.tsx
+++ b/lib/components/Stepper/vertical-stepper/__tests__/vertical-stepper.test.tsx
@@ -1,11 +1,10 @@
 import { render, screen } from "@testing-library/react";
-import { BasicStepper } from "../../index";
+import { BasicStepper } from "../../base";
 
 describe("BasicStepper component", () => {
-
     const props = {
         currentStep: 1,
-        labels: ['Default', 'Step 1', 'Step 2'],
+        labels: ["Default", "Step 1", "Step 2"],
     };
 
     it("renders steps correctly", () => {
@@ -36,5 +35,4 @@ describe("BasicStepper component", () => {
         const { container } = render(<BasicStepper {...props} size="sm" />);
         expect(container).toMatchSnapshot();
     });
-
 });
diff --git a/lib/components/Stepper/vertical-stepper/index.tsx b/lib/components/Stepper/vertical-stepper/index.tsx
index 3845f59f..98c217b5 100644
--- a/lib/components/Stepper/vertical-stepper/index.tsx
+++ b/lib/components/Stepper/vertical-stepper/index.tsx
@@ -1,7 +1,9 @@
-import { BasicStepper } from '../index';
-import { TBasicStepperProps } from '../types';
+import { BasicStepper } from "../base";
+import { TBasicStepperProps } from "../types";
 import "../stepper.scss";
 
 export const VerticalStepper = (props: TBasicStepperProps) => {
     return <BasicStepper {...props} orientation="vertical" />;
-};
\ No newline at end of file
+};
+
+export default VerticalStepper;
diff --git a/lib/components/Stepper/vertical-stepper/stepper-vertical.stories.tsx b/lib/components/Stepper/vertical-stepper/stepper-vertical.stories.tsx
index a941d112..74b4779d 100644
--- a/lib/components/Stepper/vertical-stepper/stepper-vertical.stories.tsx
+++ b/lib/components/Stepper/vertical-stepper/stepper-vertical.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import "@deriv-com/quill-tokens/dist/quill.css";
-import Stepper from "../index";
+import VerticalStepper from "./index";
 import { LabelPairedCheckMdFillIcon } from "@deriv/quill-icons";
 
 const icons: Record<string, object | null> = {
@@ -9,9 +9,9 @@ const icons: Record<string, object | null> = {
     none: null,
 };
 
-const meta: Meta<typeof Stepper.Vertical> = {
+const meta: Meta<typeof VerticalStepper> = {
     title: "Components/Stepper/VerticalStepper",
-    component: Stepper.Vertical,
+    component: VerticalStepper,
     argTypes: {
         size: {
             options: ["sm", "md", "lg"],
@@ -41,7 +41,7 @@ const meta: Meta<typeof Stepper.Vertical> = {
             options: ["sm", "md"],
             control: "radio",
             description: "To select the line size of the stepper",
-        }
+        },
     },
     tags: ["autodocs"],
     parameters: {
@@ -55,7 +55,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         currentStep: 0,
-        labels: ['Default', 'Step 1', 'Step 2'],
+        labels: ["Default", "Step 1", "Step 2"],
         size: "md",
         lineSize: "md",
     },
@@ -64,7 +64,7 @@ export const Default: Story = {
 export const OneStepCompleted: Story = {
     args: {
         currentStep: 1,
-        labels: ['Default', 'Step 1', 'Step 2'],
+        labels: ["Default", "Step 1", "Step 2"],
         size: "md",
         lineSize: "md",
     },
@@ -73,7 +73,7 @@ export const OneStepCompleted: Story = {
 export const AllStepsCompleted: Story = {
     args: {
         currentStep: 2,
-        labels: ['Default', 'Step 1', 'Step 2'],
+        labels: ["Default", "Step 1", "Step 2"],
         size: "md",
         lineSize: "md",
     },
@@ -81,18 +81,17 @@ export const AllStepsCompleted: Story = {
 
 const commonProps = {
     currentStep: 1,
-    labels: ['Default', 'Step 1', 'Step 2'],
+    labels: ["Default", "Step 1", "Step 2"],
 };
 
 export const SmallSize: Story = {
-    render: () => (<Stepper.Vertical {...commonProps} size="sm" lineSize="sm" />),
+    render: () => <VerticalStepper {...commonProps} size="sm" lineSize="sm" />,
 };
 
 export const MiddleSize: Story = {
-    render: () => (<Stepper.Vertical {...commonProps} />),
+    render: () => <VerticalStepper {...commonProps} />,
 };
 
 export const LargeSize: Story = {
-    render: () => (<Stepper.Vertical {...commonProps} size="lg" />),
+    render: () => <VerticalStepper {...commonProps} size="lg" />,
 };
-