@oceanbase/design 0.1.0

package/lib/Highlight/index.js

@@ -0,0 +1,265 @@
+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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Highlight/index.tsx
+var Highlight_exports = {};
+__export(Highlight_exports, {
+  THEME_DARK: () => THEME_DARK,
+  THEME_LIGHT: () => THEME_LIGHT,
+  default: () => Highlight_default,
+  languageMap: () => languageMap,
+  renderHightlight: () => renderHightlight
+});
+module.exports = __toCommonJS(Highlight_exports);
+var import_react = __toESM(require("react"));
+var import_core = __toESM(require("highlight.js/lib/core"));
+var import_javascript = __toESM(require("./languages/javascript"));
+var import_javascript2 = __toESM(require("./languages/javascript"));
+var import_typescript = __toESM(require("./languages/typescript"));
+var import_typescript2 = __toESM(require("./languages/typescript"));
+var import_bash = __toESM(require("./languages/bash"));
+var import_css = __toESM(require("./languages/css"));
+var import_groovy = __toESM(require("./languages/groovy"));
+var import_java = __toESM(require("./languages/java"));
+var import_python = __toESM(require("./languages/python"));
+var import_json = __toESM(require("./languages/json"));
+var import_cpp = __toESM(require("./languages/cpp"));
+var import_http = __toESM(require("./languages/http"));
+var import_markdown = __toESM(require("./languages/markdown"));
+var import_nginx = __toESM(require("./languages/nginx"));
+var import_ruby = __toESM(require("./languages/ruby"));
+var import_sql = __toESM(require("./languages/sql"));
+var import_xml = __toESM(require("./languages/xml"));
+var import_dockerfile = __toESM(require("./languages/dockerfile"));
+var import_go = __toESM(require("./languages/go"));
+var import_yaml = __toESM(require("./languages/yaml"));
+var import_solidity = __toESM(require("./languages/solidity"));
+var import_util = require("../_util");
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_classnames = __toESM(require("classnames"));
+var import_JsonView = __toESM(require("./JsonView"));
+var import_DiffView = __toESM(require("./DiffView"));
+var import_HighlightCell = __toESM(require("./HighlightCell"));
+var import_react_copy_to_clipboard = __toESM(require("react-copy-to-clipboard"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
+var import_StaticFunction = require("../StaticFunction");
+var import_index = require("./index.less");
+var languageMap = {
+  javascript: import_javascript.default,
+  typescript: import_typescript2.default,
+  css: import_css.default,
+  groovy: import_groovy.default,
+  java: import_java.default,
+  python: import_python.default,
+  bash: import_bash.default,
+  json: import_json.default,
+  cpp: import_cpp.default,
+  http: import_http.default,
+  markdown: import_markdown.default,
+  nginx: import_nginx.default,
+  ruby: import_ruby.default,
+  sql: import_sql.default,
+  xml: import_xml.default,
+  dockerfile: import_dockerfile.default,
+  go: import_go.default,
+  yaml: import_yaml.default,
+  solidity: import_solidity.default,
+  tsx: import_typescript.default,
+  jsx: import_javascript2.default
+};
+var THEME_DARK = "dark";
+var THEME_LIGHT = "light";
+var tuple = (...args) => args;
+var ThemeTypes = tuple(THEME_DARK, THEME_LIGHT);
+var supportedLanguages = Object.keys(languageMap);
+var renderHightlight = (language, content) => {
+  const result = language ? import_core.default.highlight(language, content || "") : import_core.default.highlightAuto(content);
+  return result;
+};
+var Highlight = (props) => {
+  const {
+    children,
+    style: customStyle,
+    height,
+    className,
+    innerHTML,
+    lineNumber = false,
+    copyable = true,
+    theme = THEME_LIGHT,
+    onCopyChange = () => {
+    },
+    language
+  } = props;
+  const prefixCls = (0, import_util.getPrefix)("highlight");
+  const themeClass = theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`;
+  const codeRef = import_react.default.createRef();
+  const [codeBlock, setCodeBlock] = import_react.default.useState();
+  (0, import_react.useEffect)(() => {
+    if (language && languageMap[language]) {
+      import_core.default.registerLanguage(language, languageMap[language]);
+    } else {
+      Object.keys(languageMap).forEach((lan) => {
+        import_core.default.registerLanguage(lan, languageMap[lan]);
+      });
+    }
+  }, [language]);
+  const highlightCode = () => {
+    if (!children) {
+      return;
+    }
+    const { value } = renderHightlight(language, children);
+    const sourceData = value.split(/\r?\n/);
+    const rowList = sourceData.map((rowValue, index) => ({
+      value: rowValue,
+      index: index + 1
+    }));
+    setCodeBlock(
+      rowList.map((src, index) => {
+        return /* @__PURE__ */ import_react.default.createElement("tr", { key: index }, /* @__PURE__ */ import_react.default.createElement(
+          import_HighlightCell.default,
+          {
+            lineNumber,
+            width: "100%",
+            data: src,
+            theme,
+            prefixCls
+          }
+        ));
+      })
+    );
+  };
+  (0, import_react.useEffect)(() => {
+    highlightCode();
+  }, [children, innerHTML, theme, language, lineNumber]);
+  (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
+  const customProps = {
+    ref: codeRef,
+    className: `${className}`,
+    style: customStyle,
+    tabIndex: "-1"
+  };
+  if (innerHTML) {
+    customProps.dangerouslySetInnerHTML = { __html: children };
+    return /* @__PURE__ */ import_react.default.createElement("div", { ...customProps });
+  }
+  const CopyButton = () => {
+    const [copyId, setCopyId] = (0, import_react.useState)();
+    (0, import_react.useEffect)(() => {
+      return () => {
+        window.clearTimeout(copyId);
+      };
+    });
+    const [copied, setCopied] = (0, import_react.useState)(false);
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_react_copy_to_clipboard.default,
+      {
+        text: children && children.length ? children : "",
+        onCopy: (value) => {
+          onCopyChange(value);
+          setCopied(true);
+          import_antd.message.success("Copied");
+          const tempCopyId = window.setTimeout(() => {
+            setCopied(false);
+          }, 2e3);
+          setCopyId(tempCopyId);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          disabled: copied,
+          className: (0, import_classnames.default)(`${prefixCls}-copy`),
+          style: {
+            background: `${theme === THEME_DARK ? `#2b303b` : import_StaticFunction.token.colorBgLayout}`
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_icons.CopyOutlined,
+          {
+            className: (0, import_classnames.default)(`${prefixCls}-copy-icon`, { scoll: copied }),
+            style: { color: `${theme === THEME_DARK ? import_StaticFunction.token.colorBgLayout : `#2b303b`}` }
+          }
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_icons.CheckOutlined,
+          {
+            className: (0, import_classnames.default)(`${prefixCls}-copy-icon`),
+            style: { color: "rgb(63,177,99)" }
+          }
+        )
+      )
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "pre",
+    {
+      ...customProps,
+      style: {
+        ...customStyle,
+        position: "relative"
+      },
+      className: (0, import_classnames.default)(`${prefixCls}`, className, themeClass)
+    },
+    copyable && /* @__PURE__ */ import_react.default.createElement(CopyButton, null),
+    /* @__PURE__ */ import_react.default.createElement(
+      "table",
+      {
+        style: {
+          padding: "0",
+          height
+        },
+        className: (0, import_classnames.default)(
+          `${theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`}`
+        )
+      },
+      /* @__PURE__ */ import_react.default.createElement("tbody", null, codeBlock)
+    )
+  ));
+};
+var HighlightWrapper = (props) => {
+  const { language, children } = props;
+  if (language === "json" && children && typeof children === "object" && !import_react.default.isValidElement(children)) {
+    return /* @__PURE__ */ import_react.default.createElement(import_JsonView.default, { ...props, json: children });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(Highlight, { ...props });
+};
+HighlightWrapper.Diff = import_DiffView.default;
+var Highlight_default = (0, import_LocaleWrapper.default)({
+  componentName: "HighlightWrapper",
+  defaultLocale: import_zh_CN.default
+})(HighlightWrapper);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  THEME_DARK,
+  THEME_LIGHT,
+  languageMap,
+  renderHightlight
+});

