docusaurus-theme-openapi-docs 0.0.0-beta.646 → 0.0.0-beta.651

package/src/theme/ApiDemoPanel/index.tsx

@@ -29,7 +29,7 @@ function ApiDemoPanel({
         codeSamples={(item as any)["x-code-samples"] ?? []}
       />
       <Request item={item} />
-      <Response />
+      <Response item={item} />
     </>
   );
 }

package/src/theme/SchemaTabs/_SchemaTabs.scss

@@ -51,7 +51,6 @@
 
 .openapi-tabs__schema-container {
   width: 100%;
-  margin-top: 1rem;
   display: flex;
   align-items: center;
   overflow: hidden;

package/src/theme/styles.scss

@@ -54,10 +54,37 @@
   --openapi-input-border: var(--ifm-color-primary);
   --openapi-input-background: var(--openapi-card-background-color);
   --openapi-tree-line-color: var(--ifm-toc-border-color);
+  --openapi-code-tab-border-color: var(--ifm-toc-border-color);
+  --openapi-code-tab-border-color-python: #ffdb50;
+  --openapi-code-tab-border-color-bash: var(--ifm-color-danger);
+  --openapi-code-tab-border-color-go: var(--ifm-color-info);
+  --openapi-code-tab-border-color-js: var(--ifm-color-warning);
+  --openapi-code-tab-border-color-ruby: var(--ifm-color-danger);
+  --openapi-code-tab-border-color-csharp: #9b4f96;
+  --openapi-code-tab-border-color-nodejs: var(--ifm-color-success);
+  --openapi-code-tab-border-color-php: #6181b6;
+  --openapi-code-tab-border-color-java: #0374bd;
+  --openapi-code-tab-border-color-powershell: #00adef;
+  --openapi-code-tab-shadow-color-python: rgba(255, 219, 80, 0.25);
+  --openapi-code-tab-shadow-color-bash: rgba(250, 56, 62, 0.25);
+  --openapi-code-tab-shadow-color-go: rgba(84, 199, 236, 0.25);
+  --openapi-code-tab-shadow-color-js: rgba(255, 186, 0, 0.25);
+  --openapi-code-tab-shadow-color-ruby: rgba(250, 56, 62, 0.25);
+  --openapi-code-tab-shadow-color-csharp: rgba(155, 79, 150, 0.25);
+  --opeanpi-code-tab-shadow-color-nodejs: rgba(0, 164, 0, 0.25);
+  --openapi-code-tab-shadow-color-php: rgba(97, 129, 182, 0.25);
+  --openapi-code-tab-shadow-color-java: rgba(3, 116, 189, 0.25);
+  --opeanpi-code-tab-shadow-color-powershell: rgba(3, 116, 189, 0.25);
+  --openapi-demo-font-size-input: 12px;
+  --openapi-demo-font-size-code: 12px;
+  --openapi-demo-padding-input: 0.5rem;
+  --openapi-demo-border-color: var(--ifm-toc-border-color);
+  --openapi-demo-caret-bg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
 }
 
 [data-theme="dark"] {
   --openapi-card-background-color: var(--ifm-color-gray-900) !important;
+  --openapi-demo-caret-bg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24" fill="white"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>') !important;
 }
 
 .docs-wrapper {

package/src/theme-openapi.d.ts

@@ -190,8 +190,41 @@ declare module "@theme/ApiDemoPanel/ParamOptions" {
   export default function ParamOptions(props: ParamProps): JSX.Element;
 }
 
+declare module "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamMultiSelectFormItem" {
+  import { ParamProps } from "@theme/ApiDemoPanel/ParamOptions";
+
+  export default function ParamMultiSelectFormItem(
+    props: ParamProps
+  ): JSX.Element;
+}
+
+declare module "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamArrayFormItem" {
+  import { ParamProps } from "@theme/ApiDemoPanel/ParamOptions";
+
+  export default function ParamArrayFormItem(props: ParamProps): JSX.Element;
+}
+
+declare module "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamSelectFormItem" {
+  import { ParamProps } from "@theme/ApiDemoPanel/ParamOptions";
+
+  export default function ParamSelectFormItem(props: ParamProps): JSX.Element;
+}
+
+declare module "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamBooleanFormItem" {
+  import { ParamProps } from "@theme/ApiDemoPanel/ParamOptions";
+
+  export default function ParamBooleanFormItem(props: ParamProps): JSX.Element;
+}
+
+declare module "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamTextFormItem" {
+  import { ParamProps } from "@theme/ApiDemoPanel/ParamOptions";
+
+  export default function ParamTextFormItem(props: ParamProps): JSX.Element;
+}
+
 declare module "@theme/ApiDemoPanel/ParamOptions/slice" {
   export type { Param };
+  export const setParam;
   export default params as Reducer<State, AnyAction>;
 }
 
@@ -209,7 +242,13 @@ declare module "@theme/ApiDemoPanel/Request" {
 }
 
 declare module "@theme/ApiDemoPanel/Response" {
-  export default function Response(): JSX.Element;
+  import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
+
+  export interface ResponseProps {
+    item: NonNullable<ApiItem>;
+  }
+
+  export default function Response(props: ResponseProps): JSX.Element;
 }
 
 declare module "@theme/ApiDemoPanel/Response/slice" {

package/lib/theme/ApiDemoPanel/Execute/index.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import sdk from "@paloaltonetworks/postman-collection";
-export interface Props {
-    postman: sdk.Request;
-    proxy?: string;
-}
-declare function Execute({ postman, proxy }: Props): JSX.Element;
-export default Execute;

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

@@ -1,213 +0,0 @@
-"use strict";
-/* ============================================================================
- * 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.
- * ========================================================================== */
-var __importDefault =
-  (this && this.__importDefault) ||
-  function (mod) {
-    return mod && mod.__esModule ? mod : { default: mod };
-  };
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const buildPostmanRequest_1 = __importDefault(
-  require("@theme/ApiDemoPanel/buildPostmanRequest")
-);
-const slice_1 = require("@theme/ApiDemoPanel/Response/slice");
-const hooks_1 = require("@theme/ApiItem/hooks");
-const react_modal_1 = __importDefault(require("react-modal"));
-const makeRequest_1 = __importDefault(require("./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 = (0, hooks_1.useTypedSelector)(
-    (state) => state.params.path
-  );
-  const queryParams = (0, hooks_1.useTypedSelector)(
-    (state) => state.params.query
-  );
-  const cookieParams = (0, hooks_1.useTypedSelector)(
-    (state) => state.params.cookie
-  );
-  const headerParams = (0, hooks_1.useTypedSelector)(
-    (state) => state.params.header
-  );
-  const contentType = (0, hooks_1.useTypedSelector)(
-    (state) => state.contentType.value
-  );
-  const body = (0, hooks_1.useTypedSelector)((state) => state.body);
-  const accept = (0, hooks_1.useTypedSelector)((state) => state.accept.value);
-  const server = (0, hooks_1.useTypedSelector)((state) => state.server.value);
-  const params = (0, hooks_1.useTypedSelector)((state) => state.params);
-  const auth = (0, hooks_1.useTypedSelector)((state) => state.auth);
-  const isValidRequest = validateRequest(params);
-  const dispatch = (0, hooks_1.useTypedDispatch)();
-  const postmanRequest = (0, buildPostmanRequest_1.default)(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_1.default.useState(false);
-  // Set the following as default value to persist to session and enable modal
-  // sessionStorage.getItem("agreement-ack") === "true"
-  const [agreementAccepted, setAgreementAccepted] =
-    react_1.default.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 react_1.default.createElement(
-      "button",
-      {
-        className: "button button--sm button--secondary",
-        disabled: !isValidRequest,
-        style: !isValidRequest ? { pointerEvents: "all" } : {},
-        onClick: async () => {
-          dispatch((0, slice_1.setResponse)("Fetching..."));
-          try {
-            await delay(1200);
-            const res = await (0, makeRequest_1.default)(
-              postmanRequest,
-              proxy,
-              body
-            );
-            dispatch((0, slice_1.setResponse)(await res.text()));
-            dispatch((0, slice_1.setCode)(res.status));
-            res.headers &&
-              dispatch(
-                (0, slice_1.setHeaders)(Object.fromEntries(res.headers))
-              );
-          } catch (e) {
-            console.log(e);
-            dispatch((0, slice_1.setResponse)("Connection failed"));
-            dispatch((0, slice_1.clearCode)());
-            dispatch((0, slice_1.clearHeaders)());
-          }
-        },
-      },
-      "Send API Request"
-    );
-  } else {
-    return react_1.default.createElement(
-      react_1.default.Fragment,
-      null,
-      react_1.default.createElement(
-        "button",
-        {
-          className: "button button--sm button--secondary",
-          onClick: openModal,
-        },
-        "Send API Request"
-      ),
-      react_1.default.createElement(
-        react_modal_1.default,
-        {
-          isOpen: modalIsOpen,
-          onRequestClose: closeModal,
-          style: customStyles,
-          contentLabel: "Terms of Use",
-        },
-        react_1.default.createElement(
-          "form",
-          null,
-          react_1.default.createElement(
-            "div",
-            { className: "card" },
-            react_1.default.createElement(
-              "div",
-              { className: "card__header" },
-              react_1.default.createElement("h2", null, "Terms of Use"),
-              react_1.default.createElement("hr", null)
-            ),
-            react_1.default.createElement(
-              "div",
-              { className: "card__body" },
-              react_1.default.createElement(
-                "p",
-                null,
-                "By accepting this agreement the end user acknowledges the risks of performing authenticated and non-authenticated API requests from the browser."
-              ),
-              react_1.default.createElement(
-                "p",
-                null,
-                "The end user also accepts the responsibility of safeguarding API credentials and any potentially sensitive data returned by the API."
-              ),
-              react_1.default.createElement("br", null)
-            ),
-            react_1.default.createElement(
-              "div",
-              { className: "card__footer" },
-              react_1.default.createElement(
-                "div",
-                { className: "button-group button-group--block" },
-                react_1.default.createElement(
-                  "button",
-                  {
-                    className:
-                      "button button--sm button--outline button--success",
-                    onClick: acceptAgreement,
-                  },
-                  "AGREE"
-                ),
-                react_1.default.createElement(
-                  "button",
-                  {
-                    className:
-                      "button button--sm button--outline button--danger",
-                    onClick: closeModal,
-                  },
-                  "DISAGREE"
-                )
-              )
-            )
-          )
-        )
-      )
-    );
-  }
-}
-exports.default = Execute;

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

@@ -1,200 +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,
-  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: {
-  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(await res.text()));
-            dispatch(setCode(res.status));
-            res.headers &&
-              dispatch(setHeaders(Object.fromEntries(res.headers)));
-          } catch (e: any) {
-            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;