chore: migrate to dumi 2 & father 4 (#280)

* docs: use dumi

* docs: use dumi

* chore: adjust

* test: mig test

* test: all test case

.dumirc.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  themeConfig: {
+    name: 'Align',
+  },
+  mfsu: false,
+});

.fatherrc.js

@@ -1,9 +1,5 @@
-export default {
-  cjs: 'babel',
-  esm: { type: 'babel', importLibToEs: true },
-  preCommit: {
-    eslint: true,
-    prettier: true,
-  },
-  runtimeHelpers: true,
-};
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+});

.gitignore

@@ -29,3 +29,4 @@ es
 coverage
 package-lock.json
 yarn.lock
+.dumi

docs/demo/follow.md

@@ -0,0 +1,8 @@
+---
+title: Follow
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/follow.tsx"></code>

docs/demo/point.md

@@ -0,0 +1,8 @@
+---
+title: Point
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/point.tsx" ></code>

docs/demo/simple.md

@@ -0,0 +1,8 @@
+---
+title: Simple
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/simple.tsx" ></code>

examples/follow.tsx → docs/examples/follow.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Align from '../src';
+import Align from '../../src';
 
 const Demo = () => {
   const [width, setWidth] = React.useState(100);
@@ -51,7 +51,6 @@ const Demo = () => {
       <div
         style={{
           border: '1px solid red',
-          width: '90vw',
           height: '50vh',
           position: 'relative',
         }}

examples/point.js → docs/examples/point.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Align from '../src';
+import Align from '../../src';
 
 const align = {
   points: ['cc', 'cc'],

examples/simple.js → docs/examples/simple.tsx

@@ -1,9 +1,18 @@
+import Align, { type RefAlign } from 'rc-align';
 import React, { Component } from 'react';
-import Align from '../src';
 
 const allPoints = ['tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl', 'bc', 'br'];
 
-class Test extends Component {
+interface TestState {
+  monitor: boolean;
+  random: boolean;
+  disabled: boolean;
+  randomWidth: number;
+  align: any;
+  sourceWidth: number;
+}
+
+class Test extends Component<{}, TestState> {
   state = {
     monitor: true,
     random: false,
@@ -15,6 +24,10 @@ class Test extends Component {
     sourceWidth: 50,
   };
 
+  id: NodeJS.Timer;
+  $container: HTMLElement;
+  $align: RefAlign;
+
   componentDidMount() {
     this.id = setInterval(() => {
       const { random } = this.state;

docs/index.md

@@ -0,0 +1,7 @@
+---
+hero:
+  title: rc-align
+  description: align ui component for react
+---
+
+<embed src="../README.md"></embed>

jest.config.js

@@ -1,3 +1,2 @@
 module.exports = {
-  snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
 };

package.json

@@ -8,36 +8,32 @@
     "react-align",
     "align"
   ],
-  "files": [
-    "lib",
-    "es"
-  ],
   "homepage": "http://github.com/react-component/align",
-  "author": "",
+  "bugs": {
+    "url": "http://github.com/react-component/align/issues"
+  },
   "repository": {
     "type": "git",
     "url": "[email protected]:react-component/align.git"
   },
-  "bugs": {
-    "url": "http://github.com/react-component/align/issues"
-  },
   "license": "MIT",
+  "author": "",
   "main": "./lib/index",
   "module": "./es/index",
+  "files": [
+    "lib",
+    "es"
+  ],
   "scripts": {
-    "start": "cross-env NODE_ENV=development father doc dev --storybook",
-    "build": "father doc build --storybook",
+    "build": "dumi build",
     "compile": "father build",
-    "tsc": "tsc --noEmit",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
-    "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
-    "test": "father test",
     "coverage": "father test --coverage",
-    "now-build": "npm run build"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "lint": "eslint src/ docs/ --ext .tsx,.ts,.jsx,.js",
+    "now-build": "npm run build",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "start": "dumi dev",
+    "test": "rc-test",
+    "tsc": "tsc --noEmit"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
@@ -48,17 +44,23 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.0",
     "@types/jest": "^24.0.18",
-    "@types/react": "^16.8.19",
-    "@types/react-dom": "^16.8.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/warning": "^3.0.0",
     "cross-env": "^7.0.3",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.0",
+    "dumi": "^2.0.15",
     "eslint": "^7.1.0",
-    "father": "^2.13.2",
+    "father": "^4.0.0",
     "np": "^5.0.3",
+    "rc-test": "^7.0.14",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^4.0.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   }
 }

src/Align.tsx

@@ -184,7 +184,7 @@ const Align: React.ForwardRefRenderFunction<RefAlign, AlignProps> = (
 
   // ===================== Render =====================
   if (React.isValidElement(childNode)) {
-    childNode = React.cloneElement(childNode, {
+    childNode = React.cloneElement<any>(childNode, {
       ref: composeRef((childNode as any).ref, nodeRef),
     });
   }

src/hooks/useBuffer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default (callback: () => boolean, buffer: number) => {
+export default (callback: (force?: boolean) => boolean, buffer: number) => {
   const calledRef = React.useRef<boolean>(false);
   const timeoutRef = React.useRef<number>(null);
 
@@ -12,7 +12,7 @@ export default (callback: () => boolean, buffer: number) => {
     cancelTrigger();
 
     if (!calledRef.current || force === true) {
-      if (callback() === false) {
+      if (callback(force) === false) {
         // Not delay since callback cancelled self
         return;
       }

src/index.ts

@@ -1,4 +1,6 @@
 // export this package's api
 import Align from './Align';
 
+export type { RefAlign } from './Align';
+
 export default Align;

tests/element.test.js → tests/element.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import Align from '../src';
 
@@ -23,7 +23,9 @@ describe('element align', () => {
     points: ['bc', 'tc'],
   };
 
-  class Test extends React.Component {
+  class Test extends React.Component<any> {
+    $target: any;
+
     getTarget = () => this.$target;
 
     targetRef = ele => {
@@ -56,7 +58,7 @@ describe('element align', () => {
   it('resize', () => {
     const onAlign = jest.fn();
 
-    const wrapper = mount(<Test monitorWindowResize onAlign={onAlign} />);
+    const { unmount, rerender } = render(<Test monitorWindowResize onAlign={onAlign} />);
     expect(onAlign).toHaveBeenCalled();
 
     // Window resize
@@ -67,37 +69,38 @@ describe('element align', () => {
 
     // Not listen resize
     onAlign.mockReset();
-    wrapper.setProps({ monitorWindowResize: false });
+    rerender(<Test monitorWindowResize={false} onAlign={onAlign} />);
     window.dispatchEvent(new Event('resize'));
     jest.runAllTimers();
     expect(onAlign).not.toHaveBeenCalled();
 
     // Remove should not crash
-    wrapper.setProps({ monitorWindowResize: true });
-    wrapper.unmount();
+    rerender(<Test monitorWindowResize onAlign={onAlign} />);
+    unmount();
   });
 
   it('disabled should trigger align', () => {
     const onAlign = jest.fn();
 
-    const wrapper = mount(<Test monitorWindowResize onAlign={onAlign} disabled />);
+    const { rerender } = render(<Test monitorWindowResize onAlign={onAlign} disabled />);
     expect(onAlign).not.toHaveBeenCalled();
 
-    wrapper.setProps({ disabled: false });
+    rerender(<Test monitorWindowResize onAlign={onAlign} disabled={false} />);
     jest.runAllTimers();
     expect(onAlign).toHaveBeenCalled();
   });
 
   // https://github.com/ant-design/ant-design/issues/31717
   it('changing align should trigger onAlign', () => {
     const onAlign = jest.fn();
-    const wrapper = mount(<Test align={{ points: ['cc', 'cc'] }} onAlign={onAlign} />);
+    const { rerender } = render(<Test align={{ points: ['cc', 'cc'] }} onAlign={onAlign} />);
     expect(onAlign).toHaveBeenCalledTimes(1);
     expect(onAlign).toHaveBeenLastCalledWith(
       expect.any(HTMLElement),
       expect.objectContaining({ points: ['cc', 'cc'] }),
     );
-    wrapper.setProps({ align: { points: ['cc', 'tl'] } });
+    // wrapper.setProps({ align: { points: ['cc', 'tl'] } });
+    rerender(<Test align={{ points: ['cc', 'tl'] }} onAlign={onAlign} />);
     jest.runAllTimers();
     expect(onAlign).toHaveBeenCalledTimes(2);
     expect(onAlign).toHaveBeenLastCalledWith(
@@ -124,15 +127,15 @@ describe('element align', () => {
     const onAlign1 = jest.fn();
     const onAlign2 = jest.fn();
 
-    const wrapper = mount(<Test onAlign={onAlign1} />);
+    const { rerender } = render(<Test onAlign={onAlign1} />);
 
     // Make sure the initial render's call to onAlign does not matter.
     onAlign1.mockReset();
     onAlign2.mockReset();
 
     // Re-render the component with the new callback. Expect from here on all
     // callbacks to call the new onAlign2.
-    wrapper.setProps({ onAlign: onAlign2 });
+    rerender(<Test onAlign={onAlign2} />);
 
     // Now the timeout is executed, and we expect the onAlign2 callback to
     // receive the call, not onAlign1.