docusaurus-theme-openapi-docs 1.2.2 → 1.3.0

package/lib-next/theme/ApiDemoPanel/index.js

@@ -5,87 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import sdk from "@paloaltonetworks/postman-collection";
-import { Provider } from "react-redux";
-import { createAuth } from "./Authorization/slice";
 import Curl from "./Curl";
 import MethodEndpoint from "./MethodEndpoint";
-import { createPersistanceMiddleware } from "./persistanceMiddleware";
 import Request from "./Request";
 import Response from "./Response";
 import SecuritySchemes from "./SecuritySchemes";
-import { createStoreWithState } from "./store";
 import styles from "./styles.module.css";
 
 function ApiDemoPanel({ item, infoPath }) {
-  const { siteConfig } = useDocusaurusContext();
-  const themeConfig = siteConfig.themeConfig;
-  const options = themeConfig.api;
   const postman = new sdk.Request(item.postman);
-  const acceptArray = Array.from(
-    new Set(
-      Object.values(item.responses ?? {})
-        .map((response) => Object.keys(response.content ?? {}))
-        .flat()
-    )
-  );
-  const content = item.requestBody?.content ?? {};
-  const contentTypeArray = Object.keys(content);
-  const servers = item.servers ?? [];
-  const params = {
-    path: [],
-    query: [],
-    header: [],
-    cookie: [],
-  };
-  item.parameters?.forEach((param) => {
-    const paramType = param.in;
-    const paramsArray = params[paramType];
-    paramsArray.push(param);
-  });
-  const auth = createAuth({
-    security: item.security,
-    securitySchemes: item.securitySchemes,
-    options,
-  });
-  const persistanceMiddleware = createPersistanceMiddleware(options);
-  const store2 = createStoreWithState(
-    {
-      accept: {
-        value: acceptArray[0],
-        options: acceptArray,
-      },
-      contentType: {
-        value: contentTypeArray[0],
-        options: contentTypeArray,
-      },
-      server: {
-        value: servers[0],
-        options: servers,
-      },
-      response: {
-        value: undefined,
-      },
-      body: {
-        type: "empty",
-      },
-      params,
-      auth,
-    },
-    [persistanceMiddleware]
-  );
   const { path, method } = item;
   return (
-    <Provider store={store2}>
-      <div className={styles.apiDemoPanelContainer}>
-        <MethodEndpoint method={method} path={path} />
-        <SecuritySchemes infoPath={infoPath} />
-        <Request item={item} />
-        <Response />
-        <Curl postman={postman} codeSamples={item["x-code-samples"] ?? []} />
-      </div>
-    </Provider>
+    <div className={styles.apiDemoPanelContainer}>
+      <MethodEndpoint method={method} path={path} />
+      <SecuritySchemes infoPath={infoPath} />
+      <Request item={item} />
+      <Response />
+      <Curl postman={postman} codeSamples={item["x-code-samples"] ?? []} />
+    </div>
   );
 }
 

package/lib-next/theme/ApiDemoPanel/persistanceMiddleware.js

@@ -31,6 +31,26 @@ export function createPersistanceMiddleware(options) {
       }
     }
 
+    if (action.type === "contentType/setContentType") {
+      storage.setItem("contentType", action.payload);
+    }
+
+    if (action.type === "accept/setAccept") {
+      storage.setItem("accept", action.payload);
+    }
+
+    if (action.type === "server/setServer") {
+      storage.setItem("server", action.payload);
+    }
+
+    if (action.type === "server/setServerVariable") {
+      const server = storage.getItem("server") ?? "{}";
+      const variables = JSON.parse(action.payload);
+      let serverObject = JSON.parse(server);
+      serverObject.variables[variables.key].default = variables.value;
+      storage.setItem("server", JSON.stringify(serverObject));
+    }
+
     return result;
   };
 

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

@@ -154,12 +154,15 @@
   margin-bottom: 0;
 }
 
