site: update dumi type (#47326)

* site: update dumi type

* fix: fix

* fix: fix

* fix: fix

* fix: fix

.dumi/theme/builtins/Previewer/DesignPreviewer.tsx

@@ -1,10 +1,11 @@
 import type { FC } from 'react';
 import React, { useRef } from 'react';
-import { createStyles } from 'antd-style';
 import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
-import { nodeToGroup } from 'html2sketch';
-import copy from 'copy-to-clipboard';
 import { App } from 'antd';
+import { createStyles } from 'antd-style';
+import copy from 'copy-to-clipboard';
+import { nodeToGroup } from 'html2sketch';
+
 import type { AntdPreviewerProps } from './Previewer';
 
 const useStyle = createStyles(({ token, css }) => ({
@@ -60,14 +61,15 @@ const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description,
 
   const handleCopy = async () => {
     try {
-      const group = await nodeToGroup(demoRef.current);
-      copy(JSON.stringify(group.toSketchJSON()));
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 5000);
-    } catch (e) {
-      console.error(e);
+      if (demoRef.current) {
+        const group = await nodeToGroup(demoRef.current);
+        copy(JSON.stringify(group.toSketchJSON()));
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 5000);
+      }
+    } catch {
       message.error('复制失败');
     }
   };
@@ -77,7 +79,9 @@ const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description,
       <a className={styles.title} href={`#${asset.id}`}>
         {title}
       </a>
-      <div className={styles.description} dangerouslySetInnerHTML={{ __html: description }} />
+      {description && (
+        <div className={styles.description} dangerouslySetInnerHTML={{ __html: description }} />
+      )}
       <div className={styles.copy}>
         {copied ? (
           <div className={styles.copiedTip}>

.dumi/theme/builtins/Previewer/index.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
-import type { IPreviewerProps } from 'dumi';
-import { Skeleton, Alert } from 'antd';
+import { Alert, Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
+import type { IPreviewerProps } from 'dumi';
 
 const { ErrorBoundary } = Alert;
 
@@ -16,7 +16,7 @@ const useStyle = createStyles(({ css }) => ({
   `,
 }));
 
-export default (props: IPreviewerProps) => {
+const PreviewerSuspense: React.FC<IPreviewerProps> = (props) => {
   const { styles } = useStyle();
   return (
     <ErrorBoundary>
@@ -25,10 +25,7 @@ export default (props: IPreviewerProps) => {
           <Skeleton.Node
             active
             className={styles.skeletonWrapper}
-            style={{
-              width: '100%',
-              height: '100%',
-            }}
+            style={{ width: '100%', height: '100%' }}
           >
             {' '}
           </Skeleton.Node>
@@ -39,3 +36,5 @@ export default (props: IPreviewerProps) => {
     </ErrorBoundary>
   );
 };
+
+export default PreviewerSuspense;

.dumi/theme/common/BrowserFrame.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const BrowserFrame: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+const BrowserFrame: React.FC<React.PropsWithChildren> = ({ children }) => (
   <div className="browser-mockup with-url">{children}</div>
 );
 

.dumi/theme/common/ClientOnly.tsx

@@ -1,18 +1,14 @@
-import type { FC, ReactElement, ReactNode } from 'react';
+import type React from 'react';
 import { useLayoutEffect, useState } from 'react';
 
-export type ClientOnlyProps = {
-  children: ReactNode;
-};
-
-const ClientOnly: FC<ClientOnlyProps> = ({ children }) => {
+const ClientOnly: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [clientReady, setClientReady] = useState<boolean>(false);
 
   useLayoutEffect(() => {
     setClientReady(true);
   }, []);
 
-  return clientReady ? (children as ReactElement) : null;
+  return clientReady ? (children as React.ReactElement) : null;
 };
 
 export default ClientOnly;

.dumi/theme/common/CodePreview.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentProps, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, type ComponentProps } from 'react';
 import { Button, Tabs, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import toReactElement from 'jsonml-to-react-element';
@@ -96,7 +96,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   error,
 }) => {
   // 避免 Tabs 数量不稳定的闪动问题
-  const initialCodes = {} as Record<'tsx' | 'jsx' | 'style', string>;
+  const initialCodes: Partial<Record<'tsx' | 'jsx' | 'style', string>> = {};
   if (sourceCode) {
     initialCodes.tsx = '';
   }
@@ -144,7 +144,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
                 error={error}
                 lang={lang}
                 initialValue={sourceCodes[lang]}
-                onChange={(code) => {
+                onChange={(code: string) => {
                   onSourceChange?.({ [entryName]: code });
                 }}
               />
@@ -170,7 +170,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
         error={error}
         lang={langList[0]}
         initialValue={sourceCodes[langList[0]]}
-        onChange={(code) => {
+        onChange={(code: string) => {
           onSourceChange?.({ [entryName]: code });
         }}
       />

.dumi/theme/common/CommonHelmet.tsx

@@ -1,11 +1,11 @@
-import { useRouteMeta, Helmet } from 'dumi';
-import React, { useMemo } from 'react';
+import React from 'react';
+import { Helmet, useRouteMeta } from 'dumi';
 
-const CommonHelmet = () => {
+const CommonHelmet: React.FC = () => {
   const meta = useRouteMeta();
 
-  const [title, description] = useMemo(() => {
-    let helmetTitle;
+  const [title, description] = React.useMemo<[string, string]>(() => {
+    let helmetTitle: string;
     if (!meta.frontmatter.subtitle && !meta.frontmatter.title) {
       helmetTitle = '404 Not Found - Ant Design';
     } else {

.dumi/theme/common/DirectionIcon.tsx

@@ -1,19 +1,28 @@
-import Icon from '@ant-design/icons';
 import React from 'react';
+import Icon from '@ant-design/icons';
 import type { DirectionType } from 'antd/es/config-provider';
 
 const ltrD =
   'M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z';
+
 const rtlD =
   'M256 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM960 896l-256-224 256-224z';
 
-const DirectionSvg = ({ direction }: any) => (
-  <svg viewBox="0 0 1024 1024" fill="currentColor">
-    <path d={direction === 'ltr' ? ltrD : rtlD} />
-  </svg>
-);
+interface DirectionIconProps {
+  className?: string;
+  direction?: DirectionType;
+}
 
-const DirectionIcon: React.FC<{ direction: DirectionType; className?: string }> = (props) => (
+const DirectionSvg: React.FC<DirectionIconProps> = (props) => {
+  const { direction } = props;
+  return (
+    <svg viewBox="0 0 1024 1024" fill="currentColor">
+      <path d={direction === 'ltr' ? ltrD : rtlD} />
+    </svg>
+  );
+};
+
+const DirectionIcon: React.FC<DirectionIconProps> = (props) => (
   <Icon {...props} component={() => <DirectionSvg direction={props.direction} />} />
 );
 

.dumi/theme/common/EditButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EditOutlined } from '@ant-design/icons';
-import { createStyles } from 'antd-style';
 import { Tooltip } from 'antd';
+import { createStyles } from 'antd-style';
 
 const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/';
 
@@ -38,9 +38,8 @@ const useStyle = createStyles(({ token, css }) => {
   };
 });
 
-export default function EditButton({ title, filename }: EditButtonProps) {
+const EditButton: React.FC<EditButtonProps> = ({ title, filename }) => {
   const { styles } = useStyle();
-
   return (
     <Tooltip title={title}>
       <a
@@ -53,4 +52,6 @@ export default function EditButton({ title, filename }: EditButtonProps) {
       </a>
     </Tooltip>
   );
-}
+};
+
+export default EditButton;

.dumi/theme/common/GlobalStyles.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import ColorStyle from './Color/ColorStyle';
 import {
   BrowserMockup,
@@ -17,7 +18,7 @@ import {
 } from './styles';
 import InlineCard from './styles/InlineCard';
 
-const GlobalStyles = () => (
+const GlobalStyles: React.FC = () => (
   <>
     <Reset />
     <Common />

.dumi/theme/common/Helmet.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import { Helmet } from 'dumi';
 
-type HelmetProps = Helmet['props'];
-export interface WrapHelmetProps extends HelmetProps {
-  children?: React.ReactNode;
-}
+const WrapHelmet: React.FC<React.PropsWithChildren<Helmet['props']>> = (props) => (
+  <Helmet {...props} />
+);
 
-export default function WrapHelmet(props: WrapHelmetProps) {
-  return <Helmet {...props} />;
-}
+export default WrapHelmet;

.dumi/theme/common/Link.tsx

@@ -1,10 +1,10 @@
 import type { MouseEvent, MouseEventHandler } from 'react';
-import React, { forwardRef, useLayoutEffect, useMemo, useTransition } from 'react';
+import React, { forwardRef, useLayoutEffect, useTransition } from 'react';
 import { useLocation, useNavigate } from 'dumi';
 import nprogress from 'nprogress';
 
 export interface LinkProps {
-  to?: string | { pathname?: string; search?: string; hash?: string };
+  to: string | { pathname?: string; search?: string; hash?: string };
   children?: React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
@@ -17,7 +17,7 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
-  const href = useMemo(() => {
+  const href = React.useMemo<string>(() => {
     if (typeof to === 'object') {
       return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
     }

.dumi/theme/layouts/DocLayout/index.tsx

@@ -1,16 +1,21 @@
 import classNames from 'classnames';
 import dayjs from 'dayjs';
+
 import 'dayjs/locale/zh-cn';
-import { Helmet, useOutlet, useSiteData } from 'dumi';
-import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import zhCN from 'antd/es/locale/zh_CN';
+
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import ConfigProvider from 'antd/es/config-provider';
+import zhCN from 'antd/es/locale/zh_CN';
+import { Helmet, useOutlet, useSiteData } from 'dumi';
+
 import useLocale from '../../../hooks/useLocale';
 import useLocation from '../../../hooks/useLocation';
 import GlobalStyles from '../../common/GlobalStyles';
 import Header from '../../slots/Header';
 import SiteContext from '../../slots/SiteContext';
+
 import '../../static/style';
+
 import IndexLayout from '../IndexLayout';
 import ResourceLayout from '../ResourceLayout';
 import SidebarLayout from '../SidebarLayout';
@@ -56,8 +61,9 @@ const DocLayout: React.FC = () => {
   // handle hash change or visit page hash from Link component, and jump after async chunk loaded
   useEffect(() => {
     const id = hash.replace('#', '');
-
-    if (id) document.getElementById(decodeURIComponent(id))?.scrollIntoView();
+    if (id) {
+      document.getElementById(decodeURIComponent(id))?.scrollIntoView();
+    }
   }, [loading, hash]);
 
   useEffect(() => {
@@ -66,7 +72,7 @@ const DocLayout: React.FC = () => {
     }
   }, [location]);
 
-  const content = useMemo(() => {
+  const content = React.useMemo<React.ReactNode>(() => {
     if (
       ['', '/'].some((path) => path === pathname) ||
       ['/index'].some((path) => pathname.startsWith(path))

.dumi/theme/layouts/GlobalLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, Suspense } from 'react';
+import React, { Suspense, useCallback, useEffect } from 'react';
 import {
   createCache,
   extractStyle,
@@ -9,8 +9,9 @@ import {
 } from '@ant-design/cssinjs';
 import { HappyProvider } from '@ant-design/happy-work-theme';
 import { getSandpackCssText } from '@codesandbox/sandpack-react';
-import { App, theme as antdTheme } from 'antd';
-import type { DirectionType } from 'antd/es/config-provider';
+import { theme as antdTheme, App } from 'antd';
+import type { MappingAlgorithm } from 'antd';
+import type { DirectionType, ThemeConfig } from 'antd/es/config-provider';
 import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
 
 import { DarkContext } from '../../hooks/useDark';
@@ -43,9 +44,9 @@ const getAlgorithm = (themes: ThemeName[] = []) =>
       if (theme === 'compact') {
         return antdTheme.compactAlgorithm;
       }
-      return null;
+      return null as unknown as MappingAlgorithm;
     })
-    .filter((item) => item) as (typeof antdTheme.darkAlgorithm)[];
+    .filter(Boolean);
 
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
@@ -120,7 +121,7 @@ const GlobalLayout: React.FC = () => {
     };
   }, []);
 
-  const siteContextValue = useMemo(
+  const siteContextValue = React.useMemo<SiteContextProps>(
     () => ({
       direction,
       updateSiteConfig,
@@ -131,6 +132,16 @@ const GlobalLayout: React.FC = () => {
     [isMobile, direction, updateSiteConfig, theme, bannerVisible],
   );
 
+  const themeConfig = React.useMemo<ThemeConfig>(
+    () => ({
+      algorithm: getAlgorithm(theme),
+      token: { motion: !theme.includes('motion-off') },
+      cssVar: true,
+      hashed: false,
+    }),
+    [theme],
+  );
+
   const [styleCache] = React.useState(() => createCache());
 
   useServerInsertedHTML(() => {
@@ -191,16 +202,7 @@ const GlobalLayout: React.FC = () => {
         linters={[legacyNotSelectorLinter, parentSelectorLinter, NaNLinter]}
       >
         <SiteContext.Provider value={siteContextValue}>
-          <SiteThemeProvider
-            theme={{
-              algorithm: getAlgorithm(theme),
-              token: {
-                motion: !theme.includes('motion-off'),
-              },
-              cssVar: true,
-              hashed: false,
-            }}
-          >
+          <SiteThemeProvider theme={themeConfig}>
             <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>
           </SiteThemeProvider>
         </SiteContext.Provider>

.dumi/theme/layouts/IndexLayout/index.tsx

@@ -1,21 +1,27 @@
-import { Helmet } from 'dumi';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import { Helmet } from 'dumi';
+
 import Footer from '../../slots/Footer';
 
-const IndexLayout: React.FC<PropsWithChildren<{ title: string; desc: string }>> = ({
-  children,
-  ...restProps
-}) => (
-  <>
-    <Helmet>
-      <title>{restProps.title}</title>
-      <meta property="og:title" content={restProps.title} />
-      {restProps.desc && <meta name="description" content={restProps.desc} />}
-    </Helmet>
-    <div style={{ minHeight: '100vh' }}>{children}</div>
-    <Footer />
-  </>
-);
+interface IndexLayoutProps {
+  title?: string;
+  desc?: string;
+}
+
+const IndexLayout: React.FC<PropsWithChildren<IndexLayoutProps>> = (props) => {
+  const { children, title, desc } = props;
+  return (
+    <>
+      <Helmet>
+        <title>{title}</title>
+        <meta property="og:title" content={title} />
+        {desc && <meta name="description" content={desc} />}
+      </Helmet>
+      <div style={{ minHeight: '100vh' }}>{children}</div>
+      <Footer />
+    </>
+  );
+};
 
 export default IndexLayout;

.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx

@@ -1,8 +1,9 @@
-import { createStyles } from 'antd-style';
-import throttle from 'lodash/throttle';
 import * as React from 'react';
-import classNames from 'classnames';
 import { Tabs } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import throttle from 'lodash/throttle';
+
 import scrollTo from '../../../../components/_util/scrollTo';
 
 const listenerEvents = ['scroll', 'resize'] as const;
@@ -22,7 +23,9 @@ const useStyle = createStyles(({ token, css }) => {
       box-shadow: ${boxShadowSecondary};
       transform: translate3d(0, -100%, 0);
       opacity: 0;
-      transition: opacity 0.3s, transform 0.3s;
+      transition:
+        opacity 0.3s,
+        transform 0.3s;
 
       ${antCls}-tabs {
         max-width: 1208px;
@@ -73,7 +76,8 @@ const AffixTabs: React.FC = () => {
   }
 
   React.useEffect(() => {
-    idsRef.current = Array.from(document.querySelectorAll('h2[id]')).map(({ id }) => id);
+    const nodeList = document.querySelectorAll<HTMLHeadingElement>('h2[id]');
+    idsRef.current = Array.from(nodeList).map<string>(({ id }) => id);
     setLoaded(true);
   }, []);
 

.dumi/theme/layouts/ResourceLayout/index.tsx

@@ -1,8 +1,9 @@
-import { createStyles } from 'antd-style';
-import { FormattedMessage, useRouteMeta } from 'dumi';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 import { ConfigProvider, Layout, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { FormattedMessage, useRouteMeta } from 'dumi';
+
 import CommonHelmet from '../../common/CommonHelmet';
 import EditButton from '../../common/EditButton';
 import Footer from '../../slots/Footer';

.dumi/theme/layouts/SidebarLayout/index.tsx

@@ -1,6 +1,7 @@
-import { createStyles } from 'antd-style';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import { createStyles } from 'antd-style';
+
 import CommonHelmet from '../../common/CommonHelmet';
 import Content from '../../slots/Content';
 import Sidebar from '../../slots/Sidebar';
@@ -12,7 +13,7 @@ const useStyle = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SidebarLayout: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+const SidebarLayout: React.FC<PropsWithChildren> = ({ children }) => {
   const { styles } = useStyle();
   return (
     <main className={styles.main}>

.dumi/theme/slots/Sidebar/index.tsx

@@ -1,8 +1,9 @@
+import React, { useContext } from 'react';
+import { Col, ConfigProvider, Menu } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { useSidebarData } from 'dumi';
 import MobileMenu from 'rc-drawer';
-import React, { useContext } from 'react';
-import { Col, ConfigProvider, Menu } from 'antd';
+
 import useMenu from '../../../hooks/useMenu';
 import SiteContext from '../SiteContext';
 
@@ -41,17 +42,17 @@ const useStyle = createStyles(({ token, css }) => {
         }
 
         > ${antCls}-menu-item,
-        > ${antCls}-menu-submenu
-        > ${antCls}-menu-submenu-title,
-        > ${antCls}-menu-item-group
-        > ${antCls}-menu-item-group-title,
-        > ${antCls}-menu-item-group
-        > ${antCls}-menu-item-group-list
-        > ${antCls}-menu-item,
-        &${antCls}-menu-inline
-        > ${antCls}-menu-item-group
-        > ${antCls}-menu-item-group-list
-        > ${antCls}-menu-item {
+          > ${antCls}-menu-submenu
+          > ${antCls}-menu-submenu-title,
+          > ${antCls}-menu-item-group
+          > ${antCls}-menu-item-group-title,
+          > ${antCls}-menu-item-group
+          > ${antCls}-menu-item-group-list
+          > ${antCls}-menu-item,
+          &${antCls}-menu-inline
+          > ${antCls}-menu-item-group
+          > ${antCls}-menu-item-group-list
+          > ${antCls}-menu-item {
           padding-left: 40px !important;
 
           ${antCls}-row-rtl & {
@@ -139,7 +140,7 @@ const Sidebar: React.FC = () => {
         mode="inline"
         theme={isDark ? 'dark' : 'light'}
         selectedKeys={[selectedKey]}
-        defaultOpenKeys={sidebarData?.map(({ title }) => title).filter((item) => item) as string[]}
+        defaultOpenKeys={sidebarData?.map<string>(({ title }) => title!).filter(Boolean)}
       />
     </ConfigProvider>
   );