@qwickapps/react-framework 1.3.2 → 1.3.4

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

@@ -0,0 +1,268 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Breadcrumbs, useBreadcrumbs, type BreadcrumbItem } from '../Breadcrumbs';
+
+// Test component for useBreadcrumbs hook
+const BreadcrumbHookTest = () => {
+  const { breadcrumbs, addBreadcrumb, removeBreadcrumb, setBreadcrumbs, clearBreadcrumbs } = useBreadcrumbs();
+
+  return (
+    <div>
+      <div data-testid="breadcrumb-count">{breadcrumbs.length}</div>
+      <button onClick={() => addBreadcrumb({ label: 'Test', href: '/test' })}>
+        Add Breadcrumb
+      </button>
+      <button onClick={() => removeBreadcrumb(0)}>
+        Remove First
+      </button>
+      <button onClick={() => setBreadcrumbs([{ label: 'Set', href: '/set' }])}>
+        Set Breadcrumbs
+      </button>
+      <button onClick={clearBreadcrumbs}>
+        Clear All
+      </button>
+    </div>
+  );
+};
+
+// Sample breadcrumb data
+const sampleBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Electronics', href: '/products/electronics', current: true },
+];
+
+describe('Breadcrumbs', () => {
+  it('renders breadcrumb items correctly', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} />);
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Products')).toBeInTheDocument();
+    expect(screen.getByText('Electronics')).toBeInTheDocument();
+  });
+
+  it('renders with proper ARIA attributes', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} />);
+
+    const nav = screen.getByRole('navigation');
+    expect(nav).toHaveAttribute('aria-label', 'Breadcrumb navigation');
+    
+    // Electronics has current: true, so it should be wrapped in a span with aria-current="page"
+    const currentItemText = screen.getByText('Electronics');
+    const currentItem = currentItemText.parentElement;
+    expect(currentItem?.tagName).toBe('SPAN');
+    expect(currentItem).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders custom separator', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} separator=">" />);
+    
+    const separators = screen.getAllByText('>');
+    expect(separators).toHaveLength(2); // Should have 2 separators for 3 items
+  });
+
+  it('applies custom className', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} className="custom-breadcrumbs" />);
+    
+    const nav = screen.getByRole('navigation');
+    expect(nav).toHaveClass('breadcrumbs', 'custom-breadcrumbs');
+  });
+
+  it('handles navigation clicks with onNavigate', () => {
+    const onNavigate = jest.fn();
+    render(<Breadcrumbs items={sampleBreadcrumbs} onNavigate={onNavigate} />);
+
+    const homeLink = screen.getByText('Home');
+    fireEvent.click(homeLink);
+
+    expect(onNavigate).toHaveBeenCalledWith(
+      sampleBreadcrumbs[0],
+      0
+    );
+  });
+
+  it('handles keyboard navigation', () => {
+    const onNavigate = jest.fn();
+    render(<Breadcrumbs items={sampleBreadcrumbs} onNavigate={onNavigate} />);
+
+    const homeLink = screen.getByText('Home');
+    
+    // Test Enter key
+    fireEvent.keyDown(homeLink, { key: 'Enter' });
+    expect(onNavigate).toHaveBeenCalledWith(sampleBreadcrumbs[0], 0);
+
+    // Test Space key
+    fireEvent.keyDown(homeLink, { key: ' ' });
+    expect(onNavigate).toHaveBeenCalledTimes(2);
+  });
+
+  it('truncates items when maxItems is set', () => {
+    const manyItems: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' },
+      { label: 'Level1', href: '/level1' },
+      { label: 'Level2', href: '/level2' },
+      { label: 'Level3', href: '/level3' },
+      { label: 'Level4', href: '/level4' },
+      { label: 'Current', href: '/current', current: true },
+    ];
+
+    render(<Breadcrumbs items={manyItems} maxItems={4} />);
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText('Current')).toBeInTheDocument();
+    
+    // Should not show middle items
+    expect(screen.queryByText('Level2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Level3')).not.toBeInTheDocument();
+  });
+
+  it('hides root item when showRoot is false', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} showRoot={false} />);
+
+    expect(screen.queryByText('Home')).not.toBeInTheDocument();
+    expect(screen.getByText('Products')).toBeInTheDocument();
+    expect(screen.getByText('Electronics')).toBeInTheDocument();
+  });
+
+  it('renders with icons when provided', () => {
+    const itemsWithIcons: BreadcrumbItem[] = [
+      { 
+        label: 'Home', 
+        href: '/', 
+        icon: <span data-testid="home-icon">🏠</span> 
+      },
+      { 
+        label: 'Products', 
+        href: '/products', 
+        icon: <span data-testid="products-icon">📦</span> 
+      },
+    ];
+
+    render(<Breadcrumbs items={itemsWithIcons} />);
+
+    expect(screen.getByTestId('home-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('products-icon')).toBeInTheDocument();
+  });
+
+  it('does not render when only one item or less', () => {
+    const { container } = render(<Breadcrumbs items={[{ label: 'Home', href: '/' }]} />);
+    expect(container.firstChild).toBeNull();
+
+    const { container: emptyContainer } = render(<Breadcrumbs items={[]} />);
+    expect(emptyContainer.firstChild).toBeNull();
+  });
+
+  it('renders non-clickable items correctly', () => {
+    const nonClickableItems: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' }, // Clickable: has href, not current
+      { label: 'Current', current: true }, // Non-clickable: current is true
+    ];
+
+    render(<Breadcrumbs items={nonClickableItems} />);
+
+    // Home should be clickable - find the parent element (the <a> tag)
+    const homeElement = screen.getByText('Home').parentElement;
+    expect(homeElement?.tagName).toBe('A');
+    
+    // Current should not be clickable - find the parent element (should be <span>)
+    const currentElement = screen.getByText('Current').parentElement;
+    expect(currentElement?.tagName).toBe('SPAN');
+  });
+
+  it('prevents navigation for ellipsis items', () => {
+    const onNavigate = jest.fn();
+    const manyItems: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' },
+      { label: 'Level1', href: '/level1' },
+      { label: 'Level2', href: '/level2' },
+      { label: 'Level3', href: '/level3' },
+      { label: 'Current', href: '/current', current: true },
+    ];
+
+    render(<Breadcrumbs items={manyItems} maxItems={3} onNavigate={onNavigate} />);
+
+    const ellipsis = screen.getByText('...');
+    fireEvent.click(ellipsis);
+
+    expect(onNavigate).not.toHaveBeenCalled();
+  });
+
+  it('handles default link behavior when no onNavigate is provided', () => {
+    // Create a mock for window.location.href
+    const originalLocation = window.location;
+    delete (window as any).location;
+    window.location = { ...originalLocation, href: '' } as any;
+
+    const itemsWithHref: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' },
+      { label: 'Current', href: '/current' }, // Need at least 2 items for breadcrumbs to render
+    ];
+
+    render(<Breadcrumbs items={itemsWithHref} />);
+
+    const homeLink = screen.getByText('Home');
+    fireEvent.keyDown(homeLink, { key: 'Enter' });
+
+    // Should attempt to navigate using href
+    expect(window.location.href).toBe('/');
+
+    // Restore original location
+    window.location = originalLocation;
+  });
+});
+
+describe('useBreadcrumbs hook', () => {
+  it('provides initial empty breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('0');
+  });
+
+  it('allows adding breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    const addButton = screen.getByText('Add Breadcrumb');
+    fireEvent.click(addButton);
+
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('1');
+  });
+
+  it('allows removing breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    // Add a breadcrumb first
+    const addButton = screen.getByText('Add Breadcrumb');
+    fireEvent.click(addButton);
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('1');
+
+    // Remove it
+    const removeButton = screen.getByText('Remove First');
+    fireEvent.click(removeButton);
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('0');
+  });
+
+  it('allows setting breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    const setButton = screen.getByText('Set Breadcrumbs');
+    fireEvent.click(setButton);
+
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('1');
+  });
+
+  it('allows clearing all breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    // Add multiple breadcrumbs
+    const addButton = screen.getByText('Add Breadcrumb');
+    fireEvent.click(addButton);
+    fireEvent.click(addButton);
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('2');
+
+    // Clear all
+    const clearButton = screen.getByText('Clear All');
+    fireEvent.click(clearButton);
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('0');
+  });
+});

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

