refactor: upgrade project (#294)

* feat: Upgrade build deps

* chore: update

* test: replace enzyme with testing

* chore: remove script

* style: format code

use prettier

* test: update case

ref: testing-library/react-testing-library#269 (comment)

* style: update README.md

* chore: update docs

* chore: rname

* style: foramt

.dumirc.ts

@@ -0,0 +1,17 @@
+// more config: https://d.umijs.org/config
+import { defineConfig } from 'dumi';
+import path from 'path';
+
+export default defineConfig({
+  alias: {
+    'rc-collapse$': path.resolve('src'),
+    'rc-collapse/es': path.resolve('src'),
+  },
+  favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
+  themeConfig: {
+    name: 'Collapse',
+    logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  },
+  outputPath: '.doc',
+  exportStatic: {},
+});

.fatherrc.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+});

.gitignore

@@ -31,8 +31,8 @@ package-lock.json
 .storybook
 .doc
 
-# umi
-.umi
-.umi-production
-.umi-test
+# dumi
+.dumi/tmp
+.dumi/tmp-production
+.dumi/tmp-test
 .env.local

HISTORY.md

@@ -1,5 +1,6 @@
 # History
-----
+
+---
 
 ## 2.0.0 `2020-05-08`
 

README.md

@@ -1,12 +1,8 @@
 # rc-collapse
----
 
 rc-collapse ui component for react
 
-[![NPM version][npm-image]][npm-url]
-[![build status][github-actions-image]][github-actions-url]
-[![Test coverage][codecov-image]][codecov-url]
-[![npm download][download-image]][download-url]
+[![NPM version][npm-image]][npm-url] [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-collapse.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-collapse
@@ -17,23 +13,9 @@ rc-collapse ui component for react
 [download-image]: https://img.shields.io/npm/dm/rc-collapse.svg?style=flat-square
 [download-url]: https://npmjs.org/package/rc-collapse
 
-## Development
-
-```
-npm install
-npm start
-```
-
-## Example
+## Live Demo
 
-http://localhost:8000/examples/
-
-online example: http://react-component.github.io/collapse/
-
-
-## Features
-
-* support ie8,ie8+,chrome,firefox,safari
+http://react-component.github.io/collapse/
 
 ## Install
 
@@ -48,20 +30,24 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 require('rc-collapse/assets/index.css');
 
-var collapse = (
+var App = (
   <Collapse accordion={true}>
-    <Panel header="hello" headerClass="my-header-class">this is panel content</Panel>
+    <Panel header="hello" headerClass="my-header-class">
+      this is panel content
+    </Panel>
     <Panel header="title2">this is panel content2 or other</Panel>
   </Collapse>
 );
-ReactDOM.render(collapse, container);
+ReactDOM.render(App, container);
 ```
 
-## API
+## Features
+
+- support ie8,ie8+,chrome,firefox,safari
 
-### Collapse
+## API
 
-#### props:
+### Collapse props
 
 <table class="table table-bordered table-striped">
     <thead>
@@ -124,15 +110,11 @@ ReactDOM.render(collapse, container);
     </tbody>
 </table>
 
-If `accordion` is null or false, every panel can open.  Opening another panel will not close any of the other panels.
-`activeKey` should be an string, if passing an array (the first item in the array will be used).
-
-If `accordion` is true, only one panel can be open.  Opening another panel will cause the previously opened panel to close.
-`activeKey` should be an string, if passing an array (the first item in the array will be used).
+If `accordion` is null or false, every panel can open. Opening another panel will not close any of the other panels. `activeKey` should be an string, if passing an array (the first item in the array will be used).
 
-### Collapse.Panel
+If `accordion` is true, only one panel can be open. Opening another panel will cause the previously opened panel to close. `activeKey` should be an string, if passing an array (the first item in the array will be used).
 
-#### props
+### Collapse.Panel props
 
 <table class="table table-bordered table-striped">
     <thead>
@@ -207,20 +189,24 @@ If `accordion` is true, only one panel can be open.  Opening another panel will
 
 If `key` is not provided, the panel's index will be used instead.
 
-## Test Case
+## Development
 
+```bash
+npm install
+npm start
 ```
+
+## Test Case
+
+```bash
 npm test
-npm run chrome-test
 ```
 
 ## Coverage
 
+```bash
+npm test -- --coverage
 ```
-npm run coverage
-```
-
-open coverage/ dir
 
 ## License
 

docs/demo/custom-icon.md

@@ -1,2 +1,8 @@
-## custom-icon
-<code src="../examples/custom-icon.tsx">
+---
+title: custom-icon
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/custom-icon.tsx"></code>

docs/demo/fragment.md

@@ -1,2 +1,8 @@
-## fragment
-<code src="../examples/fragment.tsx">
+---
+title: fragment
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/fragment.tsx"></code>

docs/demo/simple.md

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

docs/examples/_util/motionUtil.ts

@@ -1,4 +1,4 @@
-import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
+import type { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
 
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 });

docs/examples/custom-icon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Collapse, { Panel } from '../../src';
+import Collapse, { Panel } from 'rc-collapse';
 import motion from './_util/motionUtil';
 import '../../assets/index.less';
 

docs/examples/fragment.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Fragment } from 'react';
+import Collapse, { Panel } from 'rc-collapse';
 import '../../assets/index.less';
