@qwickapps/react-framework 1.3.2 → 1.3.4

package/src/components/layout/CollapsibleLayout/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * CollapsibleLayout Component Exports
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { default } from './CollapsibleLayout';
+export { 
+  CollapsibleLayout, 
+  CollapsibleLayoutView,
+  useCollapsibleState,
+} from './CollapsibleLayout';
+export type { 
+  CollapsibleLayoutProps, 
+  CollapsibleLayoutViewProps, 
+  UseCollapsibleLayoutState,
+} from './CollapsibleLayout';

package/src/components/layout/index.ts

@@ -10,4 +10,7 @@ export { GridLayout } from './GridLayout';
 export type { GridLayoutProps } from './GridLayout';
 
 export { GridCell } from './GridCell';
-export type { GridCellProps } from './GridCell';
+export type { GridCellProps } from './GridCell';
+
+export { CollapsibleLayout, CollapsibleLayoutView, useCollapsibleState } from './CollapsibleLayout';
+export type { CollapsibleLayoutProps, CollapsibleLayoutViewProps, UseCollapsibleLayoutState } from './CollapsibleLayout';

package/src/components/pages/FormPage.tsx

@@ -93,7 +93,7 @@ export const FormPage: React.FC<FormPageProps> = ({
       title={title}
       description={description}
       coverImage={coverImage}
-      form={form}
+      children={form}
       footer={footer}
       status={status}
       message={message}

package/src/schemas/CollapsibleLayoutSchema.ts

@@ -0,0 +1,276 @@
+/**
+ * CollapsibleLayout Schema - Data model for collapsible layout component
+ * 
+ * Advanced expandable/collapsible container with header controls, animations,
+ * content management, and state persistence capabilities.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { 
+  Schema, 
+  Field, 
+  Editor, 
+  Model, 
+  FieldType 
+} from '@qwickapps/schema';
+import { IsOptional, IsString, IsBoolean, IsIn } from 'class-validator';
+
+@Schema('CollapsibleLayout', '1.0.0')
+export class CollapsibleLayoutModel extends Model {
+  
+  // ========================================
+  // Core Collapse Control
+  // ========================================
+  
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Collapsed',
+    description: 'Whether the layout is currently collapsed'
+  })
+  @IsOptional()
+  @IsBoolean()
+  collapsed?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Default Collapsed',
+    description: 'Initial collapsed state for uncontrolled usage'
+  })
+  @IsOptional()
+  @IsBoolean()
+  defaultCollapsed?: boolean;
+  
+  // ========================================
+  // Enhanced Header Configuration
+  // ========================================
+  
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Main title displayed in the header',
+    placeholder: 'Enter title...'
+  })
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Subtitle',
+    description: 'Secondary text displayed below the title',
+    placeholder: 'Enter subtitle...'
+  })
+  @IsOptional()
+  @IsString()
+  subtitle?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Lead Icon',
+    description: 'Icon displayed before the title (icon identifier or HTML)',
+    placeholder: 'Icon identifier...'
+  })
+  @IsOptional()
+  @IsString()
+  leadIcon?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Header Actions',
+    description: 'Additional controls displayed in header (HTML/React content)',
+    placeholder: 'Enter header actions HTML...'
+  })
+  @IsOptional()
+  @IsString()
+  headerActions?: string;
+  
+  // ========================================
+  // Content Management
+  // ========================================
+  
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Collapsed View',
+    description: 'Summary content shown when collapsed (HTML supported)',
+    placeholder: 'Enter collapsed view content...'
+  })
+  @IsOptional()
+  @IsString()
+  collapsedView?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Content',
+    description: 'Main content shown when expanded (HTML supported)',
+    placeholder: 'Enter main content...'
+  })
+  @IsOptional()
+  @IsString()
+  children?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Footer View',
+    description: 'Always visible footer content (HTML supported)',
+    placeholder: 'Enter footer content...'
+  })
+  @IsOptional()
+  @IsString()
+  footerView?: string;
+  
+  // ========================================
+  // Advanced Features
+  // ========================================
+  
+  @Field({ defaultValue: 'header' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Trigger Area',
+    description: 'Area that responds to clicks for toggle functionality',
+    validation: {
+      options: [
+        { label: 'Button Only', value: 'button' },
+        { label: 'Header Area', value: 'header' },
+        { label: 'Button and Header', value: 'both' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['button', 'header', 'both'])
+  triggerArea?: 'button' | 'header' | 'both';
+
+  @Field({ defaultValue: 'slide' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Animation Style',
+    description: 'Animation variant for expand/collapse transitions',
+    validation: {
+      options: [
+        { label: 'Fade', value: 'fade' },
+        { label: 'Slide', value: 'slide' },
+        { label: 'Scale', value: 'scale' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['fade', 'slide', 'scale'])
+  animationStyle?: 'fade' | 'slide' | 'scale';
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Persist State',
+    description: 'Save collapse state in local storage'
+  })
+  @IsOptional()
+  @IsBoolean()
+  persistState?: boolean;
+  
+  // ========================================
+  // Icons Configuration
+  // ========================================
+  
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Collapsed Icon',
+    description: 'Icon shown when content is collapsed (default: VisibilityIcon)',
+    placeholder: 'Icon identifier...'
+  })
+  @IsOptional()
+  @IsString()
+  collapsedIcon?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Expanded Icon',
+    description: 'Icon shown when content is expanded (default: VisibilityOffIcon)',
+    placeholder: 'Icon identifier...'
+  })
+  @IsOptional()
+  @IsString()
+  expandedIcon?: string;
+  
+  // ========================================
+  // Layout Configuration
+  // ========================================
+  
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Divider',
+    description: 'Show divider lines between header, content, and footer sections'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showDivider?: boolean;
+  
+  // ========================================
+  // Framework Integration
+  // ========================================
+  
+  @Field({ defaultValue: 'default' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Variant',
+    description: 'Visual style variant for the layout container',
+    validation: {
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Outlined', value: 'outlined' },
+        { label: 'Elevated', value: 'elevated' },
+        { label: 'Filled', value: 'filled' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['default', 'outlined', 'elevated', 'filled'])
+  variant?: 'default' | 'outlined' | 'elevated' | 'filled';
+
+  @Field({ defaultValue: 'comfortable' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Header Spacing',
+    description: 'Padding/spacing within the header area',
+    validation: {
+      options: [
+        { label: 'Compact', value: 'compact' },
+        { label: 'Comfortable', value: 'comfortable' },
+        { label: 'Spacious', value: 'spacious' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['compact', 'comfortable', 'spacious'])
+  headerSpacing?: 'compact' | 'comfortable' | 'spacious';
+
+  @Field({ defaultValue: 'comfortable' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Content Spacing',
+    description: 'Padding/spacing within the content area',
+    validation: {
+      options: [
+        { label: 'Compact', value: 'compact' },
+        { label: 'Comfortable', value: 'comfortable' },
+        { label: 'Spacious', value: 'spacious' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['compact', 'comfortable', 'spacious'])
+  contentSpacing?: 'compact' | 'comfortable' | 'spacious';
+}
+
+export default CollapsibleLayoutModel;

package/src/schemas/SwitchInputFieldSchema.ts

@@ -0,0 +1,99 @@
+/**
+ * SwitchInputField Schema - Data model for switch input field component
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { 
+  Schema, 
+  Field, 
+  Editor, 
+  Model, 
+  FieldType 
+} from '@qwickapps/schema';
+import { IsOptional, IsString, IsBoolean } from 'class-validator';
+
+@Schema('SwitchInputField', '1.0.0')
+export class SwitchInputFieldModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'The label text for the switch'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Checked',
+    description: 'Whether the switch is checked'
+  })
+  @IsOptional()
+  @IsBoolean()
+  checked?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Required',
+    description: 'Whether the field is required'
+  })
+  @IsOptional()
+  @IsBoolean()
+  required?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Whether the field is disabled'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Error',
+    description: 'Error message to display'
+  })
+  @IsOptional()
+  @IsString()
+  error?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Helper Text',
+    description: 'Helper text to display below the switch'
+  })
+  @IsOptional()
+  @IsString()
+  helperText?: string;
+
+  @Field({ defaultValue: 'medium' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Size',
+    description: 'Size of the switch'
+  })
+  @IsOptional()
+  @IsString()
+  size?: 'small' | 'medium';
+
+  @Field({ defaultValue: 'primary' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Color',
+    description: 'Color theme of the switch'
+  })
+  @IsOptional()
+  @IsString()
+  color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+}
+
+export default SwitchInputFieldModel;

package/src/stories/AccessibilityProvider.stories.tsx

@@ -0,0 +1,284 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccessibilityProvider, useAccessibility } from '../components/AccessibilityProvider';
+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 [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>
+
+      {/* 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>
+
+      {/* 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>
+  );
+};
+
+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',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with full demo
+export const Default: Story = {
+  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.',
+      },
+    },
+  },
+};
+
+// 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.',
+      },
+    },
+  },
+};