docusaurus-theme-openapi-docs 0.0.0-1084 → 0.0.0-1087

package/src/theme/ApiExplorer/Body/index.tsx

@@ -12,8 +12,6 @@ import { translate } from "@docusaurus/Translate";
 import json2xml from "@theme/ApiExplorer/Body/json2xml";
 import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
 import FormItem from "@theme/ApiExplorer/FormItem";
-import FormSelect from "@theme/ApiExplorer/FormSelect";
-import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import LiveApp from "@theme/ApiExplorer/LiveEditor";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import Markdown from "@theme/Markdown";
@@ -23,13 +21,8 @@ import { OPENAPI_BODY, OPENAPI_REQUEST } from "@theme/translationIds";
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import format from "xml-formatter";
 
-import {
-  clearFormBodyKey,
-  clearRawBody,
-  setFileFormBody,
-  setFileRawBody,
-  setStringFormBody,
-} from "./slice";
+import { clearRawBody, setFileRawBody, setStringRawBody } from "./slice";
+import FormBodyItem from "./FormBodyItem";
 
 export interface Props {
   jsonRequestBodyExample: string;
@@ -130,96 +123,23 @@ function Body({
   ) {
     return (
       <FormItem className="openapi-explorer__form-item-body-container">
-        <div>
-          {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
-            if (val.format === "binary") {
-              return (
-                <FormItem
-                  key={key}
-                  label={key}
-                  required={
-                    Array.isArray(schema.required) &&
-                    schema.required.includes(key)
-                  }
-                >
-                  <FormFileUpload
-                    placeholder={val.description || key}
-                    onChange={(file: any) => {
-                      if (file === undefined) {
-                        dispatch(clearFormBodyKey(key));
-                        return;
-                      }
-                      dispatch(
-                        setFileFormBody({
-                          key: key,
-                          value: {
-                            src: `/path/to/${file.name}`,
-                            content: file,
-                          },
-                        })
-                      );
-                    }}
-                  />
-                </FormItem>
-              );
-            }
-
-            if (val.enum) {
-              return (
-                <FormItem
-                  key={key}
-                  label={key}
-                  required={
-                    Array.isArray(schema.required) &&
-                    schema.required.includes(key)
-                  }
-                >
-                  <FormSelect
-                    options={["---", ...val.enum]}
-                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                      const val = e.target.value;
-                      if (val === "---") {
-                        dispatch(clearFormBodyKey(key));
-                      } else {
-                        dispatch(
-                          setStringFormBody({
-                            key: key,
-                            value: val,
-                          })
-                        );
-                      }
-                    }}
-                  />
-                </FormItem>
-              );
-            }
-            // TODO: support all the other types.
-            return (
-              <FormItem
-                key={key}
-                label={key}
-                required={
-                  Array.isArray(schema.required) &&
-                  schema.required.includes(key)
-                }
-              >
-                <FormTextInput
-                  paramName={key}
-                  isRequired={
-                    Array.isArray(schema.required) &&
-                    schema.required.includes(key)
-                  }
-                  placeholder={val.description || key}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    dispatch(
-                      setStringFormBody({ key: key, value: e.target.value })
-                    );
-                  }}
-                />
-              </FormItem>
-            );
-          })}
-        </div>
+        {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
+          return (
+            <FormItem
+              key={key}
+              label={key}
+              required={
+                Array.isArray(schema.required) && schema.required.includes(key)
+              }
+            >
+              <FormBodyItem
+                schemaObject={val}
+                id={key}
+                schema={schema}
+              ></FormBodyItem>
+            </FormItem>
+          );
+        })}
       </FormItem>
     );
   }
