docusaurus-theme-openapi-docs 2.0.0-beta.2 → 2.0.0-beta.3

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

@@ -1,178 +0,0 @@
-/* ============================================================================
- * 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 buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
-import {
-  setResponse,
-  setCode,
-  clearCode,
-  setHeaders,
-  clearHeaders,
-} from "@theme/ApiDemoPanel/Response/slice";
-import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import Modal from "react-modal";
-import makeRequest from "./makeRequest";
-function validateRequest(params) {
-  for (let paramList of Object.values(params)) {
-    for (let param of paramList) {
-      if (param.required && !param.value) {
-        return false;
-      }
-    }
-  }
-  return true;
-}
-function Execute({ postman, proxy }) {
-  const pathParams = useTypedSelector((state) => state.params.path);
-  const queryParams = useTypedSelector((state) => state.params.query);
-  const cookieParams = useTypedSelector((state) => state.params.cookie);
-  const headerParams = useTypedSelector((state) => state.params.header);
-  const contentType = useTypedSelector((state) => state.contentType.value);
-  const body = useTypedSelector((state) => state.body);
-  const accept = useTypedSelector((state) => state.accept.value);
-  const server = useTypedSelector((state) => state.server.value);
-  const params = useTypedSelector((state) => state.params);
-  const auth = useTypedSelector((state) => state.auth);
-  const isValidRequest = validateRequest(params);
-  const dispatch = useTypedDispatch();
-  const postmanRequest = buildPostmanRequest(postman, {
-    queryParams,
-    pathParams,
-    cookieParams,
-    contentType,
-    accept,
-    headerParams,
-    body,
-    server,
-    auth,
-  });
-  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-  function openModal() {
-    setIsOpen(true);
-  }
-  function closeModal() {
-    setIsOpen(false);
-  }
-  function acceptAgreement() {
-    setIsOpen(false);
-    setAgreementAccepted(true);
-    sessionStorage.setItem("agreement-ack", "true");
-  }
-  const [modalIsOpen, setIsOpen] = React.useState(false);
-  // Set the following as default value to persist to session and enable modal
-  // sessionStorage.getItem("agreement-ack") === "true"
-  const [agreementAccepted, setAgreementAccepted] = React.useState(true);
-  const customStyles = {
-    overlay: {
-      backdropFilter: "blur(10px)",
-      backgroundColor: "transparent",
-    },
-    content: {
-      top: "50%",
-      left: "50%",
-      right: "auto",
-      bottom: "auto",
-      marginRight: "-50%",
-      border: "none",
-      padding: "none",
-      borderRadius: "var(--openapi-card-border-radius)",
-      background: "var(--ifm-card-background-color)",
-      transform: "translate(-50%, -50%)",
-      maxWidth: "550px",
-    },
-  };
-  if (agreementAccepted) {
-    return (
-      <button
-        className="button button--sm button--secondary"
-        disabled={!isValidRequest}
-        style={
-          !isValidRequest
-            ? {
-                pointerEvents: "all",
-              }
-            : {}
-        }
-        onClick={async () => {
-          dispatch(setResponse("Fetching..."));
-          try {
-            await delay(1200);
-            const res = await makeRequest(postmanRequest, proxy, body);
-            dispatch(setResponse(await res.text()));
-            dispatch(setCode(res.status));
-            res.headers &&
-              dispatch(setHeaders(Object.fromEntries(res.headers)));
-          } catch (e) {
-            console.log(e);
-            dispatch(setResponse("Connection failed"));
-            dispatch(clearCode());
-            dispatch(clearHeaders());
-          }
-        }}
-      >
-        Send API Request
-      </button>
-    );
-  } else {
-    return (
-      <React.Fragment>
-        <button
-          className="button button--sm button--secondary"
-          onClick={openModal}
-        >
-          Send API Request
-        </button>
-        <Modal
-          isOpen={modalIsOpen}
-          onRequestClose={closeModal}
-          style={customStyles}
-          contentLabel="Terms of Use"
-        >
-          <form>
-            <div className="card">
-              <div className="card__header">
-                <h2>Terms of Use</h2>
-                <hr></hr>
-              </div>
-              <div className="card__body">
-                <p>
-                  By accepting this agreement the end user acknowledges the
-                  risks of performing authenticated and non-authenticated API
-                  requests from the browser.
-                </p>
-                <p>
-                  The end user also accepts the responsibility of safeguarding
-                  API credentials and any potentially sensitive data returned by
-                  the API.
-                </p>
-                <br></br>
-              </div>
-              <div className="card__footer">
-                <div className="button-group button-group--block">
-                  <button
-                    className="button button--sm button--outline button--success"
-                    onClick={acceptAgreement}
-                  >
-                    AGREE
-                  </button>
-                  <button
-                    className="button button--sm button--outline button--danger"
-                    onClick={closeModal}
-                  >
-                    DISAGREE
-                  </button>
-                </div>
-              </div>
-            </div>
-          </form>
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
-export default Execute;

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

@@ -1,45 +0,0 @@
-/* ============================================================================
- * 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 fileSaver from "file-saver";
-const saveFile = (url) => {
-  let fileName;
-  if (url.endsWith("json") || url.endsWith("yaml") || url.endsWith("yml")) {
-    fileName = url.substring(url.lastIndexOf("/") + 1);
-  }
-  fileSaver.saveAs(url, fileName ? fileName : "openapi.txt");
-};
-function Export({ url, proxy }) {
-  return (
-    <div
-      style={{
-        float: "right",
-      }}
-      className="dropdown dropdown--hoverable dropdown--right"
-    >
-      <button className="export-button button button--sm button--secondary">
-        Export
-      </button>
-      <ul className="export-dropdown dropdown__menu">
-        <li>
-          <a
-            onClick={(e) => {
-              e.preventDefault();
-              saveFile(`${url}`);
-            }}
-            className="dropdown__link"
-            href={`${url}`}
-          >
-            OpenAPI Spec
-          </a>
-        </li>
-      </ul>
-    </div>
-  );
-}
-export default Export;

package/lib-next/theme/ApiDemoPanel/FloatingButton/_FloatingButton.scss

@@ -1,25 +0,0 @@
-.openapi-demo__floating-btn {
-  position: relative;
-
-  button {
-    position: relative;
-    background: var(--ifm-color-emphasis-900);
-    border: none;
-    border-radius: var(--ifm-global-radius);
-    color: var(--ifm-color-emphasis-100);
-    cursor: pointer;
-    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;
-    right: calc(var(--ifm-pre-padding) / 2);
-  }
-}
-.openapi-demo__floating-btn:hover button,
-.openapi-demo__floating-btn:focus-visible button,
-.openapi-demo__floating-btn button:focus-visible {
-  visibility: visible;
-  opacity: 1;
-}

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

@@ -1,21 +0,0 @@
-/* ============================================================================
- * 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";
-function FloatingButton({ label, onClick, children }) {
-  return (
-    <div tabIndex={0} className="openapi-demo__floating-btn">
-      {label && (
-        <button tabIndex={0} onClick={onClick}>
-          {label}
-        </button>
-      )}
-      {children}
-    </div>
-  );
-}
-export default FloatingButton;

package/lib-next/theme/ApiDemoPanel/FormFileUpload/_FormFileUpload.scss

@@ -1,72 +0,0 @@
-.openapi-demo__dropzone {
-  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);
-
-  &: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));
-
-    .openapi-demo__dropzone-content {
-      color: var(--ifm-pre-color);
-    }
-  }
-}
-
-.openapi-demo__dropzone-hover {
-  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));
-
-  .openapi-demo__dropzone-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin: var(--ifm-pre-padding) 0;
-    color: var(--ifm-pre-color);
-  }
-
-  .openapi-demo__file-name {
-    margin: 0 calc(var(--ifm-pre-padding) * 1.5);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
-  }
-}
-
-.openapi-demo__dropzone-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin: var(--ifm-pre-padding) 0;
-  color: var(--openapi-dropzone-color);
-}

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

@@ -1,107 +0,0 @@
-/* ============================================================================
- * 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 FloatingButton from "@theme/ApiDemoPanel/FloatingButton";
-import MagicDropzone from "react-magic-dropzone";
-function RenderPreview({ file }) {
-  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="openapi-demo__file-name">{file.name}</div>
-        </div>
-      );
-  }
-}
-function FormFileUpload({ placeholder, onChange }) {
-  const [hover, setHover] = useState(false);
-  const [file, setFile] = useState();
-  function setAndNotifyFile(file) {
-    setFile(file);
-    onChange?.(file);
-  }
-  function handleDrop(accepted) {
-    const [file] = accepted;
-    setAndNotifyFile(file);
-    setHover(false);
-  }
-  return (
-    <FloatingButton>
-      <MagicDropzone
-        className={
-          hover ? "openapi-demo__dropzone-hover" : "openapi-demo__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="openapi-demo__dropzone-content">{placeholder}</div>
-        )}
-      </MagicDropzone>
-    </FloatingButton>
-  );
-}
-export default FormFileUpload;

package/lib-next/theme/ApiDemoPanel/FormItem/_FormItem.scss

@@ -1,12 +0,0 @@
-.openapi-demo__form-item {
-  margin-top: var(--ifm-pre-padding);
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  .required {
-    font-size: var(--ifm-code-font-size);
-    color: var(--openapi-required);
-  }
-}

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

@@ -1,35 +0,0 @@
-/* ============================================================================
- * 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";
-function FormItem({ label, type, required, children }) {
-  return (
-    <div className="openapi-demo__form-item">
-      <code>{label}</code>
-      {type && (
-        <span
-          style={{
-            opacity: 0.6,
-          }}
-        >
-          {" "}
-          — {type}
-        </span>
-      )}
-      {required && (
-        <span>
-          {" "}
-          <small>
-            <strong className="required"> required</strong>
-          </small>
-        </span>
-      )}
-      <div>{children}</div>
-    </div>
-  );
-}
-export default FormItem;

package/lib-next/theme/ApiDemoPanel/FormMultiSelect/_FormMultiSelect.scss

@@ -1,26 +0,0 @@
-.openapi-demo__multi-select-input {
-  width: 100%;
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: 12px var(--ifm-pre-padding);
-  border-radius: 4px;
-  border: 2px solid transparent;
-  background-color: var(--openapi-input-background);
-  outline: none;
-  font-size: var(--ifm-code-font-size);
-  color: var(--ifm-pre-color);
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  &:focus {
-    border: 2px solid var(--openapi-input-border);
-  }
-
-  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);
-  }
-}

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

@@ -1,44 +0,0 @@
-/* ============================================================================
- * 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";
-function FormMultiSelect({ value, options, onChange }) {
-  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="openapi-demo__multi-select-input"
-      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/lib-next/theme/ApiDemoPanel/FormSelect/_FormSelect.scss

@@ -1,43 +0,0 @@
-html[data-theme="dark"] .openapi-demo__select-input {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  background-color: var(--openapi-input-background);
-  border: none;
-  outline: none;
-  width: 100%;
-  font-size: var(--ifm-code-font-size);
-  color: var(--ifm-pre-color);
-
-  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;
-}
-
-.openapi-demo__select-input {
-  width: 100%;
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: 12px 48px 12px var(--ifm-pre-padding);
-  border: none;
-  outline: none;
-  border-radius: 4px;
-  background-color: var(--openapi-input-background);
-  font-size: var(--ifm-code-font-size);
-  color: var(--ifm-pre-color);
-  -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;
-
-  &:focus {
-    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
-  }
-}

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

@@ -1,29 +0,0 @@
-/* ============================================================================
- * 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";
-function FormSelect({ value, options, onChange }) {
-  if (!Array.isArray(options) || options.length === 0) {
-    return null;
-  }
-  return (
-    <select
-      className="openapi-demo__select-input"
-      value={value}
-      onChange={onChange}
-    >
-      {options.map((option) => {
-        return (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        );
-      })}
-    </select>
-  );
-}
-export default FormSelect;

package/lib-next/theme/ApiDemoPanel/FormTextInput/_FormTextInput.scss

@@ -1,15 +0,0 @@
-.openapi-demo__input {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  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;
-
-  &:focus {
-    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
-  }
-}

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

@@ -1,23 +0,0 @@
-/* ============================================================================
- * 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";
-function FormTextInput({ value, placeholder, password, onChange }) {
-  placeholder = placeholder?.split("\n")[0];
-  return (
-    <input
-      className="openapi-demo__input"
-      type={password ? "password" : "text"}
-      placeholder={placeholder}
-      title={placeholder}
-      value={value}
-      onChange={onChange}
-      autoComplete="off"
-    />
-  );
-}
-export default FormTextInput;