doc: modify doc for button, collapse

.eslintrc

@@ -34,9 +34,6 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-unused-vars": "warn",
-    "@typescript-eslint/no-explicit-any": "off",
-    "tailwindcss/classnames-order": "warn",
-    "tailwindcss/no-custom-classname": "warn",
-    "tailwindcss/no-contradicting-classname": "error"
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }

packages/component/src/Button/demos/basic.tsx

@@ -1,38 +1,10 @@
 import React from 'react';
 import { Button } from 'aelf-design';
-import { Space } from 'antd';
 
 const App: React.FC = () => {
   return (
     <div>
-      <Space>
-        <Button size="mini">mini</Button>
-        <Button size="small">small</Button>
-        <Button size="medium">medium</Button>
-        <Button
-          onClick={() => {
-            console.log(3);
-          }}
-        >
-          default
-        </Button>
-        <Button
-          size="large"
-          onClick={() => {
-            console.log(1);
-          }}
-        >
-          large
-        </Button>
-        <Button
-          size="ultra"
-          onClick={() => {
-            console.log(1);
-          }}
-        >
-          ultra
-        </Button>
-      </Space>
+      <Button>default</Button>
     </div>
   );
 };

packages/component/src/Button/demos/debounce.tsx

@@ -1,19 +1,22 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { Button } from 'aelf-design';
 
 const App: React.FC = () => {
+  const [count, setCount] = useState(0);
+
   return (
     <div>
       <Button
         type="primary"
         size="medium"
-        millisecondOfThrottle={1000}
+        millisecondOfDebounce={1000}
         onClick={() => {
-          console.log('send');
+          setCount((c) => c + 1);
         }}
       >
-        send
+        debounced button
       </Button>
+      <p>current count: {count}</p>
     </div>
   );
 };

packages/component/src/Button/demos/size.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button } from 'aelf-design';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Space>
+        <Button size="mini">mini</Button>
+        <Button size="small">small</Button>
+        <Button size="medium">medium</Button>
+        <Button>default</Button>
+        <Button size="large">large</Button>
+        <Button size="ultra">ultra</Button>
+      </Space>
+    </div>
+  );
+};
+
+export default App;

packages/component/src/Button/demos/type.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { QueryIcon } from '@aelf-design/internal-icons';
+import { Button } from 'aelf-design';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Space direction="vertical">
+        <Space>
+          <Button type="primary">button</Button>
+          <Button>button</Button>
+          <Button type="dashed">button</Button>
+          <Button type="primary" ghost>
+            button
+          </Button>
+        </Space>
+        <Space>
+          <Button type="primary" danger>
+            button
+          </Button>
+          <Button type="primary" disabled>
+            button
+          </Button>
+          <Button type="text">button</Button>
+          <Button type="link">link</Button>
+          <Button type="primary" loading>
+            button
+          </Button>
+        </Space>
+        <Space>
+          <Button shape="circle" icon={<QueryIcon />} />
+          <Button shape="circle" type="primary" icon={<QueryIcon />} />
+          <Button shape="circle" type="dashed" icon={<QueryIcon />} />
+          <Button shape="circle" type="primary" ghost icon={<QueryIcon />} />
+          <Button shape="circle" danger icon={<QueryIcon />} />
+        </Space>
+        <Space>
+          <Button icon={<QueryIcon />} />
+          <Button type="primary" icon={<QueryIcon />} />
+          <Button type="dashed" icon={<QueryIcon />} />
+          <Button type="primary" ghost icon={<QueryIcon />} />
+          <Button danger icon={<QueryIcon />} />
+        </Space>
+        <Space>
+          <Button icon={<QueryIcon />}>button</Button>
+          <Button type="primary" icon={<QueryIcon />}>
+            button
+          </Button>
+          <Button type="dashed" icon={<QueryIcon />}>
+            button
+          </Button>
+          <Button type="primary" ghost icon={<QueryIcon />}>
+            button
+          </Button>
+          <Button danger icon={<QueryIcon />}>
+            button
+          </Button>
+        </Space>
+      </Space>
+    </div>
+  );
+};
+
+export default App;

packages/component/src/Button/index.md

@@ -7,31 +7,47 @@ group:
 
 # Button
 
-1. 调整 size props
-2. 新增 millisecondOfThrottle props
+1. adjust props: **size**
+2. add new props: **millisecondOfDebounce**
 
 ## Basic Usage
 
 <code src="./demos/basic.tsx"></code>
 
