chore: use dumi (#373)

.eslintrc.js

@@ -15,10 +15,7 @@ module.exports = {
     'react/no-unused-prop-types': 0,
     'max-len': 0,
     'max-classes-per-file': 0,
-    'import/no-extraneous-dependencies': [
-      'error',
-      { devDependencies: true, optionalDependencies: false, peerDependencies: false },
-    ],
+    'import/no-extraneous-dependencies': 0,
     'brace-style': 0,
     'no-unused-expressions': 0,
     '@typescript-eslint/no-unused-expressions': 1,

.gitignore

@@ -31,3 +31,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-tabs',
+  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,5 +1,4 @@
-# History
-----
+# Changelog
 
 https://github.com/react-component/tabs/releases
 

README.md

@@ -4,13 +4,7 @@
 
 React Tabs 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-tabs.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-tabs
@@ -53,7 +47,7 @@ online example: https://tabs.react-component.now.sh/
 
 ## Usage
 
-```jsx
+```js
 import Tabs, { TabPane } from 'rc-tabs';
 
 var callback = function(key) {};

docs/demo/basic.md

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

docs/demo/extra.md

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

docs/demo/mix.md

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

docs/demo/overflow.md

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

docs/demo/position.md

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

docs/demo/renderTabBar-dragable.md

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

docs/demo/renderTabBar-sticky.md

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

docs/demo/renderTabBar-use-panes.md

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

examples/basic.tsx → docs/examples/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Tabs, { TabPane } from '../src';
-import '../assets/index.less';
+import Tabs, { TabPane } from 'rc-tabs';
+import '../../assets/index.less';
 
 export default () => {
   const [destroy, setDestroy] = React.useState(false);

examples/extra.tsx → docs/examples/extra.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Tabs, { TabPane } from '../src';
-import '../assets/index.less';
+import Tabs, { TabPane } from 'rc-tabs';
+import '../../assets/index.less';
 
 const tabs: React.ReactElement[] = [];
 

examples/mix.tsx → docs/examples/mix.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Tabs, { TabPane } from '../src';
-import '../assets/index.less';
+import Tabs, { TabPane } from 'rc-tabs';
+import '../../assets/index.less';
 
 function getTabPanes(count = 50) {
   const tabs: React.ReactElement[] = [];

examples/overflow.tsx → docs/examples/overflow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Tabs, { TabPane } from '../src';
-import '../assets/index.less';
+import Tabs, { TabPane } from 'rc-tabs';
+import '../../assets/index.less';
 
 const tabs: React.ReactElement[] = [];
 

examples/position.tsx → docs/examples/position.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Tabs, { TabPane } from '../src';
-import '../assets/index.less';
+import Tabs, { TabPane } from 'rc-tabs';
+import '../../assets/index.less';
 
 export default () => {
   const [position, setPosition] = React.useState<any>('left');

examples/renderTabBar-dragable.tsx → docs/examples/renderTabBar-dragable.tsx

@@ -2,8 +2,8 @@
 import React from 'react';
 import { DndProvider, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-import Tabs from '../src';
-import '../assets/index.less';
+import Tabs from 'rc-tabs';
+import '../../assets/index.less';
 
 const { TabPane } = Tabs;
 

examples/renderTabBar-sticky.tsx → docs/examples/renderTabBar-sticky.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StickyContainer, Sticky } from 'react-sticky';
-import Tabs, { TabPane } from '../src';
-import '../assets/index.less';
+import Tabs, { TabPane } from 'rc-tabs';
+import '../../assets/index.less';
 
 const renderTabBar = (props, DefaultTabBar) => (
   <Sticky bottomOffset={80}>

examples/renderTabBar-use-panes.tsx → docs/examples/renderTabBar-use-panes.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import Tabs, { TabPane } from '../src';
-import '../assets/index.less';
+import Tabs, { TabPane } from 'rc-tabs';
+import '../../assets/index.less';
 
 const renderTabBar = props => {
   return (
     <div>
       {props.panes.map(pane => {
-        const key = pane.key;
+        const { key } = pane;
         return <span key={key}>{key}</span>;
       })}
     </div>

docs/index.md

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

package.json

@@ -29,13 +29,14 @@
   },
   "license": "MIT",
   "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 && npm run compile:style",
     "test": "father test",
     "coverage": "father test --coverage",
     "now-build": "npm run build",
-    "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
+    "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "compile:style": "lessc --js assets/index.less assets/index.css",
     "prepublishOnly": "npm run lint && npm run test && npm run compile && np --yolo --no-publish"
   },
@@ -48,12 +49,14 @@
     "@umijs/fabric": "^2.3.1",
     "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",
+    "dumi": "^1.1.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "enzyme-to-json": "^3.3.4",
     "eslint": "^7.0.0",
     "fastclick": "~1.0.6",
     "father": "^2.29.2",
+    "gh-pages": "^3.1.0",
     "history": "^1.17.0",
     "immutability-helper": "^3.0.1",
     "less": "^3.11.1",
@@ -68,7 +71,7 @@
     "react-sticky": "^6.0.3",
     "react-test-renderer": "^16.0.0",
     "sortablejs": "^1.7.0",
-    "typescript": "^4.0.0"
+    "typescript": "^4.0.5"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",

src/TabContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { Tab } from './interface';
+import type { Tab } from './interface';
 
 export interface TabContextProps {
   tabs: Tab[];

src/TabNavList/AddButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EditableConfig, TabsLocale } from '../interface';
+import type { EditableConfig, TabsLocale } from '../interface';
 
 export interface AddButtonProps {
   prefixCls: string;

src/TabNavList/OperationNode.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import Menu, { MenuItem } from 'rc-menu';
 import Dropdown from 'rc-dropdown';
-import { Tab, TabsLocale, EditableConfig } from '../interface';
+import type { Tab, TabsLocale, EditableConfig } from '../interface';
 import AddButton from './AddButton';
 
 export interface OperationNodeProps {

src/TabNavList/TabNode.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
-import { Tab, TabPosition, EditableConfig } from '../interface';
+import type { Tab, TabPosition, EditableConfig } from '../interface';
 
 export interface TabNodeProps {
   id: string;

src/TabNavList/index.tsx

@@ -5,7 +5,7 @@ import raf from 'rc-util/lib/raf';
 import ResizeObserver from 'rc-resize-observer';
 import useRaf, { useRafState } from '../hooks/useRaf';
 import TabNode from './TabNode';
-import {
+import type {
   TabSizeMap,
   TabPosition,
   RenderTabBar,

src/TabPanelList/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import TabContext from '../TabContext';
-import { TabPosition, AnimatedConfig } from '../interface';
+import type { TabPosition, AnimatedConfig } from '../interface';
 
 export interface TabPanelListProps {
   activeKey: React.Key;

src/Tabs.tsx

@@ -7,8 +7,9 @@ import isMobile from 'rc-util/lib/isMobile';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import TabNavList from './TabNavList';
 import TabPanelList from './TabPanelList';
-import TabPane, { TabPaneProps } from './TabPanelList/TabPane';
-import {
+import type { TabPaneProps } from './TabPanelList/TabPane';
+import TabPane from './TabPanelList/TabPane';
+import type {
   TabPosition,
   RenderTabBar,
   TabsLocale,

src/hooks/useOffsets.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TabSizeMap, TabOffsetMap, Tab, TabOffset } from '../interface';
+import type { TabSizeMap, TabOffsetMap, Tab, TabOffset } from '../interface';
 
 const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0 };
 

src/hooks/useVisibleRange.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { Tab, TabOffsetMap } from '../interface';
-import { TabNavListProps } from '../TabNavList';
+import type { Tab, TabOffsetMap } from '../interface';
+import type { TabNavListProps } from '../TabNavList';
 
 const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 };
 

src/index.ts

@@ -1,6 +1,10 @@
-import Tabs, { TabsProps } from './Tabs';
-import TabPane, { TabPaneProps } from './TabPanelList/TabPane';
+import Tabs from './Tabs';
+import type { TabsProps } from './Tabs';
+import TabPane from './TabPanelList/TabPane';
+import type { TabPaneProps } from './TabPanelList/TabPane'
 
-export { TabPane, TabsProps, TabPaneProps };
+export type { TabsProps, TabPaneProps };
+
+export { TabPane }
 
 export default Tabs;

src/interface.ts

@@ -1,4 +1,4 @@
-import { TabPaneProps } from './TabPanelList/TabPane';
+import type { TabPaneProps } from './TabPanelList/TabPane';
 
 export type TabSizeMap = Map<
   React.Key,

tsconfig.json

@@ -3,6 +3,7 @@
     "target": "esnext",
     "moduleResolution": "node",
     "baseUrl": "./",
+    "lib": ["dom", "es2017"],
     "jsx": "preserve",
     "declaration": true,
     "skipLibCheck": true,

type.d.ts

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