@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/schemas/transformers/registry.ts

@@ -0,0 +1,72 @@
+/**
+ * Component Registration - Central registry for serializable components
+ * 
+ * This file registers all components that implement the Serializable interface
+ * with the ComponentTransformer system. Components must be registered here
+ * to support JSON serialization/deserialization functionality.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { ComponentTransformer } from './ComponentTransformer';
+import { Code } from '../../components/blocks/Code';
+import { Section } from '../../components/blocks/Section';
+import { Image } from '../../components/blocks/Image';
+import { Text } from '../../components/blocks/Text';
+import { HeroBlock } from '../../components/blocks/HeroBlock';
+import Button from '../../components/buttons/Button';
+import { GridLayout } from '../../components/layout/GridLayout';
+import { GridCell } from '../../components/layout/GridCell';
+import { TextInputField } from '../../components/input/TextInputField';
+import { SelectInputField } from '../../components/input/SelectInputField';
+import { HtmlInputField } from '../../components/input/HtmlInputField';
+import { ChoiceInputField } from '../../components/input/ChoiceInputField';
+import { SwitchInputField } from '../../components/input/SwitchInputField';
+import { FormBlock } from '../../components/forms/FormBlock';
+
+/**
+ * Register all serializable components with the ComponentTransformer
+ * This function should be called once during application initialization
+ */
+export function registerSerializableComponents(): void {
+  // Register Code component - First production component with serialization support
+  ComponentTransformer.registerComponent(Code as any);
+  
+  // Register Section component - Layout container component with child serialization support
+  ComponentTransformer.registerComponent(Section as any);
+  
+  // Register Button component - Interactive component with action serialization support
+  ComponentTransformer.registerComponent(Button as any);
+  
+  // Register Image component - Display component with comprehensive image handling and serialization support
+  ComponentTransformer.registerComponent(Image as any);
+  
+  // Register Text component - Typography component with comprehensive text styling and serialization support
+  ComponentTransformer.registerComponent(Text as any);
+  
+  // Register HeroBlock component - Full-width hero section with nested component serialization support
+  ComponentTransformer.registerComponent(HeroBlock as any);
+  
+  // Register GridLayout component - Flexible grid layout with nested component serialization support
+  ComponentTransformer.registerComponent(GridLayout as any);
+  
+  // Register GridCell component - Grid cell wrapper with nested component serialization support
+  ComponentTransformer.registerComponent(GridCell as any);
+  
+  // Register Form Components - Complete form field components with serialization support
+  ComponentTransformer.registerComponent(TextInputField as any);
+  ComponentTransformer.registerComponent(SelectInputField as any);
+  ComponentTransformer.registerComponent(HtmlInputField as any);
+  ComponentTransformer.registerComponent(ChoiceInputField as any);
+  ComponentTransformer.registerComponent(SwitchInputField as any);
+  ComponentTransformer.registerComponent(FormBlock as any);
+  
+  // Future components will be registered here as they implement Serializable
+  // etc.
+}
+
+/**
+ * Auto-registration: Register components immediately when this module is imported
+ * This ensures components are available for serialization as soon as the module loads
+ */
+registerSerializableComponents();

package/src/schemas/types/Serializable.ts

@@ -0,0 +1,51 @@
+/**
+ * Serializable Interface - Component Serialization System Foundation
+ * 
+ * Defines the contract for components that can be serialized to/from JSON
+ * for "WebView for React" functionality.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { ReactElement } from 'react';
+
+/**
+ * Interface for components that support JSON serialization
+ * Components implementing this interface can be transformed between
+ * React elements and serializable JSON data structures
+ */
+export interface Serializable {
+  /**
+   * Convert component instance to JSON data
+   * @returns Serializable data structure
+   */
+  toJson(): any;
+}
+
+/**
+ * Interface for serializable component constructor
+ * Defines static methods and properties required for component classes
+ * Components implementing this interface must declare their own identity
+ */
+export interface SerializableConstructor {
+  /**
+   * Component's unique tag name for serialization
+   * Must be unique across all registered components
+   */
+  readonly tagName: string;
+  
+  /**
+   * Component's version for serialization format compatibility
+   * Should follow semantic versioning (e.g., "1.0.0")
+   */
+  readonly version: string;
+  
+  /**
+   * Convert JSON data to a React element
+   * @param jsonData - Serialized component data
+   * @returns React element representing the component
+   */
+  fromJson(jsonData: any): ReactElement;
+  
+  new (...args: any[]): Serializable;
+}

