zudoku 0.0.0-fix-firebase-export.2e421fda → 0.0.0-monetization-standalone.z07361713

package/src/lib/authentication/ui/EmailVerificationUi.tsx

@@ -0,0 +1,129 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CheckIcon, MailCheck, RefreshCw } from "lucide-react";
+import { Navigate, useSearchParams } from "react-router";
+import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
+import createVariantComponent from "../../util/createVariantComponent.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
+
+export const EmailVerificationUi = ({
+  onResendVerification,
+  onCheckVerification,
+}: {
+  onResendVerification: () => Promise<void>;
+  onCheckVerification: () => Promise<boolean>;
+}) => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const resendMutation = useMutation({
+    mutationFn: async () => {
+      await onResendVerification();
+    },
+  });
+
+  const checkVerificationMutation = useQuery({
+    queryKey: ["check-verification"],
+    queryFn: async () => {
+      const isVerified = await onCheckVerification();
+      return isVerified;
+    },
+  });
+
+  const error = resendMutation.error ?? checkVerificationMutation.error ?? null;
+
+  return (
+    <AuthCard>
+      {checkVerificationMutation.data === true && (
+        <Navigate to={relativeRedirectTo} />
+      )}
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+          <MailCheck className="h-8 w-8 text-primary" />
+        </div>
+        <CardTitle>Verify your email</CardTitle>
+        <CardDescription>We've sent a verification link</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {resendMutation.isSuccess && (
+          <Alert>
+            <AlertTitle>Email sent</AlertTitle>
+            <AlertDescription>
+              A new verification email has been sent. Please check your inbox.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {checkVerificationMutation.isSuccess &&
+          !checkVerificationMutation.data && (
+            <Alert>
+              <AlertDescription>
+                {checkVerificationMutation.isFetching
+                  ? "Checking verification..."
+                  : "Your email hasn't been verified yet. Please check your inbox and click the verification link."}
+              </AlertDescription>
+            </Alert>
+          )}
+
+        <div className="space-y-4">
+          <ActionButton
+            onClick={() => void checkVerificationMutation.refetch()}
+            isPending={checkVerificationMutation.isFetching}
+            className="w-full"
+          >
+            <div className="flex items-center gap-2">
+              <CheckIcon className="h-4 w-4" /> Continue
+            </div>
+          </ActionButton>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-card px-2 text-muted-foreground">
+                Didn't receive the email?
+              </span>
+            </div>
+          </div>
+
+          <Button
+            variant="outline"
+            onClick={() => void resendMutation.mutate()}
+            disabled={resendMutation.isPending}
+            className="w-full gap-2"
+          >
+            {resendMutation.isPending ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            Resend verification email
+          </Button>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Make sure to check your spam folder if you don't see the email.
+        </p>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+const AuthCard = createVariantComponent(Card, "max-w-md w-full mt-10 mx-auto");

package/src/lib/authentication/ui/ZudokuAuthUi.tsx

@@ -23,6 +23,7 @@ import {
 } from "../../ui/Form.js";
 import { cn } from "../../util/cn.js";
 import createVariantComponent from "../../util/createVariantComponent.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
 import AppleIcon from "./icons/Apple.js";
 import FacebookIcon from "./icons/Facebook.js";
 import GithubIcon from "./icons/Github.js";
@@ -137,8 +138,10 @@ export const ZudokuSignInUi = ({
   providers,
   onOAuthSignIn,
   onUsernamePasswordSignIn,
+  enableUsernamePassword,
 }: {
   providers: string[];
+  enableUsernamePassword: boolean;
   onOAuthSignIn: (providerId: string) => Promise<void>;
   onUsernamePasswordSignIn: (email: string, password: string) => Promise<void>;
 }) => {
@@ -146,8 +149,20 @@ export const ZudokuSignInUi = ({
   const [searchParams] = useSearchParams();
   const redirectTo = searchParams.get("redirectTo");
 
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const invalidProviders = providers.filter(
+    (provider) => !isValidAuthProviderId(provider),
+  );
+
+  if (invalidProviders.length > 0) {
+    throw new Error(
+      `Unsupported auth provider: ${invalidProviders.join(", ")}`,
+    );
+  }
+
   if (!isAuthProviderIdArray(providers)) {
-    throw new Error("Invalid auth provider IDs");
+    throw new Error(`Unsupported auth provider: ${providers.join(", ")}`);
   }
 
   const signInUsernameMutation = useMutation({
@@ -155,7 +170,7 @@ export const ZudokuSignInUi = ({
       await onUsernamePasswordSignIn(email, password);
     },
     onSuccess: () => {
-      void navigate(redirectTo ?? "/");
+      void navigate(relativeRedirectTo);
     },
   });
   const signInByProviderMutation = useMutation({
@@ -163,7 +178,7 @@ export const ZudokuSignInUi = ({
       await onOAuthSignIn(providerId);
     },
     onSuccess: () => {
-      void navigate(redirectTo ?? "/");
+      void navigate(relativeRedirectTo);
     },
   });
 
@@ -192,24 +207,38 @@ export const ZudokuSignInUi = ({
             <AlertDescription>{error?.message}</AlertDescription>
           </Alert>
         )}
-        <EmailPasswordForm
-          form={form}
-          onSubmit={(data) =>
-            void signInUsernameMutation.mutate({
-              email: data.email,
-              password: data.password,
-            })
-          }
-          submitLabel="Sign in"
-          isPending={pending}
-        />
-        <ProviderSeparator providers={providers} />
-        <ProviderButtons
-          providers={providers}
-          onClick={(providerId) =>
-            signInByProviderMutation.mutate({ providerId })
-          }
-        />
+        {enableUsernamePassword && (
+          <>
+            <EmailPasswordForm
+              form={form}
+              onSubmit={(data) =>
+                void signInUsernameMutation.mutate({
+                  email: data.email,
+                  password: data.password,
+                })
+              }
+              submitLabel="Sign in"
+              isPending={pending}
+            />
+            <Link
+              to="/reset-password"
+              className="text-sm text-muted-foreground text-right -mt-2"
+            >
+              Forgot password?
+            </Link>
+          </>
+        )}
+        {enableUsernamePassword && providers.length > 0 && (
+          <ProviderSeparator providers={providers} />
+        )}
+        {providers.length > 0 && (
+          <ProviderButtons
+            providers={providers}
+            onClick={(providerId) =>
+              signInByProviderMutation.mutate({ providerId })
+            }
+          />
+        )}
         <Link to="/signup" className="text-sm text-muted-foreground">
           Don't have an account? Sign up.
         </Link>
@@ -220,13 +249,21 @@ export const ZudokuSignInUi = ({
 
 export const ZudokuSignUpUi = ({
   providers,
+  enableUsernamePassword,
   onOAuthSignUp,
   onUsernamePasswordSignUp,
 }: {
   providers: string[];
+  enableUsernamePassword: boolean;
   onOAuthSignUp: (providerId: string) => Promise<void>;
   onUsernamePasswordSignUp: (email: string, password: string) => Promise<void>;
 }) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+
+  const relativeRedirectTo = redirectTo?.replace(window.location.origin, "");
+
   if (!isAuthProviderIdArray(providers)) {
     throw new Error("Invalid auth provider IDs");
   }
@@ -235,12 +272,18 @@ export const ZudokuSignUpUi = ({
     mutationFn: async ({ email, password }: FormFields) => {
       await onUsernamePasswordSignUp(email, password);
     },
+    onSuccess: () => {
+      void navigate(relativeRedirectTo ?? "/");
+    },
   });
 
   const signUpByProviderMutation = useMutation({
     mutationFn: async ({ providerId }: { providerId: string }) => {
       await onOAuthSignUp(providerId);
     },
+    onSuccess: () => {
+      void navigate(relativeRedirectTo ?? "/");
+    },
   });
 
   const form = useForm<FormFields>({
@@ -269,24 +312,30 @@ export const ZudokuSignUpUi = ({
           </Alert>
         )}
 
-        <EmailPasswordForm
-          form={form}
-          onSubmit={(data) =>
-            void signUpUsernameMutation.mutate({
-              email: data.email,
-              password: data.password,
-            })
-          }
-          submitLabel="Sign up"
-          isPending={pending}
-        />
-        <ProviderSeparator providers={providers} />
-        <ProviderButtons
-          providers={providers}
-          onClick={(providerId) =>
-            signUpByProviderMutation.mutate({ providerId })
-          }
-        />
+        {enableUsernamePassword && (
+          <EmailPasswordForm
+            form={form}
+            onSubmit={(data) =>
+              void signUpUsernameMutation.mutate({
+                email: data.email,
+                password: data.password,
+              })
+            }
+            submitLabel="Sign up"
+            isPending={pending}
+          />
+        )}
+        {enableUsernamePassword && providers.length > 0 && (
+          <ProviderSeparator providers={providers} />
+        )}
+        {providers.length > 0 && (
+          <ProviderButtons
+            providers={providers}
+            onClick={(providerId) =>
+              signUpByProviderMutation.mutate({ providerId })
+            }
+          />
+        )}
         <Link to="/signin" className="text-sm text-muted-foreground">
           Already have an account? Sign in.
         </Link>
@@ -333,3 +382,96 @@ const ProviderSeparator = ({ providers }: { providers: AuthProviderId[] }) => {
     )
   );
 };
+
+export const ZudokuPasswordResetUi = ({
+  onPasswordReset,
+}: {
+  onPasswordReset: (email: string) => Promise<void>;
+}) => {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  const passwordResetMutation = useMutation({
+    mutationFn: async ({ email }: { email: string }) => {
+      await onPasswordReset(email);
+    },
+    onSuccess: () => {
+      setIsSubmitted(true);
+    },
+  });
+
+  const form = useForm<{ email: string }>({
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const error = passwordResetMutation.error;
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Reset password</CardTitle>
+        <CardDescription>
+          {isSubmitted
+            ? "Check your email for a password reset link."
+            : "Enter your email address and we'll send you a link to reset your password."}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+        {isSubmitted ? (
+          <div className="flex flex-col gap-4">
+            <Alert>
+              <AlertTitle>Email sent</AlertTitle>
+              <AlertDescription>
+                If an account exists with that email address, you will receive a
+                password reset link shortly.
+              </AlertDescription>
+            </Alert>
+            <Link to="/signin">
+              <Button variant="outline" className="w-full">
+                Back to sign in
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          <>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit((data) =>
+                  passwordResetMutation.mutate({ email: data.email }),
+                )}
+                className="flex flex-col gap-2"
+              >
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="you@example.com"
+                      {...form.register("email")}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+                <ActionButton
+                  type="submit"
+                  isPending={passwordResetMutation.isPending}
+                >
+                  Reset password
+                </ActionButton>
+              </form>
+            </Form>
+            <Link to="/signin" className="text-sm text-muted-foreground">
+              Sign in
+            </Link>
+          </>
+        )}
+      </CardContent>
+    </AuthCard>
+  );
+};

package/src/lib/authentication/utils/relativeRedirectUrl.ts

@@ -0,0 +1,12 @@
+import { joinUrl } from "../../util/joinUrl.js";
+
+export const getRelativeRedirectUrl = (redirectTo?: string | null) => {
+  if (!redirectTo) {
+    return "/";
+  }
+
+  return redirectTo.replace(
+    joinUrl(window.location.origin, import.meta.env.BASE_URL),
+    "",
+  );
+};

package/src/lib/components/Bootstrap.tsx

@@ -12,7 +12,6 @@ import {
   StaticRouterProvider,
 } from "react-router";
 import { RouterProvider } from "react-router/dom";
-import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 import { BypassProtectedRoutesContext } from "./context/BypassProtectedRoutesContext.js";
 
 const queryClient = new QueryClient({
@@ -36,9 +35,7 @@ const Bootstrap = ({
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
         <BypassProtectedRoutesContext value={false}>
           <HelmetProvider>
-            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-              <RouterProvider router={router} />
-            </StaggeredRenderContext.Provider>
+            <RouterProvider router={router} />
           </HelmetProvider>
         </BypassProtectedRoutesContext>
       </HydrationBoundary>

package/src/lib/components/Pagination.tsx

@@ -13,19 +13,18 @@ export const Pagination = ({
   className?: string;
 }) => {
   const linkClass =
-    "group transition-all p-5 space-x-1 rtl:space-x-reverse transition-all hover:text-foreground";
-
+    "group min-w-0 transition-all p-5 space-x-1 rtl:space-x-reverse hover:text-foreground";
   return (
     <div
       className={cn(
-        "flex -mx-4 text-muted-foreground font-semibold",
+        "flex flex-wrap gap-2 -mx-4 text-muted-foreground font-semibold",
         prev ? "justify-between" : "justify-end",
         className,
       )}
       data-pagefind-ignore="all"
     >
       {prev && (
-        <Button variant="ghost" asChild>
+        <Button variant="ghost" className="min-w-0 max-w-full" asChild>
           <Link to={prev.to} relative="path" className={linkClass}>
             <ArrowLeftIcon size={14} strokeWidth={2.5} />
             <span className="text-lg truncate">{prev.label}</span>
@@ -33,7 +32,7 @@ export const Pagination = ({
         </Button>
       )}
       {next && (
-        <Button variant="ghost" asChild>
+        <Button variant="ghost" className="ms-auto min-w-0 max-w-full" asChild>
           <Link to={next.to} relative="path" className={linkClass}>
             <span className="text-lg truncate">{next.label}</span>
             <ArrowRightIcon size={14} strokeWidth={2.5} />

package/src/lib/components/Zudoku.tsx

@@ -5,7 +5,7 @@ import { ThemeProvider } from "next-themes";
 import {
   memo,
   type PropsWithChildren,
-  useContext,
+  Suspense,
   useEffect,
   useMemo,
   useState,
@@ -18,7 +18,6 @@ import {
   type ZudokuContextOptions,
 } from "../core/ZudokuContext.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 {
@@ -56,12 +55,7 @@ const ZudokuInner = memo(
         ...props.mdx?.components,
       };
     }, [props.mdx?.components, props.plugins]);
-    const { stagger } = useContext(StaggeredRenderContext);
     const [didNavigate, setDidNavigate] = useState(false);
-    const staggeredValue = useMemo(
-      () => (didNavigate ? { stagger: true } : { stagger }),
-      [stagger, didNavigate],
-    );
     const navigation = useNavigation();
     const queryClient = useQueryClient();
 
@@ -81,8 +75,8 @@ const ZudokuInner = memo(
     return (
       <>
         <Helmet>{heads}</Helmet>
-        <StaggeredRenderContext.Provider value={staggeredValue}>
-          <ZudokuProvider context={zudokuContext}>
+        <ZudokuProvider context={zudokuContext}>
+          <Suspense fallback={<div>Zudoku Loading...</div>}>
             <RouterEventsEmitter />
             <SlotProvider slots={props.slots ?? props.UNSAFE_slotlets}>
               <MDXProvider components={mdxComponents}>
@@ -95,8 +89,8 @@ const ZudokuInner = memo(
                 </ThemeProvider>
               </MDXProvider>
             </SlotProvider>
-          </ZudokuProvider>
-        </StaggeredRenderContext.Provider>
+          </Suspense>
+        </ZudokuProvider>
       </>
     );
   },

package/src/lib/components/context/ZudokuContext.ts

@@ -1,16 +1,12 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
-import { createContext, useContext, useEffect } from "react";
+import { useContext, useEffect } from "react";
 import { matchPath, useLocation } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { useAuthState } from "../../authentication/state.js";
-import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { CACHE_KEYS, useCache } from "../cache.js";
 import { traverseNavigation } from "../navigation/utils.js";
-
-export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
-  undefined,
-);
+import { ZudokuReactContext } from "./ZudokuReactContext.js";
 
 export const useZudoku = () => {
   const context = useContext(ZudokuReactContext);

package/src/lib/components/context/ZudokuProvider.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { NO_DEHYDRATE } from "../cache.js";
-import { ZudokuReactContext } from "./ZudokuContext.js";
+import { ZudokuReactContext } from "./ZudokuReactContext.js";
 
 export const ZudokuProvider = ({
   children,

package/src/lib/components/context/ZudokuReactContext.tsx

@@ -0,0 +1,17 @@
+import { type Context, createContext } from "react";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
+
+/**
+ * During SSR, Vite's module runner can load the same module multiple times
+ * (once for the main app, once for external plugins), creating duplicate
+ * React contexts that don't share state.
+ */
+declare global {
+  var __ZUDOKU_CONTEXT: Context<ZudokuContext | undefined>;
+}
+
+globalThis.__ZUDOKU_CONTEXT ??= createContext<ZudokuContext | undefined>(
+  undefined,
+);
+
+export const ZudokuReactContext = globalThis.__ZUDOKU_CONTEXT;

package/src/lib/components/index.ts

@@ -5,12 +5,14 @@ import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
 import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
+import { ZudokuError as ZudokuErrorImport } from "../util/invariant.js";
 import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import {
   CACHE_KEYS as CACHE_KEYS_IMPORT,
   useCache as useCacheImport,
 } from "./cache.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
+import { Heading as HeadingImport } from "./Heading.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
 import { Slot as SlotImport } from "./Slot.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
@@ -18,6 +20,7 @@ import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 
 export const Head = /*@__PURE__*/ Helmet;
+export const Heading = /*@__PURE__*/ HeadingImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const Markdown = /*@__PURE__*/ MarkdownImport;
 export const Spinner = /*@__PURE__*/ SpinnerImport;
@@ -27,6 +30,7 @@ export const Link = /*@__PURE__*/ LinkImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 export const Typography = /*@__PURE__*/ TypographyImport;
 export const Slot = /*@__PURE__*/ SlotImport;
+export const ZudokuError = /*@__PURE__*/ ZudokuErrorImport;
 
 /** @deprecated Import from `zudoku/hooks` instead */
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

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

@@ -86,7 +86,9 @@ export const NavigationItem = ({
           onClick={onRequestClose}
           end
         >
-          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
           {item.badge ? (
             <>
               {item.label && (
@@ -117,7 +119,9 @@ export const NavigationItem = ({
           })}
           onClick={onRequestClose}
         >
-          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
           {item.badge ? (
             <>
               {item.label && <TruncatedLabel label={item.label} />}
@@ -135,7 +139,9 @@ export const NavigationItem = ({
           rel="noopener noreferrer"
           onClick={onRequestClose}
         >
-          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
           <span className="whitespace-normal">{item.label}</span>
           {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
           <span className="whitespace-nowrap">