docusaurus-theme-openapi-docs 1.0.0

package/src/theme/ApiDemoPanel/Execute/makeRequest.ts

@@ -0,0 +1,184 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+// @ts-ignore
+import sdk from "@paloaltonetworks/postman-collection";
+
+import { Body } from "../Body/slice";
+
+async function loadImage(content: Blob): Promise<string | ArrayBuffer | null> {
+  return new Promise((accept, reject) => {
+    const reader = new FileReader();
+
+    reader.onabort = () => {
+      console.log("file reading was aborted");
+      reject();
+    };
+
+    reader.onerror = () => {
+      console.log("file reading has failed");
+      reject();
+    };
+
+    reader.onload = () => {
+      // Do whatever you want with the file contents
+      const binaryStr = reader.result;
+      accept(binaryStr);
+    };
+    reader.readAsArrayBuffer(content);
+  });
+}
+
+async function makeRequest(
+  request: sdk.Request,
+  proxy: string | undefined,
+  _body: Body
+) {
+  const headers = request.toJSON().header;
+
+  let myHeaders = new Headers();
+  if (headers) {
+    // @ts-ignore
+    headers.forEach((header) => {
+      if (header.key && header.value) {
+        myHeaders.append(header.key, header.value);
+      }
+    });
+  }
+
+  // The following code handles multiple files in the same formdata param.
+  // It removes the form data params where the src property is an array of filepath strings
+  // Splits that array into different form data params with src set as a single filepath string
+  // TODO:
+  // if (request.body && request.body.mode === 'formdata') {
+  //   let formdata = request.body.formdata,
+  //     formdataArray = [];
+  //   formdata.members.forEach((param) => {
+  //     let key = param.key,
+  //       type = param.type,
+  //       disabled = param.disabled,
+  //       contentType = param.contentType;
+  //     // check if type is file or text
+  //     if (type === 'file') {
+  //       // if src is not of type string we check for array(multiple files)
+  //       if (typeof param.src !== 'string') {
+  //         // if src is an array(not empty), iterate over it and add files as separate form fields
+  //         if (Array.isArray(param.src) && param.src.length) {
+  //           param.src.forEach((filePath) => {
+  //             addFormParam(
+  //               formdataArray,
+  //               key,
+  //               param.type,
+  //               filePath,
+  //               disabled,
+  //               contentType
+  //             );
+  //           });
+  //         }
+  //         // if src is not an array or string, or is an empty array, add a placeholder for file path(no files case)
+  //         else {
+  //           addFormParam(
+  //             formdataArray,
+  //             key,
+  //             param.type,
+  //             '/path/to/file',
+  //             disabled,
+  //             contentType
+  //           );
+  //         }
+  //       }
+  //       // if src is string, directly add the param with src as filepath
+  //       else {
+  //         addFormParam(
+  //           formdataArray,
+  //           key,
+  //           param.type,
+  //           param.src,
+  //           disabled,
+  //           contentType
+  //         );
+  //       }
+  //     }
+  //     // if type is text, directly add it to formdata array
+  //     else {
+  //       addFormParam(
+  //         formdataArray,
+  //         key,
+  //         param.type,
+  //         param.value,
+  //         disabled,
+  //         contentType
+  //       );
+  //     }
+  //   });
+  //   request.body.update({
+  //     mode: 'formdata',
+  //     formdata: formdataArray,
+  //   });
+  // }
+
+  const body = request.body?.toJSON();
+
+  let myBody: RequestInit["body"] = undefined;
+  if (body !== undefined && Object.keys(body).length > 0) {
+    switch (body.mode) {
+      case "urlencoded": {
+        myBody = new URLSearchParams();
+        if (Array.isArray(body.urlencoded)) {
+          for (const data of body.urlencoded) {
+            if (data.key && data.value) {
+              myBody.append(data.key, data.value);
+            }
+          }
+        }
+        break;
+      }
+      case "raw": {
+        myBody = (body.raw ?? "").toString();
+        break;
+      }
+      case "formdata": {
+        myBody = new FormData();
+        if (Array.isArray(body.formdata)) {
+          for (const data of body.formdata) {
+            if (data.key && data.value) {
+              myBody.append(data.key, data.value);
+            }
+          }
+        }
+        break;
+      }
+      case "file": {
+        if (_body.type === "raw" && _body.content?.type === "file") {
+          myBody = await loadImage(_body.content.value.content);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  const requestOptions: RequestInit = {
+    method: request.method,
+    headers: myHeaders,
+    body: myBody,
+  };
+
+  let finalUrl = request.url.toString();
+  if (proxy) {
+    // Ensure the proxy ends with a slash.
+    let normalizedProxy = proxy.replace(/\/$/, "") + "/";
+    finalUrl = normalizedProxy + request.url.toString();
+  }
+
+  return await fetch(finalUrl, requestOptions).then((response) => {
+    return response.text();
+  });
+}
+
+export default makeRequest;

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

@@ -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 styles from "./styles.module.css";
+
+interface Props {
+  label?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  children?: React.ReactNode;
+}
+
+function FloatingButton({ label, onClick, children }: Props) {
+  return (
+    <div className={styles.floatingButton}>
+      {label && <button onClick={onClick}>{label}</button>}
+      {children}
+    </div>
+  );
+}
+
+export default FloatingButton;

package/src/theme/ApiDemoPanel/FloatingButton/styles.module.css

@@ -0,0 +1,26 @@
+.floatingButton {
+  position: relative;
+}
+
+.floatingButton button {
+  position: relative;
+  background: rgba(25, 26, 27, 0.9);
+  border: none;
+  border-radius: var(--ifm-global-radius);
+  color: var(--ifm-color-white);
+  cursor: pointer;
+  outline: none;
+  padding: 0.4rem 0.5rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
+    bottom 0.2s ease-in-out;
+  position: absolute;
+  top: calc(var(--ifm-pre-padding) / 2);
+  right: calc(var(--ifm-pre-padding) / 2);
+}
+
+.floatingButton:hover button {
+  visibility: visible;
+  opacity: 1;
+}

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

@@ -0,0 +1,116 @@
+/* ============================================================================
+ * 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";
+
+// @ts-ignore
+import MagicDropzone from "react-magic-dropzone";
+
+import FloatingButton from "../FloatingButton";
+import styles from "./styles.module.css";
+
+type PreviewFile = { preview: string } & File;
+
+interface RenderPreviewProps {
+  file: PreviewFile;
+}
+
+function RenderPreview({ file }: RenderPreviewProps) {
+  switch (file.type) {
+    case "image/png":
+    case "image/jpeg":
+    case "image/jpg":
+    case "image/svg+xml":
+      return (
+        <img
+          style={{
+            borderRadius: "4px",
+          }}
+          src={file.preview}
+          alt=""
+        />
+      );
+    default:
+      return (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            minWidth: 0,
+          }}
+        >
+          <svg viewBox="0 0 100 120" style={{ width: "50px", height: "60px" }}>
+            <path
+              fillRule="evenodd"
+              fill="#b3beca"
+              d="M100.000,39.790 L100.000,105.000 C100.000,113.284 93.284,120.000 85.000,120.000 L15.000,120.000 C6.716,120.000 -0.000,113.284 -0.000,105.000 L-0.000,15.000 C-0.000,6.716 6.716,-0.000 15.000,-0.000 L60.210,-0.000 L100.000,39.790 Z"
+            />
+            <path
+              fillRule="evenodd"
+              fill="#90a1b1"
+              transform="translate(60, 0)"
+              d="M0.210,-0.000 L40.000,39.790 L40.000,40.000 L15.000,40.000 C6.716,40.000 0.000,33.284 0.000,25.000 L0.000,-0.000 L0.210,-0.000 Z"
+            />
+          </svg>
+          <div className={styles.filename}>{file.name}</div>
+        </div>
+      );
+  }
+}
+
+interface Props {
+  placeholder: string;
+  onChange?(file?: File): any;
+}
+
+function FormFileUpload({ placeholder, onChange }: Props) {
+  const [hover, setHover] = useState(false);
+  const [file, setFile] = useState<PreviewFile>();
+
+  function setAndNotifyFile(file?: PreviewFile) {
+    setFile(file);
+    onChange?.(file);
+  }
+
+  function handleDrop(accepted: PreviewFile[]) {
+    const [file] = accepted;
+    setAndNotifyFile(file);
+    setHover(false);
+  }
+
+  return (
+    <FloatingButton>
+      <MagicDropzone
+        className={hover ? styles.dropzoneHover : styles.dropzone}
+        onDrop={handleDrop}
+        onDragEnter={() => setHover(true)}
+        onDragLeave={() => setHover(false)}
+        multiple={false}
+        style={{ marginTop: "calc(var(--ifm-pre-padding) / 2)" }}
+      >
+        {file ? (
+          <>
+            <button
+              style={{ marginTop: "calc(var(--ifm-pre-padding) / 2)" }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setAndNotifyFile(undefined);
+              }}
+            >
+              Clear
+            </button>
+            <RenderPreview file={file} />
+          </>
+        ) : (
+          <div className={styles.dropzoneContent}>{placeholder}</div>
+        )}
+      </MagicDropzone>
+    </FloatingButton>
+  );
+}
+
+export default FormFileUpload;

package/src/theme/ApiDemoPanel/FormFileUpload/styles.module.css

@@ -0,0 +1,75 @@
+.dropzone {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 2px dashed var(--openapi-monaco-border-color);
+  /* border: 2px dashed var(--ifm-color-primary); */
+  background-color: var(--openapi-input-background);
+
+  width: 100%;
+  /* min-height: 120px; */
+  /* padding: 16px 11px; */
+  border-radius: 4px;
+  padding: var(--ifm-pre-padding);
+  font-size: var(--ifm-code-font-size);
+}
+
+.dropzoneHover {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 2px dashed var(--openapi-monaco-border-color);
+  background-color: var(--openapi-input-background);
+  width: 100%;
+  border-radius: 4px;
+  padding: var(--ifm-pre-padding);
+  font-size: var(--ifm-code-font-size);
+  border: 2px dashed var(--ifm-color-primary);
+
+  background: linear-gradient(
+      var(--openapi-dropzone-hover-shim),
+      var(--openapi-dropzone-hover-shim)
+    ),
+    linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
+}
+
+.dropzone:hover {
+  border: 2px dashed var(--ifm-color-primary);
+  background: linear-gradient(
+      var(--openapi-dropzone-hover-shim),
+      var(--openapi-dropzone-hover-shim)
+    ),
+    linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
+}
+
+.dropzoneContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: var(--ifm-pre-padding) 0;
+  color: var(--openapi-dropzone-color);
+}
+
+.dropzone:hover .dropzoneContent {
+  color: var(--ifm-pre-color);
+}
+
+.dropzoneHover .dropzoneContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: var(--ifm-pre-padding) 0;
+  color: var(--ifm-pre-color);
+}
+
+.filename {
+  margin: 0 calc(var(--ifm-pre-padding) * 1.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}

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

@@ -0,0 +1,28 @@
+/* ============================================================================
+ * 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 styles from "./styles.module.css";
+
+interface Props {
+  label: string;
+  type?: string;
+  children?: React.ReactNode;
+}
+
+function FormItem({ label, type, children }: Props) {
+  return (
+    <div className={styles.formItem}>
+      <code>{label}</code>
+      {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export default FormItem;

package/src/theme/ApiDemoPanel/FormItem/styles.module.css

@@ -0,0 +1,7 @@
+.formItem {
+  margin-top: var(--ifm-pre-padding);
+}
+
+.formItem:first-child {
+  margin-top: 0;
+}

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

@@ -0,0 +1,54 @@
+/* ============================================================================
+ * 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 styles from "./styles.module.css";
+
+interface Props {
+  value?: string;
+  options: string[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+function FormMultiSelect({ value, options, onChange }: Props) {
+  if (options.length === 0) {
+    return null;
+  }
+
+  let height;
+  if (options.length < 6) {
+    const selectPadding = 12 * 2;
+    const rawHeight = options.length * 29;
+    const innerMargins = 4 * options.length - 1;
+    const outerMargins = 4 * 2;
+    const mysteryScroll = 1;
+    height =
+      rawHeight + innerMargins + outerMargins + selectPadding + mysteryScroll;
+  }
+
+  return (
+    <select
+      style={{ height: height }}
+      className={styles.selectInput}
+      value={value}
+      onChange={onChange}
+      size={Math.min(6, options.length + 1)}
+      multiple
+    >
+      {options.map((option) => {
+        return (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        );
+      })}
+    </select>
+  );
+}
+
+export default FormMultiSelect;

package/src/theme/ApiDemoPanel/FormMultiSelect/styles.module.css

@@ -0,0 +1,38 @@
+.inputBase {
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  /* height: 40px; */
+  background-color: var(--openapi-input-background);
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: var(--ifm-code-font-size);
+  color: var(--ifm-pre-color);
+  padding: 12px var(--ifm-pre-padding);
+
+  border-radius: 4px;
+  border: 2px solid transparent;
+}
+
+.selectInput {
+  composes: inputBase;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.selectInput option {
+  border-radius: 0.25rem;
+  color: var(--ifm-menu-color);
+  margin: 0.25rem 0;
+  padding: var(--ifm-menu-link-padding-vertical)
+    var(--ifm-menu-link-padding-horizontal);
+}
+
+.selectInput:focus option:checked {
+  /* background: #0f62fe linear-gradient(0deg, #0f62fe 0%, #0f62fe 100%); */
+}
+
+.selectInput:focus {
+  /* box-shadow: inset 0px 0px 0px 2px white; */
+  border: 2px solid var(--openapi-input-border);
+}

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

@@ -0,0 +1,36 @@
+/* ============================================================================
+ * 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 styles from "./styles.module.css";
+
+interface Props {
+  value?: string;
+  options?: string[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+function FormSelect({ value, options, onChange }: Props) {
+  if (!Array.isArray(options) || options.length === 0) {
+    return null;
+  }
+
+  return (
+    <select className={styles.selectInput} value={value} onChange={onChange}>
+      {options.map((option) => {
+        return (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        );
+      })}
+    </select>
+  );
+}
+
+export default FormSelect;

package/src/theme/ApiDemoPanel/FormSelect/styles.module.css

@@ -0,0 +1,51 @@
+.inputBase {
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  /* height: 40px; */
+  background-color: var(--openapi-input-background);
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: var(--ifm-code-font-size);
+  color: var(--ifm-pre-color);
+  padding: 12px 48px 12px var(--ifm-pre-padding);
+
+  border-radius: 4px;
+}
+
+html[data-theme="dark"] .selectInput {
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  /* height: 40px; */
+  background-color: var(--openapi-input-background);
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: var(--ifm-code-font-size);
+  color: var(--ifm-pre-color);
+  /* padding: 12px var(--ifm-pre-padding); */
+
+  border-radius: 4px;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="white"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>');
+  background-repeat: no-repeat;
+  background-position: right var(--ifm-pre-padding) top 50%;
+  background-size: auto auto;
+}
+
+.selectInput {
+  composes: inputBase;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>');
+  background-repeat: no-repeat;
+  background-position: right var(--ifm-pre-padding) top 50%;
+  background-size: auto auto;
+}
+
+.selectInput:focus {
+  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+}

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

@@ -0,0 +1,32 @@
+/* ============================================================================
+ * 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 styles from "./styles.module.css";
+
+interface Props {
+  value?: string;
+  placeholder?: string;
+  password?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+function FormTextInput({ value, placeholder, password, onChange }: Props) {
+  return (
+    <input
+      className={styles.input}
+      type={password ? "password" : "text"}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      autoComplete="off"
+    />
+  );
+}
+
+export default FormTextInput;