Upgrade packages and fixed tests.

- Introduce animation component.

Author: novykh

babel.config.js

@@ -2,10 +2,7 @@ module.exports = {
   env: {
     test: {
       presets: ["@babel/preset-env", "@babel/preset-react"],
-      plugins: [
-        "@babel/transform-runtime",
-        ["styled-components", { ssr: false, displayName: false }],
-      ],
+      plugins: ["@babel/transform-runtime", "babel-plugin-styled-components"],
     },
   },
 }

copy-assets.js

@@ -53,6 +53,7 @@ copyFileSync("src/components/tabs/tab.d.ts", "lib/components/tabs/tab.d.ts")
 copyFileSync("src/components/tabs/tabs.d.ts", "lib/components/tabs/tabs.d.ts")
 copyFileSync("src/components/toggle/toggle.d.ts", "lib/components/toggle/toggle.d.ts")
 
+copyFileSync("src/components/animation/index.d.ts", "lib/components/animation/index.d.ts")
 copyFileSync("src/components/collapsible/index.d.ts", "lib/components/collapsible/index.d.ts")
 copyFileSync("src/components/modal/index.d.ts", "lib/components/modal/index.d.ts")
 copyFileSync(

package.json

@@ -7,13 +7,13 @@
     "/lib"
   ],
   "scripts": {
-    "_drop_native": "./node_modules/rimraf/bin.js node_modules/@types/react-native/",
+    "_drop_native": "rimraf node_modules/@types/react-native/",
     "start": "yarn _drop_native && yarn storybook-start",
     "storybook-start": "bash start.sh",
     "testOut": "yarn test --env=jsdom --json --outputFile=.jest-test-results.json",
     "build-storybook": "build-storybook -c .storybook -o public",
     "build": "yarn _drop_native && yarn testOut && build-storybook",
-    "clean": "./node_modules/rimraf/bin.js ./lib",
+    "clean": "rimraf ./lib",
     "ts-bundle": "yarn _drop_native && yarn clean && tsc && tsc -m es6 && node copy-assets && yarn resolveAlias",
     "test": "jest --config ./jest/config.js",
     "cp-cloud": "cp -R ./lib ../cloud-frontend/node_modules/@netdata/netdata-ui/",
@@ -22,7 +22,6 @@
     "to-dashboard": "yarn ts-bundle && yarn cp-dashboard",
     "cp-charts": "cp -R ./lib ../charts/node_modules/@netdata/netdata-ui/",
     "to-charts": "yarn ts-bundle && yarn cp-charts",
-    "prepare": "install-peers && yarn ts-bundle",
     "resolveAlias": "tsconfig-replace-paths -p tsconfig.json -s ./src -o ./lib"
   },
   "keywords": [
@@ -32,25 +31,29 @@
   ],
   "author": "netdata",
   "license": "ISC",
+  "resolutions": {
+    "@storybook/**/@emotion/sheet": "^1",
+    "@storybook/**/@emotion/styled": "^11"
+  },
   "dependencies": {
-    "@elastic/react-search-ui": "^1.15.0",
-    "@elastic/search-ui-site-search-connector": "^1.15.0",
+    "@elastic/react-search-ui": "^1.19.1",
+    "@elastic/search-ui-site-search-connector": "^1.19.1",
     "@prismicio/client": "5.1.1",
     "@styled-system/css": "^5.1.5",
-    "@tanstack/react-table": "^8.5.11",
+    "@tanstack/react-table": "^8.7.9",
     "@tanstack/react-virtual": "3.0.0-beta.29",
-    "axios": "^0.27.2",
+    "axios": "^1.3.4",
     "polished": "^4.2.2",
     "ramda": "^0.28.0",
-    "react-beautiful-dnd": "^13.1.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-filter-box": "^3.4.3",
     "react-portal": "^4.2.2",
     "react-select": "^5.7.0",
     "react-table": "^7.8.0",
     "react-use": "^17.4.0",
-    "react-window": "^1.8.7",
+    "react-window": "^1.8.8",
     "styled-system": "^5.1.5",
-    "throttle-debounce": "3.0.1"
+    "throttle-debounce": "5.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -62,60 +65,53 @@
     "url": "git@github.com:netdata/netdata-ui.git"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/eslint-parser": "^7.18.2",
-    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@netdata/eslint-config-netdata": "^0.1.2",
-    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-centered": "^5.3.21",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-jest": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-jest": "^6.5.16",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addon-storysource": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-storysource": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.2.1",
-    "@types/jest": "^28.1.4",
-    "@types/node": "^18.0.3",
-    "@types/ramda": "^0.28.15",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-portal": "^4.0.4",
-    "@types/styled-components": "^5.1.25",
-    "@types/styled-system": "^5.1.15",
-    "@types/styled-system__css": "^5.0.16",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "babel-loader": "^8.2.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/node": "^18.15.3",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-styled-components": "^2.0.7",
     "cpx": "^1.5.0",
-    "eslint": "^8.19.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint": "^8.36.0",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "html-loader": "^3.1.2",
+    "html-loader": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
     "install-peers-cli": "^2.2.0",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
-    "jest-styled-components": "^7.0.8",
-    "jsdom": "19.0.0",
-    "markdown-loader": "7.0.0",
-    "prettier": "^2.7.1",
-    "rimraf": "^3.0.2",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-styled-components": "^7.1.1",
+    "jsdom": "21.1.1",
+    "markdown-loader": "8.0.0",
+    "prettier": "^2.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "storybook-readme": "^5.0.9",
+    "styled-components": "^5.3.9",
     "svg-sprite-loader": "^6.0.11",
-    "svgo-loader": "^3.0.1",
-    "ts-jest": "^28.0.5",
-    "tsconfig-replace-paths": "^0.0.11",
-    "typescript": "^4.7.4",
+    "svgo-loader": "^4.0.0",
+    "ts-jest": "^29.0.5",
+    "tsconfig-replace-paths": "^0.0.14",
+    "typescript": "^4.9.5",
     "url-loader": "^4.1.1"
   }
 }

