docusaurus-theme-openapi-docs 0.0.0-618 → 0.0.0-684

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

@@ -1,84 +0,0 @@
-.buttonGroup {
-  background: var(--openapi-card-background-color);
-  color: var(--ifm-pre-color);
-  font-family: var(--ifm-font-family-monospace);
-  /* font-size: var(--ifm-code-font-size); */
-  /* line-height: var(--ifm-pre-line-height); */
-  /* margin-bottom: calc(var(--ifm-spacing-vertical) / 4); */
-  margin-bottom: 1px;
-  margin-top: 0;
-  border-radius: var(--openapi-card-border-radius)
-    var(--openapi-card-border-radius) 2px 2px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.buttonGroup button {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  cursor: pointer;
-  /* font-size: calc(0.875rem * var(--ifm-button-size-multiplier)); */
-  /* line-height: 1.5; */
-  /* font-weight: var(--ifm-button-font-weight); */
-
-  /* font-size: var(--ifm-code-font-size); */
-  font-size: 13.3333px;
-  line-height: var(--ifm-pre-line-height);
-  font-weight: var(--ifm-font-weight-semibold);
-
-  padding: calc(
-      var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier)
-    )
-    calc(
-      var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier)
-    );
-
-  text-align: center;
-
-  transition: color var(--ifm-button-transition-duration)
-      cubic-bezier(0.08, 0.52, 0.52, 1),
-    background var(--ifm-button-transition-duration)
-      cubic-bezier(0.08, 0.52, 0.52, 1),
-    border-color var(--ifm-button-transition-duration)
-      cubic-bezier(0.08, 0.52, 0.52, 1);
-  -webkit-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-
-  background: transparent;
-
-  color: var(--ifm-menu-color);
-  border: 0px solid transparent;
-  /* border-radius: var(--ifm-pre-border-radius); */
-
-  --margin: 0.25rem;
-
-  border-radius: calc(var(--margin));
-  /* border-radius: 0.25rem; */
-
-  display: block;
-  width: 100%;
-
-  /* margin: 2px; */
-  margin: var(--margin);
-  margin-right: 0;
-}
-
-.buttonGroup button:last-child {
-  margin-right: 0.25rem;
-}
-
-.buttonGroup button:hover {
-  background: var(--ifm-menu-color-background-active);
-}
-
-.buttonGroup button:focus {
-  outline: 0;
-}
-
-.buttonGroup button.selected {
-  background: var(--ifm-menu-color-background-active);
-  color: var(--ifm-menu-color-active);
-}

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

@@ -1,189 +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 sdk from "@paloaltonetworks/postman-collection";
-import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
-import { Param } from "@theme/ApiDemoPanel/ParamOptions/slice";
-import { setResponse } from "@theme/ApiDemoPanel/Response/slice";
-import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import Modal from "react-modal";
-
-import makeRequest from "./makeRequest";
-
-function validateRequest(params: {
-  path: Param[];
-  query: Param[];
-  header: Param[];
-  cookie: Param[];
-}) {
-  for (let paramList of Object.values(params)) {
-    for (let param of paramList) {
-      if (param.required && !param.value) {
-        return false;
-      }
-    }
-  }
-  return true;
-}
-
-export interface Props {
-  postman: sdk.Request;
-  proxy?: string;
-}
-
-function Execute({ postman, proxy }: Props) {
-  const pathParams = useTypedSelector((state: any) => state.params.path);
-  const queryParams = useTypedSelector((state: any) => state.params.query);
-  const cookieParams = useTypedSelector((state: any) => state.params.cookie);
-  const headerParams = useTypedSelector((state: any) => state.params.header);
-  const contentType = useTypedSelector((state: any) => state.contentType.value);
-  const body = useTypedSelector((state: any) => state.body);
-  const accept = useTypedSelector((state: any) => state.accept.value);
-  const server = useTypedSelector((state: any) => state.server.value);
-  const params = useTypedSelector((state: any) => state.params);
-  const auth = useTypedSelector((state: any) => 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: number) =>
-    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(res));
-          } catch (e: any) {
-            console.log(e);
-            dispatch(setResponse("Connection failed"));
-          }
-        }}
-      >
-        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/src/theme/ApiDemoPanel/FloatingButton/styles.module.css

@@ -1,26 +0,0 @@
-.floatingButton {
-  position: relative;
-}
-
-.floatingButton 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);
-}
-
-.floatingButton:hover button,
-.floatingButton:focus-visible button,
-.floatingButton button:focus-visible {
-  visibility: visible;
-  opacity: 1;
-}

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

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

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

