zudoku 0.1.1-dev.9 → 0.3.0-dev.100

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

@@ -0,0 +1,165 @@
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { EyeIcon, EyeOffIcon, RotateCwIcon, TrashIcon } from "lucide-react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+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 = useZudoku();
+  const queryClient = useQueryClient();
+  const { data } = useSuspenseQuery({
+    queryFn: () => service.getKeys(context),
+    queryKey: ["api-keys"],
+    retry: false,
+  });
+
+  const deleteKeyMutation = useMutation({
+    mutationFn: (id: string) => {
+      if (!service.deleteKey) {
+        throw new Error("deleteKey not implemented");
+      }
+
+      return service.deleteKey(id, context);
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+    },
+  });
+
+  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]">
+      <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>
+            <Link to="/settings/api-keys/new">Create API Key</Link>
+          </Button>
+        )}
+      </div>
+
+      <Slotlet name="api-keys-list-page-before-keys" />
+
+      {data.length === 0 ? (
+        <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 your first key.
+          </p>
+          {service.createKey && (
+            <Button asChild variant="outline">
+              <Link to="/settings/api-keys/new">Create API Key</Link>
+            </Button>
+          )}
+        </div>
+      ) : (
+        <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 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">
+                {key.description ?? key.id}
+                <div className="text-muted-foreground text-xs">
+                  {key.createdOn && (
+                    <div>
+                      Created on {new Date(key.createdOn).toLocaleDateString()}
+                    </div>
+                  )}
+                  {key.expiresOn && (
+                    <div>
+                      Expires on {new Date(key.expiresOn).toLocaleDateString()}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="items-center flex lg:justify-center">
+                <RevealApiKey apiKey={key.key} />
+              </div>
+              <div className="flex gap-2">
+                {service.rollKey && (
+                  <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>
+                )}
+                {service.deleteKey && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      if (!confirm("Do you want to delete this key?")) {
+                        return;
+                      }
+
+                      deleteKeyMutation.mutate(key.id);
+                    }}
+                    disabled={deleteKeyMutation.isPending}
+                  >
+                    <TrashIcon size={16} />
+                  </Button>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+const RevealApiKey = ({ apiKey }: { apiKey: string }) => {
+  const [revealed, setRevealed] = useState(false);
+
+  return (
+    <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)}
+      </div>
+      <Button
+        variant="outline"
+        onClick={() => setRevealed((prev) => !prev)}
+        size="icon"
+      >
+        {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,146 @@
+import { type RouteObject } from "react-router-dom";
+import { DevPortalContext } from "../../core/DevPortalContext.js";
+import {
+  type ApiIdentityPlugin,
+  type DevPortalPlugin,
+  ProfileMenuPlugin,
+} from "../../core/plugins.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";
+
+const DEFAULT_API_KEY_ENDPOINT =
+  "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev";
+
+export type ApiKeyService = {
+  getKeys: (context: DevPortalContext) => Promise<ApiKey[]>;
+  rollKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  deleteKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  updateKeyDescription?: (
+    apiKey: { id: string; description: string },
+    context: DevPortalContext,
+  ) => Promise<void>;
+  getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
+  createKey?: (
+    apiKey: { description: string; expiresOn?: string },
+    context: DevPortalContext,
+  ) => Promise<void>;
+};
+
+export type GetApiKeysOptions = ApiKeyService | { endpoint: string } | object;
+
+export type ApiKeyPluginOptions = object & GetApiKeysOptions;
+
+export interface ApiKey {
+  id: string;
+  description?: string;
+  createdOn?: string;
+  updatedOn?: string;
+  expiresOn?: string;
+  key: string;
+}
+
+const createDefaultHandler = (endpoint: string): ApiKeyService => {
+  return {
+    deleteKey: async (id, context) => {
+      const request = new Request(endpoint + `/v1/developer/api-keys/${id}`, {
+        method: "DELETE",
+      });
+
+      await context.signRequest(request);
+
+      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",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(apiKey),
+      });
+
+      await context.signRequest(request);
+
+      const response = await fetch(request);
+      invariant(response.ok, "Failed to create API key");
+    },
+    getKeys: async (context) => {
+      const request = new Request(endpoint + `/v1/developer/api-keys`);
+
+      await context.signRequest(request);
+
+      const keys = await fetch(request);
+      invariant(keys.ok, "Failed to fetch API keys");
+
+      return await keys.json();
+    },
+  };
+};
+
+export const apiKeyPlugin = (
+  options: ApiKeyPluginOptions,
+): DevPortalPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
+  const endpoint =
+    "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT;
+
+  const service =
+    "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);
+
+        return keys.map((key) => ({
+          authorizeRequest: (request) => {
+            request.headers.set("Authorization", `Bearer ${key.key}`);
+            return request;
+          },
+          id: key.id,
+          label: key.description ?? key.id,
+        }));
+      } catch {
+        return [];
+      }
+    },
+    getRoutes: (): RouteObject[] => {
+      // TODO: Make lazy
+      return [
+        {
+          element: <ProtectedRoute />,
+          errorElement: <RouterError />,
+          children: [
+            {
+              path: "/settings/api-keys",
+              element: <SettingsApiKeys service={service} />,
+            },
+            {
+              path: "/settings/api-keys/new",
+              element: <CreateApiKey service={service} />,
+            },
+          ],
+        },
+      ];
+    },
+  };
+};

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

