zudoku 0.26.0 → 0.26.1

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

@@ -1,4 +1,3 @@
-import { EraserIcon } from "lucide-react";
 import {
   Control,
   Controller,
@@ -7,16 +6,10 @@ import {
 } from "react-hook-form";
 import { Card } from "zudoku/ui/Card.js";
 import { Checkbox } from "zudoku/ui/Checkbox.js";
-import { Button } from "../../../ui/Button.js";
+import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Input } from "../../../ui/Input.js";
-import { cn } from "../../../util/cn.js";
-import { EnumSelector } from "./EnumSelector.js";
 import { InlineInput } from "./InlineInput.js";
-import {
-  NO_IDENTITY,
-  type PlaygroundForm,
-  type QueryParam,
-} from "./Playground.js";
+import { type PlaygroundForm, type QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
   control,
@@ -33,127 +26,101 @@ export const QueryParams = ({
 
   const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
 
-  const selectedIdentity = form.watch("identity");
-  const hasSelectedIdentity = selectedIdentity !== NO_IDENTITY;
-
   return (
     <Card className="rounded-lg">
-      <table className="w-full">
-        <tbody>
-          {fields
-            .filter(
-              // TODO remove this hack for Accu or make it more generic
-              (field) => !(hasSelectedIdentity && field.name === "apikey"),
-            )
-            .map((field, i) => {
-              const currentParam = queryParams.find(
-                (param) => param.name === field.name,
-              );
-              return (
-                <tr key={field.id} className="hover:bg-accent/40">
-                  <td className="w-5/12 flex items-center ps-3">
-                    <Controller
-                      control={control}
-                      name={`queryParams.${i}.active`}
-                      render={({ field }) => (
-                        <Checkbox
-                          variant="outline"
-                          id={`queryParams.${i}.active`}
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      )}
-                    />
-                    <Controller
-                      control={control}
-                      render={({ field }) => (
-                        <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="w-full ">
+        {fields.map((field, i) => {
+          const currentParam = queryParams.find(
+            (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"
                     />
-                  </td>
-                  <td className="w-7/12">
-                    <div className="flex justify-between items-center">
-                      <Controller
-                        control={control}
-                        render={({ field }) => {
-                          const hasEnum =
-                            currentParam?.enum && currentParam.enum.length > 0;
+                  ) : (
+                    <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`}
+              />
 
-                          if (!hasEnum) {
-                            return (
-                              <Input
-                                {...field}
-                                onChange={(e) => {
-                                  field.onChange(e.target.value);
-                                  if (e.target.value.length > 0) {
-                                    form.setValue(
-                                      `queryParams.${i}.active`,
-                                      true,
-                                    );
-                                  }
-                                }}
-                                placeholder="Enter value"
-                                className="w-full border-0 shadow-none text-xs font-mono hover:bg-accent"
-                              />
-                            );
-                          }
+              <div className="flex justify-between items-center">
+                <Controller
+                  control={control}
+                  render={({ field }) => {
+                    const hasEnum =
+                      currentParam?.enum && currentParam.enum.length > 0;
 
-                          const enumValues = currentParam.enum ?? [];
+                    if (!hasEnum) {
+                      return (
+                        <Input
+                          {...field}
+                          onChange={(e) => {
+                            field.onChange(e.target.value);
+                            if (e.target.value.length > 0) {
+                              form.setValue(`queryParams.${i}.active`, true);
+                            }
+                          }}
+                          placeholder="Enter value"
+                          className="w-full border-0 shadow-none text-xs font-mono"
+                        />
+                      );
+                    }
 
-                          return (
-                            <EnumSelector
-                              value={field.value}
-                              enumValues={enumValues}
-                              onChange={field.onChange}
-                              onValueSelected={() => {
-                                form.setValue(`queryParams.${i}.active`, true);
-                              }}
-                            />
-                          );
+                    return (
+                      <Autocomplete
+                        value={field.value}
+                        options={currentParam.enum ?? []}
+                        onChange={(e) => {
+                          field.onChange(e);
+                          form.setValue(`queryParams.${i}.active`, true);
                         }}
-                        name={`queryParams.${i}.value`}
-                      />
-                      <Controller
-                        control={control}
-                        render={({ field }) => (
-                          <Button
-                            size="icon"
-                            type="button"
-                            variant="ghost"
-                            aria-label="Clear value"
-                            className={cn(
-                              "ms-2 mr-1",
-                              field.value.length === 0
-                                ? "opacity-0 pointer-events-none"
-                                : "opacity-100",
-                            )}
-                            title="Clear value"
-                            onClick={() => field.onChange("")}
-                          >
-                            <EraserIcon size={16} />
-                          </Button>
-                        )}
-                        name={`queryParams.${i}.value`}
+                        className="font-mono text-xs border-0 ring-1 ring-ring"
                       />
-                    </div>
-                  </td>
-                </tr>
-              );
-            })}
-        </tbody>
-      </table>
+                    );
+                  }}
+                  name={`queryParams.${i}.value`}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </Card>
   );
 };

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/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 focus-visible:ring-1 focus-visible:ring-ring 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,