@lukoweb/apitogo 0.1.0 → 0.1.2

package/src/lib/core/RouteGuard.tsx

@@ -1,193 +1,193 @@
-import { Helmet } from "@zudoku/react-helmet-async";
-import { use, useCallback, useEffect, useMemo } from "react";
-import {
-  matchPath,
-  Outlet,
-  useBlocker,
-  useLocation,
-  useNavigate,
-} from "react-router";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@lukoweb/apitogo/ui/Dialog.js";
-import { REASON_CODES } from "../../config/validators/reason-codes.js";
-import { useAuth } from "../authentication/hook.js";
-import { RenderContext } from "../components/context/RenderContext.js";
-import { useZudoku } from "../components/context/ZudokuContext.js";
-import { Layout } from "../components/Layout.js";
-import { ZudokuError } from "../util/invariant.js";
-
-export const SEARCH_PROTECTED_SECTION = "protected";
-
-type LoginDialogProps = {
-  open: boolean;
-  onCancel: () => void;
-  onLogin: () => void;
-  onRegister: () => void;
-};
-
-const LoginDialog = ({
-  open,
-  onCancel,
-  onLogin,
-  onRegister,
-}: LoginDialogProps) => (
-  <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onCancel()}>
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Login to continue</DialogTitle>
-      </DialogHeader>
-      <DialogDescription>Please login to access this page.</DialogDescription>
-      <DialogFooter>
-        <Button variant="outline" onClick={onCancel}>
-          Cancel
-        </Button>
-        <div className="w-full" />
-        <Button variant="secondary" onClick={onRegister}>
-          Register
-        </Button>
-        <Button onClick={onLogin}>Login</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-);
-
-const BypassRoute = ({ isProtectedRoute }: { isProtectedRoute: boolean }) => (
-  <>
-    {isProtectedRoute && (
-      <Helmet>
-        <meta
-          name="pagefind"
-          data-pagefind-filter={`section:${SEARCH_PROTECTED_SECTION}`}
-          content="true"
-        />
-      </Helmet>
-    )}
-    <Outlet />
-  </>
-);
-
-const ForbiddenPage = () => {
-  const renderContext = use(RenderContext);
-  renderContext.status = 403;
-
-  return (
-    <Layout>
-      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
-        <h1 className="text-2xl font-bold">Access Denied</h1>
-        <p className="text-muted-foreground">
-          You don't have permission to access this page.
-        </p>
-      </div>
-    </Layout>
-  );
-};
-
-export const RouteGuard = () => {
-  const auth = useAuth();
-  const zudoku = useZudoku();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const renderContext = use(RenderContext);
-  const shouldBypass = renderContext.bypassProtection;
-  const authCheckContext = useMemo(
-    () => ({ auth, context: zudoku, reasonCode: REASON_CODES }),
-    [auth, zudoku],
-  );
-  const { protectedRoutes } = zudoku;
-
-  const getAuthCheck = useCallback(
-    (pathname: string) => {
-      if (!protectedRoutes) return;
-      for (const [pattern, check] of Object.entries(protectedRoutes)) {
-        if (matchPath({ path: pattern, end: true }, pathname)) {
-          return check;
-        }
-      }
-    },
-    [protectedRoutes],
-  );
-
-  const currentAuthCheck = getAuthCheck(location.pathname);
-  const isProtectedRoute = currentAuthCheck !== undefined;
-  const rawResult = currentAuthCheck?.(authCheckContext) ?? true;
-  // Normalize: false is equivalent to UNAUTHORIZED
-  const authResult =
-    rawResult === false ? REASON_CODES.UNAUTHORIZED : rawResult;
-  const isForbidden = authResult === REASON_CODES.FORBIDDEN;
-  const needsToSignIn = authResult === REASON_CODES.UNAUTHORIZED;
-
-  const blocker = useBlocker(({ nextLocation }) => {
-    if (shouldBypass) return false;
-    const check = getAuthCheck(nextLocation.pathname);
-    if (!check) return false;
-    const result = check(authCheckContext);
-    // Only block for unauthorized (needs login), not for reason codes like "forbidden"
-    return result === false || result === REASON_CODES.UNAUTHORIZED;
-  });
-  const isBlocked = blocker.state === "blocked";
-
-  // Proceed after successful login
-  useEffect(() => {
-    if (!auth.isAuthenticated || !isBlocked) return;
-    const check = getAuthCheck(blocker.location.pathname);
-    if (!check) {
-      blocker.proceed?.();
-      return;
-    }
-    const result = check(authCheckContext);
-    // Proceed whenever the result is no longer UNAUTHORIZED (e.g. true or FORBIDDEN)
-    if (result !== false && result !== REASON_CODES.UNAUTHORIZED) {
-      blocker.proceed?.();
-    }
-  }, [
-    auth.isAuthenticated,
-    isBlocked,
-    blocker,
-    authCheckContext,
-    getAuthCheck,
-  ]);
-
-  if (isForbidden) {
-    return <ForbiddenPage />;
-  }
-
-  if (shouldBypass) {
-    return <BypassRoute isProtectedRoute={isProtectedRoute} />;
-  }
-
-  if (isProtectedRoute && !auth.isAuthEnabled) {
-    throw new ZudokuError("Authentication is not enabled", {
-      title: "Authentication is not enabled",
-      developerHint:
-        "To use protectedRoutes you need authentication to be enabled",
-    });
-  }
-
-  if (needsToSignIn && auth.isPending && typeof window !== "undefined") {
-    return null;
-  }
-
-  const showDialog = needsToSignIn || isBlocked;
-  const redirectTo = isBlocked
-    ? blocker.location.pathname + blocker.location.search
-    : location.pathname + location.search;
-
-  return (
-    <>
-      {!needsToSignIn && <Outlet />}
-      <LoginDialog
-        open={showDialog}
-        onCancel={needsToSignIn ? () => navigate(-1) : () => blocker.reset?.()}
-        onLogin={() => void auth.login({ redirectTo })}
-        onRegister={() => void auth.signup({ redirectTo })}
-      />
-    </>
-  );
-};
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@lukoweb/apitogo/ui/Dialog.js";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { use, useCallback, useEffect, useMemo } from "react";
+import {
+  matchPath,
+  Outlet,
+  useBlocker,
+  useLocation,
+  useNavigate,
+} from "react-router";
+import { REASON_CODES } from "../../config/validators/reason-codes.js";
+import { useAuth } from "../authentication/hook.js";
+import { RenderContext } from "../components/context/RenderContext.js";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import { Layout } from "../components/Layout.js";
+import { ZudokuError } from "../util/invariant.js";
+
+export const SEARCH_PROTECTED_SECTION = "protected";
+
+type LoginDialogProps = {
+  open: boolean;
+  onCancel: () => void;
+  onLogin: () => void;
+  onRegister: () => void;
+};
+
+const LoginDialog = ({
+  open,
+  onCancel,
+  onLogin,
+  onRegister,
+}: LoginDialogProps) => (
+  <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onCancel()}>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Login to continue</DialogTitle>
+      </DialogHeader>
+      <DialogDescription>Please login to access this page.</DialogDescription>
+      <DialogFooter>
+        <Button variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+        <div className="w-full" />
+        <Button variant="secondary" onClick={onRegister}>
+          Register
+        </Button>
+        <Button onClick={onLogin}>Login</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);
+
+const BypassRoute = ({ isProtectedRoute }: { isProtectedRoute: boolean }) => (
+  <>
+    {isProtectedRoute && (
+      <Helmet>
+        <meta
+          name="pagefind"
+          data-pagefind-filter={`section:${SEARCH_PROTECTED_SECTION}`}
+          content="true"
+        />
+      </Helmet>
+    )}
+    <Outlet />
+  </>
+);
+
+const ForbiddenPage = () => {
+  const renderContext = use(RenderContext);
+  renderContext.status = 403;
+
+  return (
+    <Layout>
+      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
+        <h1 className="text-2xl font-bold">Access Denied</h1>
+        <p className="text-muted-foreground">
+          You don't have permission to access this page.
+        </p>
+      </div>
+    </Layout>
+  );
+};
+
+export const RouteGuard = () => {
+  const auth = useAuth();
+  const zudoku = useZudoku();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const renderContext = use(RenderContext);
+  const shouldBypass = renderContext.bypassProtection;
+  const authCheckContext = useMemo(
+    () => ({ auth, context: zudoku, reasonCode: REASON_CODES }),
+    [auth, zudoku],
+  );
+  const { protectedRoutes } = zudoku;
+
+  const getAuthCheck = useCallback(
+    (pathname: string) => {
+      if (!protectedRoutes) return;
+      for (const [pattern, check] of Object.entries(protectedRoutes)) {
+        if (matchPath({ path: pattern, end: true }, pathname)) {
+          return check;
+        }
+      }
+    },
+    [protectedRoutes],
+  );
+
+  const currentAuthCheck = getAuthCheck(location.pathname);
+  const isProtectedRoute = currentAuthCheck !== undefined;
+  const rawResult = currentAuthCheck?.(authCheckContext) ?? true;
+  // Normalize: false is equivalent to UNAUTHORIZED
+  const authResult =
+    rawResult === false ? REASON_CODES.UNAUTHORIZED : rawResult;
+  const isForbidden = authResult === REASON_CODES.FORBIDDEN;
+  const needsToSignIn = authResult === REASON_CODES.UNAUTHORIZED;
+
+  const blocker = useBlocker(({ nextLocation }) => {
+    if (shouldBypass) return false;
+    const check = getAuthCheck(nextLocation.pathname);
+    if (!check) return false;
+    const result = check(authCheckContext);
+    // Only block for unauthorized (needs login), not for reason codes like "forbidden"
+    return result === false || result === REASON_CODES.UNAUTHORIZED;
+  });
+  const isBlocked = blocker.state === "blocked";
+
+  // Proceed after successful login
+  useEffect(() => {
+    if (!auth.isAuthenticated || !isBlocked) return;
+    const check = getAuthCheck(blocker.location.pathname);
+    if (!check) {
+      blocker.proceed?.();
+      return;
+    }
+    const result = check(authCheckContext);
+    // Proceed whenever the result is no longer UNAUTHORIZED (e.g. true or FORBIDDEN)
+    if (result !== false && result !== REASON_CODES.UNAUTHORIZED) {
+      blocker.proceed?.();
+    }
+  }, [
+    auth.isAuthenticated,
+    isBlocked,
+    blocker,
+    authCheckContext,
+    getAuthCheck,
+  ]);
+
+  if (isForbidden) {
+    return <ForbiddenPage />;
+  }
+
+  if (shouldBypass) {
+    return <BypassRoute isProtectedRoute={isProtectedRoute} />;
+  }
+
+  if (isProtectedRoute && !auth.isAuthEnabled) {
+    throw new ZudokuError("Authentication is not enabled", {
+      title: "Authentication is not enabled",
+      developerHint:
+        "To use protectedRoutes you need authentication to be enabled",
+    });
+  }
+
+  if (needsToSignIn && auth.isPending && typeof window !== "undefined") {
+    return null;
+  }
+
+  const showDialog = needsToSignIn || isBlocked;
+  const redirectTo = isBlocked
+    ? blocker.location.pathname + blocker.location.search
+    : location.pathname + location.search;
+
+  return (
+    <>
+      {!needsToSignIn && <Outlet />}
+      <LoginDialog
+        open={showDialog}
+        onCancel={needsToSignIn ? () => navigate(-1) : () => blocker.reset?.()}
+        onLogin={() => void auth.login({ redirectTo })}
+        onRegister={() => void auth.signup({ redirectTo })}
+      />
+    </>
+  );
+};

