zudoku 0.0.0-e5be921 → 0.0.0-e614aaa

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router-dom";
+import { NavLink, useSearchParams } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -10,7 +10,7 @@ import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
+  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent",
   {
     variants: {
       isActive: {
@@ -51,6 +51,7 @@ export const SidebarItem = ({
           className={({ isActive }) => navigationListItem({ isActive })}
           to={joinPath(item.id)}
           onClick={onRequestClose}
+          end
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
@@ -90,6 +91,7 @@ export const SidebarItem = ({
       ) : !item.href.startsWith("http") ? (
         <NavLink
           className={navigationListItem({
+            isActive: item.href.split("#")[1] === activeAnchor,
             className: item.badge?.placement !== "start" && "justify-between",
           })}
           to={item.href}

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

@@ -12,9 +12,10 @@ export const SidebarWrapper = forwardRef<
     // maybe this could be simplified by adjusting the layout
     data-navigation={String(pushMainContent)}
     className={cn(
-      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
-      "-mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
+      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 border-r pr-6",
+      "-mx-[--padding-nav-item] pb-20 pt-[--padding-content-top]",
       "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
+      !pushMainContent && "border-r-0",
       className,
     )}
     ref={ref}

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

@@ -1,4 +1,4 @@
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import type {
   SidebarItem,
   SidebarItemCategory,

package/src/lib/core/RouteGuard.tsx

@@ -0,0 +1,73 @@
+import { useQuery } from "@tanstack/react-query";
+import { matchPath, Outlet, useLocation, useNavigate } from "react-router";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "zudoku/ui/Dialog.js";
+import { useAuth } from "../authentication/hook.js";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import { ZudokuError } from "../util/invariant.js";
+import { useLatest } from "../util/useLatest.js";
+
+export const RouteGuard = () => {
+  const auth = useAuth();
+  const zudoku = useZudoku();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const latestPath = useLatest(location.pathname);
+
+  const isProtected = zudoku.options.protectedRoutes?.some((path) =>
+    matchPath({ path, end: true }, location.pathname),
+  );
+
+  useQuery({
+    queryKey: ["login-redirect"],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1200));
+      await zudoku.authentication?.signIn({
+        redirectTo: latestPath.current,
+      });
+      return true;
+    },
+    enabled:
+      typeof window !== "undefined" &&
+      isProtected &&
+      !auth.isPending &&
+      !auth.isAuthenticated,
+  });
+
+  if (isProtected && !auth.isAuthenticated) {
+    return (
+      <Dialog
+        open={true}
+        onOpenChange={(open) => {
+          if (!open) {
+            void navigate(-1);
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Logging you in...</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>
+            Please wait while we log you in.
+          </DialogDescription>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  if (isProtected && !auth.isAuthEnabled) {
+    throw new ZudokuError("Authentication is not enabled", {
+      title: "Authentication is not enabled",
+      developerHint:
+        "To use protectedRoutes you need authentication to be enabled",
+    });
+  }
+
+  return <Outlet />;
+};

package/src/lib/core/ZudokuContext.ts

@@ -1,4 +1,6 @@
+import { createNanoEvents } from "nanoevents";
 import { ReactNode } from "react";
+import { Location } from "react-router";
 import { TopNavigationItem } from "../../config/validators/common.js";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
@@ -6,16 +8,22 @@ import type { ComponentsContextType } from "../components/context/ComponentsCont
 import { Slotlets } from "../components/SlotletProvider.js";
 import { joinPath } from "../util/joinPath.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
+import { objectEntries } from "../util/objectEntries.js";
 import {
   isApiIdentityPlugin,
+  isEventConsumerPlugin,
   isNavigationPlugin,
   type NavigationPlugin,
   needsInitialization,
   type ZudokuPlugin,
 } from "./plugins.js";
 
+export interface ZudokuEvents {
+  location: (event: { from?: Location; to: Location }) => void;
+}
+
 export interface ApiIdentity {
-  authorizeRequest: (request: Request) => Request;
+  authorizeRequest: (request: Request) => Promise<Request> | Request;
   label: string;
   id: string;
 }
@@ -65,6 +73,7 @@ export type ZudokuContextOptions = {
     components?: MdxComponentsType;
   };
   overrides?: ComponentsContextType;
+  protectedRoutes?: string[];
 };
 
 export class ZudokuContext {
@@ -74,16 +83,25 @@ export class ZudokuContext {
   public meta: ZudokuContextOptions["metadata"];
   public page: ZudokuContextOptions["page"];
   public authentication?: ZudokuContextOptions["authentication"];
-  private navigationPlugins: NavigationPlugin[];
+  private readonly navigationPlugins: NavigationPlugin[];
+  private emitter = createNanoEvents<ZudokuEvents>();
 
-  constructor(config: ZudokuContextOptions) {
-    this.plugins = config.plugins ?? [];
-    this.topNavigation = config.topNavigation ?? [];
-    this.sidebars = config.sidebars ?? {};
+  constructor(public readonly options: ZudokuContextOptions) {
+    this.plugins = options.plugins ?? [];
+    this.topNavigation = options.topNavigation ?? [];
+    this.sidebars = options.sidebars ?? {};
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
-    this.authentication = config.authentication;
-    this.meta = config.metadata;
-    this.page = config.page;
+    this.authentication = options.authentication;
+    this.meta = options.metadata;
+    this.page = options.page;
+
+    this.plugins.forEach((plugin) => {
+      if (!isEventConsumerPlugin(plugin)) return;
+
+      objectEntries(plugin.events).forEach(([event, handler]) => {
+        this.emitter.on(event, handler);
+      });
+    });
   }
 
   initialize = async (): Promise<void> => {
@@ -104,6 +122,20 @@ export class ZudokuContext {
     return keys.flat();
   };
 
+  addEventListener<E extends keyof ZudokuEvents>(
+    event: E,
+    callback: ZudokuEvents[E],
+  ) {
+    return this.emitter.on(event, callback);
+  }
+
+  emitEvent = <E extends keyof ZudokuEvents>(
+    event: E,
+    ...data: Parameters<ZudokuEvents[E]>
+  ) => {
+    return this.emitter.emit(event, ...data);
+  };
+
   getPluginSidebar = async (path: string) => {
     const navigations = await Promise.all(
       this.navigationPlugins.map((plugin) =>

package/src/lib/core/plugins.ts

@@ -1,16 +1,21 @@
-import type { LucideProps } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 import { type ReactElement } from "react";
-import { type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
 import { MdxComponentsType } from "../util/MdxComponents.js";
-import { ZudokuContext, type ApiIdentity } from "./ZudokuContext.js";
+import {
+  ZudokuContext,
+  ZudokuEvents,
+  type ApiIdentity,
+} from "./ZudokuContext.js";
 
 export type ZudokuPlugin =
   | CommonPlugin
   | ProfileMenuPlugin
   | NavigationPlugin
   | ApiIdentityPlugin
-  | SearchProviderPlugin;
+  | SearchProviderPlugin
+  | EventConsumerPlugin;
 
 export type { RouteObject };
 
@@ -19,6 +24,14 @@ export interface NavigationPlugin {
   getSidebar?: (path: string) => Promise<Sidebar>;
 }
 
+export const createApiIdentityPlugin = (
+  plugin: ApiIdentityPlugin,
+): ApiIdentityPlugin => plugin;
+
+export const createProfileMenuPlugin = (
+  plugin: ProfileMenuPlugin,
+): ProfileMenuPlugin => plugin;
+
 export interface ApiIdentityPlugin {
   getIdentities: (context: ZudokuContext) => Promise<ApiIdentity[]>;
 }
@@ -40,11 +53,7 @@ export type ProfileNavigationItem = {
   weight?: number;
   category?: "top" | "middle" | "bottom";
   children?: ProfileNavigationItem[];
-  icon?: React.ComponentType<
-    LucideProps & {
-      [key: string]: any;
-    }
-  >;
+  icon?: LucideIcon;
 };
 
 export interface CommonPlugin {
@@ -55,6 +64,15 @@ export interface CommonPlugin {
   getMdxComponents?: () => MdxComponentsType;
 }
 
+export type EventConsumerPlugin<Event extends ZudokuEvents = ZudokuEvents> = {
+  events: { [K in keyof Event]: Event[K] };
+};
+
+export const isEventConsumerPlugin = (
+  obj: ZudokuPlugin,
+): obj is EventConsumerPlugin =>
+  "events" in obj && typeof obj.events === "object";
+
 export const isProfileMenuPlugin = (
   obj: ZudokuPlugin,
 ): obj is ProfileMenuPlugin =>

package/src/lib/errors/RouterError.tsx

@@ -1,4 +1,4 @@
-import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import { isRouteErrorResponse, useRouteError } from "react-router";
 import { NotFoundPage } from "../components/NotFoundPage.js";
 import { ErrorAlert } from "./ErrorAlert.js";
 

package/src/lib/hooks/index.ts

@@ -0,0 +1,5 @@
+import { useTheme as useThemeImport } from "next-themes";
+import { useEvent as useEventImport } from "./useEvent.js";
+
+export const useEvent = /*@__PURE__*/ useEventImport;
+export const useTheme = /*@__PURE__*/ useThemeImport;

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

@@ -0,0 +1,149 @@
+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 { assertType, describe, expect, it, vi } from "vitest";
+import { ZudokuProvider } from "../components/context/ZudokuProvider.js";
+import { ZudokuContext, type ZudokuEvents } from "../core/ZudokuContext.js";
+import { useEvent } from "./useEvent.js";
+
+/**
+ * @vitest-environment happy-dom
+ */
+
+const createTestContext = () => {
+  const context = new ZudokuContext({});
+  const queryClient = new QueryClient();
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={queryClient}>
+      <ZudokuProvider context={context}>{children}</ZudokuProvider>
+    </QueryClientProvider>
+  );
+
+  return { context, wrapper };
+};
+
+const locationData = {
+  pathname: "/test",
+  hash: "",
+  search: "",
+  key: "",
+  state: {},
+} satisfies Location;
+
+describe("useEvent", () => {
+  it("returns latest event data without callback", async () => {
+    const { context, wrapper } = createTestContext();
+    const { result } = renderHook(() => useEvent("location"), { wrapper });
+
+    await act(() => Promise.resolve());
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+
+    expect(result.current).toEqual([{ to: locationData }]);
+  });
+
+  it("transforms event data with callback", async () => {
+    const { context, wrapper } = createTestContext();
+    const { result } = renderHook(
+      () => useEvent("location", ({ to }) => to.pathname),
+      { wrapper },
+    );
+
+    await act(() => Promise.resolve());
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+
+    await waitFor(() => expect(result.current).toEqual("/test"));
+  });
+
+  it("handles side effects without return value", async () => {
+    const { context, wrapper } = createTestContext();
+    const sideEffect = vi.fn();
+
+    const { result } = renderHook(
+      () =>
+        useEvent("location", (event) => {
+          sideEffect(event);
+        }),
+      { wrapper },
+    );
+
+    await act(() => Promise.resolve());
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+
+    expect(result.current).toBeUndefined();
+    expect(sideEffect).toHaveBeenCalledWith({ to: locationData });
+    expect(sideEffect).toHaveBeenCalledTimes(1);
+  });
+
+  it("removes event listener on cleanup", async () => {
+    const { context, wrapper } = createTestContext();
+    const sideEffect = vi.fn();
+
+    const { unmount } = renderHook(
+      () =>
+        useEvent("location", (event) => {
+          sideEffect(event);
+        }),
+      { wrapper },
+    );
+
+    await act(() => Promise.resolve());
+
+    // First event emission
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+    expect(sideEffect).toHaveBeenCalledTimes(1);
+
+    // Unmount the hook
+    unmount();
+
+    // Second event emission after unmount
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+
+    // The callback should not have been called again
+    expect(sideEffect).toHaveBeenCalledTimes(1);
+  });
+
+  describe("types", () => {
+    const { wrapper } = createTestContext();
+
+    it("infers event type when no callback is provided", () => {
+      const hook = renderHook(() => useEvent("location"), { wrapper });
+      assertType<Parameters<ZudokuEvents["location"]> | undefined>(
+        hook.result.current,
+      );
+    });
+
+    it("infers string type from pathname callback", () => {
+      const hook = renderHook(
+        () => useEvent("location", ({ to }) => to.pathname),
+        { wrapper },
+      );
+      assertType<string>(hook.result.current);
+    });
+
+    it("infers object type from object callback", () => {
+      const hook = renderHook(
+        () => useEvent("location", ({ to }) => ({ query: to.search })),
+        { wrapper },
+      );
+      assertType<{ query: string }>(hook.result.current);
+    });
+
+    it("infers void type from empty callback", () => {
+      const hook = renderHook(() => useEvent("location", () => {}), {
+        wrapper,
+      });
+      assertType<void>(hook.result.current);
+    });
+  });
+});

package/src/lib/hooks/useEvent.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import type { ZudokuEvents } from "../core/ZudokuContext.js";
+
+type EventParameters<Event extends keyof ZudokuEvents> = Parameters<
+  ZudokuEvents[Event]
+>;
+
+/**
+ * Hook to subscribe to Zudoku events with automatic cleanup
+ * @param event The event to subscribe to
+ * @param callback Optional callback to be called when the event is emitted
+ * @returns The latest event data if no callback is provided, or the callback's return value if it returns something
+ */
+export function useEvent<E extends keyof ZudokuEvents>(
+  event: E,
+): EventParameters<E>;
+export function useEvent<E extends keyof ZudokuEvents, R>(
+  event: E,
+  callback: (...args: EventParameters<E>) => R,
+): R;
+export function useEvent<E extends keyof ZudokuEvents, R>(
+  event: E,
+  callback?: (...args: EventParameters<E>) => R,
+) {
+  const zudoku = useZudoku();
+  const [latestData, setLatestData] = useState<R | EventParameters<E>>();
+
+  useEffect(() => {
+    return zudoku.addEventListener(event, ((...args: EventParameters<E>) => {
+      if (callback) {
+        const result = callback(...args);
+        setLatestData(result);
+      } else {
+        setLatestData(args);
+      }
+    }) as ZudokuEvents[E]);
+  }, [zudoku, event, callback]);
+
+  return latestData;
+}

package/src/lib/icons.ts

@@ -1 +1,2 @@
 export * from "lucide-react";
+export * from "./MissingIcon.js";

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

@@ -0,0 +1,50 @@
+import { GraphQLJSON } from "graphql-type-json";
+import { GraphQLScalarType } from "graphql/index.js";
+import { RecordAny } from "../../util/traverse.js";
+
+export const CIRCULAR_REF = "$[Circular Reference]";
+
+const handleCircularRefs = (
+  obj: any,
+  visited = new Map<string, string[]>(),
+  path: string[] = [],
+): any => {
+  if (obj === CIRCULAR_REF) return CIRCULAR_REF;
+  if (obj === null || typeof obj !== "object") return obj;
+
+  const currentPath = path.join(".");
+
+  if (obj.type === "object" && obj.properties) {
+    const schemaKey = Object.keys(obj.properties).sort().join("-");
+
+    if (visited.has(schemaKey)) {
+      const prevPaths = visited.get(schemaKey)!;
+      if (prevPaths.some((prev) => currentPath.startsWith(prev))) {
+        return CIRCULAR_REF;
+      }
+      visited.set(schemaKey, [...prevPaths, currentPath]);
+    } else {
+      visited.set(schemaKey, [currentPath]);
+    }
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item, index) =>
+      handleCircularRefs(item, visited, [...path, `${index}`]),
+    );
+  }
+
+  const result: RecordAny = {};
+  for (const [key, value] of Object.entries(obj)) {
+    result[key] = handleCircularRefs(value, visited, [...path, key]);
+  }
+  return result;
+};
+
+export const GraphQLJSONSchema = new GraphQLScalarType({
+  ...GraphQLJSON,
+  name: "JSONSchema",
+  description: "OpenAPI schema scalar type that handles circular references",
+  serialize: (value: unknown) =>
+    GraphQLJSON.serialize(handleCircularRefs(value)),
+});