zudoku 0.26.0 → 0.27.0

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/post-processors/removeExtensions.test.ts

@@ -4,28 +4,34 @@ import { removeExtensions } from "./removeExtensions.js";
 const baseDoc = {
   openapi: "3.1.0",
   "x-root-ext": "remove me",
+  "x-zuplo-ext": "remove me too",
   info: {
     title: "Test API",
     version: "1.0.0",
     "x-info-ext": "remove me",
+    "x-zuplo-info": "remove me too",
   },
   paths: {
     "/test": {
       "x-path-ext": "remove me",
+      "x-zuplo-path": "remove me too",
       parameters: [
         {
           name: "param1",
           in: "query",
           schema: { type: "string" },
           "x-param-ext": "remove me",
+          "x-zuplo-param": "remove me too",
         },
       ],
       get: {
         "x-operation-ext": "remove me",
+        "x-zuplo-route": "remove me too",
         responses: {
           "200": {
             description: "OK",
             "x-response-ext": "remove me",
+            "x-zuplo-response": "remove me too",
           },
         },
         parameters: [
@@ -34,6 +40,7 @@ const baseDoc = {
             in: "header",
             schema: { type: "string" },
             "x-op-param-ext": "remove me",
+            "x-zuplo-param": "remove me too",
           },
         ],
       },
@@ -43,6 +50,7 @@ const baseDoc = {
     {
       name: "example",
       "x-tag-ext": "remove me",
+      "x-zuplo-tag": "remove me too",
     },
   ],
   components: {
@@ -52,6 +60,7 @@ const baseDoc = {
         name: "api_key",
         in: "header",
         "x-security-ext": "remove me",
+        "x-zuplo-security": "remove me too",
       },
     },
   },
@@ -141,4 +150,53 @@ describe("removeExtensions", () => {
 
     expect(processed).toEqual(docWithoutExtensions);
   });
+
+  it("removes extensions based on shouldRemove callback", () => {
+    const processed = removeExtensions({
+      shouldRemove: (key) => key.startsWith("x-zuplo"),
+    })(baseDoc);
+
+    // Should remove x-zuplo extensions
+    const removedExtensions = [
+      "x-zuplo-ext",
+      "info.x-zuplo-info",
+      "paths./test.x-zuplo-path",
+      "paths./test.parameters.0.x-zuplo-param",
+      "paths./test.get.x-zuplo-route",
+      "paths./test.get.responses.200.x-zuplo-response",
+      "paths./test.get.parameters.0.x-zuplo-param",
+      "tags.0.x-zuplo-tag",
+      "components.securitySchemes.ApiKeyAuth.x-zuplo-security",
+    ];
+
+    // Should keep other x- extensions
+    const keptExtensions = [
+      "x-root-ext",
+      "info.x-info-ext",
+      "paths./test.x-path-ext",
+      "paths./test.parameters.0.x-param-ext",
+      "paths./test.get.x-operation-ext",
+      "paths./test.get.responses.200.x-response-ext",
+      "paths./test.get.parameters.0.x-op-param-ext",
+      "tags.0.x-tag-ext",
+      "components.securitySchemes.ApiKeyAuth.x-security-ext",
+    ];
+
+    removedExtensions.forEach((ext) => {
+      expect(processed).not.toHaveProperty(ext.split("."));
+    });
+
+    keptExtensions.forEach((ext) => {
+      expect(processed).toHaveProperty(ext.split("."));
+    });
+
+    // Assert that non-x- fields remain unchanged
+    expect(processed).toHaveProperty("openapi", "3.1.0");
+    expect(processed).toHaveProperty("info.title", "Test API");
+    expect(processed).toHaveProperty(
+      "paths./test.get.responses.200.description",
+      "OK",
+    );
+    expect(processed).toHaveProperty("tags.0.name", "example");
+  });
 });

package/src/lib/plugins/openapi/post-processors/removeExtensions.ts

@@ -2,21 +2,24 @@ import { type RecordAny, traverse } from "./traverse.js";
 
 interface RemoveExtensionsOptions {
   keys?: string[];
+  shouldRemove?: (key: string) => boolean;
 }
 
 // Remove all `x-` prefixed key/value pairs, or filter by names if provided
 export const removeExtensions =
