chore: extract button from core for error-boundary

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

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

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

packages/ui-components/button/.prettierrc

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

packages/ui-components/button/.swcrc

@@ -0,0 +1,19 @@
+{
+  "module": {
+    "type": "commonjs"
+  },
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true,
+      "dynamicImport": false
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    },
+    "target": "es2019"
+  }
+}
+

packages/ui-components/button/README.md

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

packages/ui-components/button/index.ts

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

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

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

packages/ui-components/button/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@k8slens/button",
+  "private": false,
+  "version": "1.0.0-alpha.0",
+  "description": "Highly extendable button 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",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "build": "webpack",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/utilities": "^1.0.0-alpha.1",
+    "@k8slens/tooltip": "^1.0.0-alpha.0",
+    "auto-bind": "^4.0.0",
+    "lodash": "^4.17.21",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "6.5.0-alpha.1",
+    "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^12.8.3"
+  }
+}

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

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+
+.Button {
+  position: relative;
+  overflow: hidden; // required for transition effect on hover
+  color: white;
+  font-family: var(--font-main);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  background: var(--buttonDefaultBackground);
+  padding: round(8px * .9) 8px * 1.5;
+  flex-shrink: 0;
+  line-height: 1;
+  font-size: var(--font-size);
+  user-select: none;
+
+  &[href] {
+    display: inline-block;
+  }
+
+  &.primary {
+    background: var(--buttonPrimaryBackground);
+  }
+
+  &.accent {
+    background: var(--buttonAccentBackground);
+  }
+
+  &.light {
+    background-color: var(--buttonLightBackground);
+    color: #505050;
+  }
+
+  &.plain {
+    color: inherit;
+    background: transparent;
+    box-shadow: none;
+
+    &:disabled {
+      background: none;
+      opacity: .5;
+    }
+
+    &.active,
+    &:focus:not(:active) {
+      color: var(--buttonPrimaryBackground);
+      box-shadow: 0 0 0 1px inset;
+    }
+  }
+
+  &.outlined {
+    color: inherit;
+    background: transparent;
+
+    &.active,
+    &:focus {
+      color: inherit;
+      box-shadow: 0 0 0 1px inset;
+    }
+  }
+
+  &.big {
+    font-size: 2.2 * 8px;
+    border-radius: 50px;
+    padding: .75em 1em;
+  }
+
+  &.round {
+    border-radius: 50%;
+    padding: .7em;
+  }
+
+  form:not([novalidate]):invalid &[type=submit]:not(.active),
+  &:disabled {
+    opacity: 50%;
+    pointer-events: none;
+  }
+
+  &.waiting {
+    pointer-events: none;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 0;
+      height: 100%;
+      background: transparentize(white, .85);
+      animation: waiting 1.5s infinite linear;
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus:not(:active) {
+    transition: box-shadow 350ms;
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
+  }
+
+  &:active:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background: transparentize(white, .85);
+    transform-origin: left top;
+    transition: transform 150ms;
+    transform: rotate(0deg);
+    // hackfix: safari prevents clicks on button when click-target is a child element nor button itself
+    pointer-events: none;
+  }
+
+  &:before {
+    content: "";
+    transform: rotate(-90deg);
+  }
+}
+
+@keyframes waiting {
+  0% {
+    left: 0;
+    width: 0;
+  }
+  50% {
+    left: 25%;
+    width: 75%;
+  }
+  75% {
+    left: 100%;
+    width: 0;
+  }
+}

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

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./button.scss";
+import type { ButtonHTMLAttributes } from "react";
+import React from "react";
+import { cssNames } from "@k8slens/utilities";
+import { withTooltip } from "@k8slens/tooltip";
+
+export interface ButtonProps extends ButtonHTMLAttributes<any> {
+  label?: React.ReactNode;
+  waiting?: boolean;
+  primary?: boolean;
+  accent?: boolean;
+  light?: boolean;
+  plain?: boolean;
+  outlined?: boolean;
+  hidden?: boolean;
+  active?: boolean;
+  big?: boolean;
+  round?: boolean;
+  href?: string; // render as hyperlink
+  target?: "_blank"; // in case of using @href
+}
+
+export const Button = withTooltip((props: ButtonProps) => {
+  const {
+    waiting, label, primary, accent, plain, hidden, active, big,
+    round, outlined, light, children, ...btnProps
+  } = props;
+
+  if (hidden) return null;
+
+  btnProps.className = cssNames("Button", btnProps.className, {
+    waiting, primary, accent, plain, active, big, round, outlined, light,
+  });
+
+  // render as link
+  if (props.href) {
+    return (
+      <a {...btnProps}>
+        {label}
+        {children}
+      </a>
+    );
+  }
+
+  // render as button
+  return (
+    <button
+      type="button"
+      {...btnProps}
+      data-waiting={typeof waiting === "boolean" ? String(waiting) : undefined}
+    >
+      {label}
+      {children}
+    </button>
+  );
+});

packages/ui-components/button/src/index.ts

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

packages/ui-components/button/tailwind.config.js

@@ -0,0 +1,30 @@
+/**
+ * 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/button/tsconfig.json

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

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

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