chore: initial setup, wip

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

packages/ui-components/error-boundary/.eslintrc.json

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

packages/ui-components/error-boundary/.prettierrc

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

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

@@ -0,0 +1,20 @@
+# @k8slens/error-boundary
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/error-boundary
+```
+
+```typescript
+import { Tooltip, TooltipPosition } from "@k8slens/error-boundary";
+import { withTooltip } from "@k8slens/error-boundary";
+
+import type { TooltipProps } from "@k8slens/error-boundary";
+import type { TooltipDecoratorProps } from "@k8slens/error-boundary";
+
+```
+
+## Extendability

packages/ui-components/error-boundary/index.ts

@@ -0,0 +1,2 @@
+export * from "./src/error-boundary";
+export * from "./src/withTooltip";

packages/ui-components/error-boundary/jest.config.js

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

packages/ui-components/error-boundary/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@k8slens/error-boundary",
+  "private": false,
+  "version": "1.0.0-alpha.0",
+  "description": "Highly extendable error-boundary 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",
+    "test:unit": "jest --coverage --runInBand",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/utilities": "^1.0.0-alpha.1",
+    "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/error-boundary/src/error-boundary.scss

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.ErrorBoundary {
+  --flex-gap: #{$padding * 2};
+
+  padding: var(--flex-gap);
+  word-break: break-all;
+
+  .wrapper {
+    display: grid;
+    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
+    column-gap: 12px;
+    row-gap: 12px;
+
+    @media screen and (max-width: 900px) {
+      grid-template-columns: auto;
+    }
+  }
+
+  code {
+    max-height: none;
+    border: 5px solid var(--borderFaintColor);
+    white-space: pre-wrap;
+    background: var(--contentColor);
+    color: var(--textColorSecondary);
+  }
+
+  a {
+    color: var(--colorInfo);
+  }
+}

packages/ui-components/error-boundary/src/error-boundary.tsx

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./error-boundary.scss";
+
+import type { ErrorInfo } from "react";
+import React from "react";
+import { observer } from "mobx-react";
+import { Button } from "../button";
+import { issuesTrackerUrl, forumsUrl } from "../../../common/vars";
+import type { SingleOrMany } from "@k8slens/utilities";
+import type { ObservableHistory } from "mobx-observable-history";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import observableHistoryInjectable from "../../navigation/observable-history.injectable";
+
+export interface ErrorBoundaryProps {
+  children?: SingleOrMany<React.ReactNode>;
+}
+
+interface State {
+  error?: Error;
+  errorInfo?: ErrorInfo;
+}
+
+interface Dependencies {
+  observableHistory: ObservableHistory<unknown>;
+}
+
+@observer
+class NonInjectedErrorBoundary extends React.Component<ErrorBoundaryProps & Dependencies, State> {
+  public state: State = {};
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ error, errorInfo });
+  }
+
+  back = () => {
+    this.setState({ error: undefined, errorInfo: undefined });
+    this.props.observableHistory.goBack();
+  };
+
+  render() {
+    const { error, errorInfo } = this.state;
+
+    if (error) {
+      return (
+        <div className="ErrorBoundary flex column gaps">
+          <h5>
+            {"App crash at "}
+            <span className="contrast">{location.pathname}</span>
+          </h5>
+          <p>
+
+            {"To help us improve the product please report bugs on"}
+            <a
+              href={forumsUrl}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Lens Forums
+            </a>
+            {" or on our"}
+            <a
+              href={issuesTrackerUrl}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Github
+            </a>
+            {" issues tracker."}
+          </p>
+          <div className="wrapper">
+            <code className="block">
+              <p className="contrast">Component stack:</p>
+              {errorInfo?.componentStack}
+            </code>
+            <code className="block">
+              <p className="contrast">Error stack:</p>
+              {error.stack}
+            </code>
+          </div>
+          <Button
+            className="box self-flex-start"
+            primary
+            label="Back"
+            onClick={this.back}
+          />
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export const ErrorBoundary = withInjectables<Dependencies, ErrorBoundaryProps>(NonInjectedErrorBoundary, {
+  getProps: (di, props) => ({
+    ...props,
+    observableHistory: di.inject(observableHistoryInjectable),
+  }),
+});

packages/ui-components/error-boundary/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 "./error-boundary";

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

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

packages/ui-components/error-boundary/webpack.config.js

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