feat: add upload carousel doc

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Carousel } from 'aelf-design';
+
+export default function CarouselExample() {
+  const IPFSAddress =
+    'https://silver-abstract-unicorn-590.mypinata.cloud/ipfs/QmUyz5k2i8mxWJ9oLZcZnnRXW4zzq4tjTZzVCJUcyrQgLJ';
+  const array = Array.from({ length: 6 }, (_, index) => index + 1);
+  const mockData = array.map((item) => {
+    return {
+      id: item,
+      url: `${IPFSAddress}/${item}.png?pinataGatewayToken=J-4VqFJOcNwmARnesBKmHYTpzCmzYA9o5Zx2On1Tp2VOC6W1DYjx45AygAaXHfpV`,
+    };
+  });
+  return (
+    <Carousel
+      data={mockData}
+      onSlideClick={(item) => {
+        console.log(item, 'item');
+      }}
+    />
+  );
+}

packages/component/src/Carousel/index.md

@@ -1,35 +1,24 @@
 ---
 nav: Components
+title: Carousel
 group:
   title: Display
   order: 3
 ---
 
-# Address
+# Carousel
 
-## Basic Usage
+## Examples
 
-<!-- <code src="./demos/basic.tsx"></code> -->
-
-## Copyable
-
-<!-- <code src="./demos/copyable.tsx"></code> -->
-
-## Format
-
-<!-- <code src="./demos/format.tsx"></code> -->
-
-## Custom Tooltip
-
-<!-- <code src="./demos/customTooltip.tsx"></code> -->
+<code src="./demos/basic.tsx"></code>
 
 ## API
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
-| copyable | Address copyable | `boolean` | `false` | - |
-| address | Address | `string` | - | - |
-| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
-| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
-| locale | Multilingual settings | `Locale["address"]` | - | - |
+| data | 轮播图数据，URL是必传的 | `ICarouselSlideItem { url: string [key: string]: any}[]` | `{ headClip: 6, tailClip: 4 }` | - |
+| galleryObjectFit | gallery图片展示规则 | `fill \| contain \| cover \| none \| scale-down` | `cover` | - |
+| thumbsSlidesPerView | thumbs一页展示多少条 | `number` | 5 | - |
+| onSlideClick | 点击轮播图片触发事件，返回值是当前点击的图片ICarouselSlideItem对象 | `(value: ICarouselSlideItem) => void` | - |
+
+## 本期暂未涉及token

