docusaurus-theme-openapi-docs 0.0.0-1130 → 0.0.0-1153

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) {