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

package/src/builtins/SourceCode.less

@@ -1,103 +0,0 @@
-@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

@@ -1,55 +0,0 @@
-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

@@ -1,43 +0,0 @@
-.__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

@@ -1,42 +0,0 @@
-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

@@ -1,159 +0,0 @@
-@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

@@ -1,130 +0,0 @@
-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

@@ -1,121 +0,0 @@
-@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;
-  }
-}