docusaurus-theme-openapi-docs 0.0.0-beta.647 → 0.0.0-beta.652

package/lib/theme/ApiDemoPanel/ApiCodeBlock/Content/_Content.scss

@@ -15,6 +15,7 @@
 }
 
 .openapi-demo__code-block {
+  border-radius: var(--ifm-global-radius);
   --ifm-pre-background: var(--prism-background-color);
   margin: 0;
   padding: 0;

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

@@ -3,6 +3,8 @@ import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/ty
 export interface Props {
     jsonRequestBodyExample: string;
     requestBodyMetadata?: RequestBodyObject;
+    methods?: any;
+    required?: boolean;
 }
-declare function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props): JSX.Element | null;
+declare function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample, methods, required, }: Props): JSX.Element | null;
 export default BodyWrap;

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

@@ -15,9 +15,6 @@ const react_1 = __importDefault(require("react"));
 const json2xml_1 = __importDefault(
   require("@theme/ApiDemoPanel/Body/json2xml")
 );
-const ContentType_1 = __importDefault(
-  require("@theme/ApiDemoPanel/ContentType")
-);
 const FormFileUpload_1 = __importDefault(
   require("@theme/ApiDemoPanel/FormFileUpload")
 );
@@ -32,7 +29,12 @@ const SchemaTabs_1 = __importDefault(require("@theme/SchemaTabs"));
 const TabItem_1 = __importDefault(require("@theme/TabItem"));
 const xml_formatter_1 = __importDefault(require("xml-formatter"));
 const slice_1 = require("./slice");
-function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }) {
+function BodyWrap({
+  requestBodyMetadata,
+  jsonRequestBodyExample,
+  methods,
+  required,
+}) {
   const contentType = (0, hooks_1.useTypedSelector)(
     (state) => state.contentType.value
   );
@@ -42,21 +44,21 @@ function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }) {
   if (contentType === undefined) {
     return null;
   }
-  return react_1.default.createElement(
-    react_1.default.Fragment,
-    null,
-    react_1.default.createElement(ContentType_1.default, null),
-    react_1.default.createElement(Body, {
-      requestBodyMetadata: requestBodyMetadata,
-      jsonRequestBodyExample: jsonRequestBodyExample,
-    })
-  );
+  return react_1.default.createElement(Body, {
+    requestBodyMetadata: requestBodyMetadata,
+    jsonRequestBodyExample: jsonRequestBodyExample,
+    required: required,
+  });
 }
