@antv/dumi-theme-antv 0.1.0

package/es/builtins/Previewer.less

@@ -0,0 +1,406 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-previewer {
+  background-color: #fff;
+  border: 1px solid @c-border;
+  border-radius: 1px;
+
+  [data-prefers-color=dark] & {
+    background-color: @c-bg-dark;
+    border-color: @c-border-dark;
+  }
+
+  &[data-debug] {
+    margin-top: 32px;
+    border-color: #ffcb00;
+
+    &::before {
+      content: 'DEV ONLY';
+      float: left;
+      margin-left: -1px;
+      margin-top: -18px;
+      padding: 3px 6px;
+      font-size: 12px;
+      line-height: 1;
+      background-color: #ffcb00;
+      color: #735600;
+      text-shadow: 0.5px 0.5px 0 rgba(255, 255, 255, 0.5);
+      border-top-left-radius: 1px;
+      border-top-right-radius: 1px;
+    }
+  }
+
+  &[data-iframe] {
+    .@{prefix}-previewer-browser-nav {
+      padding: 2px 6px;
+      background-color: @c-border;
+
+      &::before {
+        @s-btn: 12px;
+        @s-btn-gap: 8px;
+
+        content: '';
+        display: inline-block;
+        width: @s-btn;
+        height: @s-btn;
+        border-radius: 50%;
+        background-color: #fd6458;
+        box-shadow: (@s-btn + @s-btn-gap) 0 0 #ffbf2b, (@s-btn + @s-btn-gap) * 2 0 0 #24cc3d;
+      }
+    }
+
+    .@{prefix}-previewer-demo > iframe {
+      border: 0;
+      width: 100%;
+      height: 300px;
+    }
+  }
+
+  + .@{prefix}-previewer {
+    margin-top: 32px;
+  }
+
+  &-demo {
+    padding: 40px 24px;
+  }
+
+  &-target {
+    border-color: fade(@c-primary, 50%);
+    box-shadow: 0 0 0 5px fade(@c-primary, 5%);
+
+    [data-prefers-color=dark] & {
+      box-shadow: 0 0 0 5px fade(@c-primary, 30%);
+    }
+  }
+
+  &-desc {
+    > div:last-child {
+      padding: 1.2em 1em 1em;
+      color: @c-text;
+      border-top: 1px solid @c-border;
+
+      [data-prefers-color=dark] & {
+        border-color: @c-border-dark;
+      }
+    }
+
+    .markdown > p:first-child {
+      margin-top: 0;
+    }
+
+    .markdown > p:last-child {
+      margin-bottom: 0;
+    }
+
+    &[data-title] {
+      position: relative;
+
+      > a:first-child {
+        position: absolute;
+        top: 0;
+        left: 1em;
+        margin-left: -4px;
+        padding: 0 4px;
+        color: @c-heading;
+        font-size: inherit;
+        font-weight: 500;
+        background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0)) 100%;
+        transform: translateY(-50%);
+        pointer-events: auto;
+        cursor: pointer;
+
+        [data-prefers-color=dark] & {
+          color: @c-heading-dark;
+          background: linear-gradient(to top, @c-bg-dark, @c-bg-dark 50%, rgba(255, 255, 255, 0)) 100%;
+        }
+      }
+
+      &:empty {
+        padding-top: 0;
+
+        // modify action area style when only has title field
+        + .@{prefix}-previewer-actions {
+          height: 46px;
+          border-top-style: solid;
+        }
+      }
+    }
+  }
+
+  &-actions {
+    display: flex;
+    height: 40px;
+    padding: 0 1em;
+    align-items: center;
+    border-top: 1px dashed @c-border;
+
+    [data-prefers-color=dark] & {
+      border-color: @c-border-dark;
+    }
+
+    > a:not(:last-child),
+    > button:not(:last-child) {
+      margin-right: 8px;
+    }
+
+    > a {
+      display: flex;
+    }
+
+    button {
+      position: relative;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      border: 0;
+      box-sizing: border-box;
+      cursor: pointer;
+      opacity: 0.6;
+      outline: none;
+      transition: opacity 0.2s, background 0.2s;
+
+      [data-prefers-color=dark] & {
+        opacity: 1;
+      }
+
+      // expand click area
+      &::after {
+        content: '';
+        position: absolute;
+        top: -8px;
+        left: -8px;
+        right: -8px;
+        bottom: -8px;
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:active {
+        opacity: 0.9;
+      }
+
+      &:disabled {
+        opacity: 0.2;
+        cursor: not-allowed;
+      }
+
+      &[role='codesandbox'] {
+        background-position: -18px 0;
+      }
+
+      &[role='codepen'] {
+        background-position: -36px 0;
+      }
+
+      &[role='source'] {
+        background-position: -72px 0;
+      }
+
+      &[role='change-jsx'] {
+        background-position: -90px 0;
+      }
+
+      &[role='change-tsx'] {
+        background-position: -108px 0;
+      }
+
+      &[role='open-demo'] {
+        background-position: -126px 0;
+      }
+
+      &[role='motions'] {
+        background-position: -162px 0;
+      }
+
+      &[role='sketch-component'] {
+        background-position: -182px 0;
+      }
+
+      &[role='sketch-group'] {
+        background-position: -200px 0;
+      }
+
+      &[role='copy'][data-status='ready'] {
+        background-position: -54px 0;
+      }
+
+      &[role='copy'][data-status='copied'] {
+        pointer-events: none;
+        background-position: -54px -16px;
+      }
+
+      &[role='refresh'] {
+        background-position-x: -144px;
+      }
+    }
+
+    // split action buttons by a blank node
+    > span {
+      flex: 1;
+      display: inline-block;
+    }
+  }
+
+  &-source {
+    border-top: 1px dashed @c-border;
+
+    [data-prefers-color=dark] & {
+      border-color: @c-border-dark;
+    }
+
+    &-tab {
+      border-top: 1px dashed @c-border;
+
+      [data-prefers-color=dark] & {
+        border-color: @c-border-dark;
+      }
+
+      .@{prefix}-tabs-tab-btn {
+        position: relative;
+        padding-left: 32px;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          margin-right: 4px;
+          display: inline-block;
+          box-sizing: border-box;
+        }
+
+        &::before {
+          left: 16px;
+          top: 50%;
+          margin-top: -6px;
+          width: 10px;
+          height: 12px;
+          border: 1px solid @c-secondary;
+        }
+
+        &::after {
+          top: 50%;
+          left: 23px;
+          margin-top: -7px;
+          width: 4px;
+          height: 4px;
+          background: #fff;
+          border-bottom: 1px solid @c-secondary;
+          transform: rotate(45deg);
+          [data-prefers-color=dark] & {
+            background: @c-bg-dark;
+          }
+        }
+      }
+    }
+  }
+}
+
+.@{prefix}-tabs {
+  overflow: hidden;
+
+  &.@{prefix}-tabs-top {
+    flex-direction: column;
+
+    .@{prefix}-tabs-ink-bar {
+      bottom: 0;
+    }
+  }
+
+  &-nav {
+    display: flex;
+
+    &-wrap {
+      display: flex;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &&-ping-left {
+        box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.1) inset;
+      }
+
+      &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    &-list {
+      position: relative;
+      display: flex;
+      transition: transform 0.2s;
+    }
+
+    &-more {
+      height: 100%;
+      cursor: pointer;
+      background: none;
+      border: 0;
+      transition: box-shadow 0.2s;
+    }
+  }
+
+  &-tab {
+    display: flex;
+
+    &-btn {
+      padding: 0 16px;
+      font-size: 14px;
+      line-height: 36px;
+      border: 0;
+      outline: none;
+      background: transparent;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      &:hover {
+        color: @c-primary;
+      }
+    }
+  }
+
+  &-ink-bar {
+    position: absolute;
+    height: 2px;
+    background: @c-primary;
+    transition: left 0.2s, width 0.2s;
+    pointer-events: none;
+
+    [data-prefers-color=dark] & {
+      background: @c-primary-dark;
+    }
+  }
+
+  &-dropdown {
+    position: absolute;
+    background: #fff;
+    border: 1px solid @c-border;
+    max-height: 200px;
+    overflow: auto;
+
+    > ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      > li {
+        padding: 4px 12px;
+        font-size: 14px;
+        cursor: pointer;
+
+        &:hover {
+          color: @c-primary;
+        }
+
+        &:not(:last-child) {
+          border-bottom: 1px dashed @c-border;
+        }
+      }
+    }
+
+    &-hidden {
+      display: none;
+    }
+  }
+}

