docusaurus-theme-openapi-docs 4.5.0 → 4.6.0

package/lib/theme/StatusCodes/index.js

@@ -12,12 +12,14 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const Translate_1 = require("@docusaurus/Translate");
 const ApiTabs_1 = __importDefault(require("@theme/ApiTabs"));
 const Details_1 = __importDefault(require("@theme/Details"));
 const Markdown_1 = __importDefault(require("@theme/Markdown"));
 const ResponseHeaders_1 = __importDefault(require("@theme/ResponseHeaders"));
 const ResponseSchema_1 = __importDefault(require("@theme/ResponseSchema"));
 const TabItem_1 = __importDefault(require("@theme/TabItem"));
+const translationIds_1 = require("@theme/translationIds");
 const StatusCodes = ({ label, id, responses }) => {
   if (!responses) return null;
   const codes = Object.keys(responses);
@@ -61,7 +63,11 @@ const StatusCodes = ({ label, id, responses }) => {
                   react_1.default.createElement(
                     "strong",
                     null,
-                    "Response Headers"
+                    (0, Translate_1.translate)({
+                      id: translationIds_1.OPENAPI_STATUS_CODES
+                        .RESPONSE_HEADERS,
+                      message: "Response Headers",
+                    })
                   )
                 ),
               },
@@ -70,7 +76,10 @@ const StatusCodes = ({ label, id, responses }) => {
               })
             ),
           react_1.default.createElement(ResponseSchema_1.default, {
-            title: "Schema",
+            title: (0, Translate_1.translate)({
+              id: translationIds_1.OPENAPI_STATUS_CODES.SCHEMA_TITLE,
+              message: "Schema",
+            }),
             body: { content: response.content },
           })
         )

package/lib/theme/styles.scss

@@ -41,6 +41,8 @@
 @use "./CodeSamples/CodeSamples";
 /* Markdown Styling */
 @use "./Markdown/Details/Details";
