chore: extract @k8slens/animate

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

open-lens/src/renderer/index.ts

@@ -4,6 +4,7 @@ import "@k8slens/error-boundary/styles";
 import "@k8slens/tooltip/styles";
 import "@k8slens/resizing-anchor/styles";
 import "@k8slens/icon/styles";
+import "@k8slens/animate/styles";
 
 import { runInAction } from "mobx";
 import {
@@ -26,6 +27,7 @@ import { keyboardShortcutsFeature } from "@k8slens/keyboard-shortcuts";
 import { reactApplicationFeature } from "@k8slens/react-application";
 import { routingFeature } from "@k8slens/routing";
 import { loggerFeature } from "@k8slens/logger";
+import { animateFeature } from "@k8slens/animate";
 
 const environment = "renderer";
 
@@ -51,6 +53,7 @@ runInAction(() => {
     reactApplicationFeature,
     routingFeature,
     metricsFeature,
+    animateFeature,
   );
 
   autoRegister({

package-lock.json

@@ -3682,6 +3682,10 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@k8slens/animate": {
+      "resolved": "packages/ui-components/animate",
+      "link": true
+    },
     "node_modules/@k8slens/application": {
       "resolved": "packages/technical-features/application/agnostic",
       "link": true
@@ -35521,6 +35525,23 @@
         "react-dom": "^17.0.2"
       }
     },
+    "packages/ui-components/animate": {
+      "name": "@k8slens/animate",
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@k8slens/eslint-config": "^6.5.0",
+        "@k8slens/webpack": "^6.5.0"
+      },
+      "peerDependencies": {
+        "@k8slens/feature-core": "^6.5.0-alpha.0",
+        "@k8slens/utilities": "^1.0.0-alpha.1",
+        "@ogre-tools/injectable": "^16.1.0",
+        "@ogre-tools/injectable-extension-for-auto-registration": "^16.1.0",
+        "@ogre-tools/injectable-react": "^16.1.0",
+        "react": "^17.0.2"
+      }
+    },
     "packages/ui-components/button": {
       "name": "@k8slens/button",
       "version": "1.0.0",
@@ -35589,6 +35610,7 @@
       }
     },
     "packages/ui-components/icon": {
+      "name": "@k8slens/icon",
       "version": "1.0.0-alpha.7",
       "license": "MIT",
       "devDependencies": {

packages/core/src/renderer/components/animate/index.ts

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

packages/core/src/renderer/components/dialog/dialog.tsx

@@ -9,13 +9,13 @@ import React from "react";
 import { createPortal } from "react-dom";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { reaction } from "mobx";
-import { Animate } from "../animate";
+import { Animate } from "@k8slens/animate";
 import type { StrictReactNode } from "@k8slens/utilities";
 import { cssNames, noop, stopPropagation } from "@k8slens/utilities";
 import type { ObservableHistory } from "mobx-observable-history";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { observableHistoryInjectionToken } from "@k8slens/routing";
-import requestAnimationFrameInjectable from "../animate/request-animation-frame.injectable";
+import { requestAnimationFrameInjectable } from "@k8slens/animate";
 
 // todo: refactor + handle animation-end in props.onClose()?
 

packages/core/src/renderer/components/drawer/drawer.tsx

@@ -11,8 +11,8 @@ import { createPortal } from "react-dom";
 import type { StrictReactNode } from "@k8slens/utilities";
 import { cssNames, noop } from "@k8slens/utilities";
 import { Icon } from "@k8slens/icon";
-import type { AnimateName } from "../animate";
+import { Animate } from "@k8slens/animate";
-import { Animate } from "../animate";
+import type { AnimateName } from "@k8slens/animate";
 import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "@k8slens/resizing-anchor";
 import drawerStorageInjectable, { defaultDrawerWidth } from "./drawer-storage/drawer-storage.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";

packages/core/src/renderer/components/menu/menu.tsx

@@ -10,13 +10,12 @@ import React, { Fragment } from "react";
 import { createPortal } from "react-dom";
 import type { StrictReactNode } from "@k8slens/utilities";
 import { cssNames, noop } from "@k8slens/utilities";
-import { Animate } from "../animate";
+import { Animate, requestAnimationFrameInjectable } from "@k8slens/animate";
 import type { IconProps } from "@k8slens/icon";
 import { Icon } from "@k8slens/icon";
 import isEqual from "lodash/isEqual";
-import type { RequestAnimationFrame } from "../animate/request-animation-frame.injectable";
+import type { RequestAnimationFrame } from "@k8slens/animate";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import requestAnimationFrameInjectable from "../animate/request-animation-frame.injectable";
 import autoBindReact from "auto-bind/react";
 
 export const MenuContext = React.createContext<MenuContextValue | null>(null);

packages/core/src/renderer/components/notifications/notifications.tsx

@@ -12,7 +12,7 @@ import { JsonApiErrorParsed } from "@k8slens/json-api";
 import type { Disposer } from "@k8slens/utilities";
 import { cssNames, prevDefault } from "@k8slens/utilities";
 import type { CreateNotificationOptions, Notification, NotificationMessage, NotificationsStore } from "./notifications.store";
-import { Animate } from "../animate";
+import { Animate } from "@k8slens/animate";
 import { Icon } from "@k8slens/icon";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import notificationsStoreInjectable from "./notifications-store.injectable";

packages/core/src/renderer/getDiForUnitTesting.tsx

@@ -9,7 +9,7 @@ import { getOverrideFsWithFakes } from "../test-utils/override-fs-with-fakes";
 import terminalSpawningPoolInjectable from "./components/dock/terminal/terminal-spawning-pool.injectable";
 import hostedClusterIdInjectable from "./cluster-frame-context/hosted-cluster-id.injectable";
 import { runInAction } from "mobx";
-import requestAnimationFrameInjectable from "./components/animate/request-animation-frame.injectable";
+import { requestAnimationFrameInjectable } from "@k8slens/animate";
 import startTopbarStateSyncInjectable from "./components/layout/top-bar/start-state-sync.injectable";
 import watchHistoryStateInjectable from "./remote-helpers/watch-history-state.injectable";
 import legacyOnChannelListenInjectable from "./ipc/legacy-channel-listen.injectable";
@@ -21,6 +21,7 @@ import { registerFeature } from "@k8slens/feature-core";
 import { messagingFeature, testUtils as messagingTestUtils } from "@k8slens/messaging";
 import { routingFeature } from "@k8slens/routing";
 import { loggerFeature } from "@k8slens/logger";
+import { animateFeature } from "@k8slens/animate";
 
 export const getDiForUnitTesting = () => {
   const environment = "renderer";
@@ -38,6 +39,7 @@ export const getDiForUnitTesting = () => {
       messagingTestUtils.messagingFeatureForUnitTesting,
       routingFeature,
       loggerFeature,
+      animateFeature,
     );
   });
 

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

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

packages/ui-components/animate/.prettierrc

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

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

@@ -0,0 +1,19 @@
+# @k8slens/animate
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ 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";
+```
+
+## Extendability

packages/ui-components/animate/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export type { AnimateName, AnimateProps } from "./src/animate";
+export { Animate } from "./src/animate";
+export { defaultEnterDurationForAnimatedInjectable } from "./src/default-enter-duration.injectable";
+export { defaultLeaveDurationForAnimatedInjectable } from "./src/default-leave-duration.injectable";
+export type { RequestAnimationFrame } from "./src/request-animation-frame.injectable";
+export { requestAnimationFrameInjectable } from "./src/request-animation-frame.injectable";
+export { animateFeature } from "./src/feature";

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

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

packages/ui-components/animate/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@k8slens/animate",
+  "private": false,
+  "version": "1.0.0",
+  "description": "Highly extendable animate 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/feature-core": "^6.5.0-alpha.0",
+    "@k8slens/utilities": "^1.0.0-alpha.1",
+    "@ogre-tools/injectable-react": "^16.1.0",
+    "@ogre-tools/injectable": "^16.1.0",
+    "@ogre-tools/injectable-extension-for-auto-registration": "^16.1.0",
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "@k8slens/eslint-config": "^6.5.0",
+    "@k8slens/webpack": "^6.5.0"
+  }
+}

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

@@ -9,9 +9,9 @@ import type { StrictReactNode } from "@k8slens/utilities";
 import { cssNames, noop } from "@k8slens/utilities";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { RequestAnimationFrame } from "./request-animation-frame.injectable";
-import requestAnimationFrameInjectable from "./request-animation-frame.injectable";
+import { requestAnimationFrameInjectable } from "./request-animation-frame.injectable";
-import defaultEnterDurationForAnimatedInjectable from "./default-enter-duration.injectable";
+import { defaultEnterDurationForAnimatedInjectable } from "./default-enter-duration.injectable";
-import defaultLeaveDurationForAnimatedInjectable from "./default-leave-duration.injectable";
+import { defaultLeaveDurationForAnimatedInjectable } from "./default-leave-duration.injectable";
 
 export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;
 
@@ -32,12 +32,7 @@ interface Dependencies {
 }
 
 const NonInjectedAnimate = (propsAndDeps: AnimateProps & Dependencies) => {
-  const {
+  const { requestAnimationFrame, defaultEnterDuration, defaultLeaveDuration, ...props } = propsAndDeps;
-    requestAnimationFrame,
-    defaultEnterDuration,
-    defaultLeaveDuration,
-    ...props
-  } = propsAndDeps;
   const {
     children,
     enter = true,
@@ -52,6 +47,7 @@ const NonInjectedAnimate = (propsAndDeps: AnimateProps & Dependencies) => {
   const [showClassNameEnter, setShowClassNameEnter] = useState(false);
   const [showClassNameLeave, setShowClassNameLeave] = useState(false);
 
+  // eslint-disable-next-line xss/no-mixed-html
   const contentElem = React.Children.only(children) as React.ReactElement<React.HTMLAttributes<any>>;
   const classNames = cssNames("Animate", name, contentElem.props.className, {
     enter: showClassNameEnter,

packages/ui-components/animate/src/default-enter-duration.injectable.ts

@@ -4,9 +4,7 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 
-const defaultEnterDurationForAnimatedInjectable = getInjectable({
+export const defaultEnterDurationForAnimatedInjectable = getInjectable({
   id: "default-enter-duration-for-animated",
   instantiate: () => 100,
 });
-
-export default defaultEnterDurationForAnimatedInjectable;

packages/ui-components/animate/src/default-leave-duration.injectable.ts

@@ -4,9 +4,7 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 
-const defaultLeaveDurationForAnimatedInjectable = getInjectable({
+export const defaultLeaveDurationForAnimatedInjectable = getInjectable({
   id: "default-leave-duration-for-animated",
   instantiate: () => 100,
 });
-
-export default defaultLeaveDurationForAnimatedInjectable;

packages/ui-components/animate/src/feature.ts

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

packages/ui-components/animate/src/request-animation-frame.injectable.ts

@@ -6,11 +6,9 @@ import { getInjectable } from "@ogre-tools/injectable";
 
 export type RequestAnimationFrame = (callback: () => void) => void;
 
-const requestAnimationFrameInjectable = getInjectable({
+export const requestAnimationFrameInjectable = getInjectable({
   id: "request-animation-frame",
   // NOTE: this cannot be simplified to just `=> requestAnimationFrame` else an Illegal Invocation error will be thrown
   instantiate: (): RequestAnimationFrame => (callback) => requestAnimationFrame(callback),
   causesSideEffects: true,
 });
-
-export default requestAnimationFrameInjectable;

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

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

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

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