@antv/dumi-theme-antv 0.4.6 → 0.5.1

package/README.md

@@ -34,7 +34,7 @@ TODO
 ## Development
 
 ```bash
-$ tnpm install
+$ npm install
 ```
 
 After the dependencies are installed, a symlink from `example/.dumi/theme` to `../../src` will be created automatically, the symlink makes dumi load our theme package as a local theme, so we can start the example directly, HMR is also available:
@@ -43,6 +43,9 @@ After the dependencies are installed, a symlink from `example/.dumi/theme` to `.
 # switch to example directory
 $ cd example
 
+# downloads the dependencies
+npm install
+
 # start dev server to preview
 npm run dev
 ```

package/dist/layouts/DocLayout.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import '../slots/global';
 import '../slots/_.less';
 /**
  * DocuLayout 是 dumi2 的内置 layout 入口，在这里使用页面路径进行区分成自己不同的 Layout。
  */
-declare const _default: () => any;
+declare const _default: () => React.JSX.Element;
 export default _default;

package/dist/layouts/entry/Index.js

@@ -2,8 +2,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import { useLocale, useSiteData, FormattedMessage } from 'dumi';
 import { SEO } from "dumi/theme/slots/SEO";

package/dist/model/index.d.ts

@@ -0,0 +1,5 @@
+export declare const store: {
+    hideMenu: boolean;
+    showAPI: boolean;
+    apiContainerWidth: number;
+};

package/dist/model/index.js

@@ -0,0 +1,6 @@
+import { proxy } from 'valtio';
+export var store = proxy({
+  hideMenu: false,
+  showAPI: false,
+  apiContainerWidth: 420
+});

package/dist/pages/Example/components/CollapsedIcon/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CollapsedProps {
+    isCollapsed: boolean;
+    style?: React.CSSProperties;
+    onClick?: (isCollapsed: boolean) => void;
+}
+export declare const CollapsedIcon: React.FC<CollapsedProps>;
+export {};

package/dist/pages/Example/components/CollapsedIcon/index.js

@@ -0,0 +1,15 @@
+import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
+import React from 'react';
+import styles from "./index.module.less";
+export var CollapsedIcon = function CollapsedIcon(props) {
+  var isCollapsed = props.isCollapsed,
+    _onClick = props.onClick,
+    style = props.style;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.collapsed,
+    onClick: function onClick() {
+      _onClick(!isCollapsed);
+    },
+    style: style
+  }, isCollapsed ? /*#__PURE__*/React.createElement(DoubleRightOutlined, null) : /*#__PURE__*/React.createElement(DoubleLeftOutlined, null));
+};

package/dist/pages/Example/components/CollapsedIcon/index.module.less

@@ -0,0 +1,14 @@
+@collapsed-icon-size: 36px;
+
+.collapsed {
+  position: absolute;
+  z-index: 3;
+  width: 24px;
+  height: @collapsed-icon-size;
+  line-height: @collapsed-icon-size;
+  font-size: 18px;
+  color: #777;
+  cursor: pointer;
+  background: #f8f9fc;
+  text-align: center;
+}

package/dist/pages/Example/index.js

@@ -6,15 +6,19 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Layout } from 'antd';
 import { useLocale, useSiteData } from 'dumi';
-import { get, find } from 'lodash-es';
-import React, { useContext, useEffect, useState, useMemo } from 'react';
+import { every, find, get } from 'lodash-es';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useSnapshot } from 'valtio';
 import { ThemeAntVContext } from "../../context";
+import { store } from "../../model";
+import { API } from "dumi/theme/slots/API";
 import { CodeRunner } from "dumi/theme/slots/CodeRunner";
 import { getDemoInfo } from "../../slots/CodeRunner/utils";
 import { ExampleSider } from "dumi/theme/slots/ExampleSider";
 import { Header } from "dumi/theme/slots/Header";
 import { SEO } from "dumi/theme/slots/SEO";
+import { CollapsedIcon } from "./components/CollapsedIcon";
 import styles from "./index.module.less";
 import { getCurrentTitle } from "./utils";
 var Sider = Layout.Sider,