packages/component/src/Upload/demos/AWSUpload.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  Input,
+  IUploadProps,
+  IUploadService,
+  Upload,
+  useAWSUploadService,
+} from 'aelf-design';
+import { Form, FormProps } from 'antd';
+
+const AWSUpload = () => {
+  const [fileList, setFileList] = useState<any[]>([]);
+  const [serviceForm, setServiceForm] = useState<IUploadService>({
+    identityPoolID: '',
+    region: '',
+    bucket: '',
+  });
+  const { awsUploadFile } = useAWSUploadService(serviceForm);
+  const handleChange: IUploadProps['onChange'] = (info) => {
+    let newFileList = [...info.fileList];
+    newFileList = newFileList
+      .map((file) => {
+        if (file.response) {
+          // Component will show file.url as link
+          file.url = file.response.url;
+        }
+        return file;
+      })
+      .filter((item) => item.status !== 'error');
+    setFileList([...newFileList]);
+  };
+
+  const onFinish: FormProps<IUploadService>['onFinish'] = (values) => {
+    console.log('Success:', values);
+    setServiceForm(values);
+  };
+
+  const onFinishFailed: FormProps<IUploadService>['onFinishFailed'] = (errorInfo) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  const customUpload: IUploadProps['customRequest'] = async ({ file, onSuccess, onError }) => {
+    try {
+      const uploadFile = await awsUploadFile(file as File);
+      onSuccess?.({
+        url: uploadFile,
+      });
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  };
+
+  return (
+    <div>
+      <Form
+        name="basic"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        style={{ maxWidth: 600 }}
+        initialValues={{ remember: true }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+      >
+        <Form.Item<IUploadService>
+          label="identityPoolID"
+          name="identityPoolID"
+          rules={[{ required: true, message: 'Please input your identityPoolID!' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item<IUploadService>
+          label="region"
+          name="region"
+          rules={[{ required: true, message: 'Please input your region!' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item<IUploadService>
+          label="bucket"
+          name="bucket"
+          rules={[{ required: true, message: 'Please input your bucket!' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+      <Upload fileList={fileList} customRequest={customUpload} onChange={handleChange} />
+    </div>
+  );
+};
+
+const App: React.FC = () => (
+  <div>
+    <AWSUpload />
+  </div>
+);
+
+export default App;

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

@@ -1,41 +1,6 @@
 import React, { useState } from 'react';
-import { Upload, UploadButton } from 'aelf-design';
-import { UploadProps, UploadRequestOption } from 'antd';
-
-// import type { UploadRequestOption } from 'rc-upload/lib/interface';
-
-import { useAWSUploadService } from '../../hooks/useAws';
-
-const AWSUpload = () => {
-  const [fileList, setFileList] = useState<any[]>([]);
-  const { awsUploadFile } = useAWSUploadService();
-  const handleChange: UploadProps['onChange'] = (info) => {
-    let newFileList = [...info.fileList];
-    newFileList = newFileList
-      .map((file) => {
-        if (file.response) {
-          // Component will show file.url as link
-          file.url = file.response.url;
-        }
-        return file;
-      })
-      .filter((item) => item.status !== 'error');
-    setFileList([...newFileList]);
-  };
-  const customUpload = async ({ file, onSuccess, onError }: UploadRequestOption) => {
-    try {
-      const uploadFile = await awsUploadFile(file as File);
-      console.log(uploadFile, 'uploadFile');
-      onSuccess?.({
-        url: uploadFile,
-      });
-    } catch (error) {
-      onError?.(error as Error);
-    }
-  };
-
-  return <Upload fileList={fileList} customRequest={customUpload} onChange={handleChange} />;
-};
+import { Upload } from 'aelf-design';
+import { UploadProps } from 'antd';
 
 const FileUpload = () => {
   const [fileList, setFileList] = useState<any[]>([]);
@@ -53,22 +18,10 @@ const FileUpload = () => {
   );
 };
 
-const UploadExample: React.FC = () => (
+const App: React.FC = () => (
   <div>
-    <AWSUpload />
     <FileUpload></FileUpload>
-    <UploadButton />
   </div>
 );
 
-export default UploadExample;
-
-// const App: React.FC = () => {
-//   return (
-//     <AELFDProvider prefixCls="zhaomeng">
-//       <Address address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} />;
-//     </AELFDProvider>
-//   );
-// };
-
-// export default App;
+export default App;

packages/component/src/Upload/index.md

@@ -1,35 +1,57 @@
 ---
-nav: Components
+category: Components
+title: Upload
 group:
   title: Display
   order: 3
 ---
 
 # Upload
 
-## Basic Usage
+Upload the file by selecting
 
-<code src="./demos/basic.tsx"></code>
+## When To Use
+
+Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.
 
-## Copyable
+- When you need to upload one or more files.
+- When you need to upload one or more files.
 
-<!-- <code src="./demos/copyable.tsx"></code> -->
+## Examples
 
-## Format
+### basic
 
-<!-- <code src="./demos/format.tsx"></code> -->
+<code src="./demos/basic.tsx"></code>
 
-## Custom Tooltip
+### AWS
 
-<!-- <code src="./demos/customTooltip.tsx"></code> -->
+Please fill in your AWS configuration before trying to upload
+
+<code src="./demos/AWSUpload.tsx"></code>
 
 ## API
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
-| copyable | Address copyable | `boolean` | `false` | - |
-| address | Address | `string` | - | - |
-| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
-| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
-| locale | Multilingual settings | `Locale["address"]` | - | - |
+| Adjust | Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- | --- |
+| add | tips | 上传区域提示文案 | `string \| ReactNode` | Formats supported JPG, JPEG, PNG. Max size 10 MB.Recommend ratio 16:9. |  |
+| add | showUploadButton | 是否展示上传按钮 | `boolean` | `true` | - |
+| add | uploadText | 上传提示文案 | `string` | Upload | - |
+| add | uploadIconColor | 上传icon颜色 | `string` | 默认是主题色,colorPrimary | - |
+| add | format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
+| add | locale | Multilingual settings | `Locale["address"]` | - | - |
+| delete | listType | - | - | - | - |
+| delete | itemRender | - | - | - | - |
+
+## Design Token
+
+### Component Token
+
+| Token 名称       | 描述               | 类型     | 默认值                              |
+| ---------------- | ------------------ | -------- | ----------------------------------- |
+| colorMessageText | 提示文本的字体颜色 | `string` | 暗黑模式：#8C8C8C 日间模式：#808080 |
+| borderColor      | 边框颜色           | `string` | 暗黑模式：#484848 日间模式：#E0E0E0 |
+| containerBg      | 上传区域背景颜色   | `string` | 暗黑模式：#8C8C8C 日间模式：#808080 |
+
+### 其他支持的API参考antd
+
+https://ant-design.antgroup.com/components/upload-cn#api

packages/component/src/hooks/useAws.ts → packages/component/src/hooks/useAWSUploadService.ts

@@ -3,52 +3,57 @@ import { CognitoIdentityClient } from '@aws-sdk/client-cognito-identity';
 import { ObjectCannedACL, PutObjectCommand, S3Client } from '@aws-sdk/client-s3';
 import { fromCognitoIdentityPool } from '@aws-sdk/credential-provider-cognito-identity';
 
-export function useAWSUploadService() {
-  const info = {
-    identityPoolID: 'ap-northeast-1:8bf42009-6180-4bcf-97fd-9a849a9f1927',
-    bucket: 'forest-dev',
-  };
+export interface IUploadService {
+  identityPoolID: string;
+  bucket: string;
+  region: string;
+}
 
-  const REGION = 'ap-northeast-1';
+export default function useAWSUploadService(props: IUploadService) {
+  const { region, bucket, identityPoolID } = props;
 
-  const s3Client = useMemo(
-    () =>
-      new S3Client({
-        region: REGION,
-        credentials: fromCognitoIdentityPool({
-          client: new CognitoIdentityClient({
-            region: REGION,
-          }),
-          identityPoolId: info.identityPoolID || '',
+  const s3Client = useMemo(() => {
+    if (!identityPoolID || !bucket || !region) {
+      return null;
+    }
+
+    const client = new S3Client({
+      region: region,
+      credentials: fromCognitoIdentityPool({
+        client: new CognitoIdentityClient({
+          region: region,
         }),
+        identityPoolId: identityPoolID || '',
       }),
-    [info.identityPoolID],
-  );
+    });
+    return client;
+  }, [identityPoolID, region, bucket]);
 
   const awsUploadFile = useCallback(
     async (file: File) => {
       const FileKey = `${Date.now()}-${file.name}`;
       const params = {
         ACL: 'public-read' as ObjectCannedACL,
-        Bucket: info.bucket,
+        Bucket: bucket,
         Key: FileKey,
       };
       try {
-        const res = await s3Client.send(
+        const res = await s3Client?.send(
           new PutObjectCommand({
             Body: file,
             ContentType: file.type,
             ContentLength: file.size,
             ...params,
           }),
         );
-        return `https://${info.bucket}.s3.${REGION}.amazonaws.com/${encodeURIComponent(FileKey)}`;
+        console.log(res);
+        return `https://${bucket}.s3.${region}.amazonaws.com/${encodeURIComponent(FileKey)}`;
       } catch (error) {
         console.error('=====awsUploadFile error:', error);
         return Promise.reject(error);
       }
     },
-    [s3Client, info.bucket],
+    [s3Client, bucket, region],
   );
 
   return {