+/* Example Styling */
+@use "./Example/Example";
 
 :root {
   --openapi-required: var(--ifm-color-danger);
@@ -67,6 +69,9 @@
   --openapi-code-tab-border-color-java: #0374bd;
   --openapi-code-tab-border-color-powershell: #00adef;
   --openapi-code-tab-shadow-color-python: rgba(255, 219, 80, 0.25);
+  --openapi-code-tab-shadow-color-curl: var(
+    --openapi-code-tab-shadow-color-bash
+  );
   --openapi-code-tab-shadow-color-bash: rgba(250, 56, 62, 0.25);
   --openapi-code-tab-shadow-color-go: rgba(84, 199, 236, 0.25);
   --openapi-code-tab-shadow-color-js: rgba(255, 186, 0, 0.25);

package/lib/theme/translationIds.d.ts

@@ -0,0 +1,90 @@
+export declare const OPENAPI_RESPONSE: {
+    TITLE: string;
+    CLEAR: string;
+    PLACEHOLDER: string;
+    HEADERS_TAB: string;
+};
+export declare const OPENAPI_TABS: {
+    RESPONSES_LABEL: string;
+};
+export declare const OPENAPI_REQUEST: {
+    BODY_TITLE: string;
+    ACCEPT_TITLE: string;
+    SEND_BUTTON: string;
+    REQUIRED_LABEL: string;
+    REQUEST_TITLE: string;
+    COLLAPSE_ALL: string;
+    EXPAND_ALL: string;
+    BASE_URL_TITLE: string;
+    AUTH_TITLE: string;
+    PARAMETERS_TITLE: string;
+    FETCHING_MESSAGE: string;
+    CONNECTION_FAILED: string;
+    ERROR_TIMEOUT: string;
+    ERROR_NETWORK: string;
+    ERROR_CORS: string;
+    ERROR_UNKNOWN: string;
+};
+export declare const OPENAPI_SERVER: {
+    EDIT_BUTTON: string;
+    HIDE_BUTTON: string;
+};
+export declare const OPENAPI_PARAM_OPTIONS: {
+    SHOW_OPTIONAL: string;
+    HIDE_OPTIONAL: string;
+};
+export declare const OPENAPI_FORM_FILE_UPLOAD: {
+    CLEAR_BUTTON: string;
+};
+export declare const OPENAPI_FORM: {
+    FIELD_REQUIRED: string;
+};
+export declare const OPENAPI_AUTH: {
+    BEARER_TOKEN: string;
+    USERNAME: string;
+    PASSWORD: string;
+    SECURITY_SCHEME: string;
+};
+export declare const OPENAPI_RESPONSE_EXAMPLES: {
+    EXAMPLE: string;
+    AUTO_EXAMPLE: string;
+};
+export declare const OPENAPI_BODY: {
+    EXAMPLE_FROM_SCHEMA: string;
+};
+export declare const OPENAPI_STATUS_CODES: {
+    RESPONSE_HEADERS: string;
+    SCHEMA_TITLE: string;
+};
+export declare const OPENAPI_SCHEMA: {
+    NO_SCHEMA: string;
+};
+export declare const OPENAPI_SCHEMA_ITEM: {
+    REQUIRED: string;
+    DEPRECATED: string;
+    NULLABLE: string;
+    DEFAULT_VALUE: string;
+    EXAMPLE: string;
+    EXAMPLES: string;
+    DESCRIPTION: string;
+    CONSTANT_VALUE: string;
+    ENUM_VALUE: string;
+    ENUM_DESCRIPTION: string;
+    POSSIBLE_VALUES: string;
+    ONE_OF: string;
+    ANY_OF: string;
+};
+export declare const OPENAPI_PARAMS_DETAILS: {
+    PARAMETERS_TITLE: string;
+};
+export declare const OPENAPI_SECURITY_SCHEMES: {
+    NAME: string;
+    TYPE: string;
+    SCOPES: string;
+    IN: string;
+    FLOWS: string;
+    DESCRIPTION: string;
+    SCHEME: string;
+    BEARER_FORMAT: string;
+    OPEN_ID_CONNECT_URL: string;
+};

package/lib/theme/translationIds.js

@@ -0,0 +1,114 @@
+"use strict";
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OPENAPI_SECURITY_SCHEMES =
+  exports.OPENAPI_PARAMS_DETAILS =
+  exports.OPENAPI_SCHEMA_ITEM =
+  exports.OPENAPI_SCHEMA =
+  exports.OPENAPI_STATUS_CODES =
+  exports.OPENAPI_BODY =
+  exports.OPENAPI_RESPONSE_EXAMPLES =
+  exports.OPENAPI_AUTH =
+  exports.OPENAPI_FORM =
+  exports.OPENAPI_FORM_FILE_UPLOAD =
+  exports.OPENAPI_PARAM_OPTIONS =
+  exports.OPENAPI_SERVER =
+  exports.OPENAPI_REQUEST =
+  exports.OPENAPI_TABS =
+  exports.OPENAPI_RESPONSE =
+    void 0;
+exports.OPENAPI_RESPONSE = {
+  TITLE: "theme.openapi.response.title",
+  CLEAR: "theme.openapi.response.clear",
+  PLACEHOLDER: "theme.openapi.response.placeholder",
+  HEADERS_TAB: "theme.openapi.response.headersTab",
+};
+exports.OPENAPI_TABS = {
+  RESPONSES_LABEL: "theme.openapi.tabs.responses.label",
+};
+exports.OPENAPI_REQUEST = {
+  BODY_TITLE: "theme.openapi.request.body.title",
+  ACCEPT_TITLE: "theme.openapi.request.accept.title",
+  SEND_BUTTON: "theme.openapi.request.sendButton",
+  REQUIRED_LABEL: "theme.openapi.request.requiredLabel",
+  REQUEST_TITLE: "theme.openapi.request.title",
+  COLLAPSE_ALL: "theme.openapi.request.collapseAll",
+  EXPAND_ALL: "theme.openapi.request.expandAll",
+  BASE_URL_TITLE: "theme.openapi.request.baseUrl.title",
+  AUTH_TITLE: "theme.openapi.request.auth.title",
+  PARAMETERS_TITLE: "theme.openapi.request.parameters.title",
+  FETCHING_MESSAGE: "theme.openapi.request.fetchingMessage",
+  CONNECTION_FAILED: "theme.openapi.request.connectionFailed",
+  ERROR_TIMEOUT: "theme.openapi.request.error.timeout",
+  ERROR_NETWORK: "theme.openapi.request.error.network",
+  ERROR_CORS: "theme.openapi.request.error.cors",
+  ERROR_UNKNOWN: "theme.openapi.request.error.unknown",
+};
+exports.OPENAPI_SERVER = {
+  EDIT_BUTTON: "theme.openapi.server.editButton",
+  HIDE_BUTTON: "theme.openapi.server.hideButton",
+};
+exports.OPENAPI_PARAM_OPTIONS = {
+  SHOW_OPTIONAL: "theme.openapi.paramOptions.showOptional",
+  HIDE_OPTIONAL: "theme.openapi.paramOptions.hideOptional",
+};
+exports.OPENAPI_FORM_FILE_UPLOAD = {
+  CLEAR_BUTTON: "theme.openapi.formFileUpload.clearButton",
+};
+exports.OPENAPI_FORM = {
+  FIELD_REQUIRED: "theme.openapi.form.fieldRequired",
+};
+exports.OPENAPI_AUTH = {
+  BEARER_TOKEN: "theme.openapi.auth.bearerToken",
+  USERNAME: "theme.openapi.auth.username",
+  PASSWORD: "theme.openapi.auth.password",
+  SECURITY_SCHEME: "theme.openapi.auth.securityScheme",
+};
+exports.OPENAPI_RESPONSE_EXAMPLES = {
+  EXAMPLE: "theme.openapi.responseExamples.example",
+  AUTO_EXAMPLE: "theme.openapi.responseExamples.autoExample",
+};
+exports.OPENAPI_BODY = {
+  EXAMPLE_FROM_SCHEMA: "theme.openapi.body.exampleFromSchema",
+};
+exports.OPENAPI_STATUS_CODES = {
+  RESPONSE_HEADERS: "theme.openapi.statusCodes.responseHeaders",
+  SCHEMA_TITLE: "theme.openapi.statusCodes.schemaTitle",
+};
+exports.OPENAPI_SCHEMA = {
+  NO_SCHEMA: "theme.openapi.schema.noSchema",
+};
+exports.OPENAPI_SCHEMA_ITEM = {
+  REQUIRED: "theme.openapi.schemaItem.required",
+  DEPRECATED: "theme.openapi.schemaItem.deprecated",
+  NULLABLE: "theme.openapi.schemaItem.nullable",
+  DEFAULT_VALUE: "theme.openapi.schemaItem.defaultValue",
+  EXAMPLE: "theme.openapi.schemaItem.example",
+  EXAMPLES: "theme.openapi.schemaItem.examples",
+  DESCRIPTION: "theme.openapi.schemaItem.description",
+  CONSTANT_VALUE: "theme.openapi.schemaItem.constantValue",
+  ENUM_VALUE: "theme.openapi.schemaItem.enumValue",
+  ENUM_DESCRIPTION: "theme.openapi.schemaItem.enumDescription",
+  POSSIBLE_VALUES: "theme.openapi.schemaItem.possibleValues",
+  ONE_OF: "theme.openapi.schemaItem.oneOf",
+  ANY_OF: "theme.openapi.schemaItem.anyOf",
+};
+exports.OPENAPI_PARAMS_DETAILS = {
+  PARAMETERS_TITLE: "theme.openapi.paramsDetails.parametersTitle",
+};
+exports.OPENAPI_SECURITY_SCHEMES = {
+  NAME: "theme.openapi.securitySchemes.name",
+  TYPE: "theme.openapi.securitySchemes.type",
+  SCOPES: "theme.openapi.securitySchemes.scopes",
+  IN: "theme.openapi.securitySchemes.in",
+  FLOWS: "theme.openapi.securitySchemes.flows",
+  DESCRIPTION: "theme.openapi.securitySchemes.description",
+  SCHEME: "theme.openapi.securitySchemes.scheme",
+  BEARER_FORMAT: "theme.openapi.securitySchemes.bearerFormat",
+  OPEN_ID_CONNECT_URL: "theme.openapi.securitySchemes.openIdConnectUrl",
+};

package/lib/types.d.ts

@@ -3,7 +3,15 @@ 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;
     };
 }
 export type JSONSchema = JSONSchema4 | JSONSchema6 | JSONSchema7;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -31,45 +31,45 @@
     "@docusaurus/theme-classic": "^3.5.0",
     "@docusaurus/theme-common": "^3.5.0",
     "@docusaurus/types": "^3.5.0",
