@idealyst/cli 1.0.90 → 1.0.92

package/template/packages/web/__tests__/components.test.tsx

@@ -0,0 +1,564 @@
+/**
+ * Example component tests for React Web
+ * Demonstrates comprehensive testing patterns with React Testing Library
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('React Web Component Testing Examples', () => {
+  // Example 1: Simple Display Component
+  const WelcomeMessage = ({ 
+    name, 
+    showGreeting = true 
+  }: { 
+    name: string; 
+    showGreeting?: boolean; 
+  }) => (
+    <div data-testid="welcome-message">
+      {showGreeting && <h1>Welcome, {name}!</h1>}
+      <p>Thank you for visiting our site.</p>
+    </div>
+  );
+
+  describe('WelcomeMessage Component', () => {
+    it('renders welcome message with name', () => {
+      render(<WelcomeMessage name="John" />);
+      
+      expect(screen.getByText('Welcome, John!')).toBeInTheDocument();
+      expect(screen.getByText('Thank you for visiting our site.')).toBeInTheDocument();
+    });
+
+    it('hides greeting when showGreeting is false', () => {
+      render(<WelcomeMessage name="John" showGreeting={false} />);
+      
+      expect(screen.queryByText('Welcome, John!')).not.toBeInTheDocument();
+      expect(screen.getByText('Thank you for visiting our site.')).toBeInTheDocument();
+    });
+  });
+
+  // Example 2: Interactive Button Component
+  const ActionButton = ({ 
+    children, 
+    onClick, 
+    variant = 'primary',
+    disabled = false,
+    loading = false 
+  }: {
+    children: React.ReactNode;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+    disabled?: boolean;
+    loading?: boolean;
+  }) => (
+    <button
+      data-testid="action-button"
+      onClick={onClick}
+      disabled={disabled || loading}
+      className={`btn btn-${variant} ${loading ? 'loading' : ''}`}
+      aria-label={loading ? 'Loading...' : undefined}
+    >
+      {loading ? 'Loading...' : children}
+    </button>
+  );
+
+  describe('ActionButton Component', () => {
+    it('renders button with correct text', () => {
+      const mockClick = jest.fn();
+      render(<ActionButton onClick={mockClick}>Click me</ActionButton>);
+      
+      const button = screen.getByTestId('action-button');
+      expect(button).toHaveTextContent('Click me');
+      expect(button).toHaveClass('btn', 'btn-primary');
+    });
+
+    it('calls onClick when clicked', async () => {
+      const user = userEvent.setup();
+      const mockClick = jest.fn();
+      
+      render(<ActionButton onClick={mockClick}>Click me</ActionButton>);
+      
+      await user.click(screen.getByTestId('action-button'));
+      expect(mockClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('applies correct variant class', () => {
+      const mockClick = jest.fn();
+      render(<ActionButton onClick={mockClick} variant="danger">Delete</ActionButton>);
+      
+      expect(screen.getByTestId('action-button')).toHaveClass('btn-danger');
+    });
+
+    it('shows loading state', () => {
+      const mockClick = jest.fn();
+      render(<ActionButton onClick={mockClick} loading>Submit</ActionButton>);
+      
+      const button = screen.getByTestId('action-button');
+      expect(button).toHaveTextContent('Loading...');
+      expect(button).toBeDisabled();
+      expect(button).toHaveClass('loading');
+      expect(button).toHaveAttribute('aria-label', 'Loading...');
+    });
+
+    it('is disabled when disabled prop is true', () => {
+      const mockClick = jest.fn();
+      render(<ActionButton onClick={mockClick} disabled>Disabled</ActionButton>);
+      
+      expect(screen.getByTestId('action-button')).toBeDisabled();
+    });
+  });
+
+  // Example 3: Form Component with Validation
+  const ContactForm = ({ 
+    onSubmit 
+  }: { 
+    onSubmit: (data: { name: string; email: string; message: string }) => void; 
+  }) => {
+    const [formData, setFormData] = React.useState({
+      name: '',
+      email: '',
+      message: ''
+    });
+    const [errors, setErrors] = React.useState<Record<string, string>>({});
+
+    const validateForm = () => {
+      const newErrors: Record<string, string> = {};
+      
+      if (!formData.name.trim()) {
+        newErrors.name = 'Name is required';
+      }
+      
+      if (!formData.email.trim()) {
+        newErrors.email = 'Email is required';
+      } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+        newErrors.email = 'Email is invalid';
+      }
+      
+      if (!formData.message.trim()) {
+        newErrors.message = 'Message is required';
+      }
+      
+      setErrors(newErrors);
+      return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      if (validateForm()) {
+        onSubmit(formData);
+      }
+    };
+
+    const handleInputChange = (field: string, value: string) => {
+      setFormData(prev => ({ ...prev, [field]: value }));
+      if (errors[field]) {
+        setErrors(prev => ({ ...prev, [field]: '' }));
+      }
+    };
+
+    return (
+      <form data-testid="contact-form" onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="name">Name:</label>
+          <input
+            id="name"
+            data-testid="name-input"
+            type="text"
+            value={formData.name}
+            onChange={(e) => handleInputChange('name', e.target.value)}
+            aria-describedby={errors.name ? 'name-error' : undefined}
+          />
+          {errors.name && (
+            <div id="name-error" data-testid="name-error" role="alert">
+              {errors.name}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="email">Email:</label>
+          <input
+            id="email"
+            data-testid="email-input"
+            type="email"
+            value={formData.email}
+            onChange={(e) => handleInputChange('email', e.target.value)}
+            aria-describedby={errors.email ? 'email-error' : undefined}
+          />
+          {errors.email && (
+            <div id="email-error" data-testid="email-error" role="alert">
+              {errors.email}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="message">Message:</label>
+          <textarea
+            id="message"
+            data-testid="message-input"
+            value={formData.message}
+            onChange={(e) => handleInputChange('message', e.target.value)}
+            aria-describedby={errors.message ? 'message-error' : undefined}
+          />
+          {errors.message && (
+            <div id="message-error" data-testid="message-error" role="alert">
+              {errors.message}
+            </div>
+          )}
+        </div>
+
+        <button data-testid="submit-button" type="submit">
+          Send Message
+        </button>
+      </form>
+    );
+  };
+
+  describe('ContactForm Component', () => {
+    it('renders all form fields', () => {
+      const mockSubmit = jest.fn();
+      render(<ContactForm onSubmit={mockSubmit} />);
+      
+      expect(screen.getByLabelText('Name:')).toBeInTheDocument();
+      expect(screen.getByLabelText('Email:')).toBeInTheDocument();
+      expect(screen.getByLabelText('Message:')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Send Message' })).toBeInTheDocument();
+    });
+
+    it('submits form with valid data', async () => {
+      const user = userEvent.setup();
+      const mockSubmit = jest.fn();
+      
+      render(<ContactForm onSubmit={mockSubmit} />);
+      
+      await user.type(screen.getByLabelText('Name:'), 'John Doe');
+      await user.type(screen.getByLabelText('Email:'), 'john@example.com');
+      await user.type(screen.getByLabelText('Message:'), 'Hello there!');
+      
+      await user.click(screen.getByRole('button', { name: 'Send Message' }));
+      
+      expect(mockSubmit).toHaveBeenCalledWith({
+        name: 'John Doe',
+        email: 'john@example.com',
+        message: 'Hello there!'
+      });
+    });
+
+    it('shows validation errors for empty fields', async () => {
+      const user = userEvent.setup();
+      const mockSubmit = jest.fn();
+      
+      render(<ContactForm onSubmit={mockSubmit} />);
+      
+      await user.click(screen.getByRole('button', { name: 'Send Message' }));
+      
+      expect(screen.getByTestId('name-error')).toHaveTextContent('Name is required');
+      expect(screen.getByTestId('email-error')).toHaveTextContent('Email is required');
+      expect(screen.getByTestId('message-error')).toHaveTextContent('Message is required');
+      expect(mockSubmit).not.toHaveBeenCalled();
+    });
+
+    it('shows email validation error for invalid email', async () => {
+      const user = userEvent.setup();
+      const mockSubmit = jest.fn();
+      
+      render(<ContactForm onSubmit={mockSubmit} />);
+      
+      await user.type(screen.getByLabelText('Email:'), 'invalid-email');
+      await user.click(screen.getByRole('button', { name: 'Send Message' }));
+      
+      expect(screen.getByTestId('email-error')).toHaveTextContent('Email is invalid');
+    });
+
+    it('clears errors when user starts typing', async () => {
+      const user = userEvent.setup();
+      const mockSubmit = jest.fn();
+      
+      render(<ContactForm onSubmit={mockSubmit} />);
+      
+      // Trigger validation errors
+      await user.click(screen.getByRole('button', { name: 'Send Message' }));
+      expect(screen.getByTestId('name-error')).toBeInTheDocument();
+      
+      // Start typing in name field
+      await user.type(screen.getByLabelText('Name:'), 'J');
+      
+      // Error should be cleared
+      expect(screen.queryByTestId('name-error')).not.toBeInTheDocument();
+    });
+  });
+
+  // Example 4: Data Fetching Component
+  const UserProfile = ({ userId }: { userId: string }) => {
+    const [user, setUser] = React.useState<{ id: string; name: string; email: string } | null>(null);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState<string | null>(null);
+
+    const fetchUser = React.useCallback(async () => {
+      setLoading(true);
+      setError(null);
+      
+      try {
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 100));
+        
+        if (userId === 'invalid') {
+          throw new Error('User not found');
+        }
+        
+        setUser({
+          id: userId,
+          name: `User ${userId}`,
+          email: `user${userId}@example.com`
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    }, [userId]);
+
+    React.useEffect(() => {
+      fetchUser();
+    }, [fetchUser]);
+
+    if (loading) {
+      return <div data-testid="loading">Loading user...</div>;
+    }
+
+    if (error) {
+      return (
+        <div data-testid="error">
+          <p>Error: {error}</p>
+          <button data-testid="retry-button" onClick={fetchUser}>
+            Retry
+          </button>
+        </div>
+      );
+    }
+
+    if (!user) {
+      return <div data-testid="no-user">No user found</div>;
+    }
+
+    return (
+      <div data-testid="user-profile">
+        <h2>{user.name}</h2>
+        <p>Email: {user.email}</p>
+        <p>ID: {user.id}</p>
+      </div>
+    );
+  };
+
+  describe('UserProfile Component', () => {
+    it('shows loading state initially', () => {
+      render(<UserProfile userId="123" />);
+      
+      expect(screen.getByTestId('loading')).toBeInTheDocument();
+    });
+
+    it('shows user data after successful fetch', async () => {
+      render(<UserProfile userId="123" />);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('user-profile')).toBeInTheDocument();
+      });
+      
+      expect(screen.getByText('User 123')).toBeInTheDocument();
+      expect(screen.getByText('Email: user123@example.com')).toBeInTheDocument();
+      expect(screen.getByText('ID: 123')).toBeInTheDocument();
+    });
+
+    it('shows error state when fetch fails', async () => {
+      render(<UserProfile userId="invalid" />);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('error')).toBeInTheDocument();
+      });
+      
+      expect(screen.getByText('Error: User not found')).toBeInTheDocument();
+      expect(screen.getByTestId('retry-button')).toBeInTheDocument();
+    });
+
+    it('retries fetch when retry button is clicked', async () => {
+      const user = userEvent.setup();
+      const { rerender } = render(<UserProfile userId="invalid" />);
+      
+      // Wait for error state
+      await waitFor(() => {
+        expect(screen.getByTestId('error')).toBeInTheDocument();
+      });
+      
+      // Change userId to valid and click retry
+      rerender(<UserProfile userId="456" />);
+      await user.click(screen.getByTestId('retry-button'));
+      
+      // Should show loading then success
+      expect(screen.getByTestId('loading')).toBeInTheDocument();
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('user-profile')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // Example 5: Modal Component
+  const Modal = ({ 
+    isOpen, 
+    onClose, 
+    title, 
+    children 
+  }: {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+  }) => {
+    React.useEffect(() => {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      };
+
+      if (isOpen) {
+        document.addEventListener('keydown', handleEscape);
+        document.body.style.overflow = 'hidden';
+      }
+
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+        document.body.style.overflow = '';
+      };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+      <div 
+        data-testid="modal-overlay" 
+        className="modal-overlay"
+        onClick={onClose}
+      >
+        <div 
+          data-testid="modal-content" 
+          className="modal-content"
+          onClick={(e) => e.stopPropagation()}
+          role="dialog"
+          aria-labelledby="modal-title"
+        >
+          <header className="modal-header">
+            <h2 id="modal-title">{title}</h2>
+            <button 
+              data-testid="close-button"
+              onClick={onClose}
+              aria-label="Close modal"
+            >
+              ×
+            </button>
+          </header>
+          <div className="modal-body">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  describe('Modal Component', () => {
+    it('does not render when isOpen is false', () => {
+      render(
+        <Modal isOpen={false} onClose={jest.fn()} title="Test Modal">
+          <p>Modal content</p>
+        </Modal>
+      );
+      
+      expect(screen.queryByTestId('modal-overlay')).not.toBeInTheDocument();
+    });
+
+    it('renders when isOpen is true', () => {
+      render(
+        <Modal isOpen={true} onClose={jest.fn()} title="Test Modal">
+          <p>Modal content</p>
+        </Modal>
+      );
+      
+      expect(screen.getByTestId('modal-overlay')).toBeInTheDocument();
+      expect(screen.getByText('Test Modal')).toBeInTheDocument();
+      expect(screen.getByText('Modal content')).toBeInTheDocument();
+    });
+
+    it('calls onClose when close button is clicked', async () => {
+      const user = userEvent.setup();
+      const mockClose = jest.fn();
+      
+      render(
+        <Modal isOpen={true} onClose={mockClose} title="Test Modal">
+          <p>Modal content</p>
+        </Modal>
+      );
+      
+      await user.click(screen.getByTestId('close-button'));
+      expect(mockClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClose when overlay is clicked', async () => {
+      const user = userEvent.setup();
+      const mockClose = jest.fn();
+      
+      render(
+        <Modal isOpen={true} onClose={mockClose} title="Test Modal">
+          <p>Modal content</p>
+        </Modal>
+      );
+      
+      await user.click(screen.getByTestId('modal-overlay'));
+      expect(mockClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not close when modal content is clicked', async () => {
+      const user = userEvent.setup();
+      const mockClose = jest.fn();
+      
+      render(
+        <Modal isOpen={true} onClose={mockClose} title="Test Modal">
+          <p>Modal content</p>
+        </Modal>
+      );
+      
+      await user.click(screen.getByTestId('modal-content'));
+      expect(mockClose).not.toHaveBeenCalled();
+    });
+
+    it('closes when Escape key is pressed', async () => {
+      const user = userEvent.setup();
+      const mockClose = jest.fn();
+      
+      render(
+        <Modal isOpen={true} onClose={mockClose} title="Test Modal">
+          <p>Modal content</p>
+        </Modal>
+      );
+      
+      await user.keyboard('{Escape}');
+      expect(mockClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('has proper accessibility attributes', () => {
+      render(
+        <Modal isOpen={true} onClose={jest.fn()} title="Test Modal">
+          <p>Modal content</p>
+        </Modal>
+      );
+      
+      const modalContent = screen.getByTestId('modal-content');
+      expect(modalContent).toHaveAttribute('role', 'dialog');
+      expect(modalContent).toHaveAttribute('aria-labelledby', 'modal-title');
+      
+      const closeButton = screen.getByTestId('close-button');
+      expect(closeButton).toHaveAttribute('aria-label', 'Close modal');
+    });
+  });
+});

package/template/packages/web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html> 

package/template/packages/web/jest.config.js

@@ -0,0 +1,27 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src', '<rootDir>/__tests__'],
+  testMatch: [
+    '**/__tests__/**/*.{ts,tsx,js}',
+    '**/*.{test,spec}.{ts,tsx,js}'
+  ],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  moduleNameMapping: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/index.ts',
+    '!src/main.tsx',
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  testTimeout: 10000,
+};

