@react-spa-scaffold/mcp 2.2.0 → 2.3.0

package/templates/src/pages/Profile.tsx

@@ -0,0 +1,171 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useState } from 'react';
+
+import { SEO } from '@/components/shared';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useProfile, useSyncedState, useUpdateProfile } from '@/hooks';
+
+/**
+ * Profile page demonstrating Supabase database integration.
+ * Shows current user's profile with ability to edit the name.
+ */
+export function ProfilePage() {
+  const { t } = useLingui();
+  const { profile, isLoading, error, refetch } = useProfile();
+  const updateProfile = useUpdateProfile();
+
+  const [isEditing, setIsEditing] = useState(false);
+  // Sync name with profile, blocking sync while editing
+  const [name, setName] = useSyncedState(profile?.full_name ?? '', isEditing);
+
+  // Extract error messages for i18n (avoids object property access in Trans)
+  const fetchErrorMessage = error?.message;
+  const updateErrorMessage = updateProfile.error?.message;
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    setName(profile?.full_name ?? '');
+    setIsEditing(false);
+  };
+
+  const handleSave = () => {
+    updateProfile.mutate(
+      { full_name: name },
+      {
+        onSuccess: () => {
+          setIsEditing(false);
+        },
+      },
+    );
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    handleSave();
+  };
+
+  return (
+    <div className="container mx-auto max-w-lg px-4 py-8">
+      <SEO
+        title={t({ message: 'Profile', comment: 'Profile page title for SEO' })}
+        description={t({
+          message: 'Manage your profile information',
+          comment: 'Profile page meta description for SEO',
+        })}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Trans comment="Profile page card title">Your Profile</Trans>
+          </CardTitle>
+          <CardDescription>
+            <Trans comment="Profile page card description">Manage your profile information stored in Supabase</Trans>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isLoading && (
+            <div className="space-y-4">
+              <div className="flex items-center gap-4">
+                <Skeleton className="size-16 rounded-full" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-4 w-48" />
+                </div>
+              </div>
+              <Skeleton className="h-10 w-full" />
+            </div>
+          )}
+
+          {error && (
+            <div className="space-y-4">
+              <p className="text-destructive text-sm" role="alert">
+                <Trans comment="Error message when profile fails to load">
+                  Failed to load profile: {fetchErrorMessage}
+                </Trans>
+              </p>
+              <Button variant="outline" onClick={() => refetch()}>
+                <Trans comment="Retry button label">Try Again</Trans>
+              </Button>
+            </div>
+          )}
+
+          {profile && (
+            <div className="space-y-6">
+              {/* Avatar and Email */}
+              <div className="flex items-center gap-4">
+                {profile.avatar_url ? (
+                  <img
+                    src={profile.avatar_url}
+                    alt={t({ message: 'Profile avatar', comment: 'Alt text for profile avatar image' })}
+                    className="size-16 rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="bg-muted flex size-16 items-center justify-center rounded-full">
+                    <span className="text-muted-foreground text-xl">
+                      {profile.full_name?.[0]?.toUpperCase() ?? profile.email[0].toUpperCase()}
+                    </span>
+                  </div>
+                )}
+                <div>
+                  <p className="font-medium">{profile.full_name ?? profile.email}</p>
+                  <p className="text-muted-foreground text-sm">{profile.email}</p>
+                </div>
+              </div>
+
+              {/* Name Editor */}
+              <div className="space-y-2">
+                <Label htmlFor="full-name">
+                  <Trans comment="Full name field label">Full Name</Trans>
+                </Label>
+                {isEditing ? (
+                  <form onSubmit={handleSubmit} className="space-y-2">
+                    <Input
+                      id="full-name"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder={t({ message: 'Enter your name', comment: 'Name input placeholder' })}
+                    />
+                    <div className="flex gap-2">
+                      <Button type="submit" disabled={updateProfile.isPending}>
+                        {updateProfile.isPending ? (
+                          <Trans comment="Save button loading state">Saving...</Trans>
+                        ) : (
+                          <Trans comment="Save button label">Save</Trans>
+                        )}
+                      </Button>
+                      <Button type="button" variant="outline" onClick={handleCancel} disabled={updateProfile.isPending}>
+                        <Trans comment="Cancel button label">Cancel</Trans>
+                      </Button>
+                    </div>
+                    {updateProfile.error && (
+                      <p className="text-destructive text-sm" role="alert">
+                        <Trans comment="Error message when update fails">Failed to update: {updateErrorMessage}</Trans>
+                      </p>
+                    )}
+                  </form>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <p className="text-muted-foreground">
+                      {profile.full_name || <Trans comment="Placeholder when no name is set">Not set</Trans>}
+                    </p>
+                    <Button variant="ghost" size="sm" onClick={handleEdit}>
+                      <Trans comment="Edit button label">Edit</Trans>
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/src/pages/index.ts

@@ -1,2 +1,3 @@
 export { HomePage } from './Home';
 export { NotFoundPage } from './NotFound';
+export { ProfilePage } from './Profile';

package/templates/src/stores/preferencesStore.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 
 import { createSelectors } from '@/lib/createSelectors';
+import { env } from '@/lib/env';
 import { STORAGE_KEYS } from '@/lib/storageKeys';
 
 export type Theme = 'light' | 'dark' | 'system';
@@ -75,7 +76,7 @@ const usePreferencesStoreBase = create<PreferencesState>()(
         },
       },
     ),
-    { name: 'preferences', enabled: process.env.NODE_ENV === 'development' },
+    { name: 'preferences', enabled: env.DEV },
   ),
 );
 