-    "@types/crypto-js": "^4.1.0",
-    "@types/file-saver": "^2.0.5",
-    "@types/lodash": "^4.14.176",
+    "@types/crypto-js": "^4.2.2",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash": "^4.17.20",
     "@types/pako": "^2.0.3",
     "@types/postman-collection": "^3.5.11",
     "@types/react-modal": "^3.16.3",
-    "concurrently": "^5.2.0",
-    "docusaurus-plugin-openapi-docs": "^4.5.0",
-    "docusaurus-plugin-sass": "^0.2.3",
-    "eslint-plugin-prettier": "^5.0.1"
+    "concurrently": "^9.2.0",
+    "docusaurus-plugin-openapi-docs": "^4.6.0",
+    "docusaurus-plugin-sass": "^0.2.6",
+    "eslint-plugin-prettier": "^5.5.1"
   },
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
-    "@reduxjs/toolkit": "^1.7.1",
+    "@reduxjs/toolkit": "^2.8.2",
     "allof-merge": "^0.6.6",
     "buffer": "^6.0.3",
-    "clsx": "^1.1.1",
-    "copy-text-to-clipboard": "^3.1.0",
-    "crypto-js": "^4.1.1",
+    "clsx": "^2.1.1",
+    "copy-text-to-clipboard": "^3.2.0",
+    "crypto-js": "^4.2.0",
     "file-saver": "^2.0.5",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "pako": "^2.1.0",