@@ -0,0 +1,163 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ErrorBoundary, withErrorBoundary } from '../ErrorBoundary';
+
+// Test component that throws an error
+const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
+	if (shouldThrow) {
+		throw new Error('Test error');
+	}
+	return <div>No error</div>;
+};
+
+// Mock console.error to avoid noise in tests
+const originalError = console.error;
+beforeEach(() => {
+	console.error = jest.fn();
+});
+
+afterEach(() => {
+	console.error = originalError;
+});
+
+describe('ErrorBoundary', () => {
+	it('renders children when there is no error', () => {
+		render(
+			<ErrorBoundary>
+				<div>Test content</div>
+			</ErrorBoundary>
+		);
+
+		expect(screen.getByText('Test content')).toBeInTheDocument();
+	});
+
+	it('renders error UI when child component throws', () => {
+		render(
+			<ErrorBoundary>
+				<ThrowError shouldThrow={true} />
+			</ErrorBoundary>
+		);
+
+		expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+		expect(screen.getByText(/An unexpected error occurred/)).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Try Again' })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Refresh Page' })).toBeInTheDocument();
+	});
+
+	it('renders custom fallback UI when provided', () => {
+		const customFallback = <div>Custom error message</div>;
+
+		render(
+			<ErrorBoundary fallback={customFallback}>
+				<ThrowError shouldThrow={true} />
+			</ErrorBoundary>
+		);
+
+		expect(screen.getByText('Custom error message')).toBeInTheDocument();
+		expect(screen.queryByText('Something went wrong')).not.toBeInTheDocument();
+	});
+
+	it('calls onError callback when error occurs', () => {
+		const onError = jest.fn();
+
+		render(
+			<ErrorBoundary onError={onError}>
+				<ThrowError shouldThrow={true} />
+			</ErrorBoundary>
+		);
+
+		expect(onError).toHaveBeenCalledTimes(1);
+		expect(onError).toHaveBeenCalledWith(
+			expect.any(Error),
+			expect.objectContaining({
+				componentStack: expect.any(String)
+			})
+		);
+	});
+
+	it('shows error details in development mode', () => {
+		const originalEnv = process.env.NODE_ENV;
+		process.env.NODE_ENV = 'development';
+
+		render(
+			<ErrorBoundary>
+				<ThrowError shouldThrow={true} />
+			</ErrorBoundary>
+		);
+
+		expect(screen.getByText(/Error Details \(Development Mode\)/)).toBeInTheDocument();
+
+		// Cleanup
+		process.env.NODE_ENV = originalEnv;
+	});
+
+	it('shows error details when showErrorDetails is true', () => {
+		render(
+			<ErrorBoundary showErrorDetails={true}>
+				<ThrowError shouldThrow={true} />
+			</ErrorBoundary>
+		);
+
+		expect(screen.getByText(/Error Details \(Development Mode\)/)).toBeInTheDocument();
+	});
+
+	it('resets error state when retry button is clicked', () => {
+		const TestComponent = () => {
+			const [shouldThrow, setShouldThrow] = React.useState(true);
+
+			React.useEffect(() => {
+				// After a delay, stop throwing errors
+				const timer = setTimeout(() => setShouldThrow(false), 100);
+				return () => clearTimeout(timer);
+			}, []);
+
+			return <ThrowError shouldThrow={shouldThrow} />;
+		};
+
+		render(
+			<ErrorBoundary>
+				<TestComponent />
+			</ErrorBoundary>
+		);
+
+		// Error UI should be shown
+		expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+
+		// Click retry
+		fireEvent.click(screen.getByRole('button', { name: 'Try Again' }));
+
+		// Should attempt to render children again
+		// Note: This test is limited because the component will likely throw again
+		// In a real scenario, you'd fix the underlying issue before retrying
+	});
+});
+
+describe('withErrorBoundary HOC', () => {
+	it('wraps component with ErrorBoundary', () => {
+		const TestComponent = () => <div>Test content</div>;
+		const WrappedComponent = withErrorBoundary(TestComponent);
+
+		render(<WrappedComponent />);
+
+		expect(screen.getByText('Test content')).toBeInTheDocument();
+	});
+
+	it('passes errorBoundary props to ErrorBoundary', () => {
+		const onError = jest.fn();
+		const TestComponent = () => <ThrowError shouldThrow={true} />;
+		const WrappedComponent = withErrorBoundary(TestComponent, { onError });
+
+		render(<WrappedComponent />);
+
+		expect(onError).toHaveBeenCalledTimes(1);
+	});
+
+	it('sets correct displayName', () => {
+		const TestComponent = () => <div>Test</div>;
+		TestComponent.displayName = 'TestComponent';
+
+		const WrappedComponent = withErrorBoundary(TestComponent);
+
+		expect(WrappedComponent.displayName).toBe('withErrorBoundary(TestComponent)');
+	});
+});

