docusaurus-theme-openapi-docs 0.0.0-619 → 0.0.0-685

package/{lib-next/theme/ApiDemoPanel/FormFileUpload/styles.module.css → lib/theme/ApiExplorer/FormFileUpload/_FormFileUpload.scss}

@@ -1,21 +1,31 @@
-.dropzone {
+.openapi-explorer__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);
+
+  &: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));
+
+    .openapi-explorer__dropzone-content {
+      color: var(--ifm-pre-color);
+    }
+  }
 }
 
-.dropzoneHover {
+.openapi-explorer__dropzone-hover {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -33,43 +43,30 @@
       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));
-}
+  .openapi-explorer__dropzone-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: var(--ifm-pre-padding) 0;
+    color: var(--ifm-pre-color);
+  }
 
-.dropzoneContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin: var(--ifm-pre-padding) 0;
-  color: var(--openapi-dropzone-color);
+  .openapi-explorer__file-name {
+    margin: 0 calc(var(--ifm-pre-padding) * 1.5);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
 }
 
-.dropzone:hover .dropzoneContent {
-  color: var(--ifm-pre-color);
-}
-
-.dropzoneHover .dropzoneContent {
+.openapi-explorer__dropzone-content {
   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;
+  color: var(--openapi-dropzone-color);
 }

package/lib/theme/ApiExplorer/FormFileUpload/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface Props {
+    placeholder: string;
+    onChange?(file?: File): any;
+}
+declare function FormFileUpload({ placeholder, onChange }: Props): JSX.Element;
+export default FormFileUpload;

package/lib/theme/ApiExplorer/FormFileUpload/index.js

@@ -0,0 +1,161 @@
+"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 __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null)
+      for (var k in mod)
+        if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+          __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const FloatingButton_1 = __importDefault(
+  require("@theme/ApiExplorer/FloatingButton")
+);
+const react_magic_dropzone_1 = __importDefault(require("react-magic-dropzone"));
+function RenderPreview({ file }) {
+  switch (file.type) {
+    case "image/png":
+    case "image/jpeg":
+    case "image/jpg":
+    case "image/svg+xml":
+      return react_1.default.createElement("img", {
+        style: {
+          borderRadius: "4px",
+        },
+        src: file.preview,
+        alt: "",
+      });
+    default:
+      return react_1.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            minWidth: 0,
+          },
+        },
+        react_1.default.createElement(
+          "svg",
+          { viewBox: "0 0 100 120", style: { width: "50px", height: "60px" } },
+          react_1.default.createElement("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",
+          }),
+          react_1.default.createElement("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",
+          })
+        ),
+        react_1.default.createElement(
+          "div",
+          { className: "openapi-explorer__file-name" },
+          file.name
+        )
+      );
+  }
+}
+function FormFileUpload({ placeholder, onChange }) {
+  const [hover, setHover] = (0, react_1.useState)(false);
+  const [file, setFile] = (0, react_1.useState)();
+  function setAndNotifyFile(file) {
+    setFile(file);
+    onChange?.(file);
+  }
+  function handleDrop(accepted) {
+    const [file] = accepted;
+    setAndNotifyFile(file);
+    setHover(false);
+  }
+  return react_1.default.createElement(
+    FloatingButton_1.default,
+    null,
+    react_1.default.createElement(
+      react_magic_dropzone_1.default,
+      {
+        className: hover
+          ? "openapi-explorer__dropzone-hover"
+          : "openapi-explorer__dropzone",
+        onDrop: handleDrop,
+        onDragEnter: () => setHover(true),
+        onDragLeave: () => setHover(false),
+        multiple: false,
+        style: { marginTop: "calc(var(--ifm-pre-padding) / 2)" },
+      },
+      file
+        ? react_1.default.createElement(
+            react_1.default.Fragment,
+            null,
+            react_1.default.createElement(
+              "button",
+              {
+                style: { marginTop: "calc(var(--ifm-pre-padding) / 2)" },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setAndNotifyFile(undefined);
+                },
+              },
+              "Clear"
+            ),
+            react_1.default.createElement(RenderPreview, { file: file })
+          )
+        : react_1.default.createElement(
+            "div",
+            { className: "openapi-explorer__dropzone-content" },
+            placeholder
+          )
+    )
+  );
+}
+exports.default = FormFileUpload;

