feat: add upload button doc and delete dumi-theme-antd-style

AElfProject · Mar 8, 2024 · 07c43eb · 07c43eb
1 parent 4f4d927
commit 07c43eb
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 332 deletions.
diff --git a/.dumi/app.tsx b/.dumi/app.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { ConfigProvider } from 'antd';
+
+// import { ConfigProvider } from 'antd';
 
 export function rootContainer(container: React.ReactNode): React.ReactNode {
-  return <ConfigProvider>{container}</ConfigProvider>;
+  return <div>{container}</div>;
 }
diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx
@@ -26,26 +26,21 @@ const SiteThemeProvider: React.FC<ThemeProviderProps<any>> = ({
     <AELFDProvider
       prefixCls="aelf-design-doc"
       appearance={appearance}
-      // customToken={{
-      //   customButton: {
-      //     borderRadiusDefault: '20px',
-      //     borderRadiusLarge: '30px'
-      //   },
-      //   customAddress: {
-      //     primaryLinkColor: appearance == 'dark' ? '#c713af' : '#53dd13',
-      //     primaryIconColor: appearance == 'dark' ? '#ea1818' : '#7f7777',
-      //     addressHoverColor: appearance == 'dark' ? '#38b117' : '#149434',
-      //     addressActiveColor: appearance == 'dark' ? '#0756BC' : '#0460D9',
-      //   },
-      // }}
-      // theme={{
-      //   token: {
-      //     colorPrimary: appearance == 'dark' ? '#1370DD' : '#764DF1',
-      //     colorPrimaryHover: appearance == 'dark' ? '#3689DD' : '#7F58F5',
-      //     colorPrimaryActive: appearance == 'dark' ? '#0756BC' : '#6F45EF',
-      //     colorTextDisabled: appearance == 'dark' ? '#96C4FB' : '#ACD2FF',
-      //   },
-      // }}
+      customToken={{
+        customAddress: {
+          primaryLinkColor: appearance == 'dark' ? '#c713af' : '#53dd13',
+          primaryIconColor: appearance == 'dark' ? '#ea1818' : '#7f7777',
+          addressHoverColor: appearance == 'dark' ? '#38b117' : '#149434',
+          addressActiveColor: appearance == 'dark' ? '#0756BC' : '#0460D9',
+        },
+      }}
+      theme={{
+        token: {
+          colorPrimary: appearance == 'dark' ? '#1370DD' : '#764DF1',
+          colorPrimaryHover: appearance == 'dark' ? '#3689DD' : '#7F58F5',
+          colorPrimaryActive: appearance == 'dark' ? '#0756BC' : '#6F45EF',
+        },
+      }}
     >
       {children}
     </AELFDProvider>

diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl, useLocation, useOutlet, usePrefersColor } from 'dumi';
+import { useLocation, useOutlet, usePrefersColor } from 'dumi';
 
 import SiteThemeProvider from '../SiteThemeProvider';
 
@@ -8,8 +8,6 @@ const GlobalLayout: React.FC = () => {
   const { pathname } = useLocation();
   const [color] = usePrefersColor();
   console.log('color----', color);
-  const { locale } = useIntl();
-
   return (
     <>
       <SiteThemeProvider appearance={color}>

diff --git a/package.json b/package.json
@@ -78,7 +78,6 @@
     "babel-plugin-react-svg": "^3.0.3",
     "classnames": "^2.3.2",
     "dumi": "^2.2.17",
-    "dumi-theme-antd-style": "0.25.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",

diff --git a/packages/component/src/ProgressModal/index.md b/packages/component/src/ProgressModal/index.md
@@ -5,7 +5,7 @@ group:
   order: 3
 ---
 
-# Address
+# ProgressModal
 
 ## Basic Usage
 

diff --git a/packages/component/src/RichProgress/index.md b/packages/component/src/RichProgress/index.md
@@ -5,7 +5,7 @@ group:
   order: 3
 ---
 
-# Address
+# RichProgress
 
 ## Basic Usage
 

diff --git a/packages/component/src/Upload/index.md b/packages/component/src/Upload/index.md
@@ -21,26 +21,26 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 
 ### basic
 
-<code src="./demos/basic.tsx"></code>
+<code src="./demos/basic.tsx">basic upload</code>
 
 ### AWS
 
 Please fill in your AWS configuration before trying to upload
 
-<code src="./demos/AWSUpload.tsx"></code>
+<code src="./demos/AWSUpload.tsx">AWS upload</code>
 
 ## API
 
 | 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 | - | - | - | - |
+| <Badge type="success">add</Badge> | tips | 上传区域提示文案 | `string \| ReactNode` | Formats supported JPG, JPEG, PNG. Max size 10 MB.Recommend ratio 16:9. |  |
+| <Badge type="success">add</Badge> | showUploadButton | 是否展示上传按钮 | `boolean` | `true` | - |
+| <Badge type="success">add</Badge> | uploadText | 上传提示文案 | `string` | Upload | - |
+| <Badge type="success">add</Badge> | uploadIconColor | 上传icon颜色 | `string` | 默认是主题色,colorPrimary | - |
+| <Badge type="success">add</Badge> | format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
+| <Badge type="success">add</Badge> | locale | Multilingual settings | `Locale["address"]` | - | - |
+| <Badge type="error">delete</Badge> | listType | - | - | - | - |
+| <Badge type="error">delete</Badge> | itemRender | - | - | - | - |
 
 ## Design Token
 

diff --git a/packages/component/src/UploadButton/demos/basic.tsx b/packages/component/src/UploadButton/demos/basic.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { UploadButton } from 'aelf-design';
+
+export default function Basic() {
+  return <UploadButton />;
+}
diff --git a/packages/component/src/UploadButton/index.md b/packages/component/src/UploadButton/index.md
@@ -5,31 +5,20 @@ group:
   order: 3
 ---
 
-# Address
+# UploadButton
 
-## Basic Usage
-
-<!-- <code src="./demos/basic.tsx"></code> -->
-
-## Copyable
+## When To Use
 
-<!-- <code src="./demos/copyable.tsx"></code> -->
+- When you want to customize the upload area for the upload component
 
-## Format
-
-<!-- <code src="./demos/format.tsx"></code> -->
-
-## Custom Tooltip
+## Basic Usage
 
-<!-- <code src="./demos/customTooltip.tsx"></code> -->
+<code src="./demos/basic.tsx">Just a ui component</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"]` | - | - |
+| tips | 上传区域提示文案 | `string \| ReactNode` | Formats supported JPG, JPEG, PNG. Max size 10 MB.Recommend ratio 16:9. |  |
+| uploadText | 上传提示文案 | `string` | Upload | - |
+| uploadIconColor | 上传icon颜色 | `string` | 默认是主题色,colorPrimary | - |