Skip to content

Commit

Permalink
Merge branch 'master' into fix/upload-tabindex
Browse files Browse the repository at this point in the history
  • Loading branch information
MadCcc committed Dec 22, 2023
2 parents c5bcd40 + 45b8072 commit 083aa0f
Show file tree
Hide file tree
Showing 162 changed files with 3,379 additions and 2,669 deletions.
79 changes: 43 additions & 36 deletions .dumi/theme/builtins/ComponentTokenTable/index.tsx
@@ -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
@@ -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
@@ -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;
3 changes: 2 additions & 1 deletion .dumi/theme/builtins/Previewer/index.tsx
Expand Up @@ -10,8 +10,9 @@ const Previewer = React.lazy(() => import('./Previewer'));
const useStyle = createStyles(({ css }) => ({
skeletonWrapper: css`
width: 100% !important;
height: 500px;
height: 250px;
margin-bottom: 16px;
border-radius: 8px;
`,
}));

Expand Down
12 changes: 9 additions & 3 deletions .dumi/theme/common/Loading.tsx
Expand Up @@ -11,10 +11,16 @@ const Loading: React.FC = () => {
pathname.startsWith('/changelog')
) {
return (
<Space direction="vertical" style={{ width: '100%', marginTop: 24 }} size={40}>
<Skeleton title={false} active paragraph={{ rows: 3 }} />
<div style={{ maxWidth: '70vw', width: '100%', margin: '80px auto 0', textAlign: 'center' }}>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
width={40}
alt="loading"
style={{ marginBottom: 24, filter: 'grayscale(1)', opacity: 0.33 }}
/>
<Skeleton active paragraph={{ rows: 3 }} />
</Space>
<Skeleton active paragraph={{ rows: 4 }} style={{ marginTop: 32 }} />
</div>
);
}

Expand Down
6 changes: 1 addition & 5 deletions .dumi/theme/common/styles/Demo.tsx
Expand Up @@ -39,7 +39,7 @@ const GlobalDemoStyles: React.FC = () => {
.code-box-demo {
background-color: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
border-radius: ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0;
> .demo {
overflow: auto;
}
Expand Down Expand Up @@ -85,10 +85,6 @@ const GlobalDemoStyles: React.FC = () => {
transition: background-color 0.4s;
margin-inline-start: 16px;
${antCls}-row-rtl & {
border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px;
}
a,
a:hover {
color: ${token.colorText};
Expand Down
38 changes: 38 additions & 0 deletions .dumi/theme/slots/Content/ContributorAvatar.tsx
@@ -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;

0 comments on commit 083aa0f

Please sign in to comment.