refactor: Use latest react

.eslintrc.js

@@ -0,0 +1,11 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    'react/no-find-dom-node': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'jsx-a11y/label-has-for': 0,
+  },
+};

.fatherrc.js

@@ -0,0 +1,8 @@
+export default {
+  cjs: 'babel',
+  esm: { type: 'babel', importLibToEs: true },
+  preCommit: {
+    eslint: true,
+    prettier: true,
+  },
+};

.gitignore

@@ -1,3 +1,4 @@
+.storybook
 *.iml
 *.log
 .idea/

.travis.yml

@@ -1,31 +1,17 @@
 language: node_js
 
-sudo: false
-
-notifications:
-  email:
-  - yiminghe@gmail.com
-
 node_js:
-- 6.10.0
+  - 10
 
-before_install:
-- |
-    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
-    then
-      echo "Only docs were updated, stopping build process."
-      exit
-    fi
-    phantomjs --version
 script:
 - |
     if [ "$TEST_TYPE" = test ]; then
-      npm test
+      npm run coverage && \
+      bash <(curl -s https://codecov.io/bash)
     else
       npm run $TEST_TYPE
     fi
 env:
   matrix:
   - TEST_TYPE=lint
-  - TEST_TYPE=test
-  - TEST_TYPE=coverage
+  - TEST_TYPE=test

README.md

@@ -5,7 +5,7 @@ React Align Component. Wrapper around https://github.com/yiminghe/dom-align.
 
 [![NPM version][npm-image]][npm-url]
 [![build status][travis-image]][travis-url]
-[![Test coverage][coveralls-image]][coveralls-url]
+[![Codecov][codecov-image]][codecov-url]
 [![gemnasium deps][gemnasium-image]][gemnasium-url]
 [![node version][node-image]][node-url]
 [![npm download][download-image]][download-url]
@@ -14,8 +14,8 @@ React Align Component. Wrapper around https://github.com/yiminghe/dom-align.
 [npm-url]: http://npmjs.org/package/rc-align
 [travis-image]: https://img.shields.io/travis/react-component/align.svg?style=flat-square
 [travis-url]: https://travis-ci.org/react-component/align
-[coveralls-image]: https://img.shields.io/coveralls/react-component/align.svg?style=flat-square
-[coveralls-url]: https://coveralls.io/r/react-component/align?branch=master
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/align/master.svg?style=flat-square
+[codecov-url]: https://codecov.io/gh/react-component/align/branch/master
 [gemnasium-image]: http://img.shields.io/gemnasium/react-component/align.svg?style=flat-square
 [gemnasium-url]: https://gemnasium.com/react-component/align
 [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square

examples/point.js

@@ -1,6 +1,5 @@
-import Align from 'rc-align';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import Align from '../src';
 
 const align = {
   points: ['cc', 'cc'],
@@ -12,8 +11,8 @@ class Demo extends Component {
   };
 
   onClick = ({ pageX, pageY }) => {
-    this.setState({ point: { pageX, pageY }});
-  }
+    this.setState({ point: { pageX, pageY } });
+  };
 
   render() {
     return (
@@ -25,19 +24,22 @@ class Demo extends Component {
           Click this region please : )
         </div>
 
-        <Align
-          ref={this.alignRef}
-          target={this.state.point}
-          align={align}
-        >
+        <Align ref={this.alignRef} target={this.state.point} align={align}>
           <div
-            style={{ position: 'absolute', width: 100, height: 100, background: 'rgba(0, 255, 0, 0.5)', pointerEvents: 'none' }}
-          >Align</div>
+            style={{
+              position: 'absolute',
+              width: 100,
+              height: 100,
+              background: 'rgba(0, 255, 0, 0.5)',
+              pointerEvents: 'none',
+            }}
+          >
+            Align
+          </div>
         </Align>
       </div>
     );
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
-
+export default Demo;

examples/simple.js

@@ -1,6 +1,5 @@
-import Align from 'rc-align';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import Align from '../src';
 
 class Test extends Component {
   state = {
@@ -16,11 +15,14 @@ class Test extends Component {
     this.id = setInterval(() => {
       const { random } = this.state;
       if (random) {
-        this.setState({
-          randomWidth: 60 + 40 * Math.random(),
-        }, () => {
-          this.forceAlign();
-        });
+        this.setState(
+          {
+            randomWidth: 60 + 40 * Math.random(),
+          },
+          () => {
+            this.forceAlign();
+          },
+        );
       }
     }, 1000);
   }
@@ -35,31 +37,31 @@ class Test extends Component {
       this.$container = document.getElementById('container');
     }
     return this.$container;
-  }
+  };
 
-  containerRef = (ele) => {
+  containerRef = ele => {
     this.$container = ele;
-  }
+  };
 
-  alignRef = (node) => {
+  alignRef = node => {
     this.$align = node;
-  }
+  };
 
   toggleMonitor = () => {
-    this.setState({
-      monitor: !this.state.monitor,
-    });
-  }
+    this.setState(({ monitor }) => ({
+      monitor: !monitor,
+    }));
+  };
 
   toggleRandom = () => {
-    this.setState({
-      random: !this.state.random,
-    });
-  }
+    this.setState(({ random }) => ({
+      random: !random,
+    }));
+  };
 
   forceAlign = () => {
     this.$align.forceAlign();
-  }
+  };
 
   render() {
     const { random, randomWidth } = this.state;
@@ -71,29 +73,32 @@ class Test extends Component {
         }}
       >
         <p>