-  ({ keys }: RemoveExtensionsOptions = {}) =>
+  ({ keys, shouldRemove }: RemoveExtensionsOptions = {}) =>
   (doc: RecordAny): RecordAny =>
     traverse(doc, (spec) => {
       const result: RecordAny = {};
 
       for (const [key, value] of Object.entries(spec)) {
         const isExtension = key.startsWith("x-");
-        const shouldRemove =
-          isExtension && (keys === undefined || keys.includes(key));
+        const shouldBeRemoved =
+          isExtension &&
+          (keys === undefined || keys.includes(key)) &&
+          (!shouldRemove || shouldRemove(key));
 
-        if (shouldRemove) continue;
+        if (shouldBeRemoved) continue;
 
         result[key] = value;
       }

package/src/lib/plugins/openapi/post-processors/removeParameters.test.ts

@@ -0,0 +1,148 @@
+import { type OpenAPIV3_1 } from "openapi-types";
+import { describe, expect, it } from "vitest";
+import { removeParameters } from "./removeParameters.js";
+
+const baseDoc: OpenAPIV3_1.Document = {
+  openapi: "3.1.0",
+  info: {
+    title: "Test API",
+    version: "1.0.0",
+  },
+  components: {
+    parameters: {
+      commonParam: {
+        name: "commonParam",
+        in: "query",
+        schema: { type: "string" },
+      },
+      headerParam: {
+        name: "headerParam",
+        in: "header",
+        schema: { type: "string" },
+      },
+    },
+  },
+  paths: {
+    "/test": {
+      parameters: [
+        {
+          name: "pathParam",
+          in: "path",
+          schema: { type: "string" },
+          required: true,
+        },
+        {
+          name: "pathHeader",
+          in: "header",
+          schema: { type: "string" },
+          required: true,
+        },
+      ],
+      get: {
+        parameters: [
+          {
+            name: "opParam",
+            in: "query",
+            schema: { type: "string" },
+            required: true,
+          },
+          {
+            name: "opHeader",
+            in: "header",
+            schema: { type: "string" },
+            required: true,
+          },
+        ],
+        responses: {
+          "200": {
+            description: "OK",
+          },
+        },
+      },
+    },
+  },
+};
+
+describe("removeParameters", () => {
+  it("removes parameters by name", () => {
+    const processed = removeParameters({
+      names: ["pathParam", "opParam"],
+    })(baseDoc);
+
+    expect(processed.paths["/test"].parameters).toHaveLength(1);
+    expect(processed.paths["/test"].parameters[0].name).toBe("pathHeader");
+    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
+    expect(processed.paths["/test"].get.parameters[0].name).toBe("opHeader");
+  });
+
+  it("removes parameters by location", () => {
+    const processed = removeParameters({
+      in: ["header"],
+    })(baseDoc);
+
+    expect(processed.paths["/test"].parameters).toHaveLength(1);
+    expect(processed.paths["/test"].parameters[0].in).toBe("path");
+    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
+    expect(processed.paths["/test"].get.parameters[0].in).toBe("query");
+  });
+
+  it("removes parameters using shouldRemove callback", () => {
+    const processed = removeParameters({
+      shouldRemove: ({ parameter }) =>
+        parameter.in === "header" && parameter.name.includes("op"),
+    })(baseDoc);
+
+    expect(processed.paths["/test"].parameters).toHaveLength(2);
+    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
+    expect(processed.paths["/test"].get.parameters[0].name).toBe("opParam");
+  });
+
+  it("combines multiple removal criteria", () => {
+    const processed = removeParameters({
+      in: ["query", "header"],
+      shouldRemove: ({ parameter }) => parameter.name === "pathHeader",
+    })(baseDoc);
+
+    expect(processed.paths["/test"].parameters).toHaveLength(1);
+    expect(processed.paths["/test"].parameters[0].name).toBe("pathParam");
+    expect(processed.paths["/test"].get.parameters).toHaveLength(0);
+  });
+
+  it("handles missing parameters arrays", () => {
+    const docWithoutParams = {
+      openapi: "3.1.0",
+      paths: {
+        "/test": {
+          get: {
+            summary: "Test endpoint",
+          },
+        },
+      },
+    };
+
+    const processed = removeParameters({
+      names: ["someParam"],
+    })(docWithoutParams);
+
+    expect(processed).toEqual(docWithoutParams);
+  });
+
+  it("preserves non-parameter properties", () => {
+    const processed = removeParameters({
+      names: ["globalParam"],
+    })(baseDoc);
+
+    expect(processed.openapi).toBe("3.1.0");
+    expect(processed.paths["/test"].get).toBeDefined();
+  });
+
+  it("removes parameters from components", () => {
+    const processed = removeParameters({
+      in: ["header"],
+    })(baseDoc);
+
+    expect(Object.keys(processed.components.parameters)).toHaveLength(1);
+    expect(processed.components.parameters.commonParam).toBeDefined();
+    expect(processed.components.parameters.headerParam).toBeUndefined();
+  });
+});

package/src/lib/plugins/openapi/post-processors/removeParameters.ts

@@ -0,0 +1,101 @@
+import { type RecordAny, traverse } from "./traverse.js";
+
+interface RemoveParametersOptions {
+  // Names of parameters to remove
+  names?: string[];
+  // Specific locations to remove parameters from ('query', 'header', 'path', 'cookie')
+  in?: string[];
+  // Custom filter function
+  shouldRemove?: ({ parameter }: { parameter: RecordAny }) => boolean;
+}
+
+export const removeParameters =
+  ({ names, in: locations, shouldRemove }: RemoveParametersOptions = {}) =>
+  (doc: RecordAny): RecordAny =>
+    traverse(doc, (spec) => {
+      // Helper function to filter parameters
+      const filterParameters = (parameters: RecordAny[]) =>
+        parameters.filter((p) => {
+          if (names?.includes(p.name)) return false;
+          if (locations?.includes(p.in)) return false;
+          if (shouldRemove?.({ parameter: p })) return false;
+          return true;
+        });
+
+      // Handle components.parameters
+      if (spec.components?.parameters) {
+        spec = {
+          ...spec,
+          components: {
+            ...spec.components,
+            parameters: Object.fromEntries(
+              Object.entries(spec.components.parameters).filter(
+                ([_, param]) => {
+                  const p = param as RecordAny;
+                  if (p.$ref) return true; // Skip references
+                  return (
+                    !names?.includes(p.name) &&
+                    !locations?.includes(p.in) &&
+                    !shouldRemove?.({ parameter: p })
+                  );
+                },
+              ),
+            ),
+          },
+        };
+      }
+
+      // Handle paths
+      if (spec.paths) {
+        const updatedPaths: RecordAny = {};
+
+        for (const [path, pathItem] of Object.entries(spec.paths)) {
+          if (typeof pathItem !== "object" || pathItem === null) {
+            updatedPaths[path] = pathItem;
+            continue;
+          }
+
+          let updatedPathItem = { ...pathItem };
+
+          // Handle path-level parameters
+          if (
+            "parameters" in updatedPathItem &&
+            Array.isArray(updatedPathItem.parameters)
+          ) {
+            updatedPathItem.parameters = filterParameters(
+              updatedPathItem.parameters,
+            );
+          }
+
+          // Handle operation-level parameters
+          for (const method of Object.keys(updatedPathItem)) {
+            const pathItemWithMethods = updatedPathItem as Record<
+              string,
+              RecordAny
+            >;
+
+            if (
+              method === "parameters" ||
+              typeof pathItemWithMethods[method] !== "object"
+            ) {
+              continue;
+            }
+
+            const operation = pathItemWithMethods[method];
+            if (Array.isArray(operation.parameters)) {
+              pathItemWithMethods[method] = {
+                ...operation,
+                parameters: filterParameters(operation.parameters),
+              };
+              updatedPathItem = pathItemWithMethods;
+            }
+          }
+
+          updatedPaths[path] = updatedPathItem;
+        }
+
+        spec = { ...spec, paths: updatedPaths };
+      }
+
+      return spec;
+    });

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";

package/src/lib/ui/Command.tsx

@@ -52,6 +52,25 @@ const CommandInput = React.forwardRef<
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
+const CommandInlineInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line react/no-unknown-property
+  <div className="flex items-center" cmdk-input-wrapper="">
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInlineInput.displayName = CommandPrimitive.Input.displayName;
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
@@ -143,6 +162,7 @@ export {
   CommandDialog,
   CommandEmpty,
   CommandGroup,
+  CommandInlineInput,
   CommandInput,
   CommandItem,
   CommandList,

package/src/lib/ui/Select.tsx

@@ -83,9 +83,9 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
           position === "popper" &&
             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+          "divide-y",
         )}
       >
         {children}

package/src/lib/util/MdxComponents.tsx

@@ -61,7 +61,7 @@ export const MdxComponents = {
   code: ({ className, children, ...props }) => {
     // `inline` provided by the rehype plugin, as react-markdown removed support for that
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const inline = (props as any).inline;
+    const { inline, title } = props as Record<string, unknown>;
 
     if (inline === true || inline === "true") {
       return <InlineCode className={className}>{children}</InlineCode>;
@@ -75,6 +75,7 @@ export const MdxComponents = {
         className="rounded-xl p-4 border dark:!bg-foreground/10 dark:border-transparent"
         showLanguageIndicator
         code={String(children).trim()}
+        title={typeof title === "string" ? title : undefined}
       />
     );
   },