@@ -1,38 +0,0 @@
-.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/FormTextInput/index.tsx

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

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

@@ -1,21 +0,0 @@
-.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;
-}
-
-.input {
-  composes: inputBase;
-}
-
-.input:focus {
-  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
-}

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

@@ -1,75 +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, { useEffect, useState } from "react";
-
-import { usePrismTheme } from "@docusaurus/theme-common";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import { setStringRawBody } from "@theme/ApiDemoPanel/Body/slice";
-import { LiveProvider, LiveEditor, withLive } from "react-live";
-
-import styles from "./styles.module.css";
-
-function Live({ onEdit }: any) {
-  const isBrowser = useIsBrowser();
-  const [editorDisabled, setEditorDisabled] = useState(false);
-
-  // TODO: Temporary solution for disabling tab key
-  const handleKeydown = (event: React.KeyboardEvent) => {
-    if (event.key === "Tab") {
-      event.preventDefault();
-      setEditorDisabled(true);
-    }
-  };
-
-  return (
-    <div onClick={() => setEditorDisabled(false)}>
-      <LiveEditor
-        key={String(isBrowser)}
-        className={styles.playgroundEditor}
-        onChange={onEdit}
-        disabled={editorDisabled}
-        onKeyDown={handleKeydown}
-      />
-    </div>
-  );
-}
-
-const LiveComponent = withLive(Live);
-
-function App({
-  children,
-  transformCode,
-  value,
-  language,
-  action,
-  ...props
-}: any): JSX.Element {
-  const prismTheme = usePrismTheme();
-  const [code, setCode] = React.useState(children);
-
-  useEffect(() => {
-    action(setStringRawBody(code));
-  }, [action, code]);
-
-  return (
-    <div className={styles.playgroundContainer}>
-      <LiveProvider
-        code={children.replace(/\n$/, "")}
-        transformCode={transformCode ?? ((code) => `${code};`)}
-        theme={prismTheme}
-        language={language}
-        {...props}
-      >
-        <LiveComponent onEdit={setCode} />
-      </LiveProvider>
-    </div>
-  );
-}
-
-const LiveApp = withLive(App);
-export default LiveApp;

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

@@ -1,35 +0,0 @@
-.playgroundContainer {
-  margin-top: 1rem;
-  margin-bottom: var(--ifm-leading);
-  border-radius: var(--ifm-global-radius);
-  box-shadow: var(--ifm-global-shadow-lw);
-  overflow: auto;
-  max-height: 500px;
-}
-
-.playgroundHeader {
-  letter-spacing: 0.08rem;
-  padding: 0.75rem;
-  text-transform: uppercase;
-  font-weight: bold;
-  background: var(--ifm-color-emphasis-200);
-  color: var(--ifm-color-content);
-  font-size: var(--ifm-code-font-size);
-}
-
-.playgroundHeader:first-of-type {
-  background: var(--ifm-color-emphasis-600);
-  color: var(--ifm-color-content-inverse);
-}
-
-.playgroundEditor {
-  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
-    var(--ifm-font-family-monospace) !important;
-  /* rtl:ignore */
-  direction: ltr;
-}
-
-.playgroundPreview {
-  padding: 1rem;
-  background-color: var(--ifm-pre-background);
-}

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

@@ -1,62 +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";
-
-const methodStyle = {
-  borderRadius: "var(--ifm-global-radius)",
-};
-
-function colorForMethod(method: string) {
-  switch (method.toLowerCase()) {
-    case "get":
-      return "primary";
-    case "post":
-      return "success";
-    case "delete":
-      return "danger";
-    case "put":
-      return "info";
-    case "patch":
-      return "warning";
-    case "head":
-      return "secondary";
-    case "event":
-      return "secondary";
-    default:
-      return undefined;
-  }
-}
-
-export interface Props {
-  method: string;
-  path: string;
-}
-
-function MethodEndpoint({ method, path }: Props) {
-  return (
-    <pre
-      className="openapi-method-endpoint"
-      style={{
-        background: "var(--openapi-card-background-color)",
-        borderRadius: "var(--openapi-card-border-radius)",
-      }}
-    >
-      <span
-        style={methodStyle}
-        className={"badge badge--" + colorForMethod(method)}
-      >
-        {method.toUpperCase()}
-      </span>{" "}
-      <span className="openapi-method-endpoint__path">
-        {path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}
-      </span>
-    </pre>
-  );
-}
-
-export default MethodEndpoint;