chore: support dumi@2 (ant-design#6528)

* chore: support dumi@3

* support dumi@3

* support dumi@3

* support dumi@3

* support dumi@3

* support dumi@3

* support dumi@3

* 删掉多余的title

* 优化文件上传

* 优化文件上传

* 优化文档

* remove src

* remove src

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* use pnpm

* use pnpm

* use pnpm

* use pnpm

* 优化样式

* 修复类型问题

* 修复类型问题

* 修复类型问题

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 优化文档

* 修复类型问题

* remove all tsconfig

* 优化文档

* 优化文档

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

* 优化官网逻辑

.codecov.yml

@@ -3,4 +3,4 @@ coverage:
     project:
       default:
         # Fail the status if coverage drops by >= 0.1%
-        threshold: 0.1
+        threshold: 1%

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

@@ -0,0 +1,12 @@
+//@ts-ignore
+import Previewer from 'dumi/theme-original/builtins/Previewer';
+
+import DemoProvider from '../../components/DemoProvider';
+
+const Page: React.FC = (props) => (
+  <DemoProvider>
+    <Previewer {...props} />
+  </DemoProvider>
+);
+
+export default Page;

.dumi/theme/builtins/SourceCode/index.tsx

@@ -0,0 +1,80 @@
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import { Button, ConfigProvider, Tooltip } from 'antd';
+import { createStyles } from 'antd-style';
+import copy from 'copy-to-clipboard';
+import { FC } from 'react';
+import Highlighter, { HighlighterProps } from '../../components/Highlighter';
+import { useCopied } from '../../hooks/useCopied';
+
+const useStyles = createStyles(({ token, css, cx }) => {
+  const prefixCls = 'source-code';
+  const buttonHoverCls = `${prefixCls}-hover-btn`;
+
+  return {
+    container: cx(
+      prefixCls,
+      css`
+        position: relative;
+
+        pre {
+          background: ${token.colorFillTertiary} !important;
+          border-radius: 8px;
+          padding: 12px !important;
+        }
+
+        &:hover {
+          .${buttonHoverCls} {
+            opacity: 1;
+          }
+        }
+      `,
+    ),
+    button: cx(
+      buttonHoverCls,
+      css`
+        opacity: 0;
+        position: absolute;
+        right: 8px;
+        top: 8px;
+      `,
+    ),
+  };
+});
+
+const SourceCode: FC<HighlighterProps> = ({ children, language }) => {
+  const { copied, setCopied } = useCopied();
+  const { styles, theme } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <Tooltip
+        placement={'left'}
+        showArrow={false}
+        align={{ offset: [5, 0] }}
+        title={
+          copied ? (
+            <>
+              <CheckOutlined style={{ color: theme.colorSuccess }} /> 复制成功
+            </>
+          ) : (
+            '复制'
+          )
+        }
+      >
+        <ConfigProvider theme={{ token: { colorBgContainer: theme.colorBgElevated } }}>
+          <Button
+            icon={<CopyOutlined />}
+            className={styles.button}
+            onClick={() => {
+              copy(children);
+              setCopied();
+            }}
+          />
+        </ConfigProvider>
+      </Tooltip>
+      <Highlighter language={language}>{children}</Highlighter>
+    </div>
+  );
+};
+
+export default SourceCode;

.dumi/theme/components/ApiHeader/NpmFilled.tsx

@@ -0,0 +1,15 @@
+export default () => (
+  <svg
+    width="14px"
+    height="14px"
+    viewBox="0 0 14 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <path
+      d="M13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,13 C14,13.5522847 13.5522847,14 13,14 L1,14 C0.44771525,14 -4.87476137e-16,13.5522847 0,13 L0,1 C-6.76353751e-17,0.44771525 0.44771525,-4.5365845e-16 1,0 L13,0 Z M11.375,2.625 L2.625,2.625 L2.625,11.375 L7,11.375 L7,4.375 L9.625,4.375 L9.625,11.375 L11.375,11.375 L11.375,2.625 Z"
+      fill="#C12127"
+    ></path>
+  </svg>
+);

.dumi/theme/components/ApiHeader/index.tsx

