docusaurus-theme-openapi-docs 0.0.0-1083 → 0.0.0-1085

package/lib/theme/ApiExplorer/{persistanceMiddleware.js → persistenceMiddleware.js}

@@ -6,14 +6,16 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPersistanceMiddleware = createPersistanceMiddleware;
+exports.createPersistenceMiddleware = createPersistenceMiddleware;
 const slice_1 = require("@theme/ApiExplorer/Authorization/slice");
 const storage_utils_1 = require("./storage-utils");
-function createPersistanceMiddleware(options) {
-  const persistanceMiddleware = (storeAPI) => (next) => (action) => {
+function createPersistenceMiddleware(options) {
+  const persistenceMiddleware = (storeAPI) => (next) => (action) => {
     const result = next(action);
     const state = storeAPI.getState();
-    const storage = (0, storage_utils_1.createStorage)("sessionStorage");
+    const storage = (0, storage_utils_1.createStorage)(
+      options?.authPersistence ?? "sessionStorage"
+    );
     if (action.type === slice_1.setAuthData.type) {
       for (const [key, value] of Object.entries(state.auth.data)) {
         if (Object.values(value).filter(Boolean).length > 0) {
@@ -42,13 +44,18 @@ function createPersistanceMiddleware(options) {
       storage.setItem("server", action.payload);
     }
     if (action.type === "server/setServerVariable") {
-      const server = storage.getItem("server") ?? "{}";
+      const server = storage.getItem("server");
+      if (!server) {
+        return result;
+      }
       const variables = JSON.parse(action.payload);
-      let serverObject = JSON.parse(server);
-      serverObject.variables[variables.key].default = variables.value;
-      storage.setItem("server", JSON.stringify(serverObject));
+      const serverObject = JSON.parse(server) ?? {};
+      if (serverObject.variables?.[variables.key]) {
+        serverObject.variables[variables.key].default = variables.value;
+        storage.setItem("server", JSON.stringify(serverObject));
+      }
     }
     return result;
   };
-  return persistanceMiddleware;
+  return persistenceMiddleware;
 }

package/lib/theme/ApiExplorer/storage-utils.d.ts

@@ -1,4 +1,4 @@
 export declare function hashArray(arr: string[]): string;
-type Persistance = false | "localStorage" | "sessionStorage" | undefined;
-export declare function createStorage(persistance: Persistance): Storage;
+type Persistence = false | "localStorage" | "sessionStorage" | undefined;
+export declare function createStorage(persistence: Persistence): Storage;
 export {};

package/lib/theme/ApiExplorer/storage-utils.js

@@ -23,8 +23,8 @@ function hashArray(arr) {
   const res = hashed.join();
   return hash(res);
 }
-function createStorage(persistance) {
-  if (persistance === false) {
+function createStorage(persistence) {
+  if (persistence === false) {
     return {
       getItem: () => null,
       setItem: () => {},
@@ -34,7 +34,7 @@ function createStorage(persistance) {
       length: 0,
     };
   }
-  if (persistance === "sessionStorage") {
+  if (persistence === "sessionStorage") {
     return sessionStorage;
   }
   return localStorage;

package/lib/theme/ApiItem/index.js

@@ -24,7 +24,8 @@ const useDocusaurusContext_1 = __importDefault(
 );
 const useIsBrowser_1 = __importDefault(require("@docusaurus/useIsBrowser"));
 const slice_1 = require("@theme/ApiExplorer/Authorization/slice");
-const persistanceMiddleware_1 = require("@theme/ApiExplorer/persistanceMiddleware");
+const persistenceMiddleware_1 = require("@theme/ApiExplorer/persistenceMiddleware");
+const storage_utils_1 = require("@theme/ApiExplorer/storage-utils");
 const Layout_1 = __importDefault(require("@theme/ApiItem/Layout"));
 const CodeBlock_1 = __importDefault(require("@theme/CodeBlock"));
 const Metadata_1 = __importDefault(require("@theme/DocItem/Metadata"));
@@ -71,11 +72,11 @@ function ApiItem(props) {
   const statusRegex = new RegExp("(20[0-9]|2[1-9][0-9])");
   // Define store2
   let store2 = {};
-  const persistanceMiddleware = (0,
-  persistanceMiddleware_1.createPersistanceMiddleware)(options);
+  const persistenceMiddleware = (0,
+  persistenceMiddleware_1.createPersistenceMiddleware)(options);
   // Init store for SSR
   if (!isBrowser) {
-    store2 = (0, store_1.createStoreWithoutState)({}, [persistanceMiddleware]);
+    store2 = (0, store_1.createStoreWithoutState)({}, [persistenceMiddleware]);
   }
   // Init store for CSR to hydrate components
   if (isBrowser) {
@@ -106,11 +107,14 @@ function ApiItem(props) {
       securitySchemes: api?.securitySchemes,
       options,
     });
+    const storage = (0, storage_utils_1.createStorage)(
+      options?.authPersistence ?? "sessionStorage"
+    );
     // TODO: determine way to rehydrate without flashing
     // const acceptValue = window?.sessionStorage.getItem("accept");
     // const contentTypeValue = window?.sessionStorage.getItem("contentType");
-    const server = window?.sessionStorage.getItem("server");
-    const serverObject = JSON.parse(server) ?? {};
+    const server = storage.getItem("server");
+    const serverObject = server ? JSON.parse(server) : undefined;
     store2 = (0, store_1.createStoreWithState)(
       {
         accept: {
@@ -122,7 +126,7 @@ function ApiItem(props) {
           options: contentTypeArray,
         },
         server: {
-          value: serverObject.url ? serverObject : undefined,
+          value: serverObject?.url ? serverObject : undefined,
           options: servers,
         },
         response: { value: undefined },
@@ -130,7 +134,7 @@ function ApiItem(props) {
         params,
         auth,
       },
-      [persistanceMiddleware]
+      [persistenceMiddleware]
     );
   }
   if (api) {

package/lib/types.d.ts

@@ -3,7 +3,13 @@ import type { JSONSchema4, JSONSchema6, JSONSchema7 } from "json-schema";
 export interface ThemeConfig {
     api?: {
         proxy?: string;
-        authPersistance?: false | "localStorage" | "sessionStorage";
+        /**
+         * Controls how authentication credentials are persisted in the API explorer.
+         * - `false`: No persistence (in-memory only)
+         * - `"sessionStorage"`: Persist for the browser session (default)
+         * - `"localStorage"`: Persist across browser sessions
+         */
+        authPersistence?: false | "sessionStorage" | "localStorage";
         /** Request timeout in milliseconds. Defaults to 30000 (30 seconds). */
         requestTimeout?: number;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-1083",
+  "version": "0.0.0-1085",
   "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-1083",
+    "docusaurus-plugin-openapi-docs": "0.0.0-1085",
     "docusaurus-plugin-sass": "^0.2.6",
     "eslint-plugin-prettier": "^5.5.1"
   },
@@ -81,5 +81,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "cf5831415603ce841036073da0ff9e50db9ed9d8"
+  "gitHead": "26311f52652bf29d0ca59389d5f39707320f1baf"
 }

package/src/theme/ApiExplorer/Authorization/slice.ts

@@ -58,7 +58,7 @@ export function createAuth({
   };
   options?: ThemeConfig["api"];
 }): AuthState {
-  const storage = createStorage("sessionStorage");
+  const storage = createStorage(opts?.authPersistence ?? "sessionStorage");
 
   let data: AuthState["data"] = {};
   let options: AuthState["options"] = {};

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

@@ -0,0 +1,77 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React, { useState } from "react";
+import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
+import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { FileContent, setFileArrayFormBody } from "../slice";
+
+interface FileArrayFormItemProps {
+  id: string;
+  description: string | undefined;
+}
+
+export default function FileArrayFormBodyItem({
+  id,
+  description,
+}: FileArrayFormItemProps): React.JSX.Element {
+  const dispatch = useTypedDispatch();
+  const [fileItems, setFileItems] = useState<
+    Map<number, FileContent["value"] | undefined>
+  >(new Map([[0, undefined]]));
+
+  const handleFileChange = (index: number, file: any) => {
+    const newItems = new Map(fileItems);
+
+    if (file === undefined) {
+      newItems.delete(index);
+
+      setFileItems(newItems);
+
+      dispatch(
+        setFileArrayFormBody({
+          key: id,
+          value: [...newItems.values()].filter((item) => item !== undefined),
+        })
+      );
+      return;
+    }
+
+    let maxIndex = 0;
+
+    newItems.keys().forEach((item) => {
+      maxIndex = item > maxIndex ? item : maxIndex;
+    });
+    newItems.set(index, {
+      src: `/path/to/${file.name}`,
+      content: file,
+    });
+    newItems.set(index + 1, undefined);
+
+    setFileItems(newItems);
+
+    dispatch(
+      setFileArrayFormBody({
+        key: id,
+        value: [...newItems.values()].filter((item) => item !== undefined),
+      })
+    );
+  };
+
+  return (
+    <div>
+      {[...fileItems.keys()].map((index) => (
+        <div key={index}>
+          <FormFileUpload
+            placeholder={description || id}
+            onChange={(file: any) => handleFileChange(index, file)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React from "react";
+import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import LiveApp from "@theme/ApiExplorer/LiveEditor";
+import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { SchemaObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+import { clearFormBodyKey, setFileFormBody, setStringFormBody } from "../slice";
+import FileArrayFormBodyItem from "../FileArrayFormBodyItem";
+
+interface FormBodyItemProps {
+  schemaObject: SchemaObject;
+  id: string;
+  schema: SchemaObject;
+}
+
+export default function FormBodyItem({
+  schemaObject,
+  id,
+  schema,
+}: FormBodyItemProps): React.JSX.Element {
+  const dispatch = useTypedDispatch();
+
+  if (
+    schemaObject.type === "array" &&
+    schemaObject.items?.format === "binary"
+  ) {
+    return (
+      <FileArrayFormBodyItem id={id} description={schemaObject.description} />
+    );
+  }
+
+  if (schemaObject.format === "binary") {
+    return (
+      <FormFileUpload
+        placeholder={schemaObject.description || id}
+        onChange={(file: any) => {
+          if (file === undefined) {
+            dispatch(clearFormBodyKey(id));
+            return;
+          }
+          dispatch(
+            setFileFormBody({
+              key: id,
+              value: {
+                src: `/path/to/${file.name}`,
+                content: file,
+              },
+            })
+          );
+        }}
+      />
+    );
+  }
+
+  if (
+    schemaObject.type === "object" &&
+    (schemaObject.example || schemaObject.examples)
+  ) {
+    const objectExample = JSON.stringify(
+      schemaObject.example ?? schemaObject.examples[0],
+      null,
+      2
+    );
+
+    return (
+      <LiveApp
+        action={(code: string) =>
+          dispatch(setStringFormBody({ key: id, value: code }))
+        }
+      >
+        {objectExample}
+      </LiveApp>
+    );
+  }
+
+  if (
+    schemaObject.enum &&
+    schemaObject.enum.every((value) => typeof value === "string")
+  ) {
+    return (
+      <FormSelect
+        options={["---", ...schemaObject.enum]}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+          const val = e.target.value;
+          if (val === "---") {
+            dispatch(clearFormBodyKey(id));
+          } else {
+            dispatch(
+              setStringFormBody({
+                key: id,
+                value: val,
+              })
+            );
+          }
+        }}
+      />
+    );
+  }
+  // TODO: support all the other types.
+  return (
+    <FormTextInput
+      paramName={id}
+      isRequired={
+        Array.isArray(schema.required) && schema.required.includes(id)
+      }
+      placeholder={schemaObject.description || id}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        dispatch(setStringFormBody({ key: id, value: e.target.value }));
+      }}
+    />
+  );
+}

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

@@ -12,8 +12,6 @@ import { translate } from "@docusaurus/Translate";
 import json2xml from "@theme/ApiExplorer/Body/json2xml";
 import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
 import FormItem from "@theme/ApiExplorer/FormItem";
-import FormSelect from "@theme/ApiExplorer/FormSelect";
-import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import LiveApp from "@theme/ApiExplorer/LiveEditor";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import Markdown from "@theme/Markdown";
@@ -23,13 +21,8 @@ import { OPENAPI_BODY, OPENAPI_REQUEST } from "@theme/translationIds";
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import format from "xml-formatter";
 
-import {
-  clearFormBodyKey,
-  clearRawBody,
-  setFileFormBody,
-  setFileRawBody,
-  setStringFormBody,
-} from "./slice";
+import { clearRawBody, setFileRawBody, setStringRawBody } from "./slice";
+import FormBodyItem from "./FormBodyItem";
 
 export interface Props {
   jsonRequestBodyExample: string;
@@ -130,96 +123,23 @@ function Body({
   ) {
     return (
       <FormItem className="openapi-explorer__form-item-body-container">
-        <div>
-          {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
-            if (val.format === "binary") {
-              return (
-                <FormItem
-                  key={key}
-                  label={key}
-                  required={
-                    Array.isArray(schema.required) &&
-                    schema.required.includes(key)
-                  }
-                >
-                  <FormFileUpload
-                    placeholder={val.description || key}
-                    onChange={(file: any) => {
-                      if (file === undefined) {
-                        dispatch(clearFormBodyKey(key));
-                        return;
-                      }
-                      dispatch(
-                        setFileFormBody({
-                          key: key,
-                          value: {
-                            src: `/path/to/${file.name}`,
-                            content: file,
-                          },
-                        })
-                      );
-                    }}
-                  />
-                </FormItem>
-              );
-            }
-
-            if (val.enum) {
-              return (
-                <FormItem
-                  key={key}
-                  label={key}
-                  required={
-                    Array.isArray(schema.required) &&
-                    schema.required.includes(key)
-                  }
-                >
-                  <FormSelect
-                    options={["---", ...val.enum]}
-                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                      const val = e.target.value;
-                      if (val === "---") {
-                        dispatch(clearFormBodyKey(key));
-                      } else {
-                        dispatch(
-                          setStringFormBody({
-                            key: key,
-                            value: val,
-                          })
-                        );
-                      }
-                    }}
-                  />
-                </FormItem>
-              );
-            }
-            // TODO: support all the other types.
-            return (
-              <FormItem
-                key={key}
-                label={key}
-                required={
-                  Array.isArray(schema.required) &&
-                  schema.required.includes(key)
-                }
-              >
-                <FormTextInput
-                  paramName={key}
-                  isRequired={
-                    Array.isArray(schema.required) &&
-                    schema.required.includes(key)
-                  }
-                  placeholder={val.description || key}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    dispatch(
-                      setStringFormBody({ key: key, value: e.target.value })
-                    );
-                  }}
-                />
-              </FormItem>
-            );
-          })}
-        </div>
+        {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
+          return (
+            <FormItem
+              key={key}
+              label={key}
+              required={
+                Array.isArray(schema.required) && schema.required.includes(key)
+              }
+            >
+              <FormBodyItem
+                schemaObject={val}
+                id={key}
+                schema={schema}
+              ></FormBodyItem>
+            </FormItem>
+          );
+        })}
       </FormItem>
     );
   }
@@ -348,7 +268,11 @@ function Body({
             value="Example (from schema)"
             default
           >
-            <LiveApp action={dispatch} language={language} required={required}>
+            <LiveApp
+              action={(code: string) => dispatch(setStringRawBody(code))}
+              language={language}
+              required={required}
+            >
               {defaultBody}
             </LiveApp>
           </TabItem>
@@ -357,7 +281,7 @@ function Body({
             {example.summary && <Markdown>{example.summary}</Markdown>}
             {exampleBody && (
               <LiveApp
-                action={dispatch}
+                action={(code: string) => dispatch(setStringRawBody(code))}
                 language={language}
                 required={required}
               >
@@ -383,7 +307,11 @@ function Body({
             value="Example (from schema)"
             default
           >
-            <LiveApp action={dispatch} language={language} required={required}>
+            <LiveApp
+              action={(code: string) => dispatch(setStringRawBody(code))}
+              language={language}
+              required={required}
+            >
               {defaultBody}
             </LiveApp>
           </TabItem>
@@ -397,7 +325,10 @@ function Body({
               >
                 {example.summary && <Markdown>{example.summary}</Markdown>}
                 {example.body && (
-                  <LiveApp action={dispatch} language={language}>
+                  <LiveApp
+                    action={(code: string) => dispatch(setStringRawBody(code))}
+                    language={language}
+                  >
                     {example.body}
                   </LiveApp>
                 )}
@@ -411,7 +342,11 @@ function Body({
 
   return (
     <FormItem>
-      <LiveApp action={dispatch} language={language} required={required}>
+      <LiveApp
+        action={(code: string) => dispatch(setStringRawBody(code))}
+        language={language}
+        required={required}
+      >
         {defaultBody}
       </LiveApp>
     </FormItem>

package/src/theme/ApiExplorer/Body/slice.ts

@@ -15,12 +15,24 @@ export interface FileContent {
   };
 }
 
+export interface FileArrayContent {
+  type: "file[]";
+  value: {
+    src: string;
+    content: Blob;
+  }[];
+}
+
 export interface StringContent {
   type: "string";
   value?: string;
 }
 
-export type Content = FileContent | StringContent | undefined;
+export type Content =
+  | FileContent
+  | FileArrayContent
+  | StringContent
+  | undefined;
 
 export interface FormBody {
   type: "form";
@@ -118,6 +130,32 @@ export const slice = createSlice({
       };
       return state;
     },
+    setFileArrayFormBody: (
+      state,
+      action: PayloadAction<{
+        key: string;
+        value: FileArrayContent["value"];
+      }>
+    ) => {
+      if (state?.type !== "form") {
+        return {
+          type: "form",
+          content: {
+            [action.payload.key]: {
+              type: "file[]",
+              value: action.payload.value,
+            },
+          },
+        };
+      }
+
+      state.content[action.payload.key] = {
+        type: "file[]",
+        value: action.payload.value,
+      };
+
+      return state;
+    },
   },
 });
 
@@ -128,6 +166,7 @@ export const {
   clearFormBodyKey,
   setStringFormBody,
   setFileFormBody,
+  setFileArrayFormBody,
 } = slice.actions;
 
 export default slice.reducer;

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

@@ -11,7 +11,6 @@ import { usePrismTheme } from "@docusaurus/theme-common";
 import { translate } from "@docusaurus/Translate";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { ErrorMessage } from "@hookform/error-message";
-import { setStringRawBody } from "@theme/ApiExplorer/Body/slice";
 import { OPENAPI_FORM } from "@theme/translationIds";
 import clsx from "clsx";
 import { Controller, useFormContext } from "react-hook-form";
@@ -56,8 +55,8 @@ function App({
   const [code, setCode] = React.useState(children.replace(/\n$/, ""));
 
   useEffect(() => {
-    action(setStringRawBody(code));
-  }, [action, code]);
+    action(code);
+  }, [code]);
 
   const {
     control,