@react-spa-scaffold/mcp 0.4.1 → 1.1.1

package/templates/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/templates/src/hooks/index.ts

@@ -3,5 +3,5 @@ export { useThemeEffect } from './useThemeEffect';
 export { useTouchSizes } from './useTouchSizes';
 export { useLanguage } from './useLanguage';
 export { useExampleQuery } from './useExampleQuery';
-export { useContactForm } from './useContactForm';
+export { useRegisterForm } from './useRegisterForm';
 export { useMobileContext } from '@/contexts/mobileContext';

package/templates/src/hooks/useRegisterForm.ts

@@ -0,0 +1,36 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+
+import { type RegisterFormData, registerFormSchema } from '@/lib/validations';
+
+/**
+ * React Hook Form + Zod hook for registration.
+ * Demonstrates cross-field validation (password confirmation).
+ */
+export function useRegisterForm() {
+  const form = useForm<RegisterFormData>({
+    resolver: zodResolver(registerFormSchema),
+    defaultValues: {
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+    },
+  });
+
+  const onSubmit = async (data: RegisterFormData) => {
+    // Simulate API call delay
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    // Replace with your actual registration logic
+    // eslint-disable-next-line no-console
+    console.log('Registration submitted:', data);
+  };
+
+  return {
+    form,
+    onSubmit: form.handleSubmit(onSubmit),
+    isSubmitting: form.formState.isSubmitting,
+    errors: form.formState.errors,
+    reset: form.reset,
+  };
+}

package/templates/src/lib/index.ts

@@ -4,7 +4,6 @@
  */
 
 export { cn } from './utils';
-export { TIMING, UI } from './constants';
 export { STORAGE_KEYS, isAppKey } from './storageKeys';
 export { APP_CONFIG, SENTRY_CONFIG } from './config';
 export { API_CONFIG } from './api';
@@ -12,13 +11,4 @@ export { ROUTES, type AppRoute } from './routes';
 export { env, validateEnv, type Env } from './env';
 export { api, ApiClientError } from './api';
 export { getStorageItem, setStorageItem, removeStorageItem, clearAppStorage } from './storage';
-export {
-  formatDate,
-  formatDateTime,
-  formatRelativeTime,
-  formatNumber,
-  formatCurrency,
-  formatPercent,
-  formatBytes,
-} from './format';
-export { contactFormSchema, registerFormSchema, type ContactFormData, type RegisterFormData } from './validations';
+export { registerFormSchema, type RegisterFormData } from './validations';

package/templates/src/lib/validations.ts

