zudoku 0.0.0-f42e3678 → 0.0.0-f46233e4

package/src/lib/components/navigation/NavigationItem.tsx

@@ -17,7 +17,7 @@ import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { useZudoku } from "../context/ZudokuContext.js";
 import { NavigationBadge } from "./NavigationBadge.js";
 import { NavigationCategory } from "./NavigationCategory.js";
-import { isHiddenItem, navigationListItem } from "./utils.js";
+import { navigationListItem, shouldShowItem } from "./utils.js";
 
 const TruncatedLabel = ({
   label,
@@ -79,7 +79,7 @@ export const NavigationItem = ({
   const auth = useAuth();
   const context = useZudoku();
 
-  if (!isHiddenItem(auth, context)(item)) {
+  if (!shouldShowItem(auth, context)(item)) {
     return null;
   }
 
@@ -114,7 +114,7 @@ export const NavigationItem = ({
       );
     case "link":
     case "custom-page": {
-      const href = item.type === "link" ? item.to : item.path;
+      const href = item.type === "link" ? item.to : joinUrl(item.path);
       return !href.startsWith("http") ? (
         <AnchorLink
           to={{
@@ -124,7 +124,9 @@ export const NavigationItem = ({
           }}
           {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
           className={navigationListItem({
-            isActive: href === [location.pathname, activeAnchor].join("#"),
+            isActive:
+              href ===
+              [location.pathname, activeAnchor].filter(Boolean).join("#"),
           })}
           onClick={onRequestClose}
         >
@@ -142,7 +144,7 @@ export const NavigationItem = ({
         <a
           className={navigationListItem()}
           href={href}
-          target="_blank"
+          target={"target" in item ? item.target : "_blank"}
           rel="noopener noreferrer"
           onClick={onRequestClose}
         >

package/src/lib/components/navigation/NavigationWrapper.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type PropsWithChildren } from "react";
+import { type PropsWithChildren, useEffect, useRef } from "react";
 import { cn } from "../../util/cn.js";
 import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
 import { useZudoku } from "../context/ZudokuContext.js";

package/src/lib/components/navigation/Toc.tsx

@@ -1,11 +1,11 @@
 import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
 import { ListTreeIcon } from "lucide-react";
 import {
+  type CSSProperties,
+  type PropsWithChildren,
   useEffect,
   useRef,
   useState,
-  type CSSProperties,
-  type PropsWithChildren,
 } from "react";
 import { cn } from "../../util/cn.js";
 import { AnchorLink } from "../AnchorLink.js";

package/src/lib/components/navigation/ZudokuLogo.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
   <svg

package/src/lib/components/navigation/utils.ts

@@ -58,31 +58,30 @@ export const useIsCategoryOpen = (category: NavigationCategory) => {
   const location = useLocation();
 
   return traverseNavigationItem(category, (item) => {
-    if (item.type === "category" && item.link) {
-      const categoryLinkPath = joinUrl(item.link.path);
-      if (categoryLinkPath === location.pathname) {
-        return true;
-      }
-    }
-
-    if (item.type === "doc") {
-      const docPath = joinUrl(item.path);
-      if (docPath === location.pathname) {
-        return true;
-      }
+    switch (item.type) {
+      case "category":
+        if (!item.link) {
+          return undefined;
+        }
+        return joinUrl(item.link.path) === location.pathname ? true : undefined;
+      case "custom-page":
+      case "doc":
+        return joinUrl(item.path) === location.pathname ? true : undefined;
+      default:
+        return undefined;
     }
   });
 };
 
 export const usePrevNext = (): {
-  prev?: { label: string; id: string };
-  next?: { label: string; id: string };
+  prev?: { label?: string; id: string };
+  next?: { label?: string; id: string };
 } => {
   const currentId = useLocation().pathname;
   const { navigation } = useCurrentNavigation();
 
-  let prev;
-  let next;
+  let prev: { label?: string; id: string } | undefined;
+  let next: { label?: string; id: string } | undefined;
 
   let foundCurrent = false;
 
@@ -134,7 +133,7 @@ export const navigationListItem = cva(
   },
 );
 
-export const isHiddenItem =
+export const shouldShowItem =
   (auth: UseAuthReturn, context: ZudokuContext) =>
   (item: NavigationItem): boolean => {
     if (typeof item.display === "function") {

package/src/lib/core/ZudokuContext.ts

@@ -3,11 +3,11 @@ import { createNanoEvents } from "nanoevents";
 import type { ReactNode } from "react";
 import type { Location } from "react-router";
 import type { BundledTheme, HighlighterCore } from "shiki";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
-import {
-  type ProtectedRoutesInput,
-  ProtectedRoutesSchema,
+import type {
+  CallbackContext,
+  ProtectedRoutesInput,
 } from "../../config/validators/ProtectedRoutesSchema.js";
 import type { FooterSchema } from "../../config/validators/validate.js";
 import type { AuthenticationPlugin } from "../authentication/authentication.js";
@@ -48,6 +48,7 @@ export type ApiKeyCache = "api-keys";
 
 type Metadata = Partial<{
   title: string;
+  defaultTitle?: string;
   description: string;
   logo: string;
   favicon: string;
@@ -105,6 +106,23 @@ export type ZudokuContextOptions = {
   };
 };
 
+export const transformProtectedRoutes = (
+  val: ProtectedRoutesInput,
+): Record<string, (c: CallbackContext) => boolean> | undefined => {
+  if (!val) return undefined;
+
+  if (Array.isArray(val)) {
+    return Object.fromEntries(
+      val.map((route) => [
+        route,
+        (c: CallbackContext) => c.auth.isAuthenticated,
+      ]),
+    );
+  }
+
+  return val;
+};
+
 export class ZudokuContext {
   public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
   public navigation: Navigation;
@@ -123,13 +141,13 @@ export class ZudokuContext {
         const routes = plugin.getProtectedRoutes?.();
         if (!routes) return [];
 
-        return Object.entries(ProtectedRoutesSchema.parse(routes) ?? {});
+        return Object.entries(transformProtectedRoutes(routes) ?? {});
       }),
     );
 
     const protectedRoutes = {
       ...pluginProtectedRoutes,
-      ...ProtectedRoutesSchema.parse(options.protectedRoutes),
+      ...transformProtectedRoutes(options.protectedRoutes),
     };
 
     this.queryClient = queryClient;
@@ -144,6 +162,7 @@ export class ZudokuContext {
       if (!isEventConsumerPlugin(plugin)) return;
 
       objectEntries(plugin.events).forEach(([event, handler]) => {
+        // biome-ignore lint/style/noNonNullAssertion: handler is guaranteed to be defined
         this.emitter.on(event, handler!);
       });
     });

package/src/lib/core/__internal.tsx

@@ -0,0 +1,30 @@
+/**
+ * ⚠️
+ * These are re-exports consumed from the main entry point in `src/app/main.tsx`
+ * This is to ensure that they share the exact same context in React.
+ * ⚠️
+ **/
+
+import { Helmet } from "@zudoku/react-helmet-async";
+import {
+  Bootstrap as BootstrapImport,
+  BootstrapStatic as BootstrapStaticImport,
+} from "../components/Bootstrap.js";
+import { BuildCheck as BuildCheckImport } from "../components/BuildCheck.js";
+import { Layout as LayoutImport } from "../components/Layout.js";
+import { Meta as MetaImport } from "../components/Meta.js";
+import { StatusPage as StatusPageImport } from "../components/StatusPage.js";
+import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
+import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
+import { RouteGuard as RouteGuardImport } from "./RouteGuard.js";
+
+export const Layout = LayoutImport;
+export const RouterError = RouterErrorImport;
+export const ServerError = ServerErrorImport;
+export const Bootstrap = BootstrapImport;
+export const BootstrapStatic = BootstrapStaticImport;
+export const RouteGuard = RouteGuardImport;
+export const Head = Helmet;
+export const StatusPage = StatusPageImport;
+export const BuildCheck = BuildCheckImport;
+export const Meta = MetaImport;

package/src/lib/core/router.ts

@@ -0,0 +1 @@
+export * from "react-router";

package/src/lib/errors/ErrorAlert.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { DeveloperHint } from "../components/DeveloperHint.js";
 import { Heading } from "../components/Heading.js";

package/src/lib/errors/TopLevelError.tsx

@@ -1,8 +1,6 @@
-import { FallbackProps } from "react-error-boundary";
+import type { FallbackProps } from "react-error-boundary";
 import { ErrorAlert } from "./ErrorAlert.js";
 
-export function TopLevelError({ error, resetErrorBoundary }: FallbackProps) {
-  // Call resetErrorBoundary() to reset the error boundary and retry the render.
-
+export function TopLevelError({ error }: FallbackProps) {
   return <ErrorAlert error={error} />;
 }

package/src/lib/hooks/useEvent.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import { type PropsWithChildren } from "react";
-import { type Location } from "react-router";
+import type { PropsWithChildren } from "react";
+import type { Location } from "react-router";
 import { assertType, describe, expect, it, vi } from "vitest";
 import { ZudokuProvider } from "../components/context/ZudokuProvider.js";
 import { ZudokuContext, type ZudokuEvents } from "../core/ZudokuContext.js";

package/src/lib/oas/graphql/circular.ts

@@ -1,5 +1,5 @@
-import { GraphQLJSON } from "graphql-type-json";
 import { GraphQLScalarType } from "graphql/index.js";
+import { GraphQLJSON } from "graphql-type-json";
 import type { RecordAny } from "../../util/traverse.js";
 
 export const CIRCULAR_REF = "$[Circular Reference]";
@@ -14,12 +14,12 @@ const OPENAPI_PROPS = new Set([
 ]);
 
 const handleCircularRefs = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   obj: any,
   visited = new WeakSet(),
   refs = new WeakMap(),
   path: string[] = [],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
 ): any => {
   if (obj === null || typeof obj !== "object") return obj;
 

package/src/lib/oas/graphql/index.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+// biome-ignore-all lint/suspicious/noExplicitAny: Allow any type
 import SchemaBuilder from "@pothos/core";
 import {
   type CountableSlugify,
@@ -111,18 +111,34 @@ export const getAllTags = (
     ),
   );
 
-  return [
+  const result = [
     // Keep root tags that are actually used in operations
     ...rootTags
       .filter((tag) => operationTags.has(tag.name))
       .map((tag) => ({ ...tag, slug: slugs[tag.name] })),
     // Add tags found in operations but not defined in root tags
-    ...[...operationTags]
+    ...Array.from(operationTags)
       .filter((tag) => !rootTags.some((rt) => rt.name === tag))
       .map((tag) => ({ name: tag, slug: slugs[tag] })),
     // Add untagged operations if there are any
     ...(hasUntaggedOperations ? [{ name: undefined, slug: undefined }] : []),
   ];
+
+  // Apply x-tagGroups ordering if present
+  const tagGroups = (schema as any)["x-tagGroups"] ?? [];
+
+  if (tagGroups.length === 0) return result;
+
+  const groupOrder = tagGroups.flatMap((group: any) => group.tags);
+  return result.sort((a, b) => {
+    if (!a.name || !b.name) return 0; // Keep untagged at end
+    const indexA = groupOrder.indexOf(a.name);
+    const indexB = groupOrder.indexOf(b.name);
+    if (indexA === -1 && indexB === -1) return 0; // Keep original order for ungrouped
+    if (indexA === -1) return 1; // Ungrouped after grouped
+    if (indexB === -1) return -1; // Grouped before ungrouped
+    return indexA - indexB;
+  });
 };
 
 export const getAllSlugs = (
@@ -554,6 +570,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
       resolve: (root) =>
         Object.entries(root.paths ?? {}).map(([path, value]) => ({
           path,
+          // biome-ignore lint/style/noNonNullAssertion: value is guaranteed to be defined
           methods: Object.keys(value!) as typeof HttpMethods,
         })),
     }),

package/src/lib/oas/parser/dereference/index.ts

@@ -8,7 +8,7 @@ type CustomResolver = (ref: string) => Promise<JSONSchema | undefined>;
 
 const cache = new Map<JSONSchema, JSONSchema>();
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: Allow any type
 const isIndexableObject = (obj: any): obj is Record<string, any> =>
   obj !== null && typeof obj === "object";
 
@@ -18,6 +18,7 @@ export const dereference = async (
   resolvers: CustomResolver[] = [],
 ) => {
   if (cache.has(schema)) {
+    // biome-ignore lint/style/noNonNullAssertion: Cache is guaranteed to have a value
     return cache.get(schema)!;
   }
 

package/src/lib/oas/parser/dereference/resolveRef.ts

@@ -11,13 +11,13 @@ export const resolveLocalRef = (schema: JSONSchema, ref: string): unknown => {
   }
   const schemaCache = cache.get(schema);
 
-  if (schemaCache!.has(ref)) {
-    return schemaCache!.get(ref);
+  if (schemaCache?.has(ref)) {
+    return schemaCache.get(ref);
   }
 
   const path = ref.split("/").slice(1);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   let current: any = schema;
   for (const segment of path) {
     if (!current || typeof current !== "object") {
@@ -27,6 +27,6 @@ export const resolveLocalRef = (schema: JSONSchema, ref: string): unknown => {
     current = current[segment] ?? null;
   }
 
-  schemaCache!.set(ref, current);
+  schemaCache?.set(ref, current);
   return current;
 };

package/src/lib/oas/parser/index.ts

@@ -43,7 +43,7 @@ const parseSchemaInput = async (
       }
     }
     if (schemaInput.includes("://")) {
-      let response;
+      let response: Response;
       try {
         response = await fetch(schemaInput, {
           cache: "force-cache",
@@ -83,7 +83,7 @@ const parseSchemaInput = async (
 
   if (typeof schemaInput === "object") return schemaInput as JSONSchema;
 
-  throw new GraphQLError("Unsupported schema input: " + schemaInput);
+  throw new GraphQLError(`Unsupported schema input: ${schemaInput}`);
 };
 
 /**

package/src/lib/oas/parser/upgrade/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { type RecordAny, traverse } from "../../../util/traverse.js";
 import type { OpenAPIDocument } from "../index.js";
 /**
@@ -71,6 +70,7 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
 
       if (isMultipart) {
         // Types
+        // biome-ignore lint/suspicious/noExplicitAny: Allow any type
         const entries: [string, any][] = Object.entries(schema.properties);
 
         for (const [, value] of entries) {
@@ -110,6 +110,7 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
 
   schema = traverse(schema, (sub) => {
     if (sub.type === "string" && sub.format === "binary") {
+      // biome-ignore lint/suspicious/noExplicitAny: Allow any type
       return undefined as any;
     }
 

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -62,6 +62,13 @@ export const Catalog = ({
                   <Markdown
                     className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"
                     content={api.description}
+                    components={{
+                      // Because we're wrapping the description in a Link already,
+                      // we need to strip out other links to not get a hydration error, like:
+                      // > In HTML, <a> cannot be a descendant of <a>.
+                      // > This will cause a hydration error.
+                      a: (props) => <span {...props} />,
+                    }}
                   />
                 </div>
               </Link>

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -13,9 +13,10 @@ import {
   SelectValue,
 } from "zudoku/ui/Select.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useAuth } from "../../hooks/index.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
-import { type ApiKeyService } from "./index.js";
+import type { ApiKeyService } from "./index.js";
 
 type CreateApiKey = { description?: string; expiresOn?: string };
 
@@ -34,6 +35,7 @@ export const CreateApiKey = ({
       expiresOn: "30",
     },
   });
+  const auth = useAuth();
 
   const createKeyMutation = useMutation({
     mutationFn: ({ description, expiresOn }: CreateApiKey) => {
@@ -44,13 +46,14 @@ export const CreateApiKey = ({
       const expiresOnDate =
         expiresOn !== "never" ? addDaysToDate(Number(expiresOn)) : undefined;
 
-      return service.createKey(
-        {
+      return service.createKey({
+        apiKey: {
           description: description || "Secret Key",
           expiresOn: expiresOnDate,
         },
         context,
-      );
+        auth,
+      });
     },
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["api-keys"] });

package/src/lib/plugins/api-keys/CreateApiKeyDialog.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "zudoku/ui/Dialog.js";
+import { Button } from "../../ui/Button.js";
+import { CreateApiKey } from "./CreateApiKey.js";
+import type { ApiKeyService } from "./index.js";
+
+interface CreateApiKeyDialogProps {
+  service: ApiKeyService;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger?: ReactNode;
+  buttonVariant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+}
+
+export const CreateApiKeyDialog = ({
+  service,
+  isOpen,
+  onOpenChange,
+  trigger,
+  buttonVariant = "outline",
+}: CreateApiKeyDialogProps) => {
+  const defaultTrigger = (
+    <Button variant={buttonVariant}>Create API Key</Button>
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{trigger ?? defaultTrigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create API Key</DialogTitle>
+        </DialogHeader>
+        <CreateApiKey service={service} onOpenChange={onOpenChange} />
+      </DialogContent>
+    </Dialog>
+  );
+};