zudoku 0.64.2 → 0.65.0

package/src/lib/plugins/openapi/SidecarExamples.tsx

@@ -1,11 +1,13 @@
+import { ExternalLinkIcon } from "lucide-react";
+import { Badge } from "zudoku/ui/Badge.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
 import type { MediaTypeObject } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { SimpleSelect } from "./SimpleSelect.js";
 
-const formatForDisplay = (value: unknown): string => {
-  if (value == null) return "No example";
+const formatForDisplay = (value: unknown): string | undefined => {
+  if (value == null) return;
   if (typeof value === "string") return value.trim();
   return JSON.stringify(value, null, 2);
 };
@@ -66,25 +68,30 @@ export const SidecarExamples = ({
     <>
       <SidecarBox.Body className="p-0">
         {selectedExample?.externalValue ? (
-          <div className="p-2">
+          <div className="p-4">
             <a
               href={selectedExample.externalValue}
               target="_blank"
               rel="noopener noreferrer"
               className="text-xs text-primary hover:underline"
             >
-              View External Example →
+              View External Example
+              <ExternalLinkIcon className="size-3 inline-block ms-1 align-[-0.125em]" />
             </a>
           </div>
-        ) : shouldLazyHighlight && !isOnScreen ? (
+        ) : shouldLazyHighlight && !isOnScreen && formattedExample ? (
           <NonHighlightedCode code={formattedExample} />
-        ) : (
+        ) : formattedExample ? (
           <SyntaxHighlight
             embedded
             language={language}
             className="[--scrollbar-color:gray] rounded-none max-h-[200px] text-xs overflow-auto"
             code={formattedExample}
           />
+        ) : (
+          <div className="grid place-items-center text-xs text-muted-foreground min-h-18">
+            No example specified for this content type
+          </div>
         )}
         {selectedExample?.description && (
           <div className="border-t text-xs px-3 py-1.5 text-muted-foreground">
@@ -92,18 +99,18 @@ export const SidecarExamples = ({
           </div>
         )}
       </SidecarBox.Body>
-      <SidecarBox.Footer className="text-xs p-0 divide-y divide-border">
+      <SidecarBox.Footer className="text-xs">
         {description && (
-          <div className="text-muted-foreground text-xs px-3 py-2">
+          <div className="text-muted-foreground text-xs px-1 py-2">
             {description}
           </div>
         )}
         {(examples.length !== 0 || content.length !== 0) && (
-          <div className="flex items-center gap-2 justify-between min-w-0 px-3 py-2">
-            <div className="flex items-center gap-2 min-w-0">
+          <div className="flex items-center gap-2 justify-between min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
               {content.length > 1 ? (
-                <SimpleSelect
-                  className="max-w-[200px]"
+                <NativeSelect
+                  className="text-xs h-fit py-1 truncate bg-background"
                   value={selectedContentIndex.toString()}
                   onChange={(e) =>
                     onExampleChange?.({
@@ -111,38 +118,53 @@ export const SidecarExamples = ({
                       exampleIndex: 0,
                     })
                   }
-                  options={content.map((c, index) => ({
-                    value: index.toString(),
-                    label: c.mediaType,
-                  }))}
-                />
+                >
+                  {content.map((c, index) => (
+                    <NativeSelectOption
+                      key={c.mediaType}
+                      value={index.toString()}
+                    >
+                      {c.mediaType}
+                    </NativeSelectOption>
+                  ))}
+                </NativeSelect>
               ) : (
-                <span className="font-mono text-[11px]">
+                <Badge
+                  className="text-[11px] font-mono font-normal"
+                  variant="outline"
+                >
                   {content[0]?.mediaType}
-                </span>
+                </Badge>
               )}
             </div>
             {examples.length > 1 && (
-              <div className="flex items-center gap-1">
-                <SimpleSelect
-                  className="max-w-[180px]"
-                  value={selectedExampleIndex.toString()}
-                  onChange={(e) =>
-                    onExampleChange?.({
-                      contentTypeIndex: selectedContentIndex,
-                      exampleIndex: Number(e.target.value),
-                    })
-                  }
-                  options={examples.map((example, index) => ({
-                    value: index.toString(),
-                    label:
+              <NativeSelect
+                className="text-xs h-fit py-1 truncate bg-background"
+                value={selectedExampleIndex.toString()}
+                onChange={(e) =>
+                  onExampleChange?.({
+                    contentTypeIndex: selectedContentIndex,
+                    exampleIndex: Number(e.target.value),
+                  })
+                }
+              >
+                {examples.map((example, index) => (
+                  <NativeSelectOption
+                    key={
                       example.summary ||
                       example.name ||
                       example.description ||
-                      `Example ${index + 1}`,
-                  }))}
-                />
-              </div>
+                      `Example ${index + 1}`
+                    }
+                    value={index.toString()}
+                  >
+                    {example.summary ||
+                      example.name ||
+                      example.description ||
+                      `Example ${index + 1}`}
+                  </NativeSelectOption>
+                ))}
+              </NativeSelect>
             )}
           </div>
         )}

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

@@ -9,7 +9,7 @@ export const ConstValue = ({
   hideDescription?: boolean;
 }) => {
   return (
-    <div className="flex flex-col gap-1 text-xs">
+    <div className="flex flex-col gap-1">
       <div>
         <span className="text-muted-foreground">Const value: </span>
         <SelectOnClick className="border rounded px-1 font-mono">

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

@@ -22,8 +22,8 @@ export const EnumValues = ({
     shouldCollapse && !isOpen ? values.slice(0, maxVisibleValues) : values;
 
   return (
-    <div className={cn("flex flex-wrap gap-1.5 text-xs", className)}>
-      <span className="text-muted-foreground">Enum values: </span>
+    <div className={cn("flex flex-wrap gap-1.5", className)}>
+      <span className="text-muted-foreground">Enum values:</span>
       {visibleValues.map((value) => (
         <div key={value}>
           <SelectOnClick className="border rounded-sm px-1 font-mono">

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 max-w-none"
-          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>
   );