Browse Source
* chore: token doc * docs: token meta * chore: code clean * chore: code clean * chore: json * chore: rename * chore: stylepull/38989/head
MadCcc
2 years ago
committed by
GitHub
GitHub
9 changed files with 594 additions and 454 deletions
@ -0,0 +1,114 @@ |
|||
import React, { FC, useMemo } from 'react'; |
|||
import tokenMeta from 'antd/es/version/token-meta.json'; |
|||
import { getDesignToken } from 'antd-token-previewer'; |
|||
import { Table, TableProps, Tag } from 'antd'; |
|||
import useLocale from '../../../hooks/useLocale'; |
|||
import useSiteToken from '../../../hooks/useSiteToken'; |
|||
import { css } from '@emotion/react'; |
|||
|
|||
type TokenTableProps = { |
|||
type: 'seed' | 'map' | 'alias'; |
|||
lang: 'zh' | 'en'; |
|||
}; |
|||
|
|||
type TokenData = { |
|||
name: string; |
|||
desc: string; |
|||
type: string; |
|||
value: any; |
|||
}; |
|||
|
|||
const defaultToken = getDesignToken(); |
|||
|
|||
const locales = { |
|||
cn: { |
|||
token: 'Token 名称', |
|||
description: '描述', |
|||
type: '类型', |
|||
value: '默认值', |
|||
}, |
|||
en: { |
|||
token: 'Token Name', |
|||
description: 'Description', |
|||
type: 'Type', |
|||
value: 'Default Value', |
|||
}, |
|||
}; |
|||
|
|||
const useStyle = () => { |
|||
const { token } = useSiteToken(); |
|||
|
|||
return { |
|||
codeSpan: css` |
|||
margin: 0 1px; |
|||
padding: 0.2em 0.4em; |
|||
font-size: 0.9em; |
|||
background: ${token.siteMarkdownCodeBg}; |
|||
border: 1px solid ${token.colorSplit}; |
|||
border-radius: 3px; |
|||
font-family: monospace; |
|||
`,
|
|||
}; |
|||
}; |
|||
|
|||
const TokenTable: FC<TokenTableProps> = ({ type }) => { |
|||
const styles = useStyle(); |
|||
const [locale, lang] = useLocale(locales); |
|||
const columns: Exclude<TableProps<TokenData>['columns'], undefined> = [ |
|||
{ |
|||
title: locale.token, |
|||
key: 'name', |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: locale.description, |
|||
key: 'desc', |
|||
dataIndex: 'desc', |
|||
width: 300, |
|||
}, |
|||
{ |
|||
title: locale.type, |
|||
key: 'type', |
|||
dataIndex: 'type', |
|||
render: (_, record) => <span css={styles.codeSpan}>{record.type}</span>, |
|||
}, |
|||
{ |
|||
title: locale.value, |
|||
key: 'value', |
|||
render: (_, record) => ( |
|||
<span style={{ display: 'inline-flex', alignItems: 'center' }}> |
|||
{typeof record.value === 'string' && |
|||
(record.value.startsWith('#') || record.value.startsWith('rgb')) && ( |
|||
<span |
|||
style={{ |
|||
background: record.value, |
|||
display: 'inline-block', |
|||
width: 6, |
|||
height: 6, |
|||
borderRadius: '50%', |
|||
boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.06)', |
|||
marginRight: 4, |
|||
}} |
|||
></span> |
|||
)} |
|||
{typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value} |
|||
</span> |
|||
), |
|||
}, |
|||
]; |
|||
|
|||
const data = useMemo<TokenData[]>(() => { |
|||
return tokenMeta[type].map((token) => { |
|||
return { |
|||
name: token.name, |
|||
desc: lang === 'cn' ? token.desc : token.descEn, |
|||
type: token.type, |
|||
value: (defaultToken as any)[token.name], |
|||
}; |
|||
}); |
|||
}, [type, lang]); |
|||
|
|||
return <Table dataSource={data} columns={columns} pagination={false} bordered />; |
|||
}; |
|||
|
|||
export default TokenTable; |
|||
@ -0,0 +1,71 @@ |
|||
const TypeDoc = require('typedoc'); |
|||
const fs = require('fs-extra'); |
|||
|
|||
const getTokenList = (list, source) => |
|||
list |
|||
.filter((item) => !item.comment?.blockTags.some((tag) => tag.tag === '@internal')) |
|||
.map((item) => ({ |
|||
source, |
|||
name: item.name, |
|||
type: item.type.toString(), |
|||
desc: item.comment?.blockTags?.find((tag) => tag.tag === '@desc')?.content[0]?.text || '-', |
|||
descEn: |
|||
item.comment?.blockTags?.find((tag) => tag.tag === '@descEn')?.content[0]?.text || '-', |
|||
})); |
|||
|
|||
function main() { |
|||
const app = new TypeDoc.Application(); |
|||
|
|||
// If you want TypeDoc to load tsconfig.json / typedoc.json files
|
|||
app.options.addReader(new TypeDoc.TSConfigReader()); |
|||
app.options.addReader(new TypeDoc.TypeDocReader()); |
|||
|
|||
app.bootstrap({ |
|||
// typedoc options here
|
|||
entryPoints: ['components/theme/interface.ts'], |
|||
}); |
|||
|
|||
const project = app.convert(); |
|||
|
|||
if (project) { |
|||
// Project may not have converted correctly
|
|||
const output = 'components/version/token-meta.json'; |
|||
const tokenMeta = {}; |
|||
let presetColors = []; |
|||
project.children.forEach((type) => { |
|||
if (type.name === 'SeedToken') { |
|||
tokenMeta.seed = getTokenList(type.children, 'seed'); |
|||
} else if (type.name === 'MapToken') { |
|||
tokenMeta.map = getTokenList(type.children, 'map'); |
|||
} else if (type.name === 'AliasToken') { |
|||
tokenMeta.alias = getTokenList(type.children, 'alias'); |
|||
} else if (type.name === 'PresetColors') { |
|||
presetColors = type.type.target.elements.map((item) => item.value); |
|||
} |
|||
}); |
|||
|
|||
// Exclude preset colors
|
|||
tokenMeta.seed = tokenMeta.seed.filter( |
|||
(item) => !presetColors.some((color) => item.name.startsWith(color)), |
|||
); |
|||
tokenMeta.map = tokenMeta.map.filter( |
|||
(item) => !presetColors.some((color) => item.name.startsWith(color)), |
|||
); |
|||
tokenMeta.alias = tokenMeta.alias.filter( |
|||
(item) => !presetColors.some((color) => item.name.startsWith(color)), |
|||
); |
|||
|
|||
tokenMeta.alias = tokenMeta.alias.filter( |
|||
(item) => !tokenMeta.map.some((mapItem) => mapItem.name === item.name), |
|||
); |
|||
tokenMeta.map = tokenMeta.map.filter( |
|||
(item) => !tokenMeta.seed.some((seedItem) => seedItem.name === item.name), |
|||
); |
|||
|
|||
fs.writeJsonSync(output, tokenMeta, 'utf8'); |
|||
// eslint-disable-next-line no-console
|
|||
console.log(`✅ Token Meta has been written to ${output}`); |
|||
} |
|||
} |
|||
|
|||
main(); |
|||
Loading…
Reference in new issue