-          <button onClick={this.forceAlign}>Force align</button>
+          <button type="button" onClick={this.forceAlign}>
+            Force align
+          </button>
           &nbsp;&nbsp;&nbsp;
           <label>
             <input type="checkbox" checked={this.state.monitor} onChange={this.toggleMonitor} />
-            &nbsp;
-            Monitor window resize
+            &nbsp; Monitor window resize
           </label>
           <label>
             <input type="checkbox" checked={this.state.random} onChange={this.toggleRandom} />
-            &nbsp;
-            Random Size
+            &nbsp; Random Size
           </label>
         </p>
         <div
           ref={this.containerRef}
           id="container"
           style={{
-            width: '80%',
+            // width: '80%',
+            maxWidth: 1000,
             height: 500,
             border: '1px solid red',
-            ...(random ? {
-              width: `${randomWidth}%`
-            } : null),
+            ...(random
+              ? {
+                  width: `${randomWidth}%`,
+                }
+              : null),
           }}
         >
           <Align
@@ -110,10 +115,7 @@ class Test extends Component {
                 background: 'yellow',
               }}
             >
-              <input
-                defaultValue="source"
-                style={{ width: '100%' }}
-              />
+              <input defaultValue="source" style={{ width: '100%' }} />
             </div>
           </Align>
         </div>
@@ -122,4 +124,4 @@ class Test extends Component {
   }
 }
 
-ReactDOM.render(<Test />, document.getElementById('__react-content'));
+export default Test;

jest.config.js

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

now.json

@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "name": "rc-align",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": { "distDir": ".doc" }
+    }
+  ]
+}

package.json

@@ -24,39 +24,37 @@
   "license": "MIT",
   "main": "./lib/index",
   "module": "./es/index",
-  "config": {
-    "port": 8100
-  },
   "scripts": {
-    "build": "rc-tools run build",
-    "compile": "rc-tools run compile --babel-runtime",
-    "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-tools run server",
-    "pub": "rc-tools run pub --babel-runtime",
-    "lint": "rc-tools run lint",
-    "karma": "rc-test run karma",
-    "saucelabs": "rc-test run saucelabs",
-    "test": "rc-test run test",
-    "chrome-test": "rc-test run chrome-test",
-    "coverage": "rc-test run coverage"
+    "start": "cross-env NODE_ENV=development father doc dev --storybook",
+    "build": "father doc build --storybook",
+    "compile": "father build",
+    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
+    "test": "father test",
+    "coverage": "father test --coverage",
+    "now-build": "npm run build"
   },
-  "devDependencies": {
-    "core-js": "^2.5.1",
-    "expect.js": "0.3.x",
-    "jquery": "^3.3.1",
-    "pre-commit": "1.x",
-    "rc-test": "6.x",
-    "rc-tools": "8.x",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
   },
-  "pre-commit": [
-    "lint"
-  ],
   "dependencies": {
-    "babel-runtime": "^6.26.0",
+    "classnames": "2.x",
     "dom-align": "^1.7.0",
-    "prop-types": "^15.5.8",
-    "rc-util": "^4.0.4"
+    "rc-util": "^4.12.0",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.18",
+    "@types/react": "^16.8.19",
+    "@types/react-dom": "^16.8.4",
+    "@types/warning": "^3.0.0",
+    "cross-env": "^6.0.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.4.0",
+    "father": "^2.13.2",
+    "np": "^5.0.3",
+    "typescript": "^3.5.2"
   }
 }