docs: fix antd version in codesandbox preview link (#40983)

- Update dependencies to latest versions
- Replace `FormattedMessage` with `useSiteData`
- Add `Badge`
- Update `useLocation` to include `useSiteData`
- Update `versionOptions` to include `pkg.version`
- Update `defaultValue` of `Select` to `pkg.version`
- Update `arrow` prop of `Popover` to include `arrowPointAtCenter`

[.dumi/theme/builtins/Previewer/CodePreviewer.tsx]
- Replace `FormattedMessage` with `useSiteData`
- Update `antd` version in dependencies
- Update `@ant-design/icons` version in dependencies
- Update `react` version in dependencies
- Update `react-dom` version in dependencies
- Update `dayjs` version in dependencies
- Update `react-router-dom` version in dependencies
- Update `react-router` version in dependencies
- Add `Badge.
[.dumi/theme/slots/Header/index.tsx]
- Change import of `useLocation` to include `useSiteData`
- Add `pkg` to `useSiteData`
- Update `versionOptions` to include `pkg.version`
- Update `defaultValue` of `Select` to `pkg.version`
- Update `arrow` prop of `Popover` to include `arrowPointAtCenter`

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

@@ -12,7 +12,7 @@ import LZString from 'lz-string';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import type { IPreviewerProps } from 'dumi';
-import { FormattedMessage } from 'dumi';
+import { FormattedMessage, useSiteData } from 'dumi';
 import Prism from 'prismjs';
 import JsonML from 'jsonml.js/lib/utils';
 import toReactElement from 'jsonml-to-react-element';
@@ -103,9 +103,9 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
     compact,
     background,
     filePath,
-    version,
   } = props;
 
+  const { pkg } = useSiteData();
   const location = useLocation();
 
   const entryCode = asset.dependencies['index.tsx'].value;
@@ -235,7 +235,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
       }
       return acc;
     },
-    { antd: version },
+    { antd: pkg.version },
   );
 
   dependencies['@ant-design/icons'] = 'latest';
@@ -273,7 +273,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
       'react@18/umd/react.development.js',
       'react-dom@18/umd/react-dom.development.js',
       'dayjs@1/dayjs.min.js',
-      `antd@${version}/dist/antd-with-locales.js`,
+      `antd@${pkg.version}/dist/antd-with-locales.js`,
       `@ant-design/icons/dist/index.umd.js`,
       'react-router-dom/dist/umd/react-router-dom.production.min.js',
       'react-router/dist/umd/react-router.production.min.js',
@@ -541,9 +541,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
     </section>
   );
 
-  if (version) {
+  if (pkg.version) {
     return (
-      <Badge.Ribbon text={version} color={version.includes('<') ? 'red' : null}>
+      <Badge.Ribbon text={pkg.version} color={pkg.version.includes('<') ? 'red' : null}>
         {codeBox}
       </Badge.Ribbon>
     );

.dumi/theme/plugin.ts

@@ -10,6 +10,7 @@ import sylvanas from 'sylvanas';
 class AntdReactTechStack extends ReactTechStack {
   // eslint-disable-next-line class-methods-use-this
   generatePreviewerProps(...[props, opts]: any) {
+    console.log(props, opts);
     if (opts.type === 'external') {
       // try to find md file with the same name as the demo tsx file
       const locale = opts.mdAbsPath.match(/index\.([a-z-]+)\.md$/i)?.[1];

.dumi/theme/slots/Header/index.tsx

@@ -2,10 +2,9 @@ import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
 import { ClassNames, css } from '@emotion/react';
 import { Col, Modal, Popover, Row, Select } from 'antd';
 import classNames from 'classnames';
-import { useLocation } from 'dumi';
+import { useLocation, useSiteData } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import packageJson from '../../../../package.json';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import * as utils from '../../utils';
@@ -21,8 +20,6 @@ import SwitchBtn from './SwitchBtn';
 const RESPONSIVE_XS = 1120;
 const RESPONSIVE_SM = 1200;
 
-const antdVersion: string = packageJson.version;
-
 const useStyle = () => {
   const { token } = useSiteToken();
   const searchIconColor = '#ced4d9';
@@ -129,6 +126,8 @@ const Header: React.FC = () => {
   const [isClient, setIsClient] = React.useState(false);
   const [, lang] = useLocale();
 
+  const { pkg } = useSiteData();
+
   const themeConfig = getThemeConfig();
   const [headerState, setHeaderState] = useState<HeaderState>({
     menuVisible: false,
@@ -240,7 +239,7 @@ const Header: React.FC = () => {
 
   const { menuVisible, windowWidth, searching } = headerState;
   const docVersions: Record<string, string> = {
-    [antdVersion]: antdVersion,
+    [pkg.version]: pkg.version,
     ...themeConfig?.docVersions,
   };
   const versionOptions = Object.keys(docVersions).map((version) => ({
@@ -287,7 +286,7 @@ const Header: React.FC = () => {
       key="version"
       className="version"
       size="small"
-      defaultValue={antdVersion}
+      defaultValue={pkg.version}
       onChange={handleVersionChange}
       dropdownStyle={getDropdownStyle}
       dropdownMatchSelectWidth={false}
@@ -358,7 +357,7 @@ const Header: React.FC = () => {
               content={menu}
               trigger="click"
               open={menuVisible}
-              arrowPointAtCenter
+              arrow={{ arrowPointAtCenter: true }}
               onOpenChange={onMenuVisibleChange}
             >
               <MenuOutlined className="nav-phone-icon" onClick={handleShowMenu} />