docs(loading): add stories and document for loading component (#681)

Delete demo files of loading component in website.

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)

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,
+};

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';