Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace

packages/app/components/ui/stepper/Stepper.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Color, COLOR_GREEN } from 'app/components/ui';
+
+import styles from './stepper.scss';
+
+export default function Stepper({
+  totalSteps,
+  activeStep,
+  color = COLOR_GREEN,
+}: {
+  totalSteps: number;
+  activeStep: number;
+  color?: Color;
+}) {
+  return (
+    <div className={classNames(styles.steps, styles[`${color}Steps`])}>
+      {new Array(totalSteps).fill(0).map((_, step) => (
+        <div
+          className={classNames(styles.step, {
+            [styles.activeStep]: step <= activeStep,
+          })}
+          key={step}
+        />
+      ))}
+    </div>
+  );
+}

packages/app/components/ui/stepper/index.ts

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

packages/app/components/ui/stepper/stepper.scss

@@ -0,0 +1,82 @@
+@import '~app/components/ui/colors.scss';
+
+.steps {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.step {
+  position: relative;
+  text-align: right;
+  width: 100%;
+
+  height: 4px;
+  background: #d8d5ce;
+
+  &:first-child {
+    width: 12px;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+
+    position: absolute;
+    height: 4px;
+    left: 0;
+    right: 100%;
+    top: 50%;
+    margin-top: -2px;
+
+    background: #aaa;
+    transition: 0.4s ease 0.1s;
+  }
+
+  &:after {
+    content: '';
+    display: inline-block;
+    position: relative;
+    top: -7px;
+    z-index: 1;
+
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    box-sizing: border-box;
+
+    background: #aaa;
+    border: 2px solid #aaa;
+    transition: background 0.4s ease,
+      border-color 0.4s cubic-bezier(0.19, 1, 0.22, 1); // easeOutExpo
+  }
+}
+
+.activeStep {
+  &:before {
+    right: 0;
+    transition-delay: unset;
+  }
+
+  &:after {
+    transition-delay: 0.3s;
+  }
+}
+
+.greenSteps {
+  .activeStep {
+    &:after {
+      background: $green;
+      border-color: darker($green);
+    }
+  }
+}
+
+.violetSteps {
+  .activeStep {
+    &:after {
+      background: $violet;
+      border-color: darker($violet);
+    }
+  }
+}