@erikey/react 0.4.26 → 0.4.28

package/src/ui/components/ui/separator.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+interface SeparatorProps extends React.ComponentProps<"div"> {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+}
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      role={decorative ? "none" : "separator"}
+      aria-orientation={decorative ? undefined : orientation}
+      data-slot="separator"
+      data-orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
+export type { SeparatorProps }

package/src/ui/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/ui/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/ui/components/user-avatar.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import { UserRoundIcon } from "lucide-react"
+import { type ComponentProps, useContext, useState } from "react"
+
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import { getGravatarUrl } from "../lib/gravatar-utils"
+import { cn } from "../lib/utils"
+import type { AuthLocalization } from "../localization/auth-localization"
+import type { Profile } from "../types/profile"
+import { Skeleton } from "./ui/skeleton"
+
+export interface UserAvatarClassNames {
+    base?: string
+    image?: string
+    fallback?: string
+    fallbackIcon?: string
+    skeleton?: string
+}
+
+export interface UserAvatarProps {
+    classNames?: UserAvatarClassNames
+    isPending?: boolean
+    size?: "sm" | "default" | "lg" | "xl" | null
+    user?: Profile | null
+    /**
+     * @default authLocalization
+     * @remarks `AuthLocalization`
+     */
+    localization?: Partial<AuthLocalization>
+}
+
+/**
+ * Displays a user avatar with image and fallback support
+ *
+ * Renders a user's avatar image when available, with appropriate fallbacks:
+ * - Shows a skeleton when isPending is true
+ * - Displays first two characters of user's name when no image is available
+ * - Falls back to a generic user icon when neither image nor name is available
+ */
+export function UserAvatar({
+    className,
+    classNames,
+    isPending,
+    size,
+    user,
+    localization: propLocalization,
+    ...props
+}: UserAvatarProps & ComponentProps<"div">) {
+    const {
+        localization: contextLocalization,
+        gravatar,
+        avatar
+    } = useContext(AuthUIContext)
+
+    const localization = { ...contextLocalization, ...propLocalization }
+
+    const [imageError, setImageError] = useState(false)
+
+    const name =
+        user?.displayName ||
+        user?.name ||
+        user?.fullName ||
+        user?.firstName ||
+        user?.displayUsername ||
+        user?.username ||
+        user?.email
+    const userImage = user?.image || user?.avatar || user?.avatarUrl
+
+    // Calculate gravatar URL synchronously
+    const gravatarUrl =
+        gravatar && user?.email
+            ? getGravatarUrl(
+                  user.email,
+                  gravatar === true ? undefined : gravatar
+              )
+            : null
+
+    const src = gravatar ? gravatarUrl : userImage
+    const showFallback = !src || imageError
+
+    const sizeClass =
+        size === "sm"
+            ? "size-6"
+            : size === "lg"
+              ? "size-10"
+              : size === "xl"
+                ? "size-12"
+                : "size-8"
+
+    if (isPending) {
+        return (
+            <Skeleton
+                className={cn(
+                    "shrink-0 rounded-full",
+                    sizeClass,
+                    className,
+                    classNames?.base,
+                    classNames?.skeleton
+                )}
+            />
+        )
+    }
+
+    return (
+        <div
+            className={cn(
+                "relative flex shrink-0 overflow-hidden rounded-full bg-muted",
+                sizeClass,
+                className,
+                classNames?.base
+            )}
+            {...props}
+        >
+            {!showFallback && (
+                avatar?.Image ? (
+                    <avatar.Image
+                        alt={name || localization?.USER}
+                        className={cn("aspect-square h-full w-full object-cover", classNames?.image)}
+                        src={src || ""}
+                    />
+                ) : (
+                    <img
+                        alt={name || localization?.USER}
+                        className={cn("aspect-square h-full w-full object-cover", classNames?.image)}
+                        src={src || undefined}
+                        onError={() => setImageError(true)}
+                    />
+                )
+            )}
+
+            {showFallback && (
+                <span
+                    className={cn(
+                        "flex h-full w-full items-center justify-center text-foreground uppercase",
+                        size === "sm" ? "text-xs" : size === "lg" || size === "xl" ? "text-base" : "text-sm",
+                        classNames?.fallback
+                    )}
+                >
+                    {firstTwoCharacters(name) || (
+                        <UserRoundIcon
+                            className={cn("size-[50%]", classNames?.fallbackIcon)}
+                        />
+                    )}
+                </span>
+            )}
+        </div>
+    )
+}
+
+const firstTwoCharacters = (name?: string | null) => name?.slice(0, 2)