package/es/builtins/SourceCode.js

@@ -0,0 +1,72 @@
+function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useCopy } from 'dumi/theme';
+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
+ */
+
+var SIMILAR_DSL = {
+  acss: 'css',
+  axml: 'xml'
+};
+export default (function (_ref) {
+  var code = _ref.code,
+      lang = _ref.lang,
+      _ref$showCopy = _ref.showCopy,
+      showCopy = _ref$showCopy === void 0 ? true : _ref$showCopy;
+
+  var _useCopy = useCopy(),
+      _useCopy2 = _slicedToArray(_useCopy, 2),
+      copyCode = _useCopy2[0],
+      copyStatus = _useCopy2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-code-block"
+  }, /*#__PURE__*/React.createElement(Highlight, _extends({}, defaultProps, {
+    code: code,
+    language: SIMILAR_DSL[lang] || lang,
+    theme: undefined
+  }), function (_ref2) {
+    var className = _ref2.className,
+        style = _ref2.style,
+        tokens = _ref2.tokens,
+        getLineProps = _ref2.getLineProps,
+        getTokenProps = _ref2.getTokenProps;
+    return /*#__PURE__*/React.createElement("pre", {
+      className: className,
+      style: style
+    }, showCopy && /*#__PURE__*/React.createElement("button", {
+      className: "__dumi-default-icon __dumi-default-code-block-copy-btn",
+      "data-status": copyStatus,
+      onClick: function onClick() {
+        return copyCode(code);
+      }
+    }), tokens.map(function (line, i) {
+      return /*#__PURE__*/React.createElement("div", getLineProps({
+        line: line,
+        key: i
+      }), line.map(function (token, key) {
+        return /*#__PURE__*/React.createElement("span", getTokenProps({
+          token: token,
+          key: key
+        }));
+      }));
+    }));
+  }));
+});

package/es/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/es/builtins/Table.js

@@ -0,0 +1,56 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useRef, useState } from 'react';
+import throttle from 'lodash.throttle';
+import './Table.less';
+
+var Table = function Table(_ref) {
+  var children = _ref.children;
+  var container = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      leftFolded = _useState2[0],
+      setLeftFolded = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      rightFolded = _useState4[0],
+      setRightFolded = _useState4[1]; // watch content scroll to render folded shadow
+
+
+  useEffect(function () {
+    var elm = container.current;
+    var handler = throttle(function () {
+      setLeftFolded(elm.scrollLeft > 0);
+      setRightFolded(elm.scrollLeft < elm.scrollWidth - elm.offsetWidth);
+    }, 100);
+    handler();
+    elm.addEventListener('scroll', handler);
+    window.addEventListener('resize', handler);
+    return function () {
+      elm.removeEventListener('scroll', handler);
+      window.removeEventListener('resize', handler);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-table"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-table-content",
+    ref: container,
+    "data-left-folded": leftFolded || undefined,
+    "data-right-folded": rightFolded || undefined
+  }, /*#__PURE__*/React.createElement("table", null, children)));
+};
+
+export default Table;

package/es/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;
+    }
+  }
+}