docusaurus-theme-openapi-docs 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -0,0 +1,154 @@
+"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 theme_common_1 = require("@docusaurus/theme-common");
+const useIsBrowser_1 = __importDefault(require("@docusaurus/useIsBrowser"));
+const error_message_1 = require("@hookform/error-message");
+const slice_1 = require("@theme/ApiExplorer/Body/slice");
+const clsx_1 = __importDefault(require("clsx"));
+const react_hook_form_1 = require("react-hook-form");
+const react_live_1 = require("react-live");
+function Live({ onEdit, showErrors }) {
+  const isBrowser = (0, useIsBrowser_1.default)();
+  const [editorDisabled, setEditorDisabled] = (0, react_1.useState)(false);
+  return react_1.default.createElement(
+    "div",
+    {
+      onClick: () => setEditorDisabled(false),
+      onBlur: () => setEditorDisabled(true),
+    },
+    react_1.default.createElement(react_live_1.LiveEditor, {
+      key: String(isBrowser),
+      className: (0, clsx_1.default)({
+        "openapi-explorer__playground-editor": true,
+        "openapi-explorer__form-item-input": showErrors,
+        error: showErrors,
+      }),
+      onChange: onEdit,
+      disabled: editorDisabled,
+      tabMode: "focus",
+    })
+  );
+}
+const LiveComponent = (0, react_live_1.withLive)(Live);
+function App({
+  children,
+  transformCode,
+  value,
+  language,
+  action,
+  required: isRequired,
+  ...props
+}) {
+  const prismTheme = (0, theme_common_1.usePrismTheme)();
+  const [code, setCode] = react_1.default.useState(children);
+  (0, react_1.useEffect)(() => {
+    action((0, slice_1.setStringRawBody)(code));
+  }, [action, code]);
+  const {
+    control,
+    formState: { errors },
+  } = (0, react_hook_form_1.useFormContext)();
+  const showErrorMessage = errors?.requestBody;
+  const handleChange = (snippet, onChange) => {
+    setCode(snippet);
+    onChange(snippet);
+  };
+  return react_1.default.createElement(
+    "div",
+    {
+      className: (0, clsx_1.default)({
+        "openapi-explorer__playground-container": true,
+      }),
+    },
+    react_1.default.createElement(
+      react_live_1.LiveProvider,
+      {
+        code: children.replace(/\n$/, ""),
+        transformCode: transformCode ?? ((code) => `${code};`),
+        theme: prismTheme,
+        language: language,
+        ...props,
+      },
+      react_1.default.createElement(react_hook_form_1.Controller, {
+        control: control,
+        rules: { required: isRequired ? "This field is required" : false },
+        name: "requestBody",
+        render: ({ field: { onChange, name } }) =>
+          react_1.default.createElement(LiveComponent, {
+            onEdit: (e) => handleChange(e, onChange),
+            name: name,
+            showErrors: showErrorMessage,
+          }),
+      }),
+      showErrorMessage &&
+        react_1.default.createElement(error_message_1.ErrorMessage, {
+          errors: errors,
+          name: "requestBody",
+          render: ({ message }) =>
+            react_1.default.createElement(
+              "div",
+              { className: "openapi-explorer__input-error" },
+              message
+            ),
+        })
+    )
+  );
+}
+const LiveApp = (0, react_live_1.withLive)(App);
+exports.default = LiveApp;

package/lib/theme/ApiExplorer/MethodEndpoint/_MethodEndpoint.scss

@@ -0,0 +1,22 @@
+.openapi__method-endpoint {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  width: fit-content;
+  padding: 0.65rem;
+  border: 1px solid var(--ifm-toc-border-color);
+}
+
+.openapi__method-endpoint-path {
+  margin-bottom: 0;
+  margin-left: 0.5rem;
+  font-size: 12px;
+  font-weight: normal;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.openapi__divider {
+  width: 100%;
+  margin: 1.5rem 0;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface Props {
+    method: string;
+    path: string;
+}
+declare function MethodEndpoint({ method, path }: Props): JSX.Element;
+export default MethodEndpoint;

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

@@ -0,0 +1,82 @@
+"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 BrowserOnly_1 = __importDefault(require("@docusaurus/BrowserOnly"));
+const hooks_1 = require("../../ApiItem/hooks");
+function colorForMethod(method) {
+  switch (method.toLowerCase()) {
+    case "get":
+      return "primary";
+    case "post":
+      return "success";
+    case "delete":
+      return "danger";
+    case "put":
+      return "info";
+    case "patch":
+      return "warning";
+    case "head":
+      return "secondary";
+    case "event":
+      return "secondary";
+    default:
+      return undefined;
+  }
+}
+function MethodEndpoint({ method, path }) {
+  let serverValue = (0, hooks_1.useTypedSelector)(
+    (state) => state.server.value
+  );
+  let serverUrlWithVariables = "";
+  const renderServerUrl = () => {
+    if (serverValue && serverValue.variables) {
+      serverUrlWithVariables = serverValue.url.replace(/\/$/, "");
+      Object.keys(serverValue.variables).forEach((variable) => {
+        serverUrlWithVariables = serverUrlWithVariables.replace(
+          `{${variable}}`,
+          serverValue.variables?.[variable].default ?? ""
+        );
+      });
+    }
+    return react_1.default.createElement(BrowserOnly_1.default, null, () => {
+      if (serverUrlWithVariables.length) {
+        return serverUrlWithVariables;
+      } else if (serverValue && serverValue.url) {
+        return serverValue.url;
+      }
+    });
+  };
+  return react_1.default.createElement(
+    react_1.default.Fragment,
+    null,
+    react_1.default.createElement(
+      "pre",
+      { className: "openapi__method-endpoint" },
+      react_1.default.createElement(
+        "span",
+        { className: "badge badge--" + colorForMethod(method) },
+        method.toUpperCase()
+      ),
+      " ",
+      react_1.default.createElement(
+        "h2",
+        { className: "openapi__method-endpoint-path" },
+        renderServerUrl(),
+        `${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`
+      )
+    ),
+    react_1.default.createElement("div", { className: "openapi__divider" })
+  );
+}
+exports.default = MethodEndpoint;

package/lib/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.d.ts

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

package/lib/theme/ApiExplorer/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/ApiExplorer/FormSelect"));
+const FormTextInput_1 = __importDefault(
+  require("@theme/ApiExplorer/FormTextInput")
+);
+const slice_1 = require("@theme/ApiExplorer/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-explorer__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-explorer__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-explorer__input-error" },
+            message
+          ),
+      })
+  );
+}
+exports.default = ParamArrayFormItem;

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

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

package/lib/theme/ApiExplorer/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/ApiExplorer/FormSelect"));
+const slice_1 = require("@theme/ApiExplorer/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-explorer__input-error" },
+            message
+          ),
+      })
+  );
+}
+exports.default = ParamBooleanFormItem;

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

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

package/lib/theme/ApiExplorer/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/ApiExplorer/FormMultiSelect")
+);
+const slice_1 = require("@theme/ApiExplorer/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-explorer__input-error" },
+            message
+          ),
+      })
+  );
+}
+exports.default = ParamMultiSelectFormItem;

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

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