docs: use dumi2.x (#38)

* fix: fix type derivation error

* chore: father@4

* chore: remove less deps

* chore: 使用 rc 组织下的 father-plugin

* chore: 使用 rc-test 增强 jest

* chore: 移除多余配置

* chore(deps): add dumi@2

chore: 修复 dumi 配置文件错误问题

* docs: 迁移文档

* chore(pkg): update scripts

* docs: update alias

* style: format code

.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-motion$': path.resolve('src'),
+ 'rc-motion/es': path.resolve('src'),
+ },
+ favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
+ themeConfig: {
+ name: 'Motion',
+ 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

@@ -28,4 +28,9 @@ es
 yarn.lock
 package-lock.json
 coverage/
-.doc
+.doc
+
+# dumi
+.dumi/tmp
+.dumi/tmp-production
+.dumi/tmp-test

README.md

@@ -1,12 +1,6 @@
 # rc-motion
 
-[![NPM version][npm-image]][npm-url]
-[![npm download][download-image]][download-url]
-[![build status][github-actions-image]][github-actions-url]
-[![Codecov][codecov-image]][codecov-url]
-[![Dependencies][david-image]](david-url)
-[![DevDependencies][david-dev-image]][david-dev-url]
-[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![Dependencies][david-image]](david-url) [![DevDependencies][david-dev-image]][david-dev-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-motion.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-motion
@@ -35,7 +29,7 @@ https://react-component.github.io/motion/
 
 ## Example
 
-```tsx
+```js
 import CSSMotion from 'rc-motion';
 
 export default ({ visible }) => (

docs/demo/basic.md

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

docs/demo/deadline.md

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

docs/demo/list.md

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

docs/demo/ssr.md

@@ -0,0 +1,8 @@
+---
+title: ssr
+nav:
+ title: Demo
+ path: /demo
+---
+
+<code src="../examples/ssr.tsx" iframe="500"></code>

docs/demo/transition-inside-debug.md

@@ -0,0 +1,8 @@
+---
+title: transition-inside-debug
+nav:
+ title: Demo
+ path: /demo
+---
+
+<code src="../examples/transition-inside-debug.tsx"></code>

examples/CSSMotion.less → docs/examples/basic.less

@@ -9,10 +9,10 @@
 
 .demo-block {
  display: block;
- height: 300px;
  width: 300px;
- background: red;
+ height: 300px;
  overflow: hidden;
+ background: red;
 }
 
 .transition {
@@ -30,8 +30,8 @@
  }
 
  &.transition-leave-active {
- opacity: 0;
  background: green;
+ opacity: 0;
  }
 }
 
@@ -42,8 +42,8 @@
  &.animation-appear,
  &.animation-enter {
  animation-name: enter;
- animation-fill-mode: both;
  animation-play-state: paused;
+ animation-fill-mode: both;
  }
 
  &.animation-appear.animation-appear-active,
@@ -54,8 +54,8 @@
 
  &.animation-leave {
  animation-name: leave;
- animation-fill-mode: both;
  animation-play-state: paused;
+ animation-fill-mode: both;
 
  &.animation-leave-active {
  animation-name: leave;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import CSSMotion from '../src';
-import './CSSMotion.less';
+import CSSMotion from 'rc-motion';
+import './basic.less';
 
 interface DemoState {
  show: boolean;
@@ -30,7 +30,7 @@ const Div = React.forwardRef<HTMLDivElement, any>((props, ref) => {
  return <div {...props} ref={ref} />;
 });
 
-class Demo extends React.Component<{}, DemoState> {
+class App extends React.Component<{}, DemoState> {
  state: DemoState = {
  show: true,
  forceRender: false,
@@ -222,4 +222,4 @@ class Demo extends React.Component<{}, DemoState> {
  }
 }
 
-export default Demo;
+export default App;

examples/CSSMotionDeadline.tsx → docs/examples/deadline.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
-import CSSMotion from '../src';
-import './CSSMotion.less';
+import CSSMotion from 'rc-motion';
+import './basic.less';
 
 interface DemoState {
  show: boolean;
 }
 
-class Demo extends React.Component<{}, DemoState> {
+class App extends React.Component<{}, DemoState> {
  state = {
  show: true,
  };
@@ -64,4 +64,4 @@ class Demo extends React.Component<{}, DemoState> {
  }
 }
 
-export default Demo;
+export default App;

examples/CSSMotionList.less → docs/examples/list.less

@@ -1,24 +1,24 @@
-@import './CSSMotion.less';
+@import './basic.less';
 
-.demo-block {
- display: inline-block;
- height: 100px;
- width: 100px;
- border-right: 5px solid #FFF;
+.list-demo-block {
  position: relative;
+ display: inline-block;
  box-sizing: border-box;
+ width: 100px;
+ height: 100px;
+ background: red;
+ border-right: 5px solid #fff;
 
  > span {
- color: #FFF;
- font-size: 30px;
  position: absolute;
- left: 50%;
  top: 50%;
+ left: 50%;
+ color: #fff;
+ font-size: 30px;
  transform: translate(-50%, -50%);
  }
 }
 
-
 .transition {
- transition: all .5s;
-}
+ transition: all 0.5s;
+}

examples/CSSMotionList.tsx → docs/examples/list.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
-import { CSSMotionList } from '../src';
-import './CSSMotionList.less';
+import { CSSMotionList } from 'rc-motion';
+import './list.less';
 
 interface DemoState {
  count: number;
  checkedMap: Record<string, boolean>;
  keyList: React.Key[];
 }
 
-class Demo extends React.Component<{}, DemoState> {
+class App extends React.Component<{}, DemoState> {
  state: DemoState = {
  count: 1,
  checkedMap: {},
@@ -104,7 +104,7 @@ class Demo extends React.Component<{}, DemoState> {
  {({ key, background, className, style }) => {
  return (
  <div
- className={classNames('demo-block', className)}
+ className={classNames('list-demo-block', className)}
  style={{
  ...style,
  background,
@@ -122,6 +122,6 @@ class Demo extends React.Component<{}, DemoState> {
 
 export default () => (
  <React.StrictMode>
- <Demo />
+ <App />
  </React.StrictMode>
 );

examples/SSR.tsx → docs/examples/ssr.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { hydrate } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 import classNames from 'classnames';
-import { genCSSMotion } from '../src/CSSMotion';
-import CSSMotion from '../src';
-import './CSSMotion.less';
+import { genCSSMotion } from 'rc-motion/es/CSSMotion';
+import CSSMotion from 'rc-motion';
+import './basic.less';
 
 const ServerCSSMotion = genCSSMotion(false);
 
@@ -35,7 +35,7 @@ const MotionAppear = ({ supportMotion }: MotionAppearProps) => {
  );
 };
 
-const Demo = () => {
+const App = () => {
  const ssr = ReactDOMServer.renderToString(
  <MotionAppear supportMotion={false} />,
  );
@@ -59,4 +59,4 @@ const Demo = () => {
  );
 };
 
-export default Demo;
+export default App;

examples/TransitionInsideDebug.less → docs/examples/transition-inside-debug.less

@@ -8,14 +8,14 @@
 
 .inner-block {
  position: relative;
- left: 50px;
  top: 50px;
+ left: 50px;
  width: 100px;
  height: 100px;
- transition: background-color 1s linear;
  background-color: yellowgreen;
+ transition: background-color 1s linear;
 }
 
 .inner-block:hover {
  background-color: blueviolet;
-}
+}

examples/TransitionInsideDebug.tsx → docs/examples/transition-inside-debug.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import CSSMotion from '../src';
-import './TransitionInsideDebug.less';
+import CSSMotion from 'rc-motion';
+import './transition-inside-debug.less';
 
 export default function TransitionInsideDebug() {
  const [visible, setVisible] = React.useState(true);

docs/index.md

@@ -0,0 +1,7 @@
+---
+hero:
+ title: rc-motion
+ description: React lifecycle controlled motion library
+---
+
+<embed src="../README.md"></embed>

jest.config.js

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