@antv/dumi-theme-antv 0.1.0

package/src/builtins/SourceCode.less

@@ -0,0 +1,103 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-code-block {
+  position: relative;
+  font-size: 14px;
+  background-color: @c-light-bg;
+
+  [data-prefers-color=dark] & {
+    color: @c-text-dark;
+    background: #262626;
+  }
+
+  & + &,
+  & + table {
+    margin-top: 16px;
+  }
+
+  > pre[class*='language-'] {
+    margin: 0;
+    background: transparent;
+
+    .token-line:not(:last-child) .plain:empty {
+      display: inline-block;
+      min-height: 1em;
+    }
+  }
+
+  &-copy-btn {
+    position: absolute;
+    top: 1.1em;
+    right: 1em;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s, background 0.2s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:active {
+      opacity: 0.9;
+    }
+
+    &[data-status='ready'] {
+      background-position: -54px 0;
+    }
+
+    &[data-status='copied'] {
+      opacity: 1;
+      pointer-events: none;
+      background-position: -54px -16px;
+    }
+  }
+
+  &:not(:hover) &-copy-btn {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+code[class*="language-"], pre[class*="language-"] {
+  &::selection, & ::selection{
+    color: inherit;
+  }
+}
+
+[data-prefers-color=dark] {
+  code[class*="language-"], pre[class*="language-"] {
+    color: @c-text-dark;
+    text-shadow: 0 1px #000;
+
+    &::selection, & ::selection{
+      background-color: #364a63;
+    }
+  }
+  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
+    background: transparent;
+  }
+  .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
+    color: #f92672;
+  }
+  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
+    color: #a6e22e;
+  }
+  .token.atrule, .token.attr-value, .token.keyword {
+    color: #e6db74;
+  }
+  .token.punctuation {
+    color: @c-text-dark;
+  }
+  .token.keyword {
+    color: #66d9ef;
+  }
+  .token.boolean, .token.number {
+    color: #ae81ff;
+  }
+}

package/src/builtins/SourceCode.tsx