package/src/stories/AccessibilityProvider.stories.tsx

@@ -4,220 +4,220 @@ import React from 'react';
 
 // Demo component that uses accessibility features
 const AccessibilityDemo = () => {
-  const {
-    highContrast,
-    reducedMotion,
-    largeText,
-    isKeyboardUser,
-    issues,
-    setHighContrast,
-    setReducedMotion,
-    setLargeText,
-    announce,
-    announcePolite,
-    announceAssertive,
-    runAudit,
-    clearIssues
-  } = useAccessibility();
+ const {
+ highContrast,
+ reducedMotion,
+ largeText,
+ isKeyboardUser,
+ issues,
+ setHighContrast,
+ setReducedMotion,
+ setLargeText,
+ announce,
+ announcePolite,
+ announceAssertive,
+ runAudit,
+ clearIssues
+ } = useAccessibility();
 
-  const [message, setMessage] = React.useState('');
+ const [message, setMessage] = React.useState('');
 
-  return (
-    <div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
-      <h2>Accessibility Provider Demo</h2>
-      
-      {/* System Status */}
-      <div style={{ 
-        marginBottom: '2rem', 
-        padding: '1rem', 
-        background: '#f5f5f5', 
-        borderRadius: '8px' 
-      }}>
-        <h3>System Status</h3>
-        <ul style={{ listStyle: 'none', padding: 0 }}>
-          <li>🎨 High Contrast: {highContrast ? '✅ Enabled' : '❌ Disabled'}</li>
-          <li>⚡ Reduced Motion: {reducedMotion ? '✅ Enabled' : '❌ Disabled'}</li>
-          <li>🔤 Large Text: {largeText ? '✅ Enabled' : '❌ Disabled'}</li>
-          <li>⌨️ Keyboard User: {isKeyboardUser ? '✅ Yes' : '❌ No'}</li>
-          <li>🚨 Issues Found: {issues.length}</li>
-        </ul>
-      </div>
+ return (
+ <div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
+ <h2>Accessibility Provider Demo</h2>
+ 
+ {/* System Status */}
+ <div style={{ 
+ marginBottom: '2rem', 
+ padding: '1rem', 
+ background: '#f5f5f5', 
+ borderRadius: '8px' 
+ }}>
+ <h3>System Status</h3>
+ <ul style={{ listStyle: 'none', padding: 0 }}>
+ <li> High Contrast: {highContrast ? '✅ Enabled' : '❌ Disabled'}</li>
+ <li> Reduced Motion: {reducedMotion ? '✅ Enabled' : '❌ Disabled'}</li>
+ <li>🔤 Large Text: {largeText ? '✅ Enabled' : '❌ Disabled'}</li>
+ <li>⌨ Keyboard User: {isKeyboardUser ? '✅ Yes' : '❌ No'}</li>
+ <li>🚨 Issues Found: {issues.length}</li>
+ </ul>
+ </div>
 
-      {/* Controls */}
-      <div style={{ marginBottom: '2rem' }}>
-        <h3>Accessibility Controls</h3>
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-          <button
-            onClick={() => setHighContrast(!highContrast)}
-            style={{ 
-              padding: '0.5rem 1rem',
-              background: highContrast ? '#000' : '#007cba',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px'
-            }}
-          >
-            Toggle High Contrast
-          </button>
-          
-          <button
-            onClick={() => setReducedMotion(!reducedMotion)}
-            style={{ 
-              padding: '0.5rem 1rem',
-              background: reducedMotion ? '#666' : '#007cba',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px'
-            }}
-          >
-            Toggle Reduced Motion
-          </button>
-          
-          <button
-            onClick={() => setLargeText(!largeText)}
-            style={{ 
-              padding: '0.5rem 1rem',
-              background: largeText ? '#0073aa' : '#007cba',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              fontSize: largeText ? '1.2em' : '1em'
-            }}
-          >
-            Toggle Large Text
-          </button>
-        </div>
-      </div>
+ {/* Controls */}
+ <div style={{ marginBottom: '2rem' }}>
+ <h3>Accessibility Controls</h3>
+ <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+ <button
+ onClick={() => setHighContrast(!highContrast)}
+ style={{ 
+ padding: '0.5rem 1rem',
+ background: highContrast ? '#000' : '#007cba',
+ color: 'white',
+ border: 'none',
+ borderRadius: '4px'
+ }}
+ >
+ Toggle High Contrast
+ </button>
+ 
+ <button
+ onClick={() => setReducedMotion(!reducedMotion)}
+ style={{ 
+ padding: '0.5rem 1rem',
+ background: reducedMotion ? '#666' : '#007cba',
+ color: 'white',
+ border: 'none',
+ borderRadius: '4px'
+ }}
+ >
+ Toggle Reduced Motion
+ </button>
+ 
+ <button
+ onClick={() => setLargeText(!largeText)}
+ style={{ 
+ padding: '0.5rem 1rem',
+ background: largeText ? '#0073aa' : '#007cba',
+ color: 'white',
+ border: 'none',
+ borderRadius: '4px',
+ fontSize: largeText ? '1.2em' : '1em'
+ }}
+ >
+ Toggle Large Text
+ </button>
+ </div>
+ </div>
 
-      {/* Announcements */}
-      <div style={{ marginBottom: '2rem' }}>
-        <h3>Screen Reader Announcements</h3>
-        <div style={{ marginBottom: '1rem' }}>
-          <input
-            type="text"
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            placeholder="Type a message to announce..."
-            style={{ 
-              padding: '0.5rem', 
-              marginRight: '0.5rem', 
-              width: '300px',
-              border: '1px solid #ccc',
-              borderRadius: '4px'
-            }}
-          />
-        </div>
-        <div style={{ display: 'flex', gap: '0.5rem' }}>
-          <button
-            onClick={() => announcePolite(message || 'Polite announcement test')}
-            style={{ 
-              padding: '0.5rem 1rem',
-              background: '#28a745',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px'
-            }}
-          >
-            Announce Polite
-          </button>
-          
-          <button
-            onClick={() => announceAssertive(message || 'Assertive announcement test')}
-            style={{ 
-              padding: '0.5rem 1rem',
-              background: '#dc3545',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px'
-            }}
-          >
-            Announce Assertive
-          </button>
-        </div>
-      </div>
+ {/* Announcements */}
+ <div style={{ marginBottom: '2rem' }}>
+ <h3>Screen Reader Announcements</h3>
+ <div style={{ marginBottom: '1rem' }}>
+ <input
+ type="text"
+ value={message}
+ onChange={(e) => setMessage(e.target.value)}
+ placeholder="Type a message to announce..."
+ style={{ 
+ padding: '0.5rem', 
+ marginRight: '0.5rem', 
+ width: '300px',
+ border: '1px solid #ccc',
+ borderRadius: '4px'
+ }}
+ />
+ </div>
+ <div style={{ display: 'flex', gap: '0.5rem' }}>
+ <button
+ onClick={() => announcePolite(message || 'Polite announcement test')}
+ style={{ 
+ padding: '0.5rem 1rem',
+ background: '#28a745',
+ color: 'white',
+ border: 'none',
+ borderRadius: '4px'
+ }}
+ >
+ Announce Polite
+ </button>
+ 
+ <button
+ onClick={() => announceAssertive(message || 'Assertive announcement test')}
+ style={{ 
+ padding: '0.5rem 1rem',
+ background: '#dc3545',
+ color: 'white',
+ border: 'none',
+ borderRadius: '4px'
+ }}
+ >
+ Announce Assertive
+ </button>
+ </div>
+ </div>
 
-      {/* Audit Controls */}
-      <div style={{ marginBottom: '2rem' }}>
-        <h3>Accessibility Audit</h3>
-        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
-          <button
-            onClick={runAudit}
-            style={{ 
-              padding: '0.5rem 1rem',
-              background: '#6f42c1',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px'
-            }}
-          >
-            Run Audit
-          </button>
-          
-          <button
-            onClick={clearIssues}
-            style={{ 
-              padding: '0.5rem 1rem',
-              background: '#6c757d',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px'
-            }}
-          >
-            Clear Issues
-          </button>
-        </div>
-        
-        {issues.length > 0 && (
-          <div style={{ 
-            padding: '1rem', 
-            background: '#fff3cd', 
-            border: '1px solid #ffeaa7',
-            borderRadius: '8px' 
-          }}>
-            <h4>Accessibility Issues ({issues.length})</h4>
-            <ul>
-              {issues.map((issue, index) => (
-                <li key={index} style={{ color: issue.level === 'error' ? '#dc3545' : '#856404' }}>
-                  <strong>{issue.type}</strong>: {issue.message}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
+ {/* Audit Controls */}
+ <div style={{ marginBottom: '2rem' }}>
+ <h3>Accessibility Audit</h3>
+ <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+ <button
+ onClick={runAudit}
+ style={{ 
+ padding: '0.5rem 1rem',
+ background: '#6f42c1',
+ color: 'white',
+ border: 'none',
+ borderRadius: '4px'
+ }}
+ >
+ Run Audit
+ </button>
+ 
+ <button
+ onClick={clearIssues}
+ style={{ 
+ padding: '0.5rem 1rem',
+ background: '#6c757d',
+ color: 'white',
+ border: 'none',
+ borderRadius: '4px'
+ }}
+ >
+ Clear Issues
+ </button>
+ </div>
+ 
+ {issues.length > 0 && (
+ <div style={{ 
+ padding: '1rem', 
+ background: '#fff3cd', 
+ border: '1px solid #ffeaa7',
+ borderRadius: '8px' 
+ }}>
+ <h4>Accessibility Issues ({issues.length})</h4>
+ <ul>
+ {issues.map((issue, index) => (
+ <li key={index} style={{ color: issue.level === 'error' ? '#dc3545' : '#856404' }}>
+ <strong>{issue.type}</strong>: {issue.message}
+ </li>
+ ))}
+ </ul>
+ </div>
+ )}
+ </div>
 
-      {/* Test elements that might have accessibility issues */}
-      <div style={{ marginTop: '2rem', padding: '1rem', background: '#e9ecef', borderRadius: '8px' }}>
-        <h3>Test Elements for Audit</h3>
-        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50'%3E%3Crect width='100' height='50' fill='%23ddd'/%3E%3C/svg%3E" />
-        <button>Unlabeled Button</button>
-        <input type="text" placeholder="Unlabeled Input" />
-      </div>
-    </div>
-  );
+ {/* Test elements that might have accessibility issues */}
+ <div style={{ marginTop: '2rem', padding: '1rem', background: '#e9ecef', borderRadius: '8px' }}>
+ <h3>Test Elements for Audit</h3>
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50'%3E%3Crect width='100' height='50' fill='%23ddd'/%3E%3C/svg%3E" />
+ <button>Unlabeled Button</button>
+ <input type="text" placeholder="Unlabeled Input" />
+ </div>
+ </div>
+ );
 };
 
 const meta: Meta<typeof AccessibilityProvider> = {
-  title: 'Framework/AccessibilityProvider',
-  component: AccessibilityProvider,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Provides comprehensive accessibility context and utilities including system preference detection, keyboard navigation, ARIA announcements, and accessibility auditing.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    enableAudit: {
-      description: 'Whether to enable automatic accessibility auditing (defaults to development mode)',
-      control: 'boolean',
-    },
-    children: {
-      description: 'Child components that will have access to accessibility context',
-    },
-  },
+ title: 'Framework/AccessibilityProvider',
+ component: AccessibilityProvider,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Provides comprehensive accessibility context and utilities including system preference detection, keyboard navigation, ARIA announcements, and accessibility auditing.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ enableAudit: {
+ description: 'Whether to enable automatic accessibility auditing (defaults to development mode)',
+ control: 'boolean',
+ },
+ children: {
+ description: 'Child components that will have access to accessibility context',
+ },
+ },
 };
 
 export default meta;
@@ -225,60 +225,60 @@ type Story = StoryObj<typeof meta>;
 
 // Default story with full demo
 export const Default: Story = {
-  args: {
-    children: <AccessibilityDemo />,
-    enableAudit: true,
-  },
+ args: {
+ children: <AccessibilityDemo />,
+ enableAudit: true,
+ },
 };
 
 // Story showing basic usage without audit
 export const BasicUsage: Story = {
-  args: {
-    enableAudit: false,
-    children: (
-      <div style={{ padding: '2rem' }}>
-        <h2>Basic AccessibilityProvider Usage</h2>
-        <p>This provider automatically detects system preferences and manages keyboard navigation.</p>
-        <button>Try tabbing to this button</button>
-        <br /><br />
-        <input type="text" placeholder="Type here and use Tab key" />
-      </div>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Basic usage of AccessibilityProvider without auditing enabled.',
-      },
-    },
-  },
+ args: {
+ enableAudit: false,
+ children: (
+ <div style={{ padding: '2rem' }}>
+ <h2>Basic AccessibilityProvider Usage</h2>
+ <p>This provider automatically detects system preferences and manages keyboard navigation.</p>
+ <button>Try tabbing to this button</button>
+ <br /><br />
+ <input type="text" placeholder="Type here and use Tab key" />
+ </div>
+ ),
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Basic usage of AccessibilityProvider without auditing enabled.',
+ },
+ },
+ },
 };
 
 // Story demonstrating keyboard navigation
 export const KeyboardNavigation: Story = {
-  args: {
-    children: (
-      <div style={{ padding: '2rem' }}>
-        <h2>Keyboard Navigation Test</h2>
-        <p>Press Tab to navigate between elements. When using keyboard, focus indicators will be enhanced.</p>
-        <button>Button 1</button>
-        <br /><br />
-        <input type="text" placeholder="Input field" />
-        <br /><br />
-        <select>
-          <option>Option 1</option>
-          <option>Option 2</option>
-        </select>
-        <br /><br />
-        <a href="#" onClick={(e) => e.preventDefault()}>Link element</a>
-      </div>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Test keyboard navigation to see enhanced focus indicators when using Tab key.',
-      },
-    },
-  },
+ args: {
+ children: (
+ <div style={{ padding: '2rem' }}>
+ <h2>Keyboard Navigation Test</h2>
+ <p>Press Tab to navigate between elements. When using keyboard, focus indicators will be enhanced.</p>
+ <button>Button 1</button>
+ <br /><br />
+ <input type="text" placeholder="Input field" />
+ <br /><br />
+ <select>
+ <option>Option 1</option>
+ <option>Option 2</option>
+ </select>
+ <br /><br />
+ <a href="#" onClick={(e) => e.preventDefault()}>Link element</a>
+ </div>
+ ),
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Test keyboard navigation to see enhanced focus indicators when using Tab key.',
+ },
+ },
+ },
 };