feat:add dumi-theme-graphin packages

.umirc.js

@@ -2,15 +2,16 @@ import { join } from 'path';
 const isProduction = process.env.NODE_ENV === 'production';
 
 export default {
-  title: 'Graphin 2.X Docs',
+  title: 'Graphin 2.X',
   mode: 'site',
   base: '/graphin-docs/',
   publicPath: '/graphin-docs/',
+  logo: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
   resolve: {
     includes: [
       'packages/graphin/docs/',
-      'packages/graphin-components/src/',
-      'packages/graphin-icons/src',
+      // 'packages/graphin-components/src/',
+      // 'packages/graphin-icons/src',
 
       // 'packages/graphin-graphscope/docs/',
       /** local develop */

package.json

@@ -29,6 +29,7 @@
     "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags"
   },
   "devDependencies": {
+    "dumi-theme-graphin": "1.0.0",
     "@types/jest": "^25.2.3",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.3",

packages/dumi-theme-graphin/.fatherrc.ts

@@ -0,0 +1,4 @@
+export default {
+  cjs: false,
+  esm: 'babel',
+};

packages/dumi-theme-graphin/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "dumi-theme-graphin",
+  "version": "1.0.0",
+  "description": "The official graphin theme of dumi",
+  "files": [
+    "es",
+    "src"
+  ],
+  "sideEffects": [
+    "./**/*.less"
+  ],
+  "scripts": {
+    "start": "father build --watch"
+  },
+  "homepage": "http://github.com/antvis/graphin",
+  "authors": [],
+  "dependencies": {
+    "@antv/gatsby-theme-antv": "^1.0.7",
+    "prism-react-renderer": "^1.1.1",
+    "prismjs": "^1.21.0",
+    "rc-tabs": "^11.7.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.3",
+    "@testing-library/react": "^10.4.8",
+    "dumi": "1.1.3",
+    "father": "^2.30.1",
+    "react-test-renderer": "^16.13.1"
+  },
+  "peerDependencies": {
+    "@umijs/preset-dumi": "1.x",
+    "react": "^16.13.1"
+  },
+  "license": "MIT"
+}

packages/dumi-theme-graphin/src/builtins/API.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import type { IApiComponentProps } from 'dumi/theme';
+import { context, useApiData, AnchorLink } from 'dumi/theme';
+
+const LOCALE_TEXTS = {
+  'zh-CN': {
+    name: '属性名',
+    description: '描述',
+    type: '类型',
+    default: '默认值',
+    required: '(必选)',
+  },
+  'en-US': {
+    name: 'Name',
+    description: 'Description',
+    type: 'Type',
+    default: 'Default',
+    required: '(required)',
+  },
+};
+
+export default ({ identifier, export: expt }: IApiComponentProps) => {
+  const data = useApiData(identifier);
+  const { locale } = useContext(context);
+  const texts = /^zh|cn$/i.test(locale) ? LOCALE_TEXTS['zh-CN'] : LOCALE_TEXTS['en-US'];
+
+  return (
+    <>
+      {data && (
+        <table style={{ marginTop: 24 }}>
+          <thead>
+            <tr>
+              <th>{texts.name}</th>
+              <th>{texts.description}</th>
+              <th>{texts.type}</th>
+              <th>{texts.default}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data[expt].map((row) => (
+              <tr key={row.identifier}>
+                <td>{row.identifier}</td>
+                <td>{row.description || '--'}</td>
+                <td>
+                  <code>{row.type}</code>
+                </td>
+                <td>
+                  <code>{row.default || (row.required && texts.required) || '--'}</code>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </>
+  );
+};

packages/dumi-theme-graphin/src/builtins/Alert.less

@@ -0,0 +1,56 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-alert {
+  @s-border-right: 3px;
+
+  position: relative;
+  margin: 24px 0;
+  padding: 10px 20px;
+  color: @c-text;
+  font-size: 14px;
+  line-height: 20px;
+  border-left: 0;
+  background: #ffffff;
+  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.06);
+  border-radius: 1px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: @s-border-right;
+    border-radius: 1px;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:not([type]),
+  &[type='warning'] {
+    &::after {
+      background: #ffc121;
+    }
+  }
+
+  &[type='info'] {
+    &::after {
+      background: #69b9ff;
+    }
+  }
+
+  &[type='success'] {
+    &::after {
+      background: #8cd225;
+    }
+  }
+
+  &[type='error'] {
+    &::after {
+      background: #ff4646;
+    }
+  }
+}

packages/dumi-theme-graphin/src/builtins/Alert.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Alert.less';
+
+export default (props: any) => <div className="__dumi-default-alert" {...props} />;

packages/dumi-theme-graphin/src/builtins/Badge.less

@@ -0,0 +1,31 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 7px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 20px;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.06);
+  border-radius: 1px;
+  vertical-align: top;
+
+  &:not([type]),
+  &[type='info'] {
+    background: #4569d4;
+  }
+
+  &[type='warning'] {
+    background: #ffc121;
+  }
+
+  &[type='success'] {
+    background: #8cd225;
+  }
+
+  &[type='error'] {
+    background: #ff4646;
+  }
+}

packages/dumi-theme-graphin/src/builtins/Badge.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Badge.less';
+
+export default (props: any) => <span className="__dumi-default-badge" {...props} />;

packages/dumi-theme-graphin/src/builtins/Example.less

@@ -0,0 +1,47 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-example-wrapper {
+  padding-top: 16px;
+  height: calc(100vh - @s-nav-height - 2px);
+
+  @media @mobile {
+    padding-top: 16px;
+  }
+
+  &-toolbar {
+    display: flex;
+    color: @c-heading;
+    font-size: 16px;
+    font-weight: 500;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    border-bottom: 1px solid @c-border;
+
+    button,
+    a {
+      display: inline-block;
+      margin: 6px 0 6px 12px;
+      width: 16px;
+      height: 16px;
+      font-weight: 400;
+      border: 0;
+      outline: none;
+      vertical-align: middle;
+      cursor: pointer;
+
+      &:first-child {
+        background-position-x: -144px;
+      }
+
+      &:nth-child(2) {
+        background-position-x: -126px;
+      }
+    }
+  }
+
+  iframe {
+    width: 100%;
+    min-height: 100%;
+    border: 0;
+  }
+}

packages/dumi-theme-graphin/src/builtins/Example.tsx

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect, useState } from 'react';
+import './Example.less';
+
+export default (props: { route: any }) => {
+  const elm = useRef<HTMLIFrameElement>();
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    setHeight(elm.current.contentWindow.document.documentElement.scrollHeight);
+  }, [elm]);
+
+  return (
+    props.route.meta.examplePath && (
+      <div className="__dumi-default-example-wrapper">
+        <div className="__dumi-default-example-wrapper-toolbar">
+          {props.route.meta.description || props.route.meta.title}
+          <span>
+            <button
+              className="__dumi-default-icon"
+              onClick={() => elm.current.contentWindow.location.reload()}
+            />
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={props.route.meta.examplePath}
+              className="__dumi-default-icon"
+            />
+          </span>
+        </div>
+        <iframe src={props.route.meta.examplePath} ref={elm} style={{ height }} title="dumi" />
+      </div>
+    )
+  );
+};