chore: use dumi (#158)

* chore: use dumi

* update

* Update README.md

* Delete index.d.ts

* Update package.json

* Update Notification.tsx

* Update CHANGELOG.md

* Delete changelog.md

Co-authored-by: xrkffgg <xrkffgg@gmail.com>

.editorconfig

@@ -1,9 +1,16 @@
-# top-most EditorConfig file
+# http://editorconfig.org
 root = true
 
-# Unix-style newlines with a newline ending every file
-[*.{js,css}]
-end_of_line = lf
-insert_final_newline = true
+[*]
 indent_style = space
 indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab 

.gitignore

@@ -30,3 +30,9 @@ es
 coverage
 yarn.lock
 package-lock.json
+
+# umi
+.umi
+.umi-production
+.umi-test
+.env.local 

.umirc.ts

@@ -0,0 +1,17 @@
+// more config: https://d.umijs.org/config
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'rc-notification',
+  favicon: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  outputPath: '.doc',
+  exportStatic: {},
+  styles: [
+    `
+      .markdown table {
+        width: auto !important;
+      }
+    `,
+  ],
+});

HISTORY.md → CHANGELOG.md

@@ -1,4 +1,6 @@
-# History
+# Changelog
+
+- https://github.com/react-component/notification/releases
 
 ## 4.3.0
 

README.md

@@ -1,15 +1,8 @@
 # rc-notification
----
 
 React Notification UI Component
 
-[![NPM version][npm-image]][npm-url]
-[![build status][github-actions-image]][github-actions-url]
-[![Test coverage][coveralls-image]][coveralls-url]
-[![Dependencies][david-image]][david-url]
-[![DevDependencies][david-dev-image]][david-dev-url]
-[![npm download][download-image]][download-url]
-[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-notification.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-notification
@@ -52,7 +45,7 @@ Notification.newInstance({}, notification => {
 
 http://localhost:8001
 
-online example: http://react-component.github.io/notification/
+online example: https://notification-react-component.vercel.app
 
 ## API
 

docs/demo/hooks.md

@@ -0,0 +1,3 @@
+## hooks
+
+<code src="../examples/hooks.tsx">

docs/demo/simple.md

@@ -0,0 +1,3 @@
+## simple
+
+<code src="../examples/simple.tsx">

examples/hooks.tsx → docs/examples/hooks.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Notification from '../src';
-import '../assets/index.less';
-import { NotificationInstance } from '../src/Notification';
+import Notification from 'rc-notification';
+import '../../assets/index.less';
+import { NotificationInstance } from 'rc-notification/Notification';
 
 let notificationInstance: NotificationInstance = null;
 Notification.newInstance({}, n => {

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

@@ -1,9 +1,9 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Notification from '../src';
-import '../assets/index.less';
+import Notification from 'rc-notification';
+import '../../assets/index.less';
 
-let notification = null;
+let notification: any = null;
 Notification.newInstance(
   {
     maxCount: 5,

docs/index.md

@@ -0,0 +1,5 @@
+---
+title: rc-notification
+---
+
+<embed src="../README.md"></embed>

package.json

@@ -33,12 +33,14 @@
   "license": "MIT",
   "main": "lib/index",
   "module": "es/index",
+  "typings": "es/index.d.ts",
   "scripts": {
-    "start": "cross-env NODE_ENV=development father doc dev --storybook",
-    "build": "father doc build --storybook",
+    "start": "dumi dev",
+    "build": "dumi build",
+    "docs:deploy": "gh-pages -d .doc",
     "compile": "father build && lessc assets/index.less assets/index.css",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
-    "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
+    "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "test": "father test",
     "now-build": "npm run build"
   },
@@ -53,15 +55,17 @@
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
     "cross-env": "^7.0.0",
+    "dumi": "^1.1.7",
     "enzyme": "^3.3.0",
     "enzyme-to-json": "^3.4.0",
     "eslint": "^7.8.1",
     "father": "^2.13.2",
+    "gh-pages": "^3.1.0",
     "less": "^3.10.3",
     "np": "^6.0.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "typescript": "^3.7.5"
+    "typescript": "^4.0.5"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",

src/Notice.tsx

@@ -96,7 +96,7 @@ export default class Notice extends Component<NoticeProps> {
     } = this.props;
     const componentClass = `${prefixCls}-notice`;
     const dataOrAriaAttributeProps = Object.keys(this.props).reduce(
-      (acc: { [key: string]: string }, key: string) => {
+      (acc: Record<string, string>, key: string) => {
         if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') {
           acc[key] = (this.props as any)[key];
         }

src/Notification.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { Component, ReactText } from 'react';
+import { Component } from 'react';
+import type { ReactText } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { CSSMotionList } from 'rc-motion';
-import Notice, { NoticeProps } from './Notice';
+import type { NoticeProps } from './Notice';
+import Notice from './Notice';
 import useNotification from './useNotification';
 
 let seed = 0;
@@ -95,9 +97,9 @@ class Notification extends Component<NotificationProps, NotificationState> {
       key,
     };
     const { maxCount } = this.props;
-    this.setState(previousState => {
+    this.setState((previousState: NotificationState) => {
       const { notices } = previousState;
-      const noticeIndex = notices.map(v => v.notice.key).indexOf(key);
+      const noticeIndex = notices.map((v) => v.notice.key).indexOf(key);
       const updatedNotices = notices.concat();
       if (noticeIndex !== -1) {
         updatedNotices.splice(noticeIndex, 1, { notice, holderCallback });
@@ -111,7 +113,7 @@ class Notification extends Component<NotificationProps, NotificationState> {
           // zombieJ: Not know why use `updateKey`. This makes Notice infinite loop in jest.
           // Change to `updateMark` for compare instead.
           // https://github.com/react-component/notification/commit/32299e6be396f94040bfa82517eea940db947ece
-          notice.key = updatedNotices[0].notice.key;
+          notice.key = updatedNotices[0].notice.key as React.Key;
           notice.updateMark = getUuid();
 
           // zombieJ: That's why. User may close by key directly.
@@ -130,7 +132,7 @@ class Notification extends Component<NotificationProps, NotificationState> {
   };
 
   remove = (removeKey: React.Key) => {
-    this.setState(({ notices }) => ({
+    this.setState(({ notices }: NotificationState) => ({
       notices: notices.filter(({ notice: { key, userPassKey } }) => {
         const mergedKey = userPassKey || key;
         return mergedKey !== removeKey;
@@ -175,8 +177,8 @@ class Notification extends Component<NotificationProps, NotificationState> {
       } as NoticeProps & { key: ReactText };
 
       // Give to motion
-      noticeKeys.push(key);
-      this.noticePropsMap[key] = { props: noticeProps, holderCallback };
+      noticeKeys.push(key as React.Key);
+      this.noticePropsMap[key as React.Key] = { props: noticeProps, holderCallback };
     });
 
     return (
@@ -198,7 +200,7 @@ class Notification extends Component<NotificationProps, NotificationState> {
                   key={key}
                   className={classNames(motionClassName, `${prefixCls}-hook-holder`)}
                   style={{ ...motionStyle }}
-                  ref={div => {
+                  ref={(div) => {
                     if (typeof key === 'undefined') {
                       return;
                     }

type.d.ts

@@ -0,0 +1,3 @@
+declare module '*.css';
+
+declare module '*.less';