-function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
+function Body({
+  requestBodyMetadata,
+  jsonRequestBodyExample,
+  methods,
+  required,
+}) {
   const contentType = (0, hooks_1.useTypedSelector)(
     (state) => state.contentType.value
   );
-  const required = requestBodyMetadata?.required;
   const dispatch = (0, hooks_1.useTypedDispatch)();
   // Lot's of possible content-types:
   // - application/json
@@ -82,7 +84,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   if (schema?.format === "binary") {
     return react_1.default.createElement(
       FormItem_1.default,
-      { label: "Body", required: required },
+      null,
       react_1.default.createElement(FormFileUpload_1.default, {
         placeholder: schema.description || "Body",
         onChange: (file) => {
@@ -107,17 +109,10 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   ) {
     return react_1.default.createElement(
       FormItem_1.default,
-      { label: "Body", required: required },
+      { className: "openapi-demo__form-item-body-container" },
       react_1.default.createElement(
         "div",
-        {
-          style: {
-            marginTop: "calc(var(--ifm-pre-padding) / 2)",
-            borderRadius: "4px",
-            padding: "var(--ifm-pre-padding)",
-            border: "1px solid var(--openapi-monaco-border-color)",
-          },
-        },
+        null,
         Object.entries(schema.properties ?? {}).map(([key, val]) => {
           if (val.format === "binary") {
             return react_1.default.createElement(
@@ -187,6 +182,9 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
                 Array.isArray(schema.required) && schema.required.includes(key),
             },
             react_1.default.createElement(FormTextInput_1.default, {
+              paramName: key,
+              isRequired:
+                Array.isArray(schema.required) && schema.required.includes(key),
               placeholder: val.description || key,
               onChange: (e) => {
                 dispatch(
@@ -277,7 +275,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   if (exampleBody) {
     return react_1.default.createElement(
       FormItem_1.default,
-      { label: "Body", required: required },
+      null,
       react_1.default.createElement(
         SchemaTabs_1.default,
         { className: "openapi-tabs__schema", lazy: true },
@@ -286,7 +284,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
           { label: "Default", value: "default", default: true },
           react_1.default.createElement(
             LiveEditor_1.default,
-            { action: dispatch, language: language },
+            { action: dispatch, language: language, required: required },
             defaultBody
           )
         ),
@@ -296,7 +294,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
           exampleBody &&
             react_1.default.createElement(
               LiveEditor_1.default,
-              { action: dispatch, language: language },
+              { action: dispatch, language: language, required: required },
               exampleBody
             )
         )
@@ -306,7 +304,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   if (examplesBodies && examplesBodies.length > 0) {
     return react_1.default.createElement(
       FormItem_1.default,
-      { label: "Body", required: required },
+      { className: "openapi-demo__form-item-body-container" },
       react_1.default.createElement(
         SchemaTabs_1.default,
         { className: "openapi-tabs__schema", lazy: true },
@@ -315,7 +313,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
           { label: "Default", value: "default", default: true },
           react_1.default.createElement(
             LiveEditor_1.default,
-            { action: dispatch, language: language },
+            { action: dispatch, language: language, required: required },
             defaultBody
           )
         ),
@@ -345,10 +343,10 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   }
   return react_1.default.createElement(
     FormItem_1.default,
-    { label: "Body", required: required },
+    null,
     react_1.default.createElement(
       LiveEditor_1.default,
-      { action: dispatch, language: language },
+      { action: dispatch, language: language, required: required },
       defaultBody
     )
   );

package/lib/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss

@@ -13,6 +13,22 @@
 .openapi-tabs__code-container {
   margin-bottom: 1rem;
 
+  &:not(.openapi-tabs__code-container-inner) {
+    padding: 1rem;
+    background-color: var(--ifm-pre-background);
+    border-radius: var(--ifm-global-radius);
+    border: 1px solid var(--openapi-demo-border-color);
+    box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
+      0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
+    transition: 300ms;
+
+    &:hover {
+      box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15),
+        0 2px 3px hsla(222, 8%, 43%, 0.15),
+        0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+    }
+  }
+
   .openapi-tabs__code-item {
     display: flex;
     flex-direction: column-reverse;
@@ -54,6 +70,8 @@
 
 .openapi-demo__code-block code {
   max-height: 200px;
+  font-size: var(--openapi-demo-font-size-code);
+  padding-top: var(--ifm-pre-padding);
 }
 
 body[class="ReactModal__Body--open"] {

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

@@ -147,8 +147,14 @@ function TabContent({ lazy, children, selectedValue }) {
 
 function TabsComponent(props) {
   const tabs = useTabs(props);
+  const { className } = props;
+
   return (
-    <div className="tabs-container openapi-tabs__code-container">
+    <div
+      className={clsx("tabs-container openapi-tabs__code-container", {
+        [className]: className,
+      })}
+    >
       <TabList {...props} {...tabs} />
       <TabContent {...props} {...tabs} />
     </div>

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

@@ -365,6 +365,7 @@ function Curl({ postman, codeSamples }) {
           react_1.default.createElement(
             CodeTabs_1.default,
             {
+              className: "openapi-tabs__code-container-inner",
               action: {
                 setLanguage: setLanguage,
                 setSelectedVariant: setSelectedVariant,

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

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

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

@@ -4,6 +4,7 @@ export interface Props {
     type?: string;
     required?: boolean | undefined;
     children?: React.ReactNode;
+    className?: string;
 }
-declare function FormItem({ label, type, required, children }: Props): JSX.Element;
+declare function FormItem({ label, type, required, children, className }: Props): JSX.Element;
 export default FormItem;

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

@@ -12,11 +12,17 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-function FormItem({ label, type, required, children }) {
+const clsx_1 = __importDefault(require("clsx"));
+function FormItem({ label, type, required, children, className }) {
   return react_1.default.createElement(
     "div",
-    { className: "openapi-demo__form-item" },
-    react_1.default.createElement("code", null, label),
+    { className: (0, clsx_1.default)("openapi-demo__form-item", className) },
+    label &&
+      react_1.default.createElement(
+        "label",
+        { className: "openapi-demo__form-item-label" },
+        label
+      ),
     type &&
       react_1.default.createElement(
         "span",

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

@@ -1,19 +1,23 @@
 .openapi-demo__multi-select-input {
   width: 100%;
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: 12px var(--ifm-pre-padding);
+  padding: 1rem;
   border-radius: 4px;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
   background-color: var(--openapi-input-background);
   outline: none;
-  font-size: var(--ifm-code-font-size);
+  font-size: var(--openapi-demo-font-size-input);
   color: var(--ifm-pre-color);
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
 
   &:focus {
-    border: 2px solid var(--openapi-input-border);
+    border: 1px solid var(--openapi-input-border);
+  }
+
+  &.error {
+    border: 1px solid var(--ifm-color-danger);
   }
 
   option {

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

@@ -3,6 +3,7 @@ export interface Props {
     value?: string;
     options: string[];
     onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    showErrors?: boolean;
 }
-declare function FormMultiSelect({ value, options, onChange }: Props): JSX.Element | null;
+declare function FormMultiSelect({ value, options, onChange, showErrors }: Props): JSX.Element | null;
 export default FormMultiSelect;

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

@@ -12,7 +12,8 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-function FormMultiSelect({ value, options, onChange }) {
+const clsx_1 = __importDefault(require("clsx"));
+function FormMultiSelect({ value, options, onChange, showErrors }) {
   if (options.length === 0) {
     return null;
   }
@@ -30,7 +31,9 @@ function FormMultiSelect({ value, options, onChange }) {
     "select",
     {
       style: { height: height },
-      className: "openapi-demo__multi-select-input",
+      className: (0, clsx_1.default)("openapi-demo__multi-select-input", {
+        error: showErrors,
+      }),
       value: value,
       onChange: onChange,
       size: Math.min(6, options.length + 1),

package/lib/theme/ApiDemoPanel/FormSelect/_FormSelect.scss

@@ -4,7 +4,6 @@ html[data-theme="dark"] .openapi-demo__select-input {
   border: none;
   outline: none;
   width: 100%;
-  font-size: var(--ifm-code-font-size);
   color: var(--ifm-pre-color);
 
   border-radius: 4px;
@@ -21,12 +20,13 @@ html[data-theme="dark"] .openapi-demo__select-input {
 .openapi-demo__select-input {
   width: 100%;
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: 12px 48px 12px var(--ifm-pre-padding);
+  padding: var(--openapi-demo-padding-input);
   border: none;
   outline: none;
   border-radius: 4px;
   background-color: var(--openapi-input-background);
-  font-size: var(--ifm-code-font-size);
+  font-size: var(--openapi-demo-font-size-input);
+  font-family: var(--ifm-font-family-monospace);
   color: var(--ifm-pre-color);
   -moz-appearance: none;
   -webkit-appearance: none;

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

@@ -5,5 +5,5 @@ export interface Props {
     password?: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-declare function FormTextInput({ value, placeholder, password, onChange }: Props): JSX.Element;
+declare function FormTextInput({ isRequired, value, placeholder, password, onChange, paramName, }: Props): JSX.Element;
 export default FormTextInput;

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

@@ -11,17 +11,63 @@ var __importDefault =
     return mod && mod.__esModule ? mod : { default: mod };
   };
 Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-nocheck
 const react_1 = __importDefault(require("react"));
-function FormTextInput({ value, placeholder, password, onChange }) {
+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];
-  return react_1.default.createElement("input", {
-    className: "openapi-demo__input",
-    type: password ? "password" : "text",
-    placeholder: placeholder,
-    title: placeholder,
-    value: value,
-    onChange: onChange,
-    autoComplete: "off",
-  });
+  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
+          ),
+      })
+  );
 }
 exports.default = FormTextInput;

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

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

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

@@ -58,40 +58,64 @@ 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 }) {
+function Live({ onEdit, showErrors }) {
   const isBrowser = (0, useIsBrowser_1.default)();
   const [editorDisabled, setEditorDisabled] = (0, react_1.useState)(false);
-  // TODO: Temporary solution for disabling tab key
-  const handleKeydown = (event) => {
-    if (event.key === "Tab") {
-      event.preventDefault();
-      setEditorDisabled(true);
-    }
-  };
   return react_1.default.createElement(
     "div",
-    { onClick: () => setEditorDisabled(false) },
+    {
+      onClick: () => setEditorDisabled(false),
+      onBlur: () => setEditorDisabled(true),
+    },
     react_1.default.createElement(react_live_1.LiveEditor, {
       key: String(isBrowser),
-      className: "openapi-demo__playground-editor",
+      className: (0, clsx_1.default)({
+        "openapi-demo__playground-editor": true,
+        "openapi-demo__form-item-input": showErrors,
+        error: showErrors,
+      }),
       onChange: onEdit,
       disabled: editorDisabled,
-      onKeyDown: handleKeydown,
+      tabMode: "focus",
     })
   );
 }
 const LiveComponent = (0, react_live_1.withLive)(Live);
-function App({ children, transformCode, value, language, action, ...props }) {
+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: "openapi-demo__playground-container" },
+    {
+      className: (0, clsx_1.default)({
+        "openapi-demo__playground-container": true,
+      }),
+    },
     react_1.default.createElement(
       react_live_1.LiveProvider,
       {
@@ -101,7 +125,28 @@ function App({ children, transformCode, value, language, action, ...props }) {
         language: language,
         ...props,
       },
-      react_1.default.createElement(LiveComponent, { onEdit: setCode })
+      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
+            ),
+        })
     )
   );
 }

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;