zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -23,7 +23,7 @@ import { useHotkey } from "../../../hooks/useHotkey.js";
 import { cn } from "../../../util/cn.js";
 import { useCopyToClipboard } from "../../../util/useCopyToClipboard.js";
 import { useLatest } from "../../../util/useLatest.js";
-import { type Content } from "../SidecarExamples.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
 import { useSelectedServer } from "../state.js";
 import BodyPanel from "./BodyPanel.js";
 import {
@@ -37,10 +37,10 @@ import { IdentityDialog } from "./IdentityDialog.js";
 import IdentitySelector from "./IdentitySelector.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
+import RequestLoginDialog from "./RequestLoginDialog.js";
 import { useIdentityStore } from "./rememberedIdentity.js";
 import { UrlPath } from "./request-panel/UrlPath.js";
 import { UrlQueryParams } from "./request-panel/UrlQueryParams.js";
-import RequestLoginDialog from "./RequestLoginDialog.js";
 import { ResultPanel } from "./result-panel/ResultPanel.js";
 import { useRememberSkipLoginDialog } from "./useRememberSkipLoginDialog.js";
 
@@ -72,16 +72,20 @@ export type PathParam = {
 
 export type PlaygroundForm = {
   body: string;
-  queryParams: Array<{
+  bodyMode?: "text" | "file" | "multipart";
+  file?: File | null;
+  multipartFormFields: Array<{
     name: string;
-    value: string;
+    value: File | string;
     active: boolean;
-    enum?: string[];
   }>;
-  pathParams: Array<{
+  queryParams: Array<{
     name: string;
     value: string;
+    active: boolean;
+    enum?: string[];
   }>;
+  pathParams: Array<{ name: string; value: string }>;
   headers: Array<{
     name: string;
     value: string;
@@ -117,7 +121,7 @@ export type PlaygroundContentProps = {
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
   defaultBody?: string;
-  examples?: Content;
+  examples?: MediaTypeObject[];
   requiresLogin?: boolean;
   onLogin?: () => void;
   onSignUp?: () => void;
@@ -145,6 +149,7 @@ export const Playground = ({
   const { setRememberedIdentity, getRememberedIdentity } = useIdentityStore();
   const [, startTransition] = useTransition();
   const { skipLogin, setSkipLogin } = useRememberSkipLoginDialog();
+  const [isLoginDialogDismissed, setIsLoginDialogDismissed] = useState(false);
   const [showLongRunningWarning, setShowLongRunningWarning] = useState(false);
   const abortControllerRef = useRef<AbortController | undefined>(undefined);
   const latestSetRememberedIdentity = useLatest(setRememberedIdentity);
@@ -164,6 +169,9 @@ export const Playground = ({
     useForm<PlaygroundForm>({
       defaultValues: {
         body: defaultBody,
+        bodyMode: "text",
+        file: null,
+        multipartFormFields: [],
         queryParams:
           queryParams.length > 0
             ? queryParams.map((param) => ({
@@ -172,14 +180,7 @@ export const Playground = ({
                 active: param.defaultActive ?? false,
                 enum: param.enum ?? [],
               }))
-            : [
-                {
-                  name: "",
-                  value: "",
-                  active: false,
-                  enum: [],
-                },
-              ],
+            : [{ name: "", value: "", active: false, enum: [] }],
         pathParams: sortedPathParams.map((param) => ({
           name: param.name,
           value: param.defaultValue ?? "",
@@ -191,13 +192,7 @@ export const Playground = ({
                 value: header.defaultValue ?? "",
                 active: header.defaultActive ?? false,
               }))
-            : [
-                {
-                  name: "",
-                  value: "",
-                  active: false,
-                },
-              ],
+            : [{ name: "", value: "", active: false }],
         identity: getRememberedIdentity([
           NO_IDENTITY,
           ...(identities.data?.map((i) => i.id) ?? []),
@@ -222,19 +217,37 @@ export const Playground = ({
     mutationFn: async (data: PlaygroundForm) => {
       const start = performance.now();
 
-      const headers = Object.fromEntries([
-        ...data.headers
+      const headers = new window.Headers(
+        data.headers
           .filter((h) => h.name && h.active)
-          .map((header) => [header.name, header.value]),
-      ]);
+          .map<[string, string]>((h) => [h.name, h.value]),
+      );
+
+      let body: string | FormData | File | undefined;
+
+      switch (data.bodyMode) {
+        case "file":
+          body = data.file ?? undefined;
+          headers.delete("Content-Type");
+          break;
+        case "multipart": {
+          const formData = new FormData();
+          data.multipartFormFields
+            ?.filter((field) => field.name && field.active)
+            .forEach((field) => formData.append(field.name, field.value));
+
+          body = formData;
+          headers.delete("Content-Type");
+          break;
+        }
+        default:
+          body = data.body ?? undefined;
+          break;
+      }
 
       const request = new Request(
         createUrl(server ?? selectedServer, url, data),
-        {
-          method: method.toUpperCase(),
-          headers,
-          body: data.body ? data.body : undefined,
-        },
+        { method, headers, body },
       );
 
       if (data.identity !== NO_IDENTITY) {
@@ -282,10 +295,35 @@ export const Playground = ({
 
         const responseSize = response.headers.get("content-length");
 
+        let requestBody = "";
+
+        switch (data.bodyMode) {
+          case "text":
+            requestBody = data.body;
+            break;
+          case "file":
+            requestBody = `[File: ${data.file?.name ?? "Unknown"}]`;
+            break;
+          case "multipart":
+            requestBody = "[Multipart Form Data]\n";
+            requestBody += data.multipartFormFields
+              ?.filter((f) => f.name && f.active)
+              .map((f) =>
+                f.value instanceof File
+                  ? `${f.name}: [File: ${f.value.name}]`
+                  : `${f.name}: ${f.value}`,
+              )
+              .join("\n");
+            break;
+          default:
+            requestBody = data.body;
+            break;
+        }
+
         return {
           status: response.status,
           headers: responseHeaders,
-          size: responseSize ? parseInt(responseSize) : body.length,
+          size: responseSize ? Number(responseSize) : body.length,
           body,
           time,
           isBinary,
@@ -299,7 +337,7 @@ export const Playground = ({
               ["User-Agent", "Zudoku Playground"],
               ...Array.from(request.headers.entries()),
             ],
-            body: data.body ? data.body : undefined,
+            body: requestBody,
           },
         } satisfies PlaygroundResult;
       } catch (error) {
@@ -361,7 +399,7 @@ export const Playground = ({
     </div>
   );
 
-  const showLogin = requiresLogin && !skipLogin;
+  const showLogin = requiresLogin && !skipLogin && !isLoginDialogDismissed;
   const isBodySupported = ["POST", "PUT", "PATCH", "DELETE"].includes(
     method.toUpperCase(),
   );
@@ -374,6 +412,11 @@ export const Playground = ({
       <TooltipProvider delayDuration={150}>
         <form
           ref={formRef}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
+              e.preventDefault();
+            }
+          }}
           onSubmit={handleSubmit((data) => {
             if (identities.data?.length === 0 || data.identity) {
               queryMutation.mutate(data);
@@ -397,7 +440,17 @@ export const Playground = ({
           />
           <RequestLoginDialog
             open={showLogin}
-            setOpen={(open) => setSkipLogin(!open)}
+            setOpen={(open) => {
+              if (!open) {
+                setIsLoginDialogDismissed(true);
+              }
+            }}
+            onSkip={(rememberSkip) => {
+              setIsLoginDialogDismissed(true);
+              if (rememberSkip) {
+                setSkipLogin(true);
+              }
+            }}
             onSignUp={onSignUp}
             onLogin={onLogin}
           />
@@ -464,9 +517,7 @@ export const Playground = ({
                 <Collapsible defaultOpen>
                   <CollapsibleHeaderTrigger>
                     <IdCardLanyardIcon size={16} />
-                    <CollapsibleHeader className="col-span-2">
-                      Authentication
-                    </CollapsibleHeader>
+                    <CollapsibleHeader>Authentication</CollapsibleHeader>
                   </CollapsibleHeaderTrigger>
                   <CollapsibleContent className="CollapsibleContent">
                     <IdentitySelector
@@ -482,9 +533,7 @@ export const Playground = ({
                 <Collapsible defaultOpen>
                   <CollapsibleHeaderTrigger>
                     <ShapesIcon size={16} />
-                    <CollapsibleHeader className="col-span-2">
-                      Path Parameters
-                    </CollapsibleHeader>
+                    <CollapsibleHeader>Path Parameters</CollapsibleHeader>
                   </CollapsibleHeaderTrigger>
                   <CollapsibleContent className="CollapsibleContent">
                     <PathParams url={url} control={control} />

package/src/lib/plugins/openapi/playground/PlaygroundDialog.tsx

@@ -1,5 +1,6 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { type PropsWithChildren, useState } from "react";
+import { useAuth } from "zudoku/hooks";
 import {
   Dialog,
   DialogContent,
@@ -35,6 +36,9 @@ const HeroPlayIcon = ({
 
 const PlaygroundDialog = (props: PlaygroundDialogProps) => {
   const [open, setOpen] = useState(false);
+  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
+    useAuth();
+
   return (
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
@@ -50,14 +54,21 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
       </DialogTrigger>
 
       <DialogContent
-        className="max-w-screen-xl w-full overflow-hidden p-0"
+        className="max-w-screen-xl! w-full overflow-hidden p-0"
         aria-describedby={undefined}
         showCloseButton={true}
       >
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        {open && <Playground {...props} />}
+        {open && (
+          <Playground
+            requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
+            onLogin={() => login()}
+            onSignUp={() => signup()}
+            {...props}
+          />
+        )}
       </DialogContent>
     </Dialog>
   );

package/src/lib/plugins/openapi/playground/QueryParams.tsx

@@ -1,23 +1,19 @@
-import { PlusCircleIcon, Unlink2Icon, XIcon } from "lucide-react";
-import { useEffect } from "react";
-import {
-  type Control,
-  Controller,
-  useFieldArray,
-  useFormContext,
-} from "react-hook-form";
-import { Button } from "zudoku/ui/Button.js";
+import { Unlink2Icon } from "lucide-react";
+import { type Control, useFormContext } from "react-hook-form";
 import { Checkbox } from "zudoku/ui/Checkbox.js";
 import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
-import { Input } from "../../../ui/Input.js";
 import {
   CollapsibleHeader,
   CollapsibleHeaderTrigger,
 } from "./CollapsibleHeader.js";
-import { InlineInput } from "./InlineInput.js";
-import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
-import { type PlaygroundForm, type QueryParam } from "./Playground.js";
+import ParamsGrid, {
+  ParamsGridInput,
+  ParamsGridItem,
+  ParamsGridRemoveButton,
+} from "./ParamsGrid.js";
+import type { PlaygroundForm, QueryParam } from "./Playground.js";
+import { useKeyValueFieldManager } from "./request-panel/useKeyValueFieldManager.js";
 
 export const QueryParams = ({
   control,
@@ -26,148 +22,98 @@ export const QueryParams = ({
   control: Control<PlaygroundForm>;
   schemaQueryParams: QueryParam[];
 }) => {
-  const { fields, remove, append } = useFieldArray<
-    PlaygroundForm,
-    "queryParams"
-  >({
+  const { watch } = useFormContext<PlaygroundForm>();
+  const watchedQueryParams = watch("queryParams");
+
+  const manager = useKeyValueFieldManager<PlaygroundForm, "queryParams">({
     control,
     name: "queryParams",
+    defaultValue: { name: "", value: "", active: false },
   });
-  const { setValue, getValues, watch } = useFormContext<PlaygroundForm>();
-  const watchedQueryParams = watch("queryParams");
-  useEffect(() => {
-    if (watchedQueryParams.length === 0) {
-      append({ name: "", value: "", active: false }, { shouldFocus: true });
-    }
-  }, [watchedQueryParams, append]);
 
   const requiredFields = schemaQueryParams.map((param) =>
     Boolean(param.isRequired),
   );
 
+  const hasSchemaParams = schemaQueryParams.length > 0;
+
   return (
     <Collapsible defaultOpen>
       <CollapsibleHeaderTrigger>
         <Unlink2Icon size={16} />
         <CollapsibleHeader>Query Parameters</CollapsibleHeader>
-        <Button
-          onClick={() => {
-            setValue("queryParams", [
-              ...getValues("queryParams"),
-              { name: "", value: "", active: false },
-            ]);
-          }}
-          type="button"
-          size="sm"
-          variant="ghost"
-          className="hover:bg-accent hover:brightness-95 flex gap-2"
-        >
-          Add parameter <PlusCircleIcon size={16} />
-        </Button>
       </CollapsibleHeaderTrigger>
       <CollapsibleContent className="CollapsibleContent">
-        <div className="overflow-hidden w-full">
-          <ParamsGrid>
-            {fields.map((field, i) => {
-              const currentParam = schemaQueryParams.find(
-                (param) => param.name === watchedQueryParams.at(i)?.name,
-              );
-              return (
-                <ParamsGridItem key={field.id}>
-                  <Controller
-                    control={control}
-                    name={`queryParams.${i}.active`}
-                    render={({ field }) => (
-                      <Checkbox
-                        id={`queryParams.${i}.active`}
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    render={({ field }) =>
-                      !requiredFields[i] ? (
-                        <Autocomplete
-                          placeholder="Name"
-                          value={field.value}
-                          options={schemaQueryParams.map((param) => param.name)}
-                          onChange={(e) => {
-                            field.onChange(e);
-                          }}
-                          className="border-0 p-0 m-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
-                        />
-                      ) : (
-                        <InlineInput asChild>
-                          <label
-                            className="flex items-center cursor-pointer gap-1"
-                            htmlFor={`queryParams.${i}.active`}
-                            title={
-                              requiredFields[i] ? "Required field" : undefined
-                            }
-                          >
-                            {field.value}
-                            {requiredFields[i] && <sup>&nbsp;*</sup>}
-                          </label>
-                        </InlineInput>
-                      )
-                    }
-                    name={`queryParams.${i}.name`}
-                  />
-                  <div className="flex justify-between items-center">
-                    <Controller
-                      control={control}
-                      render={({ field }) => {
-                        const hasEnum =
-                          currentParam?.enum && currentParam.enum.length > 0;
+        <ParamsGrid>
+          {manager.fields.map((field, i) => {
+            const currentParam = schemaQueryParams.find(
+              (param) => param.name === watchedQueryParams.at(i)?.name,
+            );
+            const hasEnum = currentParam?.enum && currentParam.enum.length > 0;
+            const nameInputProps = manager.getNameInputProps(i);
+            const valueInputProps = manager.getValueInputProps(i);
 
-                        if (!hasEnum) {
-                          return (
-                            <Input
-                              {...field}
-                              onChange={(e) => {
-                                field.onChange(e.target.value);
-                                if (e.target.value.length > 0) {
-                                  setValue(`queryParams.${i}.active`, true);
-                                }
-                              }}
-                              placeholder="Value"
-                              aria-label="Query parameter value"
-                              className="w-full border-0 p-0 m-0 shadow-none focus-visible:ring-0 text-xs font-mono"
-                            />
-                          );
+            return (
+              <ParamsGridItem key={field.id}>
+                <Checkbox {...manager.getCheckboxProps(i)} />
+                {!requiredFields[i] ? (
+                  hasSchemaParams ? (
+                    <ParamsGridInput asChild>
+                      <Autocomplete
+                        {...nameInputProps}
+                        value={String(manager.getValue(i, "name"))}
+                        placeholder="Name"
+                        options={schemaQueryParams.map((param) => param.name)}
+                        onChange={(v) => manager.setValue(i, "name", v)}
+                        onSelect={(v) =>
+                          manager.setValue(i, "name", v, { focus: "next" })
                         }
-
-                        return (
-                          <Autocomplete
-                            value={field.value}
-                            options={currentParam.enum ?? []}
-                            onChange={(e) => {
-                              field.onChange(e);
-                              setValue(`queryParams.${i}.active`, true);
-                            }}
-                            className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
-                          />
-                        );
-                      }}
-                      name={`queryParams.${i}.value`}
-                    />
-                    <Button
-                      size="icon-xs"
-                      variant="ghost"
-                      className="text-muted-foreground opacity-0 group-hover:brightness-95 group-hover:opacity-100"
-                      onClick={() => remove(i)}
-                      type="button"
+                      />
+                    </ParamsGridInput>
+                  ) : (
+                    <ParamsGridInput {...nameInputProps} placeholder="Name" />
+                  )
+                ) : (
+                  <ParamsGridInput asChild>
+                    <label
+                      className="flex items-center cursor-pointer gap-1"
+                      htmlFor={`queryParams.${i}.active`}
+                      title={requiredFields[i] ? "Required field" : undefined}
                     >
-                      <XIcon size={16} />
-                    </Button>
-                  </div>
-                </ParamsGridItem>
-              );
-            })}
-          </ParamsGrid>
-        </div>
+                      {watchedQueryParams[i]?.name}
+                      {requiredFields[i] && <sup>&nbsp;*</sup>}
+                    </label>
+                  </ParamsGridInput>
+                )}
+                <div className="flex justify-between items-center">
+                  {!hasEnum ? (
+                    <ParamsGridInput
+                      placeholder="Value"
+                      aria-label="Query parameter value"
+                      {...valueInputProps}
+                    />
+                  ) : (
+                    <ParamsGridInput asChild>
+                      <Autocomplete
+                        {...valueInputProps}
+                        value={String(manager.getValue(i, "value"))}
+                        shouldFilter={false}
+                        options={currentParam.enum ?? []}
+                        onChange={(v) => manager.setValue(i, "value", v)}
+                        onSelect={(v) =>
+                          manager.setValue(i, "value", v, { focus: "next" })
+                        }
+                      />
+                    </ParamsGridInput>
+                  )}
+                  <ParamsGridRemoveButton
+                    {...manager.getRemoveButtonProps(i)}
+                  />
+                </div>
+              </ParamsGridItem>
+            );
+          })}
+        </ParamsGrid>
       </CollapsibleContent>
     </Collapsible>
   );

package/src/lib/plugins/openapi/playground/RequestLoginDialog.tsx

@@ -1,4 +1,6 @@
+import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
 import {
   Dialog,
   DialogContent,
@@ -6,18 +8,28 @@ import {
   DialogFooter,
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
+import { Label } from "zudoku/ui/Label.js";
 
 const RequestLoginDialog = ({
   open,
   setOpen,
   onSignUp,
   onLogin,
+  onSkip,
 }: {
   open: boolean;
   onSignUp?: () => void;
   onLogin?: () => void;
   setOpen: (open: boolean) => void;
+  onSkip?: (rememberSkip: boolean) => void;
 }) => {
+  const [rememberSkip, setRememberSkip] = useState(false);
+
+  const handleSkip = () => {
+    onSkip?.(rememberSkip);
+    setOpen(false);
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
@@ -26,8 +38,15 @@ const RequestLoginDialog = ({
           The Playground is a tool for developers to test and explore our APIs.
           To use the Playground, you need to login.
         </DialogDescription>
+        <Label className="flex items-center gap-2 font-normal">
+          <Checkbox
+            checked={rememberSkip}
+            onCheckedChange={(checked) => setRememberSkip(checked === true)}
+          />
+          Don't show this again
+        </Label>
         <DialogFooter className="flex gap-2 sm:justify-between">
-          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+          <Button type="button" variant="outline" onClick={handleSkip}>
             Skip
           </Button>
           <div className="flex gap-2">