package/lib/theme/ApiExplorer/FormItem/_FormItem.scss

@@ -0,0 +1,21 @@
+.openapi-explorer__form-item {
+  padding: var(--openapi-explorer-padding-input);
+  font-size: var(--openapi-explorer-font-size-input);
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  .required {
+    color: var(--openapi-required);
+  }
+}
+
+.openapi-explorer__form-item-body-container {
+  padding: 0;
+}
+
+.openapi-explorer__form-item-label {
+  font-family: var(--ifm-font-family-monospace);
+  font-weight: bold;
+}

package/lib/theme/ApiExplorer/FormItem/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface Props {
+    label?: string;
+    type?: string;
+    required?: boolean | undefined;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function FormItem({ label, type, required, children, className }: Props): JSX.Element;
+export default FormItem;

package/lib/theme/ApiExplorer/FormItem/index.js

@@ -0,0 +1,44 @@
+"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 clsx_1 = __importDefault(require("clsx"));
+function FormItem({ label, type, required, children, className }) {
+  return react_1.default.createElement(
+    "div",
+    {
+      className: (0, clsx_1.default)("openapi-explorer__form-item", className),
+    },
+    label &&
+      react_1.default.createElement(
+        "label",
+        { className: "openapi-explorer__form-item-label" },
+        label
+      ),
+    type &&
+      react_1.default.createElement(
+        "span",
+        { style: { opacity: 0.6 } },
+        " \u2014 ",
+        type
+      ),
+    required &&
+      react_1.default.createElement(
+        "span",
+        { className: "openapi-schema__required" },
+        "required"
+      ),
+    react_1.default.createElement("div", null, children)
+  );
+}
+exports.default = FormItem;

package/lib/theme/ApiExplorer/FormMultiSelect/_FormMultiSelect.scss

@@ -0,0 +1,30 @@
+.openapi-explorer__multi-select-input {
+  width: 100%;
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  background-color: var(--openapi-input-background);
+  outline: none;
+  font-size: var(--openapi-explorer-font-size-input);
+  color: var(--ifm-pre-color);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:focus {
+    border: 1px solid var(--openapi-input-border);
+  }
+
+  &.error {
+    border: 1px solid var(--ifm-color-danger);
+  }
+
+  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);
+  }
+}

package/lib/theme/ApiExplorer/FormMultiSelect/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface Props {
+    value?: string;
+    options: string[];
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    showErrors?: boolean;
+}
+declare function FormMultiSelect({ value, options, onChange, showErrors }: Props): JSX.Element | null;
+export default FormMultiSelect;

package/lib/theme/ApiExplorer/FormMultiSelect/index.js

@@ -0,0 +1,51 @@
+"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 clsx_1 = __importDefault(require("clsx"));
+function FormMultiSelect({ value, options, onChange, showErrors }) {
+  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 react_1.default.createElement(
+    "select",
+    {
+      style: { height: height },
+      className: (0, clsx_1.default)("openapi-explorer__multi-select-input", {
+        error: showErrors,
+      }),
+      value: value,
+      onChange: onChange,
+      size: Math.min(6, options.length + 1),
+      multiple: true,
+    },
+    options.map((option) => {
+      return react_1.default.createElement(
+        "option",
+        { key: option, value: option },
+        option
+      );
+    })
+  );
+}
+exports.default = FormMultiSelect;

package/{src/theme/ApiDemoPanel/FormSelect/styles.module.css → lib/theme/ApiExplorer/FormSelect/_FormSelect.scss}