@@ -1,19 +1,12 @@
 import { z } from 'zod';
 
 /**
- * Example validation schema for a contact form.
- * Extend or replace with your own schemas.
- */
-export const contactFormSchema = z.object({
-  name: z.string().min(2, 'Name must be at least 2 characters'),
-  email: z.string().email('Please enter a valid email address'),
-  message: z.string().min(10, 'Message must be at least 10 characters'),
-});
-
-export type ContactFormData = z.infer<typeof contactFormSchema>;
-
-/**
- * Example validation schema for user registration.
+ * Registration form validation schema.
+ * Demonstrates Zod validation patterns:
+ * - Basic validations: min, max, email, regex
+ * - Cross-field validation with refine() (password confirmation)
+ * - Custom error messages
+ * - Type inference with z.infer<>
  */
 export const registerFormSchema = z
   .object({

package/templates/src/pages/Home.tsx

@@ -1,12 +1,13 @@
 import { Trans, useLingui } from '@lingui/react/macro';
 
-import { SEO } from '@/components/shared';
+import { RegisterForm, SEO } from '@/components/shared';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 
 export function HomePage() {
   const { t } = useLingui();
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="container mx-auto max-w-lg px-4 py-8">
       <SEO
         title={t({ message: 'Home', comment: 'Home page title for SEO' })}
         description={t({
@@ -14,14 +15,32 @@ export function HomePage() {
           comment: 'Home page meta description for SEO',
         })}
       />
-      <h1 className="text-3xl font-bold">
-        <Trans comment="Main heading on the home page">Welcome to My App</Trans>
-      </h1>
-      <p className="text-muted-foreground mt-2">
-        <Trans comment="Instructions for developers on how to start customizing the app">
-          Get started by editing <code className="bg-muted rounded px-1">src/App.tsx</code>
-        </Trans>
-      </p>
+
+      <div className="mb-8 text-center">
+        <h1 className="text-3xl font-bold">
+          <Trans comment="Main heading on the home page">Welcome to My App</Trans>
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          <Trans comment="Instructions for developers on how to start customizing the app">
+            Get started by editing <code className="bg-muted rounded px-1">src/App.tsx</code>
+          </Trans>
+        </p>
+      </div>
+
+      {/* Form validation demo */}
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Trans comment="Register form card title">Registration Form</Trans>
+          </CardTitle>
+          <CardDescription>
+            <Trans comment="Register form card description">React Hook Form + Zod validation demo</Trans>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RegisterForm />
+        </CardContent>
+      </Card>
     </div>
   );
 }

package/templates/tests/unit/components/RegisterForm.test.tsx

@@ -0,0 +1,105 @@
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { RegisterForm } from '@/components/shared/RegisterForm';
+import { render } from '@/test';
+
+describe('RegisterForm', () => {
+  it('renders all form fields', () => {
+    render(<RegisterForm />);
+
+    expect(screen.getByLabelText(/username/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^password$/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /create account/i })).toBeInTheDocument();
+  });
+
+  it('shows validation errors for empty fields on submit', async () => {
+    const user = userEvent.setup();
+    render(<RegisterForm />);
+
+    await user.click(screen.getByRole('button', { name: /create account/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/username must be at least 3 characters/i)).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/please enter a valid email address/i)).toBeInTheDocument();
+    expect(screen.getByText(/password must be at least 8 characters/i)).toBeInTheDocument();
+  });
+
+  it('shows password mismatch error when passwords differ', async () => {
+    const user = userEvent.setup();
+    render(<RegisterForm />);
+
+    await user.type(screen.getByLabelText(/username/i), 'testuser');
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+    await user.type(screen.getByLabelText(/^password$/i), 'Password1');
+    await user.type(screen.getByLabelText(/confirm password/i), 'Password2');
+    await user.click(screen.getByRole('button', { name: /create account/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/passwords don't match/i)).toBeInTheDocument();
+    });
+  });
+
+  it('submits form with valid data', async () => {
+    const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    const user = userEvent.setup();
+    render(<RegisterForm />);
+
+    await user.type(screen.getByLabelText(/username/i), 'testuser');
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+    await user.type(screen.getByLabelText(/^password$/i), 'Password1');
+    await user.type(screen.getByLabelText(/confirm password/i), 'Password1');
+    await user.click(screen.getByRole('button', { name: /create account/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /creating account/i })).toBeInTheDocument();
+    });
+
+    await waitFor(
+      () => {
+        expect(consoleSpy).toHaveBeenCalledWith('Registration submitted:', {
+          username: 'testuser',
+          email: 'test@example.com',
+          password: 'Password1',
+          confirmPassword: 'Password1',
+        });
+      },
+      { timeout: 2000 },
+    );
+
+    consoleSpy.mockRestore();
+  });
+
+  it('disables submit button while submitting', async () => {
+    const user = userEvent.setup();
+    render(<RegisterForm />);
+
+    await user.type(screen.getByLabelText(/username/i), 'testuser');
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+    await user.type(screen.getByLabelText(/^password$/i), 'Password1');
+    await user.type(screen.getByLabelText(/confirm password/i), 'Password1');
+    await user.click(screen.getByRole('button', { name: /create account/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /creating account/i })).toBeDisabled();
+    });
+  });
+
+  it('sets aria-invalid on fields with errors', async () => {
+    const user = userEvent.setup();
+    render(<RegisterForm />);
+
+    await user.click(screen.getByRole('button', { name: /create account/i }));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/username/i)).toHaveAttribute('aria-invalid', 'true');
+      expect(screen.getByLabelText(/email/i)).toHaveAttribute('aria-invalid', 'true');
+      expect(screen.getByLabelText(/^password$/i)).toHaveAttribute('aria-invalid', 'true');
+    });
+  });
+});

package/templates/tests/unit/hooks/useRegisterForm.test.tsx

