@qwickapps/react-framework 1.3.5 → 1.4.0

package/src/components/buttons/Button.tsx

@@ -14,12 +14,22 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { Button as MuiButton, ButtonProps as MuiButtonProps, CircularProgress, Paper, Typography } from '@mui/material';
 import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
 import { useDataBinding } from '../../hooks';
 import ButtonModel from '../../schemas/ButtonSchema';
+import { ModelView } from '../base/ModelView';
+
+// Action serialization pattern for button clicks
+export interface ButtonAction {
+  type: 'navigate' | 'submit' | 'custom' | 'external';
+  url?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  form?: string;
+  customHandler?: string;
+}
 
 type ButtonViewProps = ModelProps<ButtonModel> & {
   /** Icon to display (before text) */
@@ -30,6 +40,8 @@ type ButtonViewProps = ModelProps<ButtonModel> & {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Button content when using children */
   children?: React.ReactNode;
+  /** Serializable action descriptor for buttons */
+  action?: ButtonAction;
 };
 
 export interface ButtonProps extends ButtonViewProps, WithDataBinding {}
@@ -45,6 +57,7 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props,
     href,
     target = '_self',
     onClick,
+    action,
     disabled = false,
     loading = false,
     fullWidth = false,
@@ -90,7 +103,64 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props,
     }
   };
 
-  // Determine if this should be a link
+  // Handle action serialization pattern for onClick
+  const handleActionClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    if (action) {
+      event.preventDefault();
+      
+      switch (action.type) {
+        case 'navigate':
+          if (action.url) {
+            if (action.target === '_blank') {
+              window.open(action.url, '_blank', 'noopener,noreferrer');
+            } else {
+              // Try to use React Router navigation if available
+              try {
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                const navigate = require('react-router-dom').useNavigate();
+                navigate(action.url);
+              } catch {
+                // Fallback to regular navigation
+                window.location.href = action.url;
+              }
+            }
+          }
+          break;
+          
+        case 'submit':
+          if (action.form) {
+            const form = document.getElementById(action.form);
+            if (form instanceof HTMLFormElement) {
+              form.requestSubmit();
+            }
+          }
+          break;
+          
+        case 'external':
+          if (action.url) {
+            window.open(action.url, action.target || '_blank', 'noopener,noreferrer');
+          }
+          break;
+          
+        case 'custom':
+          if (action.customHandler && typeof window !== 'undefined') {
+            // Look for custom handler function on window
+            const handler = (window as any)[action.customHandler];
+            if (typeof handler === 'function') {
+              handler(event);
+            }
+          }
+          break;
+      }
+    }
+    
+    // Call original onClick if provided
+    if (onClick) {
+      onClick(event);
+    }
+  }, [action, onClick]);
+
+  // Determine if this should be a link (prioritize href over action)
   const isLink = Boolean(href && !disabled && !loading);
 
   // Base button props
@@ -141,10 +211,10 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props,
     );
   }
 