@@ -1,27 +1,10 @@
-.inputBase {
+html[data-theme="dark"] .openapi-explorer__select-input {
   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;
@@ -34,8 +17,17 @@ html[data-theme="dark"] .selectInput {
   background-size: auto auto;
 }
 
-.selectInput {
-  composes: inputBase;
+.openapi-explorer__select-input {
+  width: 100%;
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  padding: var(--openapi-explorer-padding-input);
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  background-color: var(--openapi-input-background);
+  font-size: var(--openapi-explorer-font-size-input);
+  font-family: var(--ifm-font-family-monospace);
+  color: var(--ifm-pre-color);
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
@@ -44,8 +36,8 @@ html[data-theme="dark"] .selectInput {
   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);
+  &:focus {
+    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  }
 }

package/lib/theme/ApiExplorer/FormSelect/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface Props {
+    value?: string;
+    options?: string[];
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+declare function FormSelect({ value, options, onChange }: Props): JSX.Element | null;
+export default FormSelect;

package/lib/theme/ApiExplorer/FormSelect/index.js

@@ -0,0 +1,35 @@
+"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"));
+function FormSelect({ value, options, onChange }) {
+  if (!Array.isArray(options) || options.length === 0) {
+    return null;
+  }
+  return react_1.default.createElement(
+    "select",
+    {
+      className: "openapi-explorer__select-input",
+      value: value,
+      onChange: onChange,
+    },
+    options.map((option) => {
+      return react_1.default.createElement(
+        "option",
+        { key: option, value: option },
+        option
+      );
+    })
+  );
+}
+exports.default = FormSelect;

package/lib/theme/ApiExplorer/FormTextInput/_FormTextInput.scss

@@ -0,0 +1,34 @@
+.openapi-explorer__form-item-input {
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  background-color: var(--openapi-input-background);
+  border: 1px solid transparent;
+  outline: none;
+  width: 100%;
+  color: var(--ifm-pre-color);
+  padding: var(--openapi-explorer-padding-input);
+  border-radius: 4px;
+
+  &:hover {
+    border: 1px solid var(--ifm-toc-border-color);
+  }
+
+  &:focus {
+    border: 1px solid var(--ifm-color-primary);
+    box-shadow: none;
+  }
+
+  &.error {
+    border: 1px solid var(--openapi-required);
+  }
+}
+
+.openapi-explorer__input-error {
+  font-size: var(--openapi-explorer-font-size-input);
+  color: var(--openapi-required);
+  padding-top: var(--openapi-explorer-padding-input);
+
+  &::before {
+    display: inline;
+    content: "⚠ ";
+  }
+}

package/lib/theme/ApiExplorer/FormTextInput/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface Props {
+    value?: string;
+    placeholder?: string;
+    password?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+declare function FormTextInput({ isRequired, value, placeholder, password, onChange, paramName, }: Props): JSX.Element;
+export default FormTextInput;

package/lib/theme/ApiExplorer/FormTextInput/index.js

@@ -0,0 +1,73 @@
+"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 });
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const error_message_1 = require("@hookform/error-message");
+const clsx_1 = __importDefault(require("clsx"));
+const react_hook_form_1 = require("react-hook-form");
+function FormTextInput({
+  isRequired,
+  value,
+  placeholder,
+  password,
+  onChange,
+  paramName,
+}) {
+  placeholder = placeholder?.split("\n")[0];
+  const {
+    register,
+    formState: { errors },
+  } = (0, react_hook_form_1.useFormContext)();
+  const showErrorMessage = errors?.[paramName]?.message;
+  return react_1.default.createElement(
+    react_1.default.Fragment,
+    null,
+    paramName
+      ? react_1.default.createElement("input", {
+          ...register(paramName, {
+            required: isRequired ? "This field is required" : false,
+          }),
+          className: (0, clsx_1.default)("openapi-explorer__form-item-input", {
+            error: showErrorMessage,
+          }),
+          type: password ? "password" : "text",
+          placeholder: placeholder,
+          title: placeholder,
+          value: value,
+          onChange: onChange,
+          autoComplete: "off",
+        })
+      : react_1.default.createElement("input", {
+          className: "openapi-explorer__form-item-input",
+          type: password ? "password" : "text",
+          placeholder: placeholder,
+          title: placeholder,
+          value: value,
+          onChange: onChange,
+          autoComplete: "off",
+        }),
+    showErrorMessage &&
+      react_1.default.createElement(error_message_1.ErrorMessage, {
+        errors: errors,
+        name: paramName,
+        render: ({ message }) =>
+          react_1.default.createElement(
+            "div",
+            { className: "openapi-explorer__input-error" },
+            message
+          ),
+      })
+  );
+}
+exports.default = FormTextInput;

package/lib/theme/ApiExplorer/LiveEditor/_LiveEditor.scss

@@ -0,0 +1,15 @@
+.openapi-explorer__playground-container {
+  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;
+}
+
+.openapi-explorer__playground-editor {
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
+  /* rtl:ignore */
+  direction: ltr;
+}

package/lib/theme/ApiExplorer/LiveEditor/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const LiveApp: {
+    (props: any): JSX.Element;
+    displayName: string;
+};
+export default LiveApp;