zudoku 0.1.1-dev.5 → 0.1.1-dev.51

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

@@ -11,11 +11,10 @@ import type {
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
-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 +22,10 @@ export const linkItem = cva(
         true: "text-primary font-medium",
         false: "text-foreground/80",
       },
+      isMuted: {
+        true: "text-foreground/30",
+        false: "",
+      },
     },
   },
 );
@@ -54,7 +57,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
@@ -76,7 +81,7 @@ export const SideNavigationItem = ({
   const linkContent = (
     <div className="flex justify-between w-full">
       <div className="flex items-center gap-2 truncate w-full">
-        {isValidIcon(item.icon) && <DynamicIcon name={item.icon} size={16} />}
+        {item.icon}
         {typeof item.label !== "string" ? (
           item.label
         ) : (
@@ -101,7 +106,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 +132,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,24 @@
+import { forwardRef, type PropsWithChildren } from "react";
+import { cn } from "../../util/cn.js";
+
+export const SideNavigationWrapper = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
+>(function SideNavigation({ children, className, pushMainContent }, ref) {
+  return (
+    <nav
+      // this data attribute is used in `Layout.tsx` to determine if side navigation
+      // is present for the current page so the main content is pushed to the right
+      // it's also important to set `peer` class here.
+      // maybe this could be simplified by adjusting the layout
+      data-navigation={String(pushMainContent)}
+      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,29 +1,30 @@
 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 { type AuthenticationProvider } from "../authentication/authentication.js";
 import {
-  isApiKeyPlugin,
+  type DevPortalPath,
+  type DevPortalProps,
+} from "../components/DevPortal.js";
+import {
+  isApiIdentityPlugin,
   isNavigationPlugin,
   needsInitialization,
   type DevPortalPlugin,
   type NavigationPlugin,
 } from "./plugins.js";
 
-import type { LucideIcon } from "lucide-react";
-import type { IconName } from "../components/DynamicIcon.js";
-
 export interface ApiIdentity {
   authorizeRequest: (request: Request) => Request;
-  name: string;
+  label: string;
   id: string;
 }
 
 type BaseNavigationCategoryItem = {
   label: ReactNode;
   title?: string;
-  icon?: ReactNode | IconName;
+  muted?: boolean;
+  icon?: ReactNode;
 };
 
 export type PathNavigationCategoryItem = BaseNavigationCategoryItem & {
@@ -44,7 +45,7 @@ export type NavigationCategory = {
   path?: string;
   expanded?: boolean;
   collapsible?: boolean;
-  icon?: LucideIcon;
+  icon?: ReactNode;
   children: NavigationCategoryItem[];
 };
 
@@ -61,6 +62,7 @@ export type SessionProfileState = {
   name?: string;
   email_verified?: string;
   picture?: string;
+  [key: string]: string | boolean | undefined;
 };
 
 export type RoutingState = {
@@ -84,9 +86,13 @@ export class DevPortalContext {
 
   public navigation: NavigationItem[];
   public meta: DevPortalProps["meta"];
-  public authentication?: AuthProvider;
+  public authentication?: AuthenticationProvider;
   public state: typeof useDevPortalState;
 
+  public get url(): URL {
+    return new URL(window.location.href);
+  }
+
   constructor(private config: DevPortalProps) {
     this.plugins = config.plugins ?? [];
     this.navigation = config.navigation;
@@ -100,7 +106,7 @@ export class DevPortalContext {
     this.plugins
       .filter(needsInitialization)
       .forEach((plugin) => plugin.initialize(this));
-    this.authentication?.initialize(this);
+    await this.authentication?.initialize?.(this);
   };
 
   setUserProfile = async (profile: Partial<SessionProfileState>) => {
@@ -108,13 +114,13 @@ export class DevPortalContext {
   };
 
   invalidateCache = async (key: DevPortalCacheKey[]) => {
-    queryClient.invalidateQueries({ queryKey: key });
+    await queryClient.invalidateQueries({ queryKey: key });
   };
 
   getApiIdentities = async () => {
     const keys = await Promise.all(
       this.plugins
-        .filter(isApiKeyPlugin)
+        .filter(isApiIdentityPlugin)
         .map((plugin) => plugin.getIdentities(this)),
     );
 
@@ -134,15 +140,7 @@ export class DevPortalContext {
       throw new Error("No authentication configured");
     }
 
-    return this.authentication.signOut(this);
-  };
-
-  handleAuthenticationResponse = async (path: {
-    pathname: string;
-    search: string;
-    hash: string;
-  }) => {
-    this.config.authentication?.handleAuthenticationResponse?.(path, this);
+    return this.authentication.logout(this);
   };
 
   getNavigation = async (path: string) => {

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

@@ -4,15 +4,15 @@ import {
   type ApiIdentity,
   type NavigationCategory,
 } from "./DevPortalContext.js";
-import { type Combine } from "./types/combine.js";
 
 export type PluginNavigationCategory = {
   path: string;
 } & NavigationCategory;
 
-export type DevPortalPlugin = Combine<
-  [NavigationPlugin, ApiIdentityPlugin, InitializationPlugin]
->;
+export type DevPortalPlugin =
+  | NavigationPlugin
+  | ApiIdentityPlugin
+  | InitializationPlugin;
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
@@ -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/{app → lib}/oas/graphql/index.ts

@@ -69,7 +69,7 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
       if (!value?.[method]) return [];
 
       const operation = value[method] as OperationObject;
-      const pathParameters = value?.parameters ?? [];
+      const pathParameters = value.parameters ?? [];
       const operationParameters = operation.parameters ?? [];
 
       // parameters are inherited from the parent path object,
@@ -189,7 +189,7 @@ const ParameterItem = builder
         resolve: (parent) =>
           Object.entries(parent.examples ?? {}).map(([name, value]) => ({
             name,
-            ...value,
+            ...(typeof value === "string" ? { value } : value),
           })),
         nullable: true,
       }),

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

@@ -0,0 +1,100 @@
+import { useMutation } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { Link, useNavigate } from "react-router-dom";
+import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+import { Input } from "../../components/Input.js";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/Select.js";
+import { Button } from "../../ui/Button.js";
+import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+
+type CreateApiKey = { description: string; expiresOn?: string };
+
+export const CreateApiKey = ({
+  options,
+  service,
+}: {
+  options: ApiKeyPluginOptions;
+  service: ApiKeyService;
+}) => {
+  const context = useDevPortal();
+  const navigate = useNavigate();
+  const form = useForm<CreateApiKey>({
+    defaultValues: {
+      expiresOn: "30",
+    },
+  });
+  const createKeyMutation = useMutation({
+    mutationFn: ({ description, expiresOn }: CreateApiKey) => {
+      if (!service.createKey) {
+        throw new Error("deleteKey not implemented");
+      }
+
+      const expiresOnDate =
+        expiresOn !== "never" ? addDaysToDate(Number(expiresOn)) : undefined;
+
+      return service.createKey(
+        { description: description, expiresOn: expiresOnDate },
+        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 border-border pb-1">
+        <h1 className="font-medium text-2xl">New API Key</h1>
+      </div>
+      <form
+        onSubmit={form.handleSubmit((data) => createKeyMutation.mutate(data))}
+      >
+        <div className="flex gap-2 flex-col">
+          Note
+          <Input {...form.register("description")} />
+          Expiration
+          <Select
+            onValueChange={(value) => form.setValue("expiresOn", value)}
+            defaultValue={form.getValues("expiresOn")}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                {[7, 30, 60, 90].map((option) => (
+                  <SelectItem value={String(option)} key={option}>
+                    {option} days
+                  </SelectItem>
+                ))}
+                <SelectItem value="never">Never</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </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();
+};

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

@@ -0,0 +1,125 @@
+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 { useDevPortal } from "../../components/context/DevPortalProvider.js";
+import { Button } from "../../ui/Button.js";
+import { Card } from "../../ui/Card.js";
+import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+
+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-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>
+
+      <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}
+                <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 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,132 @@
+import { DevPortalContext } from "../../core/DevPortalContext.js";
+import {
+  type ApiIdentityPlugin,
+  type DevPortalPlugin,
+} from "../../core/plugins.js";
+import { CreateApiKey } from "./CreateApiKey.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;
+  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; 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 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");
+      }
+
+      const request = new Request(endpoint + `/v1/developer/api-keys`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(apiKey),
+      });
+
+      await context.authentication?.signRequest(request, context);
+      await fetch(request);
+    },
+    getKeys: async (context) => {
+      const accessToken = await context.authentication?.getToken?.(context);
+
+      if (!accessToken) {
+        return [];
+      }
+
+      const request = new Request(endpoint + `/v1/developer/api-keys`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      await context.authentication?.signRequest(request, context);
+
+      const keys = await fetch(request);
+
+      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,
+        label: key.description ?? 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";