@@ -48,14 +52,11 @@ var Example = function Example() {
     _useState2 = _slicedToArray(_useState, 2),
     currentDemo = _useState2[0],
     setCurrentDemo = _useState2[1];
-  var _useState3 = useState(false),
+  var state = useSnapshot(store);
+  var _useState3 = useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
-    isCollapsed = _useState4[0],
-    setIsCollapsed = _useState4[1];
-  var _useState5 = useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    title = _useState6[0],
-    setTitle = _useState6[1];
+    title = _useState4[0],
+    setTitle = _useState4[1];
   useEffect(function () {
     if (topic && example && demo) {
       var targetDemoInfo = getDemoInfo(exampleTopics, topic, example, demo);
@@ -63,6 +64,7 @@ var Example = function Example() {
       setTitle(getCurrentTitle(exampleTopics, topic, example));
     }
   }, [topic, example, hash]);
+  var showAPI = every([get(themeConfig, 'showAPIDoc'), topic, example], Boolean);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.example
   }, /*#__PURE__*/React.createElement(SEO, {
@@ -77,7 +79,7 @@ var Example = function Example() {
     width: 250,
     trigger: null,
     collapsible: true,
-    collapsed: isCollapsed,
+    collapsed: state.hideMenu,
     className: styles.menuSider,
     theme: "light"
   }, currentDemo && /*#__PURE__*/React.createElement(ExampleSider, {
@@ -92,6 +94,15 @@ var Example = function Example() {
       nav(newURL);
     },
     exampleTopics: exampleTopics
+  }), /*#__PURE__*/React.createElement(CollapsedIcon, {
+    isCollapsed: state.hideMenu,
+    onClick: function onClick(show) {
+      store.hideMenu = show;
+    },
+    style: {
+      bottom: 0,
+      right: state.hideMenu ? -24 : 0
+    }
   })), /*#__PURE__*/React.createElement(Content, {
     className: styles.content
   }, topic && example && /*#__PURE__*/React.createElement(CodeRunner, {
@@ -100,6 +111,12 @@ var Example = function Example() {
     example: example,
     demo: demo,
     size: get(themeConfig, 'editor.size', 0.38)
-  }))));
+  })), showAPI && /*#__PURE__*/React.createElement(API, {
+    exampleTopics: exampleTopics,
+    topic: topic,
+    example: example,
+    demo: demo,
+    language: locale.id
+  })));
 };
 export default Example;

package/dist/pages/Examples/components/Accouncement/index.js

@@ -2,8 +2,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 var _excluded = ["message", "bannerId", "localStorageId"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect } from 'react';

package/dist/pages/Examples/components/GalleryPageContent/index.js

@@ -2,8 +2,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import { useLocale } from 'dumi';
 import { DemoCard } from "./DemoCard";

package/dist/plugin/api.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 获取API
+ *
+ * @param {string} apiPath API路径
+ * @returns {string} 文件内容
+ */
+export declare const getExampleAPI: (apiPath: string) => string;

package/dist/plugin/api.js