package/lib/Highlight/index.less

@@ -0,0 +1,381 @@
+@import '../variable.less';
+
+@prefix: ob-highlight;
+
+.@{prefix} {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 14px;
+  line-height: 1.5714285714285714;
+  list-style: none;
+  border-radius: ~'@{borderRadius}px';
+
+  &:not(:hover) .@{prefix}-copy {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  @keyframes copy-button-trans {
+    0% {
+      opacity: 0.8;
+      margin-block-start: 0;
+    }
+    10% {
+      opacity: 0.8;
+      margin-block-start: -16px;
+    }
+    90% {
+      opacity: 0.8;
+      margin-block-start: -16px;
+    }
+    100% {
+      opacity: 0.8;
+      margin-block-start: 0;
+    }
+  }
+
+  .@{prefix}-json-view {
+    padding: 0;
+
+    .react-json-view {
+      padding: 0.5em;
+      overflow: auto;
+
+      .icon-container svg {
+        transform: translateY(5px);
+      }
+    }
+  }
+
+  &.@{prefix}-light {
+    .react-json-view {
+      background: @colorBgLayout;
+    }
+
+    .@{prefix}-light-index {
+      border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    display: block;
+    padding: 0.5em;
+    overflow-x: auto;
+    color: #383a42;
+    background: @colorBgLayout;
+
+    .hljs-comment,
+    .hljs-quote {
+      color: #a0a1a7;
+      font-style: italic;
+    }
+
+    .hljs-doctag,
+    .hljs-keyword,
+    .hljs-formula {
+      color: #a626a4;
+    }
+
+    .hljs-section,
+    .hljs-name,
+    .hljs-selector-tag,
+    .hljs-deletion,
+    .hljs-subst {
+      color: #e45649;
+    }
+
+    .hljs-literal {
+      color: #0184bb;
+    }
+
+    .hljs-string,
+    .hljs-regexp,
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-meta-string {
+      color: #50a14f;
+    }
+
+    .hljs-built_in,
+    .hljs-class,
+    .hljs-title {
+      color: #c18401;
+    }
+
+    .hljs-attr,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-selector-class,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo,
+    .hljs-number {
+      color: #986801;
+    }
+
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-link,
+    .hljs-meta,
+    .hljs-selector-id,
+    .hljs-title {
+      color: #4078f2;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: bold;
+    }
+
+    .hljs-link {
+      text-decoration: underline;
+    }
+  }
+
+  .@{prefix}-index {
+    box-sizing: border-box;
+    width: 40px;
+    min-width: 40px;
+    color: #aaa;
+    text-align: end;
+    background: rgba(255, 255, 255, 0.03);
+    user-select: none;
+    padding-block: 2px;
+    padding-inline: 8px;
+  }
+  .@{prefix}-content {
+    padding-block: 2px;
+    padding-inline: 8px;
+  }
+  .@{prefix}-copy {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+    inset-block-start: 16px;
+    inset-inline-end: 16px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  &:not(:hover) &.@{prefix}-copy {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .@{prefix}-copy-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+
+    &.scoll {
+      animation: copy-button-trans 2s;
+      animation-play-state: running;
+    }
+  }
+
+  .@{prefix}-dark {
+    display: block;
+    padding: 0.5em;
+    overflow-x: auto;
+    color: #c0c5ce;
+    background: #2b303b;
+    border-radius: ~'@{borderRadius}px';
+
+    &.@{prefix}-index {
+      border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    /* Ocean Comment */
+    .hljs-comment,
+    .hljs-quote {
+      color: #65737e;
+    }
+
+    /* Ocean Red */
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class,
+    .hljs-regexp,
+    .hljs-deletion {
+      color: #bf616a;
+    }
+
+    /* Ocean Orange */
+    .hljs-number,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params,
+    .hljs-meta,
+    .hljs-link {
+      color: #d08770;
+    }
+
+    /* Ocean Yellow */
+    .hljs-attribute {
+      color: #ebcb8b;
+    }
+
+    /* Ocean Green */
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-addition {
+      color: #a3be8c;
+    }
+
+    /* Ocean Blue */
+    .hljs-title,
+    .hljs-section {
+      color: #8fa1b3;
+    }
+
+    /* Ocean Purple */
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #b48ead;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: bold;
+    }
+  }
+
+  &.@{prefix}-diff {
+    overflow-y: auto;
+
+    // &.@{prefix} {
+    //   padding: 0;
+    // }
+
+    table {
+      width: 100%;
+      font-family: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace';
+      border-collapse: collapse;
+      border-spacing: 0;
+
+      td {
+        vertical-align: top;
+      }
+    }
+
+    .@{prefix}-diff-index,
+    .@{prefix}-diff-mark,
+    .@{prefix}-diff-code {
+      padding-block: 2px;
+      padding-inline: 8px;
+    }
+
+    .@{prefix}-diff-index,
+    .@{prefix}-diff-mark {
+      user-select: none;
+    }
+
+    .@{prefix}-diff-index {
+      width: 40px;
+      min-width: 40px;
+      text-align: end;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .@{prefix}-diff-mark {
+      width: 10px;
+      min-width: 10px;
+      text-align: center;
+    }
+
+    .@{prefix}-diff-code {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    // ======================= Theme =======================
+    // Light
+    &.@{prefix}-light {
+      .@{prefix}-diff-index,
+      .@{prefix}-diff-mark {
+        color: #aaa;
+      }
+
+      .@{prefix}-diff-index {
+        background: rgba(0, 0, 0, 0.01);
+        border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
+        border-inline-start: 1px solid rgba(0, 0, 0, 0.1);
+
+        &:first-child {
+          border-inline-start: none;
+        }
+      }
+
+      // &.@{prefix}-diff-cell {
+      .@{prefix}-diff-cell-add {
+        background: #e7f1e2;
+        // .mix(##fafafa; 90)
+        // .toHexString();
+      }
+      .@{prefix}-diff-cell-remove {
+        background: #f6e3e4;
+        // .mix(##fafafa; 90)
+        // .toHexString();
+      }
+      .@{prefix}-diff-cell-empty {
+        background: rgba(0, 0, 0, 0.03);
+      }
+      // }
+    }
+
+    // Dark
+    &.@{prefix}-dark {
+      .@{prefix}-diff-index,
+      .@{prefix}-diff-mark {
+        color: #aaa;
+      }
+
+      .@{prefix}-diff-index {
+        background: rgba(255, 255, 255, 0.01);
+        border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
+        border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:first-child {
+          border-inline-start: none;
+        }
+      }
+
+      .@{prefix}-diff-cell-add {
+        background: #305c29;
+        // .mix(#2b303b; 60)
+        // .toHexString();
+      }
+      .@{prefix}-diff-cell-remove {
+        background: #6d2431;
+        // .mix(#2b303b; 60)
+        // .toHexString();
+      }
+
+      .@{prefix}-diff-cell-empty {
+        background: rgba(255, 255, 255, 0.03);
+      }
+    }
+  }
+}

package/lib/Highlight/languages/bash.js

@@ -0,0 +1,38 @@
+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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Highlight/languages/bash.js
+var bash_exports = {};
+__export(bash_exports, {
+  default: () => bash_default
+});
+module.exports = __toCommonJS(bash_exports);
+var import_bash = __toESM(require("highlight.js/lib/languages/bash"));
+var bash_default = import_bash.default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});