chore: use dumi

.gitignore

@@ -33,3 +33,7 @@ es/
 .storybook
 .doc
 .history
+# umi
+.umi
+.umi-production
+.umi-test

.umirc.ts

@@ -0,0 +1,19 @@
+// more config: https://d.umijs.org/config
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'rc-image',
+  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;
+      }
+    `,
+  ]
+});

README.md

@@ -1,7 +1,5 @@
 # rc-image
 
----
-
 React Image.
 
 [![NPM version][npm-image]][npm-url] [![CircleCI status][circleci-image]][circleci-url] [![Test coverage][codecov-image]][codecov-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]
@@ -34,8 +32,6 @@ React Image.
 - [x] Fallback
 - [x] Multiple Preview
 
-### Keyboard
-
 ## install
 
 [![rc-image](https://nodei.co/npm/rc-image.png)](https://npmjs.org/package/rc-image)
@@ -47,7 +43,7 @@ npm install
 npm start
 ```
 
-```jsx
+```js
 const Image = require('rc-image');
 
 ReactDOM.render(
@@ -70,7 +66,7 @@ ReactDOM.render(
 
 preview the merged src
 
-```jsx
+```js
 const Image = require('rc-image');
 
 ReactDOM.render(

docs/demo/basic.md

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

docs/demo/controlled.md

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

docs/demo/controlledWithGroup.md

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

docs/demo/fallback.md

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

docs/demo/placeholder.md

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

docs/demo/previewgroup.md

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

docs/demo/thumbnail.md

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Image from '../src';
-import '../assets/index.less';
+import Image from 'rc-image';
+import '../../assets/index.less';
 
 export default function Base() {
   return (

examples/controlled.tsx → docs/examples/controlled.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Image from '../src';
-import '../assets/index.less';
+import Image from 'rc-image';
+import '../../assets/index.less';
 
 export default function Base() {
   const [visible, setVisible] = React.useState(false);

examples/controlledWithGroup.tsx → docs/examples/controlledWithGroup.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable global-require */
 import * as React from 'react';
-import Image from '../src';
-import '../assets/index.less';
+import Image from 'rc-image';
+import '../../assets/index.less';
 
 export default function Base() {
   const [visible, setVisible] = React.useState(false);

examples/fallback.tsx → docs/examples/fallback.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Image from '../src';
-import '../assets/index.less';
+import Image from 'rc-image';
+import '../../assets/index.less';
 
 export default function Base() {
   return (

examples/placeholder.tsx → docs/examples/placeholder.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Image from '../src';
-import '../assets/index.less';
+import Image from 'rc-image';
+import '../../assets/index.less';
 
 export default function Base() {
   const [random, setRandom] = React.useState(Date.now());

examples/previewgroup.tsx → docs/examples/previewgroup.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable global-require */
 import * as React from 'react';
-import Image from '../src';
-import '../assets/index.less';
+import Image from 'rc-image';
+import '../../assets/index.less';
 
 export default function PreviewGroup() {
   return (

examples/thumbnail.tsx → docs/examples/thumbnail.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Image from '../src';
-import '../assets/index.less';
+import Image from 'rc-image';
+import '../../assets/index.less';
 
 export default function Thumbnail() {
   return (

docs/index.md

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

now.json

@@ -7,5 +7,8 @@
       "use": "@now/static-build",
       "config": { "distDir": ".doc" }
     }
+  ],
+  "routes": [
+    { "src": "/(.*)", "dest": "/dist/$1" }
   ]
 }

package.json

@@ -26,14 +26,16 @@
   },
   "license": "MIT",
   "scripts": {
-    "start": "cross-env NODE_ENV=development father doc dev --storybook",
-    "build": "father doc build --storybook",
+    "start": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
     "compile": "father build && lessc assets/index.less assets/index.css",
     "prepublishOnly": "npm run compile && np --yolo --no-publish --any-branch",
     "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"
+    "coverage": "father test --coverage",
+    "now-build": "npm run docs:build"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -54,11 +56,13 @@
     "@types/react-dom": "^16.9.8",
     "@umijs/fabric": "^2.2.2",
     "cross-env": "^7.0.2",
+    "dumi": "^1.1.4",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.5.0",
     "eslint": "^7.6.0",
     "father": "^2.29.6",
+    "glob": "^7.1.6",
     "less": "^3.12.2",
     "np": "^7.0.0",
     "react": "^16.13.1",

tsconfig.json

@@ -6,6 +6,11 @@
     "jsx": "preserve",
     "declaration": true,
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "rc-image": ["src/index.ts"]
+    }
   }
 }

typings.d.ts

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

update-example.js

@@ -0,0 +1,31 @@
+/*
+  用于 dumi 改造使用，
+  可用于将 examples 的文件批量修改为 demo 引入形式，
+  其他项目根据具体情况使用。
+*/
+
+const fs = require('fs');
+const glob = require('glob');
+
+const suffix = '.tsx';
+
+const paths = glob.sync(`./docs/examples/*${suffix}`);
+
+paths.forEach(path => {
+  const name = path.split('/').pop().split('.')[0];
+  fs.writeFile(
+    `./docs/demo/${name}.md`,
+    `## ${name}
+
+<code src="../examples/${name}${suffix}">
+`,
+    'utf8',
+    function(error) {
+      if(error){
+        console.log(error);
+        return false;
+      }
+      console.log(`${name} 更新成功~`);
+    }
+  )
+});