site: add componentName for SemanticPreview (#53362)

* site: add componentName for SemanticPreview

* site: add componentName for SemanticPreview

* chore: fix

components/alert/demo/_semantic.tsx

@@ -27,6 +27,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Alert"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },

components/anchor/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Anchor } from 'antd';
+import type { AnchorProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -19,7 +20,7 @@ const locales = {
   },
 };
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<AnchorProps>> = (props) => {
   return (
     <Anchor
       {...props}
@@ -61,6 +62,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Anchor"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },

components/auto-complete/demo/_semantic.tsx

@@ -51,6 +51,7 @@ const App: React.FC = () => {
 
   return (
     <SemanticPreview
+      componentName="AutoComplete"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'input', desc: locale.input, version: '6.0.0' },

components/badge/demo/_semantic_ribbon.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Badge, Card } from 'antd';
+import type { RibbonProps } from 'antd/es/badge/Ribbon';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -17,7 +18,7 @@ const locales = {
   },
 };
 
-const BlockList = (props: any) => {
+const BlockList: React.FC<Readonly<RibbonProps>> = (props) => {
   return (
     <div style={{ width: '100%' }}>
       <Badge.Ribbon {...props} text="Hippies" color="pink">
@@ -33,6 +34,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Badge"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'indicator', desc: locale.indicator, version: '6.0.0' },

components/breadcrumb/demo/_semantic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
 import { Breadcrumb } from 'antd';
+import type { BreadcrumbProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -18,7 +19,7 @@ const locales = {
   },
 };
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<BreadcrumbProps>> = (props) => {
   return (
     <Breadcrumb
       {...props}
@@ -48,6 +49,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Breadcrumb"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },

components/calendar/demo/_semantic.tsx

@@ -25,6 +25,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Calendar"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'header', desc: locale.header, version: '6.0.0' },

components/card/demo/_semantic_meta.tsx

@@ -25,7 +25,6 @@ const locales = {
 
 const BlockCard: React.FC<React.PropsWithChildren> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute' }}>
       <Card style={{ width: 300 }}>
@@ -44,6 +43,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Card.Meta"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'section', desc: locale.section, version: '6.0.0' },

components/cascader/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Cascader } from 'antd';
+import type { CascaderProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -31,12 +32,9 @@ const options = [
   },
 ];
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<CascaderProps<any, any, any>>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
   const [value, setValue] = React.useState<string[]>(['contributors', 'aojunhao123']);
-  const onChange = (newValue: string[]) => {
-    setValue(newValue);
-  };
   return (
     <div ref={divRef} style={{ marginBottom: 60 }}>
       <Cascader
@@ -48,20 +46,21 @@ const Block = (props: any) => {
             height: 70,
           },
         }}
-        getPopupContainer={() => divRef.current}
+        getPopupContainer={() => divRef.current!}
         value={value}
-        onChange={onChange}
+        onChange={setValue}
         options={options}
         placement="bottomLeft"
       />
     </div>
   );
 };
+
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="Cascader"
       semantics={[
         { name: 'root', desc: locale.root, version: '5.25.0' },
         { name: 'popup', desc: locale.popup, version: '5.25.0' },

components/checkbox/demo/_semantic.tsx

@@ -21,6 +21,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Checkbox"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },

components/color-picker/__tests__/index.test.tsx

@@ -698,7 +698,7 @@ describe('ColorPicker', () => {
   });
 
   it('Controlled string value should work with allowClear correctly', async () => {
-    const Demo = (props: any) => {
+    const Demo: React.FC<Readonly<ColorPickerProps>> = (props) => {
       const [color, setColor] = useState<ColorValueType>(generateColor('#FF0000'));
 
       useEffect(() => {
@@ -737,7 +737,7 @@ describe('ColorPicker', () => {
   });
 
   it('Controlled value should work with allowClear correctly', async () => {
-    const Demo = (props: any) => {
+    const Demo: React.FC<Readonly<ColorPickerProps>> = (props) => {
       const [color, setColor] = useState<ColorValueType>(generateColor('red'));
 
       useEffect(() => {

components/color-picker/demo/_semantic.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ColorPickerProps } from 'antd';
 import { ColorPicker } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
@@ -15,7 +16,7 @@ const locales = {
   },
 };
 
-const Block: React.FC = (props: any) => {
+const Block: React.FC<Readonly<ColorPickerProps>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
   return (
     <div ref={divRef} style={{ height: 300 }}>
@@ -34,6 +35,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="ColorPicker"
       semantics={[
         { name: 'root', desc: locale.root },
         { name: 'popup', desc: locale.popup },

components/descriptions/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, Descriptions, DescriptionsProps, Divider, Switch } from 'antd';
+import { Button, Descriptions, Divider, Switch } from 'antd';
+import type { DescriptionsProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -31,25 +32,24 @@ const items: DescriptionsProps['items'] = [
   },
 ];
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<DescriptionsProps>> = (props) => {
+  const { children, ...rest } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
   const [bordered, setBordered] = React.useState(false);
-
-  const handleBorderChange = (checked: boolean) => {
-    setBordered(checked);
-  };
-
   return (
     <div ref={divRef} style={{ width: '100%', height: '100%' }}>
-      <Switch checked={bordered} onChange={handleBorderChange} /> Toggle Border
+      <Switch checked={bordered} onChange={setBordered} />
+      Toggle Border
       <Divider />
       <Descriptions
         title="User Info"
         items={items}
         extra={<Button type="primary">Edit</Button>}
         bordered={bordered}
-        {...props}
-      />
+        {...rest}
+      >
+        {children}
+      </Descriptions>
     </div>
   );
 };

components/form/__tests__/index.test.tsx

@@ -19,6 +19,7 @@ import ConfigProvider from '../../config-provider';
 import DatePicker from '../../date-picker';
 import Drawer from '../../drawer';
 import Input from '../../input';
+import type { InputProps } from '../../input';
 import InputNumber from '../../input-number';
 import zhCN from '../../locale/zh_CN';
 import Modal from '../../modal';
@@ -565,7 +566,9 @@ describe('Form', () => {
         return <input {...props} ref={internalRef} />;
       });
 
-      const NormalInput = (props: any) => <input {...props} />;
+      const NormalInput: React.FC<Readonly<React.DOMAttributes<HTMLInputElement>>> = (props) => (
+        <input {...props} />
+      );
 
       const { getByRole, getAllByRole } = render(
         <Form scrollToFirstError>
@@ -2249,7 +2252,7 @@ describe('Form', () => {
   it('validate status should be change in order', async () => {
     const onChange = jest.fn();
 
-    const CustomInput = (props: any) => {
+    const CustomInput: React.FC<Readonly<InputProps>> = (props) => {
       const { status } = Form.Item.useStatus();
       useEffect(() => {
         onChange(status);

components/form/demo/_semantic.tsx

@@ -21,6 +21,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Form"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'label', desc: locale.label, version: '6.0.0' },
@@ -42,7 +43,6 @@ const App: React.FC = () => {
         >
           <Input />
         </Form.Item>
-
         <Form.Item
           label="Password"
           name="password"

components/image/demo/_semantic.tsx

@@ -108,6 +108,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Image"
       padding={false}
       semantics={[
         { name: 'root', desc: locale.root },

components/masonry/demo/_semantic.tsx

@@ -24,6 +24,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Masonry"
       semantics={[
         { name: 'root', desc: locale.root },
         { name: 'item', desc: locale.item },

components/mentions/demo/_semantic.tsx

@@ -59,6 +59,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Mentions"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'textarea', desc: locale.textarea, version: '6.0.0' },

components/message/demo/_semantic.tsx

@@ -23,6 +23,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Message"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },

components/notification/demo/_semantic.tsx

@@ -27,6 +27,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Notification"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },

components/pagination/demo/_semantic.tsx

@@ -19,6 +19,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Pagination"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },

components/popconfirm/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Popconfirm } from 'antd';
+import type { PopconfirmProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,19 +16,20 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<PopconfirmProps>> = (props) => {
+  const { children, ...rest } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
       <Popconfirm
-        title="prompt text"
         open
         placement="top"
         autoAdjustOverflow={false}
-        getPopupContainer={() => divRef.current}
-        {...props}
-      />
+        getPopupContainer={() => divRef.current!}
+        {...rest}
+      >
+        {children}
+      </Popconfirm>
     </div>
   );
 };
@@ -42,7 +44,7 @@ const App: React.FC = () => {
         { name: 'body', desc: locale.body, version: '5.23.0' },
       ]}
     >
-      <BlockList />
+      <BlockList title="popconfirm prompt text" />
     </SemanticPreview>
   );
 };

components/popover/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Popover } from 'antd';
+import type { PopoverProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,19 +16,21 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<PopoverProps>> = (props) => {
+  const { children, ...rest } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
       <Popover
-        title="prompt text"
         open
         placement="top"
+        title="popover prompt text"
         autoAdjustOverflow={false}
-        getPopupContainer={() => divRef.current}
-        {...props}
-      />
+        getPopupContainer={() => divRef.current!}
+        {...rest}
+      >
+        {children}
+      </Popover>
     </div>
   );
 };

components/radio/demo/_semantic.tsx

@@ -21,6 +21,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Radio"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },

components/result/demo/_semantic.tsx

@@ -27,6 +27,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Result"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },

components/segmented/demo/_semantic.tsx

@@ -24,6 +24,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Segmented"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },

components/select/demo/_semantic.tsx

@@ -52,6 +52,7 @@ const App: React.FC = () => {
 
   return (
     <SemanticPreview
+      componentName="Select"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'prefix', desc: locale.prefix, version: '6.0.0' },

components/skeleton/demo/_semantic.tsx

@@ -28,6 +28,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Skeleton"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'header', desc: locale.header, version: '6.0.0' },

components/skeleton/demo/_semantic_element.tsx

@@ -75,6 +75,7 @@ const App: React.FC = () => {
 
   return (
     <SemanticPreview
+      componentName="Skeleton.Element"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'content', desc: locale.content, version: '6.0.0' },

components/spin/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Spin } from 'antd';
+import type { SpinProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,7 +16,7 @@ const locales = {
   },
 };
 
-const SpinBlock = (props: any) => {
+const SpinBlock: React.FC<Readonly<SpinProps>> = (props) => {
   return (
     <div
       style={{
@@ -37,6 +38,7 @@ const App: React.FC = () => {
 
   return (
     <SemanticPreview
+      componentName="Spin"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'indicator', desc: locale.indicator, version: '6.0.0' },

components/spin/demo/_semantic_fullscreen.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Spin } from 'antd';
+import type { SpinProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,16 +16,14 @@ const locales = {
   },
 };
 
-const SpinBlock = (props: any) => {
+const SpinBlock: React.FC<Readonly<SpinProps>> = (props) => {
   return (
     <div style={{ position: 'absolute', inset: 0 }}>
       <div style={{ position: 'relative', width: '100%', height: 150 }}>
         <Spin
           percent={0}
           fullscreen
-          styles={{
-            mask: { position: 'absolute', height: '100%', width: '100%' },
-          }}
+          styles={{ mask: { position: 'absolute', height: '100%', width: '100%' } }}
           {...props}
         />
       </div>
@@ -34,9 +33,9 @@ const SpinBlock = (props: any) => {
 
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="Spin"
       semantics={[
         { name: 'mask', desc: locale.mask, version: '6.0.0' },
         { name: 'indicator', desc: locale.indicator, version: '6.0.0' },

components/splitter/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Splitter } from 'antd';
+import type { SplitterProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -18,7 +19,7 @@ const locales = {
   },
 };
 
-const Block: React.FC = (props: any) => {
+const Block: React.FC<Readonly<SplitterProps>> = (props) => {
   return (
     <Splitter
       {...props}
@@ -28,7 +29,6 @@ const Block: React.FC = (props: any) => {
       <Splitter.Panel>
         <Desc text="First" />
       </Splitter.Panel>
-
       <Splitter.Panel>
         <Desc text="Second" />
       </Splitter.Panel>
@@ -38,9 +38,9 @@ const Block: React.FC = (props: any) => {
 
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="Splitter"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'panel', desc: locale.panel, version: '6.0.0' },

components/statistic/demo/_semantic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ArrowUpOutlined } from '@ant-design/icons';
 import { Statistic } from 'antd';
+import type { StatisticProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -24,9 +25,8 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<StatisticProps>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute' }}>
       <Statistic
@@ -46,6 +46,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Statistic"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'header', desc: locale.header, version: '6.0.0' },

components/switch/demo/_semantic.tsx

@@ -19,6 +19,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Switch"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'content', desc: locale.content, version: '6.0.0' },

components/tabs/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tabs } from 'antd';
+import type { TabsProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -22,7 +23,8 @@ const locales = {
     popup: 'Popup element',
   },
 };
-const Block = (props: any) => {
+
+const Block: React.FC<Readonly<TabsProps>> = (props) => {
   return (
     <Tabs
       {...props}
@@ -46,6 +48,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Tabs"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'header', desc: locale.root, version: '6.0.0' },

components/tag/demo/_semantic.tsx

@@ -22,6 +22,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Tag"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },

components/tag/demo/_semantic_group.tsx

@@ -19,6 +19,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Tag"
       semantics={[
         { name: 'root', desc: locale.root },
         { name: 'item', desc: locale.item },

components/timeline/demo/_semantic.tsx

@@ -27,6 +27,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Timeline"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },

components/tooltip/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tooltip } from 'antd';
+import type { TooltipProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,19 +16,21 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<TooltipProps>> = (props) => {
+  const { children, ...rest } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
       <Tooltip
-        title="prompt text"
         open
         placement="top"
+        title="tooltip prompt text"
         autoAdjustOverflow={false}
-        getPopupContainer={() => divRef.current}
-        {...props}
-      />
+        getPopupContainer={() => divRef.current!}
+        {...rest}
+      >
+        {children}
+      </Tooltip>
     </div>
   );
 };

components/tour/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button, Tour } from 'antd';
+import type { TourProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -33,7 +34,7 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<TourProps>> = (props) => {
   const [open, setOpen] = React.useState(true);
   const createBtnRef = React.useRef<HTMLButtonElement>(null);
   return (
@@ -48,12 +49,7 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
         overflow: 'hidden',
       }}
     >
-      <Button
-        ref={createBtnRef}
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
+      <Button ref={createBtnRef} onClick={() => setOpen(true)}>
         Show
       </Button>
       <Tour
@@ -61,7 +57,7 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
         zIndex={1}
         open={open}
         defaultCurrent={0}
-        getPopupContainer={false}
+        getPopupContainer={false as unknown as TourProps['getPopupContainer']}
         onClose={() => setOpen(false)}
         steps={[
           {
@@ -73,13 +69,13 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
                 src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
               />
             ),
-            target: () => createBtnRef.current,
+            target: () => createBtnRef.current!,
             mask: true,
           },
           {
             title: 'Save',
             description: 'Save your changes.',
-            target: () => createBtnRef.current,
+            target: () => createBtnRef.current!,
           },
         ]}
       />
@@ -89,9 +85,9 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
 
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="Tour"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'mask', desc: locale.mask, version: '6.0.0' },

components/tree-select/demo/_semantic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import { TreeSelect } from 'antd';
+import type { TreeSelectProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -43,7 +44,7 @@ const treeData = [
   },
 ];
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<TreeSelectProps>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
   const [value, setValue] = React.useState<string>();
   const onChange = (newValue: string) => {
@@ -53,7 +54,7 @@ const Block = (props: any) => {
     <div ref={divRef}>
       <TreeSelect
         {...props}
-        getPopupContainer={() => divRef.current}
+        getPopupContainer={() => divRef.current!}
         showSearch
         placement="bottomLeft"
         prefix="Prefix"
@@ -77,11 +78,12 @@ const Block = (props: any) => {
     </div>
   );
 };
+
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="TreeSelect"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'prefix', desc: locale.prefix, version: '6.0.0' },

components/tree/demo/_semantic.tsx

@@ -49,6 +49,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Tree"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },

components/upload/demo/_semantic.tsx

@@ -50,15 +50,17 @@ const uploadProps: UploadProps = {
   ],
 };
 
-const Block: React.FC = (props: any) => (
+const Block: React.FC<Readonly<UploadProps<any>>> = (props) => (
   <Upload {...uploadProps} {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
   </Upload>
 );
+
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Upload"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'list', desc: locale.list, version: '6.0.0' },