docs: improve theme edtor (#1228)

* docs: update theme editor demos * docs: add theme editor link to docs * chore: update theme editor link --------- Co-authored-by: tingzhao.ytz <[email protected]>
ant-design · Nov 1, 2024 · 5e611fd · 5e611fd
1 parent e39064b
commit 5e611fd
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 193 deletions.
diff --git a/.dumi/theme/builtins/ThemeEditorPage/demos/address.tsx b/.dumi/theme/builtins/ThemeEditorPage/demos/address.tsx
@@ -2,36 +2,20 @@ import React from 'react';
 import type { ComponentDemo } from 'antd-token-previewer-web3';
 
 export const components: Record<string, string[]> = {
-  Address: ['Basic Address', 'Copyable', 'Custom Tooltip', 'Format'],
+  Address: ['Basic Address', 'Copyable'],
 };
 
 export const demos: Record<string, ComponentDemo[]> = {
   'Basic Address': [
     {
       demo: React.createElement(require('@ant-design/web3/address/demos/basic').default),
-      tokens: [],
       key: 'Basic Address',
     },
   ],
   Copyable: [
     {
       demo: React.createElement(require('@ant-design/web3/address/demos/copyable').default),
-      tokens: [],
       key: 'Copyable',
     },
   ],
-  'Custom Tooltip': [
-    {
-      demo: React.createElement(require('@ant-design/web3/address/demos/customTooltip').default),
-      tokens: [],
-      key: 'Custom Tooltip',
-    },
-  ],
-  Format: [
-    {
-      demo: React.createElement(require('@ant-design/web3/address/demos/format').default),
-      tokens: [],
-      key: 'Format',
-    },
-  ],
 };
diff --git a/.dumi/theme/builtins/ThemeEditorPage/demos/browser-link.tsx b/.dumi/theme/builtins/ThemeEditorPage/demos/browser-link.tsx
@@ -2,35 +2,19 @@ import React from 'react';
 import type { ComponentDemo } from 'antd-token-previewer-web3';
 
 export const components: Record<string, string[]> = {
-  'Browser Link': ['Basic Browser Link', 'Complex', 'Custom Name', 'Icon Only'],
+  'Browser Link': ['Basic Browser Link', 'Icon Only'],
 };
 
 export const demos: Record<string, ComponentDemo[]> = {
   'Basic Browser Link': [
     {
       demo: React.createElement(require('@ant-design/web3/browser-link/demos/basic').default),
-      tokens: [],
       key: 'Basic Browser Link',
     },
   ],
-  Complex: [
-    {
-      demo: React.createElement(require('@ant-design/web3/browser-link/demos/complex').default),
-      tokens: [],
-      key: 'Complex',
-    },
-  ],
-  'Custom Name': [
-    {
-      demo: React.createElement(require('@ant-design/web3/browser-link/demos/customName').default),
-      tokens: [],
-      key: 'Custom Name',
-    },
-  ],
   'Icon Only': [
     {
       demo: React.createElement(require('@ant-design/web3/browser-link/demos/icononly').default),
-      tokens: [],
       key: 'Icon Only',
     },
   ],

diff --git a/.dumi/theme/builtins/ThemeEditorPage/demos/connect-button.tsx b/.dumi/theme/builtins/ThemeEditorPage/demos/connect-button.tsx
@@ -2,101 +2,26 @@ import React from 'react';
 import type { ComponentDemo } from 'antd-token-previewer-web3';
 
 export const components: Record<string, string[]> = {
-  'Connect Button': [
-    'Avatar',
-    'Balance',
-    'Basic',
-    'Chains',
-    'Icon',
-    'Menu',
-    'Name',
-    'Profile Modal',
-    'Quick Connect',
-    'Tooltip',
-    'Type',
-  ],
+  'Connect Button': ['Avatar', 'Balance', 'Chains'],
 };
 
 export const demos: Record<string, ComponentDemo[]> = {
   Avatar: [
     {
       demo: React.createElement(require('@ant-design/web3/connect-button/demos/avatar').default),
-      tokens: [],
       key: 'Avatar',
     },
   ],
   Balance: [
     {
       demo: React.createElement(require('@ant-design/web3/connect-button/demos/balance').default),
-      tokens: [],
       key: 'Balance',
     },
   ],
-  Basic: [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-button/demos/basic').default),
-      tokens: [],
-      key: 'Basic',
-    },
-  ],
   Chains: [
     {
       demo: React.createElement(require('@ant-design/web3/connect-button/demos/chains').default),
-      tokens: [],
       key: 'Chains',
     },
   ],
-  Icon: [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-button/demos/icon').default),
-      tokens: [],
-      key: 'Icon',
-    },
-  ],
-  Menu: [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-button/demos/menu').default),
-      tokens: [],
-      key: 'Menu',
-    },
-  ],
-  Name: [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-button/demos/name').default),
-      tokens: [],
-      key: 'Name',
-    },
-  ],
-  'Profile Modal': [
-    {
-      demo: React.createElement(
-        require('@ant-design/web3/connect-button/demos/profileModal').default,
-      ),
-      tokens: [],
-      key: 'Profile Modal',
-    },
-  ],
-  'Quick Connect': [
-    {
-      demo: React.createElement(
-        require('@ant-design/web3/connect-button/demos/quick-connect').default,
-      ),
-      tokens: [],
-      key: 'Quick Connect',
-    },
-  ],
-  Tooltip: [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-button/demos/tooltip').default),
-      tokens: [],
-      key: 'Tooltip',
-    },
-  ],
-  Type: [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-button/demos/type').default),
-      tokens: [],
-      key: 'Type',
-    },
-  ],
 };