package/templates/src/test/clerkMock.tsx

@@ -1,39 +1,67 @@
+/**
+ * Clerk authentication mocks for testing.
+ *
+ * Provides mock implementations of Clerk components and hooks,
+ * with state controls for testing different auth scenarios.
+ */
+
 import type { ReactNode } from 'react';
 
+import { MOCK_AUTH_TOKEN, MOCK_SESSION_ID } from '@/mocks/constants';
+import { defaultUser, type MockUser } from '@/mocks/fixtures/users';
+
+// Re-export user fixtures for test convenience
+export { createUser, createUsers, defaultUser, mockUsers, type MockUser } from '@/mocks/fixtures/users';
+
 // =============================================================================
-// Mock State
+// Types
 // =============================================================================
 
 interface ClerkMockState {
   isSignedIn: boolean;
   isLoaded: boolean;
+  user: MockUser;
 }
 
+// =============================================================================
+// Default State
+// =============================================================================
+
 const defaultState: ClerkMockState = {
   isSignedIn: true,
   isLoaded: true,
+  user: defaultUser,
 };
 
 let mockState: ClerkMockState = { ...defaultState };
 
 // =============================================================================
-// Test Utilities
+// State Controls
 // =============================================================================
 
-export function setMockSignedIn(value: boolean) {
+/** Set whether the user is signed in */
+export function setMockClerkSignedIn(value: boolean) {
   mockState.isSignedIn = value;
 }
 
-export function setMockLoaded(value: boolean) {
+/** Set whether Clerk has finished loading */
+export function setMockClerkLoaded(value: boolean) {
   mockState.isLoaded = value;
 }
 
+/** Set multiple Clerk state values at once */
 export function setMockClerkState(state: Partial<ClerkMockState>) {
   mockState = { ...mockState, ...state };
 }
 
+/** Set mock user properties */
+export function setMockClerkUser(user: Partial<MockUser>) {
+  mockState.user = { ...mockState.user, ...user };
+}
+
+/** Reset all Clerk mocks to default state */
 export function resetClerkMocks() {
-  mockState = { ...defaultState };
+  mockState = { ...defaultState, user: { ...defaultUser } };
 }
 
 // =============================================================================
@@ -83,15 +111,27 @@ export function useAuth() {
   return {
     isLoaded: mockState.isLoaded,
     isSignedIn: mockState.isSignedIn,
-    userId: mockState.isSignedIn ? 'user_123' : null,
-    sessionId: mockState.isSignedIn ? 'sess_123' : null,
-    getToken: async () => (mockState.isSignedIn ? 'mock-token' : null),
+    userId: mockState.isSignedIn ? mockState.user.id : null,
+    sessionId: mockState.isSignedIn ? MOCK_SESSION_ID : null,
+    getToken: async () => (mockState.isSignedIn ? MOCK_AUTH_TOKEN : null),
   };
 }
 
 export function useUser() {
   return {
     isLoaded: mockState.isLoaded,
-    user: mockState.isSignedIn ? { id: 'user_123', firstName: 'Test', lastName: 'User' } : null,
+    user: mockState.isSignedIn ? mockState.user : null,
+  };
+}
+
+export function useSession() {
+  return {
+    isLoaded: mockState.isLoaded,
+    session: mockState.isSignedIn
+      ? {
+          id: MOCK_SESSION_ID,
+          getToken: async () => MOCK_AUTH_TOKEN,
+        }
+      : null,
   };
 }

package/templates/src/test/fetchMock.ts

@@ -0,0 +1,58 @@
+import { vi } from 'vitest';
+
+/**
+ * Mock a successful fetch response with JSON data.
+ *
+ * @remarks Requires `vi.spyOn(global, 'fetch')` in beforeEach
+ */
+export function mockFetchSuccess<T>(data: T, status = 200): void {
+  vi.mocked(global.fetch).mockResolvedValueOnce({
+    ok: status >= 200 && status < 300,
+    status,
+    json: () => Promise.resolve(data),
+  } as Response);
+}
+
+/**
+ * Mock a 204 No Content response.
+ *
+ * @remarks Requires `vi.spyOn(global, 'fetch')` in beforeEach
+ */
+export function mockFetchNoContent(): void {
+  vi.mocked(global.fetch).mockResolvedValueOnce({
+    ok: true,
+    status: 204,
+  } as Response);
+}
+
+/**
+ * Mock an error response (4xx/5xx).
+ *
+ * @remarks Requires `vi.spyOn(global, 'fetch')` in beforeEach
+ */
+export function mockFetchError(status: number, message: string, hasJson = true): void {
+  vi.mocked(global.fetch).mockResolvedValueOnce({
+    ok: false,
+    status,
+    statusText: message,
+    json: hasJson ? () => Promise.resolve({ message }) : () => Promise.reject(new Error('No JSON')),
+  } as Response);
+}
+
+/**
+ * Mock a network error (fetch rejection).
+ *
+ * @remarks Requires `vi.spyOn(global, 'fetch')` in beforeEach
+ */
+export function mockFetchNetworkError(message = 'Network failure'): void {
+  vi.mocked(global.fetch).mockRejectedValueOnce(new Error(message));
+}
+
+/**
+ * Mock an unknown error (non-Error rejection).
+ *
+ * @remarks Requires `vi.spyOn(global, 'fetch')` in beforeEach
+ */
+export function mockFetchUnknownError(rejection: unknown = 'string error'): void {
+  vi.mocked(global.fetch).mockRejectedValueOnce(rejection);
+}

package/templates/src/test/index.ts

@@ -1,11 +1,57 @@
 // Custom render with all providers
 export { createTestQueryClient, render } from './providers';
 
-// Mock utilities
-export { mockMatchMedia } from './mocks';
+// Browser API mocks
+export {
+  mockAnimationFrame,
+  mockMatchMedia,
+  mockScrollTo,
+  mockStorageRemoveItemError,
+  mockStorageSetItemError,
+  silenceConsoleError,
+  silenceConsoleLog,
+  silenceConsoleWarn,
+} from './mocks';
 
 // Clerk test utilities
-export { resetClerkMocks, setMockClerkState, setMockLoaded, setMockSignedIn } from './clerkMock';
+export {
+  createUser,
+  createUsers,
+  mockUsers,
+  resetClerkMocks,
+  setMockClerkLoaded,
+  setMockClerkSignedIn,
+  setMockClerkState,
+  setMockClerkUser,
+  type MockUser,
+} from './clerkMock';
+
+// Supabase test utilities
+export {
+  createMockSupabaseClient,
+  createProfile,
+  createProfiles,
+  mockProfiles,
+  resetSupabaseMocks,
+  setMockSupabaseData,
+  setMockSupabaseError,
+  type Profile,
+} from './supabaseMock';
+
+// Fetch mock utilities
+export {
+  mockFetchError,
+  mockFetchNetworkError,
+  mockFetchNoContent,
+  mockFetchSuccess,
+  mockFetchUnknownError,
+} from './fetchMock';
 
 // MSW server instance
 export { server } from '@/mocks/node';
+
+// Todo fixtures
+export { createTodo, createTodos, mockTodos, type Todo } from '@/mocks/fixtures/todos';
+
+// Shared test constants
+export { MOCK_AUTH_TOKEN, MOCK_SESSION_ID, MOCK_SUPABASE_URL, MOCK_TIMESTAMPS, MOCK_USER } from '@/mocks/constants';

package/templates/src/test/mocks.ts

@@ -1,8 +1,25 @@
+/**
+ * Browser API mocks for testing.
+ *
+ * Provides reusable mock implementations for browser APIs
+ * that are commonly needed across tests.
+ */
+
 import { vi } from 'vitest';
 
+// =============================================================================
+// Media Query Mocks
+// =============================================================================
+
 /**
  * Creates a mock for window.matchMedia.
- * Usage: window.matchMedia = mockMatchMedia(true) // matches
+ *
+ * @example
+ * ```ts
+ * beforeEach(() => {
+ *   window.matchMedia = mockMatchMedia(true); // matches query
+ * });
+ * ```
  */
 export const mockMatchMedia = (matches: boolean) =>
   vi.fn().mockImplementation((query: string) => ({
@@ -15,3 +32,113 @@ export const mockMatchMedia = (matches: boolean) =>
     removeListener: vi.fn(),
     dispatchEvent: vi.fn(),
   }));
+
+// =============================================================================
+// Console Mocks
+// =============================================================================
+
+/**
+ * Silence console.error during a test.
+ * Returns a spy that can be restored with `.mockRestore()`.
+ *
+ * @example
+ * ```ts
+ * it('handles error gracefully', () => {
+ *   const spy = silenceConsoleError();
+ *   // ... test that triggers console.error
+ *   spy.mockRestore();
+ * });
+ * ```
+ */
+export function silenceConsoleError() {
+  return vi.spyOn(console, 'error').mockImplementation(() => {});
+}
+
+/**
+ * Silence console.warn during a test.
+ */
+export function silenceConsoleWarn() {
+  return vi.spyOn(console, 'warn').mockImplementation(() => {});
+}
+
+/**
+ * Silence console.log during a test.
+ */
+export function silenceConsoleLog() {
+  return vi.spyOn(console, 'log').mockImplementation(() => {});
+}
+
+// =============================================================================
+// Animation Frame Mocks
+// =============================================================================
+
+/**
+ * Creates mocks for requestAnimationFrame and cancelAnimationFrame.
+ * Returns the callback capture for manual triggering.
+ *
+ * @example
+ * ```ts
+ * let rafCallback: FrameRequestCallback | null = null;
+ * beforeEach(() => {
+ *   rafCallback = mockAnimationFrame();
+ * });
+ *
+ * it('updates on animation frame', () => {
+ *   // trigger state change
+ *   act(() => rafCallback?.(0));
+ *   // assert new state
+ * });
+ * ```
+ */
+export function mockAnimationFrame() {
+  let callback: FrameRequestCallback | null = null;
+
+  vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+    callback = cb;
+    return 1;
+  });
+  vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+
+  return () => callback;
+}
+
+// =============================================================================
+// Scroll Mocks
+// =============================================================================
+
+/**
+ * Mock window.scrollTo for tests.
+ * Returns a spy for assertions.
+ *
+ * @example
+ * ```ts
+ * const scrollSpy = mockScrollTo();
+ * // trigger scroll
+ * expect(scrollSpy).toHaveBeenCalledWith(0, 0);
+ * ```
+ */
+export function mockScrollTo() {
+  return vi.spyOn(window, 'scrollTo').mockImplementation(() => {});
+}
+
+// =============================================================================
+// Storage Mocks
+// =============================================================================
+
+/**
+ * Mock localStorage.setItem to throw (simulate quota exceeded).
+ */
+export function mockStorageSetItemError() {
+  return vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+    throw new Error('QuotaExceeded');
+  });
+}
+
+/**
+ * Mock localStorage.removeItem to throw.
+ */
+export function mockStorageRemoveItemError() {
+  return vi.spyOn(Storage.prototype, 'removeItem').mockImplementation(() => {
+    throw new Error('Storage error');
+  });
+}

