refactor(react): Update react tests + exports

examples/react/src/App.jsx → examples/react/src/App.tsx

@@ -15,7 +15,7 @@
  */
 
 import { NavLink } from "react-router";
-import { useUser } from "../lib/firebase/hooks";
+import { useUser } from "./firebase/hooks";
 
 function App() {
   const user = useUser();

examples/react/lib/components/header.tsx → examples/react/src/components/header.tsx

@@ -19,7 +19,7 @@
 import { NavLink } from "react-router";
 import { useUser } from "../firebase/hooks";
 import { signOut, type User } from "firebase/auth";
-import { auth } from "../firebase/clientApp";
+import { auth } from "../firebase/firebase";
 
 export function Header() {
   const user = useUser();

examples/react/lib/firebase/hooks.ts → examples/react/src/firebase/hooks.ts

@@ -19,7 +19,7 @@ import { useState } from "react";
 import { onAuthStateChanged } from "firebase/auth";
 import { User } from "firebase/auth";
 import { useEffect } from "react";
-import { auth } from "./clientApp";
+import { auth } from "./firebase";
 
 export function useUser(initalUser?: User | null) {
   const [user, setUser] = useState<User | null>(initalUser ?? null);

examples/react/src/index.css

@@ -15,7 +15,7 @@
  */
 
 @import "tailwindcss";
-@import "@firebase-ui/styles/src/base.css";
+@import "@firebase-ui/styles/tailwind";
 
 /* @import "@firebase-ui/styles/src/themes/dark.css"; */
 /* @import "@firebase-ui/styles/src/themes/brutalist.css"; */

examples/react/src/main.jsx → examples/react/src/main.tsx

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import { BrowserRouter, RouterProvider, Routes, Route } from "react-router";
+import { BrowserRouter, Routes, Route } from "react-router";
 
-import React from "react";
 import ReactDOM from "react-dom/client";
+import { FirebaseUIProvider } from "@firebase-ui/react";
+
+import { ui } from "./firebase/firebase";
 
 import App from "./App";
-import { Header } from "../lib/components/header";
-import { FirebaseUIProvider } from "../lib/firebase/ui";
+import { Header } from "./components/header";
 
 /** Sign In */
 import SignInAuthScreenPage from "./screens/sign-in-auth-screen";
@@ -44,14 +45,20 @@ import SignUpAuthScreenWithOAuthPage from "./screens/sign-up-auth-screen";
 import OAuthScreenPage from "./screens/oauth-screen";
 
 /** Password Reset */
-import PasswordResetScreenPage from "./screens/password-reset-screen";
+import ForgotPasswordPage from "./screens/forgot-password-screen";
 
-const root = document.getElementById("root");
+const root = document.getElementById("root")!;
 
 ReactDOM.createRoot(root).render(
   <BrowserRouter>
     <Header />
-    <FirebaseUIProvider>
+    <FirebaseUIProvider
+      ui={ui}
+      policies={{
+        termsOfServiceUrl: "https://www.google.com",
+        privacyPolicyUrl: "https://www.google.com",
+      }}
+    >
       <Routes>
         <Route path="/" element={<App />} />
         <Route path="/screens/sign-in-auth-screen" element={<SignInAuthScreenPage />} />
@@ -64,7 +71,7 @@ ReactDOM.createRoot(root).render(
         <Route path="/screens/sign-up-auth-screen" element={<SignUpAuthScreenPage />} />
         <Route path="/screens/sign-up-auth-screen-w-oauth" element={<SignUpAuthScreenWithOAuthPage />} />
         <Route path="/screens/oauth-screen" element={<OAuthScreenPage />} />
-        <Route path="/screens/password-reset-screen" element={<PasswordResetScreenPage />} />
+        <Route path="/screens/forgot-password-screen" element={<ForgotPasswordPage />} />
       </Routes>
     </FirebaseUIProvider>
   </BrowserRouter>

examples/react/src/screens/password-reset-screen.tsx → examples/react/src/screens/forgot-password-screen.tsx

@@ -16,8 +16,8 @@
 
 "use client";
 
-import { PasswordResetScreen } from "@firebase-ui/react";
+import { ForgotPasswordAuthScreen } from "@firebase-ui/react";
 
-export default function PasswordResetScreenPage() {
-  return <PasswordResetScreen onBackToSignInClick={() => {}} />;
+export default function ForgotPasswordPage() {
+  return <ForgotPasswordAuthScreen onBackToSignInClick={() => {}} />;
 }

packages/react/tsconfig.app.json → examples/react/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
@@ -15,6 +14,8 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    "types": ["vite/client"],
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
@@ -24,9 +25,7 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"],
-      "@firebase-ui/core": ["../core/src/index.ts"],
-      "@firebase-ui/styles": ["../styles/src/index.ts"]
     }
   },
-  "include": ["src"]
+  "include": ["src", "vite.config.ts"]
 }

examples/react/vite.config.js → examples/react/vite.config.ts

@@ -17,7 +17,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 
 export default defineConfig({
   plugins: [tailwindcss(), react()],
+  resolve: {
+    alias: {
+      "~": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./src"),
+    },
+  },
 });

packages/core/src/config.ts

@@ -28,7 +28,7 @@ import {
 } from "./behaviors";
 import { FirebaseUIState } from "./state";
 
-type FirebaseUIConfigurationOptions = {
+export type FirebaseUIConfigurationOptions = {
   app: FirebaseApp;
   auth?: Auth;
   locale?: RegisteredLocale;

packages/react/package.json

@@ -34,16 +34,16 @@
     "release": "pnpm run build && pnpm pack --pack-destination --pack-destination ../../releases/"
   },
   "peerDependencies": {
-    "@firebase-ui/core": "workspace:*",
     "firebase": "catalog:peerDependencies",
     "react": "catalog:peerDependencies",
     "react-dom": "catalog:peerDependencies"
   },
   "dependencies": {
+    "@firebase-ui/core": "workspace:*",
     "@firebase-ui/styles": "workspace:*",
     "@nanostores/react": "^1.0.0",
     "@radix-ui/react-slot": "^1.2.3",
-    "@tanstack/react-form": "^0.41.3",
+    "@tanstack/react-form": "^1.20.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.0.1",
     "zod": "catalog:"

packages/react/setup-test.ts

@@ -14,8 +14,4 @@
  * limitations under the License.
  */
 
-import { expect } from "vitest";
-import * as matchers from "@testing-library/jest-dom/matchers";
-
-// Extend Vitest's expect with jest-dom matchers
-expect.extend(matchers);
+import '@testing-library/jest-dom/vitest';