diff --git a/.dumi/theme/builtins/ThemeEditorPage/demos/connect-modal.tsx b/.dumi/theme/builtins/ThemeEditorPage/demos/connect-modal.tsx
@@ -2,69 +2,20 @@ import React from 'react';
 import type { ComponentDemo } from 'antd-token-previewer-web3';
 
 export const components: Record<string, string[]> = {
-  'Connect Modal': [
-    'Basic Connect Modal',
-    'Custom Guide',
-    'Dark Mode',
-    'Panel',
-    'Simple',
-    'Theme',
-    'Ungrouped Basic',
-  ],
+  'Connect Modal': ['Normal', 'Simple'],
 };
 
 export const demos: Record<string, ComponentDemo[]> = {
-  'Basic Connect Modal': [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-modal/demos/basic').default),
-      tokens: [],
-      key: 'Basic Connect Modal',
-    },
-  ],
-  'Custom Guide': [
-    {
-      demo: React.createElement(
-        require('@ant-design/web3/connect-modal/demos/customGuide').default,
-      ),
-      tokens: [],
-      key: 'Custom Guide',
-    },
-  ],
-  'Dark Mode': [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-modal/demos/dark').default),
-      tokens: [],
-      key: 'Dark Mode',
-    },
-  ],
-  Panel: [
+  Normal: [
     {
       demo: React.createElement(require('@ant-design/web3/connect-modal/demos/panel').default),
-      tokens: [],
       key: 'Panel',
     },
   ],
   Simple: [
     {
-      demo: React.createElement(require('@ant-design/web3/connect-modal/demos/simple').default),
-      tokens: [],
+      demo: React.createElement(require('@ant-design/web3/connect-modal/demos/panel').SimpleApp),
       key: 'Simple',
     },
   ],
-  Theme: [
-    {
-      demo: React.createElement(require('@ant-design/web3/connect-modal/demos/theme').default),
-      tokens: [],
-      key: 'Theme',
-    },
-  ],
-  'Ungrouped Basic': [
-    {
-      demo: React.createElement(
-        require('@ant-design/web3/connect-modal/demos/ungroupedBasic').default,
-      ),
-      tokens: [],
-      key: 'Ungrouped Basic',
-    },
-  ],
 };
