chore: Extract @k8slens/spinner

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

packages/ui-components/animate/README.md

@@ -9,11 +9,11 @@ $ npm install @k8slens/animate
 ```
 
 ```typescript
-export type { AnimateName, AnimateProps } from "@k8slens/button";
-export type { Animate } from "@k8slens/button";
-export { defaultEnterDurationForAnimatedInjectable } from "@k8slens/button";
-export { defaultLeaveDurationForAnimatedInjectable } from "@k8slens/button";
-export { requestAnimationFrameInjectable } from "@k8slens/button";
+import { animateFeature } from "@k8slens/animate";
+import { animateFeature, requestAnimationFrameInjectable } from "@k8slens/animate";
+import { Animate } from "@k8slens/animate";
+import type { AnimateName } from "@k8slens/animate";
+import type { RequestAnimationFrame } from "@k8slens/animate";
 ```
 
 ## Extendability

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

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

packages/ui-components/spinner/.prettierrc

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

packages/ui-components/spinner/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/spinner/README.md

@@ -0,0 +1,15 @@
+# @k8slens/spinner
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/spinner
+```
+
+```typescript
+import { Spinner } from "@k8slens/spinner";
+```
+
+## Extendability

packages/ui-components/spinner/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 { SpinnerProps } from "./src/spinner";
+export { Spinner } from "./src/spinner";

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

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

packages/ui-components/spinner/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@k8slens/spinner",
+  "private": false,
+  "version": "1.0.0",
+  "description": "Highly extendable spinner 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/spinner/src/spinner.scss

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+
+.Spinner {
+  --spinner-size: 24px;
+  --spinner-border: calc(var(--spinner-size) / 6);
+
+  $duration: 1s;
+  $rotateAnimation: rotate $duration linear infinite;
+  $colorAnimation: colors $duration*4 ease-in-out infinite;
+
+  @mixin spinner-color($color) {
+    border-color: transparent $color;
+  }
+
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  border: var(--spinner-border) solid transparent;
+  border-radius: 50%;
+  display: inline-block;
+
+  &:not(.singleColor) {
+    animation: $rotateAnimation, $colorAnimation;
+  }
+
+  &.singleColor {
+    @include spinner-color(var(--textColorPrimary));
+    animation: $rotateAnimation;
+  }
+
+  &.center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: calc(var(--spinner-size) / -2);
+    margin-top: calc(var(--spinner-size) / -2);
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes colors {
+    0% {
+      @include spinner-color(#4285F4);
+    }
+    25% {
+      @include spinner-color(#DE3E35);
+    }
+    50% {
+      @include spinner-color(#F7C223);
+    }
+    75% {
+      @include spinner-color(#1B9A59);
+    }
+    100% {
+      @include spinner-color(#4285F4);
+    }
+  }
+}

packages/ui-components/spinner/src/spinner.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./spinner.scss";
+
+import React from "react";
+import { cssNames } from "@k8slens/utilities";
+
+export interface SpinnerProps extends React.HTMLProps<any> {
+  singleColor?: boolean;
+  center?: boolean;
+}
+
+export class Spinner extends React.Component<SpinnerProps, {}> {
+  static defaultProps = {
+    singleColor: true,
+    center: false,
+  };
+
+  render() {
+    const { center, singleColor, className, ...props } = this.props;
+    const classNames = cssNames("Spinner", className, { singleColor, center });
+
+    return <div {...props} className={classNames} />;
+  }
+}

packages/ui-components/spinner/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/spinner/tsconfig.json

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

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

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