@@ -0,0 +1,55 @@
+import { useCopy } from 'dumi/theme';
+import type { Language } from 'prism-react-renderer';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import 'prismjs/themes/prism.css';
+import React from 'react';
+import './SourceCode.less';
+
+/**
+ * define DSL which can be highlighted as similar language
+ */
+const SIMILAR_DSL = {
+  acss: 'css',
+  axml: 'xml',
+};
+
+export interface ICodeBlockProps {
+  code: string;
+  lang: Language;
+  showCopy?: boolean;
+}
+
+export default ({ code, lang, showCopy = true }: ICodeBlockProps) => {
+  const [copyCode, copyStatus] = useCopy();
+
+  return (
+    <div className="__dumi-default-code-block">
+      {/** @ts-ignore */}
+      <Highlight
+        {...defaultProps}
+        code={code}
+        language={SIMILAR_DSL[lang] || lang}
+        theme={undefined}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={className} style={style}>
+            {showCopy && (
+              <button
+                className="__dumi-default-icon __dumi-default-code-block-copy-btn"
+                data-status={copyStatus}
+                onClick={() => copyCode(code)}
+              />
+            )}
+            {tokens.map((line, i) => (
+              <div {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  );
+};

package/src/builtins/Table.less

@@ -0,0 +1,43 @@
+.__dumi-default-table {
+  margin: 16px 0 32px;
+  transform: translate(0, 0);
+
+  &-content {
+    overflow: auto;
+
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      position: fixed;
+      z-index: 1;
+      top: 0;
+      bottom: 0;
+      width: 6px;
+      pointer-events: none;
+    }
+
+    &[data-left-folded]::before {
+      left: 0;
+      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+
+      [data-prefers-color=dark] & {
+        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+      }
+    }
+
+    &[data-right-folded]::after {
+      right: 0;
+      background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+
+      [data-prefers-color=dark] & {
+        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+      }
+    }
+
+    > table > thead > tr > th,
+    > table > tr > th {
+      white-space: nowrap;
+    }
+  }
+}

package/src/builtins/Table.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef, useState } from 'react';
+import throttle from 'lodash.throttle';
+import './Table.less';
+
+const Table: React.FC = ({ children }) => {
+  const container = useRef<HTMLDivElement>();
+  const [leftFolded, setLeftFolded] = useState(false);
+  const [rightFolded, setRightFolded] = useState(false);
+
+  // watch content scroll to render folded shadow
+  useEffect(() => {
+    const elm = container.current;
+    const handler = throttle(() => {
+      setLeftFolded(elm.scrollLeft > 0);
+      setRightFolded(elm.scrollLeft < elm.scrollWidth - elm.offsetWidth);
+    }, 100);
+
+    handler();
+    elm.addEventListener('scroll', handler);
+    window.addEventListener('resize', handler);
+
+    return () => {
+      elm.removeEventListener('scroll', handler);
+      window.removeEventListener('resize', handler);
+    }
+  }, []);
+
+  return (
+    <div className="__dumi-default-table">
+      <div
+        className="__dumi-default-table-content"
+        ref={container}
+        data-left-folded={leftFolded || undefined}
+        data-right-folded={rightFolded || undefined}
+      >
+        <table>{children}</table>
+      </div>
+    </div>
+  );
+};
+
+export default Table;

package/src/builtins/Tree.less

@@ -0,0 +1,159 @@
+@import (reference) '../style/variables.less';
+@treePrefixCls: ~'rc-tree';
+@treeNodePrefixCls: ~'@{treePrefixCls}-treenode';
+
+.__dumi-site-tree {
+  padding: 16px;
+  background-color: @c-light-bg;
+  border: 1px solid @c-border;
+  border-radius: 2px;
+
+  [data-prefers-color='dark'] & {
+    color: @c-text-dark;
+    background-color: @c-light-bg-dark;
+    border-color: @c-border-dark;
+  }
+
+  small {
+    padding-left: 24px;
+    color: @c-secondary;
+    font-size: 14px;
+
+    [data-prefers-color='dark'] & {
+      color: @c-secondary-dark;
+    }
+
+    &::before {
+      content: '# ';
+    }
+  }
+
+  &.@{treePrefixCls} {
+    transition: all 0.3s;
+    line-height: 1.5715;
+    list-style: none;
+    font-size: 14px;
+
+    .@{treeNodePrefixCls} {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      padding-bottom: 4px;
+      &:before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 4px;
+        left: 0;
+        transition: background 0.3s;
+        content: '';
+      }
+      &:hover:before {
+        background: #f5f5f5;
+
+        [data-prefers-color='dark'] & {
+          background: @c-light-bg-dark;
+        }
+      }
+      > * {
+        z-index: 1;
+      }
+    }
+
+    .@{treeNodePrefixCls} span.@{treePrefixCls}-switcher {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      margin-right: 2px;
+      line-height: 24px;
+      background: transparent;
+      cursor: pointer;
+    }
+
+    .@{treeNodePrefixCls} .@{treePrefixCls}-node-content-wrapper {
+      flex: auto;
+      min-height: 24px;
+      margin: 0;
+      padding: 0 4px;
+      line-height: 24px;
+      cursor: pointer;
+      .@{treePrefixCls}-iconEle {
+        margin-right: 6px;
+        vertical-align: 0;
+      }
+    }
+
+    &.@{treePrefixCls}-show-line {
+      .@{treePrefixCls}-indent {
+        display: inline-block;
+        height: 0;
+        vertical-align: bottom;
+
+        &-unit {
+          position: relative;
+          display: inline-block;
+          width: 24px;
+          height: 24px;
+
+          &::before {
+            position: absolute;
+            top: 0;
+            right: 12px;
+            bottom: -4px;
+            border-right: 1px solid #d9d9d9;
+            content: '';
+          }
+
+          &-end::before {
+            display: none;
+          }
+        }
+      }
+
+      .tree-switcher-leaf-line {
+        position: relative;
+        z-index: 1;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        &::before {
+          position: absolute;
+          top: 0;
+          bottom: -4px;
+          margin-left: -1px;
+          border-left: 1px solid #d9d9d9;
+          content: ' ';
+        }
+
+        &::after {
+          position: absolute;
+          top: 0;
+          bottom: 10px;
+          width: 12px;
+          margin-left: -1px;
+          border-bottom: 1px solid #d9d9d9;
+          content: ' ';
+        }
+      }
+
+      .@{treeNodePrefixCls}-leaf-last {
+        .tree-switcher-leaf-line::before {
+          height: 14px;
+        }
+      }
+    }
+  }
+
+  &-icon {
+    width: 16px;
+    color: @c-text;
+    vertical-align: -0.225em;
+
+    [data-prefers-color='dark'] & {
+      color: @c-text-dark;
+    }
+  }
+}

package/src/builtins/Tree.tsx

@@ -0,0 +1,130 @@
+import type { ReactNode, ComponentProps } from 'react';
+import React, { useEffect, useState, createRef } from 'react';
+import type { TreeProps } from 'rc-tree';
+import Tree from 'rc-tree';
+import type { EventDataNode } from 'rc-tree/lib/interface';
+import type { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
+import './Tree.less';
+
+const FileOutlined = <svg xmlns="http://www.w3.org/2000/svg" className="__dumi-site-tree-icon icon-file" fill="currentcolor" viewBox="0 0 1024 1024"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"/></svg>;
+const FolderOpenOutlined = <svg xmlns="http://www.w3.org/2000/svg" className="__dumi-site-tree-icon icon-folder-open" fill="currentcolor" viewBox="0 0 1024 1024"><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"/></svg>;
+const FolderOutlined = <svg xmlns="http://www.w3.org/2000/svg" className="__dumi-site-tree-icon icon-folder" fill="currentcolor" viewBox="0 0 1024 1024"><path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"/></svg>;
+const MinusSquareOutlined = <svg xmlns="http://www.w3.org/2000/svg" className="__dumi-site-tree-icon icon-minus-square" fill="currentcolor" viewBox="0 0 1024 1024"><path d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"/><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"/></svg>;
+const PlusSquareOutlined = <svg xmlns="http://www.w3.org/2000/svg" className="__dumi-site-tree-icon icon-plus-square" fill="currentcolor" viewBox="0 0 1024 1024"><path d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"/><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"/></svg>;
+
+function getTreeFromList(nodes: ReactNode, prefix = '') {
+  const data: TreeProps['treeData'] = [];
+
+  [].concat(nodes).forEach((node, i) => {
+    const key = `${prefix ? `${prefix}-` : ''}${i}`;
+
+    switch (node.type) {
+      case 'ul':
+        const parent = data[data.length - 1]?.children || data;
+        const ulLeafs = getTreeFromList(node.props.children || [], key);
+
+        parent.push(...ulLeafs);
+        break;
+
+      case 'li':
+        const liLeafs = getTreeFromList(node.props.children, key);
+
+        data.push({
+          title: [].concat(node.props.children).filter(child => child.type !== 'ul'),
+          key,
+          children: liLeafs,
+          isLeaf: !liLeafs.length,
+        });
+        break;
+
+      default:
+    }
+  });
+
+  return data;
+}
+
+const useListToTree = (nodes: ReactNode) => {
+  const [tree, setTree] = useState(getTreeFromList(nodes));
+
+  useEffect(() => {
+    setTree(getTreeFromList(nodes));
+  }, [nodes]);
+
+  return tree;
+};
+
+const getIcon = (props) => {
+  const { isLeaf, expanded } = props;
+  if (isLeaf) {
+    return FileOutlined;
+  }
+  return expanded ? FolderOpenOutlined : FolderOutlined;
+}
+
+const renderSwitcherIcon = (props) => {
+  const { isLeaf, expanded } = props;
+  if (isLeaf) {
+    return <span className={`tree-switcher-leaf-line`} />;
+  }
+  return expanded ? (
+    <span className={`tree-switcher-line-icon`}>{MinusSquareOutlined}</span>
+  ) : (
+    <span className={`tree-switcher-line-icon`}>{PlusSquareOutlined}</span>
+  );
+}
+
+// ================== Collapse Motion ==================
+const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
+const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
+const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
+const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
+  (event as TransitionEvent).propertyName === 'height';
+
+const collapseMotion: CSSMotionProps = {
+  motionName: 'ant-motion-collapse',
+  onAppearStart: getCollapsedHeight,
+  onEnterStart: getCollapsedHeight,
+  onAppearActive: getRealHeight,
+  onEnterActive: getRealHeight,
+  onLeaveStart: getCurrentHeight,
+  onLeaveActive: getCollapsedHeight,
+  onAppearEnd: skipOpacityTransition,
+  onEnterEnd: skipOpacityTransition,
+  onLeaveEnd: skipOpacityTransition,
+  motionDeadline: 500,
+};
+
+export default (props: ComponentProps<'div'>) => {
+  const data = useListToTree(props.children);
+
+  const treeRef = createRef<Tree>();
+
+  const onClick = (event: React.MouseEvent<HTMLElement>, node: EventDataNode) =>{
+    const { isLeaf } = node;
+
+    if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
+      return;
+    }
+    treeRef.current!.onNodeExpand(event as any, node);
+  };
+
+  return (
+    <Tree
+      className="__dumi-site-tree"
+      icon={getIcon}
+      ref={treeRef}
+      itemHeight={20}
+      showLine={true}
+      selectable={false}
+      motion={{
+        ...collapseMotion,
+        motionAppear: false
+      }}
+      onClick={onClick}
+      treeData={[{ key: '0', title: props.title || '<root>', children: data }]}
+      defaultExpandAll
+      switcherIcon={renderSwitcherIcon}
+    />
+  );
+};

package/src/components/Dark.less

@@ -0,0 +1,121 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-dark {
+  position: fixed;
+  right: 20px;
+  top: 16px;
+
+  [data-mode="doc"] & {
+    position: relative;
+    top: 0;
+    right: 0;
+    display: inline-block;
+  }
+
+  @media @mobile {
+    position: relative;
+    top: 6px;
+    right: auto;
+    display: flex;
+    justify-content: center;
+
+    .@{prefix}-navbar & {
+      display: none;
+    }
+  }
+
+  &-sun,
+  &-moon,
+  &-auto {
+    position: relative;
+    border-radius: 50%;
+    outline: none;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      transition: all 0.3s linear;
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  &-sun,
+  &-moon,
+  &-auto {
+    border: 1px solid @c-btn-border;
+    background-color: @c-light-bg;
+
+    svg {
+      fill: @c-text;
+      [data-prefers-color=dark] & {
+        fill: @c-text-dark;
+      }
+    }
+
+    [data-prefers-color=dark] & {
+      border-color: @c-btn-border-dark;
+      background-color: @c-bg-dark;
+    }
+  }
+
+  &-switch {
+    [data-mode=doc] & {
+      display: flex;
+      button + button {
+        margin-left: 4px;
+      }
+    }
+
+    @media @mobile {
+      display: flex;
+      button + button {
+        margin-left: 10px;
+      }
+    }
+
+    &-active {
+      .@{prefix}-menu & {
+        border-color: @c-primary;
+        [data-prefers-color=dark] & {
+          border-color: @c-primary-dark;
+        }
+      }
+    }
+
+    [data-mode=doc][data-mobile-show=true] & {
+      margin-bottom: 10px;
+    }
+
+    button {
+      z-index: 102;
+    }
+
+    &-list {
+      animation: dropDown 0.2s linear 0s 1;
+
+      button {
+        z-index: 101;
+        margin-top: 4px;
+      }
+
+      [data-mode="doc"] & {
+        position: absolute;
+      }
+    }
+  }
+}
+
+@keyframes dropDown {
+  0% {
+    margin-top: -100%;
+  }
+  100% {
+    margin-top: 0;
+  }
+}