From ef34c14889d4a167607bc1555d01ce14182ac95c Mon Sep 17 00:00:00 2001
From: Jack <panjie@growingio.com>
Date: Tue, 5 Jan 2021 13:30:26 +0800
Subject: [PATCH] docs(loading): add stories and document for loading component
 (#681)

Delete demo files of loading component in website.
---
 src/components/loading/Loading.mdx            | 42 +++++++++
 src/components/loading/Loading.stories.tsx    | 90 ++++++++++++++++---
 src/typings/index.d.ts                        |  1 +
 .../components/basic/loading/demos/base.tsx   | 12 ---
 .../basic/loading/demos/blurColor.tsx         | 11 ---
 .../basic/loading/demos/debounce.tsx          | 19 ----
 .../components/basic/loading/demos/index.less | 25 ------
 .../basic/loading/demos/indicator.tsx         | 21 -----
 .../components/basic/loading/demos/size.tsx   | 12 ---
 .../basic/loading/demos/wrapper.tsx           | 11 ---
 .../components/basic/loading/index.zh-CN.md   | 40 ---------
 11 files changed, 123 insertions(+), 161 deletions(-)
 create mode 100644 src/components/loading/Loading.mdx
 delete mode 100644 website/src/components/basic/loading/demos/base.tsx
 delete mode 100644 website/src/components/basic/loading/demos/blurColor.tsx
 delete mode 100644 website/src/components/basic/loading/demos/debounce.tsx
 delete mode 100644 website/src/components/basic/loading/demos/index.less
 delete mode 100644 website/src/components/basic/loading/demos/indicator.tsx
 delete mode 100644 website/src/components/basic/loading/demos/size.tsx
 delete mode 100644 website/src/components/basic/loading/demos/wrapper.tsx
 delete mode 100644 website/src/components/basic/loading/index.zh-CN.md

diff --git a/src/components/loading/Loading.mdx b/src/components/loading/Loading.mdx
new file mode 100644
index 0000000000..0b11c37f9b
--- /dev/null
+++ b/src/components/loading/Loading.mdx
@@ -0,0 +1,42 @@
+import { Subtitle, ArgsTable } from '@storybook/addon-docs/blocks';
+import Loading from './Loading';
+
+# Loading 加载中
+
+<Subtitle>用于页面和区块的加载中状态。</Subtitle>
+
+## 使用规范
+
+1. 如果 Loading 是由按钮触发的，请将 Loading 放置在按钮中，然后在 Loading 可见时禁用该按钮。
+2. 如果页面的仅一部分显示新内容或正在更新，则将 Loading 放置在页面的该部分中。
+3. 仅在预期等待的时间超过 1S 时显示 Loading 。
+
+## 参数说明
+
+<ArgsTable of={Loading} />
+
+## 代码演示
+
+### 默认
+
+默认显示状态，可通过 Controls 来控制各种属性。
+
+[Example](/?path=/story/basic-components-loading--default)
+
+### 赋予内容加载状态
+
+可以直接把内容嵌入到 Loading 中，将现有容器变为加载状态。
+
+[Example](/?path=/story/basic-components-loading--container)
+
+### 自定义符号
+
+替换默认的加载图形，可以是任意的元素。
+
+[Example](/?path=/story/basic-components-loading--indicator)
+
+### 设置延时
+
+延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。
+
+[Example](/?path=/story/basic-components-loading--delay)
diff --git a/src/components/loading/Loading.stories.tsx b/src/components/loading/Loading.stories.tsx
index 658e4519be..9b944f76ff 100644
--- a/src/components/loading/Loading.stories.tsx
+++ b/src/components/loading/Loading.stories.tsx
@@ -1,19 +1,89 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0'
-
-import Loading from './index'
-import { LoadingProps } from './interface'
-import './style'
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { LoadingOutlined } from '@gio-design/icons';
+import Docs from './Loading.mdx';
+import Loading from './index';
+import Button from '../button';
+import Tabs, { TabPane } from '../tabs';
+import { LoadingProps } from './interface';
+import './style';
 
 export default {
-    title: 'Components/Basic/Loading',
-    component: Loading,
+  title: 'Basic Components/Loading',
+  component: Loading,
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
 } as Meta;
 
-const Template : Story<LoadingProps> = (args) => <Loading {...args} />
+const defaultTabs = (
+  <Tabs>
+    <TabPane tab="我的" key="1">
+      <ul>
+        <li>Event 1</li>
+        <li>Event 1</li>
+        <li>Event 1</li>
+        <li>Event 1</li>
+      </ul>
+    </TabPane>
+    <TabPane tab="全部" key="2">
+      <ul>
+        <li>Event 2</li>
+        <li>Event 2</li>
+        <li>Event 2</li>
+        <li>Event 2</li>
+      </ul>
+    </TabPane>
+    <TabPane tab="共享" key="3">
+      <ul>
+        <li>Event 3</li>
+        <li>Event 3</li>
+        <li>Event 3</li>
+        <li>Event 3</li>
+      </ul>
+    </TabPane>
+  </Tabs>
+);
+
+const Template: Story<LoadingProps> = (args) => <Loading {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    loading: true,
-    titlePosition: 'right',
+  loading: true,
+  titlePosition: 'right',
+};
+
+export const Container = Template.bind({});
+Container.args = {
+  children: defaultTabs,
+};
+
+export const Indicator = Template.bind({});
+Indicator.args = {
+  indicator: <LoadingOutlined rotating />,
+  title: false,
+};
+
+interface DelayProps {
+  delay: number;
 }
+
+const DelayTemplate: Story<DelayProps> = (args) => {
+  const { delay } = args;
+  const [loading, setLoading] = React.useState(true);
+  return (
+    <>
+      <Loading titlePosition="right" loading={loading} delay={delay}>
+        {defaultTabs}
+      </Loading>
+      <br />
+      <Button onClick={() => setLoading(!loading)}>click me</Button>
+    </>
+  );
+};
+export const Delay = DelayTemplate.bind({});
+Delay.args = {
+  delay: 1000,
+};
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 2218a66a6b..7575d80f2f 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -7,3 +7,4 @@ declare module 'rc-calendar';
 declare module 'rc-calendar/lib/Picker';
 declare module 'rc-calendar/lib/locale/zh_CN';
 declare module 'rc-calendar/lib/RangeCalendar';
+declare module '*.mdx';
diff --git a/website/src/components/basic/loading/demos/base.tsx b/website/src/components/basic/loading/demos/base.tsx
deleted file mode 100644
index 2c2d5d811c..0000000000
--- a/website/src/components/basic/loading/demos/base.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Loading } from '@gio-design/components';
-import '@gio-design/components/es/components/loading/style/index.css';
-import './index.less';
-
-export default () => (
-  <div className="displayBaseLoading">
-    <Loading titlePosition="right" />
-    <Loading titlePosition="bottom" />
-    <Loading title={false} />
-  </div>
-);
diff --git a/website/src/components/basic/loading/demos/blurColor.tsx b/website/src/components/basic/loading/demos/blurColor.tsx
deleted file mode 100644
index 44e4a9f911..0000000000
--- a/website/src/components/basic/loading/demos/blurColor.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Loading } from '@gio-design/components';
-import Tabs from '../../tabs/demo/block.tsx';
-import '@gio-design/components/es/components/loading/style/index.css';
-import './index.less';
-
-export default () => (
-  <Loading titlePosition="right" blurColor="black">
-    <Tabs />
-  </Loading>
-);
diff --git a/website/src/components/basic/loading/demos/debounce.tsx b/website/src/components/basic/loading/demos/debounce.tsx
deleted file mode 100644
index 2c6545befa..0000000000
--- a/website/src/components/basic/loading/demos/debounce.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { useState } from 'react';
-import { Loading, Button } from '@gio-design/components';
-import Tabs from '../../tabs/demo/block.tsx';
-import '@gio-design/components/es/components/loading/style/index.css';
-import '@gio-design/components/es/components/button/style/index.css';
-import './index.less';
-
-export default () => {
-  const [loading, setLoading] = useState(true);
-  return (
-    <>
-      <Loading titlePosition="right" loading={loading} delay={1000}>
-        <Tabs />
-      </Loading>
-      <br />
-      <Button onClick={() => setLoading(!loading)}>click me</Button>
-    </>
-  );
-};
diff --git a/website/src/components/basic/loading/demos/index.less b/website/src/components/basic/loading/demos/index.less
deleted file mode 100644
index 1aec6457c3..0000000000
--- a/website/src/components/basic/loading/demos/index.less
+++ /dev/null
@@ -1,25 +0,0 @@
-.displayBaseLoading {
-  .gio-loading {
-    margin: 0 20px;
-  }
-  .gio-loading-indicator > span > svg {
-    animation: loadingCircle 1s infinite linear;
-    @keyframes loadingCircle {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
-  .gio-btn {
-    margin: 10px;
-    .gio-loading {
-      margin: 0;
-    }
-  }
-}
-
-.gio-loading-container {
-  .gio-tabs-tabpane {
-    height: 300px;
-  }
-}
diff --git a/website/src/components/basic/loading/demos/indicator.tsx b/website/src/components/basic/loading/demos/indicator.tsx
deleted file mode 100644
index e5fde07b74..0000000000
--- a/website/src/components/basic/loading/demos/indicator.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { Loading, Button } from '@gio-design/components';
-import { LoadingOutlined } from '@gio-design/icons';
-import '@gio-design/components/es/components/loading/style/index.css';
-import '@gio-design/components/es/components/button/style/index.css';
-import './index.less';
-
-export default () => (
-  <div className="displayBaseLoading">
-    <Button
-      icon={<Loading titlePosition="right" indicator={<LoadingOutlined />} title={false} />}
-      style={{ lineHeight: 0 }}
-    />
-
-    <Button
-      disabled
-      icon={<Loading titlePosition="right" indicator={<LoadingOutlined />} title={false} />}
-      style={{ lineHeight: 0 }}
-    />
-  </div>
-);
diff --git a/website/src/components/basic/loading/demos/size.tsx b/website/src/components/basic/loading/demos/size.tsx
deleted file mode 100644
index 3849b33c4d..0000000000
--- a/website/src/components/basic/loading/demos/size.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Loading } from '@gio-design/components';
-import '@gio-design/components/es/components/loading/style/index.css';
-import './index.less';
-
-export default () => (
-  <div className="displayBaseLoading">
-    <Loading size="small" />
-    <Loading size="middle" />
-    <Loading size="large" />
-  </div>
-);
diff --git a/website/src/components/basic/loading/demos/wrapper.tsx b/website/src/components/basic/loading/demos/wrapper.tsx
deleted file mode 100644
index 4499930d80..0000000000
--- a/website/src/components/basic/loading/demos/wrapper.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Loading } from '@gio-design/components';
-import Tabs from '../../tabs/demo/block.tsx';
-import '@gio-design/components/es/components/loading/style/index.css';
-import './index.less';
-
-export default () => (
-  <Loading titlePosition="right">
-    <Tabs />
-  </Loading>
-);
diff --git a/website/src/components/basic/loading/index.zh-CN.md b/website/src/components/basic/loading/index.zh-CN.md
deleted file mode 100644
index f89dbf9388..0000000000
--- a/website/src/components/basic/loading/index.zh-CN.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Loading 加载中
-nav:
-  order: 2
-  title: 组件
-group:
-  title: 基础组件
-  order: 1
----
-
-# Loading 加载中
-
-用于页面和区块的加载中状态。
-
-1. 如果 Loading 是由按钮触发的，请将 Loading 放置在按钮中，然后在 Loading 可见时禁用该按钮。
-2. 如果页面的仅一部分显示新内容或正在更新，则将 Loading 放置在页面的该部分中。
-3. 仅在预期等待的时间超过 1S 时显示 Loading 。
-
-## 代码演示
-
-<code src='./demos/base.tsx' title='基础' desc='可以设置文字显示的位置，也可以不显示文字' />
-<code src='./demos/size.tsx' title='尺寸' desc='可以设置可以设置三种尺寸' />
-<code src='./demos/wrapper.tsx' title='赋予内容加载状态' desc='可以直接把内容嵌入到Loading中，将现有容器变为加载状态。' />
-<code src='./demos/debounce.tsx' title='延时' desc='延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。' />
-<code src='./demos/blurColor.tsx' title='设置模糊蒙层颜色' desc='支持两种蒙层颜色' />
-<code src='./demos/indicator.tsx' title='自定义符号' desc='替换默认的加载图形，可以是任意的元素' />
-
-## 参数说明
-
-| 参数          | 说明                               | 类型                           | 默认值      |
-| ------------- | ---------------------------------- | ------------------------------ | ----------- |
-| loading       | 是否为加载中状态                   | boolean                        | true        |
-| title         | 自定义描述文案                     | string                         | '加载中...' |
-| titlePosition | 描述文案相对于指示符号的位置       | 'right' \| 'bottom'            | 'right'     |
-| delay         | 延迟显示加载效果的时间（防止闪烁） | number(ms)                     | 0           |
-| children      | 设置被包裹的元素                   | React.ReactDOM                 |             |
-| prefixCls     | 替换类前缀                         | string                         |             |
-| size          | 设置默认指示符号大小               | 'small' \| 'middle' \| 'large' | 'large'     |
-| indicator     | 自定义指示符号                     | React.Element                  |             |
-| blurColor     | 设置模糊蒙层颜色                   | 'white' \| 'block'             | 'white'     |