docusaurus-theme-openapi-docs 1.0.0

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

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
+
+var _postmanCodeGenerators = _interopRequireDefault(require("@paloaltonetworks/postman-code-generators"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _prismReactRenderer = _interopRequireWildcard(require("prism-react-renderer"));
+
+var _hooks = require("../hooks");
+
+var _buildPostmanRequest = _interopRequireDefault(require("./../buildPostmanRequest"));
+
+var _FloatingButton = _interopRequireDefault(require("./../FloatingButton"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* ============================================================================
+ * 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
+const languageSet = [{
+  tabName: "cURL",
+  highlight: "bash",
+  language: "curl",
+  variant: "curl",
+  options: {
+    longFormat: false,
+    followRedirect: true,
+    trimRequestBody: true
+  }
+}, {
+  tabName: "Node",
+  highlight: "javascript",
+  language: "nodejs",
+  variant: "axios",
+  options: {
+    ES6_enabled: true,
+    followRedirect: true,
+    trimRequestBody: true
+  }
+}, {
+  tabName: "Go",
+  highlight: "go",
+  language: "go",
+  variant: "native",
+  options: {
+    followRedirect: true,
+    trimRequestBody: true
+  }
+}, {
+  tabName: "Python",
+  highlight: "python",
+  language: "python",
+  variant: "requests",
+  options: {
+    followRedirect: true,
+    trimRequestBody: true
+  }
+}];
+const languageTheme = {
+  plain: {
+    color: "var(--ifm-code-color)"
+  },
+  styles: [{
+    types: ["inserted", "attr-name"],
+    style: {
+      color: "var(--openapi-code-green)"
+    }
+  }, {
+    types: ["string", "url"],
+    style: {
+      color: "var(--openapi-code-green)"
+    }
+  }, {
+    types: ["builtin", "char", "constant", "function"],
+    style: {
+      color: "var(--openapi-code-blue)"
+    }
+  }, {
+    types: ["punctuation", "operator"],
+    style: {
+      color: "var(--openapi-code-dim)"
+    }
+  }, {
+    types: ["class-name"],
+    style: {
+      color: "var(--openapi-code-orange)"
+    }
+  }, {
+    types: ["tag", "arrow", "keyword"],
+    style: {
+      color: "var(--openapi-code-purple)"
+    }
+  }, {
+    types: ["boolean"],
+    style: {
+      color: "var(--openapi-code-red)"
+    }
+  }]
+};
+
+function Curl({
+  postman,
+  codeSamples
+}) {
+  var _ref, _siteConfig$themeConf;
+
+  // TODO: match theme for vscode.
+  const {
+    siteConfig
+  } = (0, _useDocusaurusContext.default)();
+  const [copyText, setCopyText] = (0, _react.useState)("Copy");
+  const contentType = (0, _hooks.useTypedSelector)(state => state.contentType.value);
+  const accept = (0, _hooks.useTypedSelector)(state => state.accept.value);
+  const server = (0, _hooks.useTypedSelector)(state => state.server.value);
+  const body = (0, _hooks.useTypedSelector)(state => state.body);
+  const pathParams = (0, _hooks.useTypedSelector)(state => state.params.path);
+  const queryParams = (0, _hooks.useTypedSelector)(state => state.params.query);
+  const cookieParams = (0, _hooks.useTypedSelector)(state => state.params.cookie);
+  const headerParams = (0, _hooks.useTypedSelector)(state => state.params.header);
+  const auth = (0, _hooks.useTypedSelector)(state => state.auth); // TODO
+
+  const langs = [...((_ref = siteConfig === null || siteConfig === void 0 ? void 0 : (_siteConfig$themeConf = siteConfig.themeConfig) === null || _siteConfig$themeConf === void 0 ? void 0 : _siteConfig$themeConf.languageTabs) !== null && _ref !== void 0 ? _ref : languageSet), ...codeSamples];
+  const [language, setLanguage] = (0, _react.useState)(langs[0]);
+  const [codeText, setCodeText] = (0, _react.useState)("");
+  (0, _react.useEffect)(() => {
+    if (language && !!language.options) {
+      const postmanRequest = (0, _buildPostmanRequest.default)(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth
+      });
+
+      _postmanCodeGenerators.default.convert(language.language, language.variant, postmanRequest, language.options, (error, snippet) => {
+        if (error) {
+          return;
+        }
+
+        setCodeText(snippet);
+      });
+    } else if (language && !!language.source) {
+      setCodeText(language.source);
+    } else {
+      setCodeText("");
+    }
+  }, [accept, body, contentType, cookieParams, headerParams, language, pathParams, postman, queryParams, server, auth]);
+  const ref = (0, _react.useRef)(null);
+
+  const handleCurlCopy = () => {
+    var _ref$current;
+
+    setCopyText("Copied");
+    setTimeout(() => {
+      setCopyText("Copy");
+    }, 2000);
+
+    if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.innerText) {
+      navigator.clipboard.writeText(ref.current.innerText);
+    }
+  };
+
+  if (language === undefined) {
+    return null;
+  }
+
+  return <>
+      <div className={(0, _clsx.default)(_stylesModule.default.buttonGroup, "api-code-tab-group")}>
+        {langs.map(lang => {
+        return <button key={lang.tabName || lang.label} className={(0, _clsx.default)(language === lang ? _stylesModule.default.selected : undefined, language === lang ? "api-code-tab--active" : undefined, "api-code-tab")} onClick={() => setLanguage(lang)}>
+              {lang.tabName || lang.label}
+            </button>;
+      })}
+      </div>
+
+      <_prismReactRenderer.default {..._prismReactRenderer.defaultProps} theme={languageTheme} code={codeText} language={language.highlight || language.lang}>
+        {({
+        className,
+        tokens,
+        getLineProps,
+        getTokenProps
+      }) => <_FloatingButton.default onClick={handleCurlCopy} label={copyText}>
+            <pre className={className} style={{
+          background: "var(--openapi-card-background-color)",
+          paddingRight: "60px",
+          borderRadius: "2px 2px var(--openapi-card-border-radius) var(--openapi-card-border-radius)"
+        }}>
+              <code ref={ref}>
+                {tokens.map((line, i) => <span {...getLineProps({
+              line,
+              key: i
+            })}>
+                    {line.map((token, key) => {
+                if (token.types.includes("arrow")) {
+                  token.types = ["arrow"];
+                }
+
+                return <span {...getTokenProps({
+                  token,
+                  key
+                })} />;
+              })}
+                    {"\n"}
+                  </span>)}
+              </code>
+            </pre>
+          </_FloatingButton.default>}
+      </_prismReactRenderer.default>
+    </>;
+}
+
+var _default = Curl;
+exports.default = _default;

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

@@ -0,0 +1,84 @@
+.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/lib/theme/ApiDemoPanel/Execute/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _hooks = require("../hooks");
+
+var _slice = require("../Response/slice");
+
+var _buildPostmanRequest = _interopRequireDefault(require("./../buildPostmanRequest"));
+
+var _makeRequest = _interopRequireDefault(require("./makeRequest"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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 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.useTypedSelector)(state => state.params.path);
+  const queryParams = (0, _hooks.useTypedSelector)(state => state.params.query);
+  const cookieParams = (0, _hooks.useTypedSelector)(state => state.params.cookie);
+  const headerParams = (0, _hooks.useTypedSelector)(state => state.params.header);
+  const contentType = (0, _hooks.useTypedSelector)(state => state.contentType.value);
+  const body = (0, _hooks.useTypedSelector)(state => state.body);
+  const accept = (0, _hooks.useTypedSelector)(state => state.accept.value);
+  const server = (0, _hooks.useTypedSelector)(state => state.server.value);
+  const params = (0, _hooks.useTypedSelector)(state => state.params);
+  const auth = (0, _hooks.useTypedSelector)(state => state.auth);
+  const isValidRequest = validateRequest(params);
+  const dispatch = (0, _hooks.useTypedDispatch)();
+  const postmanRequest = (0, _buildPostmanRequest.default)(postman, {
+    queryParams,
+    pathParams,
+    cookieParams,
+    contentType,
+    accept,
+    headerParams,
+    body,
+    server,
+    auth
+  });
+  return <button className="button button--block button--primary" style={{
+    height: "48px",
+    marginBottom: "var(--ifm-spacing-vertical)"
+  }} disabled={!isValidRequest} onClick={async () => {
+    dispatch((0, _slice.setResponse)("loading..."));
+
+    try {
+      const res = await (0, _makeRequest.default)(postmanRequest, proxy, body);
+      dispatch((0, _slice.setResponse)(res));
+    } catch (e) {
+      var _e$message;
+
+      dispatch((0, _slice.setResponse)((_e$message = e.message) !== null && _e$message !== void 0 ? _e$message : "Error fetching."));
+    }
+  }}>
+      Execute
+    </button>;
+}
+
+var _default = Execute;
+exports.default = _default;

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

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 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.
+ * ========================================================================== */
+// @ts-ignore
+async function loadImage(content) {
+  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, proxy, _body) {
+  var _request$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 = request.body) === null || _request$body === void 0 ? void 0 : _request$body.toJSON();
+  let myBody = 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":
+        {
+          var _body$raw;
+
+          myBody = ((_body$raw = body.raw) !== null && _body$raw !== void 0 ? _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":
+        {
+          var _body$content;
+
+          if (_body.type === "raw" && ((_body$content = _body.content) === null || _body$content === void 0 ? void 0 : _body$content.type) === "file") {
+            myBody = await loadImage(_body.content.value.content);
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+  }
+
+  const requestOptions = {
+    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();
+  });
+}
+
+var _default = makeRequest;
+exports.default = _default;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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 FloatingButton({
+  label,
+  onClick,
+  children
+}) {
+  return <div className={_stylesModule.default.floatingButton}>
+      {label && <button onClick={onClick}>{label}</button>}
+      {children}
+    </div>;
+}
+
+var _default = FloatingButton;
+exports.default = _default;

package/lib/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;
+}