-    "postman-code-generators": "^1.10.1",
-    "postman-collection": "^4.4.0",
-    "prism-react-renderer": "^2.3.0",
+    "postman-code-generators": "^2.0.0",
+    "postman-collection": "^5.0.2",
+    "prism-react-renderer": "^2.4.1",
     "process": "^0.11.10",
-    "react-hook-form": "^7.43.8",
-    "react-live": "^4.0.0",
+    "react-hook-form": "^7.59.0",
+    "react-live": "^4.1.8",
     "react-magic-dropzone": "^1.0.1",
-    "react-markdown": "^8.0.1",
-    "react-modal": "^3.15.1",
-    "react-redux": "^7.2.0",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "3.0.1",
-    "sass": "^1.80.4",
-    "sass-loader": "^16.0.2",
+    "react-markdown": "^10.1.0",
+    "react-modal": "^3.16.3",
+    "react-redux": "^9.2.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "4.0.1",
+    "sass": "^1.89.2",
+    "sass-loader": "^16.0.5",
     "unist-util-visit": "^5.0.0",
-    "url": "^0.11.1",
-    "xml-formatter": "^2.6.1"
+    "url": "^0.11.4",
+    "xml-formatter": "^3.6.6"
   },
   "peerDependencies": {
     "@docusaurus/theme-common": "^3.5.0",
@@ -81,5 +81,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "cb0ed6e02d7a963d51073e2bfd78d944fbb7ee34"
+  "gitHead": "c7c5ca9934031d166faa0740746ef1a39e72982d"
 }