package/src/lib/errors/ErrorMessage.tsx

@@ -1,46 +1,50 @@
-import { Suspense, lazy } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
-import { DeveloperHint } from "../components/DeveloperHint.js";
-import { ZudokuError } from "../util/invariant.js";
-
-const SyntaxHighlight = lazy(() =>
-  import("@lukoweb/apitogo/ui/SyntaxHighlight.js").then((m) => ({
-    default: m.SyntaxHighlight,
-  })),
-);
-
-export function ErrorMessage({ error }: { error: unknown }) {
-  const message =
-    error instanceof Error ? error.message : "Something went wrong";
-
-  const showDeveloperHints = process.env.NODE_ENV === "development";
-
-  const hint = error instanceof ZudokuError ? error.developerHint : undefined;
-  const title =
-    error instanceof ZudokuError ? error.title : "Something went wrong";
-  const stack = error instanceof Error ? error.stack : undefined;
-  const cause = error instanceof Error ? error.cause : undefined;
-
-  const stringError = cause instanceof Error ? String(cause.stack) : stack;
-
-  return (
-    <>
-      <Alert variant="destructive">
-        <AlertTitle>{title}</AlertTitle>
-        <AlertDescription>{message}</AlertDescription>
-      </Alert>
-      {showDeveloperHints && hint && (
-        <DeveloperHint className="mb-4">{hint}</DeveloperHint>
-      )}
-      {showDeveloperHints && stringError && (
-        <Suspense>
-          <SyntaxHighlight
-            className="max-h-[400px] [&>pre]:p-4"
-            language="js"
-            code={stringError}
-          />
-        </Suspense>
-      )}
-    </>
-  );
-}
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import { Suspense, lazy } from "react";
+import { DeveloperHint } from "../components/DeveloperHint.js";
+import { ZudokuError } from "../util/invariant.js";
+
+const SyntaxHighlight = lazy(() =>
+  import("@lukoweb/apitogo/ui/SyntaxHighlight.js").then((m) => ({
+    default: m.SyntaxHighlight,
+  })),
+);
+
+export function ErrorMessage({ error }: { error: unknown }) {
+  const message =
+    error instanceof Error ? error.message : "Something went wrong";
+
+  const showDeveloperHints = process.env.NODE_ENV === "development";
+
+  const hint = error instanceof ZudokuError ? error.developerHint : undefined;
+  const title =
+    error instanceof ZudokuError ? error.title : "Something went wrong";
+  const stack = error instanceof Error ? error.stack : undefined;
+  const cause = error instanceof Error ? error.cause : undefined;
+
+  const stringError = cause instanceof Error ? String(cause.stack) : stack;
+
+  return (
+    <>
+      <Alert variant="destructive">
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>{message}</AlertDescription>
+      </Alert>
+      {showDeveloperHints && hint && (
+        <DeveloperHint className="mb-4">{hint}</DeveloperHint>
+      )}
+      {showDeveloperHints && stringError && (
+        <Suspense>
+          <SyntaxHighlight
+            className="max-h-[400px] [&>pre]:p-4"
+            language="js"
+            code={stringError}
+          />
+        </Suspense>
+      )}
+    </>
+  );
+}

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

