docusaurus-theme-openapi-docs 1.2.2 → 1.3.0

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _FormItem = _interopRequireDefault(require("./../FormItem"));
 

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

@@ -7,14 +7,14 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _hooks = require("../../ApiItem/hooks");
+
 var _FormItem = _interopRequireDefault(require("../FormItem"));
 
 var _FormSelect = _interopRequireDefault(require("../FormSelect"));
 
 var _FormTextInput = _interopRequireDefault(require("../FormTextInput"));
 
-var _hooks = require("../hooks");
-
 var _slice = require("./slice");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -7,14 +7,18 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _TabItem = _interopRequireDefault(require("@theme/TabItem"));
+
 var _xmlFormatter = _interopRequireDefault(require("xml-formatter"));
 
+var _hooks = require("../../ApiItem/hooks");
+
+var _SchemaTabs = _interopRequireDefault(require("../../SchemaTabs"));
+
 var _ContentType = _interopRequireDefault(require("../ContentType"));
 
 var _FormSelect = _interopRequireDefault(require("../FormSelect"));
 
-var _hooks = require("../hooks");
-
 var _LiveEditor = _interopRequireDefault(require("../LiveEditor"));
 
 var _FormFileUpload = _interopRequireDefault(require("./../FormFileUpload"));
@@ -36,6 +40,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 // @ts-ignore
+// @ts-ignore
 function BodyWrap({
   requestBodyMetadata,
   jsonRequestBodyExample
@@ -58,7 +63,7 @@ function Body({
   requestBodyMetadata,
   jsonRequestBodyExample
 }) {
-  var _requestBodyMetadata$, _requestBodyMetadata$2;
+  var _requestBodyMetadata$, _requestBodyMetadata$2, _requestBodyMetadata$3, _requestBodyMetadata$4, _requestBodyMetadata$5, _requestBodyMetadata$6;
 
   const contentType = (0, _hooks.useTypedSelector)(state => state.contentType.value);
   const required = requestBodyMetadata === null || requestBodyMetadata === void 0 ? void 0 : requestBodyMetadata.required;
@@ -82,6 +87,8 @@ function Body({
   // - application/x-www-form-urlencoded
 
   const schema = requestBodyMetadata === null || requestBodyMetadata === void 0 ? void 0 : (_requestBodyMetadata$ = requestBodyMetadata.content) === null || _requestBodyMetadata$ === void 0 ? void 0 : (_requestBodyMetadata$2 = _requestBodyMetadata$[contentType]) === null || _requestBodyMetadata$2 === void 0 ? void 0 : _requestBodyMetadata$2.schema;
+  const example = requestBodyMetadata === null || requestBodyMetadata === void 0 ? void 0 : (_requestBodyMetadata$3 = requestBodyMetadata.content) === null || _requestBodyMetadata$3 === void 0 ? void 0 : (_requestBodyMetadata$4 = _requestBodyMetadata$3[contentType]) === null || _requestBodyMetadata$4 === void 0 ? void 0 : _requestBodyMetadata$4.example;
+  const examples = requestBodyMetadata === null || requestBodyMetadata === void 0 ? void 0 : (_requestBodyMetadata$5 = requestBodyMetadata.content) === null || _requestBodyMetadata$5 === void 0 ? void 0 : (_requestBodyMetadata$6 = _requestBodyMetadata$5[contentType]) === null || _requestBodyMetadata$6 === void 0 ? void 0 : _requestBodyMetadata$6.examples;
 
   if ((schema === null || schema === void 0 ? void 0 : schema.format) === "binary") {
     return <_FormItem.default label="Body" required={required}>
@@ -161,35 +168,123 @@ function Body({
   }
 
   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 = (0, _xmlFormatter.default)((0, _json2xml.default)(jsonRequestBodyExample, ""), {
+        defaultBody = (0, _xmlFormatter.default)((0, _json2xml.default)(jsonRequestBodyExample, ""), {
+          indentation: "  ",
+          lineSeparator: "\n",
+          collapseContent: true
+        });
+      } catch {
+        defaultBody = (0, _json2xml.default)(jsonRequestBodyExample);
+      }
+    }
+
+    if (example) {
+      try {
+        exampleBody = (0, _xmlFormatter.default)((0, _json2xml.default)(example, ""), {
           indentation: "  ",
           lineSeparator: "\n",
           collapseContent: true
         });
       } catch {
-        exampleBodyString = (0, _json2xml.default)(jsonRequestBodyExample);
+        exampleBody = (0, _json2xml.default)(example);
+      }
+    }
+
+    if (examples) {
+      for (const [key, example] of Object.entries(examples)) {
+        let formattedXmlBody;
+
+        try {
+          formattedXmlBody = (0, _xmlFormatter.default)(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.default label="Body" required={required}>
+        <_SchemaTabs.default lazy>
+          <_TabItem.default label="Default" value="default" default>
+            <_LiveEditor.default action={dispatch} language={language}>
+              {defaultBody}
+            </_LiveEditor.default>
+          </_TabItem.default>
+          <_TabItem.default label="Example" value="example">
+            {exampleBody && <_LiveEditor.default action={dispatch} language={language}>
+                {exampleBody}
+              </_LiveEditor.default>}
+          </_TabItem.default>
+        </_SchemaTabs.default>
+      </_FormItem.default>;
+  }
+
+  if (examplesBodies && examplesBodies.length > 0) {
+    return <_FormItem.default label="Body" required={required}>
+        <_SchemaTabs.default lazy>
+          <_TabItem.default label="Default" value="default" default>
+            <_LiveEditor.default action={dispatch} language={language}>
+              {defaultBody}
+            </_LiveEditor.default>
+          </_TabItem.default>
+          {examplesBodies.map(example => {
+          return <_TabItem.default label={example.label} value={example.label} key={example.label}>
+                {example.summary && <p>{example.summary}</p>}
+                {example.body && <_LiveEditor.default action={dispatch} language={language}>
+                    {example.body}
+                  </_LiveEditor.default>}
+              </_TabItem.default>;
+        })}
+        </_SchemaTabs.default>
+      </_FormItem.default>;
+  }
+
   return <_FormItem.default label="Body" required={required}>
       <_LiveEditor.default action={dispatch} language={language}>
-        {exampleBodyString}
+        {defaultBody}
       </_LiveEditor.default>
     </_FormItem.default>;
 }

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _FormItem = _interopRequireDefault(require("./../FormItem"));
 

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

@@ -15,9 +15,9 @@ var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _CodeTabs = _interopRequireDefault(require("../CodeTabs"));
+var _hooks = require("../../ApiItem/hooks");
 
-var _hooks = require("../hooks");
+var _CodeTabs = _interopRequireDefault(require("../CodeTabs"));
 
 var _buildPostmanRequest = _interopRequireDefault(require("./../buildPostmanRequest"));
 

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactModal = _interopRequireDefault(require("react-modal"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _slice = require("../Response/slice");
 

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _toolkit = require("@reduxjs/toolkit");
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _FormItem = _interopRequireDefault(require("./../FormItem"));
 

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

@@ -11,6 +11,8 @@ var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocus
 
 var _postmanCollection = _interopRequireDefault(require("@paloaltonetworks/postman-collection"));
 
+var _hooks = require("../../ApiItem/hooks");
+
 var _Accept = _interopRequireDefault(require("../Accept"));
 
 var _Authorization = _interopRequireDefault(require("../Authorization"));
@@ -19,8 +21,6 @@ var _Body = _interopRequireDefault(require("../Body"));
 
 var _Execute = _interopRequireDefault(require("../Execute"));
 
-var _hooks = require("../hooks");
-
 var _ParamOptions = _interopRequireDefault(require("../ParamOptions"));
 
 var _Server = _interopRequireDefault(require("../Server"));

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _slice = require("./slice");
 

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

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

@@ -7,9 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _FloatingButton = _interopRequireDefault(require("../FloatingButton"));
+var _hooks = require("../../ApiItem/hooks");
 
-var _hooks = require("../hooks");
+var _FloatingButton = _interopRequireDefault(require("../FloatingButton"));
 
 var _FormItem = _interopRequireDefault(require("./../FormItem"));
 
@@ -47,6 +47,21 @@ function Server() {
     return null;
   }
 
+  if (!value) {
+    const defaultOption = options[0];
+    dispatch((0, _slice.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((0, _slice.setServer)(JSON.stringify(defaultOption)));
+    }
+  }
+
   if (!isEditing) {
     let url = "";
 
@@ -77,30 +92,32 @@ function Server() {
   return <div className={_stylesModule.default.optionsPanel}>
       <_FloatingButton.default onClick={() => setIsEditing(false)} label="Hide">
         <_FormItem.default label="Base URL">
-          <_FormSelect.default options={options.map(s => s.url)} onChange={e => dispatch((0, _slice.setServer)(e.target.value))} value={value === null || value === void 0 ? void 0 : value.url} />
+          <_FormSelect.default options={options.map(s => s.url)} onChange={e => {
+          dispatch((0, _slice.setServer)(JSON.stringify(options.filter(s => s.url === e.target.value)[0])));
+        }} value={value === null || value === void 0 ? void 0 : value.url} />
           <small>{value === null || value === void 0 ? void 0 : value.description}</small>
         </_FormItem.default>
         {(value === null || value === void 0 ? void 0 : value.variables) && Object.keys(value.variables).map(key => {
-        var _value$variables2, _value$variables3;
+        var _value$variables2, _value$variables3, _value$variables4;
 
         if (((_value$variables2 = value.variables) === null || _value$variables2 === void 0 ? void 0 : _value$variables2[key].enum) !== undefined) {
           return <_FormItem.default label={key}>
                   <_FormSelect.default options={value.variables[key].enum} onChange={e => {
-              dispatch((0, _slice.setServerVariable)({
+              dispatch((0, _slice.setServerVariable)(JSON.stringify({
                 key,
                 value: e.target.value
-              }));
-            }} />
+              })));
+            }} value={value === null || value === void 0 ? void 0 : value.variables[key].default} />
                 </_FormItem.default>;
         }
 
         return <_FormItem.default label={key}>
                 <_FormTextInput.default placeholder={(_value$variables3 = value.variables) === null || _value$variables3 === void 0 ? void 0 : _value$variables3[key].default} onChange={e => {
-            dispatch((0, _slice.setServerVariable)({
+            dispatch((0, _slice.setServerVariable)(JSON.stringify({
               key,
               value: e.target.value
-            }));
-          }} />
+            })));
+          }} value={value === null || value === void 0 ? void 0 : (_value$variables4 = value.variables) === null || _value$variables4 === void 0 ? void 0 : _value$variables4[key].default} />
               </_FormItem.default>;
       })}
       </_FloatingButton.default>

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

@@ -19,13 +19,14 @@ const slice = (0, _toolkit.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) => {
       var _state$value;
 
       if ((_state$value = state.value) !== null && _state$value !== void 0 && _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;
       }
     }
   }

package/lib/theme/ApiDemoPanel/index.js

@@ -7,28 +7,18 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
-
 var _postmanCollection = _interopRequireDefault(require("@paloaltonetworks/postman-collection"));
 
-var _reactRedux = require("react-redux");
-
-var _slice = require("./Authorization/slice");
-
 var _Curl = _interopRequireDefault(require("./Curl"));
 
 var _MethodEndpoint = _interopRequireDefault(require("./MethodEndpoint"));
 
-var _persistanceMiddleware = require("./persistanceMiddleware");
-
 var _Request = _interopRequireDefault(require("./Request"));
 
 var _Response = _interopRequireDefault(require("./Response"));
 
 var _SecuritySchemes = _interopRequireDefault(require("./SecuritySchemes"));
 
-var _store = require("./store");
-
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,74 +33,20 @@ function ApiDemoPanel({
   item,
   infoPath
 }) {
-  var _item$responses, _item$requestBody$con, _item$requestBody, _item$servers, _item$parameters, _xCodeSamples;
+  var _xCodeSamples;
 
-  const {
-    siteConfig
-  } = (0, _useDocusaurusContext.default)();
-  const themeConfig = siteConfig.themeConfig;
-  const options = themeConfig.api;
   const postman = new _postmanCollection.default.Request(item.postman);
-  const acceptArray = Array.from(new Set(Object.values((_item$responses = item.responses) !== null && _item$responses !== void 0 ? _item$responses : {}).map(response => {
-    var _response$content;
-
-    return Object.keys((_response$content = response.content) !== null && _response$content !== void 0 ? _response$content : {});
-  }).flat()));
-  const content = (_item$requestBody$con = (_item$requestBody = item.requestBody) === null || _item$requestBody === void 0 ? void 0 : _item$requestBody.content) !== null && _item$requestBody$con !== void 0 ? _item$requestBody$con : {};
-  const contentTypeArray = Object.keys(content);
-  const servers = (_item$servers = item.servers) !== null && _item$servers !== void 0 ? _item$servers : [];
-  const params = {
-    path: [],
-    query: [],
-    header: [],
-    cookie: []
-  };
-  (_item$parameters = item.parameters) === null || _item$parameters === void 0 ? void 0 : _item$parameters.forEach(param => {
-    const paramType = param.in;
-    const paramsArray = params[paramType];
-    paramsArray.push(param);
-  });
-  const auth = (0, _slice.createAuth)({
-    security: item.security,
-    securitySchemes: item.securitySchemes,
-    options
-  });
-  const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options);
-  const store2 = (0, _store.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 <_reactRedux.Provider store={store2}>
-      <div className={_stylesModule.default.apiDemoPanelContainer}>
-        <_MethodEndpoint.default method={method} path={path} />
-        <_SecuritySchemes.default infoPath={infoPath} />
-        <_Request.default item={item} />
-        <_Response.default />
-        <_Curl.default postman={postman} codeSamples={(_xCodeSamples = item["x-code-samples"]) !== null && _xCodeSamples !== void 0 ? _xCodeSamples : []} />
-      </div>
-    </_reactRedux.Provider>;
+  return <div className={_stylesModule.default.apiDemoPanelContainer}>
+      <_MethodEndpoint.default method={method} path={path} />
+      <_SecuritySchemes.default infoPath={infoPath} />
+      <_Request.default item={item} />
+      <_Response.default />
+      <_Curl.default postman={postman} codeSamples={(_xCodeSamples = item["x-code-samples"]) !== null && _xCodeSamples !== void 0 ? _xCodeSamples : []} />
+    </div>;
 }
 
 var _default = ApiDemoPanel;

package/lib/theme/ApiDemoPanel/persistanceMiddleware.js

@@ -37,6 +37,28 @@ 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") {
+      var _storage$getItem;
+
+      const server = (_storage$getItem = storage.getItem("server")) !== null && _storage$getItem !== void 0 ? _storage$getItem : "{}";
+      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/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;
+}