@react-spa-scaffold/mcp 0.3.0 → 1.1.0

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/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@react-spa-scaffold/tsconfig/react",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "tests"]
+}

package/templates/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@react-spa-scaffold/tsconfig/react",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/templates/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@react-spa-scaffold/tsconfig/vite",
+  "include": ["vite.config.ts", "vitest.config.ts", "playwright.config.ts"]
+}

package/templates/vite.config.ts

@@ -0,0 +1,54 @@
+import path from 'path';
+
+import { lingui } from '@lingui/vite-plugin';
+import { sentryVitePlugin } from '@sentry/vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ['@lingui/babel-plugin-lingui-macro'],
+      },
+    }),
+    lingui(),
+    tailwindcss(),
+    // Sentry source map upload (CI only, requires SENTRY_AUTH_TOKEN)
+    process.env.SENTRY_AUTH_TOKEN
+      ? sentryVitePlugin({
+          org: process.env.SENTRY_ORG,
+          project: process.env.SENTRY_PROJECT,
+          authToken: process.env.SENTRY_AUTH_TOKEN,
+          sourcemaps: {
+            filesToDeleteAfterUpload: ['./dist/**/*.map'],
+          },
+          telemetry: false,
+        })
+      : null,
+  ].filter(Boolean),
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  css: {
+    devSourcemap: true,
+  },
+  build: {
+    // Source maps: 'hidden' for Sentry (uploaded then deleted), false otherwise
+    // Set to true locally if needed for debugging: VITE_SOURCEMAP=true npm run build
+    sourcemap: process.env.SENTRY_AUTH_TOKEN ? 'hidden' : process.env.VITE_SOURCEMAP === 'true',
+    chunkSizeWarningLimit: 500,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom', 'react-router'],
+          i18n: ['@lingui/core', '@lingui/react'],
+          ui: ['@radix-ui/react-slot', 'class-variance-authority'],
+        },
+      },
+    },
+  },
+});

package/templates/vitest.config.ts

@@ -0,0 +1,38 @@
+import path from 'path';
+
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ['@lingui/babel-plugin-lingui-macro'],
+      },
+    }),
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test-setup.ts'],
+    include: ['src/**/*.test.{ts,tsx}', 'tests/**/*.test.{ts,tsx}'],
+    clearMocks: true,
+    restoreMocks: true,
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      exclude: ['**/*.test.{ts,tsx}', '**/index.ts', 'src/types/**', 'src/components/ui/**', 'src/mocks/**'],
+      thresholds: {
+        lines: 80,
+        functions: 80,
+        statements: 80,
+        branches: 80,
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});

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;

package/templates/src/lib/format.ts

