docusaurus-theme-openapi-docs 2.0.0-beta.1 → 2.0.0-beta.3

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamArrayFormItem.js

@@ -0,0 +1,194 @@
+"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 error_message_1 = require("@hookform/error-message");
+const toolkit_1 = require("@reduxjs/toolkit");
+const FormSelect_1 = __importDefault(require("@theme/ApiDemoPanel/FormSelect"));
+const FormTextInput_1 = __importDefault(
+  require("@theme/ApiDemoPanel/FormTextInput")
+);
+const slice_1 = require("@theme/ApiDemoPanel/ParamOptions/slice");
+const hooks_1 = require("@theme/ApiItem/hooks");
+const react_hook_form_1 = require("react-hook-form");
+function ArrayItem({ param, onChange }) {
+  if (param.schema?.items?.type === "boolean") {
+    return react_1.default.createElement(FormSelect_1.default, {
+      options: ["---", "true", "false"],
+      onChange: (e) => {
+        const val = e.target.value;
+        onChange(val === "---" ? undefined : val);
+      },
+    });
+  }
+  return react_1.default.createElement(FormTextInput_1.default, {
+    placeholder: param.description || param.name,
+    onChange: (e) => {
+      onChange(e.target.value);
+    },
+  });
+}
+function ParamArrayFormItem({ param }) {
+  const [items, setItems] = (0, react_1.useState)([]);
+  const dispatch = (0, hooks_1.useTypedDispatch)();
+  const {
+    control,
+    formState: { errors },
+  } = (0, react_hook_form_1.useFormContext)();
+  const showErrorMessage = errors?.paramArray?.message;
+  function handleAddItem() {
+    setItems((i) => [
+      ...i,
+      {
+        id: (0, toolkit_1.nanoid)(),
+      },
+    ]);
+  }
+  (0, react_1.useEffect)(() => {
+    const values = items.map((item) => item.value).filter((item) => !!item);
+    dispatch(
+      (0, slice_1.setParam)({
+        ...param,
+        value: values.length > 0 ? values : undefined,
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items]);
+  function handleDeleteItem(itemToDelete) {
+    return () => {
+      const newItems = items.filter((i) => i.id !== itemToDelete.id);
+      setItems(newItems);
+    };
+  }
+  function handleChangeItem(itemToUpdate, onChange) {
+    return (value) => {
+      const newItems = items.map((i) => {
+        if (i.id === itemToUpdate.id) {
+          return { ...i, value: value };
+        }
+        return i;
+      });
+      setItems(newItems);
+      onChange(newItems);
+    };
+  }
+  return react_1.default.createElement(
+    react_1.default.Fragment,
+    null,
+    react_1.default.createElement(react_hook_form_1.Controller, {
+      control: control,
+      rules: { required: param.required ? "This field is required" : false },
+      name: "paramArray",
+      render: ({ field: { onChange, name } }) =>
+        react_1.default.createElement(
+          react_1.default.Fragment,
+          null,
+          items.map((item) =>
+            react_1.default.createElement(
+              "div",
+              { key: item.id, style: { display: "flex" } },
+              react_1.default.createElement(ArrayItem, {
+                param: param,
+                onChange: handleChangeItem(item, onChange),
+              }),
+              react_1.default.createElement(
+                "button",
+                {
+                  className: "openapi-demo__delete-btn",
+                  onClick: handleDeleteItem(item),
+                },
+                react_1.default.createElement(
+                  "svg",
+                  {
+                    focusable: "false",
+                    preserveAspectRatio: "xMidYMid meet",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "currentColor",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 32 32",
+                    "aria-hidden": "true",
+                  },
+                  react_1.default.createElement("path", {
+                    d: "M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z",
+                  }),
+                  react_1.default.createElement("title", null, "Delete")
+                )
+              )
+            )
+          ),
+          react_1.default.createElement(
+            "button",
+            { className: "openapi-demo__thin-btn", onClick: handleAddItem },
+            "Add item"
+          )
+        ),
+    }),
+    showErrorMessage &&
+      react_1.default.createElement(error_message_1.ErrorMessage, {
+        errors: errors,
+        name: "paramArray",
+        render: ({ message }) =>
+          react_1.default.createElement(
+            "div",
+            { className: "openapi-demo__input-error" },
+            message
+          ),
+      })
+  );
+}
+exports.default = ParamArrayFormItem;

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamBooleanFormItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Param } from "@theme/ApiDemoPanel/ParamOptions/slice";
+export interface ParamProps {
+    param: Param;
+}
+export default function ParamBooleanFormItem({ param }: ParamProps): JSX.Element;

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamBooleanFormItem.js

@@ -0,0 +1,63 @@
+"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 error_message_1 = require("@hookform/error-message");
+const FormSelect_1 = __importDefault(require("@theme/ApiDemoPanel/FormSelect"));
+const slice_1 = require("@theme/ApiDemoPanel/ParamOptions/slice");
+const hooks_1 = require("@theme/ApiItem/hooks");
+const react_hook_form_1 = require("react-hook-form");
+function ParamBooleanFormItem({ param }) {
+  const dispatch = (0, hooks_1.useTypedDispatch)();
+  const {
+    control,
+    formState: { errors },
+  } = (0, react_hook_form_1.useFormContext)();
+  const showErrorMessage = errors?.paramBoolean;
+  return react_1.default.createElement(
+    react_1.default.Fragment,
+    null,
+    react_1.default.createElement(react_hook_form_1.Controller, {
+      control: control,
+      rules: { required: param.required ? "This field is required" : false },
+      name: "paramBoolean",
+      render: ({ field: { onChange, name } }) =>
+        react_1.default.createElement(FormSelect_1.default, {
+          name: name,
+          options: ["---", "true", "false"],
+          onChange: (e) => {
+            const val = e.target.value;
+            dispatch(
+              (0, slice_1.setParam)({
+                ...param,
+                value: val === "---" ? undefined : val,
+              })
+            );
+            onChange(val);
+          },
+        }),
+    }),
+    showErrorMessage &&
+      react_1.default.createElement(error_message_1.ErrorMessage, {
+        errors: errors,
+        name: "paramBoolean",
+        render: ({ message }) =>
+          react_1.default.createElement(
+            "div",
+            { className: "openapi-demo__input-error" },
+            message
+          ),
+      })
+  );
+}
+exports.default = ParamBooleanFormItem;

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Param } from "@theme/ApiDemoPanel/ParamOptions/slice";
+export interface ParamProps {
+    param: Param;
+}
+export default function ParamMultiSelectFormItem({ param }: ParamProps): JSX.Element;

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.js

@@ -0,0 +1,89 @@
+"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 error_message_1 = require("@hookform/error-message");
+const FormMultiSelect_1 = __importDefault(
+  require("@theme/ApiDemoPanel/FormMultiSelect")
+);
+const slice_1 = require("@theme/ApiDemoPanel/ParamOptions/slice");
+const hooks_1 = require("@theme/ApiItem/hooks");
+const react_hook_form_1 = require("react-hook-form");
+function ParamMultiSelectFormItem({ param }) {
+  const {
+    control,
+    formState: { errors },
+  } = (0, react_hook_form_1.useFormContext)();
+  const showErrorMessage = errors?.paramMultiSelect;
+  const dispatch = (0, hooks_1.useTypedDispatch)();
+  const options = param.schema?.items?.enum ?? [];
+  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 paramTypeToWatch = pathParams.length
+    ? pathParams
+    : queryParams.length
+    ? queryParams
+    : cookieParams.length
+    ? cookieParams
+    : headerParams;
+  const handleChange = (e, onChange) => {
+    const values = Array.prototype.filter
+      .call(e.target.options, (o) => o.selected)
+      .map((o) => o.value);
+    dispatch(
+      (0, slice_1.setParam)({
+        ...param,
+        value: values.length > 0 ? values : undefined,
+      })
+    );
+    onChange(paramTypeToWatch);
+  };
+  return react_1.default.createElement(
+    react_1.default.Fragment,
+    null,
+    react_1.default.createElement(react_hook_form_1.Controller, {
+      control: control,
+      rules: { required: param.required ? "This field is required" : false },
+      name: "paramMultiSelect",
+      render: ({ field: { onChange, name } }) =>
+        react_1.default.createElement(FormMultiSelect_1.default, {
+          options: options,
+          name: name,
+          onChange: (e) => handleChange(e, onChange),
+          showErrors: showErrorMessage,
+        }),
+    }),
+    showErrorMessage &&
+      react_1.default.createElement(error_message_1.ErrorMessage, {
+        errors: errors,
+        name: "paramMultiSelect",
+        render: ({ message }) =>
+          react_1.default.createElement(
+            "div",
+            { className: "openapi-demo__input-error" },
+            message
+          ),
+      })
+  );
+}
+exports.default = ParamMultiSelectFormItem;

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamSelectFormItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Param } from "@theme/ApiDemoPanel/ParamOptions/slice";
+export interface ParamProps {
+    param: Param;
+}
+export default function ParamSelectFormItem({ param }: ParamProps): JSX.Element;

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamSelectFormItem.js

