From d8d6a816be855990ac21951872bedd3291f2bec5 Mon Sep 17 00:00:00 2001 From: Gabriel Date: Thu, 20 Apr 2023 11:58:58 +0200 Subject: [PATCH] chore: initial setup, wip Signed-off-by: Gabriel --- .../error-boundary/.eslintrc.json | 6 + .../ui-components/error-boundary/.prettierrc | 1 + packages/ui-components/error-boundary/.swcrc | 19 ++++ .../ui-components/error-boundary/README.md | 20 ++++ .../ui-components/error-boundary/index.ts | 2 + .../error-boundary/jest.config.js | 3 + .../ui-components/error-boundary/package.json | 48 ++++++++ .../error-boundary/src/error-boundary.scss | 34 ++++++ .../error-boundary/src/error-boundary.tsx | 103 ++++++++++++++++++ .../ui-components/error-boundary/src/index.ts | 6 + .../error-boundary/tailwind.config.js | 30 +++++ .../error-boundary/tsconfig.json | 4 + .../error-boundary/webpack.config.js | 1 + 13 files changed, 277 insertions(+) create mode 100644 packages/ui-components/error-boundary/.eslintrc.json create mode 100644 packages/ui-components/error-boundary/.prettierrc create mode 100644 packages/ui-components/error-boundary/.swcrc create mode 100644 packages/ui-components/error-boundary/README.md create mode 100644 packages/ui-components/error-boundary/index.ts create mode 100644 packages/ui-components/error-boundary/jest.config.js create mode 100644 packages/ui-components/error-boundary/package.json create mode 100644 packages/ui-components/error-boundary/src/error-boundary.scss create mode 100644 packages/ui-components/error-boundary/src/error-boundary.tsx create mode 100644 packages/ui-components/error-boundary/src/index.ts create mode 100644 packages/ui-components/error-boundary/tailwind.config.js create mode 100644 packages/ui-components/error-boundary/tsconfig.json create mode 100644 packages/ui-components/error-boundary/webpack.config.js diff --git a/packages/ui-components/error-boundary/.eslintrc.json b/packages/ui-components/error-boundary/.eslintrc.json new file mode 100644 index 0000000000..b15115cb69 --- /dev/null +++ b/packages/ui-components/error-boundary/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extends": "@k8slens/eslint-config/eslint", + "parserOptions": { + "project": "./tsconfig.json" + } +} diff --git a/packages/ui-components/error-boundary/.prettierrc b/packages/ui-components/error-boundary/.prettierrc new file mode 100644 index 0000000000..edd47b479e --- /dev/null +++ b/packages/ui-components/error-boundary/.prettierrc @@ -0,0 +1 @@ +"@k8slens/eslint-config/prettier" diff --git a/packages/ui-components/error-boundary/.swcrc b/packages/ui-components/error-boundary/.swcrc new file mode 100644 index 0000000000..4dd5c11a89 --- /dev/null +++ b/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" + } +} + diff --git a/packages/ui-components/error-boundary/README.md b/packages/ui-components/error-boundary/README.md new file mode 100644 index 0000000000..187facd888 --- /dev/null +++ b/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 diff --git a/packages/ui-components/error-boundary/index.ts b/packages/ui-components/error-boundary/index.ts new file mode 100644 index 0000000000..597cccdd1e --- /dev/null +++ b/packages/ui-components/error-boundary/index.ts @@ -0,0 +1,2 @@ +export * from "./src/error-boundary"; +export * from "./src/withTooltip"; \ No newline at end of file diff --git a/packages/ui-components/error-boundary/jest.config.js b/packages/ui-components/error-boundary/jest.config.js new file mode 100644 index 0000000000..05ec7ecd4d --- /dev/null +++ b/packages/ui-components/error-boundary/jest.config.js @@ -0,0 +1,3 @@ +const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname); + +module.exports = configForReact; diff --git a/packages/ui-components/error-boundary/package.json b/packages/ui-components/error-boundary/package.json new file mode 100644 index 0000000000..bb40344a7c --- /dev/null +++ b/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" + } +} diff --git a/packages/ui-components/error-boundary/src/error-boundary.scss b/packages/ui-components/error-boundary/src/error-boundary.scss new file mode 100644 index 0000000000..b68ab5878f --- /dev/null +++ b/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); + } +} diff --git a/packages/ui-components/error-boundary/src/error-boundary.tsx b/packages/ui-components/error-boundary/src/error-boundary.tsx new file mode 100644 index 0000000000..4d732a3ded --- /dev/null +++ b/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; +} + +interface State { + error?: Error; + errorInfo?: ErrorInfo; +} + +interface Dependencies { + observableHistory: ObservableHistory; +} + +@observer +class NonInjectedErrorBoundary extends React.Component { + 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 ( +
+
+ {"App crash at "} + {location.pathname} +
+

+ + {"To help us improve the product please report bugs on"} + + Lens Forums + + {" or on our"} + + Github + + {" issues tracker."} +

+
+ +

Component stack:

+ {errorInfo?.componentStack} + + +

Error stack:

+ {error.stack} + +
+
+ ); + } + + return this.props.children; + } +} + +export const ErrorBoundary = withInjectables(NonInjectedErrorBoundary, { + getProps: (di, props) => ({ + ...props, + observableHistory: di.inject(observableHistoryInjectable), + }), +}); diff --git a/packages/ui-components/error-boundary/src/index.ts b/packages/ui-components/error-boundary/src/index.ts new file mode 100644 index 0000000000..49746a7b25 --- /dev/null +++ b/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"; diff --git a/packages/ui-components/error-boundary/tailwind.config.js b/packages/ui-components/error-boundary/tailwind.config.js new file mode 100644 index 0000000000..59cf6201b3 --- /dev/null +++ b/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: [], +}; diff --git a/packages/ui-components/error-boundary/tsconfig.json b/packages/ui-components/error-boundary/tsconfig.json new file mode 100644 index 0000000000..9e140d79da --- /dev/null +++ b/packages/ui-components/error-boundary/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@k8slens/typescript/config/base.json", + "include": ["**/*.ts", "**/*.tsx"], +} diff --git a/packages/ui-components/error-boundary/webpack.config.js b/packages/ui-components/error-boundary/webpack.config.js new file mode 100644 index 0000000000..1cda407f5a --- /dev/null +++ b/packages/ui-components/error-boundary/webpack.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/webpack").configForReact;