package/src/components/forms/FormBlock.tsx

@@ -46,7 +46,7 @@ type FormBlockViewProps = ModelProps<FormBlockModel> & {
   /**
    * Form content
    */
-  form?: React.ReactNode;
+  children?: React.ReactNode;
 
   /**
    * Footer content (links, additional text, etc.)
@@ -99,7 +99,7 @@ function FormBlockView({
   title,
   description,
   coverImage,
-  form,
+  children: form,
   footer,
   status,
   message,

package/src/components/index.ts

@@ -19,6 +19,9 @@ export * from './Scaffold';
 export * from './ResponsiveMenu';
 export * from './QwickApp';
 export * from './AccessibilityChecker';
+export * from './ErrorBoundary';
+export * from './AccessibilityProvider';
+export * from './Breadcrumbs';
 // DataDrivenSafeSpan functionality is now integrated into SafeSpan
 
 export { default as Logo } from './Logo';

package/src/components/input/SwitchInputField.tsx

@@ -0,0 +1,165 @@
+/**
+ * SwitchInputField - Switch toggle component with data binding support
+ * 
+ * Provides a standardized switch field with:
+ * - Consistent Material-UI styling
+ * - Data binding capabilities
+ * - Label and helper text support
+ * - Focus and error handling
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  Paper,
+  Switch,
+  Typography
+} from '@mui/material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import SwitchInputFieldModel from '../../schemas/SwitchInputFieldSchema';
+
+type SwitchInputFieldViewProps = ModelProps<SwitchInputFieldModel> & {
+  /** Change handler */
+  onChange?: (checked: boolean) => void;
+  /** Focus handler */
+  onFocus?: () => void;
+};
+
+export interface SwitchInputFieldProps extends SwitchInputFieldViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function SwitchInputFieldView({
+  label,
+  checked = false,
+  onChange,
+  onFocus,
+  required = false,
+  disabled = false,
+  error,
+  helperText,
+  size = 'medium',
+  color = 'primary',
+  ...restProps
+}: SwitchInputFieldViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(event.target.checked);
+    }
+  };
+
+  return (
+    <FormControl
+      {...htmlProps}
+      {...styleProps}
+      error={!!error}
+      required={required}
+      disabled={disabled}
+      sx={{
+        display: 'block',
+        ...styleProps.sx
+      }}
+    >
+      <FormControlLabel
+        control={
+          <Switch
+            checked={checked}
+            onChange={handleChange}
+            onFocus={onFocus}
+            size={size}
+            color={color}
+            disabled={disabled}
+          />
+        }
+        label={label}
+        disabled={disabled}
+      />
+      {(error || helperText) && (
+        <FormHelperText>
+          {error || helperText}
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+}
+
+/**
+ * SwitchInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function SwitchInputField(props: SwitchInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <SwitchInputFieldView {...restProps} />;
+  }
+
+  // Use data binding
+  const bindingResult = useDataBinding<SwitchInputFieldModel>(
+    dataSource,
+    restProps as Partial<SwitchInputFieldModel>,
+    SwitchInputFieldModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+  
+  // Check if we're still loading data using the metadata properties
+  const bindingLoading = bindingResult.$loading;
+  
+  // Extract all the actual switch properties (excluding metadata)
+  const { dataSource: _source, $loading, $error, $dataSource, $cached, cached, ...switchInputFieldProps } = bindingResult;
+  const error = bindingResult.$error;
+
+  // Show loading state while fetching data
+  if (bindingLoading) {
+    return (
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 2,
+          textAlign: 'center'
+        }}
+      >
+        <Typography variant="body2">Loading SwitchInputField...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading switch field configuration from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading switch input field:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Paper
+          variant="outlined"
+          sx={{
+            p: 2,
+            textAlign: 'center',
+            borderColor: 'error.main'
+          }}
+        >
+          <Typography variant="body2" color="error">
+            Error loading switch field: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <SwitchInputFieldView {...switchInputFieldProps} />;
+}
+
+// Mark as QwickApp component
+(SwitchInputField as any)[QWICKAPP_COMPONENT] = true;
+
+export default SwitchInputField;

package/src/components/input/index.ts

@@ -7,11 +7,13 @@
 export { default as ChoiceInputField } from './ChoiceInputField';
 export { default as HtmlInputField } from './HtmlInputField';
 export { default as SelectInputField } from './SelectInputField';
+export { default as SwitchInputField } from './SwitchInputField';
 export { default as TextField } from './TextField';
 export { default as TextInputField } from './TextInputField';
 
 export type { ChoiceInputFieldProps } from './ChoiceInputField';
 export type { HtmlInputFieldProps } from './HtmlInputField';
 export type { SelectInputFieldProps, SelectOption } from './SelectInputField';
+export type { SwitchInputFieldProps } from './SwitchInputField';
 export type { TextFieldProps } from './TextField';
 export type { TextInputFieldProps } from './TextInputField';