docs: Support semantic preview (#47332)

* docs: init

* docs: semantic block

* docs: part of demo

* docs: modal

* docs: slider

* docs: space

* docs: all sementic

* docs: clean up

* chore: fix lint

* chore: clean up

* chore: update script

* test: fix test case

* test: update testcase

.dumi/components/SemanticPreview.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { Col, ConfigProvider, Flex, Row, Tag, theme, Typography } from 'antd';
+
+export interface SemanticPreviewProps {
+  semantics: { name: string; desc: string; version?: string }[];
+  children: React.ReactElement;
+  height?: number;
+}
+
+const SemanticPreview = (props: SemanticPreviewProps) => {
+  const { semantics = [], children, height } = props;
+  const { token } = theme.useToken();
+
+  // ======================= Semantic =======================
+  const getMarkClassName = React.useCallback(
+    (semanticKey: string) => `semantic-mark-${semanticKey}`,
+    [],
+  );
+
+  const semanticClassNames = React.useMemo(() => {
+    const classNames: Record<string, string> = {};
+
+    semantics.forEach((semantic) => {
+      classNames[semantic.name] = getMarkClassName(semantic.name);
+    });
+
+    return classNames;
+  }, [semantics]);
+
+  const cloneNode = React.cloneElement(children, {
+    classNames: semanticClassNames,
+  });
+
+  // ======================== Hover =========================
+  const MARK_BORDER_SIZE = 2;
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const [positionMotion, setPositionMotion] = React.useState(false);
+
+  const [hoverSemantic, setHoverSemantic] = React.useState<string | null>(null);
+  const [markPos, setMarkPos] = React.useState<
+    [left: number, top: number, width: number, height: number]
+  >([0, 0, 0, 0]);
+
+  React.useEffect(() => {
+    if (hoverSemantic) {
+      const targetClassName = getMarkClassName(hoverSemantic);
+      const targetElement = containerRef.current?.querySelector(`.${targetClassName}`);
+
+      const containerRect = containerRef.current?.getBoundingClientRect();
+      const targetRect = targetElement?.getBoundingClientRect();
+
+      setMarkPos([
+        (targetRect?.left || 0) - (containerRect?.left || 0),
+        (targetRect?.top || 0) - (containerRect?.top || 0),
+        targetRect?.width || 0,
+        targetRect?.height || 0,
+      ]);
+
+      setTimeout(() => {
+        setPositionMotion(true);
+      }, 10);
+    } else {
+      const timeout = setTimeout(() => {
+        setPositionMotion(false);
+      }, 500);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [hoverSemantic]);
+
+  // ======================== Render ========================
+  return (
+    <div style={{ position: 'relative' }} ref={containerRef}>
+      <Row style={{ minHeight: height }}>
+        <Col
+          span={16}
+          style={{
+            borderRight: `1px solid ${token.colorBorderSecondary}`,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: token.paddingMD,
+            overflow: 'hidden',
+          }}
+        >
+          <ConfigProvider
+            theme={{
+              token: {
+                motion: false,
+              },
+            }}
+          >
+            {cloneNode}
+          </ConfigProvider>
+        </Col>
+        <Col span={8}>
+          <ul
+            style={{
+              rowGap: token.paddingXS,
+              listStyle: 'none',
+              margin: 0,
+              padding: 0,
+              flexDirection: 'column',
+              overflow: 'hidden',
+            }}
+          >
+            {semantics.map((semantic, index) => (
+              <li
+                key={semantic.name}
+                style={{
+                  paddingBlock: token.paddingXS,
+                  paddingInline: token.paddingSM,
+                  cursor: 'pointer',
+                  borderTop: index === 0 ? 'none' : `1px solid ${token.colorBorderSecondary}`,
+                  background:
+                    hoverSemantic === semantic.name ? token.controlItemBgHover : 'transparent',
+                  transition: `background ${token.motionDurationFast} ease`,
+                }}
+                onMouseEnter={() => {
+                  setHoverSemantic(semantic.name);
+                }}
+                onMouseLeave={() => {
+                  setHoverSemantic(null);
+                }}
+              >
+                <Flex vertical gap={token.paddingXS}>
+                  <Flex gap={token.paddingXS} align="center">
+                    <Typography.Title level={5} style={{ margin: 0 }}>
+                      {semantic.name}
+                    </Typography.Title>
+                    {semantic.version && <Tag color="blue">{semantic.version}</Tag>}
+                  </Flex>
+                  <Typography.Paragraph style={{ margin: 0, fontSize: token.fontSizeSM }}>
+                    {semantic.desc}
+                  </Typography.Paragraph>{' '}
+                </Flex>
+              </li>
+            ))}
+          </ul>
+        </Col>
+      </Row>
+
+      <div
+        style={{
+          position: 'absolute',
+          border: `${MARK_BORDER_SIZE}px solid ${token.colorWarning}`,
+          boxSizing: 'border-box',
+          zIndex: 999999,
+          left: markPos[0] - MARK_BORDER_SIZE,
+          top: markPos[1] - MARK_BORDER_SIZE,
+          width: markPos[2] + MARK_BORDER_SIZE * 2,
+          height: markPos[3] + MARK_BORDER_SIZE * 2,
+          boxShadow: '0 0 0 1px #FFF',
+          pointerEvents: 'none',
+          transition: [
+            `opacity ${token.motionDurationSlow} ease`,
+            positionMotion ? `all ${token.motionDurationSlow} ease` : null,
+          ]
+            .filter(Boolean)
+            .join(','),
+          opacity: hoverSemantic ? 1 : 0,
+        }}
+      />
+    </div>
+  );
+};
+
+export default SemanticPreview;

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -5,8 +5,9 @@ import stackblitzSdk from '@stackblitz/sdk';
 import { Alert, Badge, Flex, Tooltip } from 'antd';
 import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
-import { FormattedMessage, useSiteData, useLiveDemo } from 'dumi';
+import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
 import LZString from 'lz-string';
+
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
 import ClientOnly from '../../common/ClientOnly';
@@ -99,6 +100,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     background,
     filename,
     version,
+    simplify,
     clientOnly,
     pkgDependencyList,
   } = props;
@@ -177,6 +179,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const codeBoxClass = classNames('code-box', {
     expand: codeExpand,
     'code-box-debug': originDebug,
+    'code-box-simplify': simplify,
   });
 
   const localizedTitle = title;
@@ -378,6 +381,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
           </ErrorBoundary>
         )}
       </section>