-:global(.theme-api-markdown li::before) {
+:global([class^="paramsItem"]::before),
+:global([class^="schemaItem"]::before) {
   position: absolute;
   top: 10px;
   left: 0;
-  width: 0.7rem; /* width of horizontal line */
-  height: 0.5rem; /* vertical position of line */
+  width: 0.7rem;
+  /* width of horizontal line */
+  height: 0.5rem;
+  /* vertical position of line */
   vertical-align: top;
   border-bottom: thin solid var(--ifm-color-gray-500);
   content: "";
@@ -410,3 +413,8 @@
   max-height: 500px;
   overflow: auto;
 }
+
+/* Prism code styles */
+:global(.prism-code.language-json) {
+  white-space: pre !important;
+}

package/lib-next/theme/ApiItem/index.js

@@ -7,9 +7,14 @@
 import React from "react";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import clsx from "clsx";
+import { Provider } from "react-redux";
+import { createAuth } from "../ApiDemoPanel/Authorization/slice";
+import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
 import DocItemLayout from "./Layout";
 import DocItemMetadata from "./Metadata";
+import { createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
@@ -21,40 +26,113 @@ let ApiDemoPanel = (_) => (
   />
 );
 
+let DocItem = (props) => {
+  return (
+    <div
+      style={{
+        marginTop: "3.5em",
+      }}
+    />
+  );
+};
+
 if (ExecutionEnvironment.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
-}
-
-export default function DocItem(props) {
-  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
 
-  const DocContent = () => {
+  DocItem = function DocItem(props) {
+    const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
     const MDXComponent = props.content;
     const { frontMatter } = MDXComponent;
     const { info_path: infoPath } = frontMatter;
     const { api } = frontMatter;
-    return (
-      <div className="row">
-        <div className={clsx("col", api ? "col--7" : "col--12")}>
-          <MDXComponent />
-        </div>
-        {api && (
-          <div className="col col--5">
-            <ApiDemoPanel item={api} infoPath={infoPath} />
+    const { siteConfig } = useDocusaurusContext();
+    const themeConfig = siteConfig.themeConfig;
+    const options = themeConfig.api;
+    const acceptArray = Array.from(
+      new Set(
+        Object.values(api?.responses ?? {})
+          .map((response) => Object.keys(response.content ?? {}))
+          .flat()
+      )
+    );
+    const content = api?.requestBody?.content ?? {};
+    const contentTypeArray = Object.keys(content);
+    const servers = api?.servers ?? [];
+    const params = {
+      path: [],
+      query: [],
+      header: [],
+      cookie: [],
+    };
+    api?.parameters?.forEach((param) => {
+      const paramType = param.in;
+      const paramsArray = params[paramType];
+      paramsArray.push(param);
+    });
+    const auth = createAuth({
+      security: api?.security,
+      securitySchemes: api?.securitySchemes,
+      options,
+    });
+    const persistanceMiddleware = createPersistanceMiddleware(options);
+    const acceptValue = window?.sessionStorage.getItem("accept");
+    const contentTypeValue = window?.sessionStorage.getItem("contentType");
+    const server = window?.sessionStorage.getItem("server");
+    const serverObject = JSON.parse(server) ?? {};
+    const store2 = createStoreWithState(
+      {
+        accept: {
+          value: acceptValue || acceptArray[0],
+          options: acceptArray,
+        },
+        contentType: {
+          value: contentTypeValue || contentTypeArray[0],
+          options: contentTypeArray,
+        },
+        server: {
+          value: serverObject.url ? serverObject : undefined,
+          options: servers,
+        },
+        response: {
+          value: undefined,
+        },
+        body: {
+          type: "empty",
+        },
+        params,
+        auth,
+      },
+      [persistanceMiddleware]
+    );
+
+    const DocContent = () => {
+      return (
+        <div className="row">
+          <div className={clsx("col", api ? "col--7" : "col--12")}>
+            <MDXComponent />
           </div>
-        )}
-      </div>
+          {api && (
+            <div className="col col--5">
+              <ApiDemoPanel item={api} infoPath={infoPath} />
+            </div>
+          )}
+        </div>
+      );
+    };
+
+    return (
+      <Provider store={store2}>
+        <DocProvider content={props.content}>
+          <HtmlClassNameProvider className={docHtmlClassName}>
+            <DocItemMetadata />
+            <DocItemLayout>
+              <DocContent />
+            </DocItemLayout>
+          </HtmlClassNameProvider>
+        </DocProvider>
+      </Provider>
     );
   };
-
-  return (
-    <DocProvider content={props.content}>
-      <HtmlClassNameProvider className={docHtmlClassName}>
-        <DocItemMetadata />
-        <DocItemLayout>
-          <DocContent />
-        </DocItemLayout>
-      </HtmlClassNameProvider>
-    </DocProvider>
-  );
 }
+
+export default DocItem;

package/lib-next/theme/{ApiDemoPanel → ApiItem}/store.js

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
-import accept from "./Accept/slice";
-import auth from "./Authorization/slice";
-import body from "./Body/slice";
-import contentType from "./ContentType/slice";
-import params from "./ParamOptions/slice";
-import response from "./Response/slice";
-import server from "./Server/slice";
+import accept from "../ApiDemoPanel/Accept/slice";
+import auth from "../ApiDemoPanel/Authorization/slice";
+import body from "../ApiDemoPanel/Body/slice";
+import contentType from "../ApiDemoPanel/ContentType/slice";
+import params from "../ApiDemoPanel/ParamOptions/slice";
+import response from "../ApiDemoPanel/Response/slice";
+import server from "../ApiDemoPanel/Server/slice";
 const rootReducer = combineReducers({
   accept,
   contentType,

package/lib-next/theme/MimeTabs/index.js

@@ -18,6 +18,9 @@ import { duplicates } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import clsx from "clsx";
 
+import { setAccept } from "../ApiDemoPanel/Accept/slice";
+import { setContentType } from "../ApiDemoPanel/ContentType/slice";
+import { useTypedDispatch, useTypedSelector } from "../ApiItem/hooks";
 import styles from "./styles.module.css"; // A very rough duck type, but good enough to guard against mistakes while
 
 const {
@@ -39,6 +42,7 @@ function MimeTabsComponent(props) {
     values: valuesProp,
     groupId,
     className,
+    schemaType,
   } = props;
   const children = Children.map(props.children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
@@ -105,12 +109,22 @@ function MimeTabsComponent(props) {
     }
   }
 
+  const dispatch = useTypedDispatch();
+  const isRequestSchema = schemaType?.toLowerCase() === "request";
+
   const handleTabChange = (event) => {
+    event.preventDefault();
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
     const newTabValue = values[newTabIndex].value;
 
     if (newTabValue !== selectedValue) {
+      if (isRequestSchema) {
+        dispatch(setContentType(newTabValue));
+      } else {
+        dispatch(setAccept(newTabValue));
+      }
+
       blockElementScrollPositionUntilNextRender(newTab);
       setSelectedValue(newTabValue);
 
@@ -120,6 +134,20 @@ function MimeTabsComponent(props) {
     }
   };
 
+  const contentTypeVal = useTypedSelector((state) => state.contentType.value);
+  const acceptTypeVal = useTypedSelector((state) => state.accept.value);
+
+  useEffect(() => {
+    if (tabRefs.length > 1) {
+      if (isRequestSchema) {
+        setSelectedValue(contentTypeVal);
+      } else {
+        setSelectedValue(acceptTypeVal);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentTypeVal, acceptTypeVal]);
+
   const handleKeydown = (event) => {
     let focusElement = null;
 
@@ -197,7 +225,7 @@ function MimeTabsComponent(props) {
                   ref={(tabControl) => tabRefs.push(tabControl)}
                   onKeyDown={handleKeydown}
                   onFocus={handleTabChange}
-                  onClick={handleTabChange}
+                  onClick={(e) => handleTabChange(e)}
                   {...attributes}
                   className={clsx(
                     "tabs__item",

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

@@ -17,6 +17,7 @@
   font-weight: var(--ifm-font-weight-normal);
   /* color: var(--openapi-code-dim-dark); */
   font-size: 12px;
+  white-space: nowrap;
 }
 
 .tabItem:active {

package/lib-next/theme/SchemaTabs/index.js

@@ -227,7 +227,10 @@ function SchemaTabsComponent(props) {
         cloneElement(
           children.filter(
             (tabItem) => tabItem.props.value === selectedValue
-          )[0],
+          )[0] ?? // TODO: see if there's a better way to handle this
+            children.filter(
+              (tabItem) => tabItem.props.value === defaultValue
+            )[0],
           {
             className: "margin-vert--md",
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -50,7 +50,7 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.2.2",
+    "docusaurus-plugin-openapi-docs": "^1.3.0",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -70,5 +70,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "cfeb5216f143133a1c35587fef21f75a44b75854"
+  "gitHead": "b599d062a8e4f1cff86b01ac9b82dc564defbf5f"
 }

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

@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FormItem from "./../FormItem";
 import FormSelect from "./../FormSelect";
 import { setAccept } from "./slice";

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

@@ -7,10 +7,10 @@
 
 import React from "react";
 
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FormItem from "../FormItem";
 import FormSelect from "../FormSelect";
 import FormTextInput from "../FormTextInput";
-import { useTypedDispatch, useTypedSelector } from "../hooks";
 import { setAuthData, setSelectedAuth } from "./slice";
 
 function Authorization() {

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

@@ -7,12 +7,15 @@
 
 import React from "react";
 
+import TabItem from "@theme/TabItem";
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import format from "xml-formatter";
 
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
+// @ts-ignore
+import SchemaTabs from "../../SchemaTabs";
 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";
@@ -82,6 +85,8 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   // - application/x-www-form-urlencoded
 
   const schema = requestBodyMetadata?.content?.[contentType]?.schema;
+  const example = requestBodyMetadata?.content?.[contentType]?.example;
+  const examples = requestBodyMetadata?.content?.[contentType]?.examples;
 
   if (schema?.format === "binary") {
     return (
@@ -209,34 +214,129 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   }
 
   let language = "plaintext";
-  let exampleBodyString = ""; //"body content";
+  let defaultBody = ""; //"body content";
+  let exampleBody;
+  let examplesBodies = [] as any;
 
   if (contentType === "application/json" || contentType.endsWith("+json")) {
     if (jsonRequestBodyExample) {
-      exampleBodyString = JSON.stringify(jsonRequestBodyExample, null, 2);
+      defaultBody = JSON.stringify(jsonRequestBodyExample, null, 2);
+    }
+    if (example) {
+      exampleBody = JSON.stringify(example, null, 2);
+    }
+    if (examples) {
+      for (const [key, example] of Object.entries(examples)) {
+        examplesBodies.push({
+          label: key,
+          body: JSON.stringify(example.value, null, 2),
+          summary: example.summary,
+        });
+      }
     }
     language = "json";
   }
 
-  if (contentType === "application/xml") {
+  if (contentType === "application/xml" || contentType.endsWith("+xml")) {
     if (jsonRequestBodyExample) {
       try {
-        exampleBodyString = format(json2xml(jsonRequestBodyExample, ""), {
+        defaultBody = format(json2xml(jsonRequestBodyExample, ""), {
+          indentation: "  ",
+          lineSeparator: "\n",
+          collapseContent: true,
+        });
+      } catch {
+        defaultBody = json2xml(jsonRequestBodyExample);
+      }
+    }
+    if (example) {
+      try {
+        exampleBody = format(json2xml(example, ""), {
           indentation: "  ",
           lineSeparator: "\n",
           collapseContent: true,
         });
       } catch {
-        exampleBodyString = json2xml(jsonRequestBodyExample);
+        exampleBody = json2xml(example);
+      }
+    }
+    if (examples) {
+      for (const [key, example] of Object.entries(examples)) {
+        let formattedXmlBody;
+        try {
+          formattedXmlBody = format(example.value, {
+            indentation: "  ",
+            lineSeparator: "\n",
+            collapseContent: true,
+          });
+        } catch {
+          formattedXmlBody = example.value;
+        }
+        examplesBodies.push({
+          label: key,
+          body: formattedXmlBody,
+          summary: example.summary,
+        });
       }
     }
     language = "xml";
   }
 
+  if (exampleBody) {
+    return (
+      <FormItem label="Body" required={required}>
+        <SchemaTabs lazy>
+          <TabItem label="Default" value="default" default>
+            <LiveApp action={dispatch} language={language}>
+              {defaultBody}
+            </LiveApp>
+          </TabItem>
+          <TabItem label="Example" value="example">
+            {exampleBody && (
+              <LiveApp action={dispatch} language={language}>
+                {exampleBody}
+              </LiveApp>
+            )}
+          </TabItem>
+        </SchemaTabs>
+      </FormItem>
+    );
+  }
+
+  if (examplesBodies && examplesBodies.length > 0) {
+    return (
+      <FormItem label="Body" required={required}>
+        <SchemaTabs lazy>
+          <TabItem label="Default" value="default" default>
+            <LiveApp action={dispatch} language={language}>
+              {defaultBody}
+            </LiveApp>
+          </TabItem>
+          {examplesBodies.map((example: any) => {
+            return (
+              <TabItem
+                label={example.label}
+                value={example.label}
+                key={example.label}
+              >
+                {example.summary && <p>{example.summary}</p>}
+                {example.body && (
+                  <LiveApp action={dispatch} language={language}>
+                    {example.body}
+                  </LiveApp>
+                )}
+              </TabItem>
+            );
+          })}
+        </SchemaTabs>
+      </FormItem>
+    );
+  }
+
   return (
     <FormItem label="Body" required={required}>
       <LiveApp action={dispatch} language={language}>
-        {exampleBodyString}
+        {defaultBody}
       </LiveApp>
     </FormItem>
   );

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

@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FormItem from "./../FormItem";
 import FormSelect from "./../FormSelect";
 import { setContentType } from "./slice";

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

@@ -13,8 +13,8 @@ import sdk from "@paloaltonetworks/postman-collection";
 import CodeBlock from "@theme/CodeBlock";
 import clsx from "clsx";
 
+import { useTypedSelector } from "../../ApiItem/hooks";
 import CodeTabs from "../CodeTabs";
-import { useTypedSelector } from "../hooks";
 import buildPostmanRequest from "./../buildPostmanRequest";
 import styles from "./styles.module.css";
 

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

@@ -10,7 +10,7 @@ import React from "react";
 import sdk from "@paloaltonetworks/postman-collection";
 import Modal from "react-modal";
 
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import { Param } from "../ParamOptions/slice";
 import { setResponse } from "../Response/slice";
 import buildPostmanRequest from "./../buildPostmanRequest";

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

@@ -9,7 +9,7 @@ import React, { useState, useEffect } from "react";
 
 import { nanoid } from "@reduxjs/toolkit";
 
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FormItem from "./../FormItem";
 import FormMultiSelect from "./../FormMultiSelect";
 import FormSelect from "./../FormSelect";