chore: extract @k8slens/animate

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

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.scss

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+// Animations
+
+@mixin animate-opacity($enterDuration: var(--enter-duration), $leaveDuration: var(--leave-duration)) {
+  opacity: 0;
+
+  &.enter {
+    transition-property: opacity;
+    transition-duration: $enterDuration;
+    opacity: 1;
+  }
+
+  &.leave {
+    transition-duration: $leaveDuration;
+    transition-timing-function: ease-out;
+    opacity: 0;
+  }
+}
+
+@mixin animate-slide-right($enterDuration: var(--enter-duration), $leaveDuration: var(--leave-duration)) {
+  transform: translateX(100%);
+  will-change: transform;
+
+  &.enter {
+    transform: translateX(0);
+    transition: transform $enterDuration;
+    transition-timing-function: ease-in-out;
+  }
+
+  &.leave {
+    transform: translateX(100%);
+    transition: transform $leaveDuration;
+  }
+}
+
+@mixin animate-opacity-scale($enterDuration: var(--enter-duration), $leaveDuration: var(--leave-duration)) {
+  opacity: 0;
+
+  &.enter {
+    transition: opacity $enterDuration;
+    opacity: 1;
+  }
+
+  &.leave {
+    will-change: opacity, transform;
+    opacity: 0;
+    transform: scale(1.25);
+    transition: transform $leaveDuration ease-in, opacity $leaveDuration ease-out;
+  }
+}
+
+.Animate {
+  &:empty {
+    display: none;
+  }
+
+  // Animation name
+  &.opacity {
+    @include animate-opacity;
+  }
+
+  &.slide-right {
+    @include animate-slide-right;
+  }
+
+  &.opacity-scale {
+    @include animate-opacity-scale;
+  }
+}

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

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./animate.scss";
+import React, { useEffect, useState } from "react";
+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 { defaultEnterDurationForAnimatedInjectable } from "./default-enter-duration.injectable";
+import { defaultLeaveDurationForAnimatedInjectable } from "./default-leave-duration.injectable";
+
+export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;
+
+export interface AnimateProps {
+  name?: AnimateName; // predefined names in css
+  enter?: boolean;
+  onEnter?: () => void;
+  onLeave?: () => void;
+  enterDuration?: number;
+  leaveDuration?: number;
+  children?: StrictReactNode;
+}
+
+interface Dependencies {
+  requestAnimationFrame: RequestAnimationFrame;
+  defaultEnterDuration: number;
+  defaultLeaveDuration: number;
+}
+
+const NonInjectedAnimate = (propsAndDeps: AnimateProps & Dependencies) => {
+  const { requestAnimationFrame, defaultEnterDuration, defaultLeaveDuration, ...props } = propsAndDeps;
+  const {
+    children,
+    enter = true,
+    enterDuration = defaultEnterDuration,
+    leaveDuration = defaultLeaveDuration,
+    name = "opacity",
+    onEnter: onEnterHandler = noop<[]>,
+    onLeave: onLeaveHandler = noop<[]>,
+  } = props;
+
+  const [isVisible, setIsVisible] = useState(false);
+  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,
+    leave: showClassNameLeave,
+  });
+
+  useEffect(() => {
+    if (enter) {
+      setIsVisible(true);
+
+      requestAnimationFrame(() => {
+        setShowClassNameEnter(true);
+        onEnterHandler();
+      });
+
+      return noop;
+    } else if (isVisible) {
+      setShowClassNameLeave(true);
+      onLeaveHandler();
+
+      // Cleanup after duration
+      const handle = setTimeout(() => {
+        setIsVisible(false);
+        setShowClassNameEnter(false);
+        setShowClassNameLeave(false);
+      }, leaveDuration);
+
+      return () => clearTimeout(handle);
+    }
+
+    return noop;
+  }, [enter]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const cssVarsForAnimation = {
+    "--enter-duration": `${enterDuration}ms`,
+    "--leave-duration": `${leaveDuration}ms`,
+  } as React.CSSProperties;
+
+  return React.cloneElement(contentElem, {
+    className: classNames,
+    children: contentElem.props.children,
+    style: {
+      ...contentElem.props.style,
+      ...cssVarsForAnimation,
+    },
+  });
+};
+
+export const Animate = withInjectables<Dependencies, AnimateProps>(NonInjectedAnimate, {
+  getProps: (di, props) => ({
+    ...props,
+    requestAnimationFrame: di.inject(requestAnimationFrameInjectable),
+    defaultEnterDuration: di.inject(defaultEnterDurationForAnimatedInjectable),
+    defaultLeaveDuration: di.inject(defaultLeaveDurationForAnimatedInjectable),
+  }),
+});

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

@@ -0,0 +1,10 @@
+/**
+ * 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";
+
+export const defaultEnterDurationForAnimatedInjectable = getInjectable({
+  id: "default-enter-duration-for-animated",
+  instantiate: () => 100,
+});

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

@@ -0,0 +1,10 @@
+/**
+ * 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";
+
+export const defaultLeaveDurationForAnimatedInjectable = getInjectable({
+  id: "default-leave-duration-for-animated",
+  instantiate: () => 100,
+});

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

@@ -0,0 +1,14 @@
+/**
+ * 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";
+
+export type RequestAnimationFrame = (callback: () => void) => void;
+
+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,
+});

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;