src/components/animation/index.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from "react"
+
+export interface AnimationProps {
+  open?: boolean
+  duration?: number
+  persist?: boolean
+  children: ReactNode | (() => ReactNode)
+  [rest: string]: any
+}
+
+declare const Animation: FC<AnimationProps & JSX.IntrinsicElements["div"]>
+
+export { Animation }
+
+export default Animation

src/components/animation/index.js

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react"
+import styled from "styled-components"
+import { Transition } from "react-transition-group"
+import makeAnimations from "./makeAnimations"
+
+const Animation = ({
+  in: isVisible,
+  as,
+  toggle,
+  speed = 200,
+  timing = "",
+  transformOrigin,
+  mount,
+  children,
+  ...rest
+}) => {
+  const animations = useMemo(() => makeAnimations({ toggle, timing, speed, transformOrigin }), [])
+
+  const StyledContainer = useMemo(
+    () =>
+      as &&
+      styled(as)`
+        ${props => props.transitionStyling}
+      `,
+    []
+  )
+
+  return (
+    <Transition in={isVisible} timeout={speed} mountOnEnter={!mount} unmountOnExit={!mount}>
+      {transition => {
+        const transitionStyling = animations[transition]
+
+        if (StyledContainer) {
+          return (
+            <StyledContainer transitionStyling={transitionStyling} {...rest}>
+              {children({ transition, transitionStyling })}
+            </StyledContainer>
+          )
+        }
+
+        return children({ transition, transitionStyling })
+      }}
+    </Transition>
+  )
+}
+
+export default Animation

src/components/animation/index.test.js

@@ -0,0 +1,66 @@
+import React from "react"
+import { render, waitForElementToBeRemoved } from "testUtilities"
+import { config } from "react-transition-group"
+import Animation from "."
+
+beforeAll(() => {
+  config.disabled = false
+})
+
+afterAll(() => {
+  config.disabled = true
+})
+
+it("toggles content", async () => {
+  const { queryByText, rerender } = render(<Animation in>{() => "myContent"}</Animation>)
+  expect(queryByText("myContent")).toBeInTheDocument()
+
+  rerender(<Animation>{() => "myContent"}</Animation>)
+  await waitForElementToBeRemoved(() => queryByText("myContent"))
+
+  rerender(<Animation in>{() => "myContent"}</Animation>)
+  expect(queryByText("myContent")).toBeInTheDocument()
+})
+
+it("Mounts", () => {
+  const { queryByText } = render(<Animation mount>{() => "myContent"}</Animation>)
+  expect(queryByText("myContent")).toBeInTheDocument()
+})
+
+it("provides render props", () => {
+  const spy = jest.fn()
+  let props
+  const { queryByText } = render(
+    <Animation in toggle="width: 200px;">
+      {p => {
+        spy()
+        props = p
+        return "myContent"
+      }}
+    </Animation>
+  )
+
+  expect(queryByText("myContent")).toBeInTheDocument()
+  expect(spy).toBeCalledTimes(1)
+  expect(props.transition).toBe("entered")
+})
+
+it("renders in a wrapper", () => {
+  const spy = jest.fn()
+  const wrapperSpy = jest.fn()
+  const Wrapper = ({ children }) => {
+    wrapperSpy()
+    return children
+  }
+  render(
+    <Animation as={Wrapper} in toggle="width: 200px;">
+      {() => {
+        spy()
+        return "myContent"
+      }}
+    </Animation>
+  )
+
+  expect(spy).toBeCalledTimes(1)
+  expect(wrapperSpy).toBeCalledTimes(1)
+})

src/components/animation/makeAnimations.js

@@ -0,0 +1,12 @@
+import {keyframes, css} from 'styled-components';
+
+export default ({toggle, timing = '', speed = 200, transformOrigin}) => {
+  const makeAnimations = keyframe => css`
+    ${transformOrigin && `transform-origin: ${transformOrigin};`}
+    animation: ${keyframe} ${speed}ms ${timing};
+  `;
+  return {
+    entering: makeAnimations(keyframes`from { ${toggle}  }`),
+    exiting: makeAnimations(keyframes`to { ${toggle}  }`)
+  };
+};

src/components/animation/makeAnimations.test.js

@@ -0,0 +1,28 @@
+import makeAnimations from "./makeAnimations"
+
+const match = (css, value) =>
+  expect(
+    css
+      .filter(e => typeof e === "string")
+      .join("")
+      .trim()
+  ).toBe(value)
+
+it("Creates animation rules based on the transition", () => {
+  const animation = makeAnimations({ toggle: "height: 200px;" })
+  const value = "animation: 200ms ;"
+  match(animation.entering, value)
+  match(animation.exiting, value)
+})
+
+it("Creates animation rules based on the transition", () => {
+  const animation = makeAnimations({
+    toggle: "height: 200px;",
+    timing: "easy-in",
+    speed: 250,
+    transformOrigin: "top",
+  })
+  const value = "transform-origin: top; animation: 250ms easy-in;"
+  match(animation.entering, value)
+  match(animation.exiting, value)
+})