@@ -1,119 +0,0 @@
-/**
- * Formatting utilities for dates, numbers, and currencies.
- * All formatters are locale-aware.
- */
-
-/**
- * Format a date with locale support
- */
-export function formatDate(
-  date: Date | string | number,
-  options: Intl.DateTimeFormatOptions = {},
-  locale?: string,
-): string {
-  const dateObj = date instanceof Date ? date : new Date(date);
-
-  if (isNaN(dateObj.getTime())) {
-    return 'Invalid date';
-  }
-
-  const defaultOptions: Intl.DateTimeFormatOptions = {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    ...options,
-  };
-
-  return new Intl.DateTimeFormat(locale, defaultOptions).format(dateObj);
-}
-
-/**
- * Format a date with time
- */
-export function formatDateTime(
-  date: Date | string | number,
-  options: Intl.DateTimeFormatOptions = {},
-  locale?: string,
-): string {
-  return formatDate(
-    date,
-    {
-      hour: '2-digit',
-      minute: '2-digit',
-      ...options,
-    },
-    locale,
-  );
-}
-
-/**
- * Format relative time (e.g., "2 hours ago", "in 3 days")
- */
-export function formatRelativeTime(date: Date | string | number, locale?: string): string {
-  const dateObj = date instanceof Date ? date : new Date(date);
-
-  if (isNaN(dateObj.getTime())) {
-    return 'Invalid date';
-  }
-
-  const now = new Date();
-  const diffInSeconds = Math.floor((dateObj.getTime() - now.getTime()) / 1000);
-  const absoluteDiff = Math.abs(diffInSeconds);
-
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
-
-  if (absoluteDiff < 60) {
-    return rtf.format(diffInSeconds, 'second');
-  } else if (absoluteDiff < 3600) {
-    return rtf.format(Math.floor(diffInSeconds / 60), 'minute');
-  } else if (absoluteDiff < 86400) {
-    return rtf.format(Math.floor(diffInSeconds / 3600), 'hour');
-  } else if (absoluteDiff < 2592000) {
-    return rtf.format(Math.floor(diffInSeconds / 86400), 'day');
-  } else if (absoluteDiff < 31536000) {
-    return rtf.format(Math.floor(diffInSeconds / 2592000), 'month');
-  } else {
-    return rtf.format(Math.floor(diffInSeconds / 31536000), 'year');
-  }
-}
-
-/**
- * Format a number with locale support
- */
-export function formatNumber(value: number, options: Intl.NumberFormatOptions = {}, locale?: string): string {
-  return new Intl.NumberFormat(locale, options).format(value);
-}
-
-/**
- * Format a number as currency
- */
-export function formatCurrency(value: number, currency = 'USD', locale?: string): string {
-  return new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency,
-  }).format(value);
-}
-
-/**
- * Format a number as percentage
- */
-export function formatPercent(value: number, decimals = 0, locale?: string): string {
-  return new Intl.NumberFormat(locale, {
-    style: 'percent',
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(value);
-}
-
-/**
- * Format bytes to human readable string
- */
-export function formatBytes(bytes: number, decimals = 2): string {
-  if (bytes === 0) return '0 Bytes';
-
-  const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(decimals))} ${sizes[i]}`;
-}

package/templates/tests/unit/hooks/useContactForm.test.ts

@@ -1,60 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-
-import { useContactForm } from '@/hooks/useContactForm';
-
-describe('useContactForm', () => {
-  describe('initial state', () => {
-    it('initializes with empty values and no errors', () => {
-      const { result } = renderHook(() => useContactForm());
-
-      expect(result.current.form.getValues()).toEqual({ name: '', email: '', message: '' });
-      expect(result.current.errors).toEqual({});
-      expect(result.current.isSubmitting).toBe(false);
-      expect(typeof result.current.onSubmit).toBe('function');
-    });
-  });
-
-  describe('validation', () => {
-    it.each([
-      { field: 'name', value: 'J', valid: { email: 'test@example.com', message: 'Valid message here' } },
-      { field: 'email', value: 'invalid', valid: { name: 'John', message: 'Valid message here' } },
-      { field: 'message', value: 'Short', valid: { name: 'John', email: 'test@example.com' } },
-    ])('rejects invalid $field', async ({ field, value, valid }) => {
-      const { result } = renderHook(() => useContactForm());
-
-      act(() => {
-        result.current.form.setValue(field as 'name' | 'email' | 'message', value);
-        Object.entries(valid).forEach(([k, v]) => {
-          result.current.form.setValue(k as 'name' | 'email' | 'message', v);
-        });
-      });
-
-      await act(async () => {
-        await result.current.form.trigger();
-      });
-
-      await waitFor(() => {
-        expect(result.current.errors[field as keyof typeof result.current.errors]).toBeDefined();
-      });
-    });
-
-    it('passes with valid data', async () => {
-      const { result } = renderHook(() => useContactForm());
-
-      act(() => {
-        result.current.form.setValue('name', 'John Doe');
-        result.current.form.setValue('email', 'test@example.com');
-        result.current.form.setValue('message', 'This is a valid message that is long enough.');
-      });
-
-      await act(async () => {
-        await result.current.form.trigger();
-      });
-
-      await waitFor(() => {
-        expect(result.current.errors).toEqual({});
-      });
-    });
-  });
-});