create-react-forge 1.0.2 → 1.0.3

package/src/templates/overlays/styling/css-modules/src/components/ui/Button.module.css

@@ -0,0 +1,87 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  border: none;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Variants */
+.primary {
+  background-color: var(--color-primary-600);
+  color: white;
+}
+
+.primary:hover:not(:disabled) {
+  background-color: var(--color-primary-500);
+}
+
+.secondary {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-900);
+}
+
+.secondary:hover:not(:disabled) {
+  background-color: var(--color-gray-200);
+}
+
+.outline {
+  background-color: transparent;
+  border: 1px solid var(--color-gray-300);
+  color: var(--color-gray-700);
+}
+
+.outline:hover:not(:disabled) {
+  background-color: var(--color-gray-50);
+}
+
+.danger {
+  background-color: var(--color-red-600);
+  color: white;
+}
+
+.danger:hover:not(:disabled) {
+  background-color: var(--color-red-500);
+}
+
+/* Sizes */
+.sm {
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: 0.75rem;
+}
+
+.md {
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: 0.875rem;
+}
+
+.lg {
+  padding: var(--spacing-3) var(--spacing-4);
+  font-size: 1rem;
+}
+
+/* Loading spinner */
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  margin-right: var(--spacing-2);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-full);
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+

package/src/templates/overlays/styling/css-modules/src/styles/globals.css

@@ -0,0 +1,91 @@
+/* CSS Custom Properties (Design Tokens) */
+:root {
+  /* Colors */
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+
+  /* Typography */
+  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+
+  /* Spacing */
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-family-sans);
+  line-height: 1.5;
+  color: var(--color-gray-900);
+  background-color: white;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Focus styles */
+:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+

package/src/templates/overlays/styling/tailwind/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "styling-tailwind",
+  "version": "1.0.0",
+  "description": "Tailwind CSS styling setup with modern configuration",
+  "compatibleWith": ["runtime-vite", "runtime-nextjs"],
+  "dependencies": {},
+  "devDependencies": {
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0"
+  },
+  "scripts": {},
+  "filePatterns": {
+    "include": ["**/*"],
+    "exclude": ["manifest.json"]
+  }
+}
+

package/src/templates/overlays/styling/tailwind/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+

package/src/templates/overlays/styling/tailwind/src/styles/globals.css

@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom base styles */
+@layer base {
+  html {
+    @apply antialiased;
+  }
+
+  body {
+    @apply bg-white text-gray-900;
+  }
+
+  /* Focus styles for accessibility */
+  :focus-visible {
+    @apply outline-none ring-2 ring-indigo-500 ring-offset-2;
+  }
+}
+
+/* Custom component classes */
+@layer components {
+  .container-app {
+    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+
+  .card {
+    @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm;
+  }
+
+  .link {
+    @apply text-indigo-600 hover:text-indigo-500 hover:underline;
+  }
+}
+
+/* Custom utilities */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .animation-delay-100 {
+    animation-delay: 100ms;
+  }
+
+  .animation-delay-200 {
+    animation-delay: 200ms;
+  }
+
+  .animation-delay-300 {
+    animation-delay: 300ms;
+  }
+}
+

package/src/templates/overlays/styling/tailwind/tailwind.config.js

@@ -0,0 +1,62 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Add custom colors here
+        brand: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+      },
+      fontFamily: {
+        sans: [
+          'Inter',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'sans-serif',
+        ],
+      },
+      animation: {
+        'fade-in': 'fade-in 0.3s ease-out',
+        'slide-up': 'slide-up 0.3s ease-out',
+        'slide-down': 'slide-down 0.3s ease-out',
+      },
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        'slide-up': {
+          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        'slide-down': {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+

package/src/templates/overlays/testing/jest/jest.config.js

@@ -0,0 +1,24 @@
+/** @type {import('jest').Config} */
+const config = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/testing/setup.ts'],
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: 'tsconfig.json',
+    }],
+  },
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/testing/**',
+    '!src/**/index.ts',
+  ],
+  coverageReporters: ['text', 'json', 'html'],
+};
+
+module.exports = config;
+

package/src/templates/overlays/testing/jest/manifest.json

@@ -0,0 +1,27 @@
+{
+  "name": "testing-jest",
+  "version": "1.0.0",
+  "description": "Jest unit testing setup with React Testing Library",
+  "compatibleWith": ["runtime-vite", "runtime-nextjs"],
+  "dependencies": {},
+  "devDependencies": {
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "@types/jest": "^29.5.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/user-event": "^14.5.0",
+    "ts-jest": "^29.2.0",
+    "msw": "^2.4.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "filePatterns": {
+    "include": ["**/*"],
+    "exclude": ["manifest.json"]
+  }
+}
+