package/src/ui/hooks/use-auth-data.ts

@@ -0,0 +1,193 @@
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+    useSyncExternalStore
+} from "react"
+
+import { authDataCache } from "../lib/auth-data-cache"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import { getLocalizedError } from "../lib/utils"
+import type { FetchError } from "../types/fetch-error"
+
+export function useAuthData<T>({
+    queryFn,
+    cacheKey,
+    staleTime = 10000 // Default 10 seconds
+}: {
+    queryFn: () => Promise<{ data: T | null; error?: FetchError | null }>
+    cacheKey?: string
+    staleTime?: number
+}) {
+    const {
+        hooks: { useSession },
+        toast,
+        localization,
+        localizeErrors
+    } = useContext(AuthUIContext)
+    const { data: sessionData, isPending: sessionPending } = useSession()
+
+    // Generate a stable cache key based on the queryFn if not provided
+    const queryFnRef = useRef(queryFn)
+    queryFnRef.current = queryFn
+
+    const stableCacheKey = cacheKey || queryFn.toString()
+
+    // Subscribe to cache updates for this key
+    const cacheEntry = useSyncExternalStore(
+        useCallback(
+            (callback) => authDataCache.subscribe(stableCacheKey, callback),
+            [stableCacheKey]
+        ),
+        useCallback(
+            () => authDataCache.get<T>(stableCacheKey),
+            [stableCacheKey]
+        ),
+        useCallback(
+            () => authDataCache.get<T>(stableCacheKey),
+            [stableCacheKey]
+        )
+    )
+
+    const initialized = useRef(false)
+    const previousUserId = useRef<string | undefined>(undefined)
+    const [error, setError] = useState<FetchError | null>(null)
+
+    const refetch = useCallback(async () => {
+        // Check if there's already an in-flight request for this key
+        const existingRequest = authDataCache.getInFlightRequest<{
+            data: T | null
+            error?: FetchError | null
+        }>(stableCacheKey)
+        if (existingRequest) {
+            // Wait for the existing request to complete
+            try {
+                const result = await existingRequest
+                if (result.error) {
+                    setError(result.error)
+                } else {
+                    setError(null)
+                }
+            } catch (err) {
+                setError(err as FetchError)
+            }
+            return
+        }
+
+        // Mark as refetching if we have cached data
+        if (cacheEntry?.data !== undefined) {
+            authDataCache.setRefetching(stableCacheKey, true)
+        }
+
+        // Create the fetch promise
+        const fetchPromise = queryFnRef.current()
+
+        // Store the promise as in-flight
+        authDataCache.setInFlightRequest(stableCacheKey, fetchPromise)
+
+        try {
+            const { data, error } = await fetchPromise
+
+            if (error) {
+                setError(error)
+                toast({
+                    variant: "error",
+                    message: getLocalizedError({
+                        error,
+                        localization,
+                        localizeErrors
+                    })
+                })
+            } else {
+                setError(null)
+            }
+
+            // Update cache with new data
+            authDataCache.set(stableCacheKey, data)
+        } catch (err) {
+            const error = err as FetchError
+            setError(error)
+            toast({
+                variant: "error",
+                message: getLocalizedError({
+                    error,
+                    localization,
+                    localizeErrors
+                })
+            })
+        } finally {
+            authDataCache.setRefetching(stableCacheKey, false)
+            authDataCache.removeInFlightRequest(stableCacheKey)
+        }
+    }, [stableCacheKey, toast, localization, localizeErrors, cacheEntry])
+
+    useEffect(() => {
+        const currentUserId = sessionData?.user?.id
+
+        if (!sessionData) {
+            // Clear cache when session is lost
+            authDataCache.setRefetching(stableCacheKey, false)
+            authDataCache.clear(stableCacheKey)
+            initialized.current = false
+            previousUserId.current = undefined
+            return
+        }
+
+        // Check if user ID has changed
+        const userIdChanged =
+            previousUserId.current !== undefined &&
+            previousUserId.current !== currentUserId
+
+        // If user changed, clear cache to ensure isPending becomes true
+        if (userIdChanged) {
+            authDataCache.clear(stableCacheKey)
+        }
+
+        // If we have cached data, we're not pending anymore
+        const hasCachedData = cacheEntry?.data !== undefined
+
+        // Check if data is stale
+        const isStale =
+            !cacheEntry || Date.now() - cacheEntry.timestamp > staleTime
+
+        if (
+            !initialized.current ||
+            !hasCachedData ||
+            userIdChanged ||
+            (hasCachedData && isStale)
+        ) {
+            // Only fetch if we don't have data or if the data is stale
+            if (!hasCachedData || isStale) {
+                initialized.current = true
+                refetch()
+            }
+        }
+
+        // Update the previous user ID
+        previousUserId.current = currentUserId
+    }, [
+        sessionData,
+        sessionData?.user?.id,
+        stableCacheKey,
+        refetch,
+        cacheEntry,
+        staleTime
+    ])
+
+    // Determine if we're in a pending state
+    // We're only pending if:
+    // 1. Session is still loading, OR
+    // 2. We have no cached data and no error
+    const isPending =
+        sessionPending || (cacheEntry?.data === undefined && !error)
+
+    return {
+        data: cacheEntry?.data ?? null,
+        isPending,
+        isRefetching: cacheEntry?.isRefetching ?? false,
+        error,
+        refetch
+    }
+}

