site: update site type { children: React.ReactNode } => `React.Prop…

…sWithChildren` (#48770)

* site: update site type React.ReactNode => React.PropsWithChildren

* fix: fix

* fix: fix

.dumi/pages/index/components/Theme/ColorPicker.tsx

@@ -36,12 +36,11 @@ const useStyle = createStyles(({ token, css }) => ({
 
 export interface ColorPickerProps {
   id?: string;
-  children?: React.ReactNode;
   value?: string | Color;
   onChange?: (value?: Color | string) => void;
 }
 
-const DebouncedColorPicker: React.FC<ColorPickerProps> = (props) => {
+const DebouncedColorPicker: React.FC<React.PropsWithChildren<ColorPickerProps>> = (props) => {
   const { value: color, children, onChange } = props;
   const [value, setValue] = useState(color);
 

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

@@ -3,11 +3,6 @@ import type { ColorInput } from '@ctrl/tinycolor';
 import { TinyColor } from '@ctrl/tinycolor';
 import { createStyles } from 'antd-style';
 
-interface ColorChunkProps {
-  children?: React.ReactNode;
-  value?: ColorInput;
-}
-
 const useStyle = createStyles(({ token, css }) => ({
   codeSpan: css`
     padding: 0.2em 0.4em;
@@ -26,7 +21,11 @@ const useStyle = createStyles(({ token, css }) => ({
   `,
 }));
 
-const ColorChunk: React.FC<ColorChunkProps> = (props) => {
+interface ColorChunkProps {
+  value?: ColorInput;
+}
+
+const ColorChunk: React.FC<React.PropsWithChildren<ColorChunkProps>> = (props) => {
   const { styles } = useStyle();
   const { value, children } = props;
 

.dumi/theme/builtins/Container/index.tsx

@@ -2,16 +2,20 @@
  * copied: https://github.com/arvinxx/dumi-theme-antd-style/tree/master/src/builtins/Container
  */
 import * as React from 'react';
-import type { FC, ReactNode } from 'react';
 import { Alert } from 'antd';
 
 import useStyles from './style';
 
-const Container: FC<{
+interface ContainerProps {
   type: 'info' | 'warning' | 'success' | 'error';
   title?: string;
-  children: ReactNode;
-}> = ({ type, title, children }) => {
+}
+
+const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
+  type,
+  title,
+  children,
+}) => {
   const { styles, cx } = useStyles();
 
   return (

.dumi/theme/builtins/ImagePreview/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
+import { Image } from 'antd';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
-import { Image } from 'antd';
 
 interface ImagePreviewProps {
-  children: React.ReactNode[];
   className?: string;
   /** Do not show padding & background */
   pure?: boolean;
@@ -29,11 +28,22 @@ function isGoodBadImg(imgMeta: any): boolean {
 function isCompareImg(imgMeta: any): boolean {
   return isGoodBadImg(imgMeta) || imgMeta.inline;
 }
-const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
+
+interface MateType {
+  className: string;
+  alt: string;
+  description: string;
+  src: string;
+  isGood: boolean;
+  isBad: boolean;
+  inline: boolean;
+}
+
+const ImagePreview: React.FC<React.PropsWithChildren<ImagePreviewProps>> = (props) => {
   const { children, className: rootClassName, pure } = props;
   const imgs = toArray(children).filter((ele) => ele.type === 'img');
 
-  const imgsMeta = imgs.map((img) => {
+  const imgsMeta = imgs.map<Partial<MateType>>((img) => {
     const { alt, description, src, className } = img.props;
     return {
       className,
@@ -107,7 +117,7 @@ const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
             <div className="preview-image-title">{coverMeta.alt}</div>
             <div
               className="preview-image-description"
-              dangerouslySetInnerHTML={{ __html: coverMeta.description }}
+              dangerouslySetInnerHTML={{ __html: coverMeta.description ?? '' }}
             />
           </div>
         );

.dumi/theme/builtins/LocaleLink/index.tsx

@@ -7,10 +7,13 @@ type LinkProps = Parameters<typeof Link>[0];
 
 export interface LocaleLinkProps extends LinkProps {
   sourceType: 'a' | 'Link';
-  children?: React.ReactNode;
 }
 
-const LocaleLink: React.FC<LocaleLinkProps> = ({ sourceType, to, ...props }) => {
+const LocaleLink: React.FC<React.PropsWithChildren<LocaleLinkProps>> = ({
+  sourceType,
+  to,
+  ...props
+}) => {
   const Component = sourceType === 'a' ? 'a' : Link;
 
   const [, localeType] = useLocale();

.dumi/theme/builtins/Sandpack/index.tsx

@@ -1,4 +1,3 @@
-import type { FC, ReactNode } from 'react';
 import React, { Suspense } from 'react';
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
@@ -42,13 +41,12 @@ const SandpackFallback = () => {
 };
 
 interface SandpackProps {
-  children?: ReactNode;
   dark?: boolean;
   autorun?: boolean;
   dependencies?: string;
 }
 
-const Sandpack: FC<SandpackProps> = ({
+const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = ({
   children,
   dark,
   dependencies: extraDeps,

.dumi/theme/common/Link.tsx

@@ -5,13 +5,12 @@ import nprogress from 'nprogress';
 
 export interface LinkProps {
   to: string | { pathname?: string; search?: string; hash?: string };
-  children?: React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
   onClick?: MouseEventHandler;
 }
 
-const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((props, ref) => {
   const { to, children, ...rest } = props;
   const [isPending, startTransition] = useTransition();
   const navigate = useNavigate();

.dumi/theme/slots/Content/InViewSuspense.tsx

@@ -5,10 +5,9 @@ import type { IntersectionObserverProps } from 'react-intersection-observer';
 
 type InViewSuspenseProps = Pick<IntersectionObserverProps, 'delay'> & {
   fallback?: React.ReactNode;
-  children?: React.ReactNode;
 };
 
-const InViewSuspense: React.FC<InViewSuspenseProps> = ({
+const InViewSuspense: React.FC<React.PropsWithChildren<InViewSuspenseProps>> = ({
   children,
   fallback = <Skeleton.Input active size="small" />,
   delay = 200,

components/watermark/__tests__/index.test.tsx

@@ -116,9 +116,7 @@ describe('Watermark', () => {
 
         const watermark = getWatermarkElement();
 
-        expect(watermark).toHaveStyle({
-          zIndex: '9',
-        });
+        expect(watermark).toHaveStyle({ zIndex: '9' });
 
         // Not crash when children removed
         rerender(<Watermark className="test" />);