zudoku 0.0.0-fb7d300 → 0.0.0-fc93837

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

@@ -0,0 +1,126 @@
+import { describe, expect, it } from "vitest";
+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" },
+    },
+  },
+};
+
+describe("removePaths", () => {
+  it("removes paths specified in the paths option", () => {
+    const processed = removePaths({
+      paths: {
+        "/remove-me": true,
+      },
+    })(baseDoc);
+
+    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"],
+      },
+    })(baseDoc);
+
+    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"),
+    })(baseDoc);
+
+    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"),
+    })(baseDoc);
+
+    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",
+    })(baseDoc);
+
+    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",
+    })(baseDoc);
+
+    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,
+    })(baseDoc);
+
+    expect(processed).toEqual(baseDoc);
+  });
+
+  it("removes everything if shouldRemove always returns true", () => {
+    const processed = removePaths({
+      shouldRemove: () => true,
+    })(baseDoc);
+
+    expect(processed.paths).toEqual({});
+  });
+
+  it("removes entire paths via shouldRemove callback", () => {
+    const processed = removePaths({
+      shouldRemove: ({ path, method }) =>
+        method === true && path === "/remove-me",
+    })(baseDoc);
+
+    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",
+    })(baseDoc);
+
+    expect(processed.paths["/remove-me"]).toBeDefined();
+    expect(processed.paths["/remove-me"].delete).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,55 @@
+import { type RecordAny, traverse } from "./traverse.js";
+
+interface RemovePathsOptions {
+  // Path definitions, e.g., { '/path': true, '/path-2': ['get'] }
+  paths?: Record<string, true | string[]>;
+  shouldRemove?: (options: {
+    path: string;
+    method: true | string;
+    operation: RecordAny;
+  }) => boolean;
+}
+
+export const removePaths =
+  ({ paths = {}, shouldRemove }: RemovePathsOptions) =>
+  (doc: RecordAny): RecordAny =>
+    traverse(doc, (spec) => {
+      if (!spec.paths) return spec;
+
+      const updatedPaths: RecordAny = {};
+
+      for (const [path, methods] of Object.entries(spec.paths)) {
+        const operations = spec.paths[path];
+
+        // If the path is explicitly marked for removal in `paths`
+        if (paths[path] === true) continue;
+
+        // If the path should be removed via `shouldRemove`
+        if (shouldRemove?.({ path, method: true, operation: operations }))
+          continue;
+
+        if (typeof methods === "object" && methods !== null) {
+          const filteredPath = Object.fromEntries(
+            Object.entries(methods).filter(([method]) => {
+              const operations = spec.paths[path][method];
+              const isMethodToRemove =
+                Array.isArray(paths[path]) && paths[path].includes(method);
+
+              const isMethodFiltered = shouldRemove?.({
+                path,
+                method,
+                operation: operations,
+              });
+
+              return !isMethodToRemove && !isMethodFiltered;
+            }),
+          );
+
+          updatedPaths[path] = filteredPath;
+        } else {
+          updatedPaths[path] = methods;
+        }
+      }
+
+      return { ...spec, paths: updatedPaths };
+    });

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

@@ -0,0 +1 @@
+export { traverse, type RecordAny } from "../../../util/traverse.js";

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

@@ -1,7 +1,9 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { ListPlusIcon } from "lucide-react";
+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/graphql/circular.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
 import { cn } from "../../../util/cn.js";
@@ -39,6 +41,16 @@ export const SchemaLogicalGroup = ({
   }
 };
 
