Skip to content

Commit dad373b

Browse files
jeasonstudiojeasonstudio
authored
chore: support theme-editor (#664)
* docs(site): add theme editor * feat: use previewer * chore: update lock file * chore: fix review comments * chore(docs): remove antd components * chore: use special demos * chore: add footer link * chore: rm useless locale
1 parent 6f4c55f commit dad373b

File tree

15 files changed

+474
-7
lines changed

15 files changed

+474
-7
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
sidebar: false
3+
---
4+
5+
<ThemeEditorPage></ThemeEditorPage>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
sidebar: false
3+
---
4+
5+
<ThemeEditorPage></ThemeEditorPage>

‎.dumi/theme/builtins/ThemeEditorPage/demos/address.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import type { ComponentDemo } from 'antd-token-previewer-web3';
3+
4+
export const components: Record<string, string[]> = {
5+
Address: ['Basic Address', 'Copyable', 'Custom Tooltip', 'Format'],
6+
};
7+
8+
export const demos: Record<string, ComponentDemo[]> = {
9+
'Basic Address': [
10+
{
11+
demo: React.createElement(require('@ant-design/web3/address/demos/basic').default),
12+
tokens: [],
13+
key: 'Basic Address',
14+
},
15+
],
16+
Copyable: [
17+
{
18+
demo: React.createElement(require('@ant-design/web3/address/demos/copyable').default),
19+
tokens: [],
20+
key: 'Copyable',
21+
},
22+
],
23+
'Custom Tooltip': [
24+
{
25+
demo: React.createElement(require('@ant-design/web3/address/demos/customTooltip').default),
26+
tokens: [],
27+
key: 'Custom Tooltip',
28+
},
29+
],
30+
Format: [
31+
{
32+
demo: React.createElement(require('@ant-design/web3/address/demos/format').default),
33+
tokens: [],
34+
key: 'Format',
35+
},
36+
],
37+
};

‎.dumi/theme/builtins/ThemeEditorPage/demos/browser-link.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import type { ComponentDemo } from 'antd-token-previewer-web3';
3+
4+
export const components: Record<string, string[]> = {
5+
'Browser Link': ['Basic Browser Link', 'Complex', 'Custom Name', 'Icon Only'],
6+
};
7+
8+
export const demos: Record<string, ComponentDemo[]> = {
9+
'Basic Browser Link': [
10+
{
11+
demo: React.createElement(require('@ant-design/web3/browser-link/demos/basic').default),
12+
tokens: [],
13+
key: 'Basic Browser Link',
14+
},
15+
],
16+
Complex: [
17+
{
18+
demo: React.createElement(require('@ant-design/web3/browser-link/demos/complex').default),
19+
tokens: [],
20+
key: 'Complex',
21+
},
22+
],
23+
'Custom Name': [
24+
{
25+
demo: React.createElement(require('@ant-design/web3/browser-link/demos/customName').default),
26+
tokens: [],
27+
key: 'Custom Name',
28+
},
29+
],
30+
'Icon Only': [
31+
{
32+
demo: React.createElement(require('@ant-design/web3/browser-link/demos/icononly').default),
33+
tokens: [],
34+
key: 'Icon Only',
35+
},
36+
],
37+
};

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

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react';
2+
import type { ComponentDemo } from 'antd-token-previewer-web3';
3+
4+
export const components: Record<string, string[]> = {
5+
'Connect Button': [
6+
'Avatar',
7+
'Balance',
8+
'Basic',
9+
'Chains',
10+
'Icon',
11+
'Menu',
12+
'Name',
13+
'Profile Modal',
14+
'Quick Connect',
15+
'Tooltip',
16+
'Type',
17+
],
18+
};
19+
20+
export const demos: Record<string, ComponentDemo[]> = {
21+
Avatar: [
22+
{
23+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/avatar').default),
24+
tokens: [],
25+
key: 'Avatar',
26+
},
27+
],
28+
Balance: [
29+
{
30+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/balance').default),
31+
tokens: [],
32+
key: 'Balance',
33+
},
34+
],
35+
Basic: [
36+
{
37+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/basic').default),
38+
tokens: [],
39+
key: 'Basic',
40+
},
41+
],
42+
Chains: [
43+
{
44+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/chains').default),
45+
tokens: [],
46+
key: 'Chains',
47+
},
48+
],
49+
Icon: [
50+
{
51+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/icon').default),
52+
tokens: [],
53+
key: 'Icon',
54+
},
55+
],
56+
Menu: [
57+
{
58+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/menu').default),
59+
tokens: [],
60+
key: 'Menu',
61+
},
62+
],
63+
Name: [
64+
{
65+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/name').default),
66+
tokens: [],
67+
key: 'Name',
68+
},
69+
],
70+
'Profile Modal': [
71+
{
72+
demo: React.createElement(
73+
require('@ant-design/web3/connect-button/demos/profileModal').default,
74+
),
75+
tokens: [],
76+
key: 'Profile Modal',
77+
},
78+
],
79+
'Quick Connect': [
80+
{
81+
demo: React.createElement(
82+
require('@ant-design/web3/connect-button/demos/quick-connect').default,
83+
),
84+
tokens: [],
85+
key: 'Quick Connect',
86+
},
87+
],
88+
Tooltip: [
89+
{
90+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/tooltip').default),
91+
tokens: [],
92+
key: 'Tooltip',
93+
},
94+
],
95+
Type: [
96+
{
97+
demo: React.createElement(require('@ant-design/web3/connect-button/demos/type').default),
98+
tokens: [],
99+
key: 'Type',
100+
},
101+
],
102+
};

‎.dumi/theme/builtins/ThemeEditorPage/demos/connect-modal.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import type { ComponentDemo } from 'antd-token-previewer-web3';
3+
4+
export const components: Record<string, string[]> = {
5+
'Connect Modal': [
6+
'Basic Connect Modal',
7+
'Custom Guide',
8+
'Dark Mode',
9+
'Panel',
10+
'Simple',
11+
'Theme',
12+
'Ungrouped Basic',
13+
],
14+
};
15+
16+
export const demos: Record<string, ComponentDemo[]> = {
17+
'Basic Connect Modal': [
18+
{
19+
demo: React.createElement(require('@ant-design/web3/connect-modal/demos/basic').default),
20+
tokens: [],
21+
key: 'Basic Connect Modal',
22+
},
23+
],
24+
'Custom Guide': [
25+
{
26+
demo: React.createElement(
27+
require('@ant-design/web3/connect-modal/demos/customGuide').default,
28+
),
29+
tokens: [],
30+
key: 'Custom Guide',
31+
},
32+
],
33+
'Dark Mode': [
34+
{
35+
demo: React.createElement(require('@ant-design/web3/connect-modal/demos/dark').default),
36+
tokens: [],
37+
key: 'Dark Mode',
38+
},
39+
],
40+
Panel: [
41+
{
42+
demo: React.createElement(require('@ant-design/web3/connect-modal/demos/panel').default),
43+
tokens: [],
44+
key: 'Panel',
45+
},
46+
],
47+
Simple: [
48+
{
49+
demo: React.createElement(require('@ant-design/web3/connect-modal/demos/simple').default),
50+
tokens: [],
51+
key: 'Simple',
52+
},
53+
],
54+
Theme: [
55+
{
56+
demo: React.createElement(require('@ant-design/web3/connect-modal/demos/theme').default),
57+
tokens: [],
58+
key: 'Theme',
59+
},
60+
],
61+
'Ungrouped Basic': [
62+
{
63+
demo: React.createElement(
64+
require('@ant-design/web3/connect-modal/demos/ungroupedBasic').default,
65+
),
66+
tokens: [],
67+
key: 'Ungrouped Basic',
68+
},
69+
],
70+
};

‎.dumi/theme/builtins/ThemeEditorPage/demos/crypto-price.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import type { ComponentDemo } from 'antd-token-previewer-web3';
3+
4+
export const components: Record<string, string[]> = {
5+
'Crypto Price': ['Basic Crypto Price', 'Custom Chains', 'With Icon'],
6+
};
7+
8+
export const demos: Record<string, ComponentDemo[]> = {
9+
'Basic Crypto Price': [
10+
{
11+
demo: React.createElement(require('@ant-design/web3/crypto-price/demos/basic').default),
12+
tokens: [],
13+
key: 'Basic Crypto Price',
14+
},
15+
],
16+
'Custom Chains': [
17+
{
18+
demo: React.createElement(
19+
require('@ant-design/web3/crypto-price/demos/custom-chain').default,
20+
),
21+
tokens: [],
22+
key: 'Custom Chains',
23+
},
24+
],
25+
'With Icon': [
26+
{
27+
demo: React.createElement(require('@ant-design/web3/crypto-price/demos/icon').default),
28+
tokens: [],
29+
key: 'With Icon',
30+
},
31+
],
32+
};

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { ComponentDemo, defaultAntdComponents } from 'antd-token-previewer-web3';
2+
3+
import * as address from './address';
4+
import * as browserLink from './browser-link';
5+
import * as connectButton from './connect-button';
6+
import * as connectModal from './connect-modal';
7+
import * as cryptoPrice from './crypto-price';
8+
import * as nftCard from './nft-card';
9+
10+
export const components: typeof defaultAntdComponents = {
11+
...address.components,
12+
...browserLink.components,
13+
...connectButton.components,
14+
...connectModal.components,
15+
...cryptoPrice.components,
16+
...nftCard.components,
17+
};
18+
19+
export const demos: Record<string, ComponentDemo[]> = {
20+
...address.demos,
21+
...browserLink.demos,
22+
...connectButton.demos,
23+
...connectModal.demos,
24+
...cryptoPrice.demos,
25+
...nftCard.demos,
26+
};

‎.dumi/theme/builtins/ThemeEditorPage/demos/nft-card.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import type { ComponentDemo } from 'antd-token-previewer-web3';
3+
4+
export const components: Record<string, string[]> = {
5+
'NFT Card': ['Basic NFT Card', 'Dark NFT', 'With Wagmi'],
6+
};
7+
8+
export const demos: Record<string, ComponentDemo[]> = {
9+
'Basic NFT Card': [
10+
{
11+
demo: React.createElement(require('@ant-design/web3/nft-card/demos/basic').default),
12+
tokens: [],
13+
key: 'Basic NFT Card',
14+
},
15+
],
16+
'Dark NFT': [
17+
{
18+
demo: React.createElement(require('@ant-design/web3/nft-card/demos/dark-mode').default),
19+
tokens: [],
20+
key: 'Dark NFT',
21+
},
22+
],
23+
'With Wagmi': [
24+
{
25+
demo: React.createElement(require('@ant-design/web3/nft-card/demos/wagmi').default),
26+
tokens: [],
27+
key: 'With Wagmi',
28+
},
29+
],
30+
};

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.container {
2+
width: 100%;
3+
overflow: hidden;
4+
5+
:global(.previewer-layout) {
6+
height: 100%;
7+
}
8+
:global(.component-demos-breadcrumb-wrapper) {
9+
z-index: 999;
10+
}
11+
}

0 commit comments

Comments
 (0)