@antv/dumi-theme-antv 0.2.2 → 0.3.0-beta.1

package/dist/plugin/examples.js

@@ -0,0 +1,83 @@
+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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin/examples.ts
+var examples_exports = {};
+__export(examples_exports, {
+  getExamplesPageTopics: () => getExamplesPageTopics
+});
+module.exports = __toCommonJS(examples_exports);
+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 examplesBaseDir = path.resolve(process.cwd(), "examples");
+var getExampleDemos = (exampleDir) => {
+  const demoMetaJSON = fs.readFileSync(path.resolve(exampleDir, "demo", "meta.json")).toString();
+  const demoMeta = JSON.parse(demoMetaJSON).demos;
+  const demos = demoMeta.map((item) => {
+    const { title, screenshot, filename, new: isNew } = item;
+    const id = filename.replace(/\.tsx?$/, "");
+    return {
+      id,
+      screenshot,
+      source: fs.readFileSync(path.resolve(exampleDir, "demo", filename)).toString(),
+      title,
+      filename,
+      isNew: !!isNew
+    };
+  });
+  return demos;
+};
+var getTopicExamples = (topicPath) => {
+  const examplePaths = glob.sync(`${topicPath}/*`).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();
+    const exampleMetaZhContent = (0, import_front_matter.default)(exampleMetaZh);
+    const exampleMetaEnContent = (0, import_front_matter.default)(exampleMetaEn);
+    const example = {
+      demos: getExampleDemos(item),
+      icon: "",
+      id: item.split("/").pop(),
+      title: {
+        en: exampleMetaEnContent.attributes.title,
+        zh: exampleMetaZhContent.attributes.title
+      }
+    };
+    return example;
+  });
+};
+var getExamplesPageTopics = () => {
+  const exampleTopicPaths = glob.sync(`${examplesBaseDir}/*`);
+  return exampleTopicPaths.map((topicPath) => {
+    const topicMetaPath = path.resolve(topicPath, "meta.js");
+    const topicMeta = require(topicMetaPath);
+    topicMeta.examples = getTopicExamples(topicPath);
+    return topicMeta;
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getExamplesPageTopics
+});

package/dist/plugin/index.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from 'dumi';
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/plugin/index.js

@@ -0,0 +1,103 @@
+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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin/index.ts
+var plugin_exports = {};
+__export(plugin_exports, {
+  default: () => plugin_default
+});
+module.exports = __toCommonJS(plugin_exports);
+var import_examples = require("./examples");
+function generateMetaJSON() {
+  const res = (0, import_examples.getExamplesPageTopics)();
+  return {
+    exampleTopics: res
+  };
+}
+var plugin_default = (api) => {
+  api.describe({ key: `dumi-theme:${require("../../package.json").name}` });
+  const pages = [
+    {
+      id: "dumi-theme-antv-example-list-zh",
+      path: "/examples/",
+      file: require.resolve("../pages/Examples/index.tsx")
+    },
+    {
+      id: "dumi-theme-antv-example-list-lang",
+      path: "/:language/examples/",
+      file: require.resolve("../pages/Examples/index.tsx")
+    },
+    {
+      id: "dumi-theme-antv-single-example-zh",
+      path: "/examples/:topic/:example",
+      file: require.resolve("../pages/Example/index.tsx")
+    },
+    {
+      id: "dumi-theme-antv-single-example-lang",
+      path: "/:language/examples/:topic/:example",
+      file: require.resolve("../pages/Example/index.tsx")
+    }
+  ];
+  const contextFilePath = require.resolve("../context.ts");
+  api.onGenerateFiles(() => {
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: "theme-antv/ContextWrapper.tsx",
+      content: `
+import { useOutlet } from 'dumi';
+import { ThemeAntVContext } from '${contextFilePath}';
+
+export default function ThemeAntVContextWrapper() {
+  const outlet = useOutlet();
+
+  return (
+    <ThemeAntVContext.Provider
+      value={{
+        meta: ${JSON.stringify(generateMetaJSON())}
+      }}
+    >
+      {outlet}
+    </ThemeAntVContext.Provider>
+  );
+}
+      `
+    });
+  });
+  api.addLayouts(() => ({
+    id: "theme-antv-context",
+    file: `${api.paths.absTmpPath}/theme-antv/ContextWrapper.tsx`
+  }));
+  api.modifyRoutes((routes) => {
+    pages.forEach((page) => {
+      routes[page.id] = {
+        id: page.id,
+        path: page.path,
+        absPath: page.path,
+        file: page.file,
+        parentId: "DocLayout"
+      };
+    });
+    routes["404"].file = require.resolve("../pages/404.tsx");
+    return routes;
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/slots/404.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NotFound: () => JSX.Element;

package/{es/antv/404/index.js → dist/slots/404.js}

@@ -1,12 +1,9 @@
 import React from 'react';
 import { HomeOutlined } from '@ant-design/icons';
 import { Result, Button } from 'antd';
-import { Link } from 'dumi/theme';
-
-var NotFoundPage = function NotFoundPage() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Result // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  , {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { Link } from 'dumi';
+export var NotFound = function NotFound() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Result, {
     status: '404',
     title: "404",
     subTitle: "Sorry, the page you visited does not exist.",
@@ -16,6 +13,4 @@ var NotFoundPage = function NotFoundPage() {
       type: "primary"
     }, /*#__PURE__*/React.createElement(HomeOutlined, null), "Back Home"))
   }));
