npm - docusaurus-theme-openapi-docs - Versions diffs - 0.0.0-beta.647 → 0.0.0-beta.651 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-beta.647",
+  "version": "0.0.0-beta.651",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -41,7 +41,9 @@
   },
   "dependencies": {
     "@docusaurus/theme-common": "^2.3.0",
+    "@hookform/error-message": "^2.0.1",
     "@mdx-js/react": "^1.6.21",
+    "@nextui-org/react": "^1.0.0-beta.12",
     "@paloaltonetworks/postman-code-generators": "1.1.15-patch.2",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@reduxjs/toolkit": "^1.7.1",
@@ -49,7 +51,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-beta.647",
+    "docusaurus-plugin-openapi-docs": "0.0.0-beta.651",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "immer": "^9.0.7",
@@ -57,7 +59,8 @@
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prism-react-renderer": "^1.3.5",
     "process": "^0.11.10",
-    "react-live": "^3.1.1",
+    "react-hook-form": "^7.43.8",
+    "react-live": "^4.0.0",
     "react-magic-dropzone": "^1.0.1",
     "react-markdown": "^8.0.1",
     "react-modal": "^3.15.1",
@@ -75,5 +78,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "358ce5cd595fdd63d86b95dbc0f58569d9a15eaf"
+  "gitHead": "481c6eff7a5fff6fba2ef52e877ebb27a875259e"
 }

package/src/theme/ApiDemoPanel/ApiCodeBlock/Content/_Content.scss CHANGED Viewed

@@ -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/src/theme/ApiDemoPanel/Body/index.tsx CHANGED Viewed

@@ -8,7 +8,6 @@
 import React from "react";
 import json2xml from "@theme/ApiDemoPanel/Body/json2xml";
-import ContentType from "@theme/ApiDemoPanel/ContentType";
 import FormFileUpload from "@theme/ApiDemoPanel/FormFileUpload";
 import FormItem from "@theme/ApiDemoPanel/FormItem";
 import FormSelect from "@theme/ApiDemoPanel/FormSelect";
@@ -31,9 +30,16 @@ import {
 export interface Props {
   jsonRequestBodyExample: string;
   requestBodyMetadata?: RequestBodyObject;
+  methods?: any;
+  required?: boolean;
 }
-function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
+function BodyWrap({
+  requestBodyMetadata,
+  jsonRequestBodyExample,
+  methods,
+  required,
+}: Props) {
   const contentType = useTypedSelector((state: any) => state.contentType.value);
   // NOTE: We used to check if body was required, but opted to always show the request body
@@ -45,20 +51,21 @@ function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   }
   return (
-    <>
-      <ContentType />
-      <Body
-        requestBodyMetadata={requestBodyMetadata}
-        jsonRequestBodyExample={jsonRequestBodyExample}
-      />
-    </>
+    <Body
+      requestBodyMetadata={requestBodyMetadata}
+      jsonRequestBodyExample={jsonRequestBodyExample}
+      required={required}
+    />
   );
 }