diff --git a/.dumi/theme/builtins/ThemeEditorPage/demos/crypto-price.tsx b/.dumi/theme/builtins/ThemeEditorPage/demos/crypto-price.tsx
@@ -2,30 +2,19 @@ import React from 'react';
 import type { ComponentDemo } from 'antd-token-previewer-web3';
 
 export const components: Record<string, string[]> = {
-  'Crypto Price': ['Basic Crypto Price', 'Custom Chains', 'With Icon'],
+  'Crypto Price': ['Basic Crypto Price', 'With Icon'],
 };
 
 export const demos: Record<string, ComponentDemo[]> = {
   'Basic Crypto Price': [
     {
       demo: React.createElement(require('@ant-design/web3/crypto-price/demos/basic').default),
-      tokens: [],
       key: 'Basic Crypto Price',
     },
   ],
-  'Custom Chains': [
-    {
-      demo: React.createElement(
-        require('@ant-design/web3/crypto-price/demos/custom-chain').default,
-      ),
-      tokens: [],
-      key: 'Custom Chains',
-    },
-  ],
   'With Icon': [
     {
       demo: React.createElement(require('@ant-design/web3/crypto-price/demos/icon').default),
-      tokens: [],
       key: 'With Icon',
     },
   ],

diff --git a/.dumi/theme/builtins/ThemeEditorPage/demos/index.ts b/.dumi/theme/builtins/ThemeEditorPage/demos/index.ts
@@ -8,19 +8,19 @@ import * as cryptoPrice from './crypto-price';
 import * as nftCard from './nft-card';
 
 export const components: typeof defaultAntdComponents = {
+  ...connectModal.components,
+  ...nftCard.components,
   ...address.components,
   ...browserLink.components,
   ...connectButton.components,
-  ...connectModal.components,
   ...cryptoPrice.components,
-  ...nftCard.components,
 };
 
 export const demos: Record<string, ComponentDemo[]> = {
+  ...connectModal.demos,
   ...address.demos,
   ...browserLink.demos,
   ...connectButton.demos,
-  ...connectModal.demos,
   ...cryptoPrice.demos,
   ...nftCard.demos,
 };
diff --git a/.dumi/theme/builtins/ThemeEditorPage/demos/nft-card.tsx b/.dumi/theme/builtins/ThemeEditorPage/demos/nft-card.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type { ComponentDemo } from 'antd-token-previewer-web3';
 
 export const components: Record<string, string[]> = {
-  'NFT Card': ['Basic NFT Card', 'Dark NFT', 'With Wagmi'],
+  'NFT Card': ['Basic NFT Card'],
 };
 
 export const demos: Record<string, ComponentDemo[]> = {
@@ -13,18 +13,4 @@ export const demos: Record<string, ComponentDemo[]> = {
       key: 'Basic NFT Card',
     },
   ],
-  'Dark NFT': [
-    {
-      demo: React.createElement(require('@ant-design/web3/nft-card/demos/dark-mode').default),
-      tokens: [],
-      key: 'Dark NFT',
-    },
-  ],
-  'With Wagmi': [
-    {
-      demo: React.createElement(require('@ant-design/web3/nft-card/demos/wagmi').default),
-      tokens: [],
-      key: 'With Wagmi',
-    },
-  ],
 };
diff --git a/docs/guide/ant-design-web3.md b/docs/guide/ant-design-web3.md
@@ -23,6 +23,8 @@ Here are examples of using Ant Design Web3 through `@ant-design/web3-wagmi`:
 
 <code compact src="./demos/try-it-out/index.tsx"></code>
 
+If you want to try more refined theme control, you can try our [Theme Editor](/theme-editor), or check out the [Theme](theme.md) documentation.
+
 If you want to further try how to use Ant Design Web3 in your own project, or want to create a project based on Ant Design Web3 from 0, you can continue reading [Quick Start](quick-start.md), wish you a pleasant surfing in Web3! 🌊🌊🌊
 
 ## Why use it?