-};
-
-export default NotFoundPage;
+};

package/{es/antv/Cases/Cases.d.ts → dist/slots/Cases/index.d.ts}

@@ -4,8 +4,8 @@ import 'slick-carousel/slick/slick-theme.css';
 interface Case {
     logo?: string;
     isAppLogo?: boolean;
-    title: string;
-    description: string;
+    title: IC;
+    description: IC;
     link?: string;
     image: string;
 }
@@ -14,5 +14,5 @@ interface CasesProps {
     style?: React.CSSProperties;
     className?: string;
 }
-declare const Cases: React.FC<CasesProps>;
-export default Cases;
+export declare const Cases: React.FC<CasesProps>;
+export {};

package/{es/antv/Cases/Cases.js → dist/slots/Cases/index.js}

@@ -1,28 +1,32 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+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); }
+
 import React from 'react';
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
-import { Link } from 'react-router-dom';
+import { Link } from 'dumi';
 import Slider from 'react-slick';
-import classNames from 'classnames';
+import cx from 'classnames';
 import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css'; // @ts-ignore
-
-import styles from './Cases.module.less';
-
-var Cases = function Cases(_ref) {
+import 'slick-carousel/slick/slick-theme.css';
+import { useT, ic } from "../hooks";
+import styles from "./index.module.less";
+export var Cases = function Cases(_ref) {
   var _ref$cases = _ref.cases,
       cases = _ref$cases === void 0 ? [] : _ref$cases,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
       className = _ref.className;
-  var slider;
+  var slider = React.useRef(null);
 
   var clickPrevious = function clickPrevious() {
-    slider.slickPrev();
+    var _slider$current;
+
+    (_slider$current = slider.current) === null || _slider$current === void 0 ? void 0 : _slider$current.slickPrev();
   };
 
   var clickNext = function clickNext() {
-    slider.slickNext();
+    var _slider$current2;
+
+    (_slider$current2 = slider.current) === null || _slider$current2 === void 0 ? void 0 : _slider$current2.slickNext();
   };
 
   var getCases = function getCases() {
@@ -64,17 +68,17 @@ var Cases = function Cases(_ref) {
         href: app.link,
         target: "_blank",
         rel: "noopener noreferrer"
-      }, "\u67E5\u770B\u8BE6\u60C5") : /*#__PURE__*/React.createElement(Link, {
+      }, useT('查看详情')) : /*#__PURE__*/React.createElement(Link, {
         className: styles.detail,
         to: app.link ? app.link : ''
-      }, "\u67E5\u770B\u8BE6\u60C5"));
+      }, useT('查看详情')));
       return /*#__PURE__*/React.createElement("div", {
         className: styles.appWrapper,
-        key: app.title
+        key: ic(app.title)
       }, /*#__PURE__*/React.createElement("img", {
         className: styles.appTeaser,
         src: app.image,
-        alt: app.title
+        alt: ic(app.title)
       }), /*#__PURE__*/React.createElement("div", {
         className: styles.appLeft
       }, /*#__PURE__*/React.createElement("div", {
@@ -89,9 +93,9 @@ var Cases = function Cases(_ref) {
         }
       }), /*#__PURE__*/React.createElement("p", {
         className: styles.appTitle
-      }, app.title), /*#__PURE__*/React.createElement("p", {
+      }, ic(app.title)), /*#__PURE__*/React.createElement("p", {
         className: styles.appDescription
-      }, app.description), linkDiv), buttons));
+      }, ic(app.description)), linkDiv), buttons));
     });
     return children;
   };