package/src/ui/hooks/use-authenticate.ts

@@ -0,0 +1,64 @@
+import { useContext, useEffect } from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import type { AuthViewPath } from "../server"
+import type { AnyAuthClient } from "../types/any-auth-client"
+
+interface AuthenticateOptions<TAuthClient extends AnyAuthClient> {
+    authClient?: TAuthClient
+    authView?: AuthViewPath
+    enabled?: boolean
+}
+
+export function useAuthenticate<TAuthClient extends AnyAuthClient>(
+    options?: AuthenticateOptions<TAuthClient>
+) {
+    type Session = TAuthClient["$Infer"]["Session"]["session"]
+    type User = TAuthClient["$Infer"]["Session"]["user"]
+
+    const { authView = "SIGN_IN", enabled = true } = options ?? {}
+
+    const {
+        hooks: { useSession },
+        basePath,
+        viewPaths,
+        replace
+    } = useContext(AuthUIContext)
+
+    const { data, isPending, error, refetch } = useSession()
+    const sessionData = data as
+        | {
+              session: Session
+              user: User
+          }
+        | null
+        | undefined
+
+    useEffect(() => {
+        if (!enabled || isPending || sessionData) return
+
+        const searchParams = new URLSearchParams(window.location.search)
+        const redirectTo =
+            searchParams.get("redirectTo") ||
+            window.location.pathname + window.location.search
+
+        replace(
+            `${basePath}/${viewPaths[authView]}?redirectTo=${encodeURIComponent(redirectTo)}`
+        )
+    }, [
+        isPending,
+        sessionData,
+        basePath,
+        viewPaths,
+        replace,
+        authView,
+        enabled
+    ])
+
+    return {
+        data: sessionData,
+        user: sessionData?.user,
+        isPending,
+        error,
+        refetch
+    }
+}

package/src/ui/hooks/use-captcha.tsx

