feat: add FLIP animation

.eslintrc

@@ -20,7 +20,7 @@
   },
   "settings": {
     "react": {
-      "version": "16"
+      "version": "17"
     }
   },
   "rules": {
@@ -30,6 +30,6 @@
     "react/tsx-fragments": 0,
     "react/no-unused-prop-types": 0,
     "import/export": 0,
-    "no-unused-vars": 0
+    "no-unused-vars": 0,
   }
 }

.gitignore

@@ -6,3 +6,5 @@ node_modules
 build
 dist
 .idea/
+package-lock.json
+yarn.lock

package.json

@@ -30,56 +30,61 @@
     }
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/helper-builder-react-jsx": "^7.14.5",
+    "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
     "@storybook/addon-actions": "^6.0.21",
     "@storybook/addon-essentials": "^6.0.21",
     "@storybook/addon-links": "^6.0.21",
     "@storybook/react": "^6.0.21",
     "@storybook/storybook-deployer": "^2.8.6",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.2",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^25.1.4",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.161",
-    "@types/node": "^12.12.38",
-    "@types/react": "^16.9.27",
-    "@types/react-dom": "^16.9.7",
+    "@types/node": "^16.7.10",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.3",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.1.0",
+    "babel-preset-react": "^6.24.1",
     "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-config-standard-react": "^11.0.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
-    "husky": "^4.3.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "husky": "^7.0.2",
+    "levenary": "^1.1.1",
     "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-is": "^16.13.1",
-    "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-scripts": "^4.0.3",
+    "typescript": "^4.4.2"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
     "lodash": "^4.17.20",
-    "react-spring": "^8.0.27",
-    "react-use": "^15.3.4",
+    "react-flip-toolkit": "^7.0.13",
+    "react-spring": "^9.2.4",
+    "react-use": "^17.3.1",
     "styled-components": "^5.2.0"
   },
   "jest": {

src/components/index.tsx

@@ -1 +1,5 @@
-export { XNumber } from './xnumber'
+export { XNumber } from './x-number'
+export type { IXNumberProps } from './x-number'
+
+export { XFlipper, XFlipped } from './x-flip'
+export type { IXFlipperProps, IXFlippedProps } from './x-flip'

src/components/x-flip/XFlipped.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react'
+import { Flipped } from 'react-flip-toolkit'
+import { IXFlippedProps } from './interface'
+
+const XFlipped: FC<IXFlippedProps> = (props) => <Flipped {...props} />
+
+export default XFlipped

src/components/x-flip/XFlipper.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react'
+import { Flipper } from 'react-flip-toolkit'
+import { IXFlipperProps } from './interface'
+
+const XFlipper: FC<IXFlipperProps> = (props) => <Flipper {...props} />
+
+export default XFlipper

src/components/x-flip/index.tsx

@@ -0,0 +1,6 @@
+import XFlipper from './XFlipper'
+import XFlipped from './XFlipped'
+
+export type { IXFlipperProps, IXFlippedProps } from './interface'
+
+export { XFlipper, XFlipped }

src/components/x-flip/interface.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Flipper, Flipped } from 'react-flip-toolkit'
+
+type FlipperProps = React.ComponentProps<typeof Flipper>
+
+export interface IXFlipperProps extends FlipperProps {}
+
+type FlippedProps = React.ComponentProps<typeof Flipped>
+
+export interface IXFlippedProps extends FlippedProps {}

src/components/xnumber/index.tsx → src/components/x-number/index.tsx

@@ -1,3 +1,4 @@
 import XNumber from './XNumber'
+export type { IXNumberProps } from './interface'
 
 export { XNumber }

stories/XFlip.stories.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { Story, Meta } from '@storybook/react/types-6-0'
+import { XFlipper, XFlipped } from '../dist'
+import type { IXFlipperProps } from '../dist'
+import { shuffle } from 'lodash'
+
+const generateItems = (n: number) => {
+  const items = []
+  for (let index = 1; index <= n; index++) {
+    items.push(`item - ${index}`)
+  }
+  return items
+}
+
+export default {
+  title: 'Animation/XFlipper',
+  component: XFlipper
+} as Meta<IXFlipperProps>
+
+const Template: Story<IXFlipperProps> = (args) => {
+  const [items, setItems] = useState<Array<string>>(() => generateItems(100))
+
+  const handleShuffle = () => {
+    setItems((prevItems) => shuffle(prevItems))
+  }
+
+  return (
+    <XFlipper flipKey={items.join('-')} {...args}>
+      <button style={{ marginBottom: 20 }} onClick={handleShuffle}>
+        Shuffle
+      </button>
+      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
+        {items.map((item) => (
+          <XFlipped flipId={item} key={item}>
+            <div
+              style={{
+                width: '100px',
+                height: '80px',
+                padding: '20px',
+                backgroundColor: '#fff',
+                borderRadius: '4px',
+                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
+              }}
+            >
+              {item}
+            </div>
+          </XFlipped>
+        ))}
+      </div>
+    </XFlipper>
+  )
+}
+
+export const Default: Meta = Template.bind({})
+Default.args = {}

stories/XNumber.stories.tsx

@@ -1,11 +1,13 @@
 import React, { FC, useState } from 'react'
 import { Story, Meta } from '@storybook/react/types-6-0'
-import { XNumber, animationConfig as config } from '../src'
+import {
+  XNumber,
+  IXNumberProps as XNumberProps,
+  animationConfig as config
+} from '../dist'
 import { useInterval } from 'react-use'
 import { random } from 'lodash'
 
-type XNumberProps = React.ComponentProps<typeof XNumber>
-
 export default {
   title: 'Number/XNumber',
   component: XNumber