docusaurus-theme-openapi-docs 0.0.0-1151 → 0.0.0-1154

package/lib/theme/ApiExplorer/Body/FileArrayFormBodyItem/index.js

@@ -92,10 +92,6 @@ function FileArrayFormBodyItem({ id, description }) {
       );
       return;
     }
-    let maxIndex = 0;
-    newItems.keys().forEach((item) => {
-      maxIndex = item > maxIndex ? item : maxIndex;
-    });
     newItems.set(index, {
       src: `/path/to/${file.name}`,
       content: file,

package/lib/theme/ApiExplorer/Body/FormBodyItem/index.d.ts

@@ -6,6 +6,7 @@ interface FormBodyItemProps {
     schema: SchemaObject;
     label?: string;
     required?: boolean;
+    exampleValue?: SchemaObject["example"];
 }
-export default function FormBodyItem({ schemaObject, id, schema, label, required, }: FormBodyItemProps): React.JSX.Element;
+export default function FormBodyItem({ schemaObject, id, schema, label, required, exampleValue, }: FormBodyItemProps): React.JSX.Element;
 export {};

package/lib/theme/ApiExplorer/Body/FormBodyItem/index.js

@@ -5,6 +5,62 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o)
+            if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null)
+        for (var k = ownKeys(mod), i = 0; i < k.length; i++)
+          if (k[i] !== "default") __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
 var __importDefault =
   (this && this.__importDefault) ||
   function (mod) {
@@ -12,7 +68,7 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = FormBodyItem;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const FormFileUpload_1 = __importDefault(
   require("@theme/ApiExplorer/FormFileUpload")
 );
@@ -27,8 +83,30 @@ const FileArrayFormBodyItem_1 = __importDefault(
   require("../FileArrayFormBodyItem")
 );
 const slice_1 = require("../slice");
-function FormBodyItem({ schemaObject, id, schema, label, required }) {
+function FormBodyItem({
+  schemaObject,
+  id,
+  schema,
+  label,
+  required,
+  exampleValue,
+}) {
   const dispatch = (0, hooks_1.useTypedDispatch)();
+  const [value, setValue] = (0, react_1.useState)(() => {
+    let initialValue = exampleValue ?? "";
+    if (schemaObject.type === "object" && exampleValue) {
+      initialValue = JSON.stringify(exampleValue, null, 2);
+    }
+    return initialValue;
+  });
+  (0, react_1.useEffect)(() => {
+    if (value) {
+      dispatch((0, slice_1.setStringFormBody)({ key: id, value }));
+    } else {
+      dispatch((0, slice_1.clearFormBodyKey)(id));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   if (
     schemaObject.type === "array" &&
     schemaObject.items?.format === "binary"
@@ -76,15 +154,7 @@ function FormBodyItem({ schemaObject, id, schema, label, required }) {
       })
     );
   }
-  if (
-    schemaObject.type === "object" &&
-    (schemaObject.example || schemaObject.examples)
-  ) {
-    const objectExample = JSON.stringify(
-      schemaObject.example ?? schemaObject.examples[0],
-      null,
-      2
-    );
+  if (schemaObject.type === "object") {
     return react_1.default.createElement(
       react_1.default.Fragment,
       null,
@@ -99,7 +169,7 @@ function FormBodyItem({ schemaObject, id, schema, label, required }) {
           action: (code) =>
             dispatch((0, slice_1.setStringFormBody)({ key: id, value: code })),
         },
-        objectExample
+        value
       )
     );
   }
@@ -110,9 +180,11 @@ function FormBodyItem({ schemaObject, id, schema, label, required }) {
     return react_1.default.createElement(FormSelect_1.default, {
       label: label,
       required: required,
+      value: value,
       options: ["---", ...schemaObject.enum],
       onChange: (e) => {
         const val = e.target.value;
+        setValue(val);
         if (val === "---") {
           dispatch((0, slice_1.clearFormBodyKey)(id));
         } else {
@@ -130,10 +202,12 @@ function FormBodyItem({ schemaObject, id, schema, label, required }) {
   return react_1.default.createElement(FormTextInput_1.default, {
     label: label,
     required: required,
+    value: value,
     paramName: id,
     isRequired: Array.isArray(schema.required) && schema.required.includes(id),
     placeholder: schemaObject.description || id,
     onChange: (e) => {
+      setValue(e.target.value);
       dispatch(
         (0, slice_1.setStringFormBody)({ key: id, value: e.target.value })
       );

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

@@ -365,20 +365,89 @@ function Body({
     return react_1.default.createElement(
       FormItem_1.default,
       { className: "openapi-explorer__form-item-body-container" },
-      Object.entries(schema.properties ?? {}).map(([key, val]) => {
-        return react_1.default.createElement(
-          FormItem_1.default,
-          { key: key },
-          react_1.default.createElement(FormBodyItem_1.default, {
-            schemaObject: val,
-            id: key,
-            schema: schema,
-            label: key,
-            required:
-              Array.isArray(schema.required) && schema.required.includes(key),
+      react_1.default.createElement(
+        SchemaTabs_1.default,
+        { className: "openapi-tabs__schema", lazy: true },
+        react_1.default.createElement(
+          TabItem_1.default,
+          {
+            label: (0, Translate_1.translate)({
+              id: translationIds_1.OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              message: "Example (from schema)",
+            }),
+            value: "Example (from schema)",
+            default: true,
+          },
+          Object.entries(schema.properties ?? {}).map(([key, val]) => {
+            return react_1.default.createElement(
+              FormItem_1.default,
+              { key: key },
+              react_1.default.createElement(FormBodyItem_1.default, {
+                schemaObject: val,
+                id: key,
+                schema: schema,
+                exampleValue: val.example,
+                label: key,
+                required:
+                  Array.isArray(schema.required) &&
+                  schema.required.includes(key),
+              })
+            );
           })
-        );
-      })
+        ),
+        example &&
+          // @ts-ignore
+          react_1.default.createElement(
+            TabItem_1.default,
+            { label: "Example", value: "example" },
+            Object.entries(schema.properties ?? {}).map(
+              ([schemaKey, schemaVal]) => {
+                return react_1.default.createElement(
+                  FormItem_1.default,
+                  { key: schemaKey },
+                  react_1.default.createElement(FormBodyItem_1.default, {
+                    schemaObject: schemaVal,
+                    id: schemaKey,
+                    schema: schema,
+                    exampleValue: example[schemaKey],
+                    label: schemaKey,
+                    required:
+                      Array.isArray(schema.required) &&
+                      schema.required.includes(schemaKey),
+                  })
+                );
+              }
+            )
+          ),
+        examples &&
+          Object.entries(examples).map(([key, value]) => {
+            return (
+              // @ts-ignore
+              react_1.default.createElement(
+                TabItem_1.default,
+                { label: key, value: key, key: key },
+                Object.entries(schema.properties ?? {}).map(
+                  ([schemaKey, schemaVal]) => {
+                    return react_1.default.createElement(
+                      FormItem_1.default,
+                      { key: schemaKey },
+                      react_1.default.createElement(FormBodyItem_1.default, {
+                        schemaObject: schemaVal,
+                        id: schemaKey,
+                        schema: schema,
+                        exampleValue: value.value?.[schemaKey],
+                        label: schemaKey,
+                        required:
+                          Array.isArray(schema.required) &&
+                          schema.required.includes(schemaKey),
+                      })
+                    );
+                  }
+                )
+              )
+            );
+          })
+      )
     );
   }
   if (exampleBody) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-1151",
+  "version": "0.0.0-1154",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -38,7 +38,7 @@
     "@types/postman-collection": "^3.5.11",
     "@types/react-modal": "^3.16.3",
     "concurrently": "^9.2.0",
-    "docusaurus-plugin-openapi-docs": "0.0.0-1151",
+    "docusaurus-plugin-openapi-docs": "0.0.0-1154",
     "docusaurus-plugin-sass": "^0.2.6",
     "eslint-plugin-prettier": "^5.5.1"
   },
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "ce9f21391974edb2ad7a1a7c2e39700a27bc5123"
+  "gitHead": "0debbc67d743f553056175f125d0df187f4e4939"
 }

package/src/theme/ApiExplorer/Body/FileArrayFormBodyItem/index.tsx

@@ -43,11 +43,6 @@ export default function FileArrayFormBodyItem({
       return;
     }
 
-    let maxIndex = 0;
-
-    newItems.keys().forEach((item) => {
-      maxIndex = item > maxIndex ? item : maxIndex;
-    });
     newItems.set(index, {
       src: `/path/to/${file.name}`,
       content: file,

package/src/theme/ApiExplorer/Body/FormBodyItem/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
 import FormLabel from "@theme/ApiExplorer/FormLabel";
@@ -24,6 +24,7 @@ interface FormBodyItemProps {
   schema: SchemaObject;
   label?: string;
   required?: boolean;
+  exampleValue?: SchemaObject["example"];
 }
 
 export default function FormBodyItem({
@@ -32,8 +33,27 @@ export default function FormBodyItem({
   schema,
   label,
   required,
+  exampleValue,
 }: FormBodyItemProps): React.JSX.Element {
   const dispatch = useTypedDispatch();
+  const [value, setValue] = useState(() => {
+    let initialValue = exampleValue ?? "";
+
+    if (schemaObject.type === "object" && exampleValue) {
+      initialValue = JSON.stringify(exampleValue, null, 2);
+    }
+
+    return initialValue;
+  });
+
+  useEffect(() => {
+    if (value) {
+      dispatch(setStringFormBody({ key: id, value }));
+    } else {
+      dispatch(clearFormBodyKey(id));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   if (
     schemaObject.type === "array" &&
@@ -73,27 +93,18 @@ export default function FormBodyItem({
     );
   }
 
-  if (
-    schemaObject.type === "object" &&
-    (schemaObject.example || schemaObject.examples)
-  ) {
-    const objectExample = JSON.stringify(
-      schemaObject.example ?? schemaObject.examples[0],
-      null,
-      2
-    );
-
+  if (schemaObject.type === "object") {
     return (
-      <>
-        {label && <FormLabel label={label} required={required} />}
-        <LiveApp
-          action={(code: string) =>
-            dispatch(setStringFormBody({ key: id, value: code }))
-          }
-        >
-          {objectExample}
-        </LiveApp>
-      </>
+    <>
+      {label && <FormLabel label={label} required={required} />}
+      <LiveApp
+        action={(code: string) =>
+          dispatch(setStringFormBody({ key: id, value: code }))
+        }
+      >
+        {value}
+      </LiveApp>
+    </>
     );
   }
 
@@ -105,9 +116,11 @@ export default function FormBodyItem({
       <FormSelect
         label={label}
         required={required}
+        value={value}
         options={["---", ...schemaObject.enum]}
         onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
           const val = e.target.value;
+          setValue(val);
           if (val === "---") {
             dispatch(clearFormBodyKey(id));
           } else {
@@ -127,12 +140,14 @@ export default function FormBodyItem({
     <FormTextInput
       label={label}
       required={required}
+      value={value}
       paramName={id}
       isRequired={
         Array.isArray(schema.required) && schema.required.includes(id)
       }
       placeholder={schemaObject.description || id}
       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
         dispatch(setStringFormBody({ key: id, value: e.target.value }));
       }}
     />

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

@@ -316,22 +316,86 @@ function Body({
   ) {
     return (
       <FormItem className="openapi-explorer__form-item-body-container">
-        {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
-          return (
-            <FormItem key={key}>
-              <FormBodyItem
-                schemaObject={val}
-                id={key}
-                schema={schema}
-                label={key}
-                required={
-                  Array.isArray(schema.required) &&
-                  schema.required.includes(key)
+        <SchemaTabs className="openapi-tabs__schema" lazy>
+          {/* @ts-ignore */}
+          <TabItem
+            label={translate({
+              id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              message: "Example (from schema)",
+            })}
+            value="Example (from schema)"
+            default
+          >
+            {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
+              return (
+                <FormItem key={key}>
+                  <FormBodyItem
+                    schemaObject={val}
+                    id={key}
+                    schema={schema}
+                    exampleValue={val.example}
+                    label={key}
+                    required={
+                      Array.isArray(schema.required) &&
+                      schema.required.includes(key)
+                    }
+                  ></FormBodyItem>
+                </FormItem>
+              );
+            })}
+          </TabItem>
+          {example && (
+            // @ts-ignore
+            <TabItem label="Example" value="example">
+              {Object.entries(schema.properties ?? {}).map(
+                ([schemaKey, schemaVal]: any) => {
+                  return (
+                    <FormItem key={schemaKey}>
+                      <FormBodyItem
+                        schemaObject={schemaVal}
+                        id={schemaKey}
+                        schema={schema}
+                        exampleValue={example[schemaKey]}
+                        label={schemaKey}
+                        required={
+                          Array.isArray(schema.required) &&
+                          schema.required.includes(schemaKey)
+                        }
+                      ></FormBodyItem>
+                    </FormItem>
+                  );
                 }
-              />
-            </FormItem>
-          );
-        })}
+              )}
+            </TabItem>
+          )}
+          {examples &&
+            Object.entries(examples).map(([key, value]) => {
+              return (
+                // @ts-ignore
+                <TabItem label={key} value={key} key={key}>
+                  {Object.entries(schema.properties ?? {}).map(
+                    ([schemaKey, schemaVal]: any) => {
+                      return (
+                        <FormItem key={schemaKey}>
+                          <FormBodyItem
+                            schemaObject={schemaVal}
+                            id={schemaKey}
+                            schema={schema}
+                            exampleValue={value.value?.[schemaKey]}
+                            label={schemaKey}
+                            required={
+                              Array.isArray(schema.required) &&
+                              schema.required.includes(schemaKey)
+                            }
+                          ></FormBodyItem>
+                        </FormItem>
+                      );
+                    }
+                  )}
+                </TabItem>
+              );
+            })}
+        </SchemaTabs>
       </FormItem>
     );
   }