[Feature Branch] chore(merge): Merge master branch

.dumi/rehypePlugin.ts

@@ -0,0 +1,112 @@
+import assert from 'assert';
+import type { HastRoot, UnifiedTransformer } from 'dumi';
+import { unistUtilVisit } from 'dumi';
+
+/**
+ * plugin for modify hast tree when docs compiling
+ */
+function rehypeAntd(): UnifiedTransformer<HastRoot> {
+  return (tree, vFile) => {
+    const { filename } = vFile.data.frontmatter as any;
+
+    unistUtilVisit.visit(tree, 'element', (node, i, parent) => {
+      if (node.tagName === 'DumiDemoGrid') {
+        // replace DumiDemoGrid to DemoWrapper, to implement demo toolbar
+        node.tagName = 'DemoWrapper';
+      } else if (node.tagName === 'ResourceCards') {
+        const propNames = ['title', 'cover', 'description', 'src', 'official'];
+        const contentNode = node.children[0];
+
+        assert(
+          contentNode.type === 'text',
+          `ResourceCards content must be plain text!\nat ${filename}`
+        );
+
+        // clear children
+        node.children = [];
+
+        // generate JSX props
+        (node as any).JSXAttributes = [
+          {
+            type: 'JSXAttribute',
+            name: 'resources',
+            value: JSON.stringify(
+              contentNode.value
+                .trim()
+                .split('\n')
+                .reduce<any>((acc, cur) => {
+                  // match text from `  - 桌面组件 Sketch 模板包`
+                  const [, isProp, val] = cur.match(/(\s+)?-\s(.+)/)!;
+
+                  if (!isProp) {
+                    // create items when match title
+                    acc.push({ [propNames[0]]: val });
+                  } else {
+                    // add props when match others
+                    const prev = acc[acc.length - 1];
+
+                    prev[propNames[Object.keys(prev).length]] = val;
+                  }
+
+                  return acc;
+                }, [])
+            ),
+          },
+        ];
+      } else if (
+        node.type === 'element' &&
+        node.tagName === 'Table' &&
+        (/^packages\/design/.test(filename) ||
+          /^packages\/ui/.test(filename) ||
+          /^packages\/charts/.test(filename))
+      ) {
+        if (!node.properties) return;
+        node.properties.className ??= [];
+        (node.properties.className as string[]).push('component-api-table');
+      } else if (node.type === 'element' && (node.tagName === 'Link' || node.tagName === 'a')) {
+        const href = (node.properties?.href || node.properties?.to) as string;
+        // 外部链接新开标签页跳转
+        if (href?.startsWith('http')) {
+          node.properties!.target = '_blank';
+        }
+        // node.properties!.sourceType = tagName;
+        // node.tagName = 'LocaleLink';
+      }
+      // else if (node.type === 'element' && node.tagName === 'video') {
+      //   node.tagName = 'VideoPlayer';
+      // }
+      else if (node.tagName === 'SourceCode') {
+        const { lang } = node.properties!;
+
+        if (typeof lang === 'string' && lang.startsWith('sandpack')) {
+          const code = (node.children[0] as any).value as string;
+          const configRegx = /^const sandpackConfig = ([\S\s]*?});/;
+          const [configString] = code.match(configRegx) || [];
+          /* biome-ignore lint/security/noGlobalEval: used in documentation */ /* eslint-disable-next-line no-eval */
+          const config = configString && eval(`(${configString.replace(configRegx, '$1')})`);
+          Object.keys(config || {}).forEach(key => {
+            if (typeof config[key] === 'object') {
+              config[key] = JSON.stringify(config[key]);
+            }
+          });
+
+          parent!.children.splice(i!, 1, {
+            type: 'element',
+            tagName: 'Sandpack',
+            properties: {
+              ...config,
+            },
+            children: [
+              {
+                type: 'text',
+                value: code.replace(configRegx, '').trim(),
+              },
+            ],
+          });
+        }
+      }
+    });
+  };
+}
+
+export default rehypeAntd;

.dumi/remarkPlugin.ts