+const isCircularRef = (schema: unknown): schema is string =>
+  schema === CIRCULAR_REF;
+
+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>recursive</span>
+  </div>
+);
+
 export const SchemaPropertyItem = ({
   name,
   schema,
@@ -56,12 +68,25 @@ export const SchemaPropertyItem = ({
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
+  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">
+            <code>{name}</code>
+            <RecursiveIndicator />
+          </div>
+        </div>
+      </li>
+    );
+  }
+
   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>
-          <span className="text-muted-foreground">
+          <Badge variant="muted">
             {schema.type === "array" && schema.items.type ? (
               <span>{schema.items.type}[]</span>
             ) : Array.isArray(schema.type) ? (
@@ -69,12 +94,8 @@ export const SchemaPropertyItem = ({
             ) : (
               <span>{schema.type}</span>
             )}
-          </span>
-          {group === "optional" && (
-            <span className="py-px px-1.5 font-medium border rounded-lg">
-              optional
-            </span>
-          )}
+          </Badge>
+          {group === "optional" && <Badge variant="outline">optional</Badge>}
         </div>
 
         {schema.description && (

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -5,24 +5,35 @@ export const generateSchemaExample = (
   name?: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): any => {
-  // Directly return the example or default if they exist
+  // Check for schema-level example first
   if (schema.example !== undefined) {
     return schema.example;
-  } else if (schema.examples) {
-    return Object.values(schema.examples)[0];
-  } else if (schema.default !== undefined) {
-    return schema.default;
   }
 
-  if (schema.properties || schema.type === "object") {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const example: any = {};
+  // Then check for schema-level examples
+  if (
+    schema.examples &&
+    typeof schema.examples === "object" &&
+    "default" in schema.examples
+  ) {
+    const defaultExample = schema.examples.default;
+    if (defaultExample !== null) {
+      return typeof defaultExample === "object" && "value" in defaultExample
+        ? defaultExample.value
+        : defaultExample;
+    }
+  }
+
+  // For object schemas with properties
+  if (schema.type === "object" && schema.properties) {
+    const example: Record<string, any> = {};
 
-    if (schema.properties) {
-      for (const [key, propSchema] of Object.entries(schema.properties)) {
+    for (const [key, propSchema] of Object.entries(schema.properties)) {
+      if (typeof propSchema === "object") {
         example[key] = generateSchemaExample(propSchema as SchemaObject, key);
       }
     }
+
     return example;
   }
 
@@ -31,7 +42,9 @@ export const generateSchemaExample = (
       return schema.items.map((itemSchema) =>
         generateSchemaExample(itemSchema as SchemaObject),
       );
-    } else if (schema.items) {
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- OpenAPI schemas don't always adhere to spec
+    if (schema.items) {
       return [generateSchemaExample(schema.items as SchemaObject)];
     }
     return [];
@@ -51,6 +64,8 @@ export const generateSchemaExample = (
       return true;
     case "null":
       return null;
+    case "object":
+      return {};
     case undefined:
     default:
       return {};

package/src/lib/plugins/openapi/util/methodToColor.ts

@@ -0,0 +1,27 @@
+export const TextColorMap = {
+  green: "text-green-600",
+  blue: "text-sky-600",
+  yellow: "text-yellow-600",
+  red: "text-red-600",
+  purple: "text-purple-600",
+  indigo: "text-indigo-600",
+  gray: "text-gray-600",
+};
+
+export const methodToColor = {
+  get: TextColorMap.green,
+  post: TextColorMap.blue,
+  put: TextColorMap.yellow,
+  delete: TextColorMap.red,
+  patch: TextColorMap.purple,
+  options: TextColorMap.indigo,
+  head: TextColorMap.gray,
+  trace: TextColorMap.gray,
+};
+
+export const methodForColor = (method: string) => {
+  return (
+    methodToColor[method.toLocaleLowerCase() as keyof typeof methodToColor] ??
+    TextColorMap.gray
+  );
+};

package/src/lib/plugins/openapi/util/sanitizeMarkdownForMetatag.tsx

@@ -0,0 +1,32 @@
+export function sanitizeMarkdownForMetatag(
+  description: string,
+  maxLength: number = 160,
+): string {
+  if (!description) {
+    return "";
+  }
+
+  return (
+    description
+      // Replace Markdown links [text](url) with just "text"
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+      // Remove Markdown image syntax: ![alt](url)
+      .replace(/!\[.*?\]\(.*?\)/g, "")
+      // Remove other Markdown syntax (e.g., **bold**, _italic_, `code`)
+      .replace(/[_*`~]/g, "")
+      // Remove headings (# Heading), blockquotes (> Quote), and horizontal rules (--- or ***)
+      .replace(/^(?:>|\s*#+|-{3,}|\*{3,})/gm, "")
+      // Remove any remaining formatting characters
+      .replace(/[|>{}[\]]/g, "")
+      // Collapse multiple spaces and trim the text
+      .replace(/\s+/g, " ")
+      .trim()
+      // Limit to the specified maximum length
+      .substring(0, maxLength)
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;")
+  );
+}

package/src/lib/plugins/redirect/index.tsx

@@ -1,5 +1,5 @@
-import { redirect } from "react-router-dom";
-import { ZudokuRedirect } from "../../../config/validators/validate.js";
+import { redirect } from "react-router";
+import { ZudokuRedirect } from "../../../config/validators/common.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 
 export const redirectPlugin = (options: {

package/src/lib/plugins/search-inkeep/index.tsx

@@ -1,22 +1,31 @@
-import type { InkeepWidgetBaseSettings } from "@inkeep/widgets";
-import { lazy } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 import { aiChatSettings, baseSettings } from "./inkeep.js";
 
-type PickedPluginInkeepBaseSettings =
-  | "apiKey"
-  | "integrationId"
-  | "organizationId"
-  | "primaryBrandColor"
-  | "organizationDisplayName";
+interface PluginInkeepBaseSettings {
+  apiKey?: string;
+  integrationId: string;
+  organizationId: string;
+  organizationDisplayName?: string;
+  primaryBrandColor: string;
+}
 
-type PluginInkeepBaseSettings = Pick<
-  InkeepWidgetBaseSettings,
-  PickedPluginInkeepBaseSettings
->;
+interface InkeepEmbedConfig {
+  componentType: string;
+  targetElement: HTMLElement;
+  properties: unknown;
+}
 
-const Inkeep = lazy(() => import("./InkeepCustomTrigger.js"));
+interface InkeepWidget {
+  render: (config: InkeepEmbedConfig & { isOpen: boolean }) => void;
+}
+
+declare global {
+  let Inkeep: () => {
+    embed: (config: InkeepEmbedConfig) => InkeepWidget;
+  };
+}
 
 const InkeepSearch = ({
   prefilledQuery,
@@ -29,23 +38,69 @@ const InkeepSearch = ({
   prefilledQuery?: string | null;
   settings: PluginInkeepBaseSettings;
 }) => {
-  return (
-    <Inkeep
-      isOpen={isOpen}
-      onClose={onClose}
-      baseSettings={{ ...baseSettings, ...settings }}
-      aiChatSettings={aiChatSettings}
-      searchSettings={{
-        prefilledQuery: prefilledQuery || undefined,
-      }}
-    />
+  const ref = useRef<HTMLDivElement>(null);
+  const widgetRef = useRef<InkeepWidget | null>(null);
+  const [isInkeepAvailable, setIsInkeepAvailable] = useState(
+    typeof Inkeep !== "undefined",
+  );
+
+  const config: InkeepEmbedConfig = useMemo(
+    () => ({
+      componentType: "CustomTrigger",
+      targetElement: ref.current!,
+      properties: {
+        isOpen,
+        onClose,
+        onOpen: undefined,
+        baseSettings: { ...baseSettings, ...settings },
+        searchSettings: {
+          prefilledQuery: prefilledQuery || undefined,
+        },
+        aiChatSettings,
+      },
+    }),
+    [isOpen, onClose, prefilledQuery, settings, ref],
   );
+
+  useEffect(() => {
+    if (isInkeepAvailable) return;
+
+    const checkInkeep = setInterval(() => {
+      if (typeof Inkeep !== "undefined") {
+        setIsInkeepAvailable(true);
+        clearInterval(checkInkeep);
+      }
+    }, 100);
+
+    return () => clearInterval(checkInkeep);
+  }, [isInkeepAvailable]);
+
+  useEffect(() => {
+    if (!isInkeepAvailable || widgetRef.current) return;
+
+    widgetRef.current = Inkeep().embed(config);
+  }, [config, isInkeepAvailable]);
+
+  useEffect(() => {
+    widgetRef.current?.render({ ...config, isOpen });
+  }, [config, isOpen]);
+
+  return <div ref={ref} />;
 };
 
 export const inkeepSearchPlugin = (
   settings: PluginInkeepBaseSettings,
 ): ZudokuPlugin => {
   return {
+    getHead: () => {
+      return (
+        <script
+          type="module"
+          src="https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js"
+          defer
+        />
+      );
+    },
     renderSearch: ({
       isOpen,
       onClose,

package/src/lib/plugins/search-inkeep/inkeep.ts

@@ -1,9 +1,3 @@
-import {
-  InkeepAIChatSettings,
-  InkeepModalSettings,
-  InkeepSearchSettings,
-} from "@inkeep/widgets";
-
 const baseSettings = {
   theme: {
     components: {
@@ -23,10 +17,10 @@ const baseSettings = {
   },
 } as const;
 
-const modalSettings: InkeepModalSettings = {};
+const modalSettings = {};
 
-const searchSettings: InkeepSearchSettings = {};
+const searchSettings = {};
 
-const aiChatSettings: InkeepAIChatSettings = {};
+const aiChatSettings = {};
 
 export { aiChatSettings, baseSettings, modalSettings, searchSettings };

package/src/lib/ui/Badge.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../util/cn.js";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
@@ -12,6 +12,7 @@ const badgeVariants = cva(
           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        muted: "bg-muted text-muted-foreground ",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",

package/src/lib/ui/Card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground shadow-sm",
       className,
     )}
     {...props}

package/src/lib/ui/Checkbox.tsx

@@ -1,19 +1,36 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva, type VariantProps } from "class-variance-authority";
 import { Check } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../util/cn.js";
 
+const checkboxVariants = cva(
+  "peer h-4 w-4 shrink-0 rounded-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary",
+  {
+    variants: {
+      variant: {
+        default: "border border-primary data-[state=checked]:bg-primary",
+        outline: "border border-input data-[state=checked]:bg-accent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+    VariantProps<typeof checkboxVariants> {}
+
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+  CheckboxProps
+>(({ className, variant, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
-    )}
+    className={cn(checkboxVariants({ variant, className }))}
     {...props}
   >
     <CheckboxPrimitive.Indicator
@@ -25,4 +42,4 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox };
+export { Checkbox, type CheckboxProps };

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}