refactor(wizard): migrate to react [EE-2305] (#6957)

app/react/components/Stepper/Stepper.module.css

@@ -0,0 +1,93 @@
+.stepper-wrapper {
+  width: 60%;
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+.step-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1;
+}
+
+.step-wrapper::before {
+  position: absolute;
+  content: '';
+  width: 100%;
+  top: 20px;
+  left: -100%;
+  z-index: 2;
+  border-bottom: 5px solid var(--bg-stepper-item-counter);
+}
+
+.step-wrapper::after {
+  position: absolute;
+  content: '';
+  border-bottom: 5px solid var(--bg-stepper-item-counter);
+  width: 100%;
+  top: 20px;
+  left: 0;
+  z-index: 2;
+}
+
+.step .step-name {
+  position: absolute;
+  bottom: -25px;
+  min-width: max-content;
+}
+
+.step-wrapper .step {
+  position: relative;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--bg-stepper-item-counter);
+  margin-bottom: 6px;
+}
+
+.step-wrapper.active {
+  font-weight: bold;
+  content: none;
+}
+
+.step-wrapper.active .step {
+  background: #337ab7;
+}
+
+.step-wrapper.active .step-counter {
+  color: #fff;
+}
+
+.step-wrapper.completed .step {
+  background-color: #48b400;
+}
+
+.step-wrapper.completed .step-counter {
+  color: #fff;
+}
+
+.step-wrapper.completed::after {
+  position: absolute;
+  content: '';
+  border-bottom: 5px solid #48b400;
+  width: 100%;
+  top: 20px;
+  left: 0;
+  z-index: 3;
+}
+
+.step-wrapper:first-child::before {
+  content: none;
+}
+
+.step-wrapper:last-child::after {
+  content: none;
+}

app/react/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+
+import { Button } from '@/portainer/components/Button';
+
+import { Step, Stepper } from './Stepper';
+
+export default {
+  component: Stepper,
+  title: 'Components/Stepper',
+} as Meta;
+
+interface Args {
+  totalSteps: number;
+}
+
+function Template({ totalSteps = 5 }: Args) {
+  const steps: Step[] = Array.from({ length: totalSteps }).map((_, index) => ({
+    title: `step ${index + 1}`,
+  }));
+
+  const [currentStep, setCurrentStep] = useState(1);
+
+  return (
+    <>
+      <Stepper currentStep={currentStep} steps={steps} />
+      <Button
+        onClick={() => setCurrentStep(currentStep - 1)}
+        disabled={currentStep <= 1}
+      >
+        Previous
+      </Button>
+      <Button
+        onClick={() => setCurrentStep(currentStep + 1)}
+        disabled={currentStep >= steps.length}
+      >
+        Next
+      </Button>
+    </>
+  );
+}
+
+export { Template };

app/react/components/Stepper/Stepper.tsx

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+
+import styles from './Stepper.module.css';
+
+export interface Step {
+  title: string;
+}
+
+interface Props {
+  currentStep: number;
+  steps: Step[];
+}
+
+export function Stepper({ currentStep, steps }: Props) {
+  return (
+    <div className={styles.stepperWrapper}>
+      {steps.map((step, index) => (
+        <div
+          key={step.title}
+          className={clsx(styles.stepWrapper, {
+            [styles.active]: index + 1 === currentStep,
+            [styles.completed]: index + 1 < currentStep,
+          })}
+        >
+          <div className={styles.step}>
+            <div className={styles.stepCounter}>{index + 1}</div>
+            <div className={styles.stepName}>{step.title}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

app/react/components/Stepper/index.ts

@@ -0,0 +1 @@
+export { Stepper } from './Stepper';