@@ -348,7 +268,11 @@ function Body({
             value="Example (from schema)"
             default
           >
-            <LiveApp action={dispatch} language={language} required={required}>
+            <LiveApp
+              action={(code: string) => dispatch(setStringRawBody(code))}
+              language={language}
+              required={required}
+            >
               {defaultBody}
             </LiveApp>
           </TabItem>
@@ -357,7 +281,7 @@ function Body({
             {example.summary && <Markdown>{example.summary}</Markdown>}
             {exampleBody && (
               <LiveApp
-                action={dispatch}
+                action={(code: string) => dispatch(setStringRawBody(code))}
                 language={language}
                 required={required}
               >
@@ -383,7 +307,11 @@ function Body({
             value="Example (from schema)"
             default
           >
-            <LiveApp action={dispatch} language={language} required={required}>
+            <LiveApp
+              action={(code: string) => dispatch(setStringRawBody(code))}
+              language={language}
+              required={required}
+            >
               {defaultBody}
             </LiveApp>
           </TabItem>
@@ -397,7 +325,10 @@ function Body({
               >
                 {example.summary && <Markdown>{example.summary}</Markdown>}
                 {example.body && (
-                  <LiveApp action={dispatch} language={language}>
+                  <LiveApp
+                    action={(code: string) => dispatch(setStringRawBody(code))}
+                    language={language}
+                  >
                     {example.body}
                   </LiveApp>
                 )}
@@ -411,7 +342,11 @@ function Body({
 
   return (
     <FormItem>
-      <LiveApp action={dispatch} language={language} required={required}>
+      <LiveApp
+        action={(code: string) => dispatch(setStringRawBody(code))}
+        language={language}
+        required={required}
+      >
         {defaultBody}
       </LiveApp>
     </FormItem>

package/src/theme/ApiExplorer/Body/slice.ts

@@ -15,12 +15,24 @@ export interface FileContent {
   };
 }
 
+export interface FileArrayContent {
+  type: "file[]";
+  value: {
+    src: string;
+    content: Blob;
+  }[];
+}
+
 export interface StringContent {
   type: "string";
   value?: string;
 }
 
-export type Content = FileContent | StringContent | undefined;
+export type Content =
+  | FileContent
+  | FileArrayContent
+  | StringContent
+  | undefined;
 
 export interface FormBody {
   type: "form";
@@ -118,6 +130,32 @@ export const slice = createSlice({
       };
       return state;
     },
+    setFileArrayFormBody: (
+      state,
+      action: PayloadAction<{
+        key: string;
+        value: FileArrayContent["value"];
+      }>
+    ) => {
+      if (state?.type !== "form") {
+        return {
+          type: "form",
+          content: {
+            [action.payload.key]: {
+              type: "file[]",
+              value: action.payload.value,
+            },
+          },
+        };
+      }
+
+      state.content[action.payload.key] = {
+        type: "file[]",
+        value: action.payload.value,
+      };
+
+      return state;
+    },
   },
 });
 
@@ -128,6 +166,7 @@ export const {
   clearFormBodyKey,
   setStringFormBody,
   setFileFormBody,
+  setFileArrayFormBody,
 } = slice.actions;
 
 export default slice.reducer;

package/src/theme/ApiExplorer/LiveEditor/index.tsx

@@ -11,7 +11,6 @@ import { usePrismTheme } from "@docusaurus/theme-common";
 import { translate } from "@docusaurus/Translate";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { ErrorMessage } from "@hookform/error-message";
-import { setStringRawBody } from "@theme/ApiExplorer/Body/slice";
 import { OPENAPI_FORM } from "@theme/translationIds";
 import clsx from "clsx";
 import { Controller, useFormContext } from "react-hook-form";
@@ -56,8 +55,8 @@ function App({
   const [code, setCode] = React.useState(children.replace(/\n$/, ""));
 
   useEffect(() => {
-    action(setStringRawBody(code));
-  }, [action, code]);
+    action(code);
+  }, [code]);
 
   const {
     control,

package/src/theme/ApiExplorer/ParamOptions/slice.ts

@@ -19,7 +19,7 @@ export interface State {
 
 const initialState: State = {} as any;
 
-export const slice = createSlice({
+const slice = createSlice({
   name: "params",
   initialState,
   reducers: {

package/src/theme/ApiExplorer/buildPostmanRequest.ts

@@ -313,7 +313,11 @@ function setBody(clonedPostman: sdk.Request, body: Body) {
   switch (clonedPostman.body.mode) {
     case "raw": {
       // check file even though it should already be set from above
-      if (body.type !== "raw" || body.content?.type === "file") {
+      if (
+        body.type !== "raw" ||
+        body.content?.type === "file" ||
+        body.content?.type === "file[]"
+      ) {
         clonedPostman.body = undefined;
         return;
       }
@@ -328,15 +332,23 @@ function setBody(clonedPostman: sdk.Request, body: Body) {
         clonedPostman.body.raw = `${body.content?.value}`;
         return;
       }
-      const params = Object.entries(body.content)
+      const params: sdk.FormParam[] = [];
+      Object.entries(body.content)
         .filter((entry): entry is [string, NonNullable<Content>] => !!entry[1])
-        .map(([key, content]) => {
+        .forEach(([key, content]) => {
           if (content.type === "file") {
-            return new sdk.FormParam({ key: key, ...content });
+            params.push(new sdk.FormParam({ key: key, ...content }));
+          } else if (content.type === "file[]") {
+            content.value.forEach((file) =>
+              params.push(new sdk.FormParam({ key, value: file }))
+            );
+          } else {
+            params.push(new sdk.FormParam({ key: key, value: content.value }));
           }
-          return new sdk.FormParam({ key: key, value: content.value });
         });
-      clonedPostman.body.formdata?.assimilate(params, false);
+      params.forEach((param) => {
+        clonedPostman.body?.formdata?.add(param);
+      });
       return;
     }
     case "urlencoded": {
@@ -350,7 +362,11 @@ function setBody(clonedPostman: sdk.Request, body: Body) {
       const params = Object.entries(body.content)
         .filter((entry): entry is [string, NonNullable<Content>] => !!entry[1])
         .map(([key, content]) => {
-          if (content.type !== "file" && content.value) {
+          if (
+            content.type !== "file" &&
+            content.type !== "file[]" &&
+            content.value
+          ) {
             return new sdk.QueryParam({ key: key, value: content.value });
           }
           return undefined;

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/plugin-content-docs.d.ts","./src/postman-code-generators.d.ts","./src/react-magic-dropzone.d.ts","./src/theme-classic.d.ts","./src/theme-openapi.d.ts","./src/types.ts","./src/markdown/createDescription.ts","./src/markdown/schema.ts","./src/markdown/utils.test.ts","./src/markdown/utils.ts","./src/theme/translationIds.ts","./src/theme/ApiExplorer/buildPostmanRequest.ts","./src/theme/ApiExplorer/index.tsx","./src/theme/ApiExplorer/persistenceMiddleware.ts","./src/theme/ApiExplorer/storage-utils.ts","./src/theme/ApiExplorer/Accept/index.tsx","./src/theme/ApiExplorer/Accept/slice.ts","./src/theme/ApiExplorer/ApiCodeBlock/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Container/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Content/Element.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx","./src/theme/ApiExplorer/ApiCodeBlock/CopyButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/ExitButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Line/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/index.tsx","./src/theme/ApiExplorer/Authorization/auth-types.ts","./src/theme/ApiExplorer/Authorization/index.tsx","./src/theme/ApiExplorer/Authorization/slice.ts","./src/theme/ApiExplorer/Body/index.tsx","./src/theme/ApiExplorer/Body/json2xml.d.ts","./src/theme/ApiExplorer/Body/slice.ts","./src/theme/ApiExplorer/CodeSnippets/code-snippets-types.ts","./src/theme/ApiExplorer/CodeSnippets/index.tsx","./src/theme/ApiExplorer/CodeSnippets/languages.ts","./src/theme/ApiExplorer/CodeTabs/index.tsx","./src/theme/ApiExplorer/ContentType/index.tsx","./src/theme/ApiExplorer/ContentType/slice.ts","./src/theme/ApiExplorer/Export/index.tsx","./src/theme/ApiExplorer/FloatingButton/index.tsx","./src/theme/ApiExplorer/FormFileUpload/index.tsx","./src/theme/ApiExplorer/FormItem/index.tsx","./src/theme/ApiExplorer/FormMultiSelect/index.tsx","./src/theme/ApiExplorer/FormSelect/index.tsx","./src/theme/ApiExplorer/FormTextInput/index.tsx","./src/theme/ApiExplorer/LiveEditor/index.tsx","./src/theme/ApiExplorer/MethodEndpoint/index.tsx","./src/theme/ApiExplorer/ParamOptions/index.tsx","./src/theme/ApiExplorer/ParamOptions/slice.ts","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.tsx","./src/theme/ApiExplorer/Request/index.tsx","./src/theme/ApiExplorer/Request/makeRequest.ts","./src/theme/ApiExplorer/Response/index.tsx","./src/theme/ApiExplorer/Response/slice.ts","./src/theme/ApiExplorer/SecuritySchemes/index.tsx","./src/theme/ApiExplorer/Server/index.tsx","./src/theme/ApiExplorer/Server/slice.ts","./src/theme/ApiItem/hooks.ts","./src/theme/ApiItem/index.tsx","./src/theme/ApiItem/store.ts","./src/theme/ApiItem/Layout/index.tsx","./src/theme/ApiLogo/index.tsx","./src/theme/ApiTabs/index.tsx","./src/theme/ArrayBrackets/index.tsx","./src/theme/CodeSamples/index.tsx","./src/theme/DiscriminatorTabs/index.tsx","./src/theme/Example/index.tsx","./src/theme/Markdown/index.d.ts","./src/theme/MimeTabs/index.tsx","./src/theme/OperationTabs/index.tsx","./src/theme/ParamsDetails/index.tsx","./src/theme/ParamsItem/index.tsx","./src/theme/RequestSchema/index.tsx","./src/theme/ResponseExamples/index.tsx","./src/theme/ResponseHeaders/index.tsx","./src/theme/ResponseSchema/index.tsx","./src/theme/Schema/index.tsx","./src/theme/SchemaItem/index.tsx","./src/theme/SchemaTabs/index.tsx","./src/theme/SkeletonLoader/index.tsx","./src/theme/StatusCodes/index.tsx"],"version":"5.8.3"}
+{"root":["./src/index.ts","./src/plugin-content-docs.d.ts","./src/postman-code-generators.d.ts","./src/react-magic-dropzone.d.ts","./src/theme-classic.d.ts","./src/theme-openapi.d.ts","./src/types.ts","./src/markdown/createDescription.ts","./src/markdown/schema.ts","./src/markdown/utils.test.ts","./src/markdown/utils.ts","./src/theme/translationIds.ts","./src/theme/ApiExplorer/buildPostmanRequest.ts","./src/theme/ApiExplorer/index.tsx","./src/theme/ApiExplorer/persistenceMiddleware.ts","./src/theme/ApiExplorer/storage-utils.ts","./src/theme/ApiExplorer/Accept/index.tsx","./src/theme/ApiExplorer/Accept/slice.ts","./src/theme/ApiExplorer/ApiCodeBlock/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Container/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Content/Element.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx","./src/theme/ApiExplorer/ApiCodeBlock/CopyButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/ExitButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Line/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/index.tsx","./src/theme/ApiExplorer/Authorization/auth-types.ts","./src/theme/ApiExplorer/Authorization/index.tsx","./src/theme/ApiExplorer/Authorization/slice.ts","./src/theme/ApiExplorer/Body/index.tsx","./src/theme/ApiExplorer/Body/json2xml.d.ts","./src/theme/ApiExplorer/Body/slice.ts","./src/theme/ApiExplorer/Body/FileArrayFormBodyItem/index.tsx","./src/theme/ApiExplorer/Body/FormBodyItem/index.tsx","./src/theme/ApiExplorer/CodeSnippets/code-snippets-types.ts","./src/theme/ApiExplorer/CodeSnippets/index.tsx","./src/theme/ApiExplorer/CodeSnippets/languages.ts","./src/theme/ApiExplorer/CodeTabs/index.tsx","./src/theme/ApiExplorer/ContentType/index.tsx","./src/theme/ApiExplorer/ContentType/slice.ts","./src/theme/ApiExplorer/Export/index.tsx","./src/theme/ApiExplorer/FloatingButton/index.tsx","./src/theme/ApiExplorer/FormFileUpload/index.tsx","./src/theme/ApiExplorer/FormItem/index.tsx","./src/theme/ApiExplorer/FormMultiSelect/index.tsx","./src/theme/ApiExplorer/FormSelect/index.tsx","./src/theme/ApiExplorer/FormTextInput/index.tsx","./src/theme/ApiExplorer/LiveEditor/index.tsx","./src/theme/ApiExplorer/MethodEndpoint/index.tsx","./src/theme/ApiExplorer/ParamOptions/index.tsx","./src/theme/ApiExplorer/ParamOptions/slice.ts","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.tsx","./src/theme/ApiExplorer/Request/index.tsx","./src/theme/ApiExplorer/Request/makeRequest.ts","./src/theme/ApiExplorer/Response/index.tsx","./src/theme/ApiExplorer/Response/slice.ts","./src/theme/ApiExplorer/SecuritySchemes/index.tsx","./src/theme/ApiExplorer/Server/index.tsx","./src/theme/ApiExplorer/Server/slice.ts","./src/theme/ApiItem/hooks.ts","./src/theme/ApiItem/index.tsx","./src/theme/ApiItem/store.ts","./src/theme/ApiItem/Layout/index.tsx","./src/theme/ApiLogo/index.tsx","./src/theme/ApiTabs/index.tsx","./src/theme/ArrayBrackets/index.tsx","./src/theme/CodeSamples/index.tsx","./src/theme/DiscriminatorTabs/index.tsx","./src/theme/Example/index.tsx","./src/theme/Markdown/index.d.ts","./src/theme/MimeTabs/index.tsx","./src/theme/OperationTabs/index.tsx","./src/theme/ParamsDetails/index.tsx","./src/theme/ParamsItem/index.tsx","./src/theme/RequestSchema/index.tsx","./src/theme/ResponseExamples/index.tsx","./src/theme/ResponseHeaders/index.tsx","./src/theme/ResponseSchema/index.tsx","./src/theme/Schema/index.tsx","./src/theme/SchemaItem/index.tsx","./src/theme/SchemaTabs/index.tsx","./src/theme/SkeletonLoader/index.tsx","./src/theme/StatusCodes/index.tsx"],"version":"5.9.3"}