+      {!simplify && (
         <section className="code-box-meta markdown">
           <div className="code-box-title">
             <Tooltip title={originDebug ? <FormattedMessage id="app.demo.debug" /> : ''}>
@@ -385,11 +389,18 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 {localizedTitle}
               </a>
             </Tooltip>
-          <EditButton title={<FormattedMessage id="app.content.edit-demo" />} filename={filename} />
+            <EditButton
+              title={<FormattedMessage id="app.content.edit-demo" />}
+              filename={filename}
+            />
           </div>
           {description && (
-          <div className="code-box-description" dangerouslySetInnerHTML={{ __html: description }} />
+            <div
+              className="code-box-description"
+              dangerouslySetInnerHTML={{ __html: description }}
+            />
           )}
+
           <Flex wrap="wrap" gap="middle" className="code-box-actions">
             {showOnlineUrl && (
               <Tooltip title={<FormattedMessage id="app.demo.online" />}>
@@ -511,6 +522,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
             </Tooltip>
           </Flex>
         </section>
+      )}
       {codeExpand && (
         <section className={highlightClass} key="code">
           <CodePreview

.dumi/theme/common/styles/Demo.tsx

@@ -29,6 +29,16 @@ const GlobalDemoStyles: React.FC = () => {
           border-radius: ${token.borderRadiusLG}px;
           transition: all 0.2s;
 
+          &.code-box-simplify {
+            border-radius: 0;
+            margin-bottom: 0;
+
+            .code-box-demo {
+              padding: 0;
+              border-bottom: 0;
+            }
+          }
+
           .code-box-title {
             &,
             a {

components/__tests__/node.test.tsx

@@ -1,6 +1,7 @@
-import { globSync } from 'glob';
 import * as React from 'react';
+import { globSync } from 'glob';
 import { renderToString } from 'react-dom/server';
+
 import type { Options } from '../../tests/shared/demoTest';
 
 (global as any).testConfig = {};
@@ -28,7 +29,9 @@ describe('node', () => {
 
     // Test for ssr
     describe(componentName, () => {
-      const demoList = globSync(`./components/${componentName}/demo/*.tsx`);
+      const demoList = globSync(`./components/${componentName}/demo/*.tsx`).filter(
+        (file) => !file.includes('_semantic'),
+      );
 
       // Use mock to get config
       require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require

components/badge/demo/_semantic.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Avatar, Badge } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根节点',
+    indicator: '指示器节点',
+  },
+  en: {
+    root: 'Root element',
+    indicator: 'Indicator element',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+
+  return (
+    <SemanticPreview
+      semantics={[
+        {
+          name: 'root',
+          desc: locale.root,
+          version: '5.7.0',
+        },
+        {
+          name: 'indicator',
+          desc: locale.indicator,
+          version: '5.7.0',
+        },
+      ]}
+    >
+      <Badge count={5}>
+        <Avatar shape="square" size="large" />
+      </Badge>
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/badge/index.en-US.md

@@ -44,14 +44,14 @@ Common props ref：[Common props](/docs/react/common-props)
 | --- | --- | --- | --- | --- |
 | color | Customize Badge dot color | string | - |  |
 | count | Number to show in badge | ReactNode | - |  |
-| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | 5.7.0 |
+| classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.7.0 |
 | dot | Whether to display a red dot instead of `count` | boolean | false |  |
 | offset | Set offset of the badge dot | \[number, number] | - |  |
 | overflowCount | Max count to show | number | 99 |  |
 | showZero | Whether to show badge when `count` is zero | boolean | false |  |
 | size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | - |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
-| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
+| styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.7.0 |
 | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - |  |
 | title | Text to show when hovering over the badge | string | - |  |
 
@@ -63,12 +63,9 @@ Common props ref：[Common props](/docs/react/common-props)
 | placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` |  |
 | text | Content inside the Ribbon | ReactNode | - |  |
 
-### `styles` and `classNames` attribute
+## Semantic DOM
 
-| Property  | Description         | Version |
+<code src="./demo/_semantic.tsx" simplify="true"></code>
-| --------- | ------------------- | ------- |
-| root      | set `root` element  | 5.7.0   |
-| indicator | set `badge` element | 5.7.0   |
 
 ## Design Token
 

components/badge/index.zh-CN.md

@@ -45,14 +45,14 @@ group: 数据展示
 | --- | --- | --- | --- | --- |
 | color | 自定义小圆点的颜色 | string | - |  |
 | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode | - |  |
-| classNames | 语义化结构 class | Record<SemanticDOM, string> | - | 5.7.0 |
+| classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.7.0 |
 | dot | 不展示数字，只有一个小红点 | boolean | false |  |
 | offset | 设置状态点的位置偏移 | \[number, number] | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | - |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
-| styles | 语义化结构 style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
+| styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.7.0 |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - |  |
 | title | 设置鼠标放在状态点上时显示的文字 | string | - |  |
 
@@ -64,12 +64,9 @@ group: 数据展示
 | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` |  |
 | text | 缎带中填入的内容 | ReactNode | - |  |
 
-### `styles` 和 `classNames` 属性
+## Semantic DOM
 
-| 名称      | 说明         | 版本  |
+<code src="./demo/_semantic.tsx" simplify="true"></code>
-| --------- | ------------ | ----- |
-| root      | 设置根元素   | 5.7.0 |
-| indicator | 设置徽标元素 | 5.7.0 |
 
 ## 主题变量（Design Token）
 

components/button/demo/_semantic.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { AntDesignOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    icon: '图标元素',
+  },
+  en: {
+    icon: 'Icon element',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+
+  return (
+    <SemanticPreview
+      semantics={[
+        {
+          name: 'icon',
+          desc: locale.icon,
+          version: '5.5.0',
+        },
+      ]}
+    >
+      <Button type="primary" icon={<AntDesignOutlined />}>
+        Ant Design
+      </Button>
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/button/index.en-US.md

@@ -59,7 +59,7 @@ Different button styles can be generated by setting Button properties. The recom
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | block | Option to fit button width to its parent width | boolean | false |  |
-| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | 5.4.0 |
+| classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
 | danger | Set the danger status of button | boolean | false |  |
 | disabled | Disabled state of button | boolean | false |  |
 | ghost | Make background transparent and invert text and border colors | boolean | false |  |
@@ -69,18 +69,16 @@ Different button styles can be generated by setting Button properties. The recom
 | loading | Set the loading status of button | boolean \| { delay: number } | false |  |
 | shape | Can be set button shape | `default` \| `circle` \| `round` | `default` |  |
 | size | Set the size of button | `large` \| `middle` \| `small` | `middle` |  |
-| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
+| styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
 | onClick | Set the handler to handle `click` event | (event: MouseEvent) => void | - |  |
 
 It accepts all props which native buttons support.
 
-### `styles` and `classNames` attribute
+## Semantic DOM
 
-| Property | Description       | Version |
+<code src="./demo/_semantic.tsx" simplify="true"></code>
-| -------- | ----------------- | ------- |
-| icon     | set `icon`element | 5.5.0   |
 
 ## Design Token
 

components/button/index.zh-CN.md

@@ -64,7 +64,7 @@ group:
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
-| classNames | 语义化结构 class | Record<SemanticDOM, string> | - | 5.4.0 |
+| classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
 | danger | 设置危险按钮 | boolean | false |  |
 | disabled | 设置按钮失效状态 | boolean | false |  |
 | ghost | 幽灵属性，使按钮背景透明 | boolean | false |  |
@@ -74,18 +74,16 @@ group:
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
 | shape | 设置按钮形状 | `default` \| `circle` \| `round` | `default` |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
-| styles | 语义化结构 style | Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
+| styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
 | onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - |  |
 
 支持原生 button 的其他所有属性。
 
-### `styles` 和 `classNames` 属性
+## Semantic DOM
 
-| 名称 | 说明         | 版本  |
+<code src="./demo/_semantic.tsx" simplify="true"></code>
-| ---- | ------------ | ----- |
-| icon | 设置图标元素 | 5.5.0 |
 
 ## 主题变量（Design Token）
 

components/drawer/demo/_semantic.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Drawer, Typography } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    mask: '遮罩层元素',
+    content: 'Drawer 容器元素',
+    header: '头部元素',
+    body: '内容元素',
+    footer: '底部元素',
+  },
+  en: {
+    mask: 'Mask element',
+    content: 'Drawer container element',
+    header: 'Header element',
+    body: 'Body element',
+    footer: 'Footer element',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+
+  return (
+    <SemanticPreview
+      semantics={[
+        {
+          name: 'mask',
+          desc: locale.mask,
+          version: '5.13.0',
+        },
+        {
+          name: 'content',
+          desc: locale.content,
+          version: '5.13.0',
+        },
+        {
+          name: 'header',
+          desc: locale.header,
+          version: '5.13.0',
+        },
+        {
+          name: 'body',
+          desc: locale.body,
+          version: '5.13.0',
+        },
+        {
+          name: 'footer',
+          desc: locale.footer,
+          version: '5.13.0',
+        },
+      ]}
+      height={300}
+    >
+      <Drawer
+        title="Title"
+        placement="right"
+        footer={<Typography.Link>Footer</Typography.Link>}
+        closable={false}
+        open
+        getContainer={false}
+      >
+        <p>Some contents...</p>
+      </Drawer>
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/drawer/index.en-US.md

@@ -51,8 +51,7 @@ v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `classNa
 | autoFocus | Whether Drawer should get focused after open | boolean | true | 4.17.0 |
 | afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - |  |
 | className | Config Drawer Panel className. Use `rootClassName` if want to config top dom style | string | - |  |
-| classNames | Config Drawer build-in module's className | `header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string;` | - |  |
+| classNames | Semantic structure className | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.10.0 |
-| styles | Config Drawer build-in module's style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
 | closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | &lt;CloseOutlined /> |  |
 | destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
 | extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
@@ -68,6 +67,7 @@ v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `classNa
 | push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
 | rootStyle | Style of wrapper element which **contains mask** compare to `style` | CSSProperties | - |  |
 | style | Style of Drawer panel. Use `bodyStyle` if want to config body only | CSSProperties | - |  |
+| styles | Semantic structure style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | size | preset size of drawer, default `378px` and large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | title | The title for Drawer | ReactNode | - |  |
 | open | Whether the Drawer dialog is visible or not | boolean | false |  |
@@ -75,6 +75,10 @@ v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `classNa
 | zIndex | The `z-index` of the Drawer | number | 1000 |  |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |  |
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Drawer"></ComponentTokenTable>

components/drawer/index.tsx

@@ -157,6 +157,9 @@ const Drawer: React.FC<DrawerProps> & {
   const [zIndex, contextZIndex] = useZIndex('Drawer', rest.zIndex);
 
   // =========================== Render ===========================
+  const { classNames: propClassNames = {}, styles: propStyles = {} } = rest;
+  const { classNames: contextClassNames = {}, styles: contextStyles = {} } = drawer || {};
+
   return wrapCSSVar(
     <NoCompactStyle>
       <NoFormStyle status override>
@@ -168,24 +171,24 @@ const Drawer: React.FC<DrawerProps> & {
             motion={panelMotion}
             {...rest}
             classNames={{
-              mask: classNames(rest.classNames?.mask, drawer?.classNames?.mask),
+              mask: classNames(propClassNames.mask, contextClassNames.mask),
-              content: classNames(rest.classNames?.content, drawer?.classNames?.content),
+              content: classNames(propClassNames.content, contextClassNames.content),
             }}
             styles={{
               mask: {
-                ...rest.styles?.mask,
+                ...propStyles.mask,
                 ...maskStyle,
-                ...drawer?.styles?.mask,
+                ...contextStyles.mask,
               },
               content: {
-                ...rest.styles?.content,
+                ...propStyles.content,
                 ...drawerStyle,
-                ...drawer?.styles?.content,
+                ...contextStyles.content,
               },
               wrapper: {
-                ...rest.styles?.wrapper,
+                ...propStyles.wrapper,
                 ...contentWrapperStyle,
-                ...drawer?.styles?.wrapper,
+                ...contextStyles.wrapper,
               },
             }}
             open={open ?? visible}

components/drawer/index.zh-CN.md

@@ -50,8 +50,7 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
 | autoFocus | 抽屉展开后是否将焦点切换至其 Dom 节点 | boolean | true | 4.17.0 |
 | afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - |  |
 | className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - |  |
-| classNames | 配置抽屉内置模块的 className | `header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string;` | - |  |
+| classNames | 语义化结构 className | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.10.0 |
-| styles | 配置抽屉内置模块的 style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
 | closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | &lt;CloseOutlined /> |  |
 | destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
 | extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
@@ -67,12 +66,17 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
 | rootStyle | 可用于设置 Drawer 最外层容器的样式，和 `style` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
 | size | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 `bodyStyle` | CSSProperties | - |  |
+| styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | title | 标题 | ReactNode | - |  |
 | open | Drawer 是否可见 | boolean | - |
 | width | 宽度 | string \| number | 378 |  |
 | zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
 | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Drawer"></ComponentTokenTable>

components/input/demo/_semantic_input.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { EditOutlined, UserOutlined } from '@ant-design/icons';
+import { Input } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    input: '输入框元素',
+    prefix: '前缀的包裹元素',
+    suffix: '后缀的包裹元素',
+    count: '文字计数元素',
+  },
+  en: {
+    input: 'input element',
+    prefix: 'prefix element',
+    suffix: 'suffix element',
+    count: 'count element',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+
+  return (
+    <SemanticPreview
+      semantics={[
+        {
+          name: 'input',
+          desc: locale.input,
+          version: '5.4.0',
+        },
+        {
+          name: 'prefix',
+          desc: locale.prefix,
+          version: '5.4.0',
+        },
+        {
+          name: 'suffix',
+          desc: locale.suffix,
+          version: '5.4.0',
+        },
+        {
+          name: 'count',
+          desc: locale.count,
+          version: '5.4.0',
+        },
+      ]}
+    >
+      <Input
+        prefix={<UserOutlined />}
+        suffix={<EditOutlined />}
+        showCount
+        defaultValue="Hello, Ant Design"
+      />
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/input/demo/_semantic_textarea.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Input } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    textarea: '输入框元素',
+    count: '文字计数元素',
+  },
+  en: {
+    textarea: 'textarea element',
+    count: 'count element',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+
+  return (
+    <SemanticPreview
+      semantics={[
+        {
+          name: 'textarea',
+          desc: locale.textarea,
+          version: '5.4.0',
+        },
+        {
+          name: 'count',
+          desc: locale.count,
+          version: '5.4.0',
+        },
+      ]}
+    >
+      <Input.TextArea
+        defaultValue="Hello, Ant Design"
+        rows={3}
+        count={{
+          max: 100,
+          show: true,
+        }}
+      />
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/input/index.en-US.md

@@ -138,21 +138,11 @@ Supports all props of `Input`.
 
 #### Input
 
-<!-- prettier-ignore -->
+<code src="./demo/_semantic_input.tsx" simplify="true"></code>
-| Property | Description | Version |
-| --- | --- | --- |
-| input | `input` element | 5.4.0 |
-| prefix | Wrapper of prefix | 5.4.0 |
-| suffix | Wrapper of suffix | 5.4.0 |
-| count | Text count element | 5.4.0 |
 
 #### Input.TextArea
 
-<!-- prettier-ignore -->
+<code src="./demo/_semantic_textarea.tsx" simplify="true"></code>
-| Property | Description | Version |
-| --- | --- | --- |
-| textarea | `textarea` element | 5.4.0 |
-| count | Text count element | 5.4.0 |
 
 ## Design Token
 

components/input/index.zh-CN.md

@@ -139,19 +139,11 @@ interface CountConfig {
 
 #### Input
 
-| 名称   | 说明               | 版本  |
+<code src="./demo/_semantic_input.tsx" simplify="true"></code>
-| ------ | ------------------ | ----- |
-| input  | `input` 元素       | 5.4.0 |
-| prefix | 所有前缀的包裹元素 | 5.4.0 |
-| suffix | 所有后缀的包裹元素 | 5.4.0 |
-| count  | 文字计数元素       | 5.4.0 |
 
 #### Input.TextArea
 
-| 名称     | 说明            | 版本  |
+<code src="./demo/_semantic_textarea.tsx" simplify="true"></code>
-| -------- | --------------- | ----- |
-| textarea | `textarea` 元素 | 5.4.0 |
-| count    | 文字计数元素    | 5.4.0 |
 
 ## 主题变量（Design Token）
 

components/modal/demo/_semantic.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Modal, type ModalProps } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    mask: '遮罩层元素',
+    wrapper: '包裹层元素，一般用于动画容器',
+    content: 'Drawer 容器元素',
+    header: '头部元素',
+    body: '内容元素',
+    footer: '底部元素',
+  },
+  en: {
+    mask: 'Mask element',
+    wrapper: 'Wrapper element. Used for motion container',
+    content: 'Drawer container element',
+    header: 'Header element',
+    body: 'Body element',
+    footer: 'Footer element',
+  },
+};
+
+const BlockModal = (props: ModalProps) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={divRef} style={{ position: 'absolute', inset: 0 }}>
+      <Modal
+        getContainer={() => divRef.current!}
+        {...props}
+        styles={
+          {
+            mask: {
+              position: 'absolute',
+            },
+            wrapper: {
+              position: 'absolute',
+            },
+          } as any
+        }
+        style={{
+          top: '50%',
+          transform: 'translateY(-50%)',
+          marginBottom: 0,
+          paddingBottom: 0,
+        }}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+
+  return (
+    <SemanticPreview
+      semantics={[
+        {
+          name: 'mask',
+          desc: locale.mask,
+          version: '5.13.0',
+        },
+        {
+          name: 'header',
+          desc: locale.header,
+          version: '5.13.0',
+        },
+        {
+          name: 'body',
+          desc: locale.body,
+          version: '5.13.0',
+        },
+        {
+          name: 'footer',
+          desc: locale.footer,
+          version: '5.13.0',
+        },
+      ]}
+    >
+      <BlockModal title="Title" closable={false} open getContainer={false} width={400}>
+        <p>Some contents...</p>
+      </BlockModal>
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/modal/index.en-US.md

@@ -190,6 +190,10 @@ const confirmed = await modal.confirm({ ... });
 | originNode | default node | React.ReactNode                   | -      |
 | extra      | extended options | { OkBtn: FC; CancelBtn: FC } | -      |
 
+### `styles` and `classNames` attribute
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Modal"></ComponentTokenTable>

components/modal/index.zh-CN.md

@@ -191,6 +191,10 @@ const confirmed = await modal.confirm({ ... });
 | originNode | 默认节点 | React.ReactNode                   | -      |
 | extra      | 扩展选项 | { OkBtn: FC; CancelBtn: FC } | -      |
 
+### `styles` and `classNames` 属性
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Modal"></ComponentTokenTable>

components/slider/demo/_semantic.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Slider } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    track: '范围选择下，点和点之间单个选取条',
+    tracks: '范围选择下，整个范围选取条',
+    rail: '背景条元素',
+    handle: '抓取点元素',
+  },
+  en: {
+    track: 'The selection bar between points and points under the range selection',
+    tracks: 'The entire range selection bar under the range selection',
+    rail: 'Background rail element',
+    handle: 'Grab handle element',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+
+  return (
+    <SemanticPreview
+      semantics={[
+        {
+          name: 'track',
+          desc: locale.track,
+          version: '5.10.0',
+        },
+        {
+          name: 'tracks',
+          desc: locale.tracks,
+          version: '5.10.0',
+        },
+        {
+          name: 'rail',
+          desc: locale.rail,
+          version: '5.10.0',
+        },
+        {
+          name: 'handle',
+          desc: locale.handle,
+          version: '5.10.0',
+        },
+      ]}
+    >
+      <Slider range defaultValue={[20, 30, 50]} style={{ width: '100%' }} />
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/slider/index.en-US.md

@@ -38,6 +38,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | --- | --- | --- | --- | --- |
 | autoAdjustOverflow | Whether to automatically adjust the popup position | boolean | true | 5.8.0 |
 | autoFocus | Whether get focus when component mounted | boolean | false |  |
+| classNames | Semantic structure className | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.10.0 |
 | defaultValue | The default value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | 0 \| \[0, 0] |  |
 | disabled | If true, the slider will not be intractable | boolean | false |  |
 | keyboard | Support using keyboard to move handlers | boolean | true | 5.2.0+ |
@@ -49,21 +50,13 @@ Common props ref：[Common props](/docs/react/common-props)
 | range | Dual thumb mode | boolean | false |  |
 | reverse | Reverse the component | boolean | false |  |
 | step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be null | number \| null | 1 |  |
+| styles | Semantic structure style | [Record<SemanticDOM, React.CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | tooltip | The tooltip relate props | [tooltip](#tooltip) | - | 4.23.0 |
 | value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - |  |
 | vertical | If true, the slider will be vertical | boolean | false |  |
 | onChangeComplete | Fire when `mouseup` or `keyup` is fired | (value) => void | - |  |
 | onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - |  |
 
-### `styles` 和 `classNames` 属性
-
-| Property | Description                                 | Version |
-| -------- | ------------------------------------------- | ------- |
-| track    | The track between handle to handle in range | 5.10.0  |
-| tracks   | Who track in range                          | 5.10.0  |
-| rail     | Background rail                             | 5.10.0  |
-| handle   | The handle pointer                          | 5.10.0  |
-
 ### range
 
 | Property       | Description                     | Type    | Default | Version |
@@ -86,6 +79,10 @@ Common props ref：[Common props](/docs/react/common-props)
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Slider"></ComponentTokenTable>

components/slider/index.zh-CN.md

@@ -38,7 +38,7 @@ demo:
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoFocus | 自动获取焦点 | boolean | false |  |
-| classNames | 语义化结构 className | Record<SemanticDOM, string> | - | 5.10.0 |
+| classNames | 语义化结构 className | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.10.0 |
 | defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | 0 \| \[0, 0] |  |
 | disabled | 值为 true 时，滑块为禁用状态 | boolean | false |  |
 | keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
@@ -50,22 +50,13 @@ demo:
 | range | 双滑块模式 | boolean \| [range](#range) | false |  |
 | reverse | 反向坐标轴 | boolean | false |  |
 | step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number \| null | 1 |  |
-| styles | 语义化结构 className | Record<SemanticDOM, React.CSSProperties> | - | 5.10.0 |
+| styles | 语义化结构 styles | [Record<SemanticDOM, React.CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | tooltip | 设置 Tooltip 相关属性 | [tooltip](#tooltip) | - | 4.23.0 |
 | value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | - |  |
 | vertical | 值为 true 时，Slider 为垂直方向 | boolean | false |  |
 | onChangeComplete | 与 `mouseup` 和 `keyup` 触发时机一致，把当前值作为参数传入 | (value) => void | - |  |
 | onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - |  |
 
-### `styles` 和 `classNames` 属性
-
-| 名称   | 说明                             | 版本   |
-| ------ | -------------------------------- | ------ |
-| track  | 范围选择下，点和点之间单个选取条 | 5.10.0 |
-| tracks | 范围选择下，整个范围选取条       | 5.10.0 |
-| rail   | 背景条                           | 5.10.0 |
-| handle | 抓取点                           | 5.10.0 |
-
 ### range
 
 | 参数           | 说明                 | 类型    | 默认值 | 版本   |
@@ -89,6 +80,10 @@ demo:
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Slider"></ComponentTokenTable>

components/space/demo/_semantic.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    item: '包裹的子组件',
+  },
+  en: {
+    item: 'Wrapped item element',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+
+  return (
+    <SemanticPreview
+      semantics={[
+        {
+          name: 'item',
+          desc: locale.item,
+          version: '5.6.0',
+        },
+      ]}
+    >
+      <Space>
+        <Button type="primary">Primary</Button>
+        <Button>Default</Button>
+        <Button type="dashed">Dashed</Button>
+      </Space>
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/space/index.en-US.md

@@ -42,9 +42,11 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
+| classNames | Semantic className | [Record<SemanticDOM, string>](#semantic-dom) | - |  |
 | direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | size | The space size | [Size](#size) \| [Size\[\]](#size) | `small` | 4.1.0 \| Array: 4.9.0 |
 | split | Set split | ReactNode | - | 4.7.0 |
+| styles | Semantic style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - |  |
 | wrap | Auto wrap line, when `horizontal` effective | boolean | false | 4.9.0 |
 
 ### Size
@@ -71,12 +73,9 @@ Use Space.Compact when child form components are compactly connected and the bor
 | direction | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | 4.24.0 |
 | size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
 
-### `styles` and `classNames` attribute
+## Semantic DOM
 
-<!-- prettier-ignore -->
+<code src="./demo/_semantic.tsx" simplify="true"></code>
-| Property | Description | Version |
-| -------- | ------------------------- | ------- |
-| item     | set `Space` child element | 5.6.0   |
 
 ## Design Token
 

components/space/index.zh-CN.md

@@ -48,9 +48,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
+| classNames | 语义化 className | [Record<SemanticDOM, string>](#semantic-dom) | - |  |
 | direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | size | 间距大小 | [Size](#size) \| [Size\[\]](#size) | `small` | 4.1.0 \| Array: 4.9.0 |
 | split | 设置拆分 | ReactNode | - | 4.7.0 |
+| styles | 语义化 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - |  |
 | wrap | 是否自动换行，仅在 `horizontal` 时有效 | boolean | false | 4.9.0 |
 
 ### Size
@@ -79,12 +81,9 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 | direction | 指定排列方向 | `vertical` \| `horizontal` | `horizontal` | 4.24.0 |
 | size | 子组件大小 | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
 
-### `styles` 和 `classNames` 属性
+## Semantic DOM
 
-<!-- prettier-ignore -->
+<code src="./demo/_semantic.tsx" simplify="true"></code>
-| 名称 | 说明  | 版本  |
-| ---- | --------------------- | ----- |
-| item | 设置 `Space` 包裹的子组件 | 5.6.0 |
 
 ## 主题变量（Design Token）
 

package.json

@@ -50,7 +50,6 @@
     "build": "npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist",
     "changelog": "git fetch origin && tsx scripts/print-changelog.ts",
     "check-commit": "tsx scripts/check-commit.ts",
-    "check-ts-demo": "tsx scripts/check-ts-demo.ts",
     "clean": "antd-tools run clean && rm -rf es lib coverage dist report.html",
     "clean-lockfiles": "rm -rf package-lock.json yarn.lock",
     "collect-token-statistic": "tsx scripts/collect-token-statistic.ts",

scripts/__snapshots__/check-site.ts.snap

@@ -24,17 +24,17 @@ exports[`site test Component components/avatar en Page 1`] = `2`;
 
 exports[`site test Component components/avatar zh Page 1`] = `2`;
 
-exports[`site test Component components/badge en Page 1`] = `3`;
+exports[`site test Component components/badge en Page 1`] = `2`;
 
-exports[`site test Component components/badge zh Page 1`] = `3`;
+exports[`site test Component components/badge zh Page 1`] = `2`;
 
 exports[`site test Component components/breadcrumb en Page 1`] = `3`;
 
 exports[`site test Component components/breadcrumb zh Page 1`] = `3`;
 
-exports[`site test Component components/button en Page 1`] = `2`;
+exports[`site test Component components/button en Page 1`] = `1`;
 
-exports[`site test Component components/button zh Page 1`] = `2`;
+exports[`site test Component components/button zh Page 1`] = `1`;
 
 exports[`site test Component components/calendar en Page 1`] = `1`;
 
@@ -116,9 +116,9 @@ exports[`site test Component components/image en Page 1`] = `4`;
 
 exports[`site test Component components/image zh Page 1`] = `4`;
 
-exports[`site test Component components/input en Page 1`] = `8`;
+exports[`site test Component components/input en Page 1`] = `6`;
 
-exports[`site test Component components/input zh Page 1`] = `8`;
+exports[`site test Component components/input zh Page 1`] = `6`;
 
 exports[`site test Component components/input-number en Page 1`] = `2`;
 
@@ -196,13 +196,13 @@ exports[`site test Component components/skeleton en Page 1`] = `6`;
 
 exports[`site test Component components/skeleton zh Page 1`] = `6`;
 
-exports[`site test Component components/slider en Page 1`] = `5`;
+exports[`site test Component components/slider en Page 1`] = `4`;
 
-exports[`site test Component components/slider zh Page 1`] = `5`;
+exports[`site test Component components/slider zh Page 1`] = `4`;
 
-exports[`site test Component components/space en Page 1`] = `3`;
+exports[`site test Component components/space en Page 1`] = `2`;
 
-exports[`site test Component components/space zh Page 1`] = `3`;
+exports[`site test Component components/space zh Page 1`] = `2`;
 
 exports[`site test Component components/spin en Page 1`] = `1`;
 

scripts/check-ts-demo.ts

@@ -1,86 +0,0 @@
-/* eslint-disable no-await-in-loop, no-console */
-import { spawn } from 'child_process';
-import path from 'path';
-import chalk from 'chalk';
-import fs from 'fs-extra';
-import { globSync } from 'glob';
-
-(async () => {
-  console.time('Execution...');
-
-  const demoFiles = globSync(path.join(process.cwd(), 'components/**/demo/*.md'));
-
-  const tmpFolder = path.resolve('components', '~tmp');
-  await fs.remove(tmpFolder);
-  await fs.ensureDir(tmpFolder);
-
-  function getTypescriptDemo(content: string, demoPath: string) {
-    const lines = content.split(/[\n\r]/);
-
-    const tsxStartLine = lines.findIndex((line) =>
-      line.replace(/\s/g, '').toLowerCase().includes('```tsx'),
-    );
-
-    if (tsxStartLine < 0) {
-      return null;
-    }
-
-    const tsxEndLine = lines.findIndex(
-      (line, index) => index > tsxStartLine && line.trim() === '```',
-    );
-
-    let script = lines.slice(tsxStartLine + 1, tsxEndLine).join('\n');
-
-    // insert React
-    if (!script.includes('import React') && !script.includes('import * as React')) {
-      script = `import React from 'react';\n${script}`;
-    }
-
-    // Replace mountNode
-    script = script.replace('mountNode', `document.getElementById('#root')`);
-
-    // Replace antd
-    script = script.replace(`from 'antd'`, `from '..'`);
-
-    // Add path
-    script = `/* eslint-disabled */\n// ${demoPath}\n${script}`;
-
-    return script;
-  }
-
-  for (let i = 0; i < demoFiles.length; i += 1) {
-    const demoPath = demoFiles[i];
-
-    const content = await fs.readFile(demoPath, 'utf8');
-    const script = getTypescriptDemo(content, demoPath);
-
-    const dirs = path.dirname(demoPath).split(path.sep);
-
-    // Parse TSX
-    if (script) {
-      const tmpFile = path.join(
-        tmpFolder,
-        `${dirs[dirs.length - 2]}-${path.basename(demoPath).replace(/\..*/, '')}.tsx`,
-      );
-      await fs.writeFile(tmpFile, script, 'utf8');
-    }
-  }
-
-  const child = spawn('npm', ['run', 'tsc']);
-
-  child.stdout.pipe(process.stdout);
-  child.stderr.pipe(process.stderr);
-
-  child.on('exit', async (code: number) => {
-    console.timeEnd('Execution...');
-
-    if (code) {
-      console.log(chalk.red('💥 OPS! Seems some tsx demo not pass tsc...'));
-    } else {
-      await fs.remove(tmpFolder);
-      console.log(chalk.green('🤪 All tsx demo passed. Congratulations!'));
-    }
-
-    process.exit(code);
-  });
-})();

tests/shared/demoTest.tsx

@@ -2,6 +2,7 @@
 import path from 'path';
 import * as React from 'react';
 import { createCache, StyleProvider } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
 import { globSync } from 'glob';
 import kebabCase from 'lodash/kebabCase';
 import { renderToString } from 'react-dom/server';
@@ -11,7 +12,6 @@ import { render } from '../utils';
 import { TriggerMockContext } from './demoTestContext';
 import { excludeWarning, isSafeWarning } from './excludeWarning';
 import rootPropsTest from './rootPropsTest';
-import { ConfigProvider } from 'antd';
 
 export { rootPropsTest };
 
@@ -28,7 +28,9 @@ export type Options = {
 };
 
 function baseText(doInject: boolean, component: string, options: Options = {}) {
-  const files = globSync(`./components/${component}/demo/*.tsx`);
+  const files = globSync(`./components/${component}/demo/*.tsx`).filter(
+    (file) => !file.includes('_semantic'),
+  );
   files.forEach((file) => {
     // to compatible windows path
     file = file.split(path.sep).join('/');

tests/shared/imageTest.tsx

@@ -251,7 +251,9 @@ type Options = {
 // eslint-disable-next-line jest/no-export
 export function imageDemoTest(component: string, options: Options = {}) {
   let describeMethod = options.skip === true ? describe.skip : describe;
-  const files = globSync(`./components/${component}/demo/*.tsx`);
+  const files = globSync(`./components/${component}/demo/*.tsx`).filter(
+    (file) => !file.includes('_semantic'),
+  );
 
   files.forEach((file) => {
     if (Array.isArray(options.skip) && options.skip.some((c) => file.endsWith(c))) {

tsconfig-old-react.json

@@ -8,5 +8,6 @@
       "antd/locale/*": ["locale/*"]
     }
   },
-  "include": ["components/*/demo/*.tsx"]
+  "include": ["components/*/demo/*.tsx"],
+  "exclude": ["components/*/demo/_semantic*"]
 }