@@ -1,80 +1,80 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { Helmet } from "@zudoku/react-helmet-async";
-import { useMatch } from "react-router";
-import { Link } from "@lukoweb/apitogo/components";
-import { useAuthState } from "../../authentication/state.js";
-import { Heading } from "../../components/Heading.js";
-import { Markdown } from "../../components/Markdown.js";
-import { joinUrl } from "../../util/joinUrl.js";
-import { type ApiCatalogPluginOptions, getKey } from "./index.js";
-
-export const Catalog = ({
-  items,
-  filterCatalogItems = (items) => items,
-  label = "API Library",
-  categoryLabel,
-}: Omit<ApiCatalogPluginOptions, "path"> & {
-  categoryLabel?: string;
-}) => {
-  const auth = useAuthState();
-  const match = useMatch({ path: "/catalog/:category" });
-  const activeCategory = match?.params.category;
-
-  const catalogItems = useSuspenseQuery({
-    queryFn: () => filterCatalogItems(items, { auth }),
-    queryKey: ["catalogItems", auth],
-  });
-
-  // Only index the overview page, ignore the rest
-  const dataSet = activeCategory ? { "data-pagefind-ignore": "all" } : {};
-
-  return (
-    <section className="pt-(--padding-content-top)" {...dataSet}>
-      <Helmet>
-        <title>
-          {categoryLabel ? `${categoryLabel} - ` : ""}
-          {label}
-        </title>
-      </Helmet>
-      <div className="grid gap-4">
-        <Heading level={2}>
-          {label}
-          {categoryLabel && ` - ${categoryLabel}`}
-        </Heading>
-
-        <div className="grid grid-cols-2 gap-4">
-          {catalogItems.data
-            .filter(
-              (api) =>
-                !activeCategory ||
-                api.categories.find((c) =>
-                  c.tags.find((t) => getKey(c.label, t) === activeCategory),
-                ),
-            )
-            .map((api) => (
-              <Link
-                to={joinUrl(api.path)}
-                className="no-underline hover:!text-foreground"
-                key={api.path}
-              >
-                <div className="border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal">
-                  <span className="font-semibold">{api.label}</span>
-                  <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>
-            ))}
-        </div>
-      </div>
-    </section>
-  );
-};
+import { Link } from "@lukoweb/apitogo/components";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { useMatch } from "react-router";
+import { useAuthState } from "../../authentication/state.js";
+import { Heading } from "../../components/Heading.js";
+import { Markdown } from "../../components/Markdown.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { type ApiCatalogPluginOptions, getKey } from "./index.js";
+
+export const Catalog = ({
+  items,
+  filterCatalogItems = (items) => items,
+  label = "API Library",
+  categoryLabel,
+}: Omit<ApiCatalogPluginOptions, "path"> & {
+  categoryLabel?: string;
+}) => {
+  const auth = useAuthState();
+  const match = useMatch({ path: "/catalog/:category" });
+  const activeCategory = match?.params.category;
+
+  const catalogItems = useSuspenseQuery({
+    queryFn: () => filterCatalogItems(items, { auth }),
+    queryKey: ["catalogItems", auth],
+  });
+
+  // Only index the overview page, ignore the rest
+  const dataSet = activeCategory ? { "data-pagefind-ignore": "all" } : {};
+
+  return (
+    <section className="pt-(--padding-content-top)" {...dataSet}>
+      <Helmet>
+        <title>
+          {categoryLabel ? `${categoryLabel} - ` : ""}
+          {label}
+        </title>
+      </Helmet>
+      <div className="grid gap-4">
+        <Heading level={2}>
+          {label}
+          {categoryLabel && ` - ${categoryLabel}`}
+        </Heading>
+
+        <div className="grid grid-cols-2 gap-4">
+          {catalogItems.data
+            .filter(
+              (api) =>
+                !activeCategory ||
+                api.categories.find((c) =>
+                  c.tags.find((t) => getKey(c.label, t) === activeCategory),
+                ),
+            )
+            .map((api) => (
+              <Link
+                to={joinUrl(api.path)}
+                className="no-underline hover:!text-foreground"
+                key={api.path}
+              >
+                <div className="border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal">
+                  <span className="font-semibold">{api.label}</span>
+                  <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>
+            ))}
+        </div>
+      </div>
+    </section>
+  );
+};