@@ -0,0 +1,82 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin/api.ts
+var api_exports = {};
+__export(api_exports, {
+  getExampleAPI: () => getExampleAPI
+});
+module.exports = __toCommonJS(api_exports);
+var fs = __toESM(require("fs-extra"));
+var MARKDOWN_REG_SIGN = /`markdown:([^`]*)`/;
+var EMBED_REG_SIGN = /<embed[^>]*src=["']([^"']*)["'][^>]*[>/>]/;
+var getContent = (filePath) => {
+  let content = "";
+  try {
+    const currentContent = fs.readFileSync(filePath).toString();
+    const lines = currentContent.split("\n");
+    let isTitle = false;
+    lines.forEach((line) => {
+      if (line.startsWith("---")) {
+        isTitle = !isTitle;
+      } else {
+        if (!isTitle) {
+          let nestedPath = "";
+          const markdownMatch = MARKDOWN_REG_SIGN.exec(line);
+          const embedMatch = EMBED_REG_SIGN.exec(line);
+          if (markdownMatch) {
+            nestedPath = markdownMatch[1];
+          }
+          if (embedMatch) {
+            nestedPath = embedMatch[1].replace(/@\//g, "");
+          }
+          if (nestedPath) {
+            content += getContent(nestedPath);
+          } else {
+            content += `${line} 
+`;
+          }
+        }
+      }
+    });
+  } catch (e) {
+    console.error(e);
+  }
+  return content;
+};
+var getExampleAPI = (apiPath) => {
+  if (!fs.existsSync(apiPath)) {
+    console.error(`File does not exist: ${apiPath}`);
+    return "";
+  }
+  return getContent(apiPath);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getExampleAPI
+});

package/dist/plugin/examples.d.ts

@@ -5,7 +5,7 @@ import { Example, ExampleTopic } from '../types';
  * @returns {ExampleTopic[]} 案例主题列表
  * @author YuZhanglong <loveyzl1123@gmail.com>
  */
-export declare const getExamplesPageTopics: (exampleTopics: ExampleTopic[]) => {
+export declare const getExamplesPageTopics: (exampleTopics: ExampleTopic[], showAPIDoc: boolean) => {
     id: string;
     title: {
         zh: string;

package/dist/plugin/examples.js

@@ -33,10 +33,11 @@ __export(examples_exports, {
   getExamplesPageTopics: () => getExamplesPageTopics
 });
 module.exports = __toCommonJS(examples_exports);
+var import_front_matter = __toESM(require("front-matter"));
+var fs = __toESM(require("fs-extra"));
 var glob = __toESM(require("glob"));
 var path = __toESM(require("path"));
-var fs = __toESM(require("fs-extra"));
-var import_front_matter = __toESM(require("front-matter"));
+var import_api = require("./api");
 var examplesBaseDir = path.resolve(process.cwd(), "examples");
 var getExampleDemos = (exampleDir) => {
   const demoMetaJSON = fs.readFileSync(path.resolve(exampleDir, "demo", "meta.json")).toString();
@@ -55,13 +56,20 @@ var getExampleDemos = (exampleDir) => {
   });
   return demos;
 };
-var getTopicExamples = (topicPath) => {
-  const examplePaths = glob.sync(`${topicPath}/*`).filter((item) => {
+var getTopicExamples = (topicPath, showAPIDoc) => {
+  const examplePaths = glob.sync(`${topicPath.replace(/\\/g, "/")}/*`).filter((item) => {
     return !item.endsWith(".js");
   });
   return examplePaths.map((item) => {
     const exampleMetaZh = fs.readFileSync(path.resolve(item, "index.zh.md")).toString();
     const exampleMetaEn = fs.readFileSync(path.resolve(item, "index.en.md")).toString();
+    let api = null;
+    if (showAPIDoc) {
+      api = {
+        zh: (0, import_api.getExampleAPI)(path.resolve(item, "API.zh.md")),
+        en: (0, import_api.getExampleAPI)(path.resolve(item, "API.en.md"))
+      };
+    }
     const exampleMetaZhContent = (0, import_front_matter.default)(exampleMetaZh);
     const exampleMetaEnContent = (0, import_front_matter.default)(exampleMetaEn);
     const example = {
@@ -73,31 +81,30 @@ var getTopicExamples = (topicPath) => {
         en: exampleMetaEnContent.attributes.title,
         zh: exampleMetaZhContent.attributes.title
       },
+      api,
       childrenKey: "demos",
       order: exampleMetaZhContent.attributes.order || 0
     };
     return example;
   }).sort((a, b) => a.order - b.order);
 };
-var getExamplesPageTopics = (exampleTopics) => {
-  return exampleTopics.map(
-    ({ id, slug, title, icon }) => {
-      const nid = id || slug;
-      let examples = [];
-      try {
-        examples = getTopicExamples(path.join(examplesBaseDir, nid));
-      } catch (e) {
-        console.warn(e);
-      }
-      return {
-        id: nid,
-        title,
-        icon,
-        examples,
-        childrenKey: "examples"
-      };
+var getExamplesPageTopics = (exampleTopics, showAPIDoc) => {
+  return exampleTopics.map(({ id, slug, title, icon }) => {
+    const nid = id || slug;
+    let examples = [];
+    try {
+      examples = getTopicExamples(path.join(examplesBaseDir, nid), showAPIDoc);
+    } catch (e) {
+      console.warn(e);
     }
-  );
+    return {
+      id: nid,
+      title,
+      icon,
+      examples,
+      childrenKey: "examples"
+    };
+  });
 };
 function getExamplePaths() {
   const exampleTopicPaths = glob.sync(`${examplesBaseDir}/*/*`);

package/dist/plugin/index.js

@@ -106,7 +106,8 @@ export default function ThemeAntVContextWrapper() {
       value={{
         meta: ${JSON.stringify({
         exampleTopics: (0, import_examples.getExamplesPageTopics)(
-          api.config.themeConfig.examples || []
+          api.config.themeConfig.examples || [],
+          api.userConfig.themeConfig.showAPIDoc
         )
       })}
       }}

package/dist/slots/API/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ExampleTopic } from '../../types';
+type APIProps = {
+    isPlayground?: boolean;
+    topic: string;
+    example: string;
+    demo: string;
+    exampleTopics: ExampleTopic[];
+    language?: string;
+};
+/**
+ * API 预览
+ */
+export declare const API: ({ exampleTopics, topic, example, demo, language, }: APIProps) => React.JSX.Element;
+export {};

package/dist/slots/API/index.js

@@ -0,0 +1,202 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import { Collapse, Popover } from 'antd';
+import { get, uniq, sortBy } from 'lodash-es';
+import React from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { useSnapshot } from 'valtio';
+import { store } from "../../model";
+import { CollapsedIcon } from "../../pages/Example/components/CollapsedIcon";
+import { getDemoInfo } from "../CodeRunner/utils";
+import styles from "./index.module.less";
+var Panel = Collapse.Panel;
+var EMPTY = /^\s*$/;
+/**
+ * API 预览
+ */
+export var API = function API(_ref) {
+  var exampleTopics = _ref.exampleTopics,
+    topic = _ref.topic,
+    example = _ref.example,
+    demo = _ref.demo,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'zh' : _ref$language;
+  var state = useSnapshot(store);
+  var demoInfo = getDemoInfo(exampleTopics, topic, example, demo);
+  var APIContent = get(demoInfo, ['api', language]);
+
+  /** 从 MD 中解析出层级数据(eg: #、##、###)作为折叠分组条件 */
+  var findHashTag = function findHashTag(lines) {
+    var tagLines = lines.filter(function (line) {
+      return line.startsWith('#');
+    });
+    var tagReg = /^#+/g;
+    var tagLengths = tagLines.map(function (line) {
+      return line.match(tagReg)[0].length;
+    });
+    return sortBy(uniq(tagLengths));
+  };
+  var getRegex = function getRegex(tagLength) {
+    return new RegExp("^".concat(new Array(tagLength).fill('#').join(''), "\\s+([^\\n]*)"));
+  };
+
+  /** 根据正则将内容切片 */
+  var setIndexTag = function setIndexTag(lines, regex) {
+    var start = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    var result = [];
+    lines.forEach(function (line, index) {
+      if (regex.exec(line)) {
+        var header = regex.exec(line)[1];
+        result.push({
+          header: header,
+          start: index + start,
+          maxEndIndex: start + lines.length
+        });
+      }
+    });
+    return result;
+  };
+
+  /** 从 MD 中解析出嵌套结构, 最多支持 2 层 */
+  var getNestedDOM = function getNestedDOM(lines) {
+    var tags = findHashTag(lines);
+    var result = setIndexTag(lines, getRegex(tags[0]));
+    if (tags.length > 2) {
+      result = result.map(function (item, index) {
+        var _result;
+        var start = item.start;
+        return _objectSpread(_objectSpread({}, item), {}, {
+          children: setIndexTag(lines.slice(start + 1, (_result = result[index + 1]) === null || _result === void 0 ? void 0 : _result.start), getRegex(tags[1]), start + 1)
+        });
+      });
+    }
+    return result;
+  };
+  var MarkdownComponent = function MarkdownComponent(_ref2) {
+    var content = _ref2.content;
+    return /*#__PURE__*/React.createElement(Markdown, {
+      rehypePlugins: [rehypeRaw, remarkGfm],
+      components: {
+        // @ts-expect-error
+        description: function description(props) {
+          return /*#__PURE__*/React.createElement("span", _extends({
+            style: {
+              fontSize: 12,
+              color: '#777'
+            }
+          }, props));
+        }
+      }
+    }, content);
+  };
+
+  /** 将扁平状态的 MD 解析为嵌套结构 */
+  var renderNestedDom = function renderNestedDom(content) {
+    var _result$;
+    if (!content) {
+      return null;
+    }
+    var lines = content.split('\n');
+    var result = getNestedDOM(lines);
+
+    /** 避免无标题的情况内容丢失，内层嵌套的不做处理（不合理） */
+    var minStart = get(result, [0, 'start']);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, minStart > 0 && /*#__PURE__*/React.createElement("div", {
+      className: styles.disorganized
+    }, /*#__PURE__*/React.createElement(MarkdownComponent, {
+      content: lines.slice(0, minStart).join('\n')
+    })), /*#__PURE__*/React.createElement(Collapse, {
+      bordered: false,
+      defaultActiveKey: [(_result$ = result[0]) === null || _result$ === void 0 ? void 0 : _result$.header],
+      ghost: true
+    }, result.map(function (item, index) {
+      var _children$;
+      var start = item.start,
+        header = item.header,
+        _item$children = item.children,
+        children = _item$children === void 0 ? [] : _item$children;
+      var end = index === result.length - 1 ? lines.length : result[index + 1].start;
+      return /*#__PURE__*/React.createElement(Panel, {
+        header: /*#__PURE__*/React.createElement("b", {
+          style: {
+            lineHeight: '22px',
+            fontSize: 16
+          }
+        }, header),
+        key: header
+      }, children.length > 0 ? /*#__PURE__*/React.createElement(Collapse, {
+        bordered: false,
+        defaultActiveKey: [(_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.header],
+        ghost: true
+      }, children.map(function (nestedItem, nestedIndex) {
+        var nestedStart = nestedItem.start,
+          nestedHeader = nestedItem.header,
+          maxEndIndex = nestedItem.maxEndIndex;
+        var nestEnd = nestedIndex === children.length - 1 ? maxEndIndex : children[nestedIndex + 1].start;
+        return /*#__PURE__*/React.createElement(Panel, {
+          header: /*#__PURE__*/React.createElement("b", {
+            style: {
+              lineHeight: '22px',
+              fontSize: 14
+            }
+          }, nestedHeader),
+          key: nestedHeader
+        }, /*#__PURE__*/React.createElement(MarkdownComponent, {
+          content: lines.slice(nestedStart + 1, nestEnd).join('\n')
+        }));
+      })) : /*#__PURE__*/React.createElement(MarkdownComponent, {
+        content: lines.slice(start + 1, end).join('\n')
+      }));
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.api,
+    style: {
+      width: state.showAPI ? state.apiContainerWidth : 24
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement("p", null, "API"), /*#__PURE__*/React.createElement("div", {
+    className: styles.zoom
+  }, /*#__PURE__*/React.createElement(ZoomInOutlined, {
+    onClick: function onClick() {
+      store.apiContainerWidth += 100;
+    }
+  }), /*#__PURE__*/React.createElement(ZoomOutOutlined, {
+    style: {
+      marginLeft: 8
+    },
+    onClick: function onClick() {
+      if (state.apiContainerWidth > 150) {
+        store.apiContainerWidth -= 100;
+      }
+    }
+  })), /*#__PURE__*/React.createElement(Popover, {
+    content: language === 'zh' ? '展示文档' : 'Show docs',
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(CollapsedIcon, {
+    isCollapsed: state.showAPI,
+    onClick: function onClick(show) {
+      store.showAPI = show;
+    },
+    style: {
+      left: 0,
+      top: 0
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, !EMPTY.test(APIContent) ? renderNestedDom(APIContent) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center',
+      padding: 12
+    }
+  }, /*#__PURE__*/React.createElement("h1", null, "404"), /*#__PURE__*/React.createElement("p", null, "Sorry, the API you visited does not exist."))));
+};