chore: use father

.eslintrc.js

@@ -0,0 +1,16 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    'no-template-curly-in-string': 0,
+    'prefer-promise-reject-errors': 0,
+    'react/no-array-index-key': 0,
+    'react/sort-comp': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    'jsx-a11y/role-supports-aria-props': 0,
+    'jsx-a11y/no-noninteractive-tabindex': 0,
+    'import/no-extraneous-dependencies': 0,
+  },
+};

.fatherrc.js

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

.gitignore

@@ -27,4 +27,7 @@ build
 lib
 es
 coverage/
-yarn.lock
+yarn.lock
+package-lock.json
+.storybook
+.doc

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "printWidth": 100
+}

.travis.yml

@@ -5,11 +5,9 @@ sudo: false
 notifications:
   email:
   - yiminghe@gmail.com
-  - afc163@gmail.com
-  - yesmeck@gmail.com
 
 node_js:
-- 10
+- 12
 
 script:
 - |
@@ -19,7 +17,10 @@ script:
     else
       npm run $TEST_TYPE
     fi
+
 env:
   matrix:
   - TEST_TYPE=lint
   - TEST_TYPE=test
+  - TEST_TYPE=coverage
+  - TEST_TYPE=compile

examples/fast-progress.js → examples/fast-progress.tsx

@@ -1,7 +1,5 @@
-import 'rc-progress/assets/index.less';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Line, Circle } from 'rc-progress';
+import { Line, Circle } from '..';
 
 class App extends Component {
   constructor() {
@@ -49,4 +47,4 @@ class App extends Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('__react-content'));
+export default App;

examples/gap.js → examples/gap.tsx

@@ -1,12 +1,12 @@
-import 'rc-progress/assets/index.less';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Circle } from 'rc-progress';
+import { Circle } from '..';
 
 const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
+
 function getColor(index) {
   return colorMap[(index + colorMap.length) % colorMap.length];
 }
+
 class Example extends Component {
   constructor() {
     super();
@@ -87,4 +87,4 @@ class Example extends Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('__react-content'));
+export default Example;

examples/gradient-circle.js → examples/gradient-circle.tsx

@@ -1,14 +1,13 @@
-import 'rc-progress/assets/index.less';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { Circle } from 'rc-progress';
+import { Circle } from '..';
 
 const Example = () => {
   const circleContainerStyle = {
     width: '250px',
     height: '250px',
     display: 'inline-block',
   };
+
   return (
     <div>
       <h3>Circle Progress {90}%</h3>
@@ -54,4 +53,4 @@ const Example = () => {
   );
 };
 
-ReactDOM.render(<Example />, document.getElementById('__react-content'));
+export default Example;

examples/simple.js → examples/simple.tsx

@@ -1,7 +1,5 @@
-import 'rc-progress/assets/index.less';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Line, Circle } from 'rc-progress';
+import { Line, Circle } from '..';
 
 class Example extends Component {
   constructor() {
@@ -57,4 +55,4 @@ class Example extends Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('__react-content'));
+export default Example;

index.js

@@ -1,4 +1,4 @@
-import Progress, {  Line, Circle } from './src/';
+import Progress, { Line, Circle } from './src';
 
 export {
   Line,

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  setupFiles: ["./tests/setup.js"],
+  snapshotSerializers: [require.resolve("enzyme-to-json/serializer")],
+};

now.json

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

package.json

@@ -17,57 +17,50 @@
     "url": "http://github.com/react-component/progress/issues"
   },
   "license": "MIT",
-  "main": "lib/index",
-  "module": "es/index",
-  "types": "./typings/index.d.ts",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "types": "./lib/index.d.ts",
   "files": [
     "dist",
     "lib",
-    "assets/*.css",
     "es",
     "typings/index.d.ts"
   ],
-  "config": {
-    "port": 8000,
-    "entry": {
-      "rc-progress": [
-        "./src/index.js",
-        "./assets/index.less"
-      ]
-    }
-  },
   "scripts": {
-    "dist": "rc-tools run dist",
-    "build": "rc-tools run build",
-    "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-tools run server",
-    "compile": "rc-tools run compile",
-    "pub": "rc-tools run pub",
-    "lint": "rc-tools run lint",
-    "lint:fix": "rc-tools run lint --fix",
-    "prettier": "rc-tools run prettier",
-    "test": "rc-tools run test",
-    "prepublish": "rc-tools run guard",
-    "coverage": "rc-tools run test --coverage",
-    "pre-commit": "rc-tools run pre-commit",
-    "lint-staged": "lint-staged"
+    "start": "cross-env NODE_ENV=development father doc dev --storybook",
+    "build": "father doc build --storybook",
+    "compile": "father build",
+    "gh-pages": "npm run build && father doc deploy",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
+    "test": "father test",
+    "coverage": "father test --coverage"
   },
-  "devDependencies": {
-    "lint-staged": "^10.0.1",
-    "pre-commit": "1.x",
-    "rc-tools": "9.x",
+  "peerDependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },
-  "pre-commit": [
-    "lint-staged"
-  ],
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "npm run pre-commit"
-    ]
-  },
   "dependencies": {
+    "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.6"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/jest": "^26.0.0",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "@umijs/fabric": "^2.0.0",
+    "cross-env": "^7.0.0",
+    "enzyme": "^3.1.1",
+    "enzyme-adapter-react-16": "^1.0.1",
+    "enzyme-to-json": "^3.1.2",
+    "eslint": "^7.6.0",
+    "father": "^2.29.6",
+    "np": "^6.5.0",
+    "prettier": "^2.1.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "typescript": "^4.0.2"
   }
 }

