@qwickapps/react-framework 1.3.2 → 1.3.3

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,216 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Button } from './buttons/Button';
+
+interface Props {
+	children: ReactNode;
+	fallback?: ReactNode;
+	onError?: (error: Error, errorInfo: ErrorInfo) => void;
+	showErrorDetails?: boolean;
+}
+
+interface State {
+	hasError: boolean;
+	error: Error | null;
+	errorInfo: ErrorInfo | null;
+}
+
+/**
+ * Generic ErrorBoundary component for catching and handling React errors
+ * 
+ * Features:
+ * - Catches JavaScript errors anywhere in child component tree
+ * - Displays fallback UI with retry functionality
+ * - Shows error details in development mode
+ * - Customizable error handling and fallback UI
+ * - Automatic error logging
+ */
+export class ErrorBoundary extends Component<Props, State> {
+	constructor(props: Props) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null,
+			errorInfo: null
+		};
+	}
+
+	static getDerivedStateFromError(error: Error): State {
+		// Update state so the next render will show the fallback UI
+		return { 
+			hasError: true,
+			error,
+			errorInfo: null
+		};
+	}
+
+	componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+		// Log error details
+		this.setState({
+			error,
+			errorInfo
+		});
+
+		// Log to console for debugging
+		console.error('ErrorBoundary caught an error:', error, errorInfo);
+
+		// Custom error handler
+		if (this.props.onError) {
+			this.props.onError(error, errorInfo);
+		}
+
+		// Send error to logging service if available
+		if (typeof window !== 'undefined') {
+			// @ts-ignore - Global error logging service
+			if (window.qwickapps?.logError) {
+				window.qwickapps.logError(error, errorInfo);
+			}
+		}
+	}
+
+	handleRetry = () => {
+		this.setState({
+			hasError: false,
+			error: null,
+			errorInfo: null
+		});
+	};
+
+	handleRefresh = () => {
+		if (typeof window !== 'undefined') {
+			window.location.reload();
+		}
+	};
+
+	render() {
+		if (this.state.hasError) {
+			// Custom fallback UI
+			if (this.props.fallback) {
+				return this.props.fallback;
+			}
+
+			// Default error UI
+			return (
+				<div 
+					className="error-boundary" 
+					role="alert"
+					style={{
+						padding: '2rem',
+						textAlign: 'center',
+						backgroundColor: '#fef2f2',
+						border: '1px solid #fecaca',
+						borderRadius: '8px',
+						margin: '1rem',
+						color: '#991b1b'
+					}}
+				>
+					<div style={{ marginBottom: '1.5rem' }}>
+						<h2 style={{ 
+							fontSize: '1.5rem', 
+							fontWeight: 'bold', 
+							marginBottom: '0.5rem',
+							color: '#991b1b'
+						}}>
+							Something went wrong
+						</h2>
+						<p style={{ 
+							color: '#7f1d1d',
+							marginBottom: '1rem' 
+						}}>
+							An unexpected error occurred in the application. Please try again or refresh the page.
+						</p>
+					</div>
+
+					<div style={{ 
+						display: 'flex', 
+						gap: '0.75rem', 
+						justifyContent: 'center',
+						marginBottom: '1rem'
+					}}>
+						<Button
+							variant="contained"
+							onClick={this.handleRetry}
+							style={{
+								backgroundColor: '#dc2626',
+								color: 'white'
+							}}
+						>
+							Try Again
+						</Button>
+
+						<Button
+							variant="outlined"
+							onClick={this.handleRefresh}
+							style={{
+								borderColor: '#dc2626',
+								color: '#dc2626'
+							}}
+						>
+							Refresh Page
+						</Button>
+					</div>
+
+					{/* Show error details in development or when explicitly enabled */}
+					{(process.env.NODE_ENV === 'development' || this.props.showErrorDetails) && this.state.error && (
+						<details 
+							style={{ 
+								textAlign: 'left', 
+								marginTop: '1rem',
+								padding: '1rem',
+								backgroundColor: '#f9fafb',
+								border: '1px solid #d1d5db',
+								borderRadius: '6px'
+							}}
+						>
+							<summary style={{ 
+								cursor: 'pointer', 
+								fontWeight: 'bold',
+								marginBottom: '0.5rem',
+								color: '#374151'
+							}}>
+								Error Details (Development Mode)
+							</summary>
+							<pre style={{ 
+								fontSize: '0.75rem',
+								color: '#374151',
+								whiteSpace: 'pre-wrap',
+								overflow: 'auto'
+							}}>
+								{this.state.error.toString()}
+								{this.state.errorInfo?.componentStack && (
+									<>
+										<br />
+										<br />
+										Component Stack:
+										{this.state.errorInfo.componentStack}
+									</>
+								)}
+							</pre>
+						</details>
+					)}
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}
+
+/**
+ * Higher-order component that wraps a component with ErrorBoundary
+ */
+export function withErrorBoundary<P extends object>(
+	WrappedComponent: React.ComponentType<P>,
+	errorBoundaryProps?: Omit<Props, 'children'>
+) {
+	const WithErrorBoundaryComponent = (props: P) => (
+		<ErrorBoundary {...errorBoundaryProps}>
+			<WrappedComponent {...props} />
+		</ErrorBoundary>
+	);
+
+	WithErrorBoundaryComponent.displayName = `withErrorBoundary(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+
+	return WithErrorBoundaryComponent;
+}
+
+export default ErrorBoundary;

package/src/components/QwickApp.tsx

@@ -35,6 +35,8 @@ import { QwickAppContext, type QwickAppContextValue, type QwickAppProps } from '
 import { type TemplateResolverConfig } from '../types';
 import './QwickApp.css';
 import Scaffold from './Scaffold';
+import { ErrorBoundary } from './ErrorBoundary';
+import { AccessibilityProvider } from './AccessibilityProvider';
 // Auth logic moved to AuthProvider - QwickApp now focuses on app infrastructure
 
 // RouteConfig moved to AuthProvider for auth-specific routing
@@ -125,17 +127,21 @@ export const QwickApp: React.FC<QwickAppComponentProps> = ({
   ) : content;
 
   const appContent = (
-    <div className={`qwick-app ${className || ''}`} style={style}>
-      <ThemeProvider 
-        appId={appId} 
-        defaultTheme={defaultTheme} 
-        defaultPalette={defaultPalette}
-      >
-        <QwickAppContext.Provider value={contextValue}>
-          {wrappedContent}
-        </QwickAppContext.Provider>
-      </ThemeProvider>
-    </div>
+    <ErrorBoundary>
+      <AccessibilityProvider>
+        <div className={`qwick-app ${className || ''}`} style={style}>
+          <ThemeProvider 
+            appId={appId} 
+            defaultTheme={defaultTheme} 
+            defaultPalette={defaultPalette}
+          >
+            <QwickAppContext.Provider value={contextValue}>
+              {wrappedContent}
+            </QwickAppContext.Provider>
+          </ThemeProvider>
+        </div>
+      </AccessibilityProvider>
+    </ErrorBoundary>
   );
 
   // If router is provided, wrap the entire app with it

package/src/components/__tests__/AccessibilityProvider.test.tsx

@@ -0,0 +1,330 @@
+import React from 'react';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+import { AccessibilityProvider, useAccessibility } from '../AccessibilityProvider';
+
+// Test component that uses accessibility hook
+const TestComponent = () => {
+  const {
+    highContrast,
+    reducedMotion,
+    largeText,
+    focusVisible,
+    isKeyboardUser,
+    issues,
+    setHighContrast,
+    setReducedMotion,
+    setLargeText,
+    announce,
+    announcePolite,
+    announceAssertive,
+    addIssue,
+    clearIssues,
+    runAudit
+  } = useAccessibility();
+
+  return (
+    <div>
+      <div data-testid="high-contrast">{highContrast.toString()}</div>
+      <div data-testid="reduced-motion">{reducedMotion.toString()}</div>
+      <div data-testid="large-text">{largeText.toString()}</div>
+      <div data-testid="focus-visible">{focusVisible.toString()}</div>
+      <div data-testid="keyboard-user">{isKeyboardUser.toString()}</div>
+      <div data-testid="issues-count">{issues.length}</div>
+      
+      <button onClick={() => setHighContrast(!highContrast)}>Toggle High Contrast</button>
+      <button onClick={() => setReducedMotion(!reducedMotion)}>Toggle Reduced Motion</button>
+      <button onClick={() => setLargeText(!largeText)}>Toggle Large Text</button>
+      <button onClick={() => announce('Test message')}>Announce</button>
+      <button onClick={() => announcePolite('Polite message')}>Announce Polite</button>
+      <button onClick={() => announceAssertive('Assertive message')}>Announce Assertive</button>
+      <button onClick={() => addIssue({ type: 'test', message: 'Test issue', level: 'error' })}>Add Issue</button>
+      <button onClick={clearIssues}>Clear Issues</button>
+      <button onClick={runAudit}>Run Audit</button>
+    </div>
+  );
+};
+
+// Mock matchMedia
+const mockMatchMedia = (matches: boolean) => {
+  return jest.fn(() => ({
+    matches,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+  }));
+};
+
+// Mock console methods
+const originalError = console.error;
+const originalGroup = console.group;
+const originalGroupEnd = console.groupEnd;
+const originalWarn = console.warn;
+
+beforeEach(() => {
+  // Mock window.matchMedia
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: mockMatchMedia(false),
+  });
+  
+  // Mock console methods
+  console.error = jest.fn();
+  console.group = jest.fn();
+  console.groupEnd = jest.fn();
+  console.warn = jest.fn();
+});
+
+afterEach(() => {
+  // Restore console methods
+  console.error = originalError;
+  console.group = originalGroup;
+  console.groupEnd = originalGroupEnd;
+  console.warn = originalWarn;
+  
+  // Clean up DOM
+  document.body.classList.remove('keyboard-user', 'high-contrast', 'reduced-motion', 'large-text');
+});
+
+describe('AccessibilityProvider', () => {
+  it('renders children correctly', () => {
+    render(
+      <AccessibilityProvider>
+        <div data-testid="child">Test content</div>
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('provides initial accessibility state', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('high-contrast')).toHaveTextContent('false');
+    expect(screen.getByTestId('reduced-motion')).toHaveTextContent('false');
+    expect(screen.getByTestId('large-text')).toHaveTextContent('false');
+    expect(screen.getByTestId('focus-visible')).toHaveTextContent('true');
+    expect(screen.getByTestId('keyboard-user')).toHaveTextContent('false');
+    expect(screen.getByTestId('issues-count')).toHaveTextContent('0');
+  });
+
+  it('allows toggling high contrast mode', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Toggle High Contrast');
+    fireEvent.click(button);
+
+    expect(screen.getByTestId('high-contrast')).toHaveTextContent('true');
+    expect(document.body).toHaveClass('high-contrast');
+  });
+
+  it('allows toggling reduced motion mode', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Toggle Reduced Motion');
+    fireEvent.click(button);
+
+    expect(screen.getByTestId('reduced-motion')).toHaveTextContent('true');
+    expect(document.body).toHaveClass('reduced-motion');
+  });
+
+  it('allows toggling large text mode', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Toggle Large Text');
+    fireEvent.click(button);
+
+    expect(screen.getByTestId('large-text')).toHaveTextContent('true');
+    expect(document.body).toHaveClass('large-text');
+  });
+
+  it('detects keyboard usage', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    // Simulate Tab key press
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Tab' });
+    });
+
+    expect(screen.getByTestId('keyboard-user')).toHaveTextContent('true');
+    expect(document.body).toHaveClass('keyboard-user');
+
+    // Simulate mouse click
+    act(() => {
+      fireEvent.mouseDown(document);
+    });
+
+    expect(screen.getByTestId('keyboard-user')).toHaveTextContent('false');
+    expect(document.body).not.toHaveClass('keyboard-user');
+  });
+
+  it('creates ARIA live regions', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const politeRegion = document.getElementById('qwickapps-aria-live-polite');
+    const assertiveRegion = document.getElementById('qwickapps-aria-live-assertive');
+
+    expect(politeRegion).toBeInTheDocument();
+    expect(politeRegion).toHaveAttribute('aria-live', 'polite');
+    expect(assertiveRegion).toBeInTheDocument();
+    expect(assertiveRegion).toHaveAttribute('aria-live', 'assertive');
+  });
+
+  it('handles polite announcements', async () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Announce Polite');
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      const politeRegion = document.getElementById('qwickapps-aria-live-polite');
+      expect(politeRegion).toHaveTextContent('Polite message');
+    });
+  });
+
+  it('handles assertive announcements', async () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Announce Assertive');
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      const assertiveRegion = document.getElementById('qwickapps-aria-live-assertive');
+      expect(assertiveRegion).toHaveTextContent('Assertive message');
+    });
+  });
+
+  it('manages accessibility issues', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    // Add an issue
+    const addButton = screen.getByText('Add Issue');
+    fireEvent.click(addButton);
+    expect(screen.getByTestId('issues-count')).toHaveTextContent('1');
+
+    // Clear issues
+    const clearButton = screen.getByText('Clear Issues');
+    fireEvent.click(clearButton);
+    expect(screen.getByTestId('issues-count')).toHaveTextContent('0');
+  });
+
+  it('runs accessibility audit when enabled', async () => {
+    render(
+      <AccessibilityProvider enableAudit={true}>
+        <TestComponent />
+        {/* Add elements that will trigger audit issues */}
+        <img src="test.jpg" />
+        <button></button>
+        <input type="text" />
+      </AccessibilityProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('issues-count')).not.toHaveTextContent('0');
+    }, { timeout: 2000 });
+  });
+
+  it('does not run audit when disabled', () => {
+    render(
+      <AccessibilityProvider enableAudit={false}>
+        <TestComponent />
+        <img src="test.jpg" />
+        <button></button>
+        <input type="text" />
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('issues-count')).toHaveTextContent('0');
+  });
+
+  it('detects system high contrast preference', () => {
+    // Mock high contrast preference
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn((query) => ({
+        matches: query === '(prefers-contrast: high)',
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      })),
+    });
+
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('high-contrast')).toHaveTextContent('true');
+  });
+
+  it('detects system reduced motion preference', () => {
+    // Mock reduced motion preference
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn((query) => ({
+        matches: query === '(prefers-reduced-motion: reduce)',
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      })),
+    });
+
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('reduced-motion')).toHaveTextContent('true');
+  });
+
+  it('throws error when hook is used outside provider', () => {
+    // Suppress console.error for this test
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrow('useAccessibility must be used within an AccessibilityProvider');
+
+    spy.mockRestore();
+  });
+});