chore: support theme-editor

.dumi/pages/theme-editor-cn.md

@@ -0,0 +1,5 @@
+---
+sidebar: false
+---
+
+<ThemeEditorPage></ThemeEditorPage>

.dumi/pages/theme-editor.md

@@ -0,0 +1,5 @@
+---
+sidebar: false
+---
+
+<ThemeEditorPage></ThemeEditorPage>

.dumi/theme/builtins/ThemeEditorPage/demos/connect-button.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ConnectButton, type Chain } from '@ant-design/web3';
+import { Mainnet, Polygon } from '@ant-design/web3-assets';
+import { Space } from 'antd';
+import type { ComponentDemo } from 'antd-token-previewer-web3';
+
+const Demo = () => {
+  const [chain, setChain] = React.useState<Chain>(Polygon);
+
+  return (
+    <Space>
+      <ConnectButton account={{ address: '3ea2cfd153b8d8505097b81c87c11f5d05097c18' }} tooltip />
+      <ConnectButton
+        chain={chain}
+        availableChains={[Mainnet, Polygon]}
+        account={{ address: '3ea2cfd153b8d8505097b81c87c11f5d05097c18' }}
+        onSwitchChain={async (c) => {
+          setChain(c);
+        }}
+      />
+    </Space>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['blue'],
+  key: 'Connect Button',
+};
+
+export default componentDemo;

.dumi/theme/builtins/ThemeEditorPage/demos/index.ts

@@ -0,0 +1,7 @@
+import { ComponentDemo } from 'antd-token-previewer-web3';
+
+import ConnectButton from './connect-button';
+
+const previewerDemo: ComponentDemo[] = [ConnectButton];
+
+export default previewerDemo;

.dumi/theme/builtins/ThemeEditorPage/index.module.less

@@ -0,0 +1,8 @@
+.container {
+  width: 100%;
+  overflow: hidden;
+
+  :global(.previewer-layout) {
+    height: 100%;
+  }
+}

.dumi/theme/builtins/ThemeEditorPage/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ConfigProvider, message } from 'antd';
+import {
+  defaultAntdComponents,
+  parsePlainConfig,
+  parseThemeConfig,
+  Previewer,
+} from 'antd-token-previewer-web3';
+import { useLocale } from 'dumi';
+
+import Connector from './demos';
+
+import 'antd/es/style/reset.css';
+
+import { useTheme } from 'antd-style';
+import antdEnUS from 'antd/locale/en_US';
+import antdZhCN from 'antd/locale/zh_CN';
+
+import styles from './index.module.less';
+
+const ANT_DESIGN_WEB3_CUSTOM_THEME = 'ant-design-web3-custom-theme';
+
+const ThemeEditorPage: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
+  const initialThemeConfigRef = React.useRef(
+    parseThemeConfig(JSON.parse(localStorage.getItem(ANT_DESIGN_WEB3_CUSTOM_THEME) || '{}')),
+  );
+  const locale = useLocale();
+  const token = useTheme();
+
+  return (
+    <React.StrictMode>
+      {contextHolder}
+      <div className={styles.container} style={{ height: `calc(100vh - ${token.headerHeight}px)` }}>
+        <ConfigProvider
+          locale={locale.id === 'zh-CN' ? antdZhCN : antdEnUS}
+          theme={{ hashed: true }}
+        >
+          <Previewer
+            showTheme
+            initialThemeConfig={initialThemeConfigRef.current}
+            components={{ Web3: ['Connector'], ...defaultAntdComponents }}
+            demos={{ Connector }}
+            onSave={(newConfig) => {
+              localStorage.setItem(
+                ANT_DESIGN_WEB3_CUSTOM_THEME,
+                JSON.stringify(parsePlainConfig(newConfig)),
+              );
+              navigator.clipboard.writeText(JSON.stringify(newConfig, null, 2));
+              messageApi.success('🎉 保存成功，可粘贴到项目中使用！');
+            }}
+          />
+        </ConfigProvider>
+      </div>
+    </React.StrictMode>
+  );
+};
+
+export default ThemeEditorPage;

.dumi/theme/locales/en-US.json

@@ -23,5 +23,7 @@
   "app.docs.site.theme.description": "Open more style algorithms to make it easier to customize your theme",
 
   "app.docs.site.case.title": "Rich components, easy to choose",
-  "app.docs.site.case.description": "A large number of practical components to meet your needs, flexible customization and expansion"
+  "app.docs.site.case.description": "A large number of practical components to meet your needs, flexible customization and expansion",
+
+  "app.docs.theme-editor.export-tooltip": "👈 Click to export the theme"
 }

.dumi/theme/locales/zh-CN.json

@@ -23,5 +23,7 @@
   "app.docs.site.theme.description": "开放更多的样式算法，使定制你的主题更加容易",
 
   "app.docs.site.case.title": "丰富组件，轻松选择",
-  "app.docs.site.case.description": "满足您需求的大量实用组件，灵活的定制与扩展功能"
+  "app.docs.site.case.description": "满足您需求的大量实用组件，灵活的定制与扩展功能",
+
+  "app.docs.theme-editor.export-tooltip": "👈 点击导出主题"
 }

package.json

@@ -68,6 +68,7 @@
     "@vitest/coverage-v8": "^1.1.0",
     "antd": "^5.15.3",
     "antd-style": "^3.6.1",
+    "antd-token-previewer-web3": "^2.0.8",
     "babel-plugin-add-import-extension": "^1.6.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-react-inline-svg-unique-id": "^1.4.0",