-  // Button-specific props
+  // Button-specific props with action handling
   const buttonProps = {
     ...baseProps,
-    onClick: disabled || loading ? undefined : onClick,
+    onClick: disabled || loading ? undefined : (action ? handleActionClick : onClick),
   };
 
   return (
@@ -156,21 +226,122 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props,
 
 ButtonView.displayName = 'ButtonView';
 
-/**
- * Button component with data binding support
- * Supports both traditional props and dataSource-driven rendering
- */
-function Button(props: ButtonProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class Button extends ModelView<ButtonProps, ButtonModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'Button';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <Button {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      label: this.props.label,
+      variant: this.props.variant,
+      buttonSize: this.props.buttonSize,
+      href: this.props.href,
+      target: this.props.target,
+      disabled: this.props.disabled,
+      loading: this.props.loading,
+      fullWidth: this.props.fullWidth,
+      // Include action pattern for click handlers
+      action: this.props.action
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // Button component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <ButtonView {...restProps} />;
   }
 
+  // Button component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <ButtonWithDataBinding {...this.props} />;
+  }
+
+  // Register HTML patterns that Button component can handle
+  static registerPatternHandlers(registry: any): void {
+    // Register button elements
+    if (!registry.hasPattern('button')) {
+      registry.registerPattern('button', Button.transformButton);
+    }
+    
+    // Register input type="button" elements
+    if (!registry.hasPattern('input[type="button"]')) {
+      registry.registerPattern('input[type="button"]', Button.transformInputButton);
+    }
+    
+    // Register input type="submit" elements
+    if (!registry.hasPattern('input[type="submit"]')) {
+      registry.registerPattern('input[type="submit"]', Button.transformSubmitButton);
+    }
+  }
+
+  // Transform button elements to Button component
+  private static transformButton(element: Element): any {
+    const variant = element.getAttribute('data-variant') || 
+                   (element.className.includes('btn-primary') ? 'primary' : 
+                    element.className.includes('btn-outlined') ? 'outlined' : 'secondary');
+    const disabled = element.hasAttribute('disabled');
+    const href = element.getAttribute('data-href');
+    const target = element.getAttribute('data-target');
+
+    return {
+      tagName: 'Button',
+      props: {
+        label: element.textContent || 'Button',
+        variant,
+        disabled,
+        href: href || undefined,
+        target: target || undefined
+      }
+    };
+  }
+
+  // Transform input type="button" elements to Button component
+  private static transformInputButton(element: Element): any {
+    const disabled = element.hasAttribute('disabled');
+    const value = element.getAttribute('value') || 'Button';
+
+    return {
+      tagName: 'Button',
+      props: {
+        label: value,
+        variant: 'secondary',
+        disabled
+      }
+    };
+  }
+
+  // Transform input type="submit" elements to Button component
+  private static transformSubmitButton(element: Element): any {
+    const disabled = element.hasAttribute('disabled');
+    const value = element.getAttribute('value') || 'Submit';
+
+    return {
+      tagName: 'Button',
+      props: {
+        label: value,
+        variant: 'primary',
+        disabled,
+        type: 'submit'
+      }
+    };
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function ButtonWithDataBinding(props: ButtonProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const bindingResult = useDataBinding<ButtonModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<ButtonModel>,
     ButtonModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
@@ -183,7 +354,6 @@ function Button(props: ButtonProps) {
   const { dataSource: _source, $loading, $error, $dataSource, $cached, cached, ...buttonProps } = bindingResult;
   const error = bindingResult.$error;
 
-
   // Show loading state while fetching data
   if (bindingLoading) {
     return (
@@ -229,5 +399,4 @@ function Button(props: ButtonProps) {
 // Mark as QwickApp component
 (Button as any)[QWICKAPP_COMPONENT] = true;
 
-export { Button };
 export default Button;

package/src/components/forms/FormBlock.tsx

@@ -1,17 +1,18 @@
 /**
- * FormBlock - Reusable form layout component
+ * FormBlock - Reusable form layout component with serialization support
  * 
- * Provides consistent layout for forms with:
- * - Optional header section (logo, title, subtitle)
- * - Form content area
- * - Status message area (info, success, warning, error)
- * - Optional footer section
+ * Features:
+ * - Complete form layout with header, content, and footer
+ * - Status message handling (info, success, warning, error)
+ * - Cover image and logo integration
  * - Data binding support for dynamic content
- * - Grid integration with useBaseProps
+ * - Full serialization support via ModelView
+ * - Consistent Material-UI styling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
+import React, { ReactElement } from 'react';
 import {
   Alert,
   Box,
@@ -23,12 +24,12 @@ import {
   useTheme,
 } from '@mui/material';
 import type { ModelProps, WithDataBinding } from '@qwickapps/schema';
-import React from 'react';
 import { useQwickApp } from '../../contexts/QwickAppContext';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import FormBlockModel from '../../schemas/FormBlockSchema';
 import CoverImageHeader from '../blocks/CoverImageHeader';
 import Logo from '../Logo';
+import { ModelView } from '../base/ModelView';
 
 type FormBlockViewProps = ModelProps<FormBlockModel> & {
   /**
@@ -223,21 +224,73 @@ function FormBlockView({
   );
 }
 
-/**
- * FormBlock component with data binding support
- * Supports both traditional props and dataSource-driven rendering
- */
-function FormBlock(props: FormBlockProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class FormBlock extends ModelView<FormBlockProps, FormBlockModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'FormBlock';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <FormBlock {...jsonData} />;
+  }
+  
+  // FormBlock components have nested ReactNode children (form content)
+  protected hasNestedComponents(children: React.ReactNode): boolean {
+    // FormBlock may contain other serializable components as children
+    return true;
+  }
+  
+  // Custom children serialization for FormBlock
+  protected serializeChildren(children: React.ReactNode): any {
+    // For FormBlock, children represent the form content which could be other components
+    // We need to handle this properly by checking if children contain serializable components
+    if (React.isValidElement(children) && (children.type as any).prototype?.toJson) {
+      // If it's a serializable component, serialize it
+      return (children.type as any).fromJson ? {
+        component: (children.type as any).tagName,
+        props: children.props
+      } : children;
+    }
+    
+    // For non-serializable children (regular JSX), extract text or return as-is
+    return super.serializeChildren(children);
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      title: this.props.title,
+      description: this.props.description,
+      status: this.props.status,
+      message: this.props.message,
+      maxWidth: this.props.maxWidth,
+      background: this.props.background,
+      backgroundImage: this.props.backgroundImage,
+      // header, coverImage, footer are ReactNode (handled by base serialization if needed)
+      // children is handled by serializeChildren override
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // FormBlock component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <FormBlockView {...restProps} />;
   }
 
+  // FormBlock component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <FormBlockWithDataBinding {...this.props} />;
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function FormBlockWithDataBinding(props: FormBlockProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const { dataSource: _source, loading, error, cached, ...formBlockProps } = useDataBinding<FormBlockModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<FormBlockModel>,
     FormBlockModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }

package/src/components/index.ts

@@ -2,6 +2,7 @@
  * All component props and exports available in QwickApps React Framework.
  * 
  * Includes:
+ * - Base classes and abstractions
  * - Buttons
  * - Form inputs
  * - Layout components
@@ -9,6 +10,7 @@
  * - Pages and scaffolding
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
+export * from './base';
 export * from './blocks';
 export * from './buttons';
 export * from './forms';
@@ -30,6 +32,9 @@ export type { LogoProps } from './Logo';
 export { default as QwickAppsLogo } from './QwickAppsLogo';
 export type { QwickAppsLogoProps } from './QwickAppsLogo';
 
+export { default as QwickIcon } from './QwickIcon';
+export type { QwickIconProps } from './QwickIcon';
+
 export { default as SafeSpan } from './SafeSpan';
 export type { SafeSpanProps } from './SafeSpan';
 

package/src/components/input/ChoiceInputField.tsx

@@ -1,16 +1,17 @@
 /**
- * ChoiceInputField - Dynamic option inputs management component
+ * ChoiceInputField - Dynamic option inputs management component with serialization support
  * 
- * Provides consistent interface for:
- * - Dynamic list of option inputs  
- * - Adding new options
- * - Rich text editing for each option
- * - Data binding support
+ * Features:
+ * - Complete dynamic option input management
+ * - Rich text editing for each option (via HtmlInputField)
+ * - Data binding support for dynamic content
+ * - Full serialization support via ModelView
+ * - Consistent Material-UI styling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import {
   Alert,
   Box,
@@ -20,10 +21,10 @@ import {
 } from '@mui/material';
 import { Add as AddIcon } from '@mui/icons-material';
 import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
-import { useDataBinding } from '../../hooks';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import HtmlInputField from './HtmlInputField';
 import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
+import { ModelView } from '../base/ModelView';
 
 type ChoiceInputFieldViewProps = ModelProps<ChoiceInputFieldModel> & {
   /** Handler for option value changes */
@@ -120,21 +121,50 @@ function ChoiceInputFieldView({
   );
 }
 
-/**
- * ChoiceInputField component with data binding support
- * Supports both traditional props and dataSource-driven rendering
- */
-function ChoiceInputField(props: ChoiceInputFieldProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class ChoiceInputField extends ModelView<ChoiceInputFieldProps, ChoiceInputFieldModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'ChoiceInputField';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <ChoiceInputField {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      label: this.props.label,
+      options: this.props.options,
+      disabled: this.props.disabled,
+      placeholder: this.props.placeholder,
+      optionLabelPrefix: this.props.optionLabelPrefix,
+      rows: this.props.rows,
+      addButtonText: this.props.addButtonText,
+      // Event handlers don't serialize
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // ChoiceInputField component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <ChoiceInputFieldView {...restProps} />;
   }
 
+  // ChoiceInputField component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <ChoiceInputFieldWithDataBinding {...this.props} />;
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function ChoiceInputFieldWithDataBinding(props: ChoiceInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const { dataSource: _source, loading, error, cached, ...choiceInputFieldProps } = useDataBinding<ChoiceInputFieldModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<ChoiceInputFieldModel>,
     ChoiceInputFieldModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }

package/src/components/input/HtmlInputField.tsx

@@ -1,17 +1,18 @@
 /**
- * HtmlInputField - Custom HTML text field with formatting controls
+ * HtmlInputField - Custom HTML text field with serialization support
  * 
- * Provides HTML editing capabilities with:
- * - Formatting toolbar (bold, italic, underline, code)
- * - HTML preview mode
- * - Help system with supported tags
+ * Features:
+ * - Complete HTML editing with formatting toolbar
+ * - HTML preview mode and help system
  * - HTML sanitization for security
- * - Data binding support
+ * - Data binding support for dynamic content
+ * - Full serialization support via ModelView
+ * - Consistent Material-UI styling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import {
   Box,
   TextField,
@@ -36,9 +37,9 @@ import {
 import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
 import SafeSpan from '../SafeSpan';
 import sanitizeHtml from 'sanitize-html';
-import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
-import { useDataBinding } from '../../hooks';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';
+import { ModelView } from '../base/ModelView';
 
 type HtmlInputFieldViewProps = ModelProps<HtmlInputFieldModel> & {
   /** Change handler */
@@ -258,21 +259,50 @@ function HtmlInputFieldView({
   );
 }
 
-/**
- * HtmlInputField component with data binding support
- * Supports both traditional props and dataSource-driven rendering
- */
-function HtmlInputField(props: HtmlInputFieldProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class HtmlInputField extends ModelView<HtmlInputFieldProps, HtmlInputFieldModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'HtmlInputField';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <HtmlInputField {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      label: this.props.label,
+      value: this.props.value,
+      required: this.props.required,
+      placeholder: this.props.placeholder,
+      multiline: this.props.multiline,
+      rows: this.props.rows,
+      disabled: this.props.disabled,
+      // Event handlers don't serialize
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // HtmlInputField component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <HtmlInputFieldView {...restProps} />;
   }
 
+  // HtmlInputField component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <HtmlInputFieldWithDataBinding {...this.props} />;
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function HtmlInputFieldWithDataBinding(props: HtmlInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const { dataSource: _source, loading, error, cached, ...htmlInputFieldProps } = useDataBinding<HtmlInputFieldModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<HtmlInputFieldModel>,
     HtmlInputFieldModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }