zudoku 0.3.0-dev.7 → 0.3.0-dev.71

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

@@ -1,11 +1,11 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { OpenIDAuthenticationConfig } from "../../../config/config.js";
-import { RouteObject } from "../../core/router.js";
 import {
   AuthenticationProvider,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
+import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { Callback } from "../Callback.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, UserProfile } from "../state.js";
@@ -19,6 +19,25 @@ interface TokenState {
   tokenType: string;
 }
 
+class OpenIdAuthPlugin extends AuthenticationPlugin {
+  constructor(
+    private callbackUrlPath: string,
+    private handleCallback: () => Promise<string>,
+    public initialize?: () => Promise<void>,
+  ) {
+    super();
+  }
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: this.callbackUrlPath,
+        element: <Callback handleCallback={this.handleCallback} />,
+      },
+    ];
+  }
+}
+
 export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   protected client: oauth.Client;
   protected issuer: string;
@@ -30,20 +49,32 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   protected callbackUrlPath = "/oauth/callback";
   protected logoutRedirectUrlPath = "/";
+  private readonly redirectToAfterSignUp: string;
+  private readonly redirectToAfterSignIn: string;
+  private readonly redirectToAfterSignOut: string;
+  private readonly audience?: string;
 
   constructor({
     issuer,
+    audience,
     authorizationEndpoint,
     tokenEndpoint,
     clientId,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
       token_endpoint_auth_method: "none",
     };
+    this.audience = audience;
     this.issuer = issuer;
     this.authorizationEndpoint = authorizationEndpoint;
     this.tokenEndpoint = tokenEndpoint;
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
   }
 
   protected async getAuthServer() {
@@ -89,15 +120,25 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
+    localStorage.setItem("openid-token", JSON.stringify(this.tokens));
+  }
+
+  async signUp() {
+    return this.authorize(true);
   }
 
