zudoku 0.64.1 → 0.65.0

package/src/lib/plugins/openapi/components/ResponseContent.tsx

@@ -1,13 +1,8 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import { useState } from "react";
 import { Markdown } from "zudoku/components";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "zudoku/ui/Select.js";
+import { Badge } from "zudoku/ui/Badge.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
 import { cn } from "zudoku/ui/util.js";
 import type { MediaTypeObject } from "../graphql/graphql.js";
 import { SchemaView } from "../schema/SchemaView.js";
@@ -33,48 +28,61 @@ export const ResponseContent = ({
   const currentResponse =
     responses.find((r) => r.statusCode === selectedResponse) ?? responses[0];
 
+  const hideTabs =
+    responses.length === 1 && responses.at(0)?.statusCode === "200";
+
   const cardHeader = (
-    <div className="flex flex-col bg-muted text-muted-foreground">
-      <div className="flex flex-row items-center gap-2 justify-between px-4 py-2">
-        <Tabs.List className="flex flex-row font-medium text-sm gap-4">
-          {responses.map((response) => (
-            <Tabs.Trigger
-              key={response.statusCode}
-              value={response.statusCode}
-              className={cn(
-                "py-1 -mx-2 px-2 rounded-md",
-                "data-[state=active]:dark:ring-1 data-[state=active]:dark:ring-border data-[state=active]:bg-background data-[state=active]:drop-shadow",
-                "data-[state=active]:font-semibold data-[state=active]:text-foreground",
-              )}
-            >
-              {response.statusCode}
-            </Tabs.Trigger>
-          ))}
-        </Tabs.List>
+    <div className="flex flex-col text-muted-foreground">
+      <div
+        className={cn(
+          "flex flex-row items-center gap-2 justify-between",
+          !hideTabs && "px-4 py-1.5 border-b",
+        )}
+      >
+        {!hideTabs && (
+          <Tabs.List className="flex flex-row font-medium text-sm gap-4">
+            {responses.map((response) => (
+              <Tabs.Trigger
+                key={response.statusCode}
+                value={response.statusCode}
+                className={cn(
+                  "py-0.5 h-fit -mx-2 px-2 rounded-md",
+                  "data-[state=active]:dark:ring-1 data-[state=active]:dark:ring-border data-[state=active]:bg-background data-[state=active]:drop-shadow",
+                  "data-[state=active]:font-semibold data-[state=active]:text-foreground",
+                )}
+              >
+                {response.statusCode}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+        )}
         {currentResponse?.content && currentResponse.content.length > 1 && (
-          <Select
+          <NativeSelect
             value={selectedMediaType}
-            onValueChange={setSelectedMediaType}
+            onChange={(e) => setSelectedMediaType(e.target.value)}
+            className="text-xs h-fit py-1 bg-background"
           >
-            <SelectTrigger className="h-8 mt-0 max-w-48 text-xs truncate">
-              <SelectValue placeholder="Select a type" />
-            </SelectTrigger>
-            <SelectContent>
-              {currentResponse.content.map((c) => (
-                <SelectItem key={c.mediaType} value={c.mediaType}>
-                  {c.mediaType}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+            {currentResponse.content.map((c) => (
+              <NativeSelectOption key={c.mediaType} value={c.mediaType}>
+                {c.mediaType}
+              </NativeSelectOption>
+            ))}
+          </NativeSelect>
+        )}
+      </div>
+      <div className="p-2 clear-both">
+        {hideTabs && (
+          <Badge variant="outline" className="float-start me-2">
+            {currentResponse?.statusCode}
+          </Badge>
+        )}
+        {currentResponse?.description && (
+          <Markdown
+            className="text-sm text-muted-foreground max-w-none"
+            content={currentResponse.description}
+          />
         )}
       </div>
-      {currentResponse?.description && (
-        <Markdown
-          className="text-sm border-t px-4 py-2 text-muted-foreground"
-          content={currentResponse.description}
-        />
-      )}
     </div>
   );
 
@@ -88,16 +96,18 @@ export const ResponseContent = ({
           setSelectedMediaType(newResponse?.content?.[0]?.mediaType ?? "");
         }}
       >
-        {responses.map((response) => {
-          const content = response.content?.find(
-            (c) => c.mediaType === selectedMediaType,
-          );
-          return (
-            <Tabs.Content key={response.statusCode} value={response.statusCode}>
-              <SchemaView schema={content?.schema} cardHeader={cardHeader} />
-            </Tabs.Content>
-          );
-        })}
+        {responses.map((response) => (
+          <Tabs.Content key={response.statusCode} value={response.statusCode}>
+            <SchemaView
+              schema={
+                response.content?.find(
+                  (content) => content.mediaType === selectedMediaType,
+                )?.schema
+              }
+              cardHeader={cardHeader}
+            />
+          </Tabs.Content>
+        ))}
       </Tabs.Root>
     </div>
   );

package/src/lib/plugins/openapi/interfaces.ts

@@ -42,6 +42,16 @@ export type TransformExamplesFn = (options: {
   type: "request" | "response";
 }) => Content[];
 
+export type GenerateCodeSnippetFn = (options: {
+  selectedLang: string;
+  selectedServer: string;
+  context: ZudokuContext;
+  auth: AuthState;
+  operation: OperationsFragmentFragment;
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+  example?: any | null;
+}) => string | false;
+
 type BaseOasConfig = {
   server?: string;
   path?: string;
@@ -50,12 +60,14 @@ type BaseOasConfig = {
   schemaImports?: SchemaImports;
   options?: {
     examplesLanguage?: string;
+    supportedLanguages?: { value: string; label: string }[];
     disablePlayground?: boolean;
     disableSidecar?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
     expandAllTags?: boolean;
     expandApiInformation?: boolean;
     transformExamples?: TransformExamplesFn;
+    generateCodeSnippet?: GenerateCodeSnippetFn;
   };
 };
 

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

@@ -1,52 +1,268 @@
-import { FileInput } from "lucide-react";
+import {
+  ChevronDownIcon,
+  FileInput,
+  Grid2x2PlusIcon,
+  PaperclipIcon,
+  ScanTextIcon,
+  XIcon,
+} from "lucide-react";
+import { useRef, useState } from "react";
 import { useFormContext } from "react-hook-form";
+import { Button } from "zudoku/components";
 import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
 import { cn } from "../../../util/cn.js";
+import { humanFileSize } from "../../../util/humanFileSize.js";
 import type { MediaTypeObject } from "../graphql/graphql.js";
 import {
   CollapsibleHeader,
   CollapsibleHeaderTrigger,
 } from "./CollapsibleHeader.js";
 import ExamplesDropdown from "./ExamplesDropdown.js";
+import ParamsGrid from "./ParamsGrid.js";
 import type { PlaygroundForm } from "./Playground.js";
+import { MultipartField } from "./request-panel/MultipartField.js";
+import { useKeyValueFieldManager } from "./request-panel/useKeyValueFieldManager.js";
 
 export const BodyPanel = ({ content }: { content?: MediaTypeObject[] }) => {
-  const { register, setValue, watch } = useFormContext<PlaygroundForm>();
+  const { register, setValue, watch, control } =
+    useFormContext<PlaygroundForm>();
   const examples = (content ?? []).flatMap((e) => e.examples);
-  const headers = watch("headers");
+  const [headers, file, bodyMode, body, multipartFormFields] = watch([
+    "headers",
+    "file",
+    "bodyMode",
+    "body",
+    "multipartFormFields",
+  ]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFileSelect = (selectedFile: File | null) => {
+    setValue("file", selectedFile);
+    if (!selectedFile) return;
+    setValue(
+      "headers",
+      headers.filter(
+        (h) => h.name.toLowerCase() !== "content-type" || !h.active,
+      ),
+    );
+  };
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0] ?? null;
+    handleFileSelect(selectedFile);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const droppedFile = e.dataTransfer.files?.[0] ?? null;
+    handleFileSelect(droppedFile);
+  };
+
+  const manager = useKeyValueFieldManager<
+    PlaygroundForm,
+    "multipartFormFields"
+  >({
+    control,
+    name: "multipartFormFields",
+    defaultValue: { name: "", value: "", active: false },
+    isEmpty: (item) => {
+      if (item.value instanceof File) return false;
+      return !item.name && !item.value;
+    },
+  });
+
   return (
     <Collapsible defaultOpen>
-      <CollapsibleHeaderTrigger>
+      <CollapsibleHeaderTrigger className="items-center">
         <FileInput size={16} />
-        <CollapsibleHeader>Body</CollapsibleHeader>
-        {content && examples.length > 0 ? (
-          <ExamplesDropdown
-            examples={content}
-            onSelect={(example, mediaType) => {
-              setValue("body", JSON.stringify(example.value, null, 2));
-              setValue("headers", [
-                ...headers.filter((h) => h.name !== "Content-Type"),
-                {
-                  name: "Content-Type",
-                  value: mediaType,
-                  active: true,
-                },
-              ]);
-            }}
+        <CollapsibleHeader className="flex items-center justify-between">
+          Body
+          <div className="flex items-center">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="hover:bg-accent hover:brightness-95 gap-2"
+                >
+                  {bodyMode === "text" ? (
+                    <>
+                      <ScanTextIcon size={14} />
+                      Text
+                    </>
+                  ) : bodyMode === "file" ? (
+                    <>
+                      <PaperclipIcon size={14} />
+                      File
+                    </>
+                  ) : (
+                    <>
+                      <Grid2x2PlusIcon size={14} />
+                      Multipart
+                    </>
+                  )}
+                  <ChevronDownIcon size={14} />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="min-w-40">
+                <DropdownMenuItem
+                  onSelect={() => setValue("bodyMode", "text")}
+                  className="gap-2"
+                >
+                  <ScanTextIcon size={14} />
+                  <span className="flex-1">Text</span>
+                  <span>
+                    {body.length > 0 && (
+                      <div className="w-1.5 h-1.5 bg-primary rounded-full" />
+                    )}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={() => setValue("bodyMode", "file")}
+                  className="gap-2"
+                >
+                  <PaperclipIcon size={14} />
+                  <span className="flex-1">File</span>
+                  <span>
+                    {file && (
+                      <div className="w-1.5 h-1.5 bg-primary rounded-full" />
+                    )}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={() => setValue("bodyMode", "multipart")}
+                  className="gap-2"
+                >
+                  <Grid2x2PlusIcon size={14} strokeWidth={1.5} />
+                  <span className="flex-1">Multipart</span>
+                  <span>
+                    {multipartFormFields?.some((field) => field.active) && (
+                      <div className="w-1.5 h-1.5 bg-primary rounded-full" />
+                    )}
+                  </span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <input
+              ref={fileInputRef}
+              type="file"
+              className="hidden"
+              onChange={handleFileInputChange}
+            />
+            <div className="w-px mx-1 h-5 bg-border" />
+            {content && examples.length > 0 ? (
+              <ExamplesDropdown
+                examples={content}
+                onSelect={(example, mediaType) => {
+                  setValue("body", JSON.stringify(example.value, null, 2));
+                  setValue("headers", [
+                    ...headers.filter((h) => h.name !== "Content-Type"),
+                    {
+                      name: "Content-Type",
+                      value: mediaType,
+                      active: true,
+                    },
+                  ]);
+                }}
+              />
+            ) : (
+              <div />
+            )}
+          </div>
+        </CollapsibleHeader>
+      </CollapsibleHeaderTrigger>
+      <CollapsibleContent className="CollapsibleContent flex flex-col gap-2">
+        {bodyMode === "text" && (
+          <Textarea
+            {...register("body")}
+            className={cn(
+              "w-full px-4 py-2.5 h-64 font-mono md:text-xs border-none rounded-none focus-visible:ring-0 transition-colors",
+            )}
+            placeholder="Body content"
           />
-        ) : (
-          <div />
         )}
-      </CollapsibleHeaderTrigger>
-      <CollapsibleContent className="flex flex-col gap-2 ">
-        <Textarea
-          {...register("body")}
-          className={cn(
-            "w-full p-2 h-64 font-mono md:text-xs border-none rounded-none focus-visible:ring-0",
-          )}
-          placeholder="Your body here..."
-        />
+        {bodyMode === "file" && (
+          <div
+            role="region"
+            aria-label="File upload drop zone"
+            className={cn(
+              "flex flex-col items-center justify-center gap-4 min-h-[300px]",
+            )}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              className={cn(
+                "flex items-center justify-center gap-2 rounded-full size-20 p-0 border border-dashed border-muted-foreground/50 hover:bg-accent/75 transition-colors",
+                (file || isDragging) && "border-solid",
+                isDragging && "bg-accent border-primary",
+              )}
+            >
+              <PaperclipIcon
+                className={cn(
+                  "text-muted-foreground",
+                  isDragging && "text-primary",
+                )}
+                size={30}
+              />
+            </button>
+            {file ? (
+              <div className="flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border">
+                <span className="text-sm truncate" title={file.name}>
+                  {file.name}{" "}
+                  <span className="text-muted-foreground">
+                    ({humanFileSize(file.size)})
+                  </span>
+                </span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-xxs"
+                  onClick={() => handleFileSelect(null)}
+                >
+                  <XIcon size={14} />
+                </Button>
+              </div>
+            ) : (
+              <span className="text-lg font-semibold text-muted-foreground">
+                Select or drop a file
+              </span>
+            )}
+          </div>
+        )}
+        {bodyMode === "multipart" && (
+          <ParamsGrid>
+            {manager.fields.map((field, index) => (
+              <MultipartField key={field.id} index={index} manager={manager} />
+            ))}
+          </ParamsGrid>
+        )}
       </CollapsibleContent>
     </Collapsible>
   );

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

@@ -1,4 +1,4 @@
-import { ChevronUpIcon } from "lucide-react";
+import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { CollapsibleTrigger } from "zudoku/ui/Collapsible.js";
 import { cn } from "../../../util/cn.js";
 
@@ -12,20 +12,24 @@ export const CollapsibleHeaderTrigger = ({
   return (
     <div
       className={cn(
-        "grid grid-cols-[max-content_1fr_min-content_max-content] items-center gap-2 group bg-muted w-full h-10 ps-4 pe-2 border-b",
+        "grid grid-cols-[max-content_1fr_max-content] items-center gap-2 group bg-muted w-full h-10 ps-4 pe-2 border-b",
         className,
       )}
     >
       {children}
       <CollapsibleTrigger
         className={cn(
-          "flex items-center gap-4 group bg-muted w-full p-2 hover:bg-accent hover:brightness-95 rounded-md",
+          "flex items-center gap-4 group bg-muted w-full p-2 hover:bg-accent hover:brightness-95 opacity-75 rounded-md",
           className,
         )}
       >
-        <ChevronUpIcon
-          className="group-data-[state=open]:rotate-180 transition-transform shrink-0"
-          size={16}
+        <ChevronsDownUpIcon
+          className="group-data-[state=closed]:hidden shrink-0"
+          size={14}
+        />
+        <ChevronsUpDownIcon
+          className="group-data-[state=open]:hidden shrink-0"
+          size={14}
         />
       </CollapsibleTrigger>
     </div>

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

@@ -24,9 +24,10 @@ const ExamplesDropdown = ({
         <Button
           variant="ghost"
           size="sm"
-          className="hover:bg-accent hover:brightness-95"
+          className="hover:bg-accent hover:brightness-95 gap-2"
         >
-          Use Example <PlusCircleIcon size={16} className="ml-2" />
+          Use Example
+          <PlusCircleIcon size={14} />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="max-w-72">