feature @k8slens/routing

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

packages/routing/.eslintrc.json

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

packages/routing/.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/routing/README.md

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

packages/routing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export { historyInjectable } from "./src/history.injectable";
+export { observableHistoryInjectable } from "./src/observable-history.injectable";
+export { searchParamsOptions } from "./src/search-params";
+export { routingFeature } from "./src/feature";

packages/routing/jest.config.js

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

packages/routing/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@k8slens/routing",
+  "private": false,
+  "version": "1.0.0-alpha.5",
+  "description": "Highly extendable routing 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/feature-core": "^6.5.0-alpha.0",
+    "@k8slens/react-application": "^1.0.0-alpha.0",
+    "@ogre-tools/fp": "^15.3.1",
+    "@ogre-tools/injectable": "^15.3.1",
+    "@ogre-tools/injectable-extension-for-auto-registration": "^15.3.0",
+    "@ogre-tools/injectable-react": "^15.3.0",
+    "history": "^4.10.1",
+    "mobx-observable-history": "^2.0.3",
+    "auto-bind": "^4.0.0",
+    "lodash": "^4.17.21",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17",
+    "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.3",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^13.5.0"
+  }
+}

packages/routing/src/feature.ts

@@ -0,0 +1,19 @@
+import { getFeature } from "@k8slens/feature-core";
+import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
+import { reactApplicationFeature } from "@k8slens/react-application";
+
+export const routingFeature = getFeature({
+  id: "routing",
+
+  register: (di) => {
+    autoRegister({
+      di,
+      targetModule: module,
+      getRequireContexts: () => [
+        require.context("./", true, /\.injectable\.(ts|tsx)$/),
+      ],
+    });
+  },
+
+  dependencies: [reactApplicationFeature],
+});

packages/routing/src/history.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { createBrowserHistory } from "history";
+import type { History } from "history";
+
+export const historyInjectable = getInjectable({
+  id: "history",
+  instantiate: (): History => createBrowserHistory(),
+});

packages/routing/src/observable-history.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { createObservableHistory } from "mobx-observable-history";
+import { searchParamsOptions } from "./search-params";
+import { historyInjectable } from "./history.injectable";
+
+export const observableHistoryInjectable = getInjectable({
+  id: "observable-history",
+
+  instantiate: (di) => {
+    const history = di.inject(historyInjectable);
+    const navigation = createObservableHistory(history, {
+      searchParams: searchParamsOptions,
+    });
+
+    return navigation;
+  },
+});

packages/routing/src/search-params.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { ObservableSearchParamsOptions } from "mobx-observable-history";
+
+export const searchParamsOptions: ObservableSearchParamsOptions = {
+  skipEmpty: true, // skip empty params, e.g. "?x=&y2=" will be "?y=2"
+  joinArrays: false, // join multiple params with same name, e.g. "?x=1&x=2" => "?x=1,2"
+  joinArraysWith: ",", // param values splitter, applicable only with {joinArrays:true}
+};

packages/routing/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/routing/tsconfig.json

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

packages/routing/webpack.config.js

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