From 57f1cf6b0d2912dcb00d83c6abbbf6912567819a Mon Sep 17 00:00:00 2001
From: Gabriel <gaccettola@mirantis.com>
Date: Fri, 2 Jun 2023 13:11:37 +0200
Subject: [PATCH] chore: extract spinner

Signed-off-by: Gabriel <gaccettola@mirantis.com>
---
 open-lens/src/renderer/index.ts               |  1 +
 package-lock.json                             | 21 ++++++++-
 packages/core/package.json                    |  1 +
 .../src/extensions/renderer-api/components.ts |  2 +-
 .../src/renderer/components/wizard/wizard.tsx |  2 +-
 packages/ui-components/stepper/.eslintrc.json |  6 +++
 packages/ui-components/stepper/.prettierrc    |  1 +
 packages/ui-components/stepper/CHANGELOG.md   |  4 ++
 packages/ui-components/stepper/README.md      | 15 +++++++
 .../stepper/index.ts                          |  3 +-
 packages/ui-components/stepper/jest.config.js |  3 ++
 packages/ui-components/stepper/package.json   | 43 +++++++++++++++++++
 .../stepper/src}/stepper.scss                 |  2 +
 .../stepper/src}/stepper.tsx                  |  2 +-
 .../ui-components/stepper/tailwind.config.js  | 28 ++++++++++++
 packages/ui-components/stepper/tsconfig.json  |  4 ++
 .../ui-components/stepper/webpack.config.js   |  1 +
 17 files changed, 134 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui-components/stepper/.eslintrc.json
 create mode 100644 packages/ui-components/stepper/.prettierrc
 create mode 100644 packages/ui-components/stepper/CHANGELOG.md
 create mode 100644 packages/ui-components/stepper/README.md
 rename packages/{core/src/renderer/components => ui-components}/stepper/index.ts (61%)
 create mode 100644 packages/ui-components/stepper/jest.config.js
 create mode 100644 packages/ui-components/stepper/package.json
 rename packages/{core/src/renderer/components/stepper => ui-components/stepper/src}/stepper.scss (95%)
 rename packages/{core/src/renderer/components/stepper => ui-components/stepper/src}/stepper.tsx (95%)
 create mode 100644 packages/ui-components/stepper/tailwind.config.js
 create mode 100644 packages/ui-components/stepper/tsconfig.json
 create mode 100644 packages/ui-components/stepper/webpack.config.js

diff --git a/open-lens/src/renderer/index.ts b/open-lens/src/renderer/index.ts
index 4f7d664520..7c6c977a31 100644
--- a/open-lens/src/renderer/index.ts
+++ b/open-lens/src/renderer/index.ts
@@ -7,6 +7,7 @@ import "@k8slens/icon/styles";
 import "@k8slens/animate/styles";
 import "@k8slens/notifications/styles";
 import "@k8slens/spinner/styles";
+import "@k8slens/stepper/styles";
 
 import { runInAction } from "mobx";
 import {
diff --git a/package-lock.json b/package-lock.json
index 9278ce31fd..c0132835c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3883,6 +3883,10 @@
       "resolved": "packages/utility-features/startable-stoppable",
       "link": true
     },
