zudoku 0.3.0-dev.11 → 0.3.0-dev.110

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -1,22 +1,19 @@
-import { PlaygroundForm } from "./Playground.js";
+import type { PlaygroundForm } from "./Playground.js";
 
 export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
-  const url = new URL(
-    host +
-      path
-        .split("/")
-        .map((v) =>
-          v.startsWith("{") && v.endsWith("}")
-            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
-                ?.value ?? v
-            : v,
-        )
-        .join("/"),
+  const filledPath = path.replace(
+    /\{(\w+)}/g,
+    (_, key) =>
+      data.pathParams.find((part) => part.name === key)?.value || `{${key}}`,
   );
 
-  data.queryParams.forEach((param) => {
-    url.searchParams.set(param.name, param.value);
-  });
+  const url = new URL(filledPath, host);
+
+  data.queryParams
+    .filter((param) => param.active)
+    .forEach((param) => {
+      url.searchParams.set(param.name, param.value);
+    });
 
   return url;
 };

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

@@ -0,0 +1,7 @@
+import { ProseClasses } from "../../../components/Markdown.js";
+import { cn } from "../../../util/cn.js";
+
+export const SchemaProseClasses = cn(
+  ProseClasses,
+  "max-w-full prose-img:max-w-prose",
+);

package/src/lib/plugins/openapi-worker.ts

@@ -1 +1 @@
-export { createSharedWorkerClient } from "./openapi/worker/createSharedWorkerClient.js";
+export { createClient } from "./openapi/client/createWorkerClient.js";

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