@@ -0,0 +1,63 @@
+"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 error_message_1 = require("@hookform/error-message");
+const FormSelect_1 = __importDefault(require("@theme/ApiDemoPanel/FormSelect"));
+const slice_1 = require("@theme/ApiDemoPanel/ParamOptions/slice");
+const hooks_1 = require("@theme/ApiItem/hooks");
+const react_hook_form_1 = require("react-hook-form");
+function ParamSelectFormItem({ param }) {
+  const {
+    control,
+    formState: { errors },
+  } = (0, react_hook_form_1.useFormContext)();
+  const showErrorMessage = errors?.paramSelect;
+  const dispatch = (0, hooks_1.useTypedDispatch)();
+  const options = param.schema?.enum ?? [];
+  return react_1.default.createElement(
+    react_1.default.Fragment,
+    null,
+    react_1.default.createElement(react_hook_form_1.Controller, {
+      control: control,
+      rules: { required: param.required ? "This field is required" : false },
+      name: "paramSelect",
+      render: ({ field: { onChange, name } }) =>
+        react_1.default.createElement(FormSelect_1.default, {
+          options: ["---", ...options],
+          onChange: (e) => {
+            const val = e.target.value;
+            dispatch(
+              (0, slice_1.setParam)({
+                ...param,
+                value: val === "---" ? undefined : val,
+              })
+            );
+            onChange(val);
+          },
+        }),
+    }),
+    showErrorMessage &&
+      react_1.default.createElement(error_message_1.ErrorMessage, {
+        errors: errors,
+        name: "paramSelect",
+        render: ({ message }) =>
+          react_1.default.createElement(
+            "div",
+            { className: "openapi-demo__input-error" },
+            message
+          ),
+      })
+  );
+}
+exports.default = ParamSelectFormItem;

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamTextFormItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Param } from "@theme/ApiDemoPanel/ParamOptions/slice";
+export interface ParamProps {
+    param: Param;
+}
+export default function ParamTextFormItem({ param }: ParamProps): JSX.Element;

