@erikey/react 0.4.26 → 0.4.28

package/src/ui/hooks/use-success-transition.ts

@@ -0,0 +1,41 @@
+import { useCallback, useContext, useState } from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import { getSearchParam } from "../lib/utils"
+
+export function useOnSuccessTransition({
+    redirectTo: redirectToProp
+}: {
+    redirectTo?: string
+}) {
+    const { redirectTo: contextRedirectTo } = useContext(AuthUIContext)
+
+    const getRedirectTo = useCallback(
+        () =>
+            redirectToProp || getSearchParam("redirectTo") || contextRedirectTo,
+        [redirectToProp, contextRedirectTo]
+    )
+
+    const [isPending, setIsPending] = useState(false)
+
+    const {
+        navigate,
+        hooks: { useSession },
+        onSessionChange
+    } = useContext(AuthUIContext)
+
+    const { refetch: refetchSession } = useSession()
+
+    const onSuccess = useCallback(async () => {
+        setIsPending(true)
+
+        await refetchSession?.()
+
+        if (onSessionChange) await onSessionChange()
+
+        setIsPending(false)
+
+        navigate(getRedirectTo())
+    }, [refetchSession, onSessionChange, navigate, getRedirectTo])
+
+    return { onSuccess, isPending }
+}

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

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react"
+
+export function useTheme() {
+    const [theme, setTheme] = useState<"light" | "dark">("light")
+
+    useEffect(() => {
+        const checkTheme = () => {
+            const isDark =
+                document.documentElement.classList.contains("dark") ||
+                document.documentElement
+                    .getAttribute("style")
+                    ?.includes("color-scheme: dark")
+            setTheme(isDark ? "dark" : "light")
+        }
+
+        // Initial check
+        checkTheme()
+
+        // Listen for changes to html tag
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (
+                    mutation.attributeName === "style" ||
+                    mutation.attributeName === "class"
+                ) {
+                    checkTheme()
+                }
+            }
+        })
+
+        observer.observe(document.documentElement, { attributes: true })
+
+        return () => {
+            observer.disconnect()
+        }
+    }, [])
+
+    return { theme }
+}

package/src/ui/index.ts

@@ -0,0 +1,46 @@
+// Auth forms (ALL connection types)
+export * from "./components/auth/auth-callback"
+export * from "./components/auth/auth-form"
+export * from "./components/auth/auth-view"
+export * from "./components/auth/forms/email-otp-form"
+export * from "./components/auth/forms/email-verification-form"
+export * from "./components/auth/forms/forgot-password-form"
+export * from "./components/auth/forms/magic-link-form"
+export * from "./components/auth/forms/recover-account-form"
+export * from "./components/auth/forms/reset-password-form"
+export * from "./components/auth/forms/sign-in-form"
+export * from "./components/auth/forms/sign-up-form"
+export * from "./components/auth/forms/two-factor-form"
+export * from "./components/auth/sign-out"
+
+// Auth buttons (Social, Magic Link, Email OTP, Passkey, Web3)
+export * from "./components/auth/provider-button"
+export * from "./components/auth/magic-link-button"
+export * from "./components/auth/email-otp-button"
+export * from "./components/auth/passkey-button"
+export * from "./components/auth/wallet-button"
+export * from "./components/auth/one-tap"
+export * from "./components/auth/otp-input-group"
+
+// Shared
+export * from "./components/auth-loading"
+export * from "./components/password-input"
+export * from "./components/provider-icons"
+export * from "./components/redirect-to-sign-in"
+export * from "./components/redirect-to-sign-up"
+export * from "./components/signed-in"
+export * from "./components/signed-out"
+export * from "./components/user-avatar"
+
+// Hooks & Provider
+export * from "./hooks/use-auth-data"
+export * from "./hooks/use-authenticate"
+export * from "./lib/auth-ui-provider"
+export { AuthUIProvider as AuthProvider } from "./lib/auth-ui-provider"
+export { AuthView as AuthCard } from "./components/auth/auth-view"
+export * from "./lib/social-providers"
+export { getViewByPath } from "./lib/utils"
+export * from "./lib/view-paths"
+export * from "./localization/auth-localization"
+export * from "./types/auth-hooks"
+export * from "./types/auth-mutators"

package/src/ui/instantdb.ts

@@ -0,0 +1 @@
+export * from "./lib/instantdb/use-instant-options"

package/src/ui/lib/auth-data-cache.ts

@@ -0,0 +1,90 @@
+type CacheEntry<T> = {
+    data: T | null
+    timestamp: number
+    isRefetching: boolean
+}
+
+class AuthDataCache {
+    private cache = new Map<string, CacheEntry<unknown>>()
+    private listeners = new Map<string, Set<() => void>>()
+    private inFlightRequests = new Map<string, Promise<unknown>>()
+
+    get<T>(key: string): CacheEntry<T> | undefined {
+        return this.cache.get(key) as CacheEntry<T> | undefined
+    }
+
+    set<T>(key: string, data: T | null) {
+        const entry: CacheEntry<T> = {
+            data,
+            timestamp: Date.now(),
+            isRefetching: false
+        }
+        this.cache.set(key, entry)
+        this.notify(key)
+    }
+
+    setRefetching(key: string, isRefetching: boolean) {
+        const entry = this.cache.get(key)
+        if (entry) {
+            entry.isRefetching = isRefetching
+            this.notify(key)
+        }
+    }
+
+    clear(key?: string) {
+        if (key) {
+            this.cache.delete(key)
+            this.inFlightRequests.delete(key)
+            this.notify(key)
+        } else {
+            this.cache.clear()
+            this.inFlightRequests.clear()
+            const keys = Array.from(this.listeners.keys())
+            for (const key of keys) {
+                this.notify(key)
+            }
+        }
+    }
+
+    getInFlightRequest<T>(key: string): Promise<T> | undefined {
+        return this.inFlightRequests.get(key) as Promise<T> | undefined
+    }
+
+    setInFlightRequest<T>(key: string, promise: Promise<T>) {
+        this.inFlightRequests.set(key, promise)
+    }
+
+    removeInFlightRequest(key: string) {
+        this.inFlightRequests.delete(key)
+    }
+
+    subscribe(key: string, callback: () => void) {
+        if (!this.listeners.has(key)) {
+            this.listeners.set(key, new Set())
+        }
+        this.listeners.get(key)!.add(callback)
+
+        return () => {
+            const callbacks = this.listeners.get(key)
+            if (callbacks) {
+                callbacks.delete(callback)
+                if (callbacks.size === 0) {
+                    this.listeners.delete(key)
+                }
+            }
+        }
+    }
+
+    private notify(key: string) {
+        const callbacks = this.listeners.get(key)
+        if (callbacks) {
+            const callbackArray = Array.from(callbacks)
+            for (const callback of callbackArray) {
+                callback()
+            }
+        }
+    }
+}
+
+// Global singleton instance
+export const authDataCache = new AuthDataCache()