package/src/templates/overlays/testing/jest/src/components/ui/__tests__/Button.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@/testing/test-utils';
+import { Button } from '../Button';
+
+describe('Button', () => {
+  it('renders children correctly', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it('handles click events', async () => {
+    const handleClick = jest.fn();
+    const { user } = render(<Button onClick={handleClick}>Click me</Button>);
+
+    await user.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows loading state', () => {
+    render(<Button isLoading>Loading</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('can be disabled', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('applies variant styles', () => {
+    render(<Button variant="danger">Delete</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-red-600');
+  });
+});
+

package/src/templates/overlays/testing/jest/src/testing/mocks/browser.ts

@@ -0,0 +1,17 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handlers';
+
+/**
+ * MSW worker for browser environment (development)
+ * Import and start in your app entry point for API mocking during development
+ *
+ * Example:
+ * ```ts
+ * if (process.env.NODE_ENV === 'development') {
+ *   const { worker } = await import('./testing/mocks/browser');
+ *   await worker.start({ onUnhandledRequest: 'bypass' });
+ * }
+ * ```
+ */
+export const worker = setupWorker(...handlers);
+

package/src/templates/overlays/testing/jest/src/testing/mocks/handlers.ts

@@ -0,0 +1,42 @@
+import { http, HttpResponse } from 'msw';
+
+/**
+ * MSW request handlers for mocking API calls in tests
+ * Following bulletproof-react patterns
+ */
+
+const API_URL = 'http://localhost:3001';
+
+export const handlers = [
+  // Example: GET /api/users
+  http.get(`${API_URL}/api/users`, () => {
+    return HttpResponse.json([
+      { id: '1', name: 'John Doe', email: 'john@example.com' },
+      { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
+    ]);
+  }),
+
+  // Example: POST /api/auth/login
+  http.post(`${API_URL}/api/auth/login`, async ({ request }) => {
+    const body = await request.json() as { email: string; password: string };
+
+    if (body.email === 'test@example.com' && body.password === 'password') {
+      return HttpResponse.json({
+        user: {
+          id: '1',
+          email: 'test@example.com',
+          name: 'Test User',
+        },
+        token: 'mock-jwt-token',
+      });
+    }
+
+    return HttpResponse.json(
+      { message: 'Invalid credentials' },
+      { status: 401 }
+    );
+  }),
+
+  // Add more handlers as needed
+];
+

package/src/templates/overlays/testing/jest/src/testing/mocks/server.ts

@@ -0,0 +1,8 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+/**
+ * MSW server for Node.js environment (tests)
+ */
+export const server = setupServer(...handlers);
+

package/src/templates/overlays/testing/jest/src/testing/setup.ts

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { server } from './mocks/server';
+
+// Establish API mocking before all tests
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'error' });
+});
+
+// Clean up after each test
+afterEach(() => {
+  cleanup();
+  server.resetHandlers();
+});
+
+// Clean up after all tests are done
+afterAll(() => {
+  server.close();
+});
+

package/src/templates/overlays/testing/jest/src/testing/test-utils.tsx

@@ -0,0 +1,39 @@
+import { ReactElement, ReactNode } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+
+/**
+ * Custom render function that includes providers
+ * Following bulletproof-react testing patterns
+ */
+
+type WrapperProps = {
+  children: ReactNode;
+};
+
+function AllProviders({ children }: WrapperProps) {
+  return (
+    <BrowserRouter>
+      {/* Add other providers here (React Query, Theme, etc.) */}
+      {children}
+    </BrowserRouter>
+  );
+}
+
+function customRender(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) {
+  return {
+    user: userEvent.setup(),
+    ...render(ui, { wrapper: AllProviders, ...options }),
+  };
+}
+
+// Re-export everything from testing-library
+export * from '@testing-library/react';
+
+// Override render method
+export { customRender as render };
+

package/src/templates/overlays/testing/playwright/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "testing-playwright",
+  "version": "1.0.0",
+  "description": "Playwright E2E testing setup",
+  "compatibleWith": ["runtime-vite", "runtime-nextjs"],
+  "dependencies": {},
+  "devDependencies": {
+    "@playwright/test": "^1.45.0"
+  },
+  "scripts": {
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report"
+  },
+  "filePatterns": {
+    "include": ["**/*"],
+    "exclude": ["manifest.json"]
+  }
+}
+

package/src/templates/overlays/testing/playwright/playwright.config.ts

@@ -0,0 +1,53 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright configuration
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    // Mobile viewports
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+  ],
+
+  // Run your local dev server before starting the tests
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});
+

package/src/templates/overlays/testing/playwright/tests/e2e/accessibility.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Accessibility', () => {
+  test('home page should not have any automatically detectable accessibility issues', async ({
+    page,
+  }) => {
+    await page.goto('/');
+
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('should be keyboard navigable', async ({ page }) => {
+    await page.goto('/');
+
+    // Tab to first interactive element
+    await page.keyboard.press('Tab');
+
+    // Check that something is focused
+    const focusedElement = await page.evaluate(
+      () => document.activeElement?.tagName
+    );
+    expect(focusedElement).toBeTruthy();
+  });
+
+  test('interactive elements should have visible focus states', async ({
+    page,
+  }) => {
+    await page.goto('/');
+
+    // Find a button or link
+    const button = page.getByRole('link', { name: /get started/i });
+    await button.focus();
+
+    // Check that focus is visible (element should have focus-visible styles)
+    await expect(button).toBeFocused();
+  });
+});
+