+## Size
+
+<code src="./demos/size.tsx"></code>
+
+## Type
+
+<code src="./demos/type.tsx"></code>
+
 ## debounce button
 
 <code src="./demos/debounce.tsx"></code>
 
-## 组件 Token
-
-customToken
+## Token
 
-```json
-customButton: {
-  borderRadiusDefault?: string   // 'mini' | 'small' 号按钮的圆角值
-  borderRadiusLarge?: string   // 'medium' | 'large' | 'ultra'号按钮的圆角值
-}
+```js
+<AELFDProvider customToken={{
+  customButton:{
+    borderRadiusDefault?: string,   // border-radius for 'mini' | 'small'
+    borderRadiusLarge?: string   // border-radius for 'medium' | 'large' | 'ultra'
+  }
+}}>
 ```
 
+## Supported Token
+
+refer to [Button Token](https://ant.design/components/button-cn/#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)
+
 ## API
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| size | 设置按钮 height | `mini \| small \| medium \| large \| ultra` | large | - |
-| millisecondOfThrottle | 等待时间，单位为毫秒 | number | 0 | - |
+| size<Badge type='warning'>修改</Badge> | 设置按钮 height | `mini \| small \| medium \| large \| ultra` | `large` | `1.0.0` |
+| millisecondOfDebounce<Badge type='success'>新增</Badge> | 等待时间，单位为毫秒 | `number` | `0` | `1.0.0` |
+
+## Supported API
+
+refer to [Button API](https://ant.design/components/button-cn#api)

packages/component/src/Button/index.tsx

@@ -8,10 +8,10 @@ export type ButtonSizeType = 'mini' | 'small' | 'medium' | 'large' | 'ultra';
 export interface IButtonProps extends Omit<ButtonProps, 'size' | 'onClick'> {
   size?: ButtonSizeType;
   onClick?: React.MouseEventHandler<HTMLElement>;
-  millisecondOfThrottle?: number;
+  millisecondOfDebounce?: number;
 }
 
-function Button({ size = 'large', className, millisecondOfThrottle = 0, ...rest }: IButtonProps) {
+function Button({ size = 'large', className, millisecondOfDebounce = 0, ...rest }: IButtonProps) {
   const { styles: st, cx } = useStyles({ size });
 
   const buttonClickHandler = debounce(
@@ -20,10 +20,10 @@ function Button({ size = 'large', className, millisecondOfThrottle = 0, ...rest
         rest.onClick(e);
       }
     },
-    millisecondOfThrottle,
+    millisecondOfDebounce,
     {
-      leading: true,
-      trailing: false,
+      leading: false,
+      trailing: true,
     },
   );
   return (

packages/component/src/Collapse/index.md

@@ -7,27 +7,46 @@ group:
 
 # Collapse
 
-1. 定制了 expandIcon props
-2. 定制了 expandIconPosition props
+1. customize expandIcon props
+2. customize expandIconPosition props
 
 ## Basic Usage
 
 <code src="./demos/basic.tsx"></code>
 
-## 组件 Token
-
-```json
-Collapse: {
-    // 折叠面板头部背景
-    headerBg: appearance === 'dark' ? '#1A1A1A' : '#FFFFFF',
-    // 折叠面板内容内部边距
-    contentPadding: '16px 24px',
-    // 折叠面板头部内边距
-    headerPadding: '16px 24px',
- },
+## Token
+
+```js
+<AELFDProvider
+  theme={{
+    components:{
+      Collapse: {
+        headerBg: appearance === 'dark' ? '#1A1A1A' : '#FFFFFF',
+        contentPadding: '16px 24px',
+        headerPadding: '16px 24px',
+      },
+    }
+  }}
+  customToken={{
+    customCollapse:{
+      headerHoverBg: isDarkMode ? '#212121' : '#f8f8f8',
+      headerClickBg: isDarkMode ? '#212121' : '#f8f8f8',
+    }
+  }}
+>
 ```
 
+## Supported Token
+
+refer to [Collapse Token](https://ant.design/components/collapse-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)
+
 ## API
 
 | Property | Description | Type | Default | Version |
-| -------- | ----------- | ---- | ------- | ------- |
+| --- | --- | --- | --- | --- |
+| expandIcon<Badge type='error'>删除</Badge> | 自定义切换图标 | `(panelProps) => ReactNode` | `1.0.0` |
+| expandIconPosition<Badge type='error'>删除</Badge> | 设置图标位置 | `number` | `start \| end` | `1.0.0` |
+
+## Supported API
+
+refer to [Collapse API](https://ant.design/components/collapse-cn#api)