zudoku 0.0.0-fcb84d6 → 0.0.0-fd8f8ad

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

@@ -1,26 +1,23 @@
-import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
-import { Client as UrqlClient, cacheExchange, fetchExchange } from "urql";
-import { type DevPortalPlugin } from "../../core/plugins.js";
+import { matchPath, type RouteObject } from "react-router-dom";
+import { type ZudokuPlugin } from "../../core/plugins.js";
 import { graphql } from "./graphql/index.js";
 
 import { useQuery } from "@tanstack/react-query";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import { createClient } from "zudoku/openapi-worker";
 import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
 import { useAuth } from "../../authentication/hook.js";
-import { ErrorPage } from "../../components/ErrorPage.js";
 import { ColorMap } from "../../components/navigation/SidebarBadge.js";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { Button } from "../../ui/Button.js";
 import { joinPath } from "../../util/joinPath.js";
+import { GraphQLClient } from "./client/GraphQLClient.js";
 import { OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { GetServerQuery } from "./Sidecar.js";
 
 const GetCategoriesQuery = graphql(`
   query GetCategories($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
+      url
       tags {
         __typename
         name
@@ -38,20 +35,6 @@ const GetCategoriesQuery = graphql(`
   }
 `);
 
-const OpenApiErrorPage = () => {
-  const error = useRouteError();
-  const message =
-    error instanceof Error ? (
-      <SyntaxHighlight code={error.message} />
-    ) : (
-      "An unknown error occurred"
-    );
-
-  return (
-    <ErrorPage category="Error" title="An error occurred" message={message} />
-  );
-};
-
 type InternalOasPluginConfig = { inMemory?: boolean };
 
 const MethodColorMap: Record<string, keyof typeof ColorMap> = {
@@ -66,17 +49,10 @@ const MethodColorMap: Record<string, keyof typeof ColorMap> = {
 
 export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
 
-export const openApiPlugin = (
-  config: OpenApiPluginOptions,
-): DevPortalPlugin => {
+export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
   const basePath = joinPath(config.navigationId ?? "/reference");
 
-  const client = config.server
-    ? new UrqlClient({
-        url: config.server,
-        exchanges: [cacheExchange, fetchExchange],
-      })
-    : createClient({ useMemoryClient: config.inMemory ?? false });
+  const client = new GraphQLClient(config);
 
   return {
     getHead: () => {
@@ -104,15 +80,13 @@ export const openApiPlugin = (
         ...props
       }: Partial<PlaygroundContentProps> & { requireAuth: boolean }) => {
         const auth = useAuth();
+        // We don't have the GraphQL context here
         const serverQuery = useQuery({
-          queryFn: async () => {
-            const result = await client.query(GetServerQuery, {
+          queryFn: () =>
+            client.fetch(GetCategoriesQuery, {
               type: config.type,
               input: config.input,
-            });
-
-            return result.data;
-          },
+            }),
           enabled: !server,
           queryKey: ["playground-server"],
         });
@@ -150,38 +124,40 @@ export const openApiPlugin = (
         return [];
       }
 
-      const { data } = await client.query(GetCategoriesQuery, {
-        input: config.input,
-        type: config.type,
-      });
-
-      if (!data) return [];
-
-      const categories = data.schema.tags
-        .filter((tag) => tag.operations.length > 0)
-        .map<SidebarItem>((tag) => ({
-          type: "category",
-          label: tag.name || "Other endpoints",
-          collapsible: true,
-          collapsed: false,
-          items: tag.operations.map((operation) => ({
-            type: "link",
-            label: operation.summary ?? operation.path,
-            href: `#${operation.slug}`,
-            badge: {
-              label: operation.method,
-              color: MethodColorMap[operation.method.toLowerCase()],
-            },
-          })),
-        }));
+      try {
+        const data = await client.fetch(GetCategoriesQuery, {
+          type: config.type,
+          input: config.input,
+        });
 
-      categories.unshift({
-        type: "link",
-        label: "Overview",
-        href: "#description",
-      });
+        const categories = data.schema.tags
+          .filter((tag) => tag.operations.length > 0)
+          .map<SidebarItem>((tag) => ({
+            type: "category",
+            label: tag.name || "Other endpoints",
+            collapsible: true,
+            collapsed: false,
+            items: tag.operations.map((operation) => ({
+              type: "link",
+              label: operation.summary ?? operation.path,
+              href: `#${operation.slug}`,
+              badge: {
+                label: operation.method,
+                color: MethodColorMap[operation.method.toLowerCase()]!,
+              },
+            })),
+          }));
+
+        categories.unshift({
+          type: "link",
+          label: "Overview",
+          href: "#description",
+        });
 
-      return categories;
+        return categories;
+      } catch {
+        return [];
+      }
     },
     getRoutes: () =>
       [
@@ -192,7 +168,6 @@ export const openApiPlugin = (
               element: <OpenApiRoute client={client} config={config} />,
             };
           },
