docusaurus-theme-openapi-docs 1.0.4 → 1.1.0

package/src/theme/SchemaTabs/index.js

@@ -0,0 +1,258 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React, {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import { duplicates } from "@docusaurus/theme-common";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import clsx from "clsx";
+
+import styles from "./styles.module.css"; // A very rough duck type, but good enough to guard against mistakes while
+
+const {
+  useScrollPositionBlocker,
+  useTabGroupChoice,
+} = require("@docusaurus/theme-common/internal");
+
+// allowing customization
+
+function isTabItem(comp) {
+  return typeof comp.props.value !== "undefined";
+}
+
+function SchemaTabsComponent(props) {
+  const {
+    lazy,
+    block,
+    defaultValue: defaultValueProp,
+    values: valuesProp,
+    groupId,
+    className,
+  } = props;
+  const children = Children.map(props.children, (child) => {
+    if (isValidElement(child) && isTabItem(child)) {
+      return child;
+    } // child.type.name will give non-sensical values in prod because of
+    // minification, but we assume it won't throw in prod.
+
+    throw new Error(
+      `Docusaurus error: Bad <Tabs> child <${
+        // @ts-expect-error: guarding against unexpected cases
+        typeof child.type === "string" ? child.type : child.type.name
+      }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`
+    );
+  });
+  const values =
+    valuesProp ?? // We only pick keys that we recognize. MDX would inject some keys by default
+    children.map(({ props: { value, label, attributes } }) => ({
+      value,
+      label,
+      attributes,
+    }));
+  const dup = duplicates(values, (a, b) => a.value === b.value);
+
+  if (dup.length > 0) {
+    throw new Error(
+      `Docusaurus error: Duplicate values "${dup
+        .map((a) => a.value)
+        .join(", ")}" found in <Tabs>. Every value needs to be unique.`
+    );
+  } // When defaultValueProp is null, don't show a default tab
+
+  const defaultValue =
+    defaultValueProp === null
+      ? defaultValueProp
+      : defaultValueProp ??
+        children.find((child) => child.props.default)?.props.value ??
+        children[0]?.props.value;
+
+  if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
+    throw new Error(
+      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
+        .map((a) => a.value)
+        .join(
+          ", "
+        )}. If you intend to show no default tab, use defaultValue={null} instead.`
+    );
+  }
+
+  const { tabGroupChoices, setTabGroupChoices } = useTabGroupChoice();
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const tabRefs = [];
+  const { blockElementScrollPositionUntilNextRender } =
+    useScrollPositionBlocker();
+
+  if (groupId != null) {
+    const relevantTabGroupChoice = tabGroupChoices[groupId];
+
+    if (
+      relevantTabGroupChoice != null &&
+      relevantTabGroupChoice !== selectedValue &&
+      values.some((value) => value.value === relevantTabGroupChoice)
+    ) {
+      setSelectedValue(relevantTabGroupChoice);
+    }
+  }
+
+  const handleTabChange = (event) => {
+    const newTab = event.currentTarget;
+    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabValue = values[newTabIndex].value;
+
+    if (newTabValue !== selectedValue) {
+      blockElementScrollPositionUntilNextRender(newTab);
+      setSelectedValue(newTabValue);
+
+      if (groupId != null) {
+        setTabGroupChoices(groupId, newTabValue);
+      }
+    }
+  };
+
+  const handleKeydown = (event) => {
+    let focusElement = null;
+
+    switch (event.key) {
+      case "ArrowRight": {
+        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
+        focusElement = tabRefs[nextTab] || tabRefs[0];
+        break;
+      }
+
+      case "ArrowLeft": {
+        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
+        focusElement = tabRefs[prevTab] || tabRefs[tabRefs.length - 1];
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    focusElement?.focus();
+  };
+
+  const tabItemListContainerRef = useRef(null);
+  const [showTabArrows, setShowTabArrows] = useState(false);
+
+  useEffect(() => {
+    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
+    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+
+    if (tabOffsetWidth < tabScrollWidth) {
+      setShowTabArrows(true);
+    }
+  }, []);
+
+  const handleRightClick = () => {
+    tabItemListContainerRef.current.scrollLeft += 90;
+  };
+
+  const handleLeftClick = () => {
+    tabItemListContainerRef.current.scrollLeft -= 90;
+  };
+
+  return (
+    <div className="tabs__container">
+      <div className={styles.schemaTabsTopSection}>
+        <div className={styles.schemaTabsContainer}>
+          {showTabArrows && (
+            <button
+              className={clsx(styles.tabArrow, styles.tabArrowLeft)}
+              onClick={handleLeftClick}
+            />
+          )}
+          <ul
+            ref={tabItemListContainerRef}
+            role="tablist"
+            aria-orientation="horizontal"
+            className={clsx(
+              styles.schemaTabsListContainer,
+              "tabs",
+              {
+                "tabs--block": block,
+              },
+              className
+            )}
+          >
+            {values.map(({ value, label, attributes }) => {
+              return (
+                <li
+                  role="tab"
+                  tabIndex={selectedValue === value ? 0 : -1}
+                  aria-selected={selectedValue === value}
+                  key={value}
+                  ref={(tabControl) => tabRefs.push(tabControl)}
+                  onKeyDown={handleKeydown}
+                  onFocus={handleTabChange}
+                  onClick={handleTabChange}
+                  {...attributes}
+                  className={clsx(
+                    "tabs__item",
+                    styles.tabItem,
+                    attributes?.className,
+                    {
+                      [styles.schemaTabActive]: selectedValue === value,
+                    }
+                  )}
+                >
+                  <span className={styles.schemaTabLabel}>
+                    {label ?? value}
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+          {showTabArrows && (
+            <button
+              className={clsx(styles.tabArrow, styles.tabArrowRight)}
+              onClick={handleRightClick}
+            />
+          )}
+        </div>
+      </div>
+      <hr />
+      {lazy ? (
+        cloneElement(
+          children.filter(
+            (tabItem) => tabItem.props.value === selectedValue
+          )[0],
+          {
+            className: clsx("margin-vert--md", styles.schemaTabsContainer),
+          }
+        )
+      ) : (
+        <div className={clsx("margin-vert--md", styles.schemaTabsContainer)}>
+          {children.map((tabItem, i) =>
+            cloneElement(tabItem, {
+              key: i,
+              hidden: tabItem.props.value !== selectedValue,
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function SchemaTabs(props) {
+  const isBrowser = useIsBrowser();
+  return (
+    <SchemaTabsComponent // Remount tabs after hydration
+      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
+      key={String(isBrowser)}
+      {...props}
+    />
+  );
+}

package/src/theme/SchemaTabs/styles.module.css

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tabItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.8rem;
+  margin-top: 0 !important;
+  margin-right: 0.5rem;
+  border: 1px solid var(--openapi-code-dim-dark);
+  border-radius: var(--ifm-global-radius);
+  color: var(--openapi-code-dim-dark);
+  font-size: 12px;
+}
+
+.tabItem:hover {
+  color: var(--ifm-color-emphasis-500) !important;
+}
+
+.tabItem:last-child {
+  margin-right: 0 !important;
+}
+
+/* Open API Schema Tabs */
+.schemaTabsTopSection {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.schemaTabsTopSection + hr {
+  display: none;
+}
+
+.schemaTabsContainer {
+  display: flex;
+  align-items: center;
+  max-width: 390px;
+  padding-left: 3px;
+  overflow: hidden;
+}
+
+.schemaTabsListContainer {
+  padding: 0 0.25rem;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+}
+
+.schemaTabsListContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.tabItem.schemaTabActive {
+  border: 1px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.schemaTabLabel {
+  white-space: nowrap;
+}
+
+.schemaTabsContainer {
+  max-width: 600px;
+}
+
+/* Tab Arrows */
+.tabArrow {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  padding: 0 0.75rem;
+  border: none;
+  min-width: 1.25rem;
+  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+}
+
+.tabArrow:hover {
+  cursor: pointer;
+}
+
+.tabArrowLeft {
+  transform: rotate(270deg);
+}
+
+.tabArrowRight {
+  transform: rotate(90deg);
+}
+
+@media screen and (max-width: 500px) {
+  .schemaTabsTopSection {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .schemaTabsContainer {
+    width: 100%;
+  }
+
+  .tabItem {
+    height: 100%;
+  }
+}

package/lib/theme/ApiDemoPanel/VSCode/index.js

@@ -1,252 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-var _react2 = _interopRequireDefault(require("@monaco-editor/react"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-function VSCode({
-  value,
-  language,
-  onChange
-}) {
-  var _ref;
-
-  const [focused, setFocused] = (0, _react.useState)(false);
-  const isDarkTheme = (_ref = (0, _themeCommon.useColorMode)().colorMode === "dark") !== null && _ref !== void 0 ? _ref : false;
-
-  function handleEditorWillMount(monaco) {
-    const styles = getComputedStyle(document.documentElement);
-
-    function getColor(property) {
-      // Weird chrome bug, returns " #ffffff " instead of "#ffffff", see: https://github.com/cloud-annotations/docusaurus-openapi/issues/144
-      const color = styles.getPropertyValue(property).trim();
-      const isColorRgb = color.includes("rgb");
-      const isColorHexShortened = color.length === 4; // Convert "rgb(r, g, b)" to color hex code
-
-      const getColorHex = color => {
-        const rgbValues = color.substring(4).split(")")[0].split(",");
-        const [r, g, b] = rgbValues;
-
-        const colorToHex = rgb => {
-          const hexadecimal = parseInt(rgb).toString(16);
-          return hexadecimal.length === 1 ? "0" + hexadecimal : hexadecimal;
-        };
-
-        return "#" + colorToHex(r) + colorToHex(g) + colorToHex(b);
-      }; // Extend shortened hex codes ie. "#aaa" => "#aaaaaa" or "#xyz" => "#xxyyzz"
-
-
-      const getFullColorHex = color => {
-        let fullColorHex = "#";
-        const hexValues = color.slice(1);
-
-        for (let i = 0; i < hexValues.length; i++) {
-          for (let j = 0; j < 2; j++) {
-            fullColorHex += hexValues[i];
-          }
-        }
-
-        return fullColorHex.toLowerCase();
-      };
-
-      if (isColorRgb) {
-        return getColorHex(color);
-      } else if (isColorHexShortened) {
-        return getFullColorHex(color);
-      } else {
-        return color;
-      }
-    }
-
-    const LIGHT_BACKGROUND = getColor("--openapi-monaco-background-color-light");
-    const LIGHT_BRIGHT = getColor("--openapi-code-bright-light");
-    const LIGHT_DIM = getColor("--openapi-code-dim-light");
-    const LIGHT_BLUE = getColor("--openapi-code-blue-light");
-    const LIGHT_GREEN = getColor("--openapi-code-green-light");
-    const LIGHT_SELECT = getColor("--openapi-code-select-light");
-    const DARK_BACKGROUND = getColor("--openapi-monaco-background-color-dark");
-    const DARK_BRIGHT = getColor("--openapi-code-bright-dark");
-    const DARK_DIM = getColor("--openapi-code-dim-dark");
-    const DARK_BLUE = getColor("--openapi-code-blue-dark");
-    const DARK_GREEN = getColor("--openapi-code-green-dark");
-    const DARK_SELECT = getColor("--openapi-code-select-dark");
-    monaco.editor.defineTheme("OpenApiDark", {
-      base: "vs-dark",
-      inherit: true,
-      rules: [{
-        token: "",
-        foreground: DARK_BRIGHT
-      }, {
-        token: "string.key.json",
-        foreground: DARK_BRIGHT
-      }, {
-        token: "string.value.json",
-        foreground: DARK_GREEN
-      }, {
-        token: "number",
-        foreground: DARK_BLUE
-      }, {
-        token: "keyword.json",
-        foreground: DARK_BLUE
-      }, {
-        token: "delimiter",
-        foreground: DARK_DIM
-      }, {
-        token: "tag.xml",
-        foreground: DARK_DIM
-      }, {
-        token: "metatag.xml",
-        foreground: DARK_DIM
-      }, {
-        token: "attribute.name.xml",
-        foreground: DARK_BRIGHT
-      }, {
-        token: "attribute.value.xml",
-        foreground: DARK_GREEN
-      }, {
-        token: "metatag.xml",
-        foreground: DARK_BLUE
-      }, {
-        token: "tag.xml",
-        foreground: DARK_BLUE
-      }],
-      colors: {
-        "editor.background": DARK_BACKGROUND,
-        "editor.lineHighlightBackground": DARK_BACKGROUND,
-        "editorBracketMatch.background": DARK_BACKGROUND,
-        "editorBracketMatch.border": DARK_BACKGROUND,
-        "editor.selectionBackground": DARK_SELECT
-      }
-    });
-    monaco.editor.defineTheme("OpenApiLight", {
-      base: "vs",
-      inherit: true,
-      rules: [{
-        token: "",
-        foreground: LIGHT_BRIGHT
-      }, {
-        token: "string.key.json",
-        foreground: LIGHT_BRIGHT
-      }, {
-        token: "string.value.json",
-        foreground: LIGHT_GREEN
-      }, {
-        token: "number",
-        foreground: LIGHT_BLUE
-      }, {
-        token: "keyword.json",
-        foreground: LIGHT_BLUE
-      }, {
-        token: "delimiter",
-        foreground: LIGHT_DIM
-      }, {
-        token: "tag.xml",
-        foreground: LIGHT_DIM
-      }, {
-        token: "metatag.xml",
-        foreground: LIGHT_DIM
-      }, {
-        token: "attribute.name.xml",
-        foreground: LIGHT_BRIGHT
-      }, {
-        token: "attribute.value.xml",
-        foreground: LIGHT_GREEN
-      }, {
-        token: "metatag.xml",
-        foreground: LIGHT_BLUE
-      }, {
-        token: "tag.xml",
-        foreground: LIGHT_BLUE
-      }],
-      colors: {
-        "editor.background": LIGHT_BACKGROUND,
-        "editor.lineHighlightBackground": LIGHT_BACKGROUND,
-        "editorBracketMatch.background": LIGHT_BACKGROUND,
-        "editorBracketMatch.border": LIGHT_BACKGROUND,
-        "editor.selectionBackground": LIGHT_SELECT
-      }
-    });
-  }
-
-  return <div className={focused ? _stylesModule.default.monacoFocus : _stylesModule.default.monaco}>
-      <_react2.default value={value} language={language} theme={isDarkTheme ? "OpenApiDark" : "OpenApiLight"} beforeMount={handleEditorWillMount} options={{
-      lineNumbers: "off",
-      scrollBeyondLastLine: false,
-      scrollBeyondLastColumn: 3,
-      readOnly: false,
-      minimap: {
-        enabled: false
-      },
-      fontFamily: "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
-      fontSize: 14.4,
-      overviewRulerLanes: 0,
-      folding: false,
-      lineDecorationsWidth: 0,
-      contextmenu: false,
-      scrollbar: {
-        horizontal: "hidden"
-      }
-    }} onMount={editor => {
-      editor.onDidFocusEditorText(() => {
-        setFocused(true);
-      });
-      editor.onDidBlurEditorText(() => {
-        setFocused(false);
-      });
-      editor.onDidChangeModelDecorations(() => {
-        updateEditorHeight(); // typing
-
-        requestAnimationFrame(updateEditorHeight); // folding
-      });
-      let prevHeight = 0;
-
-      const updateEditorHeight = () => {
-        var _editor$getModel;
-
-        onChange(editor.getValue());
-        const editorElement = editor.getDomNode();
-
-        if (!editorElement) {
-          return;
-        }
-
-        const lineHeight = 22;
-        const lineCount = ((_editor$getModel = editor.getModel()) === null || _editor$getModel === void 0 ? void 0 : _editor$getModel.getLineCount()) || 1;
-        const height = editor.getTopForLineNumber(lineCount + 1) + lineHeight;
-        const clippedHeight = Math.min(height, 500);
-
-        if (prevHeight !== clippedHeight) {
-          prevHeight = clippedHeight;
-          editorElement.style.height = `${clippedHeight}px`;
-          editor.layout();
-        }
-      };
-
-      updateEditorHeight();
-    }} />
-    </div>;
-}
-
-var _default = VSCode;
-exports.default = _default;

package/lib/theme/ApiDemoPanel/VSCode/styles.module.css

@@ -1,19 +0,0 @@
-.monacoBase {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  border-radius: 4px;
-  padding: var(--ifm-pre-padding);
-  background-color: var(--openapi-monaco-background-color);
-}
-
-.monaco {
-  composes: monacoBase;
-
-  box-shadow: 0 0 0 1px var(--openapi-monaco-border-color);
-  border: 2px solid transparent;
-}
-
-.monacoFocus {
-  composes: monacoBase;
-
-  border: 2px solid var(--openapi-input-border);
-}