zudoku 0.26.1 → 0.28.0

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

@@ -9,6 +9,7 @@ import { Checkbox } from "zudoku/ui/Checkbox.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Input } from "../../../ui/Input.js";
 import { InlineInput } from "./InlineInput.js";
+import ParamsGrid from "./ParamsGrid.js";
 import { type PlaygroundForm, type QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
@@ -34,51 +35,51 @@ export const QueryParams = ({
             (param) => param.name === field.name,
           );
           return (
-            <div
-              key={field.id}
-              className="hover:bg-accent/40 grid grid-cols-[min-content_1fr_1fr] gap-2 items-center px-3"
-            >
-              <Controller
-                control={control}
-                name={`queryParams.${i}.active`}
-                render={({ field }) => (
-                  <Checkbox
-                    variant="outline"
-                    id={`queryParams.${i}.active`}
-                    className="mr-2"
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                )}
-              />
-              <Controller
-                control={control}
-                render={({ field }) =>
-                  !requiredFields[i] ? (
-                    <Autocomplete
-                      value={field.value}
-                      options={queryParams.map((param) => param.name)}
-                      onChange={(e) => {
-                        field.onChange(e);
-                      }}
-                      className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+            <ParamsGrid key={field.id}>
+              <div className="flex items-center">
+                <Controller
+                  control={control}
+                  name={`queryParams.${i}.active`}
+                  render={({ field }) => (
+                    <Checkbox
+                      variant="outline"
+                      id={`queryParams.${i}.active`}
+                      className="mr-2"
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
                     />
-                  ) : (
-                    <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`}
-              />
-
+                  )}
+                />
+                <Controller
+                  control={control}
+                  render={({ field }) =>
+                    !requiredFields[i] ? (
+                      <Autocomplete
+                        value={field.value}
+                        options={queryParams.map((param) => param.name)}
+                        onChange={(e) => {
+                          field.onChange(e);
+                        }}
+                        className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+                      />
+                    ) : (
+                      <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>
               <div className="flex justify-between items-center">
                 <Controller
                   control={control}
@@ -117,7 +118,7 @@ export const QueryParams = ({
                   name={`queryParams.${i}.value`}
                 />
               </div>
-            </div>
+            </ParamsGrid>
           );
         })}
       </div>

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

@@ -0,0 +1,75 @@
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
+import { ApiIdentity } from "../../../core/ZudokuContext.js";
+import { NO_IDENTITY } from "./Playground.js";
+
+const SubmitButton = ({
+  identities,
+  formRef,
+  disabled,
+}: {
+  identities: ApiIdentity[];
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  disabled?: boolean;
+}) => {
+  const { setValue } = useFormContext();
+  const [dropdownValue, setDropdownValue] = useState<string | undefined>();
+  if (identities.length === 0) {
+    return <Button disabled={disabled}>Send</Button>;
+  }
+  return (
+    <div className="flex">
+      <Button
+        className="rounded-r-none inset-shadow-sm"
+        disabled={disabled}
+        onClick={() => formRef?.current?.requestSubmit()}
+      >
+        Send
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            disabled={disabled}
+            className="rounded-l-none border-l border-border/40 inset-shadow-sm w-6"
+            size="icon"
+          >
+            <ChevronDownIcon className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <RadioGroup value={dropdownValue}>
+          <DropdownMenuContent className="w-56" align="end" alignOffset={-150}>
+            {[{ id: NO_IDENTITY, label: "None" }, ...identities].map(
+              (identity) => (
+                <DropdownMenuItem
+                  key={identity.id}
+                  onClick={() => {
+                    setDropdownValue(identity.id);
+                    setValue("identity", identity.id);
+                    formRef?.current?.requestSubmit();
+                  }}
+                  onMouseEnter={() => setDropdownValue(identity.id)}
+                  onMouseLeave={() => setDropdownValue(undefined)}
+                >
+                  <RadioGroupItem value={identity.id} className="mr-2" />
+
+                  {identity.label}
+                </DropdownMenuItem>
+              ),
+            )}
+          </DropdownMenuContent>
+        </RadioGroup>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export default SubmitButton;

package/src/lib/plugins/openapi/playground/result-panel/RequestTab.tsx

@@ -0,0 +1,73 @@
+import { ChevronRightIcon } from "lucide-react";
+import { Fragment } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../../../ui/Collapsible.js";
+import { cn } from "../../../../util/cn.js";
+import { methodForColor } from "../../util/methodToColor.js";
+
+export const RequestTab = ({
+  method,
+  url,
+  headers,
+  body,
+}: {
+  method: string;
+  url: string;
+  headers: Array<[string, string]>;
+  body?: string;
+}) => {
+  return (
+    <div className="flex flex-col gap-2 font-mono text-xs">
+      <div className="gap-2 p-2 bg-muted rounded-md">
+        <span className={cn(methodForColor(method), "font-semibold")}>
+          {method}
+        </span>
+        &nbsp;
+        <span className="break-all">{url}</span>&nbsp;
+        <span className="text-muted-foreground">HTTP/1.1</span>
+      </div>
+      <div className="mx-1.5 flex flex-col gap-3">
+        <Collapsible defaultOpen>
+          <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
+            <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
+            <span className="font-semibold">Headers</span>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 pl-1.5 pt-2">
+              {headers.map(([key, value]) => (
+                <Fragment key={key}>
+                  <div className="text-primary">{key}</div>
+                  <div className="break-words">{value}</div>
+                </Fragment>
+              ))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <Collapsible defaultOpen>
+          <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
+            <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
+            <span className="font-semibold">Body</span>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="pl-0 pt-2">
+              <div
+                className={cn(
+                  "whitespace-pre-wrap break-all bg-muted p-2 rounded-md",
+                  !body && "text-muted-foreground",
+                )}
+              >
+                {body ?? "Empty body"}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
+  );
+};
+
+export default RequestTab;

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -0,0 +1,210 @@
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRightIcon } from "lucide-react";
+import { Fragment, useState } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "zudoku/ui/Collapsible.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "zudoku/ui/Select.js";
+import { SyntaxHighlight } from "../../../../components/SyntaxHighlight.js";
+import { Card } from "../../../../ui/Card.js";
+import { convertToTypes } from "./convertToTypes.js";
+
+const statusCodeMap: Record<number, string> = {
+  200: "OK",
+  201: "Created",
+  202: "Accepted",
+  204: "No Content",
+  400: "Bad Request",
+  401: "Unauthorized",
+  403: "Forbidden",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  500: "Internal Server Error",
+};
+
+const mimeTypeToLanguage = (mimeType: string) => {
+  const mimeTypeMapping = {
+    "application/json": "json",
+    "text/json": "json",
+    "text/html": "html",
+    "text/css": "css",
+    "text/javascript": "javascript",
+    "application/xml": "xml",
+    "application/xhtml+xml": "xhtml",
+  };
+
+  return Object.entries(mimeTypeMapping).find(([mime]) =>
+    mimeType.includes(mime),
+  )?.[1];
+};
+
+const detectLanguage = (headers: Array<[string, string]>) => {
+  const contentType =
+    headers.find(([key, value]) => key === "Content-Type")?.[1] || "";
+  return mimeTypeToLanguage(contentType);
+};
+
+const tryParseJson = (body: string) => {
+  try {
+    return JSON.stringify(JSON.parse(body), null, 2);
+  } catch {
+    return null;
+  }
+};
+
+const sortHeadersByRelevance = (
+  headers: Array<[string, string]>,
+): Array<[string, string]> => {
+  const priorityOrder = [
+    "Content-Type",
+    "Content-Length",
+    "Authorization",
+    "X-RateLimit-Remaining",
+    "X-RateLimit-Limit",
+    "Cache-Control",
+    "ETag",
+  ].map((key) => key.toLowerCase());
+
+  return [...headers].sort(([keyA], [keyB]) => {
+    const indexA = priorityOrder.indexOf(keyA.toLowerCase());
+    const indexB = priorityOrder.indexOf(keyB.toLowerCase());
+    if (indexA === indexB) return 0;
+    if (indexA === -1) return 1;
+    if (indexB === -1) return -1;
+    return indexA - indexB;
+  });
+};
+
+export const ResponseTab = ({
+  body = "",
+  headers,
+  status,
+  time,
+  size,
+  url,
+}: {
+  body?: string;
+  headers: Array<[string, string]>;
+  status: number;
+  time: number;
+  size: number;
+  url: string;
+}) => {
+  const detectedLanguage = detectLanguage(headers);
+  const jsonContent = tryParseJson(body);
+  const beautifiedBody = jsonContent || body;
+  const [view, setView] = useState<"formatted" | "raw" | "types">(
+    jsonContent ? "formatted" : "raw",
+  );
+
+  const types = useQuery({
+    queryKey: ["types", beautifiedBody],
+    queryFn: async () => {
+      return convertToTypes(JSON.parse(beautifiedBody));
+    },
+    enabled: view === "types",
+  });
+
+  const sortedHeaders = sortHeadersByRelevance([...headers]);
+
+  return (
+    <div className="flex flex-col gap-2 h-full overflow-y-scroll max-h-[calc(100vh-220px)] py-4">
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
+          <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
+          <span className="font-semibold">Headers</span>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 pl-1.5 pt-2 font-mono text-xs">
+            {sortedHeaders.slice(0, 5).map(([key, value]) => (
+              <Fragment key={key}>
+                <div className="text-primary whitespace-pre">{key}</div>
+                <div className="break-all">{value}</div>
+              </Fragment>
+            ))}
+            {sortedHeaders.length > 5 && (
+              <Collapsible className="col-span-full grid-cols-subgrid grid">
+                <CollapsibleTrigger className="col-span-2 text-xs text-muted-foreground hover:text-primary flex items-center gap-1 py-1">
+                  <ChevronRightIcon className="h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
+                  Show {sortedHeaders.length - 5} more headers
+                </CollapsibleTrigger>
+                <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-x-8 gap-y-1 ">
+                  {sortedHeaders.slice(5).map(([key, value]) => (
+                    <Fragment key={key}>
+                      <div className="text-primary whitespace-pre">{key}</div>
+                      <div className="break-all">{value}</div>
+                    </Fragment>
+                  ))}
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Card className="shadow-none">
+        <SyntaxHighlight
+          language={
+            view === "types"
+              ? "typescript"
+              : view === "raw"
+                ? jsonContent
+                  ? "plain"
+                  : detectedLanguage
+                : "json"
+          }
+          noBackground
+          // playground dialog has h-5/6 ≈ 83.333vh
+          className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
+          code={
+            (view === "raw"
+              ? body
+              : view === "types"
+                ? types.data?.lines.join("\n")
+                : beautifiedBody) ?? ""
+          }
+        />
+      </Card>
+      <div className="flex gap-2 justify-between">
+        <div className="flex text-xs gap-2 border bg-muted rounded-md p-2 items-center h-8 font-mono divide-x">
+          <div>
+            <span className="text-muted-foreground">Status</span> {status}{" "}
+            {statusCodeMap[status] ?? ""}
+          </div>
+          <div>
+            <span className="text-muted-foreground">Time</span>{" "}
+            {time.toFixed(0)}ms
+          </div>
+          <div>
+            <span className="text-muted-foreground">Size</span> {size}B
+          </div>
+        </div>
+        {jsonContent && (
+          <div>
+            <Select
+              value={view}
+              onValueChange={(value) => setView(value as "formatted" | "raw")}
+            >
+              <SelectTrigger className="min-w-32">
+                <SelectValue placeholder="View" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="formatted">Formatted</SelectItem>
+                <SelectItem value="raw">Raw</SelectItem>
+                <SelectItem value="types">Types</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -0,0 +1,101 @@
+import { UseMutationResult } from "@tanstack/react-query";
+import { Spinner } from "../../../../components/Spinner.js";
+import { Callout } from "../../../../ui/Callout.js";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../../../ui/Card.js";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../../../ui/Tabs.js";
+import { cn } from "../../../../util/cn.js";
+import { PlaygroundResult } from "../Playground.js";
+import { RequestTab } from "./RequestTab.js";
+import { ResponseTab } from "./ResponseTab.js";
+
+export const ResultPanel = ({
+  queryMutation,
+  showPathParamsWarning,
+}: {
+  queryMutation: UseMutationResult<PlaygroundResult, Error, any, unknown>;
+  showPathParamsWarning: boolean;
+}) => {
+  const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
+  return (
+    <div className="min-w-0 p-8 bg-muted/70 overflow-y-auto">
+      {queryMutation.error ? (
+        <div className="flex flex-col gap-2">
+          {showPathParamsWarning && (
+            <Callout type="caution">
+              Some path parameters are missing values. Please fill them in to
+              ensure the request is sent correctly.
+            </Callout>
+          )}
+          <Card>
+            <CardHeader>
+              <CardTitle>Request failed</CardTitle>
+            </CardHeader>
+            <CardContent>
+              Error:{" "}
+              {queryMutation.error.message ||
+                String(queryMutation.error) ||
+                "Unexpected error"}
+            </CardContent>
+          </Card>
+        </div>
+      ) : queryMutation.data ? (
+        <div className="flex flex-col gap-2">
+          <Tabs defaultValue="response">
+            <TabsList>
+              <TabsTrigger value="request">Request</TabsTrigger>
+              <TabsTrigger value="response">
+                Response
+                <span
+                  className={cn(
+                    "text-xs font-mono ml-1",
+                    status === "2" && "text-green-500",
+                    status === "3" && "text-blue-500",
+                    status === "4" && "text-yellow-500",
+                    status === "5" && "text-red-500",
+                  )}
+                >
+                  ({queryMutation.data.status})
+                </span>
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="request">
+              <RequestTab {...queryMutation.data.request} />
+            </TabsContent>
+            <TabsContent value="response">
+              <ResponseTab
+                status={queryMutation.data.status}
+                time={queryMutation.data.time}
+                size={queryMutation.data.size}
+                headers={queryMutation.data.headers}
+                body={queryMutation.data.body}
+                url={queryMutation.data.request.url}
+              />
+            </TabsContent>
+          </Tabs>
+        </div>
+      ) : (
+        <div className="grid place-items-center h-full">
+          <span className="text-[16px] font-semibold text-muted-foreground">
+            {queryMutation.isPending ? (
+              <Spinner />
+            ) : (
+              "Send a request first to see the response here"
+            )}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ResultPanel;

package/src/lib/plugins/openapi/playground/result-panel/convertToTypes.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { generateInterface } from "./convertToTypes.js";
+
+describe("generateInterface", () => {
+  it("should handle primitive types", () => {
+    const input = {
+      string: "hello",
+      number: 42,
+      boolean: true,
+      null: null,
+    };
+
+    const expected = [
+      "{",
+      "  string: string;",
+      "  number: number;",
+      "  boolean: boolean;",
+      "  null: null;",
+      "}",
+    ].join("\n");
+
+    expect(generateInterface(input)).toBe(expected);
+  });
+
+  it("should handle nested objects", () => {
+    const input = {
+      user: {
+        name: "John",
+        age: 30,
+      },
+    };
+
+    const expected = [
+      "{",
+      "  user: {",
+      "  name: string;",
+      "  age: number;",
+      "};",
+      "}",
+    ].join("\n");
+
+    expect(generateInterface(input)).toBe(expected);
+  });
+
+  it("should handle arrays", () => {
+    const input = {
+      numbers: [1, 2, 3],
+      empty: [],
+      objects: [{ id: 1 }],
+    };
+
+    const expected = [
+      "{",
+      "  numbers: number[];",
+      "  empty: any[];",
+      "  objects: {",
+      "  id: number;",
+      "}[];",
+      "}",
+    ].join("\n");
+
+    expect(generateInterface(input)).toBe(expected);
+  });
+});

package/src/lib/plugins/openapi/playground/result-panel/convertToTypes.ts

@@ -0,0 +1,36 @@
+type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
+type JsonObject = { [key: string]: JsonValue };
+type JsonArray = JsonValue[];
+
+function inferType(value: JsonValue): string {
+  if (value === null) return "null";
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "any[]";
+    const firstValue = value[0];
+    if (firstValue === undefined) return "any[]";
+    const elementType = inferType(firstValue);
+    return `${elementType}[]`;
+  }
+  if (typeof value === "object") {
+    return generateInterface(value);
+  }
+  return typeof value;
+}
+
+export function generateInterface(obj: JsonObject, indentation = ""): string {
+  const lines: string[] = ["{"];
+
+  for (const [key, value] of Object.entries(obj)) {
+    const propertyType = inferType(value);
+    lines.push(`  ${key}: ${propertyType};`);
+  }
+
+  lines.push("}");
+  return lines.join("\n");
+}
+
+export function convertToTypes(json: JsonValue): { lines: string[] } {
+  const typeDefinition = inferType(json);
+  const lines = [`type GeneratedType = ${typeDefinition};`];
+  return { lines };
+}

package/src/lib/plugins/openapi/schema/SchemaComponents.tsx

@@ -3,7 +3,7 @@ import { ListPlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
-import { CIRCULAR_REF } from "../../../oas/parser/dereference/index.js";
+import { CIRCULAR_REF } from "../../../oas/graphql/circular.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
 import { cn } from "../../../util/cn.js";