docusaurus-theme-openapi-docs 0.0.0-beta.646 → 0.0.0-beta.651

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

@@ -83,6 +83,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl"],
   },
   {
     highlight: "python",
@@ -93,6 +94,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "requests",
+    variants: ["requests", "http.client"],
   },
   {
     highlight: "go",
@@ -103,6 +105,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "native",
+    variants: ["native"],
   },
   {
     highlight: "javascript",
@@ -114,6 +117,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "axios",
+    variants: ["axios", "native", "request", "unirest"],
   },
   {
     highlight: "ruby",
@@ -124,6 +128,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "Net::HTTP",
+    variants: ["net::http"],
   },
   {
     highlight: "csharp",
@@ -134,6 +139,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "RestSharp",
+    variants: ["restsharp", "httpclient"],
   },
   {
     highlight: "php",
@@ -144,6 +150,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl", "guzzle", "pecl_http", "http_request2"],
   },
   {
     highlight: "java",
@@ -154,6 +161,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "OkHttp",
+    variants: ["okhttp", "unirest"],
   },
   {
     highlight: "powershell",
@@ -164,6 +172,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "RestMethod",
+    variants: ["restmethod"],
   },
 ];
 function CodeTab({ children, hidden, className, onClick }) {
@@ -214,6 +223,7 @@ function Curl({ postman, codeSamples }) {
     (lang) =>
       lang.language === localStorage.getItem("docusaurus.tab.code-samples")
   );
+  const [selectedVariant, setSelectedVariant] = (0, react_1.useState)();
   const [language, setLanguage] = (0, react_1.useState)(() => {
     // Return first index if only 1 user-defined language exists
     if (mergedLangs.length === 1) {
@@ -298,6 +308,33 @@ function Curl({ postman, codeSamples }) {
     auth,
     mergedLangs,
   ]);
+  (0, react_1.useEffect)(() => {
+    if (selectedVariant && selectedVariant !== language.variant) {
+      const postmanRequest = (0, buildPostmanRequest_1.default)(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+      postman_code_generators_1.default.convert(
+        language.language,
+        selectedVariant,
+        postmanRequest,
+        language.options,
+        (error, snippet) => {
+          if (error) {
+            return;
+          }
+          setCodeText(snippet);
+        }
+      );
+    }
+  });
   if (language === undefined) {
     return null;
   }
@@ -306,29 +343,60 @@ function Curl({ postman, codeSamples }) {
     null,
     react_1.default.createElement(
       CodeTabs_1.default,
-      { groupId: "code-samples", action: setLanguage },
+      {
+        groupId: "code-samples",
+        action: {
+          setLanguage: setLanguage,
+          setSelectedVariant: setSelectedVariant,
+        },
+        lazy: true,
+      },
       mergedLangs.map((lang) => {
         return react_1.default.createElement(
           CodeTab,
           {
             value: lang.language,
-            label: "",
-            key: lang.variant
-              ? `${lang.language}-${lang.variant}`
-              : lang.language,
+            label: lang.language,
+            key: lang.language,
             attributes: {
               className: `openapi-tabs__code-item--${lang.logoClass}`,
             },
           },
           react_1.default.createElement(
-            ApiCodeBlock_1.default,
+            CodeTabs_1.default,
             {
-              language: lang.highlight,
-              className: "openapi-demo__code-block",
-              title: `${lang.language} / ${lang.variant}`,
-              showLineNumbers: true,
+              className: "openapi-tabs__code-container-inner",
+              action: {
+                setLanguage: setLanguage,
+                setSelectedVariant: setSelectedVariant,
+              },
+              includeVariant: true,
+              currentLanguage: lang.language,
+              defaultValue: selectedVariant,
+              lazy: true,
             },
-            codeText
+            lang.variants.map((variant) => {
+              return react_1.default.createElement(
+                CodeTab,
+                {
+                  value: variant.toLowerCase(),
+                  label: variant.toUpperCase(),
+                  key: `${lang.language}-${lang.variant}`,
+                  attributes: {
+                    className: `openapi-tabs__code-item--variant`,
+                  },
+                },
+                react_1.default.createElement(
+                  ApiCodeBlock_1.default,
+                  {
+                    language: lang.highlight,
+                    className: "openapi-demo__code-block",
+                    showLineNumbers: true,
+                  },
+                  codeText
+                )
+              );
+            })
           )
         );
       })

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;