@qwickapps/react-framework 1.3.1 → 1.3.3

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+
+export interface BreadcrumbItem {
+	label: string;
+	href?: string;
+	icon?: React.ReactNode;
+	current?: boolean;
+}
+
+export interface BreadcrumbsProps {
+	items: BreadcrumbItem[];
+	separator?: React.ReactNode;
+	className?: string;
+	onNavigate?: (item: BreadcrumbItem, index: number) => void;
+	maxItems?: number;
+	showRoot?: boolean;
+}
+
+/**
+ * Generic Breadcrumbs component for navigation hierarchy
+ * 
+ * Features:
+ * - Accessible navigation with proper ARIA labels
+ * - Customizable separators and icons
+ * - Responsive design with item truncation
+ * - Support for custom navigation handlers
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ */
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+	items,
+	separator = '/',
+	className = '',
+	onNavigate,
+	maxItems,
+	showRoot = true
+}) => {
+	// Filter and prepare items
+	let displayItems = showRoot ? items : items.slice(1);
+	
+	// Handle max items with ellipsis
+	if (maxItems && displayItems.length > maxItems) {
+		const firstItems = displayItems.slice(0, 1);
+		const lastItems = displayItems.slice(-Math.max(1, maxItems - 2));
+		displayItems = [
+			...firstItems,
+			{ label: '...', href: undefined, current: false },
+			...lastItems
+		];
+	}
+
+	const handleItemClick = (e: React.MouseEvent, item: BreadcrumbItem, index: number) => {
+		if (onNavigate) {
+			e.preventDefault();
+			onNavigate(item, index);
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent, item: BreadcrumbItem, index: number) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			if (onNavigate) {
+				onNavigate(item, index);
+			} else if (item.href) {
+				window.location.href = item.href;
+			}
+		}
+	};
+
+	if (displayItems.length <= 1) {
+		return null;
+	}
+
+	return (
+		<nav
+			className={`breadcrumbs ${className}`}
+			role="navigation"
+			aria-label="Breadcrumb navigation"
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+				fontSize: '14px',
+				color: '#6b7280',
+				...defaultStyles.nav
+			}}
+		>
+			<ol 
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					listStyle: 'none',
+					margin: 0,
+					padding: 0,
+					gap: '8px'
+				}}
+			>
+				{displayItems.map((item, index) => {
+					const isLast = index === displayItems.length - 1;
+					const isClickable = (item.href || onNavigate) && !item.current && item.label !== '...';
+
+					return (
+						<li key={`${item.label}-${index}`} style={{ display: 'flex', alignItems: 'center' }}>
+							{isClickable ? (
+								<a
+									href={item.href}
+									onClick={(e) => handleItemClick(e, item, index)}
+									onKeyDown={(e) => handleKeyDown(e, item, index)}
+									style={{
+										...defaultStyles.link,
+										color: isLast ? '#374151' : '#6b7280',
+										textDecoration: 'none',
+										display: 'flex',
+										alignItems: 'center',
+										gap: '4px'
+									}}
+									tabIndex={0}
+									aria-current={item.current ? 'page' : undefined}
+								>
+									{item.icon && (
+										<span 
+											style={{ display: 'flex', alignItems: 'center' }}
+											aria-hidden="true"
+										>
+											{item.icon}
+										</span>
+									)}
+									<span>{item.label}</span>
+								</a>
+							) : (
+								<span
+									style={{
+										...defaultStyles.current,
+										color: isLast ? '#111827' : '#6b7280',
+										fontWeight: isLast ? 600 : 400,
+										display: 'flex',
+										alignItems: 'center',
+										gap: '4px'
+									}}
+									aria-current={item.current ? 'page' : undefined}
+								>
+									{item.icon && (
+										<span 
+											style={{ display: 'flex', alignItems: 'center' }}
+											aria-hidden="true"
+										>
+											{item.icon}
+										</span>
+									)}
+									<span>{item.label}</span>
+								</span>
+							)}
+
+							{!isLast && (
+								<span
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+										marginLeft: '8px',
+										color: '#d1d5db',
+										fontSize: '12px'
+									}}
+									aria-hidden="true"
+								>
+									{separator}
+								</span>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+		</nav>
+	);
+};
+
+// Default styles
+const defaultStyles = {
+	nav: {
+		padding: '8px 0'
+	},
+	link: {
+		transition: 'color 0.2s ease',
+		cursor: 'pointer',
+		borderRadius: '4px',
+		padding: '4px',
+		margin: '-4px'
+	},
+	current: {
+		padding: '4px'
+	}
+} as const;
+
+/**
+ * Hook for managing breadcrumb state
+ */
+export const useBreadcrumbs = () => {
+	const [breadcrumbs, setBreadcrumbs] = React.useState<BreadcrumbItem[]>([]);
+
+	const addBreadcrumb = React.useCallback((item: BreadcrumbItem) => {
+		setBreadcrumbs(prev => [...prev, item]);
+	}, []);
+
+	const removeBreadcrumb = React.useCallback((index: number) => {
+		setBreadcrumbs(prev => prev.filter((_, i) => i !== index));
+	}, []);
+
+	const setBreadcrumbsCurrent = React.useCallback((items: BreadcrumbItem[]) => {
+		setBreadcrumbs(items);
+	}, []);
+
+	const clearBreadcrumbs = React.useCallback(() => {
+		setBreadcrumbs([]);
+	}, []);
+
+	return {
+		breadcrumbs,
+		addBreadcrumb,
+		removeBreadcrumb,
+		setBreadcrumbs: setBreadcrumbsCurrent,
+		clearBreadcrumbs
+	};
+};
+
+export default Breadcrumbs;

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