-  async initialize() {
-    // No init needed
+  async signIn() {
+    return this.authorize();
   }
 
-  async login(): Promise<void> {
+  private async authorize(signUp = false): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
+    if (signUp) {
+      localStorage.setItem("sign-up", "true");
+    } else {
+      localStorage.removeItem("sign-up");
+    }
 
     if (!authorizationServer.authorization_endpoint) {
       throw new AuthorizationError("No authorization endpoint");
@@ -115,10 +156,18 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
     // redirect user to as.authorization_endpoint
     const authorizationUrl = new URL(
-      authorizationServer.authorization_endpoint,
+      signUp
+        ? authorizationServer.registration_endpoint ??
+          authorizationServer.authorization_endpoint
+        : authorizationServer.authorization_endpoint,
     );
 
-    const redirectUrl = new URL(window.location.href);
+    const redirectUrl = new URL(
+      (signUp
+        ? window.location.origin + this.redirectToAfterSignUp
+        : window.location.origin + this.redirectToAfterSignIn) ??
+        window.location.href,
+    );
     redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
@@ -131,6 +180,9 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       "code_challenge_method",
       code_challenge_method,
     );
+    if (this.audience) {
+      authorizationUrl.searchParams.set("audience", this.audience);
+    }
 
     /**
      * We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is
@@ -147,6 +199,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     // now redirect the user to authorizationUrl.href
     location.href = authorizationUrl.href;
   }
+
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
     if (!this.tokens) {
@@ -177,7 +230,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return this.tokens.accessToken;
   }
 
-  async logout(): Promise<void> {
+  async signOut(): Promise<void> {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
@@ -186,7 +239,9 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
     const as = await this.getAuthServer();
 
-    const redirectUrl = new URL(window.location.href);
+    const redirectUrl = new URL(
+      window.location.origin + this.redirectToAfterSignOut,
+    );
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     let logoutUrl: URL;
@@ -207,16 +262,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       logoutUrl = redirectUrl;
     }
   }
-  getRoutes(): RouteObject[] {
-    return [
-      {
-        path: this.callbackUrlPath,
-        element: <Callback handleCallback={this.handleCallback} />,
-      },
-    ];
-  }
 
-  handleCallback = async (): Promise<void> => {
+  handleCallback = async (): Promise<string> => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
 
@@ -248,7 +295,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
 
     const redirectUrl = new URL(url);
-    redirectUrl.pathname = this.callbackUrlPath;
+    redirectUrl.pathname = this.redirectToAfterSignIn ?? this.callbackUrlPath;
     redirectUrl.search = "";
 
     const response = await oauth.authorizationCodeGrantRequest(
@@ -298,6 +345,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       profile,
     });
 
+    if (localStorage.getItem("sign-up")) {
+      return this.redirectToAfterSignUp;
+    } else {
+      return this.redirectToAfterSignIn;
+    }
+
     // // Remove the query strings so react query doesn't keep retrying
     // // to make the token request
     // history.replaceState({}, "", window.location.pathname);
@@ -305,6 +358,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     // Returning true because we are using react query
     // return true;
   };
+
+  getAuthenticationPlugin() {
+    return new OpenIdAuthPlugin(this.callbackUrlPath, () =>
+      this.handleCallback(),
+    );
+  }
 }
 
 const openIDAuth: AuthenticationProviderInitializer<

package/src/lib/components/Bootstrap.tsx

@@ -0,0 +1,44 @@
+import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
+import { StrictMode } from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import {
+  type StaticHandlerContext,
+  StaticRouterProvider,
+} from "react-router-dom/server.js";
+import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
+
+const Bootstrap = ({
+  router,
+  hydrate = false,
+}: {
+  hydrate?: boolean;
+  router: ReturnType<typeof createBrowserRouter>;
+}) => {
+  return (
+    <StrictMode>
+      <HelmetProvider>
+        <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+          <RouterProvider router={router} />
+        </StaggeredRenderContext.Provider>
+      </HelmetProvider>
+    </StrictMode>
+  );
+};
+
+const BootstrapStatic = ({
+  router,
+  context,
+  helmetContext,
+}: {
+  helmetContext: HelmetData["context"];
+  context: StaticHandlerContext;
+  router: ReturnType<typeof createBrowserRouter>;
+}) => (
+  <StrictMode>
+    <HelmetProvider context={helmetContext}>
+      <StaticRouterProvider router={router} context={context} />
+    </HelmetProvider>
+  </StrictMode>
+);
+
+export { Bootstrap, BootstrapStatic };

package/src/lib/components/DevPortal.tsx

@@ -1,28 +1,35 @@
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { memo, Suspense, useEffect, useMemo } from "react";
+import { Helmet } from "@zudoku/react-helmet-async";
+import {
+  Fragment,
+  memo,
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { useNavigation } from "react-router-dom";
 import {
   DevPortalContext,
   queryClient,
-  type NavigationItem,
+  ZudokuContextOptions,
 } from "../core/DevPortalContext.js";
-import { HelmetProvider } from "../core/helmet.js";
-import { type DevPortalPlugin } from "../core/plugins.js";
-
-import { AuthenticationProvider } from "../authentication/authentication.js";
-import {
-  MdxComponents,
-  type MdxComponentsType,
-} from "../util/MdxComponents.js";
+import { hasHead } from "../core/plugins.js";
+import { TopLevelError } from "../errors/TopLevelError.js";
+import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
+import { MdxComponents } from "../util/MdxComponents.js";
+import "../util/requestIdleCallbackPolyfill.js";
 import {
   ComponentsProvider,
   DEFAULT_COMPONENTS,
-  type ComponentsContextType,
 } from "./context/ComponentsContext.js";
 import { DevPortalProvider } from "./context/DevPortalProvider.js";
 import { ThemeProvider } from "./context/ThemeContext.js";
 import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
-import { Router } from "./Router.js";
+import { SlotletProvider } from "./SlotletProvider.js";
 
 export const DevPortalSystemPaths = {
   Settings: "/settings",
@@ -32,31 +39,33 @@ export type DevPortalPath =
   | string
   | (typeof DevPortalSystemPaths)[keyof typeof DevPortalSystemPaths];
 
-export type DevPortalProps = {
-  meta?: Partial<{
-    headerTitle: string;
-    pageTitle: string;
-    description: string;
-    logo: string;
-    favicon: string;
-  }>;
-  authentication?: AuthenticationProvider;
-  navigation: NavigationItem[];
-  plugins?: DevPortalPlugin[];
-  mdxComponents?: MdxComponentsType;
-  overrides?: ComponentsContextType;
-};
-
-const DevPortalInner = (props: DevPortalProps) => {
+const DevPortalInner = ({
+  children,
+  ...props
+}: PropsWithChildren<ZudokuContextOptions>) => {
   const components = useMemo(
     () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
     [props.overrides],
   );
 
   const mdxComponents = useMemo(
-    () => ({ ...MdxComponents, ...props.mdxComponents }),
-    [props.mdxComponents],
+    () => ({ ...MdxComponents, ...props.mdx?.components }),
+    [props.mdx?.components],
+  );
+  const { stagger } = useContext(StaggeredRenderContext);
+  const [didNavigate, setDidNavigate] = useState(false);
+  const staggeredValue = useMemo(
+    () => (didNavigate ? { stagger: true } : { stagger }),
+    [stagger, didNavigate],
   );
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    if (didNavigate) {
+      return;
+    }
+    setDidNavigate(true);
+  }, [didNavigate, navigation.location]);
 
   const devPortalContext = useMemo(() => new DevPortalContext(props), [props]);
 
@@ -64,39 +73,40 @@ const DevPortalInner = (props: DevPortalProps) => {
     void devPortalContext.initialize();
   }, [devPortalContext]);
 
+  const heads = props.plugins
+    ?.filter(hasHead)
+    // eslint-disable-next-line react/no-array-index-key
+    .map((plugin, i) => <Fragment key={i}>{plugin.getHead?.()}</Fragment>);
+
   return (
     <QueryClientProvider client={queryClient}>
-      <HelmetProvider>
+      <Helmet>{heads}</Helmet>
+      <StaggeredRenderContext.Provider value={staggeredValue}>
         <DevPortalProvider value={devPortalContext}>
           <MDXProvider components={mdxComponents}>
             <ThemeProvider>
               <ComponentsProvider value={components}>
-                <ViewportAnchorProvider>
-                  <Suspense
-                    fallback={
-                      <div className="grid place-items-center h-full">
-                        Loading...
-                      </div>
-                    }
-                  >
-                    <Router
-                      plugins={[
-                        ...(props.plugins ?? []),
-                        ...(props.authentication ? [props.authentication] : []),
-                      ]}
-                    />
-                  </Suspense>
-                </ViewportAnchorProvider>
+                <SlotletProvider slotlets={props.slotlets}>
+                  <ViewportAnchorProvider>{children}</ViewportAnchorProvider>
+                </SlotletProvider>
               </ComponentsProvider>
             </ThemeProvider>
           </MDXProvider>
         </DevPortalProvider>
-      </HelmetProvider>
+      </StaggeredRenderContext.Provider>
     </QueryClientProvider>
   );
 };
 
-const DevPortal = memo(DevPortalInner);
+const Inner = memo(DevPortalInner);
+
+const DevPortal = (props: ZudokuContextOptions) => {
+  return (
+    <ErrorBoundary FallbackComponent={TopLevelError}>
+      <Inner {...props} />
+    </ErrorBoundary>
+  );
+};
 DevPortal.displayName = "DevPortal";
 
 export { DevPortal };

package/src/lib/components/DeveloperHint.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Callout } from "../ui/Callout.js";
+
+export const DeveloperHint = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  // TODO: figure out a way to do that in consumer dev mode not "internal"
+  //  so this doesn't get stripped out in the build
+  if (!import.meta.env.DEV) return;
+
+  return (
+    <Callout type="caution" title="Developer hint" className={className}>
+      <div className="flex flex-col gap-2">
+        <div>{children}</div>
+        <small className="italic">
+          Note: This hint is only shown in development mode.
+        </small>
+      </div>
+    </Callout>
+  );
+};

package/src/lib/components/ErrorPage.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { CategoryHeading } from "./CategoryHeading.js";
+import { Heading } from "./Heading.js";
+import { ProseClasses } from "./Markdown.js";
+
+export const ErrorPage = ({
+  title = "An error occurred",
+  message,
+  category,
+}: {
+  title?: ReactNode;
+  message?: ReactNode;
+  category?: ReactNode;
+}) => {
+  return (
+    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+      {category && <CategoryHeading>{category}</CategoryHeading>}
+      {title && (
+        <Heading level={1} className="flex gap-3.5 items-center">
+          {title}
+        </Heading>
+      )}
+      <p>{message}</p>
+      <Link to="/">Go back home</Link>
+    </div>
+  );
+};

package/src/lib/components/Header.tsx

@@ -1,64 +1,129 @@
-import { MoonStarIcon, SearchIcon, SunIcon } from "lucide-react";
+import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
 
+import { Link } from "react-router-dom";
 import { useAuth } from "../authentication/hook.js";
+import { isProfileMenuPlugin, NavigationItem } from "../core/plugins.js";
+import { Button } from "../ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../ui/DropdownMenu.js";
+import { cn } from "../util/cn.js";
 import { TopNavigation } from "./TopNavigation.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useTheme } from "./context/ThemeContext.js";
 
+const RecursiveMenu = ({ item }: { item: NavigationItem }) => {
+  return item.children ? (
+    <DropdownMenuSub key={item.label}>
+      <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent>
+          {item.children.map((item, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <RecursiveMenu key={i} item={item} />
+          ))}
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+  ) : (
+    <Link to={item.path ?? ""}>
+      <DropdownMenuItem key={item.label}>{item.label}</DropdownMenuItem>
+    </Link>
+  );
+};
+
 export const Header = memo(function HeaderInner() {
   const [isDark, toggleTheme] = useTheme();
   const { isAuthenticated, profile, isAuthEnabled, login, logout } = useAuth();
-  const { meta } = useDevPortal();
+  const context = useDevPortal();
+  const { page, plugins } = context;
 
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
   return (
     <header className="fixed top-0 w-full z-10 bg-background/80 backdrop-blur">
       <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b border-border px-12 h-[--top-header-height]">
-          <div className="flex items-center gap-3.5">
-            {meta?.logo && (
-              <img src={meta.logo} alt="My Dev Portal" className="h-10" />
-            )}
-            <span className="font-bold text-2xl text-foreground/85 tracking-wide">
-              {meta?.headerTitle}
-            </span>
+        <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
+          <div className="flex">
+            <Link to="/">
+              <div className="flex items-center gap-3.5">
+                {page?.logo && (
+                  <>
+                    <img
+                      src={page.logo.src.light}
+                      alt={page.logo.alt ?? page.pageTitle}
+                      style={{ width: page.logo.width }}
+                      className={cn("h-10", isDark && "hidden")}
+                      loading="lazy"
+                    />
+                    <img
+                      src={page.logo.src.dark}
+                      alt={page.logo.alt ?? page.pageTitle}
+                      style={{ width: page.logo.width }}
+                      className={cn("h-10", !isDark && "hidden")}
+                      loading="lazy"
+                    />
+                  </>
+                )}
+                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                  {page?.pageTitle}
+                </span>
+              </div>
+            </Link>
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
             <div className="w-full max-w-prose">
-              <button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
+              {/*<button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
                 <div className="flex items-center gap-2 flex-grow">
                   <SearchIcon size={14} />
                   Search
                 </div>
-                <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
+                <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
                   ⌘K
                 </kbd>
-              </button>
+              </button>*/}
             </div>
 
-            <div className="items-center justify-self-end text-sm hidden lg:flex">
-              {isAuthEnabled && (
-                <>
-                  {isAuthenticated ? (
-                    <button
-                      className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded text-nowrap"
-                      onClick={logout}
-                    >
-                      Logout {profile?.email ? `(${profile.email})` : null}
-                    </button>
-                  ) : (
-                    <button
-                      className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
-                      onClick={login}
-                    >
-                      Login
-                    </button>
-                  )}
-                </>
+            <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
+              {isAuthEnabled && !isAuthenticated ? (
+                <Button variant="ghost" asChild>
+                  <Link to="/signin">Login</Link>
+                </Button>
+              ) : (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost">
+                      {profile?.email ? `${profile.email}` : "My Account"}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className="w-56">
+                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    {plugins
+                      .filter((p) => isProfileMenuPlugin(p))
+                      .flatMap((p) => p.getProfileMenuItems(context))
+                      .map((i) => (
+                        <RecursiveMenu key={i.label} item={i} />
+                      ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
               )}
+
               <button
+                type="button"
+                aria-label={
+                  isDark ? "Switch to light mode" : "Switch to dark mode"
+                }
                 className="cursor-pointer hover:bg-secondary p-2.5 -m-2.5 rounded-full"
                 onClick={toggleTheme}
               >