@@ -0,0 +1,15 @@
+import { unistUtilVisit } from 'dumi';
+import type { UnifiedTransformer } from 'dumi';
+
+function remarkMeta(): UnifiedTransformer<any> {
+  return (tree, vFile) => {
+    // read frontmatter
+    unistUtilVisit.visit(tree, 'yaml', (node) => {
+      if (!/(^|[\n\r])description:/.test(node.value)) {
+        (vFile.data.frontmatter as any).__autoDescription = true;
+      }
+    });
+  };
+}
+
+export default remarkMeta;

.dumi/theme/SiteThemeProvider.tsx

@@ -10,6 +10,28 @@ import SiteContext from './slots/SiteContext';
 import zhCN from '../../packages/design/src/locale/zh-CN';
 import useSiteToken from '../hooks/useSiteToken';
 
+interface NewToken {
+  bannerHeight: number;
+  headerHeight: number;
+  menuItemBorder: number;
+  mobileMaxWidth: number;
+  siteMarkdownCodeBg: string;
+  antCls: string;
+  iconCls: string;
+  marginFarXS: number;
+  marginFarSM: number;
+  marginFar: number;
+  codeFamily: string;
+  contentMarginTop: number;
+  anchorTop: number;
+}
+
+// 通过给 antd-style 扩展 CustomToken 对象类型定义，可以为 useTheme 中增加相应的 token 对象
+declare module 'antd-style' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface CustomToken extends NewToken {}
+}
+
 const SiteThemeProvider: FC<
   ThemeProviderProps<any> & {
     theme: ThemeConfig;

.dumi/theme/builtins/Caution.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useSiteToken from '../../hooks/useSiteToken';
+
+export interface CautionProps {
+  title: React.ReactNode;
+  filename?: string;
+}
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    do: css`
+      font-size: 20px;
+      color: ${token.colorWarningText};
+    `,
+  };
+};
+
+export default function Caution({}: CautionProps) {
+  const styles = useStyle();
+
+  return <div css={styles.do}>Caution</div>;
+}

.dumi/theme/builtins/ColorChunk/index.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import type { ColorInput } from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
+import { createStyles } from 'antd-style';
+
+const useStyle = createStyles(({ token, css }) => ({
+  codeSpan: css`
+    padding: 0.2em 0.4em;
+    font-size: 0.9em;
+    background: ${token.siteMarkdownCodeBg};
+    border-radius: ${token.borderRadius}px;
+    font-family: monospace;
+  `,
+  dot: css`
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-inline-end: ${token.marginXXS}px;
+    border: 1px solid ${token.colorSplit};
+  `,
+}));
+
+interface ColorChunkProps {
+  value?: ColorInput;
+}
+
+const ColorChunk: React.FC<React.PropsWithChildren<ColorChunkProps>> = (props) => {
+  const { styles } = useStyle();
+  const { value, children } = props;
+
+  const dotColor = React.useMemo(() => {
+    const _color = new TinyColor(value).toHex8String();
+    return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
+  }, [value]);
+
+  return (
+    <span className={styles.codeSpan}>
+      <span className={styles.dot} style={{ backgroundColor: dotColor }} />
+      {children ?? dotColor}
+    </span>
+  );
+};
+
+export default ColorChunk;

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -29,6 +29,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
         (acc, item) => {
           const { previewerProps } = item;
           const { debug } = previewerProps;
+          console.log(debug);
 
           if (debug && !showDebug) return acc;
 
@@ -37,8 +38,6 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
             previewerProps: {
               ...previewerProps,
               expand: expandAll,
-              // always override debug property, because dumi will hide debug demo in production
-              debug: false,
               /**
                * extra marker for the original debug
                */

.dumi/theme/builtins/Do.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useSiteToken from '../../hooks/useSiteToken';
+
+export interface DoProps {
+  title: React.ReactNode;
+  filename?: string;
+}
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    do: css`
+      font-size: 20px;
+      color: ${token.colorSuccessText};
+    `,
+  };
+};
+
+export default function Do({}: DoProps) {
+  const styles = useStyle();
+
+  return <div css={styles.do}>Do</div>;
+}

.dumi/theme/builtins/Donot.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useSiteToken from '../../hooks/useSiteToken';
+
+export interface DonotProps {
+  title: React.ReactNode;
+  filename?: string;
+}
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    do: css`
+      font-size: 20px;
+      color: ${token.colorErrorText};
+    `,
+  };
+};
+
+export default function Do({}: DonotProps) {
+  const styles = useStyle();
+
+  return <div css={styles.do}>Don't</div>;
+}