zudoku 0.0.0-ec30b50 → 0.0.0-edd80c1

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

@@ -1,3 +1,5 @@
+import type { ProcessorArg } from "../../../../config/validators/BuildSchema.js";
+import type { OpenAPIDocument } from "../../../oas/parser/index.js";
 import { type RecordAny, traverse } from "./traverse.js";
 
 interface RemoveParametersOptions {
@@ -11,8 +13,8 @@ interface RemoveParametersOptions {
 
 export const removeParameters =
   ({ names, in: locations, shouldRemove }: RemoveParametersOptions = {}) =>
-  (doc: RecordAny): RecordAny =>
-    traverse(doc, (spec) => {
+  ({ schema }: ProcessorArg) =>
+    traverse(schema, (spec) => {
       // Helper function to filter parameters
       const filterParameters = (parameters: RecordAny[]) =>
         parameters.filter((p) => {
@@ -98,4 +100,4 @@ export const removeParameters =
       }
 
       return spec;
-    });
+    }) as OpenAPIDocument;

package/src/lib/plugins/openapi/processors/removePaths.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, it } from "vitest";
+import type { OpenAPIDocument } from "../../../oas/parser/index.js";
+import { removePaths } from "./removePaths.js";
+
+const baseDoc = {
+  openapi: "3.0.3",
+  paths: {
+    "/example": {
+      get: { summary: "Get example" },
+      post: { summary: "Post example" },
+    },
+    "/remove-me": {
+      delete: { summary: "Delete example" },
+    },
+    "/another": {
+      get: { summary: "Another example" },
+    },
+  },
+} as unknown as OpenAPIDocument;
+
+describe("removePaths", () => {
+  it("removes paths specified in the paths option", () => {
+    const processed = removePaths({
+      paths: {
+        "/remove-me": true,
+      },
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/remove-me"]).toBeUndefined();
+    expect(processed.paths?.["/example"]).toBeDefined();
+    expect(processed.paths?.["/another"]).toBeDefined();
+  });
+
+  it("removes specific methods in the paths option", () => {
+    const processed = removePaths({
+      paths: {
+        "/example": ["get"],
+      },
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/example"]?.get).toBeUndefined();
+    expect(processed.paths?.["/example"]?.post).toBeDefined();
+    expect(processed.paths?.["/remove-me"]).toBeDefined();
+  });
+
+  it("removes paths and methods using paths and shouldRemove together", () => {
+    const processed = removePaths({
+      paths: {
+        "/example": ["post"],
+      },
+      shouldRemove: ({ path }) => path.startsWith("/remove"),
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/remove-me"]).toBeUndefined();
+    expect(processed.paths?.["/example"]?.get).toBeDefined();
+    expect(processed.paths?.["/example"]?.post).toBeUndefined();
+    expect(processed.paths?.["/another"]).toBeDefined();
+  });
+
+  it("removes paths based on shouldRemove callback", () => {
+    const processed = removePaths({
+      shouldRemove: ({ path }) => path.startsWith("/remove"),
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/remove-me"]).toBeUndefined();
+    expect(processed.paths?.["/example"]).toBeDefined();
+    expect(processed.paths?.["/another"]).toBeDefined();
+  });
+
+  it("removes methods based on shouldRemove callback", () => {
+    const processed = removePaths({
+      shouldRemove: ({ method }) => method === "post",
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/example"]?.post).toBeUndefined();
+    expect(processed.paths?.["/example"]?.get).toBeDefined();
+    expect(processed.paths?.["/remove-me"]).toBeDefined();
+  });
+
+  it("removes both paths and methods based on shouldRemove callback", () => {
+    const processed = removePaths({
+      shouldRemove: ({ path, method }) =>
+        path.startsWith("/remove") || method === "post",
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/remove-me"]).toBeUndefined();
+    expect(processed.paths?.["/example"]?.post).toBeUndefined();
+    expect(processed.paths?.["/example"]?.get).toBeDefined();
+    expect(processed.paths?.["/another"]).toBeDefined();
+  });
+
+  it("does nothing if shouldRemove always returns false", () => {
+    const processed = removePaths({
+      shouldRemove: () => false,
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed).toEqual(baseDoc);
+  });
+
+  it("removes everything if shouldRemove always returns true", () => {
+    const processed = removePaths({
+      shouldRemove: () => true,
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths).toEqual({});
+  });
+
+  it("removes entire paths via shouldRemove callback", () => {
+    const processed = removePaths({
+      shouldRemove: ({ path, method }) =>
+        method === true && path === "/remove-me",
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/remove-me"]).toBeUndefined();
+    expect(processed.paths?.["/example"]).toBeDefined();
+    expect(processed.paths?.["/another"]).toBeDefined();
+  });
+
+  it("removes specific methods while keeping paths", () => {
+    const processed = removePaths({
+      shouldRemove: ({ method }) => method === "delete",
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/remove-me"]).toBeDefined();
+    expect(processed.paths?.["/remove-me"]?.delete).toBeUndefined();
+  });
+});

package/src/lib/plugins/openapi/{post-processors → processors}/removePaths.ts

@@ -1,3 +1,5 @@
+import type { ProcessorArg } from "../../../../config/validators/BuildSchema.js";
+import type { OpenAPIDocument } from "../../../oas/parser/index.js";
 import { type RecordAny, traverse } from "./traverse.js";
 
 interface RemovePathsOptions {
@@ -12,8 +14,8 @@ interface RemovePathsOptions {
 
 export const removePaths =
   ({ paths = {}, shouldRemove }: RemovePathsOptions) =>
-  (doc: RecordAny): RecordAny =>
-    traverse(doc, (spec) => {
+  ({ schema }: ProcessorArg) =>
+    traverse(schema, (spec) => {
       if (!spec.paths) return spec;
 
       const updatedPaths: RecordAny = {};
@@ -52,4 +54,4 @@ export const removePaths =
       }
 
       return { ...spec, paths: updatedPaths };
-    });
+    }) as OpenAPIDocument;

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

@@ -15,14 +15,12 @@ export const LogicalGroup = ({
   schemas,
   type,
   isOpen,
-  level,
   toggleOpen,
 }: {
   schemas: SchemaObject[];
   type: LogicalGroupType;
   isOpen: boolean;
   toggleOpen: () => void;
-  level: number;
 }) => (
   <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
     <Card className="px-6">
@@ -34,12 +32,7 @@ export const LogicalGroup = ({
       <Collapsible.Content className="pb-4">
         {schemas.map((subSchema, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <LogicalGroupItem
-            key={index}
-            type={type}
-            schema={subSchema}
-            level={level}
-          />
+          <LogicalGroupItem key={index} type={type} schema={subSchema} />
         ))}
       </Collapsible.Content>
     </Card>

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupConnector.tsx

@@ -24,10 +24,12 @@ export const LogicalGroupConnector = ({
   type,
   isOpen,
   className,
+  schemeName,
 }: {
   type: LogicalGroupType;
   isOpen: boolean;
   className?: string;
+  schemeName?: string;
 }) => {
   return (
     <div
@@ -48,6 +50,7 @@ export const LogicalGroupConnector = ({
         >
           <ChevronDownIcon size={16} />
         </div>
+        <span className="text-sm text-foreground">{schemeName}</span>
       </div>
     </div>
   );

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupItem.tsx

@@ -8,7 +8,6 @@ import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
 export const LogicalGroupItem = (props: {
   type: LogicalGroupType;
   schema: SchemaObject;
-  level: number;
 }) => {
   const [isOpen, setIsOpen] = useState(true);
 
@@ -19,11 +18,15 @@ export const LogicalGroupItem = (props: {
       className="group"
     >
       <Collapsible.Trigger>
-        <LogicalGroupConnector type={props.type} isOpen={isOpen} />
+        <LogicalGroupConnector
+          type={props.type}
+          isOpen={isOpen}
+          schemeName={props.schema.title}
+        />
       </Collapsible.Trigger>
       {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
       <Collapsible.Content>
-        <SchemaView schema={props.schema} level={props.level + 1} />
+        <SchemaView schema={props.schema} />
       </Collapsible.Content>
     </Collapsible.Root>
   );

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

@@ -0,0 +1,39 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
+
+export const SchemaExampleAndDefault = ({
+  schema,
+}: {
+  schema: SchemaObject;
+}) => {
+  const example = schema.examples?.at(0);
+  const defaultValue = schema.default;
+
+  if (!example && !defaultValue) return null;
+
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      {example && (
+        <div>
+          <span className="text-muted-foreground">Example: </span>
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
+            {typeof example === "object" || typeof example === "boolean"
+              ? JSON.stringify(example)
+              : example}
+          </SelectOnClick>
+        </div>
+      )}
+      {defaultValue && (
+        <div>
+          <span className="text-muted-foreground">Default: </span>
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
+            {typeof defaultValue === "object" ||
+            typeof defaultValue === "boolean"
+              ? JSON.stringify(defaultValue)
+              : defaultValue}
+          </SelectOnClick>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -1,28 +1,30 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { ListPlusIcon, RefreshCcwDotIcon } from "lucide-react";
+import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
-import { Badge } from "zudoku/ui/Badge.js";
+import { InlineCode } from "../../../components/InlineCode.js";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
 import { cn } from "../../../util/cn.js";
 import { objectEntries } from "../../../util/objectEntries.js";
+import { ConstValue } from "../components/ConstValue.js";
+import { EnumValues } from "../components/EnumValues.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
+import { ParamInfos } from "../ParamInfos.js";
 import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
+import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
+  extractCircularRefInfo,
   hasLogicalGroupings,
+  isArrayCircularRef,
+  isArrayType,
   isCircularRef,
   isComplexType,
   LogicalSchemaTypeMap,
 } from "./utils.js";
 
-export const SchemaLogicalGroup = ({
-  schema,
-  level,
-}: {
-  schema: SchemaObject;
-  level: number;
-}) => {
+export const SchemaLogicalGroup = ({ schema }: { schema: SchemaObject }) => {
   const [isOpen, setIsOpen] = useState(true);
   const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
 
@@ -35,31 +37,31 @@ export const SchemaLogicalGroup = ({
         type={type}
         isOpen={isOpen}
         toggleOpen={toggleOpen}
-        level={level}
       />
     );
   }
 };
 
-const RecursiveIndicator = () => (
-  <div className="flex items-center gap-2 italic text-sm text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
-    <RefreshCcwDotIcon size={16} />
-    <span>circular</span>
-  </div>
+const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
+  <InlineCode
+    className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
+    selectOnClick={false}
+  >
+    <RefreshCcwDotIcon size={13} />
+    <span>{circularProp ? `${circularProp} (circular)` : "circular"}</span>
+  </InlineCode>
 );
 
 export const SchemaPropertyItem = ({
   name,
   schema,
   group,
-  level,
   defaultOpen = false,
   showCollapseButton = true,
 }: {
   name: string;
   schema: SchemaObject;
   group: "required" | "optional" | "deprecated";
-  level: number;
   defaultOpen?: boolean;
   showCollapseButton?: boolean;
 }) => {
@@ -68,46 +70,64 @@ export const SchemaPropertyItem = ({
   if (isCircularRef(schema)) {
     return (
       <li className="p-4 bg-border/20 hover:bg-border/30">
-        <div className="flex flex-col gap-1 justify-between text-sm">
-          <div className="flex gap-2 items-center">
+        <div className="flex flex-col gap-2.5 justify-between text-sm">
+          <div className="space-x-2 rtl:space-x-reverse">
             <code>{name}</code>
-            <Badge variant="muted">object</Badge>
-            {group === "optional" && <Badge variant="outline">optional</Badge>}
-            <RecursiveIndicator />
+            <ParamInfos
+              schema={schema}
+              extraItems={[<RecursiveIndicator key="circular-ref" />]}
+            />
           </div>
+          <SchemaExampleAndDefault schema={schema} />
         </div>
       </li>
     );
   }
 
+  const isCollapsible = Boolean(
+    (hasLogicalGroupings(schema) ||
+      isComplexType(schema) ||
+      (isArrayType(schema) &&
+        "items" in schema &&
+        isComplexType(schema.items)) ||
+      schema.additionalProperties) &&
+      !isArrayCircularRef(schema),
+  );
+
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
-      <div className="flex flex-col gap-1 justify-between text-sm">
-        <div className="flex gap-2 items-center">
-          <code>{name}</code>
-          <Badge variant="muted">
-            {schema.type === "array" && schema.items.type ? (
-              <span>{schema.items.type}[]</span>
-            ) : Array.isArray(schema.type) ? (
-              <span>{schema.type.join(" | ")}</span>
-            ) : (
-              <span>{schema.type}</span>
-            )}
-          </Badge>
-          {group === "optional" && <Badge variant="outline">optional</Badge>}
-          {schema.type === "array" &&
-            "items" in schema &&
-            isCircularRef(schema.items) && <RecursiveIndicator />}
+      <div className="flex flex-col gap-2.5 justify-between text-sm">
+        <div className="space-x-2 rtl:space-x-reverse">
+          <SelectOnClick asChild>
+            <code>{name}</code>
+          </SelectOnClick>
+          <ParamInfos
+            schema={schema}
+            extraItems={[
+              group !== "optional" && (
+                <span className="text-primary">required</span>
+              ),
+              isArrayCircularRef(schema) && (
+                <RecursiveIndicator
+                  circularProp={extractCircularRefInfo(schema.items)}
+                />
+              ),
+            ]}
+          />
         </div>
-
         {schema.description && (
           <Markdown
             className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
             content={schema.description}
           />
         )}
-
-        {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
+        {schema.type === "array" && "items" in schema && schema.items.enum && (
+          <EnumValues values={schema.items.enum} />
+        )}
+        {schema.const && <ConstValue schema={schema} hideDescription />}
+        {schema.enum && <EnumValues values={schema.enum} />}
+        <SchemaExampleAndDefault schema={schema} />
+        {isCollapsible && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
             open={isOpen}
@@ -115,32 +135,21 @@ export const SchemaPropertyItem = ({
           >
             {showCollapseButton && (
               <Collapsible.Trigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="mt-2 flex gap-1.5"
-                >
-                  <ListPlusIcon size={18} />
-                  {!isOpen
-                    ? "Show nested properties"
-                    : "Hide nested properties"}
+                <Button variant="expand" size="sm">
+                  {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
+                  {!isOpen ? "Show properties" : "Hide properties"}
                 </Button>
               </Collapsible.Trigger>
             )}
             <Collapsible.Content>
               <div className="mt-2">
                 {hasLogicalGroupings(schema) ? (
-                  <SchemaLogicalGroup schema={schema} level={level + 1} />
+                  <SchemaLogicalGroup schema={schema} />
                 ) : schema.type === "object" ? (
-                  <SchemaView schema={schema} level={level + 1} />
-                ) : (
-                  schema.type === "array" &&
-                  "items" in schema &&
-                  typeof schema.items === "object" &&
-                  !isCircularRef(schema.items) && (
-                    <SchemaView schema={schema.items} level={level + 1} />
-                  )
-                )}
+                  <SchemaView schema={schema} />
+                ) : isArrayType(schema) && "items" in schema ? (
+                  <SchemaView schema={schema.items} />
+                ) : null}
               </div>
             </Collapsible.Content>
           </Collapsible.Root>