package/template/packages/web/jest.setup.js

@@ -0,0 +1,24 @@
+// Global test setup for Web/React tests
+import '@testing-library/jest-dom';
+
+// Mock window.matchMedia for tests
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// Mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));

package/template/packages/web/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@{{workspaceScope}}/web",
+  "version": "{{version}}",
+  "description": "{{description}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "@idealyst/components": "^{{idealystVersion}}",
+    "@idealyst/navigation": "^{{idealystVersion}}",
+    "@idealyst/theme": "^{{idealystVersion}}",
+    "@{{workspaceScope}}/shared": "workspace:*",
+    "@{{workspaceScope}}/database": "workspace:*",
+    "@{{workspaceScope}}/api": "workspace:*",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
+    "@react-native/normalize-colors": "^0.80.1",
+    "@tanstack/react-query": "^5.83.0",
+    "@trpc/client": "^11.5.1",
+    "@trpc/react-query": "^11.5.1",
+    "@trpc/server": "^11.5.1",
+    "@types/react-router-dom": "^5.3.3",
+    "compression": "^1.7.4",
+    "express": "^4.18.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-native": "^0.80.1",
+    "react-native-edge-to-edge": "^1.6.2",
+    "react-native-nitro-modules": "0.30.0",
+    "react-native-unistyles": "^3.0.10",
+    "react-native-web": "^0.20.0",
+    "react-router": "^7.6.3",
+    "react-router-dom": "^7.6.3",
+    "sirv": "^2.0.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/compression": "^1.7.5",
+    "@types/express": "^4.17.21",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-babel": "^1.3.2"
+  }
+}