zudoku 0.0.0-f3d517c → 0.0.0-f40ea27

package/src/lib/errors/ErrorAlert.tsx

@@ -2,8 +2,7 @@
 import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { DeveloperHint } from "../components/DeveloperHint.js";
 import { Heading } from "../components/Heading.js";
-import { ProseClasses } from "../components/Markdown.js";
-import { cn } from "../util/cn.js";
+import { Typography } from "../components/Typography.js";
 import { ZudokuError } from "../util/invariant.js";
 
 export function ErrorAlert({ error }: { error: unknown }) {
@@ -19,12 +18,7 @@ export function ErrorAlert({ error }: { error: unknown }) {
   const stringError = cause instanceof Error ? String(cause.stack) : stack;
 
   return (
-    <div
-      className={cn(
-        ProseClasses,
-        "grid grid-cols-1 !max-w-none pt-(--padding-content-top)",
-      )}
-    >
+    <Typography className="grid grid-cols-1 !max-w-none pt-(--padding-content-top)">
       <Heading level={1}>{title}</Heading>
       Error: {message}
       {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}
@@ -37,6 +31,6 @@ export function ErrorAlert({ error }: { error: unknown }) {
           />
         </div>
       )}
-    </div>
+    </Typography>
   );
 }

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

@@ -116,11 +116,13 @@ describe("useEvent", () => {
   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 event type when no callback is provided", async () => {
+      await act(async () => {
+        const hook = renderHook(() => useEvent("location"), { wrapper });
+        assertType<Parameters<ZudokuEvents["location"]> | undefined>(
+          hook.result.current,
+        );
+      });
     });
 
     it("infers string type from pathname callback", () => {

package/src/lib/hooks/useHotkey.ts

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from "react";
+import { isAppleDevice } from "../util/os.js";
+
+const keymap = {
+  other: {
+    alt: "Alt",
+    meta: "Ctrl",
+    ctrl: "Ctrl",
+    shift: "⇧",
+    option: "Alt",
+  },
+  apple: {
+    alt: "⌥",
+    meta: "⌘",
+    ctrl: "Ctrl",
+    shift: "⇧",
+    option: "⌥",
+  },
+};
+
+export const useHotkey = (hotkey: string, callback: () => void) => {
+  const hotkeySanitized = hotkey.toLowerCase().split("+");
+  const meta = hotkeySanitized.includes("meta");
+  const shift = hotkeySanitized.includes("shift");
+  const alt =
+    hotkeySanitized.includes("option") || hotkeySanitized.includes("alt");
+  const ctrl = hotkeySanitized.includes("ctrl");
+
+  const key = hotkey.split("+").pop();
+
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (
+        (event.code === `Key${key?.toUpperCase()}` ||
+          event.code.toLowerCase() === key?.toLowerCase()) &&
+        event.metaKey === meta &&
+        event.shiftKey === shift &&
+        event.altKey === alt &&
+        event.ctrlKey === ctrl
+      ) {
+        event.preventDefault();
+        callbackRef.current();
+      }
+    };
+
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [key, meta, shift, alt, ctrl]);
+
+  return {
+    trigger: () => callbackRef.current(),
+    label: hotkeySanitized.map((key: string) =>
+      key === "meta" ||
+      key === "ctrl" ||
+      key === "alt" ||
+      key === "shift" ||
+      key === "option"
+        ? keymap[isAppleDevice() ? "apple" : "other"][key]
+        : key,
+    ),
+  };
+};

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

