zudoku 0.3.0-dev.4 → 0.3.0-dev.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.4",
+  "version": "0.3.0-dev.6",
   "type": "module",
   "files": [
     "dist",
@@ -100,6 +100,7 @@
     "slugify": "1.6.6",
     "strip-ansi": "7.1.0",
     "tailwindcss": "3.4.4",
+    "tiny-invariant": "1.3.3",
     "ulidx": "^2.3.0",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",

package/src/app/App.tsx

@@ -32,8 +32,9 @@ export default function App() {
       plugins={[
         ...configuredDocsPlugins,
         ...configuredApiPlugins,
-        configuredApiKeysPlugin,
         configuredRedirectPlugin,
+        ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
+        ...(configuredAuthProvider ? [configuredAuthProvider] : []),
       ]}
     />
   );

package/src/lib/authentication/hook.ts

@@ -8,6 +8,7 @@ export const useAuth = () => {
 
   return {
     isAuthEnabled,
+    isPending: authState.isPending,
     profile: authState.profile,
     isAuthenticated: authState.profile,
 

package/src/lib/authentication/providers/auth0.tsx

@@ -7,6 +7,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
   override async logout(): Promise<void> {
     useAuthState.setState({
       isAuthenticated: false,
+      isPending: false,
       profile: undefined,
     });
     const as = await this.getAuthServer();

package/src/lib/authentication/providers/clerk.tsx

@@ -34,6 +34,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       if (clerkApi.session) {
         useAuthState.setState({
           isAuthenticated: true,
+          isPending: false,
           profile: {
             sub: clerkApi.session.user.id,
             name: clerkApi.session.user.fullName ?? undefined,
@@ -46,6 +47,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       } else {
         useAuthState.setState({
           isAuthenticated: false,
+          isPending: false,
           profile: undefined,
         });
       }

package/src/lib/authentication/providers/openid.tsx

@@ -180,6 +180,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   async logout(): Promise<void> {
     useAuthState.setState({
       isAuthenticated: false,
+      isPending: false,
       profile: undefined,
     });
 
@@ -293,6 +294,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
     useAuthState.setState({
       isAuthenticated: true,
+      isPending: false,
       profile,
     });
 

package/src/lib/authentication/state.ts

@@ -1,11 +1,13 @@
 import { create } from "zustand";
 
 export const useAuthState = create<AuthState>(() => ({
+  isPending: true,
   isAuthenticated: false,
 }));
 
 export interface AuthState {
   isAuthenticated: boolean;
+  isPending: boolean;
   profile?: UserProfile;
 }
 

package/src/lib/components/DevPortal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/destructuring-assignment */
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { memo, Suspense, useEffect, useMemo } from "react";

package/src/lib/components/Layout.tsx

@@ -48,7 +48,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         >
           <SideNavigation />
           <main
-            className="dark:border-white/10 translate-x-0
+            className="dark:border-white/10 translate-x-0 h-full
           lg:overflow-visible
           lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]
           lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] peer-data-[navigation=true]:pl-12"

package/src/lib/components/SyntaxHighlight.tsx

@@ -67,7 +67,7 @@ export const SyntaxHighlight = ({
               disabled={isCopied}
               onClick={() => {
                 setIsCopied(true);
-                navigator.clipboard.writeText(
+                void navigator.clipboard.writeText(
                   tokens
                     .map((line) => line.map(({ content }) => content).join(""))
                     .join("\n"),

package/src/lib/core/DevPortalContext.ts

@@ -85,10 +85,11 @@ export class DevPortalContext {
   }
 
   initialize = async () => {
-    this.plugins
-      .filter(needsInitialization)
-      .forEach((plugin) => plugin.initialize(this));
-    this.authentication?.initialize(this);
+    await Promise.all([
+      this.plugins
+        .filter(needsInitialization)
+        .map((plugin) => plugin.initialize(this)),
+    ]);
   };
 
   invalidateCache = async (key: DevPortalCacheKey[]) => {

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

@@ -12,17 +12,11 @@ import {
   SelectValue,
 } from "../../components/Select.js";
 import { Button } from "../../ui/Button.js";
-import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+import { ApiKeyService } from "./index.js";
 
 type CreateApiKey = { description: string; expiresOn?: string };
 
-export const CreateApiKey = ({
-  options,
-  service,
-}: {
-  options: ApiKeyPluginOptions;
-  service: ApiKeyService;
-}) => {
+export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
   const context = useDevPortal();
   const navigate = useNavigate();
   const form = useForm<CreateApiKey>({

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

@@ -8,21 +8,15 @@ 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";
+import { ApiKeyService } from "./index.js";
 
-export const SettingsApiKeys = ({
-  options,
-  service,
-}: {
-  options: ApiKeyPluginOptions;
-  service: ApiKeyService;
-}) => {
+export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   const context = useDevPortal();
   const queryClient = useQueryClient();
   const { data } = useSuspenseQuery({
     queryFn: () => service.getKeys(context),
     queryKey: ["api-keys"],
+    retry: false,
   });
 
   const deleteKeyMutation = useMutation({
@@ -49,58 +43,56 @@ export const SettingsApiKeys = ({
         )}
       </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>
+      <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>
                 )}
-                {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>
+                {key.expiresOn && (
+                  <div>
+                    Expires on {new Date(key.expiresOn).toLocaleDateString()}
+                  </div>
                 )}
               </div>
-            </li>
-          ))}
-        </ul>
-      </Card>
+            </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>
     </div>
   );
 };

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

@@ -1,8 +1,13 @@
+import logger from "loglevel";
+import { Outlet, useRouteError } from "react-router-dom";
+import invariant from "tiny-invariant";
+import { useAuth } from "../../authentication/hook.js";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
 } from "../../core/plugins.js";
+import { Button } from "../../ui/Button.js";
 import { CreateApiKey } from "./CreateApiKey.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
 
@@ -47,7 +52,8 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
 
       await context.signRequest(request);
 
-      await fetch(request);
+      const response = await fetch(request);
+      invariant(response.ok, "Failed to delete API key");
     },
     createKey: async (apiKey, context) => {
       const request = new Request(endpoint + `/v1/developer/api-keys`, {
@@ -59,7 +65,9 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
       });
 
       await context.signRequest(request);
-      await fetch(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`);
@@ -67,12 +75,43 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
       await context.signRequest(request);
 
       const keys = await fetch(request);
+      invariant(keys.ok, "Failed to fetch API keys");
 
       return await keys.json();
     },
   };
 };
 
+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 => {
@@ -102,12 +141,18 @@ export const apiKeyPlugin = (
     getRoutes: () => {
       return [
         {
-          path: "/settings/api-keys",
-          element: <SettingsApiKeys options={options} service={service} />,
-        },
-        {
-          path: "/settings/api-keys/new",
-          element: <CreateApiKey options={options} service={service} />,
+          element: <ProtectedRoute />,
+          errorElement: <SettingsErrorBoundary />,
+          children: [
+            {
+              path: "/settings/api-keys",
+              element: <SettingsApiKeys service={service} />,
+            },
+            {
+              path: "/settings/api-keys/new",
+              element: <CreateApiKey service={service} />,
+            },
+          ],
         },
       ];
     },

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

@@ -30,7 +30,7 @@ const MarkdownHeadings = {
 
 export const MdxPage = ({
   mdxComponent: MdxComponent,
-  frontmatter,
+  frontmatter = {},
   tableOfContents,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {

package/lib/_commonjsHelpers-BkfeUUK-.js

@@ -1,28 +0,0 @@
-var u = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function f(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
-function l(e) {
-  if (e.__esModule) return e;
-  var r = e.default;
-  if (typeof r == "function") {
-    var t = function o() {
-      return this instanceof o ? Reflect.construct(r, arguments, this.constructor) : r.apply(this, arguments);
-    };
-    t.prototype = r.prototype;
-  } else t = {};
-  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(o) {
-    var n = Object.getOwnPropertyDescriptor(e, o);
-    Object.defineProperty(t, o, n.get ? n : {
-      enumerable: !0,
-      get: function() {
-        return e[o];
-      }
-    });
-  }), t;
-}
-export {
-  l as a,
-  u as c,
-  f as g
-};