-function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
+function Body({
+  requestBodyMetadata,
+  jsonRequestBodyExample,
+  methods,
+  required,
+}: Props) {
   const contentType = useTypedSelector((state: any) => state.contentType.value);
-  const required = requestBodyMetadata?.required;
   const dispatch = useTypedDispatch();
   // Lot's of possible content-types:
@@ -88,7 +95,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   if (schema?.format === "binary") {
     return (
-      <FormItem label="Body" required={required}>
+      <FormItem>
         <FormFileUpload
           placeholder={schema.description || "Body"}
           onChange={(file: any) => {
@@ -114,15 +121,8 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
     schema?.type === "object"
   ) {
     return (
-      <FormItem label="Body" required={required}>
-        <div
-          style={{
-            marginTop: "calc(var(--ifm-pre-padding) / 2)",
-            borderRadius: "4px",
-            padding: "var(--ifm-pre-padding)",
-            border: "1px solid var(--openapi-monaco-border-color)",
-          }}
-        >
+      <FormItem className="openapi-demo__form-item-body-container">
+        <div>
           {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
             if (val.format === "binary") {
               return (
@@ -196,6 +196,11 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
                 }
               >
                 <FormTextInput
+                  paramName={key}
+                  isRequired={
+                    Array.isArray(schema.required) &&
+                    schema.required.includes(key)
+                  }
                   placeholder={val.description || key}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     dispatch(
@@ -282,18 +287,22 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   if (exampleBody) {
     return (
-      <FormItem label="Body" required={required}>
+      <FormItem>
         <SchemaTabs className="openapi-tabs__schema" lazy>
           {/* @ts-ignore */}
           <TabItem label="Default" value="default" default>
-            <LiveApp action={dispatch} language={language}>
+            <LiveApp action={dispatch} language={language} required={required}>
               {defaultBody}
             </LiveApp>
           </TabItem>
           {/* @ts-ignore */}
           <TabItem label="Example" value="example">
             {exampleBody && (
-              <LiveApp action={dispatch} language={language}>
+              <LiveApp
+                action={dispatch}
+                language={language}
+                required={required}
+              >
                 {exampleBody}
               </LiveApp>
             )}
@@ -305,11 +314,11 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   if (examplesBodies && examplesBodies.length > 0) {
     return (
-      <FormItem label="Body" required={required}>
+      <FormItem className="openapi-demo__form-item-body-container">
         <SchemaTabs className="openapi-tabs__schema" lazy>
           {/* @ts-ignore */}
           <TabItem label="Default" value="default" default>
-            <LiveApp action={dispatch} language={language}>
+            <LiveApp action={dispatch} language={language} required={required}>
               {defaultBody}
             </LiveApp>
           </TabItem>
@@ -336,8 +345,8 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   }
   return (
-    <FormItem label="Body" required={required}>
-      <LiveApp action={dispatch} language={language}>
+    <FormItem>
+      <LiveApp action={dispatch} language={language} required={required}>
         {defaultBody}
       </LiveApp>
     </FormItem>

package/src/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss CHANGED Viewed

@@ -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/src/theme/ApiDemoPanel/CodeTabs/index.js CHANGED Viewed

@@ -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/src/theme/ApiDemoPanel/Curl/index.tsx CHANGED Viewed

@@ -325,6 +325,7 @@ function Curl({ postman, codeSamples }: Props) {
               }}
             >
               <CodeTabs
+                className="openapi-tabs__code-container-inner"
                 action={{
                   setLanguage: setLanguage,
                   setSelectedVariant: setSelectedVariant,

package/src/theme/ApiDemoPanel/FormItem/_FormItem.scss CHANGED Viewed

@@ -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/src/theme/ApiDemoPanel/FormItem/index.tsx CHANGED Viewed

@@ -7,17 +7,22 @@
 import React from "react";
+import clsx from "clsx";
 export interface Props {
   label?: string;
   type?: string;
   required?: boolean | undefined;
   children?: React.ReactNode;
+  className?: string;
 }
-function FormItem({ label, type, required, children }: Props) {
+function FormItem({ label, type, required, children, className }: Props) {
   return (
-    <div className="openapi-demo__form-item">
-      <code>{label}</code>
+    <div className={clsx("openapi-demo__form-item", className)}>
+      {label && (
+        <label className="openapi-demo__form-item-label">{label}</label>
+      )}
       {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
       {required && (
         <span>

package/src/theme/ApiDemoPanel/FormMultiSelect/_FormMultiSelect.scss CHANGED Viewed

@@ -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/src/theme/ApiDemoPanel/FormMultiSelect/index.tsx CHANGED Viewed

@@ -7,13 +7,16 @@
 import React from "react";
+import clsx from "clsx";
 export interface Props {
   value?: string;
   options: string[];
   onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  showErrors?: boolean;
 }
-function FormMultiSelect({ value, options, onChange }: Props) {
+function FormMultiSelect({ value, options, onChange, showErrors }: Props) {
   if (options.length === 0) {
     return null;
   }
@@ -32,7 +35,9 @@ function FormMultiSelect({ value, options, onChange }: Props) {
   return (
     <select
       style={{ height: height }}
-      className="openapi-demo__multi-select-input"
+      className={clsx("openapi-demo__multi-select-input", {
+        error: showErrors,
+      })}
       value={value}
       onChange={onChange}
       size={Math.min(6, options.length + 1)}

package/src/theme/ApiDemoPanel/FormSelect/_FormSelect.scss CHANGED Viewed

@@ -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/src/theme/ApiDemoPanel/FormTextInput/_FormTextInput.scss CHANGED Viewed

@@ -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/src/theme/ApiDemoPanel/FormTextInput/index.tsx CHANGED Viewed

@@ -5,8 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
+// @ts-nocheck
 import React from "react";
+import { ErrorMessage } from "@hookform/error-message";
+import clsx from "clsx";
+import { useFormContext } from "react-hook-form";
 export interface Props {
   value?: string;
   placeholder?: string;
@@ -14,18 +19,61 @@ export interface Props {
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-function FormTextInput({ value, placeholder, password, onChange }: Props) {
+function FormTextInput({
+  isRequired,
+  value,
+  placeholder,
+  password,
+  onChange,
+  paramName,
+}: Props) {
   placeholder = placeholder?.split("\n")[0];
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+  const showErrorMessage = errors?.[paramName]?.message;
   return (
-    <input
-      className="openapi-demo__input"
-      type={password ? "password" : "text"}
-      placeholder={placeholder}
-      title={placeholder}
-      value={value}
-      onChange={onChange}
-      autoComplete="off"
-    />
+    <>
+      {paramName ? (
+        <input
+          {...register(paramName, {
+            required: isRequired ? "This field is required" : false,
+          })}
+          className={clsx("openapi-demo__form-item-input", {
+            error: showErrorMessage,
+          })}
+          type={password ? "password" : "text"}
+          placeholder={placeholder}
+          title={placeholder}
+          value={value}
+          onChange={onChange}
+          autoComplete="off"
+        />
+      ) : (
+        <input
+          className="openapi-demo__form-item-input"
+          type={password ? "password" : "text"}
+          placeholder={placeholder}
+          title={placeholder}
+          value={value}
+          onChange={onChange}
+          autoComplete="off"
+        />
+      )}
+      {showErrorMessage && (
+        <ErrorMessage
+          errors={errors}
+          name={paramName}
+          render={({ message }) => (
+            <div className="openapi-demo__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
   );
 }

package/src/theme/ApiDemoPanel/LiveEditor/index.tsx CHANGED Viewed

@@ -9,29 +9,31 @@ import React, { useEffect, useState } from "react";
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import { ErrorMessage } from "@hookform/error-message";
 import { setStringRawBody } from "@theme/ApiDemoPanel/Body/slice";
+import clsx from "clsx";
+import { Controller, useFormContext } from "react-hook-form";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
-function Live({ onEdit }: any) {
+function Live({ onEdit, showErrors }: any) {
   const isBrowser = useIsBrowser();
   const [editorDisabled, setEditorDisabled] = useState(false);
-  // TODO: Temporary solution for disabling tab key
-  const handleKeydown = (event: React.KeyboardEvent) => {
-    if (event.key === "Tab") {
-      event.preventDefault();
-      setEditorDisabled(true);
-    }
-  };
   return (
-    <div onClick={() => setEditorDisabled(false)}>
+    <div
+      onClick={() => setEditorDisabled(false)}
+      onBlur={() => setEditorDisabled(true)}
+    >
       <LiveEditor
         key={String(isBrowser)}
-        className="openapi-demo__playground-editor"
+        className={clsx({
+          "openapi-demo__playground-editor": true,
+          "openapi-demo__form-item-input": showErrors,
+          error: showErrors,
+        })}
         onChange={onEdit}
         disabled={editorDisabled}
-        onKeyDown={handleKeydown}
+        tabMode="focus"
       />
     </div>
   );
@@ -45,6 +47,7 @@ function App({
   value,
   language,
   action,
+  required: isRequired,
   ...props
 }: any): JSX.Element {
   const prismTheme = usePrismTheme();
@@ -54,8 +57,24 @@ function App({
     action(setStringRawBody(code));
   }, [action, code]);
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+  const showErrorMessage = errors?.requestBody;
+  const handleChange = (snippet: string, onChange: any) => {
+    setCode(snippet);
+    onChange(snippet);
+  };
   return (
-    <div className="openapi-demo__playground-container">
+    <div
+      className={clsx({
+        "openapi-demo__playground-container": true,
+      })}
+    >
       <LiveProvider
         code={children.replace(/\n$/, "")}
         transformCode={transformCode ?? ((code) => `${code};`)}
@@ -63,7 +82,27 @@ function App({
         language={language}
         {...props}
       >
-        <LiveComponent onEdit={setCode} />
+        <Controller
+          control={control}
+          rules={{ required: isRequired ? "This field is required" : false }}
+          name="requestBody"
+          render={({ field: { onChange, name } }) => (
+            <LiveComponent
+              onEdit={(e: any) => handleChange(e, onChange)}
+              name={name}
+              showErrors={showErrorMessage}
+            />
+          )}
+        />
+        {showErrorMessage && (
+          <ErrorMessage
+            errors={errors}
+            name="requestBody"
+            render={({ message }) => (
+              <div className="openapi-demo__input-error">{message}</div>
+            )}
+          />
+        )}
       </LiveProvider>
     </div>
   );