package/templates/src/test/providers.tsx

@@ -8,6 +8,7 @@ import { MemoryRouter } from 'react-router';
 import { ClerkThemeProvider } from '@/contexts/clerkContext';
 import { MobileProvider } from '@/contexts/mobileContext';
 import { PerformanceProviderWrapper } from '@/contexts/performanceContext';
+import { SupabaseProvider } from '@/contexts/supabaseContext';
 
 // Setup empty English catalog for tests
 i18n.loadAndActivate({ locale: 'en', messages: {} });
@@ -38,15 +39,17 @@ interface WrapperProps {
 function AllProviders({ children }: WrapperProps) {
   const queryClient = createTestQueryClient();
 
-  // Provider order matches main.tsx: Query > I18n > Router > Clerk > Mobile > Performance
+  // Provider order matches main.tsx: Query > I18n > Router > Clerk > Supabase > Mobile > Performance
   return (
     <QueryClientProvider client={queryClient}>
       <I18nProvider i18n={i18n}>
         <MemoryRouter>
           <ClerkThemeProvider publishableKey="test_key">
-            <MobileProvider>
-              <PerformanceProviderWrapper>{children}</PerformanceProviderWrapper>
-            </MobileProvider>
+            <SupabaseProvider>
+              <MobileProvider>
+                <PerformanceProviderWrapper>{children}</PerformanceProviderWrapper>
+              </MobileProvider>
+            </SupabaseProvider>
           </ClerkThemeProvider>
         </MemoryRouter>
       </I18nProvider>