docusaurus-theme-openapi-docs 0.0.0-348 → 0.0.0-351

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

@@ -0,0 +1,262 @@
+/* ============================================================================
+ * 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, { useRef, useState, useEffect } from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import codegen from "@paloaltonetworks/postman-code-generators";
+import clsx from "clsx";
+import Highlight, { defaultProps } from "prism-react-renderer";
+import { useTypedSelector } from "../hooks";
+import buildPostmanRequest from "./../buildPostmanRequest";
+import FloatingButton from "./../FloatingButton";
+import styles from "./styles.module.css";
+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 }) {
+  // TODO: match theme for vscode.
+  const { siteConfig } = useDocusaurusContext();
+  const [copyText, setCopyText] = useState("Copy");
+  const contentType = useTypedSelector((state) => state.contentType.value);
+  const accept = useTypedSelector((state) => state.accept.value);
+  const server = useTypedSelector((state) => state.server.value);
+  const body = useTypedSelector((state) => state.body);
+  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 auth = useTypedSelector((state) => state.auth); // TODO
+
+  const langs = [
+    ...(siteConfig?.themeConfig?.languageTabs ?? languageSet),
+    ...codeSamples,
+  ];
+  const [language, setLanguage] = useState(langs[0]);
+  const [codeText, setCodeText] = useState("");
+  useEffect(() => {
+    if (language && !!language.options) {
+      const postmanRequest = buildPostmanRequest(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+      codegen.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 = useRef(null);
+
+  const handleCurlCopy = () => {
+    setCopyText("Copied");
+    setTimeout(() => {
+      setCopyText("Copy");
+    }, 2000);
+
+    if (ref.current?.innerText) {
+      navigator.clipboard.writeText(ref.current.innerText);
+    }
+  };
+
+  if (language === undefined) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={clsx(styles.buttonGroup, "api-code-tab-group")}>
+        {langs.map((lang) => {
+          return (
+            <button
+              key={lang.tabName || lang.label}
+              className={clsx(
+                language === lang ? styles.selected : undefined,
+                language === lang ? "api-code-tab--active" : undefined,
+                "api-code-tab"
+              )}
+              onClick={() => setLanguage(lang)}
+            >
+              {lang.tabName || lang.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <Highlight
+        {...defaultProps}
+        theme={languageTheme}
+        code={codeText}
+        language={language.highlight || language.lang}
+      >
+        {({ className, tokens, getLineProps, getTokenProps }) => (
+          <FloatingButton 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>
+        )}
+      </Highlight>
+    </>
+  );
+}
+
+export default Curl;

package/lib-next/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-next/theme/ApiDemoPanel/FloatingButton/index.js

@@ -0,0 +1,19 @@
+/* ============================================================================
+ * 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";
+
+function FloatingButton({ label, onClick, children }) {
+  return (
+    <div className={styles.floatingButton}>
+      {label && <button onClick={onClick}>{label}</button>}
+      {children}
+    </div>
+  );
+}
+
+export default FloatingButton;

package/lib-next/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/lib-next/theme/ApiDemoPanel/FormFileUpload/index.js

@@ -0,0 +1,112 @@
+/* ============================================================================
+ * 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 MagicDropzone from "react-magic-dropzone";
+import FloatingButton from "../FloatingButton";
+import styles from "./styles.module.css";
+
+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={styles.filename}>{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 ? 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/lib-next/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/lib-next/theme/ApiDemoPanel/FormItem/index.js

@@ -0,0 +1,29 @@
+/* ============================================================================
+ * 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";
+
+function FormItem({ label, type, children }) {
+  return (
+    <div className={styles.formItem}>
+      <code>{label}</code>
+      {type && (
+        <span
+          style={{
+            opacity: 0.6,
+          }}
+        >
+          {" "}
+          — {type}
+        </span>
+      )}
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export default FormItem;

package/lib-next/theme/ApiDemoPanel/FormItem/styles.module.css

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

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

@@ -0,0 +1,49 @@
+/* ============================================================================
+ * 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";
+
+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={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/lib-next/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);
+}