chore: extract spinner

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

packages/ui-components/stepper/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/ui-components/stepper/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

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.

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

packages/ui-components/stepper/index.ts

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

packages/ui-components/stepper/jest.config.js

@@ -0,0 +1,3 @@
+const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname);
+
+module.exports = configForReact;

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"
+  }
+}

packages/ui-components/stepper/src/stepper.scss

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * 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);
+  --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/ui-components/stepper/src/stepper.tsx

@@ -0,0 +1,48 @@
+/**
+ * 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/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: [],
+};

packages/ui-components/stepper/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+}

packages/ui-components/stepper/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;