@@ -1,10 +1,9 @@
-import { Navigate } from "react-router-dom";
+import { redirect } from "react-router-dom";
 import type { DevPortalPlugin } from "../../core/plugins.js";
 
 export type Redirect = {
   from: string;
   to: string;
-  replace?: boolean;
 };
 
 export const redirectPlugin = (options: {
@@ -12,9 +11,9 @@ export const redirectPlugin = (options: {
 }): DevPortalPlugin => {
   return {
     getRoutes: () =>
-      options.redirects.map(({ from, to, replace }) => ({
+      options.redirects.map(({ from, to }) => ({
         path: from,
-        element: <Navigate to={to} replace={replace} />,
+        loader: () => redirect(to),
       })),
   };
 };

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

@@ -0,0 +1,3 @@
+import { InkeepCustomTrigger } from "@inkeep/widgets";
+
+export default InkeepCustomTrigger;

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

@@ -0,0 +1,63 @@
+import type { InkeepWidgetBaseSettings } from "@inkeep/widgets";
+import { lazy } from "react";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import type { DevPortalPlugin } from "../../core/plugins.js";
+import { aiChatSettings, baseSettings } from "./inkeep.js";
+
+type PickedPluginInkeepBaseSettings =
+  | "apiKey"
+  | "integrationId"
+  | "organizationId"
+  | "primaryBrandColor"
+  | "organizationDisplayName";
+
+type PluginInkeepBaseSettings = Pick<
+  InkeepWidgetBaseSettings,
+  PickedPluginInkeepBaseSettings
+>;
+
+const Inkeep = lazy(() => import("./InkeepCustomTrigger.js"));
+
+const InkeepSearch = ({
+  prefilledQuery,
+  isOpen,
+  onClose,
+  settings,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  prefilledQuery?: string | null;
+  settings: PluginInkeepBaseSettings;
+}) => {
+  return (
+    <Inkeep
+      isOpen={isOpen}
+      onClose={onClose}
+      baseSettings={{ ...baseSettings, ...settings }}
+      aiChatSettings={aiChatSettings}
+      searchSettings={{
+        prefilledQuery: prefilledQuery || undefined,
+      }}
+    />
+  );
+};
+
+export const inkeepSearchPlugin = (
+  settings: PluginInkeepBaseSettings,
+): DevPortalPlugin => {
+  return {
+    renderSearch: ({
+      isOpen,
+      onClose,
+    }: {
+      isOpen: boolean;
+      onClose: () => void;
+    }) => {
+      return (
+        <ClientOnly>
+          <InkeepSearch isOpen={isOpen} onClose={onClose} settings={settings} />
+        </ClientOnly>
+      );
+    },
+  };
+};

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

@@ -0,0 +1,32 @@
+import {
+  InkeepAIChatSettings,
+  InkeepModalSettings,
+  InkeepSearchSettings,
+} from "@inkeep/widgets";
+
+const baseSettings = {
+  theme: {
+    components: {
+      AIChatPageWrapper: {
+        defaultProps: {
+          size: "shrink-vertically",
+          variant: "no-shadow",
+        },
+      },
+      SearchBarTrigger: {
+        defaultProps: {
+          size: "expand",
+          variant: "subtle", // Choose from 'emphasized' or 'subtle'
+        },
+      },
+    },
+  },
+} as const;
+
+const modalSettings: InkeepModalSettings = {};
+
+const searchSettings: InkeepSearchSettings = {};
+
+const aiChatSettings: InkeepAIChatSettings = {};
+
+export { aiChatSettings, baseSettings, modalSettings, searchSettings };

package/src/lib/ui/Button.tsx

@@ -1,8 +1,38 @@
 import { Slot } from "@radix-ui/react-slot";
-import { VariantProps } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../util/cn.js";
-import { buttonVariants } from "./button-variants.js";
+
+const buttonVariants = cva(
+  "not-prose inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-14 rounded-lg px-10 text-lg",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,

package/src/lib/ui/Callout.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
 import {
   AlertTriangleIcon,
   InfoIcon,
   LightbulbIcon,
   ShieldAlertIcon,
-} from "../core/icons.js";
+} from "lucide-react";
+import type { ReactNode } from "react";
 import { cn } from "../util/cn.js";
 
 const stylesMap = {
@@ -64,9 +64,9 @@ export const Callout = ({ type, children, title, className }: CalloutProps) => {
   return (
     <div
       className={cn(
-        "not-prose grid grid-cols-[fit-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-transparent [&_code]:!border-none",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
         title && "items-center",
         border,
         bg,

package/src/lib/ui/Card.tsx

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

package/src/lib/ui/DropdownMenu.tsx

@@ -0,0 +1,199 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/src/lib/util/MdxComponents.tsx

@@ -1,18 +1,18 @@
 import { MDXProvider } from "@mdx-js/react";
 import type { ComponentProps } from "react";
-
 import { Link } from "react-router-dom";
 import { Heading } from "../components/Heading.js";
+import { InlineCode } from "../components/InlineCode.js";
 import { SyntaxHighlight } from "../components/SyntaxHighlight.js";
 import { Callout } from "../ui/Callout.js";
-import { cn } from "./cn.js";
 
 export type MdxComponentsType = ComponentProps<
   typeof MDXProvider
 >["components"];
 
 export const MdxComponents = {
-  img: (props) => {
+  // @ts-expect-error Node is not in types but still gets passed
+  img: ({ node, ...props }) => {
     if (/\.(mp4|webm|mov|avi)$/.test(props.src ?? "")) {
       return <video src={props.src} controls playsInline autoPlay loop />;
     }
@@ -48,7 +48,8 @@ export const MdxComponents = {
       {children}
     </Heading>
   ),
-  a: ({ href, ...props }) =>
+  // @ts-expect-error Node is not in types but still gets passed
+  a: ({ href, node, ...props }) =>
     href && !href.startsWith("http") ? (
       <Link to={href} relative="path" {...props} />
     ) : (
@@ -74,22 +75,13 @@ export const MdxComponents = {
       return (
         <SyntaxHighlight
           language={match?.[1] ?? "markup"}
-          className="rounded-xl overflow-x-auto p-4 border border-border dark:!bg-foreground/10 dark:border-transparent"
+          className="rounded-xl overflow-x-auto p-4 border dark:!bg-foreground/10 dark:border-transparent"
           showLanguageIndicator
           code={String(children).trim()}
         />
       );
     }
 
-    return (
-      <code
-        className={cn(
-          className,
-          "font-mono border border-border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70",
-        )}
-      >
-        {children}
-      </code>
-    );
+    return <InlineCode className={className}>{children}</InlineCode>;
   },
 } satisfies MdxComponentsType;

package/src/lib/util/fetchTimeout.tsx

@@ -0,0 +1,21 @@
+export const fetchTimeout = async (
+  input: RequestInfo,
+  init?: RequestInit,
+  timeout = 5000,
+): Promise<Response> => {
+  const controller = new AbortController();
+  const signal = controller.signal;
+
+  const fetchPromise = fetch(input, { ...init, signal });
+
+  const timeoutPromise = new Promise<Response>((_, reject) => {
+    const timer = setTimeout(() => {
+      controller.abort("Request timed out");
+      reject(new Error("Request timed out"));
+    }, timeout);
+
+    void fetchPromise.finally(() => clearTimeout(timer));
+  });
+
+  return Promise.race([fetchPromise, timeoutPromise]);
+};

package/src/lib/util/groupBy.ts

@@ -1,24 +1,19 @@
-type MapValuesToKeysIfAllowed<T> = {
-  [K in keyof T]: T[K] extends PropertyKey ? K : never;
-};
-type Filter<T> = MapValuesToKeysIfAllowed<T>[keyof T];
-
 export const groupBy = <
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   T extends Record<PropertyKey, any>,
-  Key extends Filter<T>,
+  KeySelector extends (item: T) => PropertyKey,
 >(
   arr: T[],
-  key: Key,
-): Record<T[Key], T[]> =>
-  arr.reduce(
+  keySelector: KeySelector,
+): Partial<Record<ReturnType<KeySelector>, T[]>> => {
+  return arr.reduce(
     (accumulator, val) => {
-      const groupedKey = val[key];
+      const groupedKey = keySelector(val) as ReturnType<KeySelector>;
       if (!accumulator[groupedKey]) {
         accumulator[groupedKey] = [];
       }
       accumulator[groupedKey].push(val);
       return accumulator;
     },
-    {} as Record<T[Key], T[]>,
+    {} as Record<ReturnType<KeySelector>, T[]>,
   );
+};

package/src/lib/util/invariant.ts

@@ -0,0 +1,26 @@
+export default function invariant(
+  condition: any,
+  // Not providing an inline default argument for message as the result is smaller
+  /**
+   * Can provide a string, or a function that returns a string for cases where
+   * the message takes a fair amount of effort to compute
+   */
+  message?: string | (() => string),
+): asserts condition {
+  if (condition) {
+    return;
+  }
+  // Condition not passed
+
+  const provided: string | undefined =
+    typeof message === "function" ? message() : message;
+
+  throw new ZudokuError(provided ?? "Invariant failed");
+}
+
+class ZudokuError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "ZudokuError";
+  }
+}

package/src/lib/util/joinPath.tsx

@@ -4,7 +4,8 @@ export const joinPath = (
   const cleanPath = parts
     .filter((part): part is string => Boolean(part))
     .map((part) => part.replace(/(^\/+|\/+$)/g, "")) // Strip leading and trailing slashes
-    .join("/");
+    .join("/")
+    .replace(/(^\/+|\/+$)/g, "");
 
-  return cleanPath ? `/${cleanPath}` : "";
+  return cleanPath ? `/${cleanPath}` : "/";
 };

package/src/lib/util/logInit.ts

@@ -0,0 +1,9 @@
+import log from "loglevel";
+
+log.setDefaultLevel("silent");
+
+if (import.meta.env.DEV) {
+  log.setLevel("debug");
+} else if (localStorage.getItem("ENABLE_DEBUG_LOGS")) {
+  log.setLevel("debug");
+}

package/src/lib/util/objectEntries.ts

@@ -0,0 +1,5 @@
+type ValueOf<T> = T[keyof T];
+type Entries<T> = [keyof T, ValueOf<T>][];
+
+export const objectEntries = <T extends object>(obj: T): Entries<T> =>
+  Object.entries(obj) as Entries<T>;

package/src/lib/util/renderIf.ts

@@ -0,0 +1,4 @@
+export const renderIf = <G, R>(
+  variable: G | undefined | null,
+  callback: (variable: G) => R,
+): R | undefined => (variable ? callback(variable) : undefined);

package/src/lib/util/requestIdleCallbackPolyfill.ts

@@ -0,0 +1,6 @@
+const root = globalThis;
+
+if (!root.requestIdleCallback || !root.cancelIdleCallback) {
+  root.requestIdleCallback = (cb: IdleRequestCallback) => setTimeout(cb, 1);
+  root.cancelIdleCallback = clearTimeout;
+}