From da1d35d1ded7531477b4e619b657ddb7f9f3a9f9 Mon Sep 17 00:00:00 2001 From: Gabriel Date: Tue, 30 May 2023 16:32:57 +0200 Subject: [PATCH] chore: extract @k8slens/animate Signed-off-by: Gabriel --- open-lens/src/renderer/index.ts | 3 ++ package-lock.json | 22 +++++++++ .../src/renderer/components/animate/index.ts | 6 --- .../src/renderer/components/dialog/dialog.tsx | 4 +- .../src/renderer/components/drawer/drawer.tsx | 4 +- .../src/renderer/components/menu/menu.tsx | 5 +- .../notifications/notifications.tsx | 2 +- .../core/src/renderer/getDiForUnitTesting.tsx | 4 +- packages/ui-components/animate/.eslintrc.json | 6 +++ packages/ui-components/animate/.prettierrc | 1 + packages/ui-components/animate/CHANGELOG.md | 4 ++ packages/ui-components/animate/README.md | 19 ++++++++ packages/ui-components/animate/index.ts | 12 +++++ packages/ui-components/animate/jest.config.js | 3 ++ packages/ui-components/animate/package.json | 47 +++++++++++++++++++ .../animate/src}/animate.scss | 0 .../animate/src}/animate.tsx | 14 ++---- .../src}/default-enter-duration.injectable.ts | 4 +- .../src}/default-leave-duration.injectable.ts | 4 +- packages/ui-components/animate/src/feature.ts | 14 ++++++ .../request-animation-frame.injectable.ts | 4 +- .../ui-components/animate/tailwind.config.js | 28 +++++++++++ packages/ui-components/animate/tsconfig.json | 4 ++ .../ui-components/animate/webpack.config.js | 1 + 24 files changed, 182 insertions(+), 33 deletions(-) delete mode 100644 packages/core/src/renderer/components/animate/index.ts create mode 100644 packages/ui-components/animate/.eslintrc.json create mode 100644 packages/ui-components/animate/.prettierrc create mode 100644 packages/ui-components/animate/CHANGELOG.md create mode 100644 packages/ui-components/animate/README.md create mode 100644 packages/ui-components/animate/index.ts create mode 100644 packages/ui-components/animate/jest.config.js create mode 100644 packages/ui-components/animate/package.json rename packages/{core/src/renderer/components/animate => ui-components/animate/src}/animate.scss (100%) rename packages/{core/src/renderer/components/animate => ui-components/animate/src}/animate.tsx (87%) rename packages/{core/src/renderer/components/animate => ui-components/animate/src}/default-enter-duration.injectable.ts (69%) rename packages/{core/src/renderer/components/animate => ui-components/animate/src}/default-leave-duration.injectable.ts (69%) create mode 100644 packages/ui-components/animate/src/feature.ts rename packages/{core/src/renderer/components/animate => ui-components/animate/src}/request-animation-frame.injectable.ts (83%) create mode 100644 packages/ui-components/animate/tailwind.config.js create mode 100644 packages/ui-components/animate/tsconfig.json create mode 100644 packages/ui-components/animate/webpack.config.js diff --git a/open-lens/src/renderer/index.ts b/open-lens/src/renderer/index.ts index 259876e837..9c2c90d6bb 100644 --- a/open-lens/src/renderer/index.ts +++ b/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({ diff --git a/package-lock.json b/package-lock.json index 8f97d0b8f8..95d6bebb81 100644 --- a/package-lock.json +++ b/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": { diff --git a/packages/core/src/renderer/components/animate/index.ts b/packages/core/src/renderer/components/animate/index.ts deleted file mode 100644 index 2057d90df8..0000000000 --- a/packages/core/src/renderer/components/animate/index.ts +++ /dev/null @@ -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"; diff --git a/packages/core/src/renderer/components/dialog/dialog.tsx b/packages/core/src/renderer/components/dialog/dialog.tsx index 25a8700e23..14124f593a 100644 --- a/packages/core/src/renderer/components/dialog/dialog.tsx +++ b/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()? diff --git a/packages/core/src/renderer/components/drawer/drawer.tsx b/packages/core/src/renderer/components/drawer/drawer.tsx index 6a42d1803a..d854b56e5e 100644 --- a/packages/core/src/renderer/components/drawer/drawer.tsx +++ b/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"; diff --git a/packages/core/src/renderer/components/menu/menu.tsx b/packages/core/src/renderer/components/menu/menu.tsx index 213cadf78c..131f0111aa 100644 --- a/packages/core/src/renderer/components/menu/menu.tsx +++ b/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(null); diff --git a/packages/core/src/renderer/components/notifications/notifications.tsx b/packages/core/src/renderer/components/notifications/notifications.tsx index 5a581f812e..343068b25e 100644 --- a/packages/core/src/renderer/components/notifications/notifications.tsx +++ b/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"; diff --git a/packages/core/src/renderer/getDiForUnitTesting.tsx b/packages/core/src/renderer/getDiForUnitTesting.tsx index 1a1023a30c..26437c1047 100644 --- a/packages/core/src/renderer/getDiForUnitTesting.tsx +++ b/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, ); }); diff --git a/packages/ui-components/animate/.eslintrc.json b/packages/ui-components/animate/.eslintrc.json new file mode 100644 index 0000000000..b15115cb69 --- /dev/null +++ b/packages/ui-components/animate/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extends": "@k8slens/eslint-config/eslint", + "parserOptions": { + "project": "./tsconfig.json" + } +} diff --git a/packages/ui-components/animate/.prettierrc b/packages/ui-components/animate/.prettierrc new file mode 100644 index 0000000000..edd47b479e --- /dev/null +++ b/packages/ui-components/animate/.prettierrc @@ -0,0 +1 @@ +"@k8slens/eslint-config/prettier" diff --git a/packages/ui-components/animate/CHANGELOG.md b/packages/ui-components/animate/CHANGELOG.md new file mode 100644 index 0000000000..e4d87c4d45 --- /dev/null +++ b/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. diff --git a/packages/ui-components/animate/README.md b/packages/ui-components/animate/README.md new file mode 100644 index 0000000000..8649e2bab5 --- /dev/null +++ b/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 diff --git a/packages/ui-components/animate/index.ts b/packages/ui-components/animate/index.ts new file mode 100644 index 0000000000..85d6dd3fec --- /dev/null +++ b/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"; diff --git a/packages/ui-components/animate/jest.config.js b/packages/ui-components/animate/jest.config.js new file mode 100644 index 0000000000..05ec7ecd4d --- /dev/null +++ b/packages/ui-components/animate/jest.config.js @@ -0,0 +1,3 @@ +const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname); + +module.exports = configForReact; diff --git a/packages/ui-components/animate/package.json b/packages/ui-components/animate/package.json new file mode 100644 index 0000000000..edf020bd6d --- /dev/null +++ b/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" + } +} diff --git a/packages/core/src/renderer/components/animate/animate.scss b/packages/ui-components/animate/src/animate.scss similarity index 100% rename from packages/core/src/renderer/components/animate/animate.scss rename to packages/ui-components/animate/src/animate.scss diff --git a/packages/core/src/renderer/components/animate/animate.tsx b/packages/ui-components/animate/src/animate.tsx similarity index 87% rename from packages/core/src/renderer/components/animate/animate.tsx rename to packages/ui-components/animate/src/animate.tsx index b7794d9917..d2f23d9747 100644 --- a/packages/core/src/renderer/components/animate/animate.tsx +++ b/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 defaultEnterDurationForAnimatedInjectable from "./default-enter-duration.injectable"; -import defaultLeaveDurationForAnimatedInjectable from "./default-leave-duration.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; @@ -32,12 +32,7 @@ interface Dependencies { } const NonInjectedAnimate = (propsAndDeps: AnimateProps & Dependencies) => { - const { - requestAnimationFrame, - defaultEnterDuration, - defaultLeaveDuration, - ...props - } = propsAndDeps; + const { 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>; const classNames = cssNames("Animate", name, contentElem.props.className, { enter: showClassNameEnter, diff --git a/packages/core/src/renderer/components/animate/default-enter-duration.injectable.ts b/packages/ui-components/animate/src/default-enter-duration.injectable.ts similarity index 69% rename from packages/core/src/renderer/components/animate/default-enter-duration.injectable.ts rename to packages/ui-components/animate/src/default-enter-duration.injectable.ts index c28f8a3346..e69ba8cb70 100644 --- a/packages/core/src/renderer/components/animate/default-enter-duration.injectable.ts +++ b/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; diff --git a/packages/core/src/renderer/components/animate/default-leave-duration.injectable.ts b/packages/ui-components/animate/src/default-leave-duration.injectable.ts similarity index 69% rename from packages/core/src/renderer/components/animate/default-leave-duration.injectable.ts rename to packages/ui-components/animate/src/default-leave-duration.injectable.ts index 01193151ab..29f56bb8a0 100644 --- a/packages/core/src/renderer/components/animate/default-leave-duration.injectable.ts +++ b/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; diff --git a/packages/ui-components/animate/src/feature.ts b/packages/ui-components/animate/src/feature.ts new file mode 100644 index 0000000000..fec6992dd9 --- /dev/null +++ b/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)$/)], + }); + }, +}); diff --git a/packages/core/src/renderer/components/animate/request-animation-frame.injectable.ts b/packages/ui-components/animate/src/request-animation-frame.injectable.ts similarity index 83% rename from packages/core/src/renderer/components/animate/request-animation-frame.injectable.ts rename to packages/ui-components/animate/src/request-animation-frame.injectable.ts index c04fa3a72e..c9f037eb55 100644 --- a/packages/core/src/renderer/components/animate/request-animation-frame.injectable.ts +++ b/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; diff --git a/packages/ui-components/animate/tailwind.config.js b/packages/ui-components/animate/tailwind.config.js new file mode 100644 index 0000000000..0feb6790ac --- /dev/null +++ b/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: [], +}; diff --git a/packages/ui-components/animate/tsconfig.json b/packages/ui-components/animate/tsconfig.json new file mode 100644 index 0000000000..9e140d79da --- /dev/null +++ b/packages/ui-components/animate/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@k8slens/typescript/config/base.json", + "include": ["**/*.ts", "**/*.tsx"], +} diff --git a/packages/ui-components/animate/webpack.config.js b/packages/ui-components/animate/webpack.config.js new file mode 100644 index 0000000000..1cda407f5a --- /dev/null +++ b/packages/ui-components/animate/webpack.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/webpack").configForReact;