zudoku 0.3.0-dev.14 → 0.3.0-dev.140

package/src/lib/plugins/{api-key → api-keys}/SettingsApiKeys.tsx

@@ -6,12 +6,14 @@ import {
 import { EyeIcon, EyeOffIcon, RotateCwIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { Slotlet } from "../../components/SlotletProvider.js";
 import { Button } from "../../ui/Button.js";
+import { cn } from "../../util/cn.js";
 import { ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
-  const context = useDevPortal();
+  const context = useZudoku();
   const queryClient = useQueryClient();
   const { data } = useSuspenseQuery({
     queryFn: () => service.getKeys(context),
@@ -32,9 +34,22 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
     },
   });
 
+  const rollKeyMutation = useMutation({
+    mutationFn: (id: string) => {
+      if (!service.rollKey) {
+        throw new Error("rollKey not implemented");
+      }
+
+      return service.rollKey(id, context);
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["api-keys"] }),
+  });
+
   return (
     <div className="max-w-screen-lg h-full pt-[--padding-content-top] pb-[--padding-content-bottom]">
-      <div className="flex justify-between mb-4 border-b border-border pb-3">
+      <Slotlet name="api-keys-list-page" />
+
+      <div className="flex justify-between mb-4 border-b pb-3">
         <h1 className="font-medium text-2xl">API Keys</h1>
         {service.createKey && (
           <Button asChild>
@@ -43,24 +58,31 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
         )}
       </div>
 
+      <Slotlet name="api-keys-list-page-before-keys" />
+
       {data.length === 0 ? (
-        <div className="flex flex-col justify-center gap-4 items-center h-1/2 my-8">
-          <div className="text-center">
+        <div className="flex flex-col justify-center gap-4 items-center p-8 border rounded bg-muted/30 text-muted-foreground">
+          <p className="text-center">
             No API keys created yet.
             <br />
-            Get started and create the first one now
-          </div>
+            Get started and create your first key.
+          </p>
           {service.createKey && (
-            <Button asChild>
+            <Button asChild variant="outline">
               <Link to="/settings/api-keys/new">Create API Key</Link>
             </Button>
           )}
         </div>
       ) : (
-        <ul className="grid grid-cols-[minmax(250px,min-content)_1fr_min-content] ">
-          {data.map((key: any) => (
+        <ul
+          className={cn(
+            "grid grid-cols-1  rounded border",
+            "lg:grid-cols-[minmax(250px,min-content)_1fr_min-content]",
+          )}
+        >
+          {data.map((key) => (
             <li
-              className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
+              className="border-b p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
               key={key.id}
             >
               <div className="flex flex-col gap-1 text-sm">
@@ -78,12 +100,23 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                   )}
                 </div>
               </div>
-              <div className="items-center flex justify-center">
+              <div className="items-center flex lg:justify-center">
                 <RevealApiKey apiKey={key.key} />
               </div>
               <div className="flex gap-2">
                 {service.rollKey && (
-                  <Button size="icon">
+                  <Button
+                    size="icon"
+                    title="Roll this key"
+                    variant="ghost"
+                    onClick={() => {
+                      if (!confirm("Do you want to roll this key?")) {
+                        return;
+                      }
+
+                      rollKeyMutation.mutate(key.id);
+                    }}
+                  >
                     <RotateCwIcon size={16} />
                   </Button>
                 )}
@@ -116,10 +149,10 @@ const RevealApiKey = ({ apiKey }: { apiKey: string }) => {
   const [revealed, setRevealed] = useState(false);
 
   return (
-    <div className="flex gap-2 items-center text-sm">
-      <code className="border border-border rounded bg-gray-100 dark:bg-gray-950 p-1 font-mono">
+    <div className="flex gap-2 items-center text-sm w-full">
+      <div className="border rounded bg-gray-100 dark:bg-gray-950 p-1 font-mono w-fit overflow-x-scroll h-9 items-center flex px-2">
         {revealed ? apiKey : "•".repeat(apiKey.length)}
-      </code>
+      </div>
       <Button
         variant="outline"
         onClick={() => setRevealed((prev) => !prev)}

package/src/lib/plugins/{api-key → api-keys}/index.tsx

@@ -1,26 +1,25 @@
-import logger from "loglevel";
-import { Outlet, useRouteError } from "react-router-dom";
-import invariant from "tiny-invariant";
-import { useAuth } from "../../authentication/hook.js";
+import { type RouteObject } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
+  ProfileMenuPlugin,
 } from "../../core/plugins.js";
-import { Button } from "../../ui/Button.js";
+import { RouterError } from "../../errors/RouterError.js";
+import invariant from "../../util/invariant.js";
 import { CreateApiKey } from "./CreateApiKey.js";
+import { ProtectedRoute } from "./ProtectedRoute.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
 
-export type ApiKeyResults = Promise<ApiKey[]>;
 const DEFAULT_API_KEY_ENDPOINT =
   "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev";
 
 export type ApiKeyService = {
-  getKeys: (context: DevPortalContext) => ApiKeyResults;
+  getKeys: (context: DevPortalContext) => Promise<ApiKey[]>;
   rollKey?: (id: string, context: DevPortalContext) => Promise<void>;
   deleteKey?: (id: string, context: DevPortalContext) => Promise<void>;
   updateKeyDescription?: (
-    apiKey: { jd: string; description: string },
+    apiKey: { id: string; description: string },
     context: DevPortalContext,
   ) => Promise<void>;
   getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
@@ -55,6 +54,16 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
       const response = await fetch(request);
       invariant(response.ok, "Failed to delete API key");
     },
+    rollKey: async (id, context) => {
+      const response = await fetch(
+        await context.signRequest(
+          new Request(endpoint + `/v1/developer/api-keys/${id}/key`, {
+            method: "DELETE",
+          }),
+        ),
+      );
+      invariant(response.ok, "Failed to delete API key");
+    },
     createKey: async (apiKey, context) => {
       const request = new Request(endpoint + `/v1/developer/api-keys`, {
         method: "POST",
@@ -82,39 +91,9 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
   };
 };
 
-const ProtectedRoute = () => {
-  const auth = useAuth();
-
-  // TODO: should we suspend here somehow?
-  if (auth.isPending) {
-    return null;
-  }
-
-  return auth.isAuthenticated ? (
-    <Outlet />
-  ) : (
-    <div className="flex flex-col justify-center gap-2 items-center h-1/2 my-12">
-      Please login first to view this page
-      <Button onClick={() => auth.login()}>Login</Button>
-    </div>
-  );
-};
-
-const SettingsErrorBoundary = () => {
-  const error = useRouteError();
-  logger.error(String(error));
-
-  return (
-    <div className="flex flex-col justify-center gap-2 items-center h-1/2 my-12">
-      <h1>Something went wrong</h1>
-      {error instanceof Error && <p>{error.message}</p>}
-    </div>
-  );
-};
-
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
-): DevPortalPlugin & ApiIdentityPlugin => {
+): DevPortalPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
   const endpoint =
     "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT;
 
@@ -122,6 +101,12 @@ export const apiKeyPlugin = (
     "getKeys" in options ? options : createDefaultHandler(endpoint);
 
   return {
+    getProfileMenuItems: () => [
+      {
+        label: "API Keys",
+        path: "/settings/api-keys",
+      },
+    ],
     getIdentities: async (context) => {
       try {
         const keys = await service.getKeys(context);
@@ -138,11 +123,12 @@ export const apiKeyPlugin = (
         return [];
       }
     },
-    getRoutes: () => {
+    getRoutes: (): RouteObject[] => {
+      // TODO: Make lazy
       return [
         {
           element: <ProtectedRoute />,
-          errorElement: <SettingsErrorBoundary />,
+          errorElement: <RouterError />,
           children: [
             {
               path: "/settings/api-keys",

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { RouteObject } from "react-router-dom";
+import { ProseClasses } from "../../components/Markdown.js";
+import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+
+type CustomPageConfig = Array<{
+  path: string;
+  element: ReactNode;
+}>;
+
+export const customPagePlugin = (
+  config: CustomPageConfig,
+): DevPortalPlugin & NavigationPlugin => {
+  return {
+    getRoutes: (): RouteObject[] =>
+      config.map(({ path, element }) => ({
+        path,
+        // TODO: we should componentize prose pages
+        element: <div className={ProseClasses + " max-w-full"}>{element}</div>,
+      })),
+  };
+};

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,16 +1,17 @@
 import { useMDXComponents } from "@mdx-js/react";
-import { useMemo, type PropsWithChildren, type ReactNode } from "react";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { type PropsWithChildren } from "react";
+import { Link } from "react-router-dom";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
-import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
-import { isPathItem } from "../../components/navigation/util.js";
-import { Helmet } from "../../core/helmet.js";
-import { Link, useLocation } from "../../core/router.js";
+import {
+  useCurrentItem,
+  usePrevNext,
+} from "../../components/navigation/utils.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
 import slugify from "../../util/slugify.js";
-import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
 import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
@@ -22,7 +23,6 @@ const MarkdownHeadings = {
   ),
   h3: ({ children, id }) => (
     <Heading level={3} id={id} registerSidebarAnchor>
-      {" "}
       {children}
     </Heading>
   ),
@@ -39,17 +39,7 @@ export const MdxPage = ({
     defaultOptions?: MarkdownPluginDefaultOptions;
   }
 >) => {
-  const navItem = useTopNavigationItem();
-  const location = useLocation();
-
-  const categoryTitle = navItem
-    ? traverseNavigation(navItem, (_node, fullPath, parentNodes) => {
-        if (fullPath === location.pathname) {
-          return parentNodes.at(0)?.label;
-        }
-      })
-    : undefined;
-
+  const categoryTitle = useCurrentItem()?.categoryLabel;
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
   const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
@@ -65,30 +55,7 @@ export const MdxPage = ({
 
   const showToc = !hideToc && tocEntries.length > 0;
 
-  const { prev, next } = useMemo(() => {
-    let prev = { path: "", label: "" as ReactNode };
-    let next = { path: "", label: "" as ReactNode };
-    let shouldStop = false;
-
-    if (!navItem) return { prev, next };
-
-    traverseNavigation(navItem, (node, fullPath) => {
-      const item = { path: fullPath, label: node.label };
-
-      if (shouldStop && isPathItem(node) && !node.children?.length) {
-        next = item;
-        return true;
-      }
-      if (fullPath === location.pathname) {
-        shouldStop = true;
-      }
-      if (!shouldStop && isPathItem(node) && !node.children?.length) {
-        prev = item;
-      }
-    });
-
-    return { prev, next } as const;
-  }, [navItem, location.pathname]);
+  const { prev, next } = usePrevNext();
 
   return (
     <div className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between">
@@ -119,13 +86,11 @@ export const MdxPage = ({
           <>
             <hr />
             <div className="not-prose flex items-center justify-between gap-8">
-              {prev.path ? (
+              {prev ? (
                 <Link
-                  to={prev.path}
-                  className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
-                  title={
-                    typeof prev.label === "string" ? prev.label : undefined
-                  }
+                  to={prev.id}
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  title={prev.label}
                 >
                   <div className="text-sm text-muted-foreground">
                     ← Previous page
@@ -137,13 +102,11 @@ export const MdxPage = ({
               ) : (
                 <div className="flex-1" />
               )}
-              {next.path ? (
+              {next ? (
                 <Link
-                  to={next.path}
-                  className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
-                  title={
-                    typeof next.label === "string" ? next.label : undefined
-                  }
+                  to={next.id}
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  title={next.label}
                 >
                   <div className="text-sm text-muted-foreground">
                     Next page →

package/src/lib/plugins/markdown/Toc.tsx

@@ -1,4 +1,5 @@
 import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
+import { ListTreeIcon } from "lucide-react";
 import {
   useEffect,
   useRef,
@@ -8,7 +9,6 @@ import {
 } from "react";
 import { AnchorLink } from "../../components/AnchorLink.js";
 import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
-import { ListTreeIcon } from "../../core/icons.js";
 import { cn } from "../../util/cn.js";
 
 const DATA_ANCHOR_ATTR = "data-active";
@@ -53,7 +53,11 @@ const TocItem = ({
 export const Toc = ({ entries }: { entries: TocEntry[] }) => {
   const { activeAnchor } = useViewportAnchor();
   const listWrapperRef = useRef<HTMLUListElement>(null);
-  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({});
+  const paintedOnce = useRef(false);
+  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({
+    top: 0,
+    opacity: 0,
+  });
 
   // synchronize active anchor indicator with the scroll position
   useEffect(() => {
@@ -64,10 +68,7 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
     );
 
     if (!activeElement) {
-      setIndicatorStyles({
-        "--indicator-top": "0",
-        "--indicator-opacity": 0,
-      } as CSSProperties);
+      setIndicatorStyles({ top: 0, opacity: 0 });
       return;
     }
 
@@ -75,9 +76,16 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
     const topElement = activeElement.getBoundingClientRect().top;
 
     setIndicatorStyles({
-      "--indicator-top": `${topElement - topParent}px`,
-      "--indicator-opacity": 1,
-    } as CSSProperties);
+      opacity: 1,
+      top: `${topElement - topParent}px`,
+    });
+
+    if (paintedOnce.current) return;
+
+    // after all is painted, the indicator should animate
+    requestIdleCallback(() => {
+      paintedOnce.current = true;
+    });
   }, [activeAnchor]);
 
   return (
@@ -86,37 +94,42 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
         <ListTreeIcon size={16} />
         On this page
       </div>
-
-      <ul
-        ref={listWrapperRef}
-        style={indicatorStyle}
-        className={cn(
-          "relative ms-2 ps-4 font-medium list-none mt-0 space-y-2",
-          "before:absolute before:inset-0 before:right-auto before:bg-border before:w-[2px]",
-          "after:absolute after:-left-px after:-translate-y-1 after:top-[--indicator-top] after:opacity-[--indicator-opacity] after:h-6 after:bg-primary after:w-[4px] after:rounded after:ease-out after:[transition:top__150ms,opacity_325ms]",
-        )}
-      >
-        {entries.map((item) => (
-          <TocItem
-            isActive={item.id === activeAnchor}
-            key={item.id}
-            item={item}
-            className="pl-0"
-          >
-            {item.children && (
-              <ul className="list-none pl-4 pt-2 space-y-2">
-                {item.children.map((child) => (
-                  <TocItem
-                    item={child}
-                    isActive={child.id === activeAnchor}
-                    key={child.id}
-                  />
-                ))}
-              </ul>
-            )}
-          </TocItem>
-        ))}
-      </ul>
+      <div className="relative ms-2 ps-4">
+        <div className="absolute inset-0 right-auto bg-border w-[2px]" />
+        <div
+          className={cn(
+            "absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
+            paintedOnce.current &&
+              "ease-out [transition:top_150ms,opacity_325ms]",
+          )}
+          style={indicatorStyle}
+        />
+        <ul
+          ref={listWrapperRef}
+          className="relative font-medium list-none space-y-2"
+        >
+          {entries.map((item) => (
+            <TocItem
+              isActive={item.id === activeAnchor}
+              key={item.id}
+              item={item}
+              className="pl-0"
+            >
+              {item.children && (
+                <ul className="list-none pl-4 pt-2 space-y-2">
+                  {item.children.map((child) => (
+                    <TocItem
+                      item={child}
+                      isActive={child.id === activeAnchor}
+                      key={child.id}
+                    />
+                  ))}
+                </ul>
+              )}
+            </TocItem>
+          ))}
+        </ul>
+      </div>
     </aside>
   );
 };

package/src/lib/plugins/markdown/generateRoutes.tsx

@@ -1,8 +1,5 @@
-import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
-import { isPathItem } from "../../components/navigation/util.js";
-import { Navigate, type RouteObject } from "../../core/router.js";
-import { traverseNavigation } from "../../util/traverseNavigation.js";
-import { MdxPage } from "./MdxPage.js";
+import { type RouteObject } from "react-router-dom";
+
 import {
   MarkdownPluginDefaultOptions,
   MarkdownPluginOptions,
@@ -11,57 +8,32 @@ import {
 export const generateRoutes = (
   markdownFiles: MarkdownPluginOptions["markdownFiles"],
   defaultOptions?: MarkdownPluginDefaultOptions,
-): RouteObject[] => {
-  const routes = Object.entries(markdownFiles).flatMap(
-    ([file, importPromise]) => {
-      // @todo we can pass in the folder name and then filter the markdown files based on that path
-      const match = file.match(/pages\/(.*).mdx?$/);
-      const path = match?.at(1);
-
-      if (!path) return [];
-
-      const pathSegments = path.split("/");
-      const isIndexFile = pathSegments.at(-1) === "index";
-      const routePath = isIndexFile
-        ? pathSegments.slice(0, -1).join("/")
-        : path;
-
-      return {
-        path: routePath,
-        lazy: async () => {
-          const { default: Component, ...props } = await importPromise();
-
-          return {
-            element: (
-              <MdxPage
-                mdxComponent={Component}
-                {...props}
-                defaultOptions={defaultOptions}
-              />
-            ),
-          };
-        },
-      } satisfies RouteObject;
-    },
-  );
-
-  const rootRoutes = Array.from(
-    new Set(routes.map((route) => route.path.split("/").at(0))),
-  ).map((dir) => ({
-    path: `/${dir}`,
-    element: <Redirect />,
-  }));
-
-  return [...routes, ...rootRoutes];
-};
-
-const Redirect = () => {
-  const navItem = useTopNavigationItem();
-
-  if (!navItem) return null;
-
-  return traverseNavigation(navItem, (node, fullPath) => {
-    if ("children" in node || !isPathItem(node)) return;
-    return <Navigate to={fullPath} replace />;
+): RouteObject[] =>
+  Object.entries(markdownFiles).flatMap(([file, importPromise]) => {
+    // @todo we can pass in the folder name and then filter the markdown files based on that path
+    const match = file.match(/pages\/(.*).mdx?$/);
+    const path = match?.at(1);
+
+    if (!path) return [];
+
+    const pathSegments = path.split("/");
+    const isIndexFile = pathSegments.at(-1) === "index";
+    const routePath = isIndexFile ? pathSegments.slice(0, -1).join("/") : path;
+
+    return {
+      path: routePath,
+      lazy: async () => {
+        const { MdxPage } = await import("./MdxPage.js");
+        const { default: Component, ...props } = await importPromise();
+        return {
+          element: (
+            <MdxPage
+              mdxComponent={Component}
+              {...props}
+              defaultOptions={defaultOptions}
+            />
+          ),
+        };
+      },
+    } satisfies RouteObject;
   });
-};

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

@@ -29,10 +29,6 @@ export type MDXImport = {
 export const markdownPlugin = ({
   markdownFiles,
   defaultOptions,
-}: MarkdownPluginOptions): DevPortalPlugin => {
-  return {
-    getRoutes() {
-      return generateRoutes(markdownFiles, defaultOptions);
-    },
-  };
-};
+}: MarkdownPluginOptions): DevPortalPlugin => ({
+  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),
+});