@@ -0,0 +1,153 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useRegisterForm } from '@/hooks/useRegisterForm';
+
+describe('useRegisterForm', () => {
+  it('returns form object with expected properties', () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    expect(result.current.form).toBeDefined();
+    expect(result.current.onSubmit).toBeDefined();
+    expect(result.current.isSubmitting).toBe(false);
+    expect(result.current.errors).toBeDefined();
+    expect(result.current.reset).toBeDefined();
+  });
+
+  it('initializes with empty default values', () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    expect(result.current.form.getValues()).toEqual({
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+    });
+  });
+
+  it('validates username minimum length', async () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('username', 'ab');
+      await result.current.form.trigger('username');
+    });
+
+    expect(result.current.errors.username?.message).toBe('Username must be at least 3 characters');
+  });
+
+  it('validates username maximum length', async () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('username', 'a'.repeat(21));
+      await result.current.form.trigger('username');
+    });
+
+    expect(result.current.errors.username?.message).toBe('Username must be at most 20 characters');
+  });
+
+  it('validates username format (alphanumeric and underscore only)', async () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('username', 'user@name');
+      await result.current.form.trigger('username');
+    });
+
+    expect(result.current.errors.username?.message).toBe('Username can only contain letters, numbers, and underscores');
+  });
+
+  it('validates email format', async () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('email', 'invalid-email');
+      await result.current.form.trigger('email');
+    });
+
+    expect(result.current.errors.email?.message).toBe('Please enter a valid email address');
+  });
+
+  it('validates password requires uppercase letter', async () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('password', 'lowercase1');
+      await result.current.form.trigger('password');
+    });
+
+    expect(result.current.errors.password?.message).toBe('Password must contain at least one uppercase letter');
+  });
+
+  it('validates password requires lowercase letter', async () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('password', 'UPPERCASE1');
+      await result.current.form.trigger('password');
+    });
+
+    expect(result.current.errors.password?.message).toBe('Password must contain at least one lowercase letter');
+  });
+
+  it('validates password requires number', async () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('password', 'NoNumbers');
+      await result.current.form.trigger('password');
+    });
+
+    expect(result.current.errors.password?.message).toBe('Password must contain at least one number');
+  });
+
+  it('calls onSubmit with valid data', async () => {
+    const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('username', 'validuser');
+      result.current.form.setValue('email', 'test@example.com');
+      result.current.form.setValue('password', 'Password1');
+      result.current.form.setValue('confirmPassword', 'Password1');
+    });
+
+    await act(async () => {
+      await result.current.onSubmit();
+    });
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith('Registration submitted:', {
+        username: 'validuser',
+        email: 'test@example.com',
+        password: 'Password1',
+        confirmPassword: 'Password1',
+      });
+    });
+
+    consoleSpy.mockRestore();
+  });
+
+  it('resets form to default values', async () => {
+    const { result } = renderHook(() => useRegisterForm());
+
+    await act(async () => {
+      result.current.form.setValue('username', 'testuser');
+      result.current.form.setValue('email', 'test@example.com');
+    });
+
+    expect(result.current.form.getValues().username).toBe('testuser');
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.form.getValues()).toEqual({
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+    });
+  });
+});

package/templates/tests/unit/lib/validations.test.ts

@@ -1,32 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { contactFormSchema, registerFormSchema } from '@/lib/validations';
-
-describe('contactFormSchema', () => {
-  const validContact = {
-    name: 'John Doe',
-    email: 'john@example.com',
-    message: 'This is a valid message that is long enough.',
-  };
-
-  it('accepts valid data', () => {
-    expect(contactFormSchema.safeParse(validContact).success).toBe(true);
-  });
-
-  it.each([
-    { field: 'name', value: 'J', errorContains: 'at least 2 characters' },
-    { field: 'email', value: 'not-an-email', errorContains: 'valid email' },
-    { field: 'message', value: 'Short', errorContains: 'at least 10 characters' },
-  ])('rejects invalid $field', ({ field, value, errorContains }) => {
-    const data = { ...validContact, [field]: value };
-    const result = contactFormSchema.safeParse(data);
-
-    expect(result.success).toBe(false);
-    if (!result.success) {
-      expect(result.error.issues[0].message).toContain(errorContains);
-    }
-  });
-});
+import { registerFormSchema } from '@/lib/validations';
 
 describe('registerFormSchema', () => {
   const validRegister = {
@@ -41,16 +15,31 @@ describe('registerFormSchema', () => {
   });
 
   it.each([
+    { field: 'username', value: 'ab', errorContains: 'at least 3 characters' },
     { field: 'username', value: 'john@doe', errorContains: 'letters, numbers, and underscores' },
-    { field: 'password', value: 'weakpass', errorContains: null },
-    { fields: { confirmPassword: 'DifferentPass123' }, errorContains: "don't match" },
-  ])('rejects invalid input', ({ field, fields, value, errorContains }) => {
-    const data = field ? { ...validRegister, [field]: value } : { ...validRegister, ...fields };
+    { field: 'email', value: 'not-an-email', errorContains: 'valid email' },
+    { field: 'password', value: 'short', errorContains: 'at least 8 characters' },
+    { field: 'password', value: 'alllowercase1', errorContains: 'uppercase letter' },
+    { field: 'password', value: 'ALLUPPERCASE1', errorContains: 'lowercase letter' },
+    { field: 'password', value: 'NoNumbersHere', errorContains: 'one number' },
+  ])('rejects invalid $field with value "$value"', ({ field, value, errorContains }) => {
+    const data = { ...validRegister, [field]: value };
+    const result = registerFormSchema.safeParse(data);
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const errorMessages = result.error.issues.map((i) => i.message).join(' ');
+      expect(errorMessages).toContain(errorContains);
+    }
+  });
+
+  it('rejects mismatched passwords', () => {
+    const data = { ...validRegister, confirmPassword: 'DifferentPass123' };
     const result = registerFormSchema.safeParse(data);
 
     expect(result.success).toBe(false);
-    if (!result.success && errorContains) {
-      expect(result.error.issues[0].message).toContain(errorContains);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toContain("don't match");
     }
   });
 });

