mirror of
https://github.com/lensapp/lens.git
synced 2024-09-11 09:25:26 +03:00
chore: extract @k8slens/animate
Signed-off-by: Gabriel <gaccettola@mirantis.com>
This commit is contained in:
parent
ea1f85f224
commit
da1d35d1de
@ -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({
|
||||
|
22
package-lock.json
generated
22
package-lock.json
generated
@ -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": {
|
||||
|
@ -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";
|
@ -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()?
|
||||
|
||||
|
@ -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";
|
||||
|
@ -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);
|
||||
|
@ -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";
|
||||
|
@ -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,
|
||||
);
|
||||
});
|
||||
|
||||
|
6
packages/ui-components/animate/.eslintrc.json
Normal file
6
packages/ui-components/animate/.eslintrc.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "@k8slens/eslint-config/eslint",
|
||||
"parserOptions": {
|
||||
"project": "./tsconfig.json"
|
||||
}
|
||||
}
|
1
packages/ui-components/animate/.prettierrc
Normal file
1
packages/ui-components/animate/.prettierrc
Normal file
@ -0,0 +1 @@
|
||||
"@k8slens/eslint-config/prettier"
|
4
packages/ui-components/animate/CHANGELOG.md
Normal file
4
packages/ui-components/animate/CHANGELOG.md
Normal file
@ -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.
|
19
packages/ui-components/animate/README.md
Normal file
19
packages/ui-components/animate/README.md
Normal file
@ -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
|
12
packages/ui-components/animate/index.ts
Normal file
12
packages/ui-components/animate/index.ts
Normal file
@ -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";
|
3
packages/ui-components/animate/jest.config.js
Normal file
3
packages/ui-components/animate/jest.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname);
|
||||
|
||||
module.exports = configForReact;
|
47
packages/ui-components/animate/package.json
Normal file
47
packages/ui-components/animate/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
@ -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<React.HTMLAttributes<any>>;
|
||||
const classNames = cssNames("Animate", name, contentElem.props.className, {
|
||||
enter: showClassNameEnter,
|
@ -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;
|
@ -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;
|
14
packages/ui-components/animate/src/feature.ts
Normal file
14
packages/ui-components/animate/src/feature.ts
Normal file
@ -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)$/)],
|
||||
});
|
||||
},
|
||||
});
|
@ -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;
|
28
packages/ui-components/animate/tailwind.config.js
Normal file
28
packages/ui-components/animate/tailwind.config.js
Normal file
@ -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: [],
|
||||
};
|
4
packages/ui-components/animate/tsconfig.json
Normal file
4
packages/ui-components/animate/tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "@k8slens/typescript/config/base.json",
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
}
|
1
packages/ui-components/animate/webpack.config.js
Normal file
1
packages/ui-components/animate/webpack.config.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require("@k8slens/webpack").configForReact;
|
Loading…
Reference in New Issue
Block a user