-import Collapse, { Panel } from '../../src';
 
 const Test = () => (
   <Collapse>

docs/examples/simple.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Collapse, { Panel } from '../../src';
+import Collapse, { Panel } from 'rc-collapse';
 import motion from './_util/motionUtil';
 import '../../assets/index.less';
 

docs/index.md

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

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/tests/setupAfterEnv.ts'],
+};

package.json

@@ -11,62 +11,58 @@
     "accordion"
   ],
   "homepage": "http://github.com/react-component/collapse",
+  "bugs": {
+    "url": "http://github.com/react-component/collapse/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git@github.com:react-component/collapse.git"
   },
-  "bugs": {
-    "url": "http://github.com/react-component/collapse/issues"
-  },
   "license": "MIT",
+  "main": "./lib/index",
+  "module": "./es/index",
   "files": [
     "lib",
     "es",
     "assets/*.css"
   ],
-  "main": "./lib/index",
-  "module": "./es/index",
   "scripts": {
-    "start": "dumi dev",
     "build": "dumi build",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "gh-pages": "npm run build && father doc deploy",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
-    "postpublish": "npm run gh-pages",
+    "coverage": "father test --coverage",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "father test",
-    "coverage": "father test --coverage"
+    "start": "dumi dev",
+    "test": "rc-test"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.10.1",
+    "classnames": "2.x",
+    "rc-motion": "^2.3.4",
+    "rc-util": "^5.27.0"
   },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/classnames": "^2.2.9",
-    "@types/enzyme": "^3.10.6",
     "@types/jest": "^26.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^2.0.0",
-    "cross-env": "^7.0.0",
-    "dumi": "^1.1.4",
-    "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.0.1",
-    "enzyme-to-json": "^3.1.2",
+    "dumi": "^2.1.1",
     "eslint": "^7.11.0",
-    "father": "^2.22.0",
-    "glob": "^7.1.6",
+    "father": "^4.1.3",
     "jest": "^29.1.2",
     "less": "^3.12.2",
     "np": "^6.0.0",
     "prettier": "^2.1.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "rc-test": "^7.0.14",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.0.2"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.10.1",
-    "classnames": "2.x",
-    "rc-motion": "^2.3.4",
-    "rc-util": "^5.27.0"
-  },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"

src/Collapse.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import * as React from 'react';

src/Panel.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import * as React from 'react';

src/PanelContent.tsx

@@ -1,8 +1,6 @@
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable react/prop-types */
 import * as React from 'react';
 import classnames from 'classnames';
-import { CollapsePanelProps } from './interface';
+import type { CollapsePanelProps } from './interface';
 
 const PanelContent = React.forwardRef<
   HTMLDivElement,