chore: extract stepper

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 {

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/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";

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/core/src/renderer/components/stepper/index.ts → 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";

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": "[email protected]"
+  },
+  "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/core/src/renderer/components/stepper/stepper.scss → 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);

packages/core/src/renderer/components/stepper/stepper.tsx → 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>

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;