feat: Migrate `DemoWrapper` component (#38166)

* feat: Migrate `DemoWrapper` component

* feat: remove invalid comments and add comment for `key` prop

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -1,14 +1,61 @@
-import React from 'react';
-import { DumiDemoGrid } from 'dumi';
+import React, { useState } from 'react';
+import { DumiDemoGrid, FormattedMessage } from 'dumi';
+import { Tooltip } from 'antd';
+import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
 
 const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
-  // TODO: implement demo toolbar
-  // from: https://github.com/ant-design/ant-design/blob/86891775dd6deb4e154b885718a370d31bc78288/site/theme/template/Content/ComponentDoc.jsx#L187-L214
-  //  1. Expand source code for all previewer
-  //  2. Display debug demo
-  console.log('grid demos', items);
+  const [visibleAll, setVisibleAll] = useState(false);
+  const [expandAll, setExpandAll] = useState(false);
 
-  return <DumiDemoGrid items={items} />;
+  const expandTriggerClass = classNames('code-box-expand-trigger', {
+    'code-box-expand-trigger-active': expandAll,
+  });
+
+  const handleVisibleToggle = () => {
+    setVisibleAll(!visibleAll);
+  };
+
+  const handleExpandToggle = () => {
+    setExpandAll(!expandAll);
+  };
+
+  const visibleItems = visibleAll ? items : items.filter(item => !item.previewerProps.debug);
+  const filteredItems = visibleItems.map(item => ({
+    ...item,
+    previewerProps: { ...item.previewerProps, expand: expandAll },
+  }));
+
+  return (
+    <div className="demo-wrapper">
+      <span className="all-code-box-controls">
+        <Tooltip
+          title={
+            <FormattedMessage id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`} />
+          }
+        >
+          {expandAll ? (
+            <CodeFilled className={expandTriggerClass} onClick={handleExpandToggle} />
+          ) : (
+            <CodeOutlined className={expandTriggerClass} onClick={handleExpandToggle} />
+          )}
+        </Tooltip>
+        <Tooltip
+          title={
+            <FormattedMessage id={`app.component.examples.${visibleAll ? 'hide' : 'visible'}`} />
+          }
+        >
+          {visibleAll ? (
+            <BugFilled className={expandTriggerClass} onClick={handleVisibleToggle} />
+          ) : (
+            <BugOutlined className={expandTriggerClass} onClick={handleVisibleToggle} />
+          )}
+        </Tooltip>
+      </span>
+      {/* FIXME: find a new way instead of `key` to trigger re-render */}
+      <DumiDemoGrid items={filteredItems} key={expandAll + '' + visibleAll} />
+    </div>
+  );
 };
 
 export default DemoWrapper;

.dumi/theme/builtins/Previewer/fromDumiProps.tsx

@@ -39,7 +39,7 @@ export default function fromDumiProps<P extends object>(
   const hoc = function DumiPropsAntdPreviewer(props: IPreviewerProps) {
     const showRiddleButton = useShowRiddleButton();
     const location = useLocation();
-    const { asset, children, demoUrl, description = '', ...meta } = props;
+    const { asset, children, demoUrl, expand, description = '', ...meta } = props;
     const intl = useIntl();
     const entryCode = asset.dependencies['index.tsx'].value;
     const transformedProps = {
@@ -87,8 +87,7 @@ export default function fromDumiProps<P extends object>(
       style: meta.style,
       location,
       src: demoUrl,
-      // TODO: pass from DemoWrapper
-      expand: false,
+      expand,
       // FIXME: confirm is there has any case?
       highlightedStyle: '',
       // FIXME: dumi support usePrefersColor

.dumi/theme/static/demo.less

@@ -347,8 +347,14 @@
   }
 }
 
+.demo-wrapper {
+  position: relative;
+}
+
 .all-code-box-controls {
-  float: right;
+  position: absolute;
+  top: -32px;
+  right: 0;
 
   .ant-row-rtl & {
     float: left;