docusaurus-theme-openapi-docs 1.0.2 → 1.0.5

package/lib-next/theme/ApiItem/styles.module.css

@@ -11,6 +11,23 @@
   margin-top: 0;
 }
 
+:global(.version-button div) {
+  display: block;
+}
+
+:global(.version-button div > button > span::after) {
+  border-color: currentcolor transparent;
+  border-style: solid;
+  border-width: 0.4em 0.4em 0;
+  content: "";
+  margin-left: 0.3em;
+  position: relative;
+  transform: translateY(-50%);
+  display: inline-block;
+  font-size: 0.8rem;
+  top: 1px;
+}
+
 /* default markdown margins look really silly in a table */
 :global(.theme-api-markdown table *:last-child) {
   margin-bottom: 0;
@@ -111,3 +128,75 @@
   margin-top: 0 !important;
   padding-left: 2px;
 }
+
+:global(.code__tab--python::after) {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url(./icons/python-original.svg);
+  margin-block: auto;
+}
+
+:global(.code__tab--python) {
+  color: var(--ifm-color-success);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+:global(.code__tab--python.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-success);
+}
+
+:global(.code__tab--go::after) {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url(./icons/go-original-wordmark.svg);
+  margin-block: auto;
+}
+
+:global(.code__tab--go) {
+  color: var(--ifm-color-info);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+:global(.code__tab--go.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-info);
+}
+
+:global(.code__tab--javascript::after) {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url(./icons/javascript-original.svg);
+  margin-block: auto;
+}
+
+:global(.code__tab--javascript) {
+  color: var(--ifm-color-warning);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+:global(.code__tab--javascript.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-warning);
+}
+
+:global(.code__tab--bash::after) {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url(./icons/linux-original.svg);
+  margin-block: auto;
+}
+
+:global(.code__tab--bash) {
+  color: var(--ifm-color-danger);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+:global(.code__tab--bash.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-danger);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -31,8 +31,8 @@
     "format:lib-next": "prettier --config ../../.prettierrc.json --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.18",
-    "@docusaurus/types": "2.0.0-beta.18",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
+    "@docusaurus/types": "2.0.0-beta.21",
     "@types/concurrently": "^6.3.0",
     "@types/crypto-js": "^4.1.0",
     "@types/fs-extra": "^9.0.13",
@@ -42,21 +42,19 @@
     "concurrently": "^5.2.0"
   },
   "dependencies": {
-    "@docusaurus/theme-common": "2.0.0-beta.18",
+    "@docusaurus/theme-common": "2.0.0-beta.21",
     "@mdx-js/react": "^1.6.21",
-    "@monaco-editor/react": "^4.3.1",
     "@paloaltonetworks/postman-code-generators": "1.1.5-hotfix.5",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@reduxjs/toolkit": "^1.7.1",
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.0.2",
+    "docusaurus-plugin-openapi-docs": "^1.0.5",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
-    "monaco-editor": "^0.31.1",
-    "prism-react-renderer": "^1.2.1",
     "process": "^0.11.10",
+    "react-live": "^3.1.1",
     "react-magic-dropzone": "^1.0.1",
     "react-markdown": "^8.0.1",
     "react-redux": "^7.2.0",
@@ -70,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "526f2d10bc187bc7095ac70d5b1453b9b92c114f"
+  "gitHead": "fe58997d349cdab4f113c4a7449cd650882dcab6"
 }

package/src/theme/ApiDemoPanel/Body/index.tsx

@@ -12,17 +12,18 @@ import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/ty
 import ContentType from "../ContentType";
 import FormSelect from "../FormSelect";
 import { useTypedDispatch, useTypedSelector } from "../hooks";
+import LiveApp from "../LiveEditor";
 import FormFileUpload from "./../FormFileUpload";
 import FormItem from "./../FormItem";
 import FormTextInput from "./../FormTextInput";
-import VSCode from "./../VSCode";
+// @ts-ignore
+import json2xml from "./json2xml";
 import {
   clearFormBodyKey,
   clearRawBody,
   setFileFormBody,
   setFileRawBody,
   setStringFormBody,
-  setStringRawBody,
 } from "./slice";
 
 interface Props {
@@ -195,22 +196,17 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   }
 
   if (contentType === "application/xml") {
+    if (jsonRequestBodyExample) {
+      exampleBodyString = json2xml(jsonRequestBodyExample);
+    }
     language = "xml";
   }
 
   return (
     <FormItem label="Body">
-      <VSCode
-        value={exampleBodyString}
-        language={language}
-        onChange={(value) => {
-          if (value.trim() === "") {
-            dispatch(clearRawBody());
-            return;
-          }
-          dispatch(setStringRawBody(value));
-        }}
-      />
+      <LiveApp action={dispatch} language={language}>
+        {exampleBodyString}
+      </LiveApp>
     </FormItem>
   );
 }

package/src/theme/ApiDemoPanel/Body/json2xml.js