package/src/markdown/schema.ts

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+import { translate } from "@docusaurus/Translate";
+
+import { OPENAPI_SCHEMA_ITEM } from "../theme/translationIds";
 import { SchemaObject } from "../types";
 
 function prettyName(schema: SchemaObject, circular?: boolean) {
@@ -40,6 +43,10 @@ function prettyName(schema: SchemaObject, circular?: boolean) {
     // return schema.type;
   }
 
+  if (Array.isArray(schema.type)) {
+    return schema.type.join(" | ");
+  }
+
   return schema.title ?? schema.type;
 }
 
@@ -72,7 +79,10 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
     return getQualifierMessage(schema.items);
   }
 
-  let message = "**Possible values:** ";
+  let message = `**${translate({
+    id: OPENAPI_SCHEMA_ITEM.POSSIBLE_VALUES,
+    message: "Possible values:",
+  })}** `;
 
   let qualifierGroups = [];
 

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

@@ -7,10 +7,12 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
 import FormItem from "@theme/ApiExplorer/FormItem";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { OPENAPI_AUTH } from "@theme/translationIds";
 
 import { setAuthData, setSelectedAuth } from "./slice";
 
@@ -32,11 +34,16 @@ function Authorization() {
   return (
     <div>
       {optionKeys.length > 1 && (
-        <FormItem label="Security Scheme">
+        <FormItem
+          label={translate({
+            id: OPENAPI_AUTH.SECURITY_SCHEME,
+            message: "Security Scheme",
+          })}
+        >
           <FormSelect
             options={optionKeys}
             value={selected}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               dispatch(setSelectedAuth(e.target.value));
             }}
           />
@@ -45,9 +52,18 @@ function Authorization() {
       {selectedAuth.map((a: any) => {
         if (a.type === "http" && a.scheme === "bearer") {
           return (
-            <FormItem label="Bearer Token" key={a.key + "-bearer"}>
+            <FormItem
+              label={translate({
+                id: OPENAPI_AUTH.BEARER_TOKEN,
+                message: "Bearer Token",
+              })}
+              key={a.key + "-bearer"}
+            >
               <FormTextInput
-                placeholder="Bearer Token"
+                placeholder={translate({
+                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  message: "Bearer Token",
+                })}
                 password
                 value={data[a.key].token ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,9 +83,18 @@ function Authorization() {
 
         if (a.type === "oauth2") {
           return (
-            <FormItem label="Bearer Token" key={a.key + "-oauth2"}>
+            <FormItem
+              label={translate({
+                id: OPENAPI_AUTH.BEARER_TOKEN,
+                message: "Bearer Token",
+              })}
+              key={a.key + "-oauth2"}
+            >
               <FormTextInput
-                placeholder="Bearer Token"
+                placeholder={translate({
+                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  message: "Bearer Token",
+                })}
                 password
                 value={data[a.key].token ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -90,9 +115,17 @@ function Authorization() {
         if (a.type === "http" && a.scheme === "basic") {
           return (
             <React.Fragment key={a.key + "-basic"}>
-              <FormItem label="Username">
+              <FormItem
+                label={translate({
+                  id: OPENAPI_AUTH.USERNAME,
+                  message: "Username",
+                })}
+              >
                 <FormTextInput
-                  placeholder="Username"
+                  placeholder={translate({
+                    id: OPENAPI_AUTH.USERNAME,
+                    message: "Username",
+                  })}
                   value={data[a.key].username ?? ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     const value = e.target.value;
@@ -106,9 +139,17 @@ function Authorization() {
                   }}
                 />
               </FormItem>
-              <FormItem label="Password">
+              <FormItem
+                label={translate({
+                  id: OPENAPI_AUTH.PASSWORD,
+                  message: "Password",
+                })}
+              >
                 <FormTextInput
-                  placeholder="Password"
+                  placeholder={translate({
+                    id: OPENAPI_AUTH.PASSWORD,
+                    message: "Password",
+                  })}
                   password
                   value={data[a.key].password ?? ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {

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>
+  );
+}