docusaurus-theme-openapi-docs 0.0.0-345

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

@@ -0,0 +1,27 @@
+/* ============================================================================
+ * 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";
+
+interface Props {
+  label?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  children?: React.ReactNode;
+}
+
+function FloatingButton({ label, onClick, children }: Props) {
+  return (
+    <div className={styles.floatingButton}>
+      {label && <button onClick={onClick}>{label}</button>}
+      {children}
+    </div>
+  );
+}
+
+export default FloatingButton;

package/src/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/src/theme/ApiDemoPanel/FormFileUpload/index.tsx

@@ -0,0 +1,115 @@
+/* ============================================================================
+ * 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";
+
+type PreviewFile = { preview: string } & File;
+
+interface RenderPreviewProps {
+  file: PreviewFile;
+}
+
+function RenderPreview({ file }: RenderPreviewProps) {
+  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>
+      );
+  }
+}
+
+interface Props {
+  placeholder: string;
+  onChange?(file?: File): any;
+}
+
+function FormFileUpload({ placeholder, onChange }: Props) {
+  const [hover, setHover] = useState(false);
+  const [file, setFile] = useState<PreviewFile>();
+
+  function setAndNotifyFile(file?: PreviewFile) {
+    setFile(file);
+    onChange?.(file);
+  }
+
+  function handleDrop(accepted: PreviewFile[]) {
+    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/src/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/src/theme/ApiDemoPanel/FormItem/index.tsx

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

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

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

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

@@ -0,0 +1,54 @@
+/* ============================================================================
+ * 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";
+
+interface Props {
+  value?: string;
+  options: string[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+function FormMultiSelect({ value, options, onChange }: Props) {
+  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/src/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);
+}

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

@@ -0,0 +1,36 @@
+/* ============================================================================
+ * 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";
+
+interface Props {
+  value?: string;
+  options?: string[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+function FormSelect({ value, options, onChange }: Props) {
+  if (!Array.isArray(options) || options.length === 0) {
+    return null;
+  }
+
+  return (
+    <select className={styles.selectInput} value={value} onChange={onChange}>
+      {options.map((option) => {
+        return (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        );
+      })}
+    </select>
+  );
+}
+
+export default FormSelect;

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

@@ -0,0 +1,51 @@
+.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 48px 12px var(--ifm-pre-padding);
+
+  border-radius: 4px;
+}
+
+html[data-theme="dark"] .selectInput {
+  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;
+  -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;
+}
+
+.selectInput {
+  composes: inputBase;
+  -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;
+}
+
+.selectInput:focus {
+  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+}

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

@@ -0,0 +1,32 @@
+/* ============================================================================
+ * 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";
+
+interface Props {
+  value?: string;
+  placeholder?: string;
+  password?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+function FormTextInput({ value, placeholder, password, onChange }: Props) {
+  return (
+    <input
+      className={styles.input}
+      type={password ? "password" : "text"}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      autoComplete="off"
+    />
+  );
+}
+
+export default FormTextInput;

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

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

@@ -0,0 +1,55 @@
+/* ============================================================================
+ * 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 "put":
+      return "warning";
+    case "patch":
+      return "warning";
+    case "post":
+      return "success";
+    case "delete":
+      return "danger";
+    default:
+      return undefined;
+  }
+}
+
+interface Props {
+  method: string;
+  path: string;
+}
+
+function MethodEndpoint({ method, path }: Props) {
+  return (
+    <pre
+      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>{path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}</span>
+    </pre>
+  );
+}
+
+export default MethodEndpoint;