package/lib/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamTextFormItem.js

@@ -0,0 +1,38 @@
+"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 FormTextInput_1 = __importDefault(
+  require("@theme/ApiDemoPanel/FormTextInput")
+);
+const slice_1 = require("@theme/ApiDemoPanel/ParamOptions/slice");
+const hooks_1 = require("@theme/ApiItem/hooks");
+function ParamTextFormItem({ param }) {
+  const dispatch = (0, hooks_1.useTypedDispatch)();
+  return react_1.default.createElement(FormTextInput_1.default, {
+    isRequired: param.required,
+    paramName: param.name,
+    placeholder: param.description || param.name,
+    onChange: (e) =>
+      dispatch(
+        (0, slice_1.setParam)({
+          ...param,
+          value:
+            param.in === "path" || param.in === "query"
+              ? e.target.value.replace(/\s/g, "%20")
+              : e.target.value,
+        })
+      ),
+  });
+}
+exports.default = ParamTextFormItem;

package/lib/theme/ApiDemoPanel/ParamOptions/_ParamOptions.scss

@@ -8,29 +8,21 @@
 }
 
 .openapi-demo__show-more-btn {
+  width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-
-  cursor: pointer;
-  font-size: var(--ifm-code-font-size);
-
+  margin-left: 0.25rem;
+  margin-bottom: 0.5rem;
   padding: 0;
-
+  cursor: pointer;
+  font-size: var(--openapi-demo-font-size-input);
   user-select: none;
   white-space: nowrap;
-
   border: 0px solid transparent;
-
   display: block;
-  width: 100%;
-
   background-color: transparent;
-
   color: var(--ifm-color-primary);
-  cursor: pointer;
-  margin-top: var(--ifm-pre-padding);
-  margin-bottom: 0;
   text-align: left;
 
   &:hover {
@@ -88,32 +80,22 @@
 .openapi-demo__thin-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
-  appearance: none;
-
   cursor: pointer;
-  font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
-  font-weight: normal;
-  line-height: 1.5;
-
+  font-weight: bold;
+  padding: 0.5rem 1rem;
+  font-size: 12px;
   transition-property: color, background, border-color, box-shadow;
   transition-duration: 100ms, 100ms, 100ms,
     var(--ifm-button-transition-duration);
   transition-timing-function: cubic-bezier(0.08, 0.52, 0.52, 1);
-
-  -webkit-user-select: none;
   user-select: none;
   white-space: nowrap;
-
   background-color: transparent;
   color: var(--openapi-input-border);
   border: 1px solid var(--openapi-input-border);
   border-radius: var(--ifm-pre-border-radius);
-  /* height: 48px; */
-  padding: 3px 60px 3px 12px;
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  margin-bottom: var(--ifm-pre-padding);
-
-  display: block;
+  text-transform: uppercase;
 
   &:hover {
     color: var(--openapi-inverse-color);
@@ -132,7 +114,6 @@
 
 .openapi-demo__show-options {
   visibility: visible;
-  margin-top: var(--ifm-pre-padding);
 }
 
 .openapi-demo__hide-options {

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Param } from "./slice";
+export interface ParamProps {
+    param: Param;
+}
+declare function ParamOptions(): JSX.Element;
+export default ParamOptions;