-          errorElement: <OpenApiErrorPage />,
           children: [
             {
               path: basePath,

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

@@ -1,15 +1,15 @@
 import { useMutation } from "@tanstack/react-query";
 import { Fragment, useEffect, useRef, useTransition } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { useSelectedServerStore } from "../../../authentication/state.js";
-import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../../../components/Select.js";
+} from "zudoku/ui/Select.js";
+import { useSelectedServerStore } from "../../../authentication/state.js";
+import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import { Spinner } from "../../../components/Spinner.js";
 import { Button } from "../../../ui/Button.js";
 import { Callout } from "../../../ui/Callout.js";
@@ -129,6 +129,7 @@ export const Playground = ({
             .filter((h) => h.name)
             .map((header) => [header.name, header.value]),
         ),
+        body: data.body ? data.body : undefined,
       });
 
       if (data.identity !== NO_IDENTITY) {

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

@@ -5,7 +5,7 @@ import {
   DialogContent,
   DialogTitle,
   DialogTrigger,
-} from "../../../components/Dialog.js";
+} from "zudoku/ui/Dialog.js";
 import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;

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

@@ -67,7 +67,10 @@ export const SchemaView = ({
       }
     }
 
-    if (schema.type === "object" && !schema.properties) {
+    if (
+      schema.type === "object" &&
+      (!schema.properties || Object.keys(schema.properties).length === 0)
+    ) {
       return (
         <Card className="p-4 flex gap-2 items-center">
           {"name" in schema && <>{schema.name}</>}

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

@@ -1,72 +1,58 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { type SchemaObject } from "../../../oas/graphql/index.js";
 
-export const isObject = (value: unknown): boolean =>
-  typeof value === "object" && value !== null && !Array.isArray(value);
-
 export const generateSchemaExample = (
   schema: SchemaObject,
   name?: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): any => {
   // Directly return the example or default if they exist
   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;
   }
 
-  // Process examples object
-  if (schema.examples && isObject(schema.examples)) {
-    return Object.values(schema.examples)[0];
-  }
-
-  // Recursively process objects and arrays
-  return processComplexTypes(schema, name);
-};
+  if (schema.properties || schema.type === "object") {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const example: any = {};
 
-function processComplexTypes(schema: SchemaObject, name?: string): any {
-  const properties = Object.entries(schema.properties ?? {}).concat(
-    Object.entries(schema.additionalProperties ?? {}),
-  );
-  if (schema.type === "object" && properties.length > 0) {
-    const obj: { [key: string]: any } = {};
-    properties.forEach(([key, propSchema]) => {
-      const value = generateSchemaExample(propSchema, key);
-      if (value !== undefined) {
-        obj[key] = value;
+    if (schema.properties) {
+      for (const [key, propSchema] of Object.entries(schema.properties)) {
+        example[key] = generateSchemaExample(propSchema as SchemaObject, key);
       }
-    });
-    return obj;
-  } else if (schema.type === "array" && schema.items) {
-    const value = generateSchemaExample(schema.items, name);
-    if (value !== undefined) {
-      return [value];
+    }
+    return example;
+  }
+
+  if (schema.type === "array") {
+    if (Array.isArray(schema.items)) {
+      return schema.items.map((itemSchema) =>
+        generateSchemaExample(itemSchema as SchemaObject),
+      );
+    } else if (schema.items) {
+      return [generateSchemaExample(schema.items as SchemaObject)];
     }
     return [];
   }
-  // Fallback for missing or undefined types
-  return undefined; //getDefaultForType(schema.type);
-}
 
-function getDefaultForType(type?: string | string[]): any {
-  if (Array.isArray(type)) {
-    return getDefaultForSingleType(type[0]);
+  if (schema.enum) {
+    return schema.enum[0];
   }
-  return getDefaultForSingleType(type);
-}
 
-function getDefaultForSingleType(type?: string): any {
-  switch (type) {
+  switch (schema.type) {
     case "string":
-      return "";
+      return name || "string";
     case "number":
     case "integer":
       return 0;
     case "boolean":
-      return false;
+      return true;
     case "null":
       return null;
+    case undefined:
     default:
-      return "undefined";
+      return {};
   }
-}
+};

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

@@ -1 +1,11 @@
-export { createClient } from "./openapi/client/createWorkerClient.js";
+export const initializeWorker = () => {
+  const worker = new SharedWorker(
+    new URL("./openapi/client/worker.ts", import.meta.url),
+    { type: "module" },
+  );
+  // eslint-disable-next-line no-console
+  worker.onerror = (e) => console.error(e);
+  worker.port.start();
+
+  return worker;
+};

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

@@ -1,19 +1,15 @@
 import { redirect } from "react-router-dom";
-import type { DevPortalPlugin } from "../../core/plugins.js";
-
-export type Redirect = {
-  from: string;
-  to: string;
-};
+import { ZudokuRedirect } from "../../../config/validators/validate.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
 
 export const redirectPlugin = (options: {
-  redirects: Redirect[];
-}): DevPortalPlugin => {
+  redirects: ZudokuRedirect[];
+}): ZudokuPlugin => {
   return {
     getRoutes: () =>
       options.redirects.map(({ from, to }) => ({
         path: from,
-        loader: () => redirect(to),
+        loader: () => redirect(to, 301),
       })),
   };
 };

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

@@ -1,7 +1,7 @@
 import type { InkeepWidgetBaseSettings } from "@inkeep/widgets";
 import { lazy } from "react";
 import { ClientOnly } from "../../components/ClientOnly.js";
-import type { DevPortalPlugin } from "../../core/plugins.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
 import { aiChatSettings, baseSettings } from "./inkeep.js";
 
 type PickedPluginInkeepBaseSettings =
@@ -44,7 +44,7 @@ const InkeepSearch = ({
 
 export const inkeepSearchPlugin = (
   settings: PluginInkeepBaseSettings,
-): DevPortalPlugin => {
+): ZudokuPlugin => {
   return {
     renderSearch: ({
       isOpen,

package/src/lib/ui/Accordion.tsx

@@ -0,0 +1,56 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../util/cn.js";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/lib/ui/ActionButton.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+import { Button, type ButtonProps } from "zudoku/ui/Button.js";
+import { Spinner } from "../components/Spinner.js";
+import { cn } from "../util/cn.js";
+
+type ActionButtonProps = ButtonProps & { isPending?: boolean };
+
+export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
+  ({ isPending, children, className, ...props }: ActionButtonProps, ref) => {
+    return (
+      <Button
+        ref={ref}
+        disabled={isPending}
+        {...props}
+        className={cn("relative", className)}
+      >
+        {isPending && (
+          <div className="absolute inset-0 grid place-items-center">
+            <Spinner />
+          </div>
+        )}
+        <div className={cn(isPending && "invisible")}>{children}</div>
+      </Button>
+    );
+  },
+);
+
+ActionButton.displayName = "ActionButton";

package/src/lib/ui/{Note.tsx → Alert.tsx}

@@ -1,8 +1,9 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
+
 import { cn } from "../util/cn.js";
 
-const noteVariants = cva(
+const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
@@ -18,20 +19,20 @@ const noteVariants = cva(
   },
 );
 
-const Note = React.forwardRef<
+const Alert = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof noteVariants>
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
   <div
     ref={ref}
     role="alert"
-    className={cn(noteVariants({ variant }), className)}
+    className={cn(alertVariants({ variant }), className)}
     {...props}
   />
 ));
-Note.displayName = "Alert";
+Alert.displayName = "Alert";
 
-const NoteTitle = React.forwardRef<
+const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
@@ -41,9 +42,9 @@ const NoteTitle = React.forwardRef<
     {...props}
   />
 ));
-NoteTitle.displayName = "AlertTitle";
+AlertTitle.displayName = "AlertTitle";
 
-const NoteDescription = React.forwardRef<
+const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
@@ -53,6 +54,6 @@ const NoteDescription = React.forwardRef<
     {...props}
   />
 ));
-NoteDescription.displayName = "AlertDescription";
+AlertDescription.displayName = "AlertDescription";
 
-export { Note, NoteDescription, NoteTitle };
+export { Alert, AlertDescription, AlertTitle };

package/src/lib/ui/AlertDialog.tsx

@@ -0,0 +1,139 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { cn } from "../util/cn.js";
+import { buttonVariants } from "./Button.js";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/lib/ui/AspectRatio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };