docusaurus-theme-openapi-docs 1.1.2 → 1.1.5

package/lib-next/theme/MimeTabs/styles.module.css

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tabItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  margin-top: 0 !important;
+  margin-right: 0.5rem;
+  /* border: 1px solid var(--openapi-code-dim-dark);
+  border-radius: 0; */
+  font-weight: var(--ifm-font-weight-normal);
+  /* color: var(--openapi-code-dim-dark); */
+  font-size: 12px;
+}
+
+.tabItem:active {
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+/* .tabItem:hover {
+  color: var(--ifm-color-emphasis-500) !important;
+} */
+
+.tabItem:last-child {
+  margin-right: 0 !important;
+}
+
+/* Open API Response Code Tabs */
+.mimeTabsTopSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mimeTabsContainer {
+  display: flex;
+  align-items: center;
+  max-width: 390px;
+  /* padding-left: 1rem; */
+  overflow: hidden;
+}
+
+.mimeTabsListContainer {
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+}
+
+.mimeTabsListContainer::-webkit-scrollbar {
+  display: none;
+}
+
+/* Response Code Tabs - Colored Dots */
+.mimeTabDot {
+  width: 12.5px;
+  height: 12.5px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+
+.mimeTabDotSuccess {
+  background-color: var(--ifm-color-success);
+}
+
+.mimeTabDotDanger {
+  background-color: var(--ifm-color-danger);
+}
+
+.mimeTabDotInfo {
+  background-color: var(--ifm-color-info);
+}
+
+.mimeTabActive {
+  border-bottom-color: var(--ifm-tabs-color-active-border);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  color: var(--ifm-tabs-color-active);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.mimeSchemaContainer {
+  max-width: 600px;
+}
+
+/* Tab Arrows */
+.tabArrow {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  border: none;
+  min-width: 1.25rem;
+  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+}
+
+.tabArrow:hover {
+  cursor: pointer;
+}
+
+.tabArrowLeft {
+  transform: rotate(270deg);
+}
+
+.tabArrowRight {
+  transform: rotate(90deg);
+}
+
+@media screen and (max-width: 500px) {
+  .mimeTabsTopSection {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mimeTabsContainer {
+    width: 100%;
+    margin-top: var(--ifm-spacing-vertical);
+    padding: 0;
+  }
+}

package/lib-next/theme/ParamsItem/index.js

@@ -37,6 +37,15 @@ function ParamsItem({
     </div>
   ));
 
+  const renderDefaultValue = guard(
+    schema.items ? schema.items.default : schema.default,
+    (value) => (
+      <div>
+        <ReactMarkdown children={`**Default value:** \`${value}\``} />
+      </div>
+    )
+  );
+
   const renderExample = guard(example, (example) => (
     <div>{`Example: ${example}`}</div>
   ));
@@ -58,6 +67,7 @@ function ParamsItem({
       {renderSchemaName}
       {renderSchemaRequired}
       {renderSchema}
+      {renderDefaultValue}
       {renderDescription}
       {renderExample}
       {renderExamples}

package/lib-next/theme/ResponseSamples/index.js

@@ -0,0 +1,27 @@
+/* ============================================================================
+ * 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 CodeBlock from "@theme/CodeBlock";
+
+import styles from "./styles.module.css";
+
+function ResponseSamples({ responseExample }) {
+  return (
+    <div className={styles.responseSamplesContainer}>
+      <CodeBlock
+        language="javascript"
+        className={styles.responseSamplesCodeBlock}
+      >
+        {responseExample}
+      </CodeBlock>
+    </div>
+  );
+}
+
+export default ResponseSamples;

package/lib-next/theme/ResponseSamples/styles.module.css

@@ -0,0 +1,7 @@
+.responseSamplesContainer {
+  margin-top: 2rem;
+}
+
+.responseSamplesTabItem {
+  width: 100%;
+}

package/lib-next/theme/SchemaItem/index.js

@@ -21,10 +21,12 @@ function SchemaItem({
   required,
   schemaDescription,
   schemaName,
+  defaultValue,
 }) {
-  const renderRequired = guard(required, () => (
-    <strong className={styles.required}> required</strong>
-  ));
+  const renderRequired = guard(
+    Array.isArray(required) ? required.includes(name) : required,
+    () => <strong className={styles.required}> required</strong>
+  );
 
   const renderSchemaDescription = guard(schemaDescription, (description) => (
     <div className={styles.schemaDescription}>
@@ -38,12 +40,22 @@ function SchemaItem({
     </div>
   ));
 
+  const renderDefaultValue = guard(
+    typeof defaultValue === "boolean" ? defaultValue.toString() : defaultValue,
+    (value) => (
+      <div className={styles.schemaQualifierMessage}>
+        <ReactMarkdown children={`**Default value:** \`${value}\``} />
+      </div>
+    )
+  );
+
   const schemaContent = (
     <div>
       <strong>{name}</strong>
       <span className={styles.schemaName}> {schemaName}</span>
       {renderRequired}
       {renderQualifierMessage}
+      {renderDefaultValue}
       {renderSchemaDescription}
     </div>
   );

package/lib-next/theme/SchemaTabs/styles.module.css

@@ -38,14 +38,6 @@
   display: none;
 }
 
-.schemaTabsContainer {
-  display: flex;
-  align-items: center;
-  max-width: 390px;
-  padding-left: 3px;
-  overflow: hidden;
-}
-
 .schemaTabsListContainer {
   padding: 0 0.25rem;
   overflow-y: hidden;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -31,8 +31,8 @@
     "format:lib-next": "prettier --config ../../.prettierrc.json --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-rc.1",
-    "@docusaurus/types": "2.0.0-rc.1",
+    "@docusaurus/module-type-aliases": "2.0.1",
+    "@docusaurus/types": "2.0.1",
     "@types/concurrently": "^6.3.0",
     "@types/crypto-js": "^4.1.0",
     "@types/fs-extra": "^9.0.13",
@@ -42,7 +42,7 @@
     "concurrently": "^5.2.0"
   },
   "dependencies": {
-    "@docusaurus/theme-common": "2.0.0-rc.1",
+    "@docusaurus/theme-common": "2.0.1",
     "@mdx-js/react": "^1.6.21",
     "@paloaltonetworks/postman-code-generators": "1.1.5-hotfix.5",
     "@paloaltonetworks/postman-collection": "^4.1.0",
@@ -50,7 +50,7 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.1.2",
+    "docusaurus-plugin-openapi-docs": "^1.1.5",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -68,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "0c66efff6ff553647265abdc27d4ca847c6d8045"
+  "gitHead": "21d33582a9fcac2ddd23443497af910982b36dae"
 }

package/src/markdown/schema.ts

@@ -8,22 +8,36 @@
 import { SchemaObject } from "../types";
 
 function prettyName(schema: SchemaObject, circular?: boolean) {
-  if (schema.$ref) {
-    return schema.$ref.replace("#/components/schemas/", "") + circular
-      ? " (circular)"
-      : "";
-  }
-
   if (schema.format) {
     return schema.format;
   }
 
   if (schema.allOf) {
+    if (typeof schema.allOf[0] === "string") {
+      // @ts-ignore
+      if (schema.allOf[0].includes("circular")) {
+        return schema.allOf[0];
+      }
+    }
+    return "object";
+  }
+
+  if (schema.oneOf) {
+    return "object";
+  }
+
+  if (schema.anyOf) {
     return "object";
   }
 
   if (schema.type === "object") {
     return schema.xml?.name ?? schema.type;
+    // return schema.type;
+  }
+
+  if (schema.type === "array") {
+    return schema.xml?.name ?? schema.type;
+    // return schema.type;
   }
 
   return schema.title ?? schema.type;
@@ -42,8 +56,6 @@ export function getSchemaName(
 
 export function getQualifierMessage(schema?: SchemaObject): string | undefined {
   // TODO:
-  // - maxItems
-  // - minItems
   // - uniqueItems
   // - maxProperties
   // - minProperties
@@ -52,7 +64,11 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
     return undefined;
   }
 
-  if (schema.items) {
+  if (
+    schema.items &&
+    schema.minItems === undefined &&
+    schema.maxItems === undefined
+  ) {
     return getQualifierMessage(schema.items);
   }
 
@@ -60,15 +76,38 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
 
   let qualifierGroups = [];
 
+  if (schema.items && schema.items.enum) {
+    if (schema.items.enum) {
+      qualifierGroups.push(
+        `[${schema.items.enum.map((e) => `\`${e}\``).join(", ")}]`
+      );
+    }
+  }
+
   if (schema.minLength || schema.maxLength) {
     let lengthQualifier = "";
-    if (schema.minLength) {
-      lengthQualifier += `${schema.minLength} ≤ `;
+    let minLength;
+    let maxLength;
+    if (schema.minLength && schema.minLength > 1) {
+      minLength = `\`>= ${schema.minLength} characters\``;
+    }
+    if (schema.minLength && schema.minLength === 1) {
+      minLength = `\`non-empty\``;
     }
-    lengthQualifier += "length";
     if (schema.maxLength) {
-      lengthQualifier += ` ≤ ${schema.maxLength}`;
+      maxLength = `\`<= ${schema.maxLength} characters\``;
+    }
+
+    if (minLength && !maxLength) {
+      lengthQualifier += minLength;
+    }
+    if (maxLength && !minLength) {
+      lengthQualifier += maxLength;
+    }
+    if (minLength && maxLength) {
+      lengthQualifier += `${minLength} and ${maxLength}`;
     }
+
     qualifierGroups.push(lengthQualifier);
   }
 
@@ -79,21 +118,33 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
     typeof schema.exclusiveMaximum === "number"
   ) {
     let minmaxQualifier = "";
+    let minimum;
+    let maximum;
     if (typeof schema.exclusiveMinimum === "number") {
-      minmaxQualifier += `${schema.exclusiveMinimum} < `;
+      minimum = `\`> ${schema.exclusiveMinimum}\``;
     } else if (schema.minimum && !schema.exclusiveMinimum) {
-      minmaxQualifier += `${schema.minimum} ≤ `;
+      minimum = `\`>= ${schema.minimum}\``;
     } else if (schema.minimum && schema.exclusiveMinimum === true) {
-      minmaxQualifier += `${schema.minimum} < `;
+      minimum = `\`> ${schema.minimum}\``;
     }
-    minmaxQualifier += "value";
     if (typeof schema.exclusiveMaximum === "number") {
-      minmaxQualifier += ` < ${schema.exclusiveMaximum}`;
+      maximum = `\`< ${schema.exclusiveMaximum}\``;
     } else if (schema.maximum && !schema.exclusiveMaximum) {
-      minmaxQualifier += ` ≤ ${schema.maximum}`;
+      maximum = `\`<= ${schema.maximum}\``;
     } else if (schema.maximum && schema.exclusiveMaximum === true) {
-      minmaxQualifier += ` < ${schema.maximum}`;
+      maximum = `\`< ${schema.maximum}\``;
+    }
+
+    if (minimum && !maximum) {
+      minmaxQualifier += minimum;
+    }
+    if (maximum && !minimum) {
+      minmaxQualifier += maximum;
     }
+    if (minimum && maximum) {
+      minmaxQualifier += `${minimum} and ${maximum}`;
+    }
+
     qualifierGroups.push(minmaxQualifier);
   }
 
@@ -103,10 +154,25 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
     );
   }
 
+  // Check if discriminator mapping
+  const discriminator = schema as any;
+  if (discriminator.mapping) {
+    const values = Object.keys(discriminator.mapping);
+    qualifierGroups.push(`[${values.map((e) => `\`${e}\``).join(", ")}]`);
+  }
+
   if (schema.enum) {
     qualifierGroups.push(`[${schema.enum.map((e) => `\`${e}\``).join(", ")}]`);
   }
 
+  if (schema.minItems) {
+    qualifierGroups.push(`\`>= ${schema.minItems}\``);
+  }
+
+  if (schema.maxItems) {
+    qualifierGroups.push(`\`<= ${schema.maxItems}\``);
+  }
+
   if (qualifierGroups.length === 0) {
     return undefined;
   }

package/src/markdown/utils.ts

@@ -21,11 +21,11 @@ export function create(tag: string, props: Props): string {
 }
 
 export function guard<T>(
-  value: T | undefined,
+  value: T | undefined | string,
   cb: (value: T) => Children
 ): string {
   if (value) {
-    const children = cb(value);
+    const children = cb(value as T);
     return render(children);
   }
   return "";

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

@@ -188,7 +188,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   let language = "plaintext";
   let exampleBodyString = ""; //"body content";
 
-  if (contentType === "application/json") {
+  if (contentType === "application/json" || contentType.endsWith("+json")) {
     if (jsonRequestBodyExample) {
       exampleBodyString = JSON.stringify(jsonRequestBodyExample, null, 2);
     }

package/src/theme/ApiItem/Layout/styles.module.css

@@ -126,6 +126,18 @@
   border-left: thin solid var(--ifm-color-gray-500) !important;
 }
 
+:global(.discriminatorItem) {
+  list-style: none;
+  position: relative;
+  margin: 0 !important;
+  padding: 5px 0 5px 0 !important;
+  border-left: thin solid var(--ifm-color-gray-500) !important;
+}
+
+:global(.discriminatorTabsContainer) {
+  padding-left: 0 !important;
+}
+
 :global(.schemaItem:hover) {
   background-color: var(--ifm-menu-color-background-active);
 }
@@ -163,6 +175,7 @@
 
 :global(.code__tab--python.tabs__item--active) {
   border-bottom-color: var(--ifm-color-success);
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 :global(.language-python) {
@@ -186,6 +199,7 @@
 
 :global(.code__tab--go.tabs__item--active) {
   border-bottom-color: var(--ifm-color-info);
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 :global(.language-go) {
@@ -209,6 +223,7 @@
 
 :global(.code__tab--javascript.tabs__item--active) {
   border-bottom-color: var(--ifm-color-warning);
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 :global(.language-javascript) {
@@ -232,6 +247,7 @@
 
 :global(.code__tab--bash.tabs__item--active) {
   border-bottom-color: var(--ifm-color-danger);
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 :global(.language-bash) {

package/src/theme/ApiLogo/index.tsx

@@ -0,0 +1,25 @@
+/* ============================================================================
+ * 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 { useColorMode } from "@docusaurus/theme-common";
+
+export default function ApiLogo(props: any): JSX.Element {
+  const { colorMode } = useColorMode();
+  const { logo, darkLogo } = props;
+
+  return logo ? (
+    <img
+      alt={colorMode === "dark" && darkLogo ? darkLogo.altText : logo.altText}
+      src={colorMode === "dark" && darkLogo ? darkLogo.url : logo.url}
+      width="250px"
+    />
+  ) : (
+    <div />
+  );
+}