@@ -109,14 +113,10 @@ var Cases = function Cases(_ref) {
     fade: true
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.wrapper, className),
+    className: cx(styles.wrapper, className),
     style: style
-  }, /*#__PURE__*/React.createElement(Slider, Object.assign({}, sliderSettings, {
+  }, /*#__PURE__*/React.createElement(Slider, _extends({}, sliderSettings, {
     className: styles.slider,
-    ref: function ref(c) {
-      slider = c;
-    }
+    ref: slider
   }), getCases()));
-};
-
-export default Cases;
+};

package/{src/antv/Cases/Cases.module.less → dist/slots/Cases/index.module.less}

@@ -1,4 +1,5 @@
-@import '../mixins';
+@import '../_.less';
+
 .wrapper {
   height: 667px;
   margin: auto;
@@ -6,9 +7,11 @@
   padding: 0;
   overflow: hidden;
   background: rgba(250, 251, 252, 1);
+
   .slider {
     .container1440;
   }
+
   .appWrapper {
     margin-left: 5%;
     margin-bottom: 5%;
@@ -16,17 +19,21 @@
     height: 100%;
     overflow-y: hidden;
     display: flex;
+
     .appLeft {
       margin-left: 3.06%;
-      width: 35%;
+      width: 27%;
       margin-top: 8%;
       height: 613px;
+
       .appContent {
         height: fit-content;
         position: relative;
+
         .appLogo {
-          height: 80px;
+          width: 80px;
         }
+
         .appTitle {
           font-size: 1.2857em;
           font-weight: 500;
@@ -36,50 +43,60 @@
           color: rgba(0, 0, 0, 1);
           user-select: text;
         }
+
         .appDescription {
           color: rgba(105, 123, 140, 0.6);
           font-size: 1em;
           margin: 16px 0 0 0;
           user-select: text;
         }
+
         .detailWrapper {
           margin: 20px 0 0 0;
+
           .detail {
             color: @primary-color;
             font-size: 1em;
           }
         }
       }
+
       .buttons {
         cursor: pointer;
         position: absolute;
         display: flex;
         bottom: 30%;
         height: 100px;
+
         .controlButton {
           width: 47px;
           height: 47px;
           line-height: 47px;
           border: 1px solid #a3b1bf;
           transition: all 0.3s;
+
           &:hover {
             border: 1px solid #ced4d9;
             fill: #000000;
           }
+
           &:hover :only-child {
             color: #ced4d9;
           }
+
           .controlButtonIcon {
             width: 100%;
             color: #a3b1bf;
             transition: all 0.3s;
           }
         }
+
         .nextButton {
           width: 47px;
           margin-left: -1px;
           background-image: url('https://gw.alipayobjects.com/zos/basement_prod/27ce6e21-bbb6-4490-8326-43483ac39e0b.svg');
           background-size: 100% 100%;
+
           &:hover {
             background-image: url('https://gw.alipayobjects.com/zos/basement_prod/4d1f0d0a-4e56-4f21-a9aa-06b2f8c3e18e.svg');
           }
@@ -88,15 +105,16 @@
     }
   }
 }
+
 .appTeaser {
   position: absolute;
   height: 667px;
-  left: 50%;
   right: 0;
 }
 
 .slider {
   height: 100%;
+
   :global {
     .slick-dots {
       display: none;
@@ -118,6 +136,7 @@
       }
     }
   }
+
   .appTeaser {
     position: absolute;
     width: 857px;
@@ -129,42 +148,51 @@
   .wrapper {
     width: 100%;
     height: fit-content;
+
     .slider {
       width: 100%;
       max-width: 100%;
       margin-left: 0;
       margin-right: 0;
     }
+
     .appWrapper {
       width: 100%;
       padding-bottom: 150px;
       margin-left: 0;
       flex-direction: column;
       text-align: center;
+
       .appLeft {
         height: 286px;
         margin-left: 4.27%;
         width: 91.47%;
         margin-top: 64px;
+
         .appContent {
           width: 90%;
           margin-left: 5%;
+
           .appLogo {
             position: absolute;
             top: -36px;
             left: 50%;
             transform: translateX(-40px);
           }
+
           .appTitle {
             padding-top: 76px;
           }
+
           .detailWrapper {
             margin-top: 40px;
+
             .detail {
               font-size: 1em;
             }
           }
         }
+
         .buttons {
           display: none;
           position: absolute;
@@ -175,6 +203,7 @@
           width: 92%;
         }
       }
+
       .appTeaser {
         left: 0;
         margin-top: 60px;
@@ -189,15 +218,17 @@
 
   .slider {
     height: 100%;
+
     :global {
       .slick-dots {
         display: block;
         bottom: 100px;
       }
+
       .slick-dots li.slick-active button:before {
         opacity: 1;
         color: #1890ff;
       }
     }
   }
-}
+}

package/dist/slots/CodeEditor/Toolbar.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+export declare enum EDITOR_TABS {
+    JAVASCRIPT = "JavaScript",
+    DATA = "Data"
+}
+declare type ToolbarProps = {
+    /**
+     * 源码文件，用于传入到三方代码平台
+     */
+    sourceCode: string;
+    /**
+     * 生成代码文件名后缀，用于传入到三方代码平台
+     */
+    fileExtension: string;
+    /**
+     * 项目标题，用于传入到三方代码平台
+     */
+    title: {
+        zh?: string;
+        en?: string;
+    } | string;
+    location?: Location;
+    /**
+     * playground 的一些配置项
+     */
+    playground: {
+        container?: string;
+        playgroundDidMount?: string;
+        playgroundWillUnmount?: string;
+        dependencies?: {
+            [key: string]: string;
+        };
+        devDependencies?: {
+            [key: string]: string;
+        };
+        htmlCodeTemplate?: string;
+        json?: {
+            [key: string]: any;
+        };
+    };
+    /**
+     * 全屏状态，用于显示不同的 icon
+     */
+    isFullScreen?: boolean;
+    /**
+     * Tabs 数据
+     */
+    editorTabs: EDITOR_TABS[];
+    /**
+     * 当前编辑哪个 tab
+     */
+    currentEditorTab: EDITOR_TABS;
+    /**
+     * 切换 tab
+     */
+    onEditorTabChange: (tab: EDITOR_TABS) => void;
+    /**
+     * 进入/退出全屏
+     */
+    onToggleFullscreen?: null | (() => void);
+    /**
+     * 执行代码
+     */
+    onExecuteCode: () => void;
+};
+export declare const Toolbar: React.FC<ToolbarProps>;
+export {};