chore: use father (#85)

* chore: use father

* fix test

* change name

* update lint

* update

* uptate ci

* update

* update

* update

* update

* update

* remove rc-tools

* add lock

* update

* update

* Update .travis.yml

* update ts

* update package

* fix name up

* add test

* fix example & define

Co-authored-by: 偏右 <afc163@gmail.com>

.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,18 +1,18 @@
-import 'rc-progress/assets/index.less';
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Line, Circle } from 'rc-progress';
+import * as React from 'react';
+import { Line, Circle, ProgressProps } from '../src';
 
-class App extends Component {
-  constructor() {
-    super();
+class App extends React.Component<ProgressProps, any> {
+  constructor(props) {
+    super(props);
     this.state = {
       percent: 0,
     };
     this.increase = this.increase.bind(this);
     this.restart = this.restart.bind(this);
   }
 
+  private tm: number;
+
   componentDidMount() {
     this.increase();
   }
@@ -39,8 +39,8 @@ class App extends Component {
     const { percent } = this.state;
     return (
       <div style={{ margin: 10, width: 200 }}>
-        <Circle strokeWidth="6" percent={percent} />
-        <Line strokeWidth="4" percent={percent} />
+        <Circle strokeWidth={6} percent={percent} />
+        <Line strokeWidth={4} percent={percent} />
         <button type="button" onClick={this.restart}>
           Restart
         </button>
@@ -49,4 +49,4 @@ class App extends Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('__react-content'));
+export default App;

examples/gap.js → examples/gap.tsx

@@ -1,15 +1,15 @@
-import 'rc-progress/assets/index.less';
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Circle } from 'rc-progress';
+import * as React from 'react';
+import { Circle, ProgressProps } from '../src';
 
 const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
+
 function getColor(index) {
   return colorMap[(index + colorMap.length) % colorMap.length];
 }
-class Example extends Component {
-  constructor() {
-    super();
+
+class Example extends React.Component<ProgressProps, any> {
+  constructor(props) {
+    super(props);
     this.state = {
       percent: 30,
       colorIndex: 0,
@@ -18,8 +18,8 @@ class Example extends Component {
   }
 
   changeState() {
-    const value = parseInt(Math.random() * 100, 10);
-    const colorIndex = parseInt(Math.random() * 3, 10);
+    const value = parseInt((Math.random() * 100).toString(), 10);
+    const colorIndex = parseInt((Math.random() * 3).toString(), 10);
     this.setState({
       percent: value,
       colorIndex,
@@ -45,7 +45,7 @@ class Example extends Component {
             percent={percent}
             gapDegree={70}
             gapPosition="top"
-            strokeWidth="6"
+            strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
           />
@@ -55,8 +55,8 @@ class Example extends Component {
             percent={[percent / 3, percent / 3, percent / 3]}
             gapDegree={70}
             gapPosition="bottom"
-            strokeWidth="6"
-            trailWidth="6"
+            strokeWidth={6}
+            trailWidth={6}
             strokeLinecap="round"
             strokeColor={[color, getColor(colorIndex + 1), getColor(colorIndex + 2)]}
           />
@@ -67,7 +67,7 @@ class Example extends Component {
             percent={percent}
             gapDegree={70}
             gapPosition="left"
-            strokeWidth="6"
+            strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
           />
@@ -77,7 +77,7 @@ class Example extends Component {
             percent={percent}
             gapDegree={70}
             gapPosition="right"
-            strokeWidth="6"
+            strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
           />
@@ -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,21 +1,20 @@
-import 'rc-progress/assets/index.less';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Circle } from 'rc-progress';
+import * as React from 'react';
+import { Circle } from '../src';
 
 const Example = () => {
   const circleContainerStyle = {
     width: '250px',
     height: '250px',
     display: 'inline-block',
   };
+
   return (
     <div>
       <h3>Circle Progress {90}%</h3>
       <div style={circleContainerStyle}>
         <Circle
           percent={90}
-          strokeWidth="6"
+          strokeWidth={6}
           strokeLinecap="round"
           strokeColor={{
             '0%': '#108ee9',
@@ -27,7 +26,7 @@ const Example = () => {
       <div style={circleContainerStyle}>
         <Circle
           percent={100}
-          strokeWidth="6"
+          strokeWidth={6}
           strokeLinecap="round"
           strokeColor={{
             '100%': '#108ee9',
@@ -39,7 +38,7 @@ const Example = () => {
       <div style={circleContainerStyle}>
         <Circle
           percent={[65, 100]}
-          strokeWidth="6"
+          strokeWidth={6}
           strokeLinecap="round"
           strokeColor={[
             '#87d068',
@@ -54,4 +53,4 @@ const Example = () => {
   );
 };
 
-ReactDOM.render(<Example />, document.getElementById('__react-content'));
+export default Example;

examples/simple.js → examples/simple.tsx

@@ -1,11 +1,9 @@
-import 'rc-progress/assets/index.less';
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Line, Circle } from 'rc-progress';
+import * as React from 'react';
+import { Line, Circle, ProgressProps } from '../src';
 
-class Example extends Component {
-  constructor() {
-    super();
+class Example extends React.Component<ProgressProps, any> {
+  constructor(props) {
+    super(props);
     this.state = {
       percent: 30,
       color: '#3FC7FA',
@@ -15,10 +13,10 @@ class Example extends Component {
 
   changeState() {
     const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
-    const value = parseInt(Math.random() * 100, 10);
+    const value = parseInt((Math.random() * 100).toString(), 10);
     this.setState({
       percent: value,
-      color: colorMap[parseInt(Math.random() * 3, 10)],
+      color: colorMap[parseInt((Math.random() * 3).toString(), 10)],
     });
   }
 
@@ -36,16 +34,16 @@ class Example extends Component {
       <div>
         <h3>Line Progress {percent}%</h3>
         <div style={containerStyle}>
-          <Line percent={percent} strokeWidth="4" strokeColor={color} />
+          <Line percent={percent} strokeWidth={4} strokeColor={color} />
           <Line
             percent={[percent / 2, percent / 2]}
-            strokeWidth="4"
+            strokeWidth={4}
             strokeColor={[color, '#CCC']}
           />
         </div>
         <h3>Circle Progress {percent}%</h3>
         <div style={circleContainerStyle}>
-          <Circle percent={percent} strokeWidth="6" strokeLinecap="round" strokeColor={color} />
+          <Circle percent={percent} strokeWidth={6} strokeLinecap="round" strokeColor={color} />
         </div>
         <p>
           <button type="button" onClick={this.changeState}>
@@ -57,4 +55,4 @@ class Example extends Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('__react-content'));
+export default Example;

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" }
+    }
+  ]
+}