@@ -0,0 +1,43 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+export default function json2xml(o, tab) {
+  var toXml = function (v, name, ind) {
+      var xml = "";
+      if (v instanceof Array) {
+        for (var i = 0, n = v.length; i < n; i++)
+          xml += ind + toXml(v[i], name, ind + "\t") + "\n";
+      } else if (typeof v == "object") {
+        var hasChild = false;
+        xml += ind + "<" + name;
+        for (var m in v) {
+          if (m.charAt(0) === "@")
+            xml += " " + m.substr(1) + '="' + v[m].toString() + '"';
+          else hasChild = true;
+        }
+        xml += hasChild ? ">" : "/>";
+        if (hasChild) {
+          for (var m2 in v) {
+            if (m2 === "#text") xml += v[m2];
+            else if (m2 === "#cdata") xml += "<![CDATA[" + v[m2] + "]]>";
+            else if (m2.charAt(0) !== "@") xml += toXml(v[m2], m2, ind + "\t");
+          }
+          xml +=
+            (xml.charAt(xml.length - 1) === "\n" ? ind : "") +
+            "</" +
+            name +
+            ">";
+        }
+      } else {
+        xml += ind + "<" + name + ">" + v.toString() + "</" + name + ">";
+      }
+      return xml;
+    },
+    xml = "";
+  for (var m3 in o) xml += toXml(o[m3], m3, "");
+  return tab ? xml.replace(/\t/g, tab) : xml.replace(/\t|\n/g, "");
+}

package/src/theme/ApiDemoPanel/CodeTabs/index.tsx

@@ -0,0 +1,237 @@
+/* ============================================================================
+ * 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, {
+  useState,
+  cloneElement,
+  isValidElement,
+  type ReactElement,
+} from "react";
+
+import {
+  useScrollPositionBlocker,
+  duplicates,
+  useTabGroupChoice,
+} from "@docusaurus/theme-common";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import type { Props as TabItemProps } from "@theme/TabItem";
+import clsx from "clsx";
+
+import { languageSet } from "../Curl";
+import styles from "./styles.module.css";
+
+// A very rough duck type, but good enough to guard against mistakes while
+// allowing customization
+function isTabItem(
+  comp: ReactElement<object>
+): comp is ReactElement<TabItemProps> {
+  return "value" in comp.props;
+}
+
+export interface Props {
+  readonly lazy?: boolean;
+  readonly block?: boolean;
+  readonly children: readonly ReactElement<TabItemProps>[];
+  readonly defaultValue?: string | null;
+  readonly values?: readonly {
+    value: string;
+    label?: string;
+    attributes?: { [key: string]: unknown };
+  }[];
+  readonly groupId?: string;
+  readonly className?: string;
+  readonly action?: any;
+}
+
+function TabsComponent(props: Props): JSX.Element {
+  const {
+    lazy,
+    block,
+    defaultValue: defaultValueProp,
+    values: valuesProp,
+    groupId,
+    className,
+    action,
+  } = props;
+  const children = React.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 ??
+    // 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: (HTMLLIElement | null)[] = [];
+  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: React.FocusEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>
+  ) => {
+    const newTab = event.currentTarget;
+    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabValue = values[newTabIndex]!.value;
+
+    if (newTabValue !== selectedValue) {
+      blockElementScrollPositionUntilNextRender(newTab);
+      setSelectedValue(newTabValue);
+      if (action) {
+        const newLanguage = languageSet.filter(
+          (lang) => lang.language === newTabValue
+        );
+        action(newLanguage[0]);
+      }
+
+      if (groupId != null) {
+        setTabGroupChoices(groupId, String(newTabValue));
+      }
+    }
+  };
+
+  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
+    let focusElement: HTMLLIElement | null = 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();
+  };
+
+  return (
+    <div className={clsx("tabs-container", styles.tabList)}>
+      <ul
+        role="tablist"
+        aria-orientation="horizontal"
+        className={clsx(
+          "tabs",
+          {
+            "tabs--block": block,
+          },
+          styles.code__tabs,
+          className
+        )}
+      >
+        {values.map(({ value, label, attributes }) => (
+          <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 as string,
+              {
+                "tabs__item--active": selectedValue === value,
+              }
+            )}
+          >
+            {label ?? value}
+          </li>
+        ))}
+      </ul>
+
+      {lazy ? (
+        cloneElement(
+          children.filter(
+            (tabItem) => tabItem.props.value === selectedValue
+          )[0]!,
+          { className: "margin-top--md" }
+        )
+      ) : (
+        <div className="margin-top--md">
+          {children.map((tabItem, i) =>
+            cloneElement(tabItem, {
+              key: i,
+              hidden: tabItem.props.value !== selectedValue,
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function CodeTabs(props: Props): JSX.Element {
+  const isBrowser = useIsBrowser();
+  return (
+    <TabsComponent
+      // Remount tabs after hydration
+      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
+      key={String(isBrowser)}
+      {...props}
+    />
+  );
+}

package/src/theme/ApiDemoPanel/CodeTabs/styles.module.css

@@ -0,0 +1,11 @@
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
+.tabItem {
+  margin-top: 0 !important;
+}
+
+.code__tabs {
+  justify-content: space-around;
+}