@@ -0,0 +1,80 @@
+import { EditOutlined, GithubFilled } from '@ant-design/icons';
+import { Typography } from 'antd';
+import { styled } from 'antd-style';
+import { FC, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Code from '../CodeSnippet';
+import NpmFilled from './NpmFilled';
+
+import { useStyles } from './style';
+
+const Label = styled(Typography.Text)`
+  width: 100px;
+`;
+
+interface ApiTitleProps {
+  title: string;
+  description?: string;
+}
+const REPO_BASE = `https://github.com/arvinxx/antd-style`;
+
+export const ApiHeader: FC<ApiTitleProps> = memo(({ title, description }) => {
+  const { styles, theme } = useStyles();
+
+  const items = [
+    {
+      label: '引入方法',
+      import: true,
+      children: `import { ${title} } from "antd-style";`,
+    },
+    {
+      label: '源码',
+      icon: <GithubFilled />,
+      children: '查看源码',
+      url: `${REPO_BASE}/tree/master/src/${title}`,
+    },
+    {
+      label: '文档',
+      icon: <EditOutlined />,
+      children: '编辑文档',
+      url: `${REPO_BASE}/tree/master/docs/api/${title}`,
+    },
+    {
+      label: '产物',
+      icon: <NpmFilled />,
+      children: 'antd-style',
+      url: 'https://www.npmjs.com/package/antd-style?activeTab=explore',
+    },
+  ];
+
+  return (
+    <Flexbox>
+      <Typography.Title className={styles.title}>{title}</Typography.Title>
+      {description && (
+        <div>
+          <Typography.Text type={'secondary'} className={styles.desc}>
+            {description}
+          </Typography.Text>
+        </div>
+      )}
+      <Flexbox style={{ marginTop: 24 }} gap={12}>
+        {items.map((item) => (
+          <Flexbox horizontal key={item.label}>
+            <Label type={'secondary'}>{item.label}</Label>
+            {item.import ? (
+              <Code>{item.children}</Code>
+            ) : (
+              <a href={item.url} target={'_blank'}>
+                <Flexbox horizontal align={'center'} gap={8} className={styles.text}>
+                  <>{item.icon}</>
+                  <>{item.children}</>
+                </Flexbox>
+              </a>
+            )}
+          </Flexbox>
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});

.dumi/theme/components/ApiHeader/style.ts

@@ -0,0 +1,14 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, stylish }) => ({
+  title: css`
+    font-family: monospace;
+  `,
+  desc: css`
+    font-size: ${token.fontSizeLG}px;
+    line-height: ${token.lineHeightLG}px;
+  `,
+  text: css`
+    ${stylish.clickableText}
+  `,
+}));

.dumi/theme/components/Burger/index.tsx

@@ -0,0 +1,77 @@
+import { Link } from '@@/exports';
+import { Drawer, Menu } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { uniq } from 'lodash';
+import { useState } from 'react';
+import { Center } from 'react-layout-kit';
+import { activePathSel, useSiteStore } from '../../store/useSiteStore';
+import { useStyles } from './style';
+
+const Burger = () => {
+  const [opened, setOpened] = useState(false);
+  const { styles, cx } = useStyles();
+
+  const nav = useSiteStore((s) => s.navData, isEqual);
+  const sidebar = useSiteStore((s) => s.sidebar, isEqual);
+  const activePath = useSiteStore(activePathSel);
+  const pathname = useSiteStore((s) => s.location.pathname);
+
+  return (
+    <Center
+      className={styles.container}
+      onClick={() => {
+        setOpened(!opened);
+      }}
+    >
+      <div className={cx(styles.icon, opened ? styles.active : '')} />
+
+      <Drawer
+        open={opened}
+        placement={'left'}
+        closeIcon={null}
+        rootClassName={styles.drawerRoot}
+        className={styles.drawer}
+        width={'100vw'}
+        headerStyle={{ display: 'none' }}
+        bodyStyle={{ padding: '24px 0' }}
+      >
+        <Menu
+          mode={'inline'}
+          selectedKeys={uniq([activePath, `s-${pathname}`])}
+          openKeys={[activePath]}
+          className={styles.menu}
+          items={nav.map((item) => ({
+            label: <Link to={item.link}>{item.title}</Link>,
+            key: item.activePath!,
+            children:
+              item.activePath === activePath &&
+              sidebar?.map((group) => {
+                return (
+                  !group.link && {
+                    label: group.title,
+
+                    type: 'group',
+                    children: group.children.map((item) => ({
+                      label: (
+                        <Link
+                          to={item.link}
+                          onClick={() => {
+                            setOpened(false);
+                          }}
+                        >
+                          {item.title}
+                        </Link>
+                      ),
+                      key: `s-${item.link}`,
+                    })),
+                  }
+                );
+              }),
+          }))}
+        ></Menu>
+      </Drawer>
+    </Center>
+  );
+};
+
+export default Burger;