true} />;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo:
7 | More}
10 | style={{ width: 300 }}
11 | >
12 | Card content
Card content
Card content
13 |
14 | More}
19 | style={{ width: 300 }}
20 | >
21 | Card content
Card content
Card content
22 |
23 |
24 | );
25 |
26 | const componentDemo: ComponentDemo = {
27 | demo:
13 | Content
14 |
15 | Content
16 |
17 | Content
18 | Content
19 | Content
20 | Content
21 | Content
22 |
23 | );
24 |
25 | const componentDemo: ComponentDemo = {
26 | demo:
7 |
8 | Inner Card content
9 |
10 |
11 | );
12 |
13 | const componentDemo: ComponentDemo = {
14 | demo:
16 |
17 |
1
18 |
19 |
20 |
2
21 |
22 |
23 |
3
24 |
25 |
26 |
4
27 |
28 |
29 | );
30 |
31 | const componentDemo: ComponentDemo = {
32 | demo:
7 | Checkbox
8 |
9 | 选中态
10 |
11 |
12 | );
13 |
14 | const componentDemo: ComponentDemo = {
15 | demo: Checkbox ;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo:
10 |
11 | {text}
12 |
13 |
14 | {text}
15 |
16 |
17 | {text}
18 |
19 |
20 | );
21 |
22 | const componentDemo: ComponentDemo = {
23 | demo:
7 |
12 | );
13 |
14 | const componentDemo: ComponentDemo = {
15 | demo:
7 |
13 | );
14 |
15 | const componentDemo: ComponentDemo = {
16 | demo:
7 | Cloud Database
8 | Prepaid
9 | YES
10 |
11 | 2018-04-24 18:00:00
12 |
13 |
14 | );
15 |
16 | const componentDemo: ComponentDemo = {
17 | demo:
9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
10 | merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
11 | quo modo.
12 |
13 | Text
14 |
15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
16 | merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
17 | quo modo.
18 |
19 |
20 | Left Text
21 |
22 |
23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
24 | merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
25 | quo modo.
26 |
27 |
28 | Right Text
29 |
30 |
31 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
32 | merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
33 | quo modo.
34 |
35 |
36 | );
37 |
38 | const componentDemo: ComponentDemo = {
39 | demo:
19 | Open
20 |
21 |
27 | Some contents...
28 | Some contents...
29 | Some contents...
30 |
31 |
32 | );
33 | };
34 |
35 | const componentDemo: ComponentDemo = {
36 | demo:
9 | e.preventDefault()}>
10 | Hover me
12 |
34 | );
35 |
36 | const componentDemo: ComponentDemo = {
37 | demo:
7 |
8 |
13 | 1st menu item
14 |
15 |
16 |
22 | 2nd menu item (disabled)
23 |
24 |
25 |
26 |
31 | 3rd menu item (disabled)
32 |
33 |
34 | a danger item
35 |
36 | );
37 |
38 | export default menu;
39 |
--------------------------------------------------------------------------------
/src/previews/components/empty/empty.tsx:
--------------------------------------------------------------------------------
1 | import { Empty } from 'antd';
2 | import React from 'react';
3 | import type { ComponentDemo } from '../../../interface';
4 |
5 | const Demo = () =>
32 |
33 |
35 |
36 |
38 |
39 |
42 |
43 |
47 |
48 | );
49 | };
50 |
51 | const componentDemo: ComponentDemo = {
52 | demo:
14 |
17 | );
18 |
19 | const componentDemo: ComponentDemo = {
20 | demo: (
16 |
17 | {item.title} }
20 | description="Ant Design, a design language for background applications, is refined by Ant UED Team"
21 | />
22 |
23 | )}
24 | />
25 | );
26 |
27 | const componentDemo: ComponentDemo = {
28 | demo:
17 | afc163
18 | zombieJ
19 | yesmeck
20 |
21 | );
22 |
23 | const componentDemo: ComponentDemo = {
24 | demo:
14 | afc163
15 | zombieJ
16 | yesmeck
17 |
18 | );
19 |
20 | const componentDemo: ComponentDemo = {
21 | demo:
15 | afc163
16 | zombieJ
17 | yesmeck
18 |
19 | );
20 |
21 | const componentDemo: ComponentDemo = {
22 | demo:
17 | afc163
18 | zombieJ
19 | yesmeck
20 |
21 | );
22 |
23 | const componentDemo: ComponentDemo = {
24 | demo: ['items'][number];
10 |
11 | const getItem = (
12 | label: React.ReactNode,
13 | key: React.Key,
14 | icon?: React.ReactNode,
15 | children?: MenuItem[],
16 | type?: 'group',
17 | ): MenuItem =>
18 | ({
19 | key,
20 | icon,
21 | children,
22 | label,
23 | type,
24 | } as MenuItem);
25 |
26 | const items: MenuProps['items'] = [
27 | getItem('Navigation One', 'sub1',
16 |
12 |
Some contents...
Some contents...
Some contents...
11 |
12 |
13 | );
14 | };
15 |
16 | const componentDemo: ComponentDemo = {
17 | demo:
9 | Some contents...
Some contents...
Some contents...
10 |
11 | );
12 | };
13 |
14 | const componentDemo: ComponentDemo = {
15 | demo:
19 | Open Modal
20 |
21 |
27 | Some contents...
Some contents...
Some contents...
28 |
29 |
30 | );
31 | };
32 |
33 | const componentDemo: ComponentDemo = {
34 | demo:
9 | A good news!
10 |
11 | );
12 | };
13 |
14 | const componentDemo: ComponentDemo = {
15 | demo:
14 | Some descriptions.
15 |
16 | );
17 | };
18 |
19 | const componentDemo: ComponentDemo = {
20 | demo:
7 |
9 | );
10 |
11 | const componentDemo: ComponentDemo = {
12 | demo:
7 |
11 | );
12 |
13 | const componentDemo: ComponentDemo = {
14 | demo:
8 |
9 |
12 |
14 | );
15 |
16 | const componentDemo: ComponentDemo = {
17 | demo:
9 |
10 |
11 |
12 |
13 |
14 |
15 |
8 |
9 |
12 |
14 | );
15 |
16 | const componentDemo: ComponentDemo = {
17 | demo:
7 |
8 |
9 | Hangzhou
10 |
11 | Shanghai
12 |
13 |
14 |
15 | Apple
16 | Orange
17 |
18 |
19 | );
20 |
21 | const componentDemo: ComponentDemo = {
22 | demo: Radio ;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo: Radio ;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo:
12 | Go Console
13 | ,
14 | Buy Again ,
15 | ]}
16 | />
17 | );
18 |
19 | const componentDemo: ComponentDemo = {
20 | demo:
7 | Order number: 2017182818828182881 Cloud server configuration takes 1-5
8 | minutes, please wait.
9 |
10 | );
11 | const componentDemo: ComponentDemo = {
12 | demo:
10 |
11 | Jack Lucy
12 |
13 | Disabled
14 |
15 | yiminghe
16 |
17 |
18 | Lucy
19 |
20 |
21 | Lucy
22 |
23 |
24 | Lucy
25 |
26 |
27 | );
28 |
29 | const componentDemo: ComponentDemo = {
30 | demo:
9 |
12 | );
13 | };
14 |
15 | const componentDemo: ComponentDemo = {
16 | demo:
8 | Space
9 | Button
10 |
11 |
12 |
14 |
15 |
20 | Confirm
21 |
22 |
23 | );
24 |
25 | const componentDemo: ComponentDemo = {
26 | demo:
7 |
13 | Recharge
14 |
15 |
16 |
20 | );
21 |
22 | const componentDemo: ComponentDemo = {
23 | demo:
9 |
17 | );
18 |
19 | const componentDemo: ComponentDemo = {
20 | demo:
9 |
17 | );
18 |
19 | const componentDemo: ComponentDemo = {
20 | demo: {text} ,
11 | },
12 | { title: 'Age', dataIndex: 'age', key: 'age' },
13 | { title: 'Address', dataIndex: 'address', key: 'address' },
14 | {
15 | title: 'Tags',
16 | key: 'tags',
17 | dataIndex: 'tags',
18 | render: (tags: string[]) => (
19 | <>
20 | {tags.map((tag: string) => {
21 | let color = tag.length > 5 ? 'geekblue' : 'green';
22 | if (tag === 'loser') {
23 | color = 'volcano';
24 | }
25 | return (
26 |
27 | {tag.toUpperCase()}
28 |
29 | );
30 | })}
31 |
32 | ),
33 | },
34 | {
35 | title: 'Action',
36 | key: 'action',
37 | render: (_: string, record: any) => (
38 |
39 | Invite {record.name} Delete
40 |
41 | ),
42 | },
43 | ];
44 | const data = [
45 | {
46 | key: '1',
47 | name: 'John Brown',
48 | age: 32,
49 | address: 'New York No. 1 Lake Park',
50 | tags: ['nice', 'developer'],
51 | },
52 | {
53 | key: '2',
54 | name: 'Jim Green',
55 | age: 42,
56 | address: 'London No. 1 Lake Park',
57 | tags: ['loser'],
58 | },
59 | {
60 | key: '3',
61 | name: 'Joe Black',
62 | age: 32,
63 | address: 'Sidney No. 1 Lake Park',
64 | tags: ['cool', 'teacher'],
65 | },
66 | ];
67 | const Demo = () => (
68 |
69 | );
70 |
71 | const componentDemo: ComponentDemo = {
72 | demo:
9 |
10 | Content of Tab Pane 1
11 |
12 |
13 | Content of Tab Pane 2
14 |
15 |
16 | Content of Tab Pane 3
17 |
18 |
19 | );
20 |
21 | const componentDemo: ComponentDemo = {
22 | demo:
9 |
10 | Content of Tab Pane 1
11 |
12 |
13 | Content of Tab Pane 2
14 |
15 |
16 | Content of Tab Pane 3
17 |
18 |
19 | );
20 |
21 | const componentDemo: ComponentDemo = {
22 | demo: Error ;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo: Error ;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo: Info ;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo:
9 | Error
10 | Error
11 |
12 | );
13 |
14 | const componentDemo: ComponentDemo = {
15 | demo: Success ;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo: Warning ;
6 |
7 | const componentDemo: ComponentDemo = {
8 | demo:
7 |
8 | Create a services site 2015-09-01
9 |
10 |
11 | Solve initial network problems 2015-09-01
12 |
13 | Technical testing 2015-09-01
14 |
15 | Network problems being solved 2015-09-01
16 |
17 |
18 | );
19 |
20 | const componentDemo: ComponentDemo = {
21 | demo:
7 |
8 | Create a services site 2015-09-01
9 |
10 |
11 | Solve initial network problems 2015-09-01
12 |
13 | Technical testing 2015-09-01
14 |
15 | Network problems being solved 2015-09-01
16 |
17 |
18 | );
19 |
20 | const componentDemo: ComponentDemo = {
21 | demo:
7 | Create a services site 2015-09-01
8 | Solve initial network problems 2015-09-01
9 | Technical testing 2015-09-01
10 | {/*Network problems being solved 2015-09-01 */}
11 |
12 | );
13 |
14 | const componentDemo: ComponentDemo = {
15 | demo:
7 | Tooltip will show on mouse enter.
9 |
10 | );
11 | const componentDemo: ComponentDemo = {
12 | demo: ([]);
16 | const onScroll = () => {};
17 | return (
18 | {
25 | setTargetKeys(nextTargetKeys);
26 | }}
27 | onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
28 | setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
29 | }}
30 | onScroll={onScroll}
31 | render={(item) => item.title}
32 | />
33 | );
34 | };
35 |
36 | const componentDemo: ComponentDemo = {
37 | demo: ([]);
23 | const onScroll = () => {};
24 | return (
25 | {
32 | setTargetKeys(nextTargetKeys);
33 | }}
34 | onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
35 | setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
36 | }}
37 | onScroll={onScroll}
38 | render={(item) => item.title}
39 | />
40 | );
41 | };
42 |
43 | const componentDemo: ComponentDemo = {
44 | demo: (['1', '2']);
15 | const onScroll = () => {};
16 | return (
17 | {
23 | setTargetKeys(nextTargetKeys);
24 | }}
25 | onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
26 | setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
27 | }}
28 | onScroll={onScroll}
29 | render={(item) => item.title}
30 | />
31 | );
32 | };
33 |
34 | const componentDemo: ComponentDemo = {
35 | demo: ([]);
23 | const onScroll = () => {};
24 | return (
25 | {
32 | setTargetKeys(nextTargetKeys);
33 | }}
34 | onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
35 | setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
36 | }}
37 | onScroll={onScroll}
38 | render={(item) => item.title}
39 | />
40 | );
41 | };
42 |
43 | const componentDemo: ComponentDemo = {
44 | demo: sss ,
25 | key: '0-0-1-0',
26 | },
27 | ],
28 | },
29 | ],
30 | },
31 | ];
32 | const Demo = () => {
33 | return (
34 | sss ,
25 | key: '0-0-1-0',
26 | },
27 | ],
28 | },
29 | ],
30 | },
31 | ];
32 | const Demo = () => {
33 | return (
34 |
25 |
26 |
27 |
30 |
31 |
33 |
34 |
35 | );
36 | };
37 |
38 | const componentDemo: ComponentDemo = {
39 | demo:
24 |
25 |
26 |
29 |
30 |
32 |
33 |
34 | );
35 | };
36 |
37 | const componentDemo: ComponentDemo = {
38 | demo: Heading 4 ;
8 |
9 | const componentDemo: ComponentDemo = {
10 | demo:
9 |
10 | Error Title
11 |
12 | error Text
13 |
14 | );
15 |
16 | const componentDemo: ComponentDemo = {
17 | demo:
9 |
10 | Success Title
11 |
12 | success Text
13 |
14 | );
15 |
16 | const componentDemo: ComponentDemo = {
17 | demo:
8 | 《故乡》
9 | ——鲁迅
10 |
11 | 深蓝的天空中挂着一轮金黄的圆月
12 | ，下面是海边的沙地，都种着一望无际的碧绿的西瓜，其间有一个十一二岁的少年，项带银圈，手捏一柄钢叉，
13 | 向一匹猹尽力的刺去
14 | ，那猹却将身一扭，反从他的胯下逃走了。
15 |
16 |
17 |
18 |
19 |
21 |
22 |
24 |
25 |
27 |
28 |
29 |
30 | );
31 |
32 | const componentDemo: ComponentDemo = {
33 | demo:
9 |
10 | Error Title
11 |
12 | error Text
13 |
14 | );
15 |
16 | const componentDemo: ComponentDemo = {
17 | demo:
9 | Warning Title
10 |
11 | );
12 |
13 | const componentDemo: ComponentDemo = {
14 | demo:
9 |
10 | Warning Text
11 |
12 |
13 | );
14 |
15 | const componentDemo: ComponentDemo = {
16 | demo:
9 |
20 |
22 |
33 |
35 |
36 | );
37 |
38 | const componentDemo: ComponentDemo = {
39 | demo:
22 |
24 | );
25 |
26 | const componentDemo: ComponentDemo = {
27 | demo:
20 |
21 |
22 |
28 | {Button.demo}
29 | {Tag.demo}
30 | {Badge.demo}
31 |
32 | {Alert.demo}
33 |
34 |
35 | {Message.demo}
36 | {Progress.demo}
37 |
38 |
39 |
40 | {Notification.demo}
41 | {Timeline.demo}
42 |
43 |
44 | {Menu.demo}
45 | {Upload.demo}
46 | {Dropdown.demo}
47 |
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/previews/overviews/Primary.tsx:
--------------------------------------------------------------------------------
1 | import { Card, Space } from 'antd';
2 | import React from 'react';
3 |
4 | import Button from '../components/button/button-icon';
5 | import Checkbox from '../components/checkbox/checkbox';
6 | import Menu from '../components/menu/menu';
7 | import Pagination from '../components/pagination/outline';
8 | import Popconfirm from '../components/popconfirm/popconfirm';
9 | import RadioButton from '../components/radio/button';
10 | import Radio from '../components/radio/radio';
11 | import SelectTag from '../components/select/selectTag';
12 | import Steps from '../components/steps/steps';
13 | import Switch from '../components/switch/switch';
14 | import Table from '../components/table/table';
15 | import Tabs from '../components/tabs/tabs';
16 | import Timeline from '../components/timeline/timeline';
17 |
18 | export const Primary = ({ id }: { id?: string }) => {
19 | return (
20 |
21 |
22 |
23 | {Menu.demo}
24 |
25 |
26 |
27 | {Button.demo}
28 |
29 | {Radio.demo}
30 | {Checkbox.demo}
31 | {Switch.demo}
32 |
33 | {RadioButton.demo}
34 | {Tabs.demo}
35 |
36 | {SelectTag.demo}
37 |
38 | {Pagination.demo}
39 | {Steps.demo}
40 |
41 | {Popconfirm.demo}
42 | {Timeline.demo}
43 |
44 |
45 |
46 | {Table.demo}
47 |
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/previews/overviews/Success.tsx:
--------------------------------------------------------------------------------
1 | import { Card } from 'antd';
2 | import React from 'react';
3 |
4 | import Alert from '../components/alert/success';
5 | import Input from '../components/input/success';
6 | import Message from '../components/message/success';
7 | import Notification from '../components/notification/success';
8 | import Progress from '../components/progress/success';
9 | import Result from '../components/result/success';
10 | import Tag from '../components/tag/success';
11 | import Timeline from '../components/timeline/success';
12 |
13 | import { Flexbox } from '@arvinxu/layout-kit';
14 |
15 | export const Success = ({ id }: { id?: string }) => {
16 | return (
17 |
18 |
19 |
20 |
21 | {Tag.demo}
22 | {Input.demo}
23 |
24 | {Alert.demo}
25 |
26 |
27 | {Message.demo}
28 | {Progress.demo}
29 |
30 |
31 |
32 | {Notification.demo}
33 | {Timeline.demo}
34 |
35 | {Result.demo}
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/previews/overviews/Warning.tsx:
--------------------------------------------------------------------------------
1 | import { Card } from 'antd';
2 | import React from 'react';
3 |
4 | import Alert from '../components/alert/warning';
5 | import Badge from '../components/badge/warning';
6 | import Input from '../components/input/warning';
7 | import Message from '../components/message/warning';
8 | import Modal from '../components/modal/warning';
9 | import Notification from '../components/notification/warning';
10 | import Popconfirm from '../components/popconfirm/popconfirm';
11 | import Result from '../components/result/warning';
12 | import Tag from '../components/tag/warning';
13 | import Text from '../components/typography/warningText';
14 | import Title from '../components/typography/warningTitle';
15 |
16 | import { Flexbox } from '@arvinxu/layout-kit';
17 |
18 | export const Warning = ({ id }: { id?: string }) => {
19 | return (
20 |
21 |
22 |
23 |
24 | {Title.demo}
25 | {Input.demo}
26 |
27 | {Alert.demo}
28 |
29 |
30 | {Message.demo}
31 | {Popconfirm.demo}
32 |
33 | {Badge.demo}
34 | {Tag.demo}
35 | {Text.demo}
36 |
37 |
38 |
39 |
40 | {Notification.demo}
41 | {Modal.demo}
42 |
43 | {Result.demo}
44 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/src/previews/overviews/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Error';
2 | export * from './Primary';
3 | export * from './Success';
4 | export * from './Warning';
5 |
--------------------------------------------------------------------------------
/src/token-panel-pro/InputNumberPlus.tsx:
--------------------------------------------------------------------------------
1 | import { InputNumber, Slider } from 'antd';
2 | import type { FC } from 'react';
3 | import React from 'react';
4 |
5 | export type InputNumberPlusProps = {
6 | value?: number;
7 | onChange?: (value: number | null) => void;
8 | min?: number;
9 | max?: number;
10 | style?: React.CSSProperties;
11 | };
12 |
13 | const InputNumberPlus: FC = ({
14 | value,
15 | onChange,
16 | min,
17 | max,
18 | style,
19 | }) => {
20 | return (
21 |
22 |
37 | );
38 | };
39 |
40 | export default InputNumberPlus;
41 |
--------------------------------------------------------------------------------
/src/token-panel-pro/ResetTokenButton.tsx:
--------------------------------------------------------------------------------
1 | import { Typography } from 'antd';
2 | import type { FC } from 'react';
3 | import React from 'react';
4 | import type { MutableTheme } from '../interface';
5 | import { useLocale } from '../locale';
6 |
7 | export type ResetTokenButtonProps = {
8 | theme: MutableTheme;
9 | tokenName: string;
10 | style?: React.CSSProperties;
11 | };
12 | const ResetTokenButton: FC = ({
13 | theme,
14 | tokenName,
15 | style,
16 | }) => {
17 | const locale = useLocale();
18 | const showReset = (theme.config.token as any)?.[tokenName];
19 | return (
20 |
21 | theme.onAbort?.(['token', tokenName])}
29 | >
30 | {locale.reset}
31 |
32 |
33 | );
34 | };
35 |
36 | export default ResetTokenButton;
37 |
--------------------------------------------------------------------------------
/src/utils/classifyToken.ts:
--------------------------------------------------------------------------------
1 | import type { GlobalToken } from 'antd/es/theme/interface';
2 | import type { TokenValue } from '../interface';
3 |
4 | function defineTokenType(types: T[]) {
5 | return types;
6 | }
7 |
8 | export const TOKEN_SORTS = defineTokenType([
9 | 'seed',
10 | 'colorCommon',
11 | 'colorText',
12 | 'colorBg',
13 | 'colorFill',
14 | 'colorSplit',
15 | 'font',
16 | 'radius',
17 | 'space',
18 | 'screen',
19 | 'line',
20 | 'motion',
21 | 'control',
22 | 'others',
23 | ]);
24 |
25 | export type TokenType = typeof TOKEN_SORTS[number];
26 |
27 | export function getTypeOfToken(tokenName: string): TokenType {
28 | if (tokenName.startsWith('color')) {
29 | if (
30 | tokenName.startsWith('colorLink') ||
31 | tokenName.startsWith('colorText') ||
32 | tokenName.startsWith('colorIcon') ||
33 | tokenName.startsWith('colorPlaceholder') ||
34 | tokenName.startsWith('colorIcon')
35 | ) {
36 | return 'colorText';
37 | }
38 | if (
39 | tokenName.startsWith('colorBg') ||
40 | tokenName.startsWith('colorPopupBg')
41 | ) {
42 | return 'colorBg';
43 | }
44 | if (
45 | tokenName.startsWith('colorBorder') ||
46 | tokenName.startsWith('colorSplit')
47 | ) {
48 | return 'colorSplit';
49 | }
50 | if (tokenName.startsWith('colorFill')) {
51 | return 'colorFill';
52 | }
53 | return 'colorCommon';
54 | }
55 | if (tokenName.startsWith('font')) {
56 | return 'font';
57 | }
58 | if (tokenName.startsWith('screen')) {
59 | return 'screen';
60 | }
61 | if (tokenName.startsWith('line')) {
62 | return 'line';
63 | }
64 | if (tokenName.startsWith('motion')) {
65 | return 'motion';
66 | }
67 | if (tokenName.startsWith('borderRadius')) {
68 | return 'radius';
69 | }
70 | if (tokenName.startsWith('control')) {
71 | return 'control';
72 | }
73 | if (tokenName.startsWith('margin') || tokenName.startsWith('padding')) {
74 | return 'space';
75 | }
76 | return 'others';
77 | }
78 |
79 | export const classifyToken = (
80 | token: Record,
81 | ): Record => {
82 | const groupedToken: Record = {};
83 | Object.keys(token || {})
84 | .sort((a, b) => a.localeCompare(b))
85 | .forEach((key) => {
86 | const type = getTypeOfToken(key as keyof GlobalToken);
87 | if (!groupedToken[type]) {
88 | groupedToken[type] = [];
89 | }
90 | groupedToken[type].push(key);
91 | });
92 | return groupedToken;
93 | };
94 |
--------------------------------------------------------------------------------
/src/utils/constants.ts:
--------------------------------------------------------------------------------
1 | export const HIGHLIGHT_COLOR = '#FF5500';
2 |
--------------------------------------------------------------------------------
/src/utils/deepUpdateObj.ts:
--------------------------------------------------------------------------------
1 | const deepUpdateObj = (obj: any, path: string[], value: any): any => {
2 | if (path.length === 0) {
3 | return obj;
4 | }
5 | if (path.length === 1) {
6 | if (value === null || value === undefined) {
7 | const newObj = { ...obj };
8 | delete newObj[path[0]];
9 | return newObj;
10 | }
11 | return {
12 | ...obj,
13 | [path[0]]: value,
14 | };
15 | }
16 |
17 | const pathValue = deepUpdateObj(obj[path[0]] ?? {}, path.slice(1), value);
18 | if (
19 | pathValue === null ||
20 | pathValue === undefined ||
21 | Object.keys(pathValue).length === 0
22 | ) {
23 | const newObj = { ...obj };
24 | delete newObj[path[0]];
25 | return newObj;
26 | }
27 | return {
28 | ...obj,
29 | [path[0]]: pathValue,
30 | };
31 | };
32 |
33 | export default deepUpdateObj;
34 |
--------------------------------------------------------------------------------
/src/utils/getColorBgImg.ts:
--------------------------------------------------------------------------------
1 | const getColorBgImg = (dark?: boolean) => {
2 | return dark
3 | ? 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=)'
4 | : 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==)';
5 | };
6 |
7 | export default getColorBgImg;
8 |
--------------------------------------------------------------------------------
/src/utils/getDesignToken.ts:
--------------------------------------------------------------------------------
1 | import type { ThemeConfig } from 'antd/es/config-provider/context';
2 | import type { GlobalToken, MapToken } from 'antd/es/theme/interface';
3 | import defaultMap from 'antd/es/theme/themes/default';
4 | import seed from 'antd/es/theme/themes/seed';
5 | import formatToken from 'antd/es/theme/util/alias';
6 |
7 | export default function getDesignToken(config: ThemeConfig = {}): GlobalToken {
8 | const seedToken = { ...seed, ...config.token };
9 | const mapFn = config.algorithm ?? defaultMap;
10 | const mapToken = Array.isArray(mapFn)
11 | ? mapFn.reduce(
12 | (result, fn) => fn(seedToken, result),
13 | undefined as any,
14 | )
15 | : mapFn(seedToken);
16 | const mergedMapToken = {
17 | ...mapToken,
18 | ...config.components,
19 | override: config.token ?? {},
20 | };
21 | return formatToken(mergedMapToken);
22 | }
23 |
--------------------------------------------------------------------------------
/src/utils/getValueByPath.ts:
--------------------------------------------------------------------------------
1 | export default function getValueByPath(obj: any, path: string[]): any {
2 | if (!obj) {
3 | return undefined;
4 | }
5 | return path.reduce((prev, key) => {
6 | if (prev) {
7 | return prev[key];
8 | }
9 | return undefined;
10 | }, obj);
11 | }
12 |
--------------------------------------------------------------------------------
/src/utils/isColor.ts:
--------------------------------------------------------------------------------
1 | export default function isColor(str: string) {
2 | return (
3 | typeof str === 'string' && (str.startsWith('rgb') || str.startsWith('#'))
4 | );
5 | }
6 |
--------------------------------------------------------------------------------
/src/utils/makeStyle.tsx:
--------------------------------------------------------------------------------
1 | import type { CSSInterpolation } from '@ant-design/cssinjs';
2 | import { useStyleRegister } from '@ant-design/cssinjs';
3 | import { ConfigProvider, theme as antdTheme } from 'antd';
4 | import type { GlobalToken } from 'antd/es/theme/interface';
5 | import { useContext } from 'react';
6 |
7 | const { ConfigContext } = ConfigProvider;
8 |
9 | export type ThemeEditorToken = GlobalToken & {
10 | rootCls: string;
11 | componentCls: string;
12 | headerHeight: number;
13 | };
14 |
15 | const makeStyle =
16 | (
17 | path: string,
18 | styleFn: (token: ThemeEditorToken) => CSSInterpolation,
19 | ): ((
20 | prefixCls?: string,
21 | ) => string) =>
22 | (prefixCls) => {
23 | const { theme, token, hashId } = antdTheme.useToken();
24 | const { getPrefixCls } = useContext(ConfigContext);
25 | const rootCls = getPrefixCls();
26 |
27 | useStyleRegister(
28 | { theme: theme as any, hashId, token, path: [path, prefixCls || ''] },
29 | () =>
30 | styleFn({
31 | ...token,
32 | rootCls: `.${rootCls}`,
33 | componentCls: `.${prefixCls}`,
34 | headerHeight: 56,
35 | }),
36 | )
37 |
38 | return hashId;
39 | };
40 |
41 | export default makeStyle;
42 |
--------------------------------------------------------------------------------
/src/utils/parse-config.ts:
--------------------------------------------------------------------------------
1 | import type { ThemeConfig } from 'antd';
2 | import { theme } from 'antd';
3 |
4 | export type Algorithm = 'dark' | 'compact';
5 |
6 | export interface PlainThemeConfig extends Omit {
7 | algorithm?: Algorithm | Algorithm[];
8 | }
9 |
10 | export const algorithmMap: {
11 | [key in Algorithm]: typeof theme.darkAlgorithm;
12 | } = {
13 | dark: theme.darkAlgorithm,
14 | compact: theme.compactAlgorithm,
15 | };
16 |
17 | export const getAlgorithmString = (algorithm: typeof theme.darkAlgorithm) => {
18 | return Object.entries(algorithmMap).find(
19 | ([, value]) => value === algorithm,
20 | )?.[0] as Algorithm;
21 | };
22 |
23 | export const parsePlainConfig = (config: ThemeConfig): PlainThemeConfig => {
24 | const { algorithm, ...rest } = config;
25 | if (!algorithm) return rest;
26 |
27 | const parsedAlgorithms = Array.isArray(algorithm)
28 | ? algorithm.map(getAlgorithmString)
29 | : getAlgorithmString(algorithm);
30 | return {
31 | ...rest,
32 | algorithm: parsedAlgorithms,
33 | };
34 | };
35 |
36 | export const parseThemeConfig = (config: PlainThemeConfig): ThemeConfig => {
37 | const { algorithm, ...rest } = config;
38 | if (!algorithm) return rest;
39 |
40 | const parsedAlgorithms = Array.isArray(algorithm)
41 | ? algorithm.map((item) => algorithmMap[item]).filter(Boolean)
42 | : algorithmMap[algorithm];
43 | return {
44 | ...rest,
45 | algorithm: parsedAlgorithms,
46 | };
47 | };
48 |
--------------------------------------------------------------------------------
/src/utils/statistic.ts:
--------------------------------------------------------------------------------
1 | import tokenStatistic from 'antd/es/version/token.json';
2 |
3 | const tokenRelatedComponents: {
4 | [key in string]?: string[];
5 | } = {};
6 |
7 | const getRelatedComponentsSingle = (token: string): string[] => {
8 | if (!tokenRelatedComponents[token]) {
9 | tokenRelatedComponents[token] = Object.entries(tokenStatistic)
10 | .filter(([, tokens]) => {
11 | return (tokens.global as string[]).includes(token);
12 | })
13 | .map(([component]) => component);
14 | }
15 | return tokenRelatedComponents[token] ?? [];
16 | };
17 |
18 | export const getRelatedComponents = (token: string | string[]): string[] => {
19 | const mergedTokens = Array.isArray(token) ? token : [token];
20 | return Array.from(
21 | new Set(
22 | mergedTokens.reduce((result, item) => {
23 | return result.concat(getRelatedComponentsSingle(item));
24 | }, []),
25 | ),
26 | );
27 | };
28 |
29 | export const getComponentToken = (component: string) =>
30 | (tokenStatistic as any)[component];
31 |
--------------------------------------------------------------------------------
/tests/TokenInput.test.tsx:
--------------------------------------------------------------------------------
1 | import { fireEvent, render } from '@testing-library/react';
2 | import React from 'react';
3 | import TokenInput from '../src/TokenInput';
4 |
5 | describe('TokenInput', () => {
6 | it('reset btn should display correctly', () => {
7 | const { container } = render(
52 | ,
54 | );
55 | expect(getDesignToken(themeConfig)).toStrictEqual(tokenFromHook);
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/tests/utils/setup.js:
--------------------------------------------------------------------------------
1 | if (!window.matchMedia) {
2 | Object.defineProperty(global.window, 'matchMedia', {
3 | value: jest.fn((query) => ({
4 | matches: query.includes('max-width'),
5 | addListener: jest.fn(),
6 | removeListener: jest.fn(),
7 | })),
8 | });
9 | }
10 |
--------------------------------------------------------------------------------
/tests/utils/setupAfterEnv.ts:
--------------------------------------------------------------------------------
1 | jest.mock('antd', () => {
2 | const antd = jest.requireActual('antd');
3 | antd.theme.defaultConfig.hashed = false;
4 |
5 | return antd;
6 | });
7 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "ESNext",
5 | "moduleResolution": "node",
6 | "baseUrl": "./",
7 | "lib": ["dom", "es2017"],
8 | "jsx": "react",
9 | "strict": true,
10 | "esModuleInterop": true,
11 | "experimentalDecorators": true,
12 | "emitDecoratorMetadata": true,
13 | "resolveJsonModule": true,
14 | "skipLibCheck": true,
15 | "declaration": true,
16 | "paths": {
17 | "antd-token-previewer": ["src/index.tsx"]
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/type.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 |
3 | declare module '*.less';
4 |
--------------------------------------------------------------------------------