Skip to content

Commit

Permalink
Merge branch 'feature' into wuxh/refactor-color-panel
Browse files Browse the repository at this point in the history
  • Loading branch information
Wxh16144 committed Dec 18, 2023
2 parents b967fcb + a8fc2ec commit 097d170
Show file tree
Hide file tree
Showing 13 changed files with 543 additions and 298 deletions.
79 changes: 43 additions & 36 deletions .dumi/theme/builtins/ComponentTokenTable/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,26 @@
import { RightOutlined, LinkOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import React, { useMemo, useState } from 'react';
import { LinkOutlined, QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';
import { ConfigProvider, Popover, Table, Typography } from 'antd';
import { createStyles, css, useTheme } from 'antd-style';
import { getDesignToken } from 'antd-token-previewer';
import React, { useMemo, useState } from 'react';
import tokenMeta from 'antd/es/version/token-meta.json';
import tokenData from 'antd/es/version/token.json';
import { ConfigProvider, Table, Popover, Typography } from 'antd';

import useLocale from '../../../hooks/useLocale';
import { useColumns } from '../TokenTable';

const compare = (token1: string, token2: string) => {
const hasColor1 = token1.toLowerCase().includes('color');
const hasColor2 = token2.toLowerCase().includes('color');
if (hasColor1 && !hasColor2) {
return -1;
}
if (!hasColor1 && hasColor2) {
return 1;
}
return token1 < token2 ? -1 : 1;
};

const defaultToken = getDesignToken();

const locales = {
Expand All @@ -18,6 +31,8 @@ const locales = {
value: '默认值',
componentToken: '组件 Token',
globalToken: '全局 Token',
componentComment: '这里是你的组件 token',
globalComment: '这里是你的全局 token',
help: '如何定制?',
customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量',
customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改组件变量',
Expand All @@ -29,6 +44,8 @@ const locales = {
value: 'Default Value',
componentToken: 'Component Token',
globalToken: 'Global Token',
componentComment: 'here is your component tokens',
globalComment: 'here is your global tokens',
help: 'How to use?',
customizeTokenLink: '/docs/react/customize-theme#customize-design-token',
customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token',
Expand All @@ -46,13 +63,13 @@ const useStyle = createStyles(() => ({
`,
arrowIcon: css`
font-size: 16px;
margin-right: 8px;
margin-inline-end: 8px;
& svg {
transition: all 0.3s;
}
`,
help: css`
margin-left: 8px;
margin-inline-start: 8px;
font-size: 12px;
font-weight: normal;
color: #999;
Expand All @@ -69,16 +86,14 @@ interface SubTokenTableProps {
helpLink: string;
tokens: string[];
component?: string;
comment?: {
componentComment?: string;
globalComment?: string;
};
}

const SubTokenTable: React.FC<SubTokenTableProps> = ({
defaultOpen,
tokens,
title,
helpText,
helpLink,
component,
}) => {
const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
const { defaultOpen, tokens, title, helpText, helpLink, component, comment } = props;
const [, lang] = useLocale(locales);
const token = useTheme();
const columns = useColumns();
Expand All @@ -92,24 +107,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({
}

const data = tokens
.sort(
component
? undefined
: (token1, token2) => {
const hasColor1 = token1.toLowerCase().includes('color');
const hasColor2 = token2.toLowerCase().includes('color');

if (hasColor1 && !hasColor2) {
return -1;
}

if (!hasColor1 && hasColor2) {
return 1;
}

return token1 < token2 ? -1 : 1;
},
)
.sort(component ? undefined : compare)
.map((name) => {
const meta = component
? tokenMeta.components[component].find((item) => item.token === name)
Expand All @@ -133,7 +131,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({
theme={{
components: {
${component}: {
/* here is your component tokens */
/* ${comment?.componentComment} */
},
},
}}
Expand All @@ -143,7 +141,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({
: `<ConfigProvider
theme={{
token: {
/* here is your global tokens */
/* ${comment?.globalComment} */
},
}}
>
Expand All @@ -161,16 +159,17 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({
popupStyle={{ width: 400 }}
content={
<Typography>
{/* <SourceCode lang="jsx">{code}</SourceCode> */}
<pre style={{ fontSize: 12 }}>{code}</pre>
<a href={helpLink} target="_blank" rel="noreferrer">
<LinkOutlined style={{ marginRight: 4 }} />
<LinkOutlined style={{ marginInlineEnd: 4 }} />
{helpText}
</a>
</Typography>
}
>
<span className={styles.help}>
<QuestionCircleOutlined style={{ marginRight: 3 }} />
<QuestionCircleOutlined style={{ marginInlineEnd: 4 }} />
{helpText}
</span>
</Popover>
Expand Down Expand Up @@ -217,19 +216,27 @@ const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component })
<>
{tokenMeta.components[component] && (
<SubTokenTable
defaultOpen
title={locale.componentToken}
helpText={locale.help}
helpLink={locale.customizeTokenLink}
tokens={tokenMeta.components[component].map((item) => item.token)}
component={component}
defaultOpen
comment={{
componentComment: locale.componentComment,
globalComment: locale.globalComment,
}}
/>
)}
<SubTokenTable
title={locale.globalToken}
helpText={locale.help}
helpLink={locale.customizeComponentTokenLink}
tokens={mergedGlobalTokens}
comment={{
componentComment: locale.componentComment,
globalComment: locale.globalComment,
}}
/>
</>
);
Expand Down
39 changes: 39 additions & 0 deletions .dumi/theme/builtins/Container/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* copied: https://github.com/arvinxx/dumi-theme-antd-style/tree/master/src/builtins/Container
*/
import * as React from 'react';
import { Alert } from 'antd';
import { type FC, type ReactNode } from 'react';
import useStyles from './style';

const Container: FC<{
type: 'info' | 'warning' | 'success' | 'error';
title?: string;
children: ReactNode;
}> = ({ type, title, children }) => {
const { styles, cx } = useStyles();

return (
<div data-type={type} className={styles.container}>
<Alert
showIcon
type={type}
message={title || type.toUpperCase()}
description={
<div
className={cx(
styles.desc,
// 为了让 markdown 的样式生效,需要在这里添加一个额外的 class
'markdown',
)}
>
{children}
</div>
}
className={styles.alert}
/>
</div>
);
};

export default Container;
22 changes: 22 additions & 0 deletions .dumi/theme/builtins/Container/style.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ prefixCls, css }) => ({
container: css`
margin: 8px 0;
`,

alert: css`
.${prefixCls}-alert-message {
font-weight: bold;
}
`,

/* 使用 `&&` 加一点点权重 */
desc: css`
&& p {
margin: 0;
}
`,
}));

export default useStyles;
38 changes: 38 additions & 0 deletions .dumi/theme/slots/Content/ContributorAvatar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import { Avatar, Skeleton, Tooltip } from 'antd';

const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 3 }) => (
<li>
{Array.from({ length: num }).map((_, i) => (
<Skeleton.Avatar size="small" active key={i} style={{ marginLeft: i === 0 ? 0 : -8 }} />
))}
</li>
);

interface ContributorAvatarProps {
username?: string;
url?: string;
loading?: boolean;
}

const ContributorAvatar: React.FC<ContributorAvatarProps> = ({ username, url, loading }) => {
if (loading) {
return <AvatarPlaceholder />;
}
if (username?.includes('github-actions')) {
return null;
}
return (
<Tooltip title={username}>
<li>
<a href={`https://github.com/${username}`} target="_blank" rel="noopener noreferrer">
<Avatar size="small" src={url} alt={username}>
{username}
</Avatar>
</a>
</li>
</Tooltip>
);
};

export default ContributorAvatar;
82 changes: 82 additions & 0 deletions .dumi/theme/slots/Content/Contributors.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React, { useContext } from 'react';
import classNames from 'classnames';
import { useIntl } from 'dumi';
import { createStyles } from 'antd-style';
import ContributorsList from '@qixian.cs/github-contributors-list';
import ContributorAvatar from './ContributorAvatar';
import SiteContext from '../SiteContext';

const useStyle = createStyles(({ token, css }) => {
const { antCls } = token;

return {
contributorsList: css`
margin-top: 120px !important;
`,
listMobile: css`
margin: 1em 0 !important;
`,
title: css`
font-size: 12px;
opacity: 0.45;
`,
list: css`
display: flex;
flex-wrap: wrap;
clear: both;
li {
height: 24px;
}
li,
${antCls}-avatar + ${antCls}-avatar {
transition: all ${token.motionDurationSlow};
margin-inline-end: -8px;
}
&:hover {
li,
${antCls}-avatar {
margin-inline-end: 0;
}
}
`,
};
});

interface ContributorsProps {
filename?: string;
}

const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
const { formatMessage } = useIntl();
const { styles } = useStyle();
const { isMobile } = useContext(SiteContext);

if (!filename) {
return null;
}

return (
<div className={classNames(styles.contributorsList, { [styles.listMobile]: isMobile })}>
<div className={styles.title}>{formatMessage({ id: 'app.content.contributors' })}</div>
<ContributorsList
cache
repo="ant-design"
owner="ant-design"
fileName={filename}
className={styles.list}
renderItem={(item, loading) => (
<ContributorAvatar
key={item?.username}
username={item?.username}
url={item?.url}
loading={loading}
/>
)}
/>
</div>
);
};

export default Contributors;

0 comments on commit 097d170

Please sign in to comment.