package/templates/tests/unit/stores/preferencesStore.test.ts

@@ -1,6 +1,7 @@
 import { act } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { STORAGE_KEYS } from '@/lib/storageKeys';
 import { initPreferencesSync, usePreferencesStore } from '@/stores/preferencesStore';
 import { mockMatchMedia } from '@/test';
 
@@ -71,5 +72,85 @@ describe('preferencesStore', () => {
 
       expect(removeSpy).toHaveBeenCalledWith('storage', expect.any(Function));
     });
+
+    it('updates store when valid storage event is received', () => {
+      usePreferencesStore.setState({ theme: 'light' });
+      initPreferencesSync();
+
+      const storageEvent = new StorageEvent('storage', {
+        key: STORAGE_KEYS.preferences,
+        newValue: JSON.stringify({ state: { theme: 'dark' } }),
+      });
+
+      act(() => {
+        window.dispatchEvent(storageEvent);
+      });
+
+      expect(usePreferencesStore.getState().theme).toBe('dark');
+    });
+
+    it('ignores storage events for other keys', () => {
+      usePreferencesStore.setState({ theme: 'light' });
+      initPreferencesSync();
+
+      const storageEvent = new StorageEvent('storage', {
+        key: 'other-key',
+        newValue: JSON.stringify({ state: { theme: 'dark' } }),
+      });
+
+      act(() => {
+        window.dispatchEvent(storageEvent);
+      });
+
+      expect(usePreferencesStore.getState().theme).toBe('light');
+    });
+
+    it('ignores storage events with null newValue', () => {
+      usePreferencesStore.setState({ theme: 'light' });
+      initPreferencesSync();
+
+      const storageEvent = new StorageEvent('storage', {
+        key: STORAGE_KEYS.preferences,
+        newValue: null,
+      });
+
+      act(() => {
+        window.dispatchEvent(storageEvent);
+      });
+
+      expect(usePreferencesStore.getState().theme).toBe('light');
+    });
+
+    it('ignores storage events with invalid JSON', () => {
+      usePreferencesStore.setState({ theme: 'light' });
+      initPreferencesSync();
+
+      const storageEvent = new StorageEvent('storage', {
+        key: STORAGE_KEYS.preferences,
+        newValue: 'invalid-json',
+      });
+
+      act(() => {
+        window.dispatchEvent(storageEvent);
+      });
+
+      expect(usePreferencesStore.getState().theme).toBe('light');
+    });
+
+    it('ignores storage events without state property', () => {
+      usePreferencesStore.setState({ theme: 'light' });
+      initPreferencesSync();
+
+      const storageEvent = new StorageEvent('storage', {
+        key: STORAGE_KEYS.preferences,
+        newValue: JSON.stringify({ foo: 'bar' }),
+      });
+
+      act(() => {
+        window.dispatchEvent(storageEvent);
+      });
+
+      expect(usePreferencesStore.getState().theme).toBe('light');
+    });
   });
 });

package/templates/vitest.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html', 'lcov'],
-      exclude: ['**/*.test.{ts,tsx}', '**/index.ts', 'src/types/**', 'src/components/ui/**'],
+      exclude: ['**/*.test.{ts,tsx}', '**/index.ts', 'src/types/**', 'src/components/ui/**', 'src/mocks/**'],
       thresholds: {
         lines: 80,
         functions: 80,

package/templates/src/hooks/useContactForm.ts

@@ -1,33 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-
-import { type ContactFormData, contactFormSchema } from '@/lib/validations';
-
-/**
- * Example React Hook Form + Zod hook for a contact form.
- * Demonstrates the pattern for form validation.
- */
-export function useContactForm() {
-  const form = useForm<ContactFormData>({
-    resolver: zodResolver(contactFormSchema),
-    defaultValues: {
-      name: '',
-      email: '',
-      message: '',
-    },
-  });
-
-  const onSubmit = async (data: ContactFormData) => {
-    // Replace with your actual form submission logic
-    // eslint-disable-next-line no-console
-    console.log('Form submitted:', data);
-    // await api.submitContactForm(data);
-  };
-
-  return {
-    form,
-    onSubmit: form.handleSubmit(onSubmit),
-    isSubmitting: form.formState.isSubmitting,
-    errors: form.formState.errors,
-  };
-}

package/templates/src/lib/constants.ts

@@ -1,8 +0,0 @@
-export const TIMING = {
-  DEBOUNCE_MS: 300,
-  TOAST_DURATION_MS: 5000,
-} as const;
-
-export const UI = {
-  MAX_WIDTH: 1280,
-} as const;