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

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

@@ -1,33 +1,35 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * 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.
  * ========================================================================== */
-
-function FormSelect({
-  value,
-  options,
-  onChange
-}) {
+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 <select className="openapi-demo__select-input" value={value} onChange={onChange}>
-      {options.map(option => {
-      return <option key={option} value={option}>
-            {option}
-          </option>;
-    })}
-    </select>;
+  return react_1.default.createElement(
+    "select",
+    {
+      className: "openapi-demo__select-input",
+      value: value,
+      onChange: onChange,
+    },
+    options.map((option) => {
+      return react_1.default.createElement(
+        "option",
+        { key: option, value: option },
+        option
+      );
+    })
+  );
 }
-var _default = FormSelect;
-exports.default = _default;
+exports.default = FormSelect;

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

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

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

@@ -1,27 +1,73 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * 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
+  onChange,
+  paramName,
 }) {
-  var _placeholder;
-  placeholder = (_placeholder = placeholder) === null || _placeholder === void 0 ? void 0 : _placeholder.split("\n")[0];
-  return <input className="openapi-demo__input" type={password ? "password" : "text"} placeholder={placeholder} title={placeholder} value={value} onChange={onChange} autoComplete="off" />;
+  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-demo__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-demo__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-demo__input-error" },
+            message
+          ),
+      })
+  );
 }
-var _default = FormTextInput;
-exports.default = _default;
+exports.default = FormTextInput;

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

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

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

@@ -1,61 +1,154 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _themeCommon = require("@docusaurus/theme-common");
-var _useIsBrowser = _interopRequireDefault(require("@docusaurus/useIsBrowser"));
-var _slice = require("@theme/ApiDemoPanel/Body/slice");
-var _reactLive = require("react-live");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* ============================================================================
  * 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.
  * ========================================================================== */
-
-function Live({
-  onEdit
-}) {
-  const isBrowser = (0, _useIsBrowser.default)();
-  const [editorDisabled, setEditorDisabled] = (0, _react.useState)(false);
-
-  // TODO: Temporary solution for disabling tab key
-  const handleKeydown = event => {
-    if (event.key === "Tab") {
-      event.preventDefault();
-      setEditorDisabled(true);
-    }
+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 };
   };
-  return <div onClick={() => setEditorDisabled(false)}>
-      <_reactLive.LiveEditor key={String(isBrowser)} className="openapi-demo__playground-editor" onChange={onEdit} disabled={editorDisabled} onKeyDown={handleKeydown} />
-    </div>;
+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/ApiDemoPanel/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-demo__playground-editor": true,
+        "openapi-demo__form-item-input": showErrors,
+        error: showErrors,
+      }),
+      onChange: onEdit,
+      disabled: editorDisabled,
+      tabMode: "focus",
+    })
+  );
 }
-const LiveComponent = (0, _reactLive.withLive)(Live);
+const LiveComponent = (0, react_live_1.withLive)(Live);
 function App({
   children,
   transformCode,
   value,
   language,
   action,
+  required: isRequired,
   ...props
 }) {
-  const prismTheme = (0, _themeCommon.usePrismTheme)();
-  const [code, setCode] = _react.default.useState(children);
-  (0, _react.useEffect)(() => {
-    action((0, _slice.setStringRawBody)(code));
+  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]);
-  return <div className="openapi-demo__playground-container">
-      <_reactLive.LiveProvider code={children.replace(/\n$/, "")} transformCode={transformCode !== null && transformCode !== void 0 ? transformCode : code => `${code};`} theme={prismTheme} language={language} {...props}>
-        <LiveComponent onEdit={setCode} />
-      </_reactLive.LiveProvider>
-    </div>;
+  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-demo__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-demo__input-error" },
+              message
+            ),
+        })
+    )
+  );
 }
-const LiveApp = (0, _reactLive.withLive)(App);
-var _default = LiveApp;
-exports.default = _default;
+const LiveApp = (0, react_live_1.withLive)(App);
+exports.default = LiveApp;

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

@@ -1,6 +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/ApiDemoPanel/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/ApiDemoPanel/MethodEndpoint/index.js

@@ -1,20 +1,19 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BrowserOnly = _interopRequireDefault(require("@docusaurus/BrowserOnly"));
-var _hooks = require("../../ApiItem/hooks");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * 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":
@@ -35,39 +34,49 @@ function colorForMethod(method) {
       return undefined;
   }
 }
-function MethodEndpoint({
-  method,
-  path
-}) {
-  let serverValue = (0, _hooks.useTypedSelector)(state => state.server.value);
+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 => {
-        var _serverValue$variable, _serverValue$variable2;
-        serverUrlWithVariables = serverUrlWithVariables.replace(`{${variable}}`, (_serverValue$variable = (_serverValue$variable2 = serverValue.variables) === null || _serverValue$variable2 === void 0 ? void 0 : _serverValue$variable2[variable].default) !== null && _serverValue$variable !== void 0 ? _serverValue$variable : "");
+      Object.keys(serverValue.variables).forEach((variable) => {
+        serverUrlWithVariables = serverUrlWithVariables.replace(
+          `{${variable}}`,
+          serverValue.variables?.[variable].default ?? ""
+        );
       });
     }
-    return <_BrowserOnly.default>
-        {() => {
-        if (serverUrlWithVariables.length) {
-          return serverUrlWithVariables;
-        } else if (serverValue && serverValue.url) {
-          return serverValue.url;
-        }
-      }}
-      </_BrowserOnly.default>;
+    return react_1.default.createElement(BrowserOnly_1.default, null, () => {
+      if (serverUrlWithVariables.length) {
+        return serverUrlWithVariables;
+      } else if (serverValue && serverValue.url) {
+        return serverValue.url;
+      }
+    });
   };
-  return <pre className="openapi__method-endpoint">
-      <span className={"badge badge--" + colorForMethod(method)}>
-        {method.toUpperCase()}
-      </span>{" "}
-      <span>
-        {renderServerUrl()}
-        {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
-      </span>
-    </pre>;
+  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" })
+  );
 }
-var _default = MethodEndpoint;
-exports.default = _default;
+exports.default = MethodEndpoint;

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

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