src/Line.js → src/Line.tsx

@@ -16,6 +16,7 @@ const Line = ({
   transition,
   ...restProps
 }) => {
+  // eslint-disable-next-line no-param-reassign
   delete restProps.gapPosition;
   const percentList = Array.isArray(percent) ? percent : [percent];
   const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];

src/common.js

@@ -13,6 +13,7 @@ export const defaultProps = {
 };
 
 export const useTransitionDuration = percentList => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const paths = percentList.map(() => useRef());
   const prevTimeStamp = useRef();
   useEffect(() => {

tests/index.spec.js

@@ -1,24 +1,10 @@
 /* eslint-disable react/no-render-return-value */
+// eslint-disable-next-line max-classes-per-file
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { mount } from 'enzyme';
 import { Line, Circle } from '../src';
 
-function getGradientIdFromDef(def) {
-  return def.firstElementChild.attributes.getNamedItem('id').value;
-}
-
 describe('Progress', () => {
-  let div = null;
-  beforeEach(() => {
-    div = document.createElement('div');
-    document.body.appendChild(div);
-  });
-
-  afterEach(() => {
-    ReactDOM.unmountComponentAtNode(div);
-    document.body.removeChild(div);
-  });
-
   describe('Line', () => {
     it('change with animation', () => {
       class Demo extends React.Component {
@@ -31,12 +17,12 @@ describe('Progress', () => {
           return <Line percent={percent} strokeWidth="1" />;
         }
       }
-      const line = ReactDOM.render(<Demo />, div);
-      expect(line.state.percent).toBe('0');
-      line.setState({
-        percent: '30',
-      });
-      expect(line.state.percent).toBe('30');
+
+      const line = mount(<Demo />);
+      expect(line.state().percent).toBe('0');
+      line.setState({ percent: '30' });
+      expect(line.state().percent).toBe('30');
+      line.unmount();
     });
   });
 
@@ -52,16 +38,15 @@ describe('Progress', () => {
           return <Circle percent={percent} strokeWidth="1" />;
         }
       }
-      const circle = ReactDOM.render(<Demo />, div);
-      expect(circle.state.percent).toBe('0');
-      circle.setState({
-        percent: '30',
-      });
-      expect(circle.state.percent).toBe('30');
+      const circle = mount(<Demo />);
+      expect(circle.state().percent).toBe('0');
+      circle.setState({ percent: '30' });
+      expect(circle.state().percent).toBe('30');
+      circle.unmount();
     });
 
     it('should gradient works and circles have different gradient IDs', () => {
-      ReactDOM.render(
+      const c = mount(
         <>
           <Circle
             percent={90}
@@ -82,12 +67,11 @@ describe('Progress', () => {
             }}
           />
         </>,
-        div,
       );
 
-      const gradientDefs = div.querySelectorAll('defs');
-      const idFirst = getGradientIdFromDef(gradientDefs[0]);
-      const idSecond = getGradientIdFromDef(gradientDefs[1]);
+      const gradientDefs = c.find('defs');
+      const idFirst = gradientDefs.at(0).props().children.props.id;
+      const idSecond = gradientDefs.at(1).props().children.props.id;
       const idRE = /^rc-progress-gradient-\d{1,}$/;
       expect(idFirst).toMatch(idRE);
       expect(idSecond).toMatch(idRE);

tests/setup.js

@@ -0,0 +1,6 @@
+global.requestAnimationFrame = cb => setTimeout(cb, 0);
+
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+Enzyme.configure({ adapter: new Adapter() });

typings/index.d.ts

@@ -1,4 +1,6 @@
 /* tslint:disable */
+/* eslint-disable react/prefer-stateless-function */
+// eslint-disable-next-line max-classes-per-file
 declare module 'rc-progress' {
   export interface RCProgressProps {
     strokeWidth?: number;
@@ -13,6 +15,7 @@ declare module 'rc-progress' {
     gapDegree?: number;
     gapPosition?: 'top' | 'right' | 'bottom' | 'left';
   }
+
   export class Line extends React.Component<RCProgressProps, {}> {}
   export class Circle extends React.Component<RCProgressProps, {}> {}
 }