@@ -0,0 +1,151 @@
+import type { CaptchaFoxInstance } from "@captchafox/react"
+import type HCaptcha from "@hcaptcha/react-hcaptcha"
+import type { TurnstileInstance } from "@marsidev/react-turnstile"
+import { useGoogleReCaptcha } from "@wojtekmaj/react-recaptcha-v3"
+import { type RefObject, useContext, useRef } from "react"
+import type ReCAPTCHA from "react-google-recaptcha"
+
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import type { AuthLocalization } from "../localization/auth-localization"
+
+// Default captcha endpoints
+const DEFAULT_CAPTCHA_ENDPOINTS = [
+    "/sign-up/email",
+    "/sign-in/email",
+    "/forget-password"
+]
+
+// Sanitize action name for reCAPTCHA
+// Google reCAPTCHA only allows A-Za-z/_ in action names
+const sanitizeActionName = (action: string): string => {
+    // First remove leading slash if present
+    let result = action.startsWith("/") ? action.substring(1) : action
+
+    // Convert both kebab-case and path separators to camelCase
+    // Example: "/sign-in/email" becomes "signInEmail"
+    result = result
+        .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+        .replace(/\/([a-z])/g, (_, letter) => letter.toUpperCase())
+        .replace(/\//g, "")
+        .replace(/[^A-Za-z0-9_]/g, "")
+
+    return result
+}
+
+export function useCaptcha({
+    localization
+}: {
+    localization: Partial<AuthLocalization>
+}) {
+    const { captcha, localization: contextLocalization } =
+        useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    // biome-ignore lint/suspicious/noExplicitAny: ignore
+    const captchaRef = useRef<any>(null)
+    const { executeRecaptcha } = useGoogleReCaptcha()
+
+    const executeCaptcha = async (action: string) => {
+        if (!captcha) throw new Error(localization.MISSING_RESPONSE)
+
+        // Sanitize the action name for reCAPTCHA
+        let response: string | undefined | null
+
+        switch (captcha.provider) {
+            case "google-recaptcha-v3": {
+                const sanitizedAction = sanitizeActionName(action)
+                response = await executeRecaptcha?.(sanitizedAction)
+                break
+            }
+            case "google-recaptcha-v2-checkbox": {
+                const recaptchaRef = captchaRef as RefObject<ReCAPTCHA>
+                response = recaptchaRef.current.getValue()
+                break
+            }
+            case "google-recaptcha-v2-invisible": {
+                const recaptchaRef = captchaRef as RefObject<ReCAPTCHA>
+                response = await recaptchaRef.current.executeAsync()
+                break
+            }
+            case "cloudflare-turnstile": {
+                const turnstileRef = captchaRef as RefObject<TurnstileInstance>
+                response = turnstileRef.current.getResponse()
+                break
+            }
+            case "hcaptcha": {
+                const hcaptchaRef = captchaRef as RefObject<HCaptcha>
+                response = hcaptchaRef.current.getResponse()
+                break
+            }
+            case "captchafox": {
+                const captchafoxRef =
+                    captchaRef as RefObject<CaptchaFoxInstance>
+                response = captchafoxRef.current.getResponse()
+                break
+            }
+        }
+
+        if (!response) {
+            throw new Error(localization.MISSING_RESPONSE)
+        }
+
+        return response
+    }
+
+    const getCaptchaHeaders = async (action: string) => {
+        if (!captcha) return undefined
+
+        // Use custom endpoints if provided, otherwise use defaults
+        const endpoints = captcha.endpoints || DEFAULT_CAPTCHA_ENDPOINTS
+
+        // Only execute captcha if the action is in the endpoints list
+        if (endpoints.includes(action)) {
+            return { "x-captcha-response": await executeCaptcha(action) }
+        }
+
+        return undefined
+    }
+
+    const resetCaptcha = () => {
+        if (!captcha) return
+
+        switch (captcha.provider) {
+            case "google-recaptcha-v3": {
+                // No widget to reset; token is generated per execute call
+                break
+            }
+            case "google-recaptcha-v2-checkbox":
+            case "google-recaptcha-v2-invisible": {
+                const recaptchaRef = captchaRef as RefObject<ReCAPTCHA>
+                recaptchaRef.current?.reset?.()
+                break
+            }
+            case "cloudflare-turnstile": {
+                const turnstileRef = captchaRef as RefObject<TurnstileInstance>
+                // Some versions expose reset on the instance
+                // biome-ignore lint/suspicious/noExplicitAny: defensive
+                ;(turnstileRef.current as any)?.reset?.()
+                break
+            }
+            case "hcaptcha": {
+                const hcaptchaRef = captchaRef as RefObject<HCaptcha>
+                // HCaptcha uses resetCaptcha()
+                hcaptchaRef.current?.resetCaptcha?.()
+                break
+            }
+            case "captchafox": {
+                const captchafoxRef =
+                    captchaRef as RefObject<CaptchaFoxInstance>
+                captchafoxRef.current?.reset?.()
+                break
+            }
+        }
+    }
+
+    return {
+        captchaRef,
+        getCaptchaHeaders,
+        resetCaptcha
+    }
+}

package/src/ui/hooks/use-hydrated.ts

@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from "react"
+
+function subscribe() {
+    return () => {}
+}
+
+export function useIsHydrated() {
+    return useSyncExternalStore(
+        subscribe,
+        () => true,
+        () => false
+    )
+}

package/src/ui/hooks/use-lang.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react"
+
+export function useLang() {
+    const [lang, setLang] = useState<string>()
+
+    useEffect(() => {
+        const checkLang = () => {
+            const currentLang = document.documentElement.getAttribute("lang")
+            setLang(currentLang ?? undefined)
+        }
+
+        // Initial check
+        checkLang()
+
+        // Listen for changes to lang attribute on html tag
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.attributeName === "lang") {
+                    checkLang()
+                }
+            }
+        })
+
+        observer.observe(document.documentElement, { attributes: true })
+
+        return () => {
+            observer.disconnect()
+        }
+    }, [])
+
+    return { lang }
+}