docusaurus-theme-openapi-docs 1.2.2 → 1.3.0

package/lib/theme/ApiItem/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DocItem;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,12 +11,22 @@ var _ExecutionEnvironment = _interopRequireDefault(require("@docusaurus/Executio
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _reactRedux = require("react-redux");
+
+var _slice = require("../ApiDemoPanel/Authorization/slice");
+
+var _persistanceMiddleware = require("../ApiDemoPanel/persistanceMiddleware");
+
 var _Layout = _interopRequireDefault(require("./Layout"));
 
 var _Metadata = _interopRequireDefault(require("./Metadata"));
 
+var _store = require("./store");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* ============================================================================
@@ -33,14 +43,19 @@ let ApiDemoPanel = _ => <div style={{
   marginTop: "3.5em"
 }} />;
 
+let DocItem = props => {
+  return <div style={{
+    marginTop: "3.5em"
+  }} />;
+};
+
 if (_ExecutionEnvironment.default.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
-}
 
-function DocItem(props) {
-  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  DocItem = function DocItem(props) {
+    var _api$responses, _api$requestBody$cont, _api$requestBody, _api$servers, _api$parameters, _window, _window2, _window3, _ref;
 
-  const DocContent = () => {
+    const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
     const MDXComponent = props.content;
     const {
       frontMatter
@@ -51,22 +66,86 @@ function DocItem(props) {
     const {
       api
     } = frontMatter;
-    return <div className="row">
-        <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-          <MDXComponent />
-        </div>
-        {api && <div className="col col--5">
-            <ApiDemoPanel item={api} infoPath={infoPath} />
-          </div>}
-      </div>;
+    const {
+      siteConfig
+    } = (0, _useDocusaurusContext.default)();
+    const themeConfig = siteConfig.themeConfig;
+    const options = themeConfig.api;
+    const acceptArray = Array.from(new Set(Object.values((_api$responses = api === null || api === void 0 ? void 0 : api.responses) !== null && _api$responses !== void 0 ? _api$responses : {}).map(response => {
+      var _response$content;
+
+      return Object.keys((_response$content = response.content) !== null && _response$content !== void 0 ? _response$content : {});
+    }).flat()));
+    const content = (_api$requestBody$cont = api === null || api === void 0 ? void 0 : (_api$requestBody = api.requestBody) === null || _api$requestBody === void 0 ? void 0 : _api$requestBody.content) !== null && _api$requestBody$cont !== void 0 ? _api$requestBody$cont : {};
+    const contentTypeArray = Object.keys(content);
+    const servers = (_api$servers = api === null || api === void 0 ? void 0 : api.servers) !== null && _api$servers !== void 0 ? _api$servers : [];
+    const params = {
+      path: [],
+      query: [],
+      header: [],
+      cookie: []
+    };
+    api === null || api === void 0 ? void 0 : (_api$parameters = api.parameters) === null || _api$parameters === void 0 ? void 0 : _api$parameters.forEach(param => {
+      const paramType = param.in;
+      const paramsArray = params[paramType];
+      paramsArray.push(param);
+    });
+    const auth = (0, _slice.createAuth)({
+      security: api === null || api === void 0 ? void 0 : api.security,
+      securitySchemes: api === null || api === void 0 ? void 0 : api.securitySchemes,
+      options
+    });
+    const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options);
+    const acceptValue = (_window = window) === null || _window === void 0 ? void 0 : _window.sessionStorage.getItem("accept");
+    const contentTypeValue = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.sessionStorage.getItem("contentType");
+    const server = (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.sessionStorage.getItem("server");
+    const serverObject = (_ref = JSON.parse(server)) !== null && _ref !== void 0 ? _ref : {};
+    const store2 = (0, _store.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={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
+            <MDXComponent />
+          </div>
+          {api && <div className="col col--5">
+              <ApiDemoPanel item={api} infoPath={infoPath} />
+            </div>}
+        </div>;
+    };
+
+    return <_reactRedux.Provider store={store2}>
+        <DocProvider content={props.content}>
+          <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
+            <_Metadata.default />
+            <_Layout.default>
+              <DocContent />
+            </_Layout.default>
+          </_themeCommon.HtmlClassNameProvider>
+        </DocProvider>
+      </_reactRedux.Provider>;
   };
+}
 
-  return <DocProvider content={props.content}>
-      <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
-        <_Metadata.default />
-        <_Layout.default>
-          <DocContent />
-        </_Layout.default>
-      </_themeCommon.HtmlClassNameProvider>
-    </DocProvider>;
-}
+var _default = DocItem;
+exports.default = _default;

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

@@ -7,19 +7,19 @@ exports.createStoreWithState = void 0;
 
 var _toolkit = require("@reduxjs/toolkit");
 
-var _slice = _interopRequireDefault(require("./Accept/slice"));
+var _slice = _interopRequireDefault(require("../ApiDemoPanel/Accept/slice"));
 
-var _slice2 = _interopRequireDefault(require("./Authorization/slice"));
+var _slice2 = _interopRequireDefault(require("../ApiDemoPanel/Authorization/slice"));
 
-var _slice3 = _interopRequireDefault(require("./Body/slice"));
+var _slice3 = _interopRequireDefault(require("../ApiDemoPanel/Body/slice"));
 
-var _slice4 = _interopRequireDefault(require("./ContentType/slice"));
+var _slice4 = _interopRequireDefault(require("../ApiDemoPanel/ContentType/slice"));
 
-var _slice5 = _interopRequireDefault(require("./ParamOptions/slice"));
+var _slice5 = _interopRequireDefault(require("../ApiDemoPanel/ParamOptions/slice"));
 
-var _slice6 = _interopRequireDefault(require("./Response/slice"));
+var _slice6 = _interopRequireDefault(require("../ApiDemoPanel/Response/slice"));
 
-var _slice7 = _interopRequireDefault(require("./Server/slice"));
+var _slice7 = _interopRequireDefault(require("../ApiDemoPanel/Server/slice"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/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/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/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/lib-next/theme/ApiDemoPanel/Accept/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 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/lib-next/theme/ApiDemoPanel/Authorization/index.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 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/lib-next/theme/ApiDemoPanel/Body/index.js

@@ -5,10 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
+import TabItem from "@theme/TabItem";
 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";
@@ -66,6 +69,8 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   // - 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 (
@@ -199,36 +204,138 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   }
 
   let language = "plaintext";
-  let exampleBodyString = ""; //"body content";
+  let defaultBody = ""; //"body content";
+
+  let exampleBody;
+  let examplesBodies = [];
 
   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) => {
+            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/lib-next/theme/ApiDemoPanel/ContentType/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 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/lib-next/theme/ApiDemoPanel/Curl/index.js

@@ -9,8 +9,8 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import codegen from "@paloaltonetworks/postman-code-generators";
 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";
 export const languageSet = [

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

@@ -6,7 +6,7 @@
  * ========================================================================== */
 import React from "react";
 import Modal from "react-modal";
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import { setResponse } from "../Response/slice";
 import buildPostmanRequest from "./../buildPostmanRequest";
 import makeRequest from "./makeRequest";

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

@@ -6,7 +6,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";

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

@@ -7,11 +7,11 @@
 import React from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import sdk from "@paloaltonetworks/postman-collection";
+import { useTypedSelector } from "../../ApiItem/hooks";
 import Accept from "../Accept";
 import Authorization from "../Authorization";
 import Body from "../Body";
 import Execute from "../Execute";
-import { useTypedSelector } from "../hooks";
 import ParamOptions from "../ParamOptions";
 import Server from "../Server";
 import styles from "./styles.module.css";

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

@@ -6,7 +6,7 @@
  * ========================================================================== */
 import React from "react";
 import CodeBlock from "@theme/CodeBlock";
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import { clearResponse } from "./slice"; // TODO: We probably shouldn't attempt to format XML...
 
 function formatXml(xml) {

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

@@ -6,7 +6,7 @@
  * ========================================================================== */
 import React from "react";
 import Link from "@docusaurus/Link";
-import { useTypedSelector } from "../hooks";
+import { useTypedSelector } from "../../ApiItem/hooks";
 
 function SecuritySchemes(props) {
   const options = useTypedSelector((state) => state.auth.options);

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React, { useState } from "react";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FloatingButton from "../FloatingButton";
-import { useTypedDispatch, useTypedSelector } from "../hooks";
 import FormItem from "./../FormItem";
 import FormSelect from "./../FormSelect";
 import FormTextInput from "./../FormTextInput";
@@ -27,6 +27,20 @@ function Server() {
     return null;
   }
 
+  if (!value) {
+    const defaultOption = options[0];
+    dispatch(setServer(JSON.stringify(defaultOption)));
+  } // Default to first option when existing server state is mismatched
+
+  if (value) {
+    const urlExists = options.find((s) => s.url === value.url);
+
+    if (!urlExists) {
+      const defaultOption = options[0];
+      dispatch(setServer(JSON.stringify(defaultOption)));
+    }
+  }
+
   if (!isEditing) {
     let url = "";
 
@@ -65,7 +79,15 @@ function Server() {
         <FormItem label="Base URL">
           <FormSelect
             options={options.map((s) => s.url)}
-            onChange={(e) => dispatch(setServer(e.target.value))}
+            onChange={(e) => {
+              dispatch(
+                setServer(
+                  JSON.stringify(
+                    options.filter((s) => s.url === e.target.value)[0]
+                  )
+                )
+              );
+            }}
             value={value?.url}
           />
           <small>{value?.description}</small>
@@ -79,12 +101,15 @@ function Server() {
                     options={value.variables[key].enum}
                     onChange={(e) => {
                       dispatch(
-                        setServerVariable({
-                          key,
-                          value: e.target.value,
-                        })
+                        setServerVariable(
+                          JSON.stringify({
+                            key,
+                            value: e.target.value,
+                          })
+                        )
                       );
                     }}
+                    value={value?.variables[key].default}
                   />
                 </FormItem>
               );
@@ -96,12 +121,15 @@ function Server() {
                   placeholder={value.variables?.[key].default}
                   onChange={(e) => {
                     dispatch(
-                      setServerVariable({
-                        key,
-                        value: e.target.value,
-                      })
+                      setServerVariable(
+                        JSON.stringify({
+                          key,
+                          value: e.target.value,
+                        })
+                      )
                     );
                   }}
+                  value={value?.variables?.[key].default}
                 />
               </FormItem>
             );

package/lib-next/theme/ApiDemoPanel/Server/slice.js

@@ -11,12 +11,14 @@ export const slice = createSlice({
   initialState,
   reducers: {
     setServer: (state, action) => {
-      state.value = state.options.find((s) => s.url === action.payload);
+      state.value = state.options.find(
+        (s) => s.url === JSON.parse(action.payload).url
+      );
     },
     setServerVariable: (state, action) => {
       if (state.value?.variables) {
-        state.value.variables[action.payload.key].default =
-          action.payload.value;
+        const parsedPayload = JSON.parse(action.payload);
+        state.value.variables[parsedPayload.key].default = parsedPayload.value;
       }
     },
   },