@@ -0,0 +1,131 @@
+import { useMDXComponents } from "@mdx-js/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 {
+  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 { Toc } from "./Toc.js";
+import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
+
+const MarkdownHeadings = {
+  h2: ({ children, id }) => (
+    <Heading level={2} id={id} registerSidebarAnchor>
+      {children}
+    </Heading>
+  ),
+  h3: ({ children, id }) => (
+    <Heading level={3} id={id} registerSidebarAnchor>
+      {" "}
+      {children}
+    </Heading>
+  ),
+} satisfies MdxComponentsType;
+
+export const MdxPage = ({
+  mdxComponent: MdxComponent,
+  frontmatter = {},
+  defaultOptions,
+  tableOfContents,
+}: PropsWithChildren<
+  Omit<MDXImport, "default"> & {
+    mdxComponent: MDXImport["default"];
+    defaultOptions?: MarkdownPluginDefaultOptions;
+  }
+>) => {
+  const categoryTitle = useCurrentItem()?.categoryLabel;
+  const title = frontmatter.title;
+  const category = frontmatter.category ?? categoryTitle;
+  const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
+  const pageTitle =
+    tableOfContents.find((item) => item.depth === 1)?.value ?? title;
+  const hidePager =
+    frontmatter.disablePager ?? defaultOptions?.disablePager ?? false;
+
+  const tocEntries =
+    tableOfContents.find((item) => item.depth === 1)?.children ??
+    // if `title` is provided by frontmatter it does not appear in the table of contents
+    tableOfContents.filter((item) => item.depth === 2);
+
+  const showToc = !hideToc && tocEntries.length > 0;
+
+  const { prev, next } = usePrevNext();
+
+  return (
+    <div className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between">
+      <Helmet>
+        <title>{pageTitle}</title>
+      </Helmet>
+      <div
+        className={cn(
+          ProseClasses,
+          "max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
+        )}
+      >
+        <header>
+          {category && <CategoryHeading>{category}</CategoryHeading>}
+          {title && (
+            <Heading level={1} id={slugify(title, { lower: true })}>
+              {title}
+            </Heading>
+          )}
+          {frontmatter.description && (
+            <p className="prose-lg">{frontmatter.description}</p>
+          )}
+        </header>
+        <MdxComponent
+          components={{ ...useMDXComponents(), ...MarkdownHeadings }}
+        />
+        {!hidePager && (
+          <>
+            <hr />
+            <div className="not-prose flex items-center justify-between gap-8">
+              {prev ? (
+                <Link
+                  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
+                  </div>
+                  <div className="text-lg text-primary truncate">
+                    {prev.label}
+                  </div>
+                </Link>
+              ) : (
+                <div className="flex-1" />
+              )}
+              {next ? (
+                <Link
+                  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 →
+                  </div>
+                  <div className="text-lg text-primary truncate">
+                    {next.label}
+                  </div>
+                </Link>
+              ) : (
+                <div className="flex-1" />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+      <div className="hidden xl:block">
+        {showToc && <Toc entries={tocEntries} />}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,135 @@
+import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
+import { ListTreeIcon } from "lucide-react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PropsWithChildren,
+} from "react";
+import { AnchorLink } from "../../components/AnchorLink.js";
+import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
+import { cn } from "../../util/cn.js";
+
+const DATA_ANCHOR_ATTR = "data-active";
+
+const TocItem = ({
+  item,
+  children,
+  className,
+  isActive,
+}: PropsWithChildren<{
+  item: TocEntry;
+  isActive: boolean;
+  className?: string;
+}>) => {
+  return (
+    <li
+      className={cn(
+        "truncate",
+        isActive
+          ? "text-primary"
+          : "text-foreground/65 dark:text-foreground/75",
+        className,
+      )}
+      title={item.value}
+    >
+      <AnchorLink
+        to={`#${item.id}`}
+        {...{ [DATA_ANCHOR_ATTR]: item.id }}
+        className={cn(
+          isActive
+            ? "text-primary"
+            : "text-foreground/65 dark:text-foreground/75 hover:text-foreground",
+        )}
+      >
+        {item.value}
+      </AnchorLink>
+      {children}
+    </li>
+  );
+};
+
+export const Toc = ({ entries }: { entries: TocEntry[] }) => {
+  const { activeAnchor } = useViewportAnchor();
+  const listWrapperRef = useRef<HTMLUListElement>(null);
+  const paintedOnce = useRef(false);
+  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({
+    top: 0,
+    opacity: 0,
+  });
+
+  // synchronize active anchor indicator with the scroll position
+  useEffect(() => {
+    if (!listWrapperRef.current) return;
+
+    const activeElement = listWrapperRef.current.querySelector(
+      `[${DATA_ANCHOR_ATTR}='${activeAnchor}']`,
+    );
+
+    if (!activeElement) {
+      setIndicatorStyles({ top: 0, opacity: 0 });
+      return;
+    }
+
+    const topParent = listWrapperRef.current.getBoundingClientRect().top;
+    const topElement = activeElement.getBoundingClientRect().top;
+
+    setIndicatorStyles({
+      opacity: 1,
+      top: `${topElement - topParent}px`,
+    });
+
+    if (paintedOnce.current) return;
+
+    // after all is painted, the indicator should animate
+    requestIdleCallback(() => {
+      paintedOnce.current = true;
+    });
+  }, [activeAnchor]);
+
+  return (
+    <aside className="sticky top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
+      <div className="flex items-center gap-2 font-medium mb-2">
+        <ListTreeIcon size={16} />
+        On this page
+      </div>
+      <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

@@ -0,0 +1,39 @@
+import { type RouteObject } from "react-router-dom";
+
+import {
+  MarkdownPluginDefaultOptions,
+  MarkdownPluginOptions,
+} from "./index.js";
+
+export const generateRoutes = (
+  markdownFiles: MarkdownPluginOptions["markdownFiles"],
+  defaultOptions?: MarkdownPluginDefaultOptions,
+): 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

@@ -0,0 +1,34 @@
+import type { Toc } from "@stefanprobst/rehype-extract-toc";
+import type { MDXProps } from "mdx/types.js";
+import type { DevPortalPlugin } from "../../core/plugins.js";
+import { generateRoutes } from "./generateRoutes.js";
+
+export type MarkdownPluginOptions = {
+  markdownFiles: Record<string, () => Promise<MDXImport>>;
+  defaultOptions?: MarkdownPluginDefaultOptions;
+};
+export type MarkdownPluginDefaultOptions = Pick<
+  Frontmatter,
+  "toc" | "disablePager"
+>;
+
+export type Frontmatter = {
+  title?: string;
+  description?: string;
+  category?: string;
+  toc?: boolean;
+  disablePager?: boolean;
+};
+
+export type MDXImport = {
+  tableOfContents: Toc;
+  frontmatter: Frontmatter;
+  default: (props: MDXProps) => JSX.Element;
+};
+
+export const markdownPlugin = ({
+  markdownFiles,
+  defaultOptions,
+}: MarkdownPluginOptions): DevPortalPlugin => ({
+  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),
+});