docusaurus-theme-openapi-docs 1.0.0

package/lib/theme/Tabs/styles.module.css

@@ -0,0 +1,118 @@
+/**
+ * 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: 2.5rem;
+  margin-top: 0 !important;
+  margin-right: 0.5rem;
+  border: 1px solid var(--openapi-code-dim-dark);
+  border-radius: var(--ifm-global-radius);
+  font-weight: var(--ifm-font-weight-normal);
+  color: var(--openapi-code-dim-dark);
+}
+
+.tabItem:hover {
+  color: var(--ifm-color-emphasis-500) !important;
+}
+
+.tabItem:last-child {
+  margin-right: 0 !important;
+}
+
+/* Open API Response Code Tabs */
+.responseTabsTopSection {
+  margin-top: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.responseTabsContainer {
+  display: flex;
+  align-items: center;
+  max-width: 390px;
+  padding-left: 1rem;
+  overflow: hidden;
+}
+
+.responseTabsListContainer {
+  padding: 0 0.25rem;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+}
+
+.responseTabsListContainer::-webkit-scrollbar {
+  display: none;
+}
+
+/* Response Code Tabs - Colored Dots */
+.responseTabDot {
+  width: 12.5px;
+  height: 12.5px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+
+.responseTabDotSuccess {
+  background-color: var(--ifm-color-success);
+}
+
+.responseTabDotDanger {
+  background-color: var(--ifm-color-danger);
+}
+
+.responseTabDotInfo {
+  background-color: var(--ifm-color-info);
+}
+
+.responseTabActive {
+  border: 1px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.responseSchemaContainer {
+  max-width: 600px;
+}
+
+/* Tab Arrows */
+.tabArrow {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  padding: 0 0.75rem;
+  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) {
+  .responseTabsTopSection {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .responseTabsContainer {
+    width: 100%;
+    margin-top: var(--ifm-spacing-vertical);
+    padding: 0;
+  }
+}

package/lib/theme-classic.d.ts

@@ -0,0 +1,8 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+/// <reference types="@docusaurus/theme-classic" />

package/lib/theme-openapi.d.ts

@@ -0,0 +1,48 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+/// <reference types="docusaurus-plugin-openapi-docs" />
+
+declare module "@docusaurus/plugin-content-docs-types" {
+  // Makes all properties visible when hovering over the type
+  type Expand<T extends Record<string, unknown>> = { [P in keyof T]: T[P] };
+
+  export type SidebarItemBase = {
+    className?: string;
+    customProps?: Record<string, unknown>;
+  };
+
+  export type SidebarItemLink = SidebarItemBase & {
+    type: "link";
+    href: string;
+    label: string;
+    docId: string;
+  };
+
+  type SidebarItemCategoryBase = SidebarItemBase & {
+    type: "category";
+    label: string;
+    collapsed: boolean;
+    collapsible: boolean;
+  };
+
+  export type PropSidebarItemCategory = Expand<
+    SidebarItemCategoryBase & {
+      items: PropSidebarItem[];
+    }
+  >;
+
+  export type PropSidebarItem = SidebarItemLink | PropSidebarItemCategory;
+  export type PropSidebar = PropSidebarItem[];
+  export type PropSidebars = {
+    [sidebarId: string]: PropSidebar;
+  };
+}
+
+declare module "docusaurus-theme-openapi-docs" {
+  export type ThemeConfig = Partial<import("./types").ThemeConfig>;
+}

package/lib/theme-translations.d.ts

@@ -0,0 +1,9 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+// TODO: Remove this when https://github.com/facebook/docusaurus/issues/6087 is resolved.
+declare module "@docusaurus/theme-translations";

package/lib/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib-next/index.js

@@ -0,0 +1,38 @@
+/* ============================================================================
+ * 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 path from "path";
+import { ProvidePlugin } from "webpack";
+export default function docusaurusThemeOpenAPI() {
+  return {
+    name: "docusaurus-theme-openapi",
+
+    getThemePath() {
+      return path.join(__dirname, "..", "lib-next", "theme");
+    },
+
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, "..", "src", "theme");
+    },
+
+    configureWebpack() {
+      return {
+        plugins: [
+          new ProvidePlugin({
+            Buffer: [require.resolve("buffer/"), "Buffer"],
+            process: require.resolve("process/browser"),
+          }),
+        ],
+        resolve: {
+          fallback: {
+            buffer: require.resolve("buffer/"),
+            process: require.resolve("process/browser"),
+          },
+        },
+      };
+    },
+  };
+}

package/lib-next/markdown/createDescription.js

@@ -0,0 +1,13 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+export function createDescription(description) {
+  if (!description) {
+    return "";
+  }
+
+  return `\n\n${description}\n\n`;
+}

package/lib-next/markdown/schema.js

@@ -0,0 +1,115 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+function prettyName(schema, circular) {
+  if (schema.$ref) {
+    return schema.$ref.replace("#/components/schemas/", "") + circular
+      ? " (circular)"
+      : "";
+  }
+
+  if (schema.format) {
+    return schema.format;
+  }
+
+  if (schema.allOf) {
+    return "object";
+  }
+
+  if (schema.type === "object") {
+    return schema.xml?.name ?? schema.type;
+  }
+
+  return schema.title ?? schema.type;
+}
+
+export function getSchemaName(schema, circular) {
+  if (schema.items) {
+    return prettyName(schema.items, circular) + "[]";
+  }
+
+  return prettyName(schema, circular) ?? "";
+}
+export function getQualifierMessage(schema) {
+  // TODO:
+  // - maxItems
+  // - minItems
+  // - uniqueItems
+  // - maxProperties
+  // - minProperties
+  // - multipleOf
+  if (!schema) {
+    return undefined;
+  }
+
+  if (schema.items) {
+    return getQualifierMessage(schema.items);
+  }
+
+  let message = "**Possible values:** ";
+  let qualifierGroups = [];
+
+  if (schema.minLength || schema.maxLength) {
+    let lengthQualifier = "";
+
+    if (schema.minLength) {
+      lengthQualifier += `${schema.minLength} ≤ `;
+    }
+
+    lengthQualifier += "length";
+
+    if (schema.maxLength) {
+      lengthQualifier += ` ≤ ${schema.maxLength}`;
+    }
+
+    qualifierGroups.push(lengthQualifier);
+  }
+
+  if (
+    schema.minimum ||
+    schema.maximum ||
+    typeof schema.exclusiveMinimum === "number" ||
+    typeof schema.exclusiveMaximum === "number"
+  ) {
+    let minmaxQualifier = "";
+
+    if (typeof schema.exclusiveMinimum === "number") {
+      minmaxQualifier += `${schema.exclusiveMinimum} < `;
+    } else if (schema.minimum && !schema.exclusiveMinimum) {
+      minmaxQualifier += `${schema.minimum} ≤ `;
+    } else if (schema.minimum && schema.exclusiveMinimum === true) {
+      minmaxQualifier += `${schema.minimum} < `;
+    }
+
+    minmaxQualifier += "value";
+
+    if (typeof schema.exclusiveMaximum === "number") {
+      minmaxQualifier += ` < ${schema.exclusiveMaximum}`;
+    } else if (schema.maximum && !schema.exclusiveMaximum) {
+      minmaxQualifier += ` ≤ ${schema.maximum}`;
+    } else if (schema.maximum && schema.exclusiveMaximum === true) {
+      minmaxQualifier += ` < ${schema.maximum}`;
+    }
+
+    qualifierGroups.push(minmaxQualifier);
+  }
+
+  if (schema.pattern) {
+    qualifierGroups.push(
+      `Value must match regular expression \`${schema.pattern}\``
+    );
+  }
+
+  if (schema.enum) {
+    qualifierGroups.push(`[${schema.enum.map((e) => `\`${e}\``).join(", ")}]`);
+  }
+
+  if (qualifierGroups.length === 0) {
+    return undefined;
+  }
+
+  return message + qualifierGroups.join(", ");
+}

package/lib-next/markdown/utils.js

@@ -0,0 +1,31 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+export function create(tag, props) {
+  const { children, ...rest } = props;
+  let propString = "";
+
+  for (const [key, value] of Object.entries(rest)) {
+    propString += ` ${key}={${JSON.stringify(value)}}`;
+  }
+
+  return `<${tag}${propString}>${render(children)}</${tag}>`;
+}
+export function guard(value, cb) {
+  if (value) {
+    const children = cb(value);
+    return render(children);
+  }
+
+  return "";
+}
+export function render(children) {
+  if (Array.isArray(children)) {
+    return children.filter((c) => c !== undefined).join("");
+  }
+
+  return children ?? "";
+}

package/lib-next/theme/ApiDemoPanel/Accept/index.js

@@ -0,0 +1,33 @@
+/* ============================================================================
+ * 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 { useTypedDispatch, useTypedSelector } from "../hooks";
+import FormItem from "./../FormItem";
+import FormSelect from "./../FormSelect";
+import { setAccept } from "./slice";
+
+function Accept() {
+  const value = useTypedSelector((state) => state.accept.value);
+  const options = useTypedSelector((state) => state.accept.options);
+  const dispatch = useTypedDispatch();
+
+  if (options.length <= 1) {
+    return null;
+  }
+
+  return (
+    <FormItem label="Accept">
+      <FormSelect
+        value={value}
+        options={options}
+        onChange={(e) => dispatch(setAccept(e.target.value))}
+      />
+    </FormItem>
+  );
+}
+
+export default Accept;

package/lib-next/theme/ApiDemoPanel/Accept/slice.js

@@ -0,0 +1,19 @@
+/* ============================================================================
+ * 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 { createSlice } from "@reduxjs/toolkit";
+const initialState = {};
+export const slice = createSlice({
+  name: "accept",
+  initialState,
+  reducers: {
+    setAccept: (state, action) => {
+      state.value = action.payload;
+    },
+  },
+});
+export const { setAccept } = slice.actions;
+export default slice.reducer;

package/lib-next/theme/ApiDemoPanel/Authorization/auth-types.js

@@ -0,0 +1,22 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+export function getAuthDataKeys(security) {
+  // Bearer Auth
+  if (security.type === "http" && security.scheme === "bearer") {
+    return ["token"];
+  } // Basic Auth
+
+  if (security.type === "http" && security.scheme === "basic") {
+    return ["username", "password"];
+  } // API Auth
+
+  if (security.type === "apiKey") {
+    return ["apiKey"];
+  } // none
+
+  return [];
+}

package/lib-next/theme/ApiDemoPanel/Authorization/index.js

@@ -0,0 +1,203 @@
+/* ============================================================================
+ * 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 clsx from "clsx";
+import FormItem from "../FormItem";
+import FormSelect from "../FormSelect";
+import FormTextInput from "../FormTextInput";
+import { useTypedDispatch, useTypedSelector } from "../hooks";
+import styles from "../styles.module.css";
+import { setAuthData, setSelectedAuth } from "./slice";
+
+function LockButton({ mode, children, style, ...rest }) {
+  return (
+    <button
+      className={clsx("button", "button--primary", {
+        "button--outline": mode !== "locked",
+      })}
+      style={{
+        marginLeft: "auto",
+        display: "flex",
+        alignItems: "center",
+        marginBottom: "var(--ifm-spacing-vertical)",
+        ...style,
+      }}
+      {...rest}
+    >
+      <span>{children}</span>
+
+      <svg
+        style={{
+          marginLeft: "12px",
+          width: "18px",
+          height: "18px",
+          fill: "currentColor",
+        }}
+        viewBox="0 0 20 20"
+        id={mode}
+      >
+        {mode === "locked" ? (
+          <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"></path>
+        ) : (
+          <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
+        )}
+      </svg>
+    </button>
+  );
+}
+
+function validateData(selectedAuth, data) {
+  for (const scheme of selectedAuth) {
+    if (data[scheme.key] === undefined) {
+      return false;
+    }
+
+    const hasMissingKeys = Object.values(data[scheme.key]).includes(undefined);
+
+    if (hasMissingKeys) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function Authorization() {
+  const [editing, setEditing] = useState(false);
+  const data = useTypedSelector((state) => state.auth.data);
+  const options = useTypedSelector((state) => state.auth.options);
+  const selected = useTypedSelector((state) => state.auth.selected);
+  const dispatch = useTypedDispatch();
+
+  if (selected === undefined) {
+    return null;
+  }
+
+  const selectedAuth = options[selected];
+  const authenticated = validateData(selectedAuth, data);
+  const optionKeys = Object.keys(options);
+
+  if (editing) {
+    return (
+      <div className={styles.optionsPanel}>
+        {optionKeys.length > 1 && (
+          <FormItem label="Security Scheme">
+            <FormSelect
+              options={optionKeys}
+              value={selected}
+              onChange={(e) => {
+                dispatch(setSelectedAuth(e.target.value));
+              }}
+            />
+          </FormItem>
+        )}
+        {selectedAuth.map((a) => {
+          if (a.type === "http" && a.scheme === "bearer") {
+            return (
+              <FormItem label="Bearer Token" key={selected + "-bearer"}>
+                <FormTextInput
+                  placeholder="Bearer Token"
+                  value={data[a.key].token ?? ""}
+                  onChange={(e) => {
+                    const value = e.target.value.trim();
+                    dispatch(
+                      setAuthData({
+                        scheme: a.key,
+                        key: "token",
+                        value: value ? value : undefined,
+                      })
+                    );
+                  }}
+                />
+              </FormItem>
+            );
+          }
+
+          if (a.type === "http" && a.scheme === "basic") {
+            return (
+              <React.Fragment key={selected + "-basic"}>
+                <FormItem label="Username">
+                  <FormTextInput
+                    placeholder="Username"
+                    value={data[a.key].username ?? ""}
+                    onChange={(e) => {
+                      const value = e.target.value.trim();
+                      dispatch(
+                        setAuthData({
+                          scheme: a.key,
+                          key: "username",
+                          value: value ? value : undefined,
+                        })
+                      );
+                    }}
+                  />
+                </FormItem>
+                <FormItem label="Password">
+                  <FormTextInput
+                    placeholder="Password"
+                    password
+                    value={data[a.key].password ?? ""}
+                    onChange={(e) => {
+                      const value = e.target.value.trim();
+                      dispatch(
+                        setAuthData({
+                          scheme: a.key,
+                          key: "password",
+                          value: value ? value : undefined,
+                        })
+                      );
+                    }}
+                  />
+                </FormItem>
+              </React.Fragment>
+            );
+          }
+
+          return null;
+        })}
+        <LockButton
+          mode="unlocked"
+          style={{
+            marginTop: "var(--ifm-spacing-vertical)",
+            marginBottom: 0,
+          }}
+          onClick={() => {
+            setEditing(false);
+          }}
+        >
+          Save
+        </LockButton>
+      </div>
+    );
+  }
+
+  if (authenticated) {
+    return (
+      <LockButton
+        mode="locked"
+        onClick={() => {
+          setEditing(true);
+        }}
+      >
+        Authorized
+      </LockButton>
+    );
+  }
+
+  return (
+    <LockButton
+      mode="unlocked"
+      onClick={() => {
+        setEditing(true);
+      }}
+    >
+      Authorize
+    </LockButton>
+  );
+}
+
+export default Authorization;