zudoku 0.1.1-dev.4 → 0.1.1-dev.41

package/src/{app → lib}/components/SyntaxHighlight.tsx

@@ -32,6 +32,7 @@ type SyntaxHighlightProps = {
   noBackground?: boolean;
   wrapLines?: boolean;
   copyable?: boolean;
+  showLanguageIndicator?: boolean;
 } & Omit<HighlightProps, "children">;
 
 export const SyntaxHighlight = ({
@@ -41,6 +42,10 @@ export const SyntaxHighlight = ({
   const [isDark] = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
+  if (!props.code) {
+    return null;
+  }
+
   return (
     <Highlight theme={isDark ? themes.vsDark : themes.github} {...props}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
@@ -77,9 +82,11 @@ export const SyntaxHighlight = ({
               )}
             </button>
           )}
-          <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-            {props.language}
-          </span>
+          {props.showLanguageIndicator && (
+            <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+              {props.language}
+            </span>
+          )}
           {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line })}>
               {line.map((token, key) => (

package/src/{app → lib}/components/context/DevPortalProvider.ts

@@ -23,7 +23,7 @@ export const useApiIdentities = () => {
   const { getApiIdentities } = useDevPortal();
   return useSuspenseQuery({
     queryFn: getApiIdentities,
-    queryKey: ["api-keys"],
+    queryKey: ["api-identities"],
   });
 };
 

package/src/lib/components/index.ts

@@ -0,0 +1,3 @@
+export { DevPortal } from "./DevPortal.js";
+export { DynamicIcon } from "./DynamicIcon.js";
+export { Link } from "./Link.js";

package/src/{app → lib}/components/navigation/SideNavigation.tsx

@@ -9,7 +9,10 @@ export const SideNavigation = () => {
   const navigation = useNavigation();
 
   return (
-    <SideNavigationWrapper ref={navRef}>
+    <SideNavigationWrapper
+      ref={navRef}
+      data={navigation.data.items.length > 0 ? "true" : "false"}
+    >
       {navigation.data.items.map((category) => (
         <SideNavigationCategory key={category.label} category={category} />
       ))}

package/src/{app → lib}/components/navigation/SideNavigationCategory.tsx

@@ -36,7 +36,7 @@ export const SideNavigationCategory = ({
       open={isOpen}
       onOpenChange={() => setIsOpen((prev) => !prev)}
     >
-      {category.label.length > 0 && (
+      {category.label.length > 0 ? (
         <Collapsible.Trigger asChild={isCollapsible} disabled={!isCollapsible}>
           <h5
             className={cn(
@@ -53,6 +53,8 @@ export const SideNavigationCategory = ({
             )}
           </h5>
         </Collapsible.Trigger>
+      ) : (
+        "Endpoints"
       )}
       <Collapsible.Content className="CollapsibleContent -mx-[--padding-nav-item]">
         {/* margin on Collapsible.Content will lead jumpiness when animating because it's not added to the calculated height */}

package/src/{app → lib}/components/navigation/SideNavigationItem.tsx

@@ -15,7 +15,7 @@ import { DynamicIcon, isValidIcon } from "../DynamicIcon.js";
 import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
 import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
 
-export const linkItem = cva(
+export const navigationListItem = cva(
   "flex px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
   {
     variants: {
@@ -23,6 +23,10 @@ export const linkItem = cva(
         true: "text-primary font-medium",
         false: "text-foreground/80",
       },
+      isMuted: {
+        true: "text-foreground/30",
+        false: "",
+      },
     },
   },
 );
@@ -54,7 +58,9 @@ export const SideNavigationItem = ({
   if (isLinkItem(item)) {
     const classes = cn(
       "flex items-center gap-2",
-      linkItem({ isActive: item.href === location.pathname }),
+      navigationListItem({
+        isActive: item.href === location.pathname,
+      }),
     );
     return item.href.startsWith("http") ? (
       <a
@@ -101,7 +107,10 @@ export const SideNavigationItem = ({
           className="flex flex-col"
         >
           <Collapsible.Trigger
-            className={cn("group text-start", linkItem({ isActive: false }))}
+            className={cn(
+              "group text-start",
+              navigationListItem({ isActive: false }),
+            )}
           >
             {linkContent}
           </Collapsible.Trigger>
@@ -124,15 +133,16 @@ export const SideNavigationItem = ({
         <AnchorLink
           to={item.path}
           {...{ [DATA_ANCHOR_ATTR]: item.path }}
-          className={linkItem({
+          className={navigationListItem({
             isActive: item.path.slice(1) === activeAnchor,
+            isMuted: item.muted,
           })}
         >
           {linkContent}
         </AnchorLink>
       ) : (
         <NavLink
-          className={({ isActive }) => linkItem({ isActive })}
+          className={({ isActive }) => navigationListItem({ isActive })}
           to={currentPath}
         >
           {linkContent}

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

@@ -0,0 +1,18 @@
+import { forwardRef, type PropsWithChildren } from "react";
+import { cn } from "../../util/cn.js";
+
+export const SideNavigationWrapper = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<{ data?: string; className?: string }>
+>(({ children, className, data }, ref) => (
+  <nav
+    data-navigation={data}
+    className={cn(
+      "peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 p-[--padding-nav-item] -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",
+      className,
+    )}
+    ref={ref}
+  >
+    {children}
+  </nav>
+));

package/src/{app → lib}/core/DevPortalContext.ts

@@ -1,10 +1,13 @@
 import { QueryClient } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { create } from "zustand";
-import { type DevPortalPath, type DevPortalProps } from "../DevPortal.js";
 import { type AuthProvider } from "../authentication/authentication.js";
 import {
-  isApiKeyPlugin,
+  type DevPortalPath,
+  type DevPortalProps,
+} from "../components/DevPortal.js";
+import {
+  isApiIdentityPlugin,
   isNavigationPlugin,
   needsInitialization,
   type DevPortalPlugin,
@@ -23,6 +26,7 @@ export interface ApiIdentity {
 type BaseNavigationCategoryItem = {
   label: ReactNode;
   title?: string;
+  muted?: boolean;
   icon?: ReactNode | IconName;
 };
 
@@ -114,7 +118,7 @@ export class DevPortalContext {
   getApiIdentities = async () => {
     const keys = await Promise.all(
       this.plugins
-        .filter(isApiKeyPlugin)
+        .filter(isApiIdentityPlugin)
         .map((plugin) => plugin.getIdentities(this)),
     );
 

package/src/{app → lib}/core/plugins.ts

@@ -37,7 +37,7 @@ export const needsInitialization = (
 ): obj is InitializationPlugin =>
   "initialize" in obj && typeof obj.initialize === "function";
 
-export const isApiKeyPlugin = (
+export const isApiIdentityPlugin = (
   obj: DevPortalPlugin,
 ): obj is ApiIdentityPlugin =>
   "getIdentities" in obj && typeof obj.getIdentities === "function";

package/src/lib/plugins/api-key/CreateApiKeys.tsx

@@ -0,0 +1,84 @@
+import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "../../ui/Button.js";
+import { Input } from "../../components/Input.js";
+import { cn } from "../../util/cn.js";
+import { Link, useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+
+type CreateApiKeys = { description: string; expiresAt?: string };
+
+export const CreateApiKey = ({
+  options,
+  service,
+}: {
+  options: ApiKeyPluginOptions;
+  service: ApiKeyService;
+}) => {
+  const context = useDevPortal();
+  const navigate = useNavigate();
+  const form = useForm<CreateApiKeys>();
+  const createKeyMutation = useMutation({
+    mutationFn: ({ description, expiresAt }: CreateApiKeys) => {
+      if (!service.createKey) {
+        throw new Error("deleteKey not implemented");
+      }
+
+      return service.createKey({ description }, context);
+    },
+    onSuccess: () => navigate("/settings/api-keys/"),
+  });
+
+  if (!service.createKey) {
+    return null;
+  }
+
+  return (
+    <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
+      <div className="flex justify-between mb-4 border-b pb-1">
+        <h1 className="font-medium text-2xl">New API Keys</h1>
+      </div>
+      <form
+        onSubmit={form.handleSubmit((data) => {
+          if (data.expiresAt === "never") {
+            delete data.expiresAt;
+          }
+          createKeyMutation.mutate(data);
+        })}
+      >
+        <div className="flex gap-2 flex-col">
+          Note
+          <Input {...form.register("description")} />
+          Expiration
+          <select
+            className={cn(
+              "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
+              "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
+            )}
+            {...form.register("expiresAt")}
+          >
+            <option value="never">Never</option>
+            {[7, 30, 60, 90].map((option) => (
+              <option value={addDaysToDate(option)} key={option}>
+                {option} Days
+              </option>
+            ))}
+          </select>
+          <div className="flex gap-2">
+            <Button>Generate Key</Button>
+            <Button variant="outline" asChild>
+              <Link to="/settings/api-keys/">Cancel</Link>
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const addDaysToDate = (days: number): string => {
+  const date = new Date();
+  date.setDate(date.getDate() + days);
+  return date.toISOString().split("T")[0];
+};

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

@@ -0,0 +1,122 @@
+import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { Button } from "../../ui/Button.js";
+import { Card } from "../../ui/Card.js";
+import { EyeIcon, EyeOffIcon, RotateCwIcon, TrashIcon } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useState } from "react";
+
+export const SettingsApiKeys = ({
+  options,
+  service,
+}: {
+  options: ApiKeyPluginOptions;
+  service: ApiKeyService;
+}) => {
+  const context = useDevPortal();
+  const queryClient = useQueryClient();
+  const { data } = useSuspenseQuery({
+    queryFn: () => service.getKeys(context),
+    queryKey: ["api-keys"],
+  });
+
+  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"] });
+    },
+  });
+
+  return (
+    <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
+      <div className="flex justify-between mb-4 border-b border-border pb-1">
+        <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>
+
+      <Card>
+        <ul className="grid grid-cols-[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"
+              key={key.id}
+            >
+              <div className="flex flex-col gap-1 text-sm">
+                {key.description ?? key.id}
+                {key.expiresOn ? (
+                  <div>Expires on {key.expiresOn}</div>
+                ) : (
+                  key.createdOn && (
+                    <div className="text-gray-500 whitespace-pre">
+                      Created on {new Date(key.createdOn).toLocaleDateString()}
+                    </div>
+                  )
+                )}
+              </div>
+              <div className="items-center flex justify-center">
+                <RevealApiKey apiKey={key.key} />
+              </div>
+              <div className="flex gap-2">
+                {service.rollKey && (
+                  <Button size="icon">
+                    <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>
+      </Card>
+    </div>
+  );
+};
+
+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">
+        {revealed ? apiKey : "•".repeat(apiKey.length)}
+      </code>
+      <Button
+        variant="outline"
+        onClick={() => setRevealed((prev) => !prev)}
+        size="icon"
+      >
+        {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,126 @@
+import { DevPortalContext } from "../../core/DevPortalContext.js";
+import {
+  type ApiIdentityPlugin,
+  type DevPortalPlugin,
+} from "../../core/plugins.js";
+import { SettingsApiKeys } from "./SettingsApiKeys.js";
+import { CreateApiKey } from "./CreateApiKeys.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;
+  rollKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  deleteKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  updateKeyDescription?: (
+    apiKey: { jd: string; description: string },
+    context: DevPortalContext,
+  ) => Promise<void>;
+  getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
+  createKey?: (
+    apiKey: { description: string; expiresAt?: string },
+    context: DevPortalContext,
+  ) => Promise<void>;
+};
+
+export type GetApiKeysOptions = ApiKeyService | { endpoint: string } | {};
+
+export type ApiKeyPluginOptions = {} & 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 accessToken = await context.authentication?.getToken?.(context);
+
+      if (!accessToken) {
+        throw new Error("Not authenticated");
+      }
+
+      await fetch(endpoint + `/v1/developer/api-keys/${id}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+    },
+    createKey: async (apiKey, context) => {
+      const accessToken = await context.authentication?.getToken?.(context);
+
+      if (!accessToken) {
+        throw new Error("Not authenticated");
+      }
+
+      await fetch(endpoint + `/v1/developer/api-keys`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(apiKey),
+      });
+    },
+    getKeys: async (context) => {
+      const accessToken = await context.authentication?.getToken?.(context);
+
+      if (!accessToken) {
+        return [];
+      }
+
+      const keys = await fetch(endpoint + `/v1/developer/api-keys`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      return await keys.json();
+    },
+  };
+};
+
+export const apiKeyPlugin = (
+  options: ApiKeyPluginOptions,
+): DevPortalPlugin & ApiIdentityPlugin => {
+  const endpoint =
+    "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT;
+
+  const service =
+    "getKeys" in options ? options : createDefaultHandler(endpoint);
+
+  return {
+    getIdentities: async (context) => {
+      const keys = await service.getKeys(context);
+
+      return keys.map((key) => ({
+        authorizeRequest: (request) => {
+          request.headers.set("Authorization", `Bearer ${key.key}`);
+          return request;
+        },
+        id: key.id,
+        name: key.id,
+      }));
+    },
+    getRoutes: () => {
+      return [
+        {
+          path: "/settings/api-keys",
+          element: <SettingsApiKeys options={options} service={service} />,
+        },
+        {
+          path: "/settings/api-keys/new",
+          element: <CreateApiKey options={options} service={service} />,
+        },
+      ];
+    },
+  };
+};

package/src/lib/plugins/index.ts

@@ -0,0 +1,4 @@
+export { apiKeyPlugin } from "./api-key/index.js";
+export { markdownPlugin } from "./markdown/index.js";
+export { openApiPlugin } from "./openapi/index.js";
+export { redirectPlugin } from "./redirect/index.js";

package/src/{app → lib}/plugins/markdown/MdxPage.tsx

@@ -1,6 +1,6 @@
 import { useMemo, type PropsWithChildren, type ReactNode } from "react";
-import { Heading } from "../../Heading.js";
 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";
@@ -11,12 +11,27 @@ import slugify from "../../util/slugify.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
 import type { MDXImport } from "./index.js";
+import { useMDXComponents } from "@mdx-js/react";
+import type { MdxComponentsType } from "../../util/MdxComponents.js";
+
+const MarkdownHeadings = {
+  h2: ({ children, id }) => (
+    <Heading level={2} id={id} children={children} registerSidebarAnchor />
+  ),
+  h3: ({ children, id }) => (
+    <Heading level={3} id={id} children={children} registerSidebarAnchor />
+  ),
+} satisfies MdxComponentsType;
 
 export const MdxPage = ({
-  children,
+  mdxComponent: MdxComponent,
   frontmatter,
   tableOfContents,
-}: PropsWithChildren<Omit<MDXImport, "default">>) => {
+}: PropsWithChildren<
+  Omit<MDXImport, "default"> & {
+    mdxComponent: MDXImport["default"];
+  }
+>) => {
   const navItem = useTopNavigationItem();
   const location = useLocation();
 
@@ -75,10 +90,10 @@ export const MdxPage = ({
       <div
         className={cn(
           ProseClasses,
-          "mx-auto max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
+          "max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
         )}
       >
-        <header className="-translate-y-1">
+        <header>
           {category && <CategoryHeading>{category}</CategoryHeading>}
           {title && (
             <Heading level={1} id={slugify(title, { lower: true })}>
@@ -89,7 +104,9 @@ export const MdxPage = ({
             <p className="prose-lg">{frontmatter.description}</p>
           )}
         </header>
-        {children}
+        <MdxComponent
+          components={{ ...useMDXComponents(), ...MarkdownHeadings }}
+        />
         <hr />
         <div className="not-prose flex items-center justify-between gap-8">
           {prev.path ? (

package/src/{app → lib}/plugins/markdown/generateRoutes.tsx

@@ -1,21 +1,10 @@
-import { Heading } from "../../Heading.js";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
 import { Navigate, type RouteObject } from "../../core/router.js";
-import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { MdxPage } from "./MdxPage.js";
 import type { MarkdownPluginOptions } from "./index.js";
 
-const MarkdownHeadings = {
-  h2: ({ children, id }) => (
-    <Heading level={2} id={id} children={children} registerSidebarAnchor />
-  ),
-  h3: ({ children, id }) => (
-    <Heading level={3} id={id} children={children} registerSidebarAnchor />
-  ),
-} satisfies MdxComponentsType;
-
 export const generateRoutes = (
   markdownFiles: MarkdownPluginOptions["markdownFiles"],
 ): RouteObject[] => {
@@ -39,11 +28,7 @@ export const generateRoutes = (
           const { default: Component, ...props } = await importPromise();
 
           return {
-            element: (
-              <MdxPage {...props}>
-                <Component components={MarkdownHeadings} />
-              </MdxPage>
-            ),
+            element: <MdxPage mdxComponent={Component} {...props} />,
           };
         },
       } satisfies RouteObject;

package/src/{app → lib}/plugins/openapi/ColorizedParam.tsx

@@ -15,7 +15,6 @@ export const usePastellizedColor = (name: string) => {
 
 export const ColorizedParam = ({
   name,
-  value,
   className,
   backgroundOpacity = "100%",
   slug,
@@ -23,7 +22,6 @@ export const ColorizedParam = ({
   onClick,
 }: {
   name: string;
-  value?: string;
   className?: string;
   backgroundOpacity?: string;
   slug?: string;