@@ -13,7 +13,7 @@ export const Catalog = ({
   filterCatalogItems = (items) => items,
   label = "API Library",
   categoryLabel,
-}: Omit<ApiCatalogPluginOptions, "navigationId"> & {
+}: Omit<ApiCatalogPluginOptions, "path"> & {
   categoryLabel?: string;
 }) => {
   const auth = useAuthState();

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

@@ -1,6 +1,6 @@
 import slugify from "@sindresorhus/slugify";
 import { matchPath } from "react-router";
-import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import type { AuthState } from "../../authentication/state.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 import { joinUrl } from "../../util/joinUrl.js";
@@ -22,46 +22,46 @@ export type CatalogCategory = {
 };
 
 export type ApiCatalogPluginOptions = {
-  navigationId: string;
+  path: string;
   label: string;
   categories?: CatalogCategory[];
   items: ApiCatalogItem[];
-  filterCatalogItems?: filterCatalogItems;
+  filterCatalogItems?: FilterCatalogItemsFn;
 };
 
 export type CatalogContext<ProviderData = unknown> = {
   auth: AuthState<ProviderData>;
 };
 
-export type filterCatalogItems<ProviderData = unknown> = (
+export type FilterCatalogItemsFn<ProviderData = unknown> = (
   items: ApiCatalogItem[],
   { auth }: CatalogContext<ProviderData>,
 ) => ApiCatalogItem[];
 
 export const apiCatalogPlugin = ({
-  navigationId,
+  path,
   items,
   label,
   categories = [],
   filterCatalogItems,
 }: {
-  navigationId: string;
+  path: string;
   label: string;
   categories?: CatalogCategory[];
   items: ApiCatalogItem[];
-  filterCatalogItems?: filterCatalogItems;
+  filterCatalogItems?: FilterCatalogItemsFn;
 }): ZudokuPlugin => {
   const paths = Object.fromEntries(
     categories.flatMap((category) =>
       [undefined, ...category.tags].map((tag) => [
-        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),
+        joinUrl(path, tag ? getKey(category.label, tag) : undefined),
         tag,
       ]),
     ),
   );
 
   return {
-    getSidebar: async (currentPath) => {
+    getNavigation: async (currentPath) => {
       const matches = Object.keys(paths).some((path) =>
         matchPath(path, currentPath),
       );
@@ -70,13 +70,13 @@ export const apiCatalogPlugin = ({
         return [];
       }
 
-      const sidebar: SidebarItem[] = categories.map((category) => ({
-        type: "category" as const,
+      const navigation: NavigationItem[] = categories.map((category) => ({
+        type: "category",
         label: category.label,
         collapsible: false,
         items: category.tags.map((tag) => ({
-          type: "doc" as const,
-          id: joinUrl(navigationId, getKey(category.label, tag)),
+          type: "link",
+          to: joinUrl(path, getKey(category.label, tag)),
           label: tag,
           badge: {
             label: String(
@@ -84,19 +84,19 @@ export const apiCatalogPlugin = ({
                 api.categories.find((c) => c.tags.includes(tag)),
               ).length,
             ),
-            color: "outline" as const,
+            color: "outline",
           },
         })),
       }));
 
-      sidebar.unshift({
-        type: "doc" as const,
-        id: joinUrl(navigationId),
+      navigation.unshift({
+        type: "link",
+        to: joinUrl(path),
         label: "Overview",
-        badge: { label: String(items.length), color: "outline" as const },
+        badge: { label: String(items.length), color: "outline" },
       });
 
-      return sidebar;
+      return navigation;
     },
     getRoutes: () =>
       Object.entries(paths).map(([path, tag]) => ({

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

@@ -3,19 +3,21 @@ import {
   useQueryClient,
   useSuspenseQuery,
 } from "@tanstack/react-query";
-import { AnimatePresence } from "framer-motion";
 import {
   CheckIcon,
+  CircleSlashIcon,
   CopyIcon,
   EyeIcon,
   EyeOffIcon,
   PencilLineIcon,
-  RotateCwIcon,
+  RefreshCwIcon,
   TrashIcon,
   XIcon,
 } from "lucide-react";
+import { AnimatePresence } from "motion/react";
 import React, { useState } from "react";
 import { Link } from "react-router";
+import { Alert, AlertTitle } from "zudoku/ui/Alert.js";
 import { Card, CardHeader } from "zudoku/ui/Card.js";
 import {
   Dialog,
@@ -32,6 +34,7 @@ import { Slot } from "../../components/Slot.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
+import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
 import { type ApiConsumer, type ApiKey, type ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
@@ -173,7 +176,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   };
 
   return (
-    <div className="max-w-screen-lg h-full pt-(--padding-content-top) pb-(--padding-content-bottom)">
+    <div className="max-w-screen-md h-full pt-(--padding-content-top) pb-(--padding-content-bottom)">
       <Slot.Target name="api-keys-list-page" />
 
       <div className="flex justify-between pb-3">
@@ -187,9 +190,26 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
       <p>Create, manage, and monitor your API keys</p>
 
       <Slot.Target name="api-keys-list-page-before-keys" />
-
       <div className="h-8"></div>
-      <div className="grid grid-cols-8">
+      {rollKeyMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{rollKeyMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      {updateConsumerMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{updateConsumerMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      {deleteKeyMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{deleteKeyMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      <div className="">
         {data.length === 0 ? (
           <div className="flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground">
             <p className="text-center">
@@ -278,35 +298,39 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                   <div className="flex justify-end">
                     {service.updateConsumer && (
                       <Button
-                        size="icon"
                         variant="ghost"
                         onClick={() =>
                           handleStartEdit(consumers.id, consumers.label)
                         }
                         className={cn(
+                          "flex gap-2",
                           editingConsumerId === consumers.id &&
                             "opacity-0! pointer-events-none",
                         )}
                         disabled={editingConsumerId === consumers.id}
                       >
                         <PencilLineIcon size={16} />
+                        Edit label
                       </Button>
                     )}
                     {service.rollKey && (
                       <Dialog>
                         <DialogTrigger asChild>
                           <Button
-                            size="icon"
                             title="Roll this key"
                             variant="ghost"
                             disabled={rollKeyMutation.isPending}
-                            className={
-                              rollKeyMutation.isPending
-                                ? "animate-spin"
-                                : undefined
-                            }
+                            className="flex items-center gap-2"
                           >
-                            <RotateCwIcon size={16} />
+                            <RefreshCwIcon
+                              size={16}
+                              className={
+                                rollKeyMutation.isPending
+                                  ? "animate-spin"
+                                  : undefined
+                              }
+                            />
+                            Roll key
                           </Button>
                         </DialogTrigger>
                         <DialogContent>
@@ -397,7 +421,7 @@ const RevealApiKey = ({
   className?: string;
 }) => {
   const [revealed, setRevealed] = useState(false);
-  const [copied, setCopied] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
 
   const { key, createdOn, expiresOn } = apiKey;
   const isExpired = expiresOn && new Date(expiresOn) < new Date();
@@ -439,15 +463,10 @@ const RevealApiKey = ({
           </Button>
           <Button
             variant="ghost"
-            onClick={() => {
-              void navigator.clipboard.writeText(key).then(() => {
-                setCopied(true);
-                setTimeout(() => setCopied(false), 2000);
-              });
-            }}
+            onClick={() => copyToClipboard(key)}
             size="icon"
           >
-            {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+            {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
           </Button>
         </div>
         <div className="flex gap-1 mt-0.5 text-nowrap">
@@ -473,7 +492,7 @@ const RevealApiKey = ({
         </div>
       </div>
       <div className="flex justify-end">
-        {isExpired && onDeleteKey && (
+        {expiresOn && onDeleteKey && (
           <Dialog>
             <DialogTrigger asChild>
               <Button variant="ghost" size="icon">

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

@@ -56,6 +56,24 @@ export interface ApiConsumer {
   key?: ApiKey;
 }
 
+const parseJsonSafe = async (response: Response) => {
+  try {
+    return await response.json();
+  } catch {
+    return;
+  }
+};
+
+const throwIfProblemJson = async (response: Response) => {
+  const contentType = response.headers.get("content-type");
+  if (!response.ok && contentType?.includes("application/problem+json")) {
+    const data = await parseJsonSafe(response);
+    if (data.type && data.title) {
+      throw new Error(data.detail ?? data.title);
+    }
+  }
+};
+
 const createDefaultHandler = (deploymentName: string): ApiKeyService => {
   return {
     deleteKey: async (consumerId, keyId, context) => {
@@ -67,8 +85,8 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
         },
       );
       await context.signRequest(request);
-
       const response = await fetch(request);
+      await throwIfProblemJson(response);
       invariant(response.ok, "Failed to delete API key");
     },
     updateConsumer: async (consumer, context) => {
@@ -89,6 +107,7 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
           ),
         ),
       );
+      await throwIfProblemJson(response);
       invariant(response.ok, "Failed to update API key description");
     },
     rollKey: async (consumerId, context) => {
@@ -102,13 +121,12 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
               headers: {
                 "Content-Type": "application/json",
               },
-              body: JSON.stringify({
-                expiresOn: new Date(),
-              }),
+              body: JSON.stringify({}),
             },
           ),
         ),
       );
+      await throwIfProblemJson(response);
       invariant(response.ok, "Failed to delete API key");
     },
     getConsumers: async (context) => {
@@ -118,13 +136,15 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
       await context.signRequest(request);
 
       const keys = await fetch(request);
+      await throwIfProblemJson(keys);
       invariant(keys.ok, "Failed to fetch API keys");
 
       const data = (await keys.json()) as {
         data: [
           {
             id: string;
-            label: string;
+            label?: string;
+            subject?: string;
             apiKeys: {
               data: ApiKey[];
             };
@@ -134,7 +154,7 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
 
       return data.data.map((consumer) => ({
         id: consumer.id,
-        label: consumer.label || "API Key",
+        label: consumer.label ?? consumer.subject ?? "API Key",
         apiKeys: consumer.apiKeys.data,
         key: consumer.apiKeys.data.at(0),
       }));
@@ -176,7 +196,7 @@ export const apiKeyPlugin = (
             return request;
           },
           id: consumer.id,
-          label: consumer.description ?? consumer.id,
+          label: consumer.label,
         }));
       } catch {
         return [];

package/src/lib/plugins/custom-pages/index.tsx

@@ -1,24 +1,29 @@
-import { type ComponentType, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import type { RouteObject } from "react-router";
-import type { NavigationPlugin, ZudokuPlugin } from "../../core/plugins.js";
-import type { ExposedComponentProps } from "../../util/useExposedProps.js";
-import { CustomPage } from "./CustomPage.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import { traverseNavigation } from "../../components/navigation/utils.js";
+import type { NavigationPlugin } from "../../core/plugins.js";
 
 export type CustomPageConfig = {
   path: string;
-  prose?: boolean;
   element?: ReactNode;
-  render?: ComponentType<ExposedComponentProps>;
 };
 
 export const customPagesPlugin = (
-  config: CustomPageConfig[],
-): ZudokuPlugin & NavigationPlugin => {
-  return {
-    getRoutes: (): RouteObject[] =>
-      config.map(({ path, ...props }) => ({
-        path,
-        element: <CustomPage {...props} />,
-      })),
-  };
-};
+  navigation: NavigationItem[] = [],
+): NavigationPlugin => ({
+  getRoutes: (): RouteObject[] => {
+    const customPages: RouteObject[] = [];
+
+    traverseNavigation(navigation, (item) => {
+      if (item.type === "custom-page") {
+        customPages.push({
+          path: item.path,
+          element: item.element,
+        });
+      }
+    });
+
+    return customPages;
+  },
+});