docusaurus-theme-openapi-docs 0.0.0-475 → 0.0.0-477

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

@@ -7,8 +7,12 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _TabItem = _interopRequireDefault(require("@theme/TabItem"));
+
 var _xmlFormatter = _interopRequireDefault(require("xml-formatter"));
 
+var _SchemaTabs = _interopRequireDefault(require("../../SchemaTabs"));
+
 var _ContentType = _interopRequireDefault(require("../ContentType"));
 
 var _FormSelect = _interopRequireDefault(require("../FormSelect"));
@@ -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/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/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/Body/index.js

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
-import format from "xml-formatter";
+import TabItem from "@theme/TabItem";
+import format from "xml-formatter"; // @ts-ignore
+
+import SchemaTabs from "../../SchemaTabs";
 import ContentType from "../ContentType";
 import FormSelect from "../FormSelect";
 import { useTypedDispatch, useTypedSelector } from "../hooks";
@@ -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/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/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": "0.0.0-475",
+  "version": "0.0.0-477",
   "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": "0.0.0-475",
+    "docusaurus-plugin-openapi-docs": "0.0.0-477",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -70,5 +70,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "4ab052860928721c4abc6aacbadeab251c45560f"
+  "gitHead": "51d2b956ac517e84c135d88beb38418e766d7bae"
 }

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

@@ -7,9 +7,12 @@
 
 import React from "react";
 
+import TabItem from "@theme/TabItem";
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import format from "xml-formatter";
 
+// @ts-ignore
+import SchemaTabs from "../../SchemaTabs";
 import ContentType from "../ContentType";
 import FormSelect from "../FormSelect";
 import { useTypedDispatch, useTypedSelector } from "../hooks";
@@ -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/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/src/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/src/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",
           }