diff --git a/docs/guide/ant-design-web3.zh-CN.md b/docs/guide/ant-design-web3.zh-CN.md
@@ -23,7 +23,9 @@ Ant Design Web3 是一个基于 [Ant Design](https://ant.design/index-cn) 的 We
 
 <code compact src="./demos/try-it-out/index.tsx"></code>
 
-如果你想要进一步尝试如何在自己的项目中使用 Ant Design Web3，或者想要从 0 创建一个基于 Ant Design Web3 的项目，你可以继续阅读[快速开始](quick-start.zh-CN.md)，祝你在 Web3 冲浪愉快！🌊🌊🌊
+如果你想要尝试更精细的主题控制，你以尝试我们的[主题编辑器](/theme-editor-cn)，或者查看[主题](./theme.zh-CN.md)文档。
+
+如果你想要进一步学习如何在自己的项目中使用 Ant Design Web3，或者想要从 0 创建一个基于 Ant Design Web3 的项目，你可以继续阅读[快速开始](quick-start.zh-CN.md)，祝你在 Web3 冲浪愉快！🌊🌊🌊
 
 ## 为什么使用？
 

diff --git a/docs/guide/theme.md b/docs/guide/theme.md
@@ -17,4 +17,6 @@ Ant Design Web3 has built-in support for dark mode, which inherits the configura
 
 You can also completely customize Ant Design's [Design Token](https://ant.design/docs/react/customize-theme#customize-design-token), which we will inherit and use in Ant Design Web3. If you find that the Design Token is not supported or used incorrectly, please [submit an issue](https://github.com/ant-design/ant-design-web3/issues) to tell us.
 
+We provide a [theme editor](/theme-editor) where you can modify the Design Token online and see the effects.
+
 <code src="./demos/custom-token.tsx"></code>
diff --git a/docs/guide/theme.zh-CN.md b/docs/guide/theme.zh-CN.md
@@ -17,4 +17,6 @@ Ant Design Web3 内置了对暗黑模式的支持，继承自 Ant Design 的配
 
 你也可以完全自定义 Ant Design 的 [Design Token](https://ant.design/docs/react/customize-theme-cn#%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%8F%98%E9%87%8F)，我们会在 Ant Design Web3 中继承使用。如果你发现不支持或者使用有误的 Design Token，请[提交 issue](https://github.com/ant-design/ant-design-web3/issues) 告诉我们。
 
+我们提供了一个[主题编辑器](/theme-editor-cn)，你可以在线修改 Design Token 查看效果。
+
 <code src="./demos/custom-token.tsx"></code>
diff --git a/packages/web3/src/connect-modal/demos/panel.tsx b/packages/web3/src/connect-modal/demos/panel.tsx
@@ -73,4 +73,28 @@ const App: React.FC = () => {
   );
 };
 
+// use for theme editor
+export const SimpleApp: React.FC = () => {
+  return (
+    <Card
+      style={{
+        maxWidth: 400,
+      }}
+      styles={{
+        body: {
+          padding: 0,
+        },
+      }}
+    >
+      <ConnectModal.ModalPanel
+        group={{
+          groupOrder,
+        }}
+        mode="simple"
+        walletList={walletList}
+      />
+    </Card>
+  );
+};
+
 export default App;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,4 +17,6 @@ Ant Design Web3 has built-in support for dark mode, which inherits the configura

		You can also completely customize Ant Design's [Design Token](https://ant.design/docs/react/customize-theme#customize-design-token), which we will inherit and use in Ant Design Web3. If you find that the Design Token is not supported or used incorrectly, please [submit an issue](https://github.com/ant-design/ant-design-web3/issues) to tell us.

		We provide a [theme editor](/theme-editor) where you can modify the Design Token online and see the effects.

		<code src="./demos/custom-token.tsx"></code>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,4 +17,6 @@ Ant Design Web3 内置了对暗黑模式的支持，继承自 Ant Design 的配

		你也可以完全自定义 Ant Design 的 [Design Token](https://ant.design/docs/react/customize-theme-cn#%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%8F%98%E9%87%8F)，我们会在 Ant Design Web3 中继承使用。如果你发现不支持或者使用有误的 Design Token，请[提交 issue](https://github.com/ant-design/ant-design-web3/issues) 告诉我们。

		我们提供了一个[主题编辑器](/theme-editor-cn)，你可以在线修改 Design Token 查看效果。

		<code src="./demos/custom-token.tsx"></code>