+    "node_modules/@k8slens/stepper": {
+      "resolved": "packages/ui-components/stepper",
+      "link": true
+    },
     "node_modules/@k8slens/test-utils": {
       "resolved": "packages/utility-features/test-utils",
       "link": true
@@ -34356,7 +34360,9 @@
         "@k8slens/resource-templates": "^1.0.0-alpha.1",
         "@k8slens/routing": "^1.0.0-alpha.5",
         "@k8slens/run-many": "^1.0.0-alpha.1",
+        "@k8slens/spinner": "^1.0.0",
         "@k8slens/startable-stoppable": "^1.0.0-alpha.1",
+        "@k8slens/stepper": "^1.0.0",
         "@k8slens/tooltip": "^1.0.0-alpha.5",
         "@k8slens/utilities": "^1.0.0-alpha.1",
         "@kubernetes/client-node": "^0.18.1",
@@ -35782,7 +35788,20 @@
     },
     "packages/ui-components/spinner": {
       "name": "@k8slens/spinner",
-      "version": "1.0.0-alpha.0",
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@k8slens/eslint-config": "^6.5.0",
+        "@k8slens/webpack": "^6.5.0"
+      },
+      "peerDependencies": {
+        "@k8slens/utilities": "^1.0.0-alpha.1",
+        "react": "^17.0.2"
+      }
+    },
+    "packages/ui-components/stepper": {
+      "name": "@k8slens/stepper",
+      "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
         "@k8slens/eslint-config": "^6.5.0",
diff --git a/packages/core/package.json b/packages/core/package.json
index e830c28b8d..865683a762 100644
--- a/packages/core/package.json
+++ b/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",
diff --git a/packages/core/src/extensions/renderer-api/components.ts b/packages/core/src/extensions/renderer-api/components.ts
index 56f5f7e28e..d5ff85715c 100644
--- a/packages/core/src/extensions/renderer-api/components.ts
+++ b/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";
diff --git a/packages/core/src/renderer/components/wizard/wizard.tsx b/packages/core/src/renderer/components/wizard/wizard.tsx
index da362ee89a..05e1161381 100755
--- a/packages/core/src/renderer/components/wizard/wizard.tsx
+++ b/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";
diff --git a/packages/ui-components/stepper/.eslintrc.json b/packages/ui-components/stepper/.eslintrc.json
new file mode 100644
index 0000000000..b15115cb69
--- /dev/null
+++ b/packages/ui-components/stepper/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}
diff --git a/packages/ui-components/stepper/.prettierrc b/packages/ui-components/stepper/.prettierrc
new file mode 100644
index 0000000000..edd47b479e
--- /dev/null
+++ b/packages/ui-components/stepper/.prettierrc
@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"
diff --git a/packages/ui-components/stepper/CHANGELOG.md b/packages/ui-components/stepper/CHANGELOG.md
new file mode 100644
index 0000000000..e4d87c4d45
--- /dev/null
+++ b/packages/ui-components/stepper/CHANGELOG.md
@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
diff --git a/packages/ui-components/stepper/README.md b/packages/ui-components/stepper/README.md
new file mode 100644
index 0000000000..64cba83f95
--- /dev/null
+++ b/packages/ui-components/stepper/README.md
@@ -0,0 +1,15 @@
+# @k8slens/stepper
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/stepper
+```
+
+```typescript
+
+```
+
+## Extendability
diff --git a/packages/core/src/renderer/components/stepper/index.ts b/packages/ui-components/stepper/index.ts
similarity index 61%
rename from packages/core/src/renderer/components/stepper/index.ts
rename to packages/ui-components/stepper/index.ts
index 63950ed2ca..7b093a21c1 100644
--- a/packages/core/src/renderer/components/stepper/index.ts
+++ b/packages/ui-components/stepper/index.ts
@@ -3,4 +3,5 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export * from "./stepper";
+export type { StepperProps } from "./src/stepper";
+export { Stepper } from "./src/stepper";
diff --git a/packages/ui-components/stepper/jest.config.js b/packages/ui-components/stepper/jest.config.js
new file mode 100644
index 0000000000..05ec7ecd4d
--- /dev/null
+++ b/packages/ui-components/stepper/jest.config.js
@@ -0,0 +1,3 @@
+const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname);
+
+module.exports = configForReact;
diff --git a/packages/ui-components/stepper/package.json b/packages/ui-components/stepper/package.json
new file mode 100644
index 0000000000..3aebcc178c
--- /dev/null
+++ b/packages/ui-components/stepper/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@k8slens/stepper",
+  "private": false,
+  "version": "1.0.0",
+  "description": "Highly extendable stepper in the Lens.",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lensapp/lens.git"
+  },
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./styles": "./dist/index.css"
+  },
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "build": "lens-webpack-build",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/utilities": "^1.0.0-alpha.1",
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "@k8slens/eslint-config": "^6.5.0",
+    "@k8slens/webpack": "^6.5.0"
+  }
+}
diff --git a/packages/core/src/renderer/components/stepper/stepper.scss b/packages/ui-components/stepper/src/stepper.scss
similarity index 95%
rename from packages/core/src/renderer/components/stepper/stepper.scss
rename to packages/ui-components/stepper/src/stepper.scss
index 8d17a7d6a0..5e210b6558 100644
--- a/packages/core/src/renderer/components/stepper/stepper.scss
+++ b/packages/ui-components/stepper/src/stepper.scss
@@ -3,6 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+$unit: 8px;
+$font-size-small: var(--font-size-small);
 
 .Stepper {
   --stepper-color: var(--contentColor);
diff --git a/packages/core/src/renderer/components/stepper/stepper.tsx b/packages/ui-components/stepper/src/stepper.tsx
similarity index 95%
rename from packages/core/src/renderer/components/stepper/stepper.tsx
rename to packages/ui-components/stepper/src/stepper.tsx
index 301d3716f8..8cd100db5a 100644
--- a/packages/core/src/renderer/components/stepper/stepper.tsx
+++ b/packages/ui-components/stepper/src/stepper.tsx
@@ -36,7 +36,7 @@ export class Stepper extends React.Component<StepperProps, {}> {
 
           return (
             <div key={i} className={cssNames("box step", stepClass)}>
-              {!isLast ? <span className="line"/> : null}
+              {!isLast ? <span className="line" /> : null}
               <div className="point">{stepNumber}</div>
               <span className="step-title">{title}</span>
             </div>
diff --git a/packages/ui-components/stepper/tailwind.config.js b/packages/ui-components/stepper/tailwind.config.js
new file mode 100644
index 0000000000..0feb6790ac
--- /dev/null
+++ b/packages/ui-components/stepper/tailwind.config.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+const path = require("path");
+
+module.exports = {
+  content: [path.join(__dirname, "src/**/*.tsx")],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      sans: ["Roboto", "Helvetica", "Arial", "sans-serif"],
+    },
+    extend: {
+      colors: {
+        textAccent: "var(--textColorAccent)",
+        textPrimary: "var(--textColorPrimary)",
+        textTertiary: "var(--textColorTertiary)",
+        textDimmed: "var(--textColorDimmed)",
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/ui-components/stepper/tsconfig.json b/packages/ui-components/stepper/tsconfig.json
new file mode 100644
index 0000000000..9e140d79da
--- /dev/null
+++ b/packages/ui-components/stepper/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+}
diff --git a/packages/ui-components/stepper/webpack.config.js b/packages/ui-components/stepper/webpack.config.js
new file mode 100644
index 0000000000..1cda407f5a
--- /dev/null
+++ b/packages/ui-components/stepper/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;