chore: extract @k8slens/animate

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

packages/core/src/renderer/components/animate/animate.scss

@@ -1,73 +0,0 @@
-/**
- * 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/core/src/renderer/components/animate/animate.tsx

@@ -1,114 +0,0 @@
-/**
- * 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);
-
-  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/core/src/renderer/components/animate/default-enter-duration.injectable.ts

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

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

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

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/animate/request-animation-frame.injectable.ts

@@ -1,16 +0,0 @@
-/**
- * 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;
-
-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/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 "../animate";
+import { Animate } from "@k8slens/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,
     );
   });