chore: extract spinner

Signed-off-by: Gabriel <gaccettola@mirantis.com>

packages/core/package.json

@@ -237,6 +237,7 @@
     "@k8slens/routing": "^1.0.0-alpha.5",
     "@k8slens/run-many": "^1.0.0-alpha.1",
     "@k8slens/spinner": "^1.0.0",
+    "@k8slens/stepper": "^1.0.0",
     "@k8slens/startable-stoppable": "^1.0.0-alpha.1",
     "@k8slens/tooltip": "^1.0.0-alpha.5",
     "@k8slens/utilities": "^1.0.0-alpha.1",

packages/core/src/extensions/renderer-api/components.ts

@@ -93,7 +93,7 @@ export const Notifications = {
 };
 
 export * from "@k8slens/spinner";
-export * from "../../renderer/components/stepper";
+export * from "@k8slens/stepper";
 export * from "../../renderer/components/wizard";
 export * from "../../renderer/components/workloads-pods/pod-details-list";
 export * from "../../renderer/components/namespaces/namespace-select";

packages/core/src/renderer/components/stepper/index.ts

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-export * from "./stepper";

packages/core/src/renderer/components/stepper/stepper.scss

@@ -1,58 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-
-.Stepper {
-  --stepper-color: var(--contentColor);
-  --stepper-color-text: var(--textColorPrimary);
-  --stepper-color-active: var(--color-primary);
-  --stepper-color-point: var(--stepper-color);
-
-  $pointSize: $unit * 2.5;
-  font-size: $font-size-small;
-
-  .step {
-    position: relative;
-    text-align: center;
-    &.active, &.done {
-      .point {
-        color: var(--textColorAccent);
-        background: var(--stepper-color-active);
-      }
-    }
-    &.active {
-      .step-title {
-        color: var(--textColorAccent);
-      }
-    }
-    &.done > .line {
-      background: var(--stepper-color-active);
-    }
-    .step-title {
-      font-size: 120%
-    }
-  }
-
-  .point {
-    position: relative;
-    display: block;
-    margin: auto;
-    width: $pointSize;
-    height: $pointSize;
-    line-height: $pointSize;
-    background: var(--stepper-color-point);
-    color: var(--stepper-color-text);
-    font-size: $font-size-small;
-    border-radius: 50%;
-  }
-
-  .line {
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    top: $pointSize * 0.5;
-    background: var(--stepper-color-point);
-  }
-}

packages/core/src/renderer/components/stepper/stepper.tsx

@@ -1,48 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import "./stepper.scss";
-import React from "react";
-import { cssNames } from "@k8slens/utilities";
-
-export interface StepperProps extends React.HTMLProps<any> {
-  step: number;
-  steps: Step[];
-}
-
-interface Step {
-  title?: string;
-}
-
-export class Stepper extends React.Component<StepperProps, {}> {
-  render() {
-    const { className, steps, ...props } = this.props;
-    const stepsCount = steps.length;
-    let { step } = this.props;
-
-    step = Math.min(Math.max(1, step), stepsCount);
-
-    return (
-      <div {...props} className={cssNames("Stepper flex auto", className)}>
-        {steps.map(({ title }, i) => {
-          const stepNumber = i + 1;
-          const isLast = i === stepsCount - 1;
-          const stepClass = {
-            done: stepNumber < step,
-            active: stepNumber === step,
-          };
-
-          return (
-            <div key={i} className={cssNames("box step", stepClass)}>
-              {!isLast ? <span className="line"/> : null}
-              <div className="point">{stepNumber}</div>
-              <span className="step-title">{title}</span>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}

packages/core/src/renderer/components/wizard/wizard.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import type { StrictReactNode } from "@k8slens/utilities";
 import { cssNames, prevDefault } from "@k8slens/utilities";
 import { Button } from "@k8slens/button";
-import { Stepper } from "../stepper";
+import { Stepper } from "@k8slens/stepper";
 import { SubTitle } from "../layout/sub-title";
 import { Spinner } from "@k8slens/spinner";
 import { debounce } from "lodash";