@qwickapps/react-framework 1.3.5 → 1.4.0

package/src/components/blocks/CoverImageHeader.tsx

@@ -424,10 +424,15 @@ function CoverImageHeader(props: CoverImageHeaderProps) {
 
   // Convert HeaderActionModel[] to HeaderAction[] if actions exist
   const { actions: modelActions, ...viewProps } = coverImageHeaderProps;
-  const convertedActions: HeaderAction[] = modelActions ? modelActions.map(action => ({
-    ...action,
-    onClick: () => console.log(`Action clicked: ${action.id}`) // Default handler for data-driven actions
-  })) : [];
+  const convertedActions: HeaderAction[] = modelActions
+    ? modelActions
+        .filter(action => typeof action.id === 'string' && !!action.id)
+        .map(action => ({
+          ...action,
+          id: action.id as string,
+          onClick: () => console.log(`Action clicked: ${action.id}`) // Default handler for data-driven actions
+        }))
+    : [];
 
   return <CoverImageHeaderView {...viewProps} actions={convertedActions} />;
 }

package/src/components/blocks/FeatureCard.tsx

@@ -237,10 +237,9 @@ function FeatureCardView({
             <Button
               key={action.id}
               variant={action.variant || 'contained'}
-              color={action.color || 'primary'}
+              // color={action.color || 'primary'}
               disabled={action.disabled}
               onClick={action.onClick}
-              size="small"
             >
               {action.label}
             </Button>

package/src/components/blocks/FeatureGrid.tsx

@@ -140,7 +140,25 @@ function FeatureGrid(props: FeatureGridProps) {
     return null;
   }
 
-  return <FeatureGridView {...featureGridProps} />;
+  // Ensure features have a non-optional 'id'
+  const safeFeatures =
+    Array.isArray(featureGridProps.features)
+      ? featureGridProps.features.map((f, idx) => ({
+          ...f,
+          id: f.id ?? `feature-${idx}`,
+          title: f.title ?? '',
+          description: f.description ?? '',
+        }))
+      : featureGridProps.features;
+
+  // Ensure columns is one of the allowed values
+  const allowedColumns = [1, 2, 3, 4, 5, 6];
+  const columns =
+    allowedColumns.includes(featureGridProps.columns as number)
+      ? (featureGridProps.columns as 1 | 2 | 3 | 4 | 5 | 6)
+      : undefined;
+
+  return <FeatureGridView {...featureGridProps} features={safeFeatures} columns={columns} />;
 }
 
 export default FeatureGrid;

package/src/components/blocks/Footer.tsx

@@ -337,7 +337,19 @@ function Footer(props: FooterProps) {
     return null;
   }
 
-  return <FooterView {...footerProps} />;
+  // Map FooterSectionModel[] to FooterSection[] and ensure id is a string
+  const mappedSections =
+    footerProps.sections?.map(section => ({
+      ...section,
+      id: section.id ?? '', // fallback to empty string if id is undefined
+      items: section.items?.map(item => ({
+        ...item,
+        id: item.id ?? '', // fallback to empty string if id is undefined
+        label: item.label ?? '', // ensure label is always a string
+      })) ?? [],
+    })) ?? [];
+
+  return <FooterView {...footerProps} sections={mappedSections} />;
 }
 
 export default Footer;

package/src/components/blocks/HeroBlock.tsx

@@ -1,40 +1,44 @@
 /**
- * HeroBlock Component - Full-width hero section with data binding support
- *
- * Enhanced with data binding support through dataSource prop.
- *
- * Usage:
- * - Traditional: <HeroBlock title="Welcome" subtitle="Get started" actions={[...]} />
- * - Data-driven: <HeroBlock dataSource="pages.home.hero" />
+ * HeroBlock Component - Full-width hero section with serialization support
  *
  * Features:
  * - Responsive headline, subtitle, and actions
  * - Supports background images, gradients, and theme colors
  * - Overlay for image backgrounds
  * - Customizable height, alignment, and overlay opacity
+ * - Full serialization support via ModelView
+ * - Nested Button component serialization support
+ *
+ * Usage:
+ * - Traditional: <HeroBlock title="Welcome" subtitle="Get started" actions={[...]} />
+ * - Data-driven: <HeroBlock dataSource="pages.home.hero" />
+ * - Serializable: ComponentTransformer.serialize(<HeroBlock ... />)
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
 import { Box, Container, Stack, Typography, useTheme } from '@mui/material';
-import { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import React from 'react';
-import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
+import type { ModelProps, WithDataBinding } from '@qwickapps/schema';
+import React, { ReactElement, ReactNode } from 'react';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import HeroBlockModel from '../../schemas/HeroBlockSchema';
+import { ModelView } from '../base/ModelView';
 import { Button, ButtonProps } from '../buttons/Button';
 
-type HeroBlockViewProps = Partial<ModelProps<HeroBlockModel>> & WithBaseProps & {
+type HeroBlockViewProps = ModelProps<HeroBlockModel> & {
   /** Action buttons (data-driven) */
   actions?: ButtonProps[];
   /** Additional content below the text */
-  children?: React.ReactNode;
+  children?: ReactNode;
+  /** Click handler for the hero section */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
 };
 
 export interface HeroBlockProps extends HeroBlockViewProps, WithDataBinding {}
 
-/**
- * Core HeroBlock View component - handles hero section rendering
- */
+// View component - handles the actual rendering
 function HeroBlockView({
   title = '',
   subtitle,
@@ -230,17 +234,77 @@ function HeroBlockView({
   );
 }
 
-function HeroBlock(props: HeroBlockProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class HeroBlock extends ModelView<HeroBlockProps, HeroBlockModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'HeroBlock';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <HeroBlock {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      title: this.props.title,
+      subtitle: this.props.subtitle,
+      backgroundImage: this.props.backgroundImage,
+      backgroundGradient: this.props.backgroundGradient,
+      backgroundColor: this.props.backgroundColor,
+      textAlign: this.props.textAlign,
+      blockHeight: this.props.blockHeight,
+      overlayOpacity: this.props.overlayOpacity,
+      // Serialize actions array (ButtonProps)
+      actions: this.props.actions
+    };
+  }
+
+  // Override serializeChildren to handle nested Button components
+  protected serializeChildren(children: ReactNode): any {
+    if (typeof children === 'string') {
+      return children;
+    }
+    
+    // HeroBlock can contain complex nested content, but not necessarily other serializable components
+    // Handle the children as-is for now, since HeroBlock typically contains MUI Typography and Box elements
+    // The actions prop is handled separately in getComponentSpecificProps
+    if (children) {
+      // For HeroBlock, children are typically additional content (Typography, Box)
+      // These don't need component serialization, just text extraction
+      const { extractTextFromReactNode } = require('../../utils/reactUtils');
+      return extractTextFromReactNode(children);
+    }
+    
+    return undefined;
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // Indicate that HeroBlock doesn't contain nested serializable components in children
+  // (actions are handled separately via props)
+  protected hasNestedComponents(children: ReactNode): boolean {
+    return false;
+  }
+
+  // HeroBlock component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <HeroBlockView {...restProps} />;
   }
 
+  // HeroBlock component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <HeroBlockWithDataBinding {...this.props} />;
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function HeroBlockWithDataBinding(props: HeroBlockProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const { dataSource: _source, loading, error, cached, ...heroProps } = useDataBinding<HeroBlockModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<HeroBlockModel>,
     HeroBlockModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
@@ -277,4 +341,7 @@ function HeroBlock(props: HeroBlockProps) {
   return <HeroBlockView {...heroProps} />;
 }
 
+// Mark as QwickApp component
+(HeroBlock as any)[QWICKAPP_COMPONENT] = true;
+
 export default HeroBlock;

package/src/components/blocks/Image.tsx

@@ -0,0 +1,395 @@
+/**
+ * Image - Comprehensive image display component with serialization support
+ * 
+ * Features:
+ * - Responsive image handling with srcSet and sizes
+ * - Multiple fit modes and positioning options
+ * - Loading states and error handling
+ * - Accessibility support with proper alt text
+ * - Lazy loading support
+ * - Fallback image handling
+ * - Full serialization support via ModelView
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { ReactElement, useState, useCallback } from 'react';
+import { Box, Skeleton, Typography, useTheme } from '@mui/material';
+import { BrokenImage as BrokenImageIcon } from '@mui/icons-material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
+import ImageModel, { ImageFit, ImageLoading, ImagePosition } from '../../schemas/ImageSchema';
+import { ModelView } from '../base/ModelView';
+
+type ImageViewProps = ModelProps<ImageModel> & {
+  /** Click handler for the image */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+  /** Additional CSS class names */
+  className?: string;
+};
+
+export interface ImageProps extends ImageViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function ImageView({
+  src,
+  alt = '',
+  width,
+  height,
+  objectFit = 'cover',
+  objectPosition = 'center',
+  loading = 'lazy',
+  title,
+  draggable = false,
+  borderRadius,
+  showLoading = false,
+  showError = false,
+  fallbackSrc,
+  sizes,
+  srcSet,
+  loadingPlaceholder,
+  errorPlaceholder,
+  onClick,
+  style,
+  className,
+  ...restProps
+}: ImageViewProps) {
+  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
+  const theme = useTheme();
+
+  // Mark as QwickApp component
+  (ImageView as any)[QWICKAPP_COMPONENT] = true;
+
+  const [imageState, setImageState] = useState<'loading' | 'loaded' | 'error'>('loading');
+  const [currentSrc, setCurrentSrc] = useState(src);
+
+  const handleLoad = useCallback(() => {
+    setImageState('loaded');
+  }, []);
+
+  const handleError = useCallback(() => {
+    // Try fallback source if available and not already using it
+    if (fallbackSrc && currentSrc !== fallbackSrc) {
+      setCurrentSrc(fallbackSrc);
+      return;
+    }
+    setImageState('error');
+  }, [fallbackSrc, currentSrc]);
+
+  // Early return if no src provided
+  if (!src) {
+    if (showError) {
+      return (
+        <Box
+          {...htmlProps}
+          {...styleProps}
+          {...otherProps}
+          className={`image-error ${className || ''}`.trim()}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.palette.grey[100],
+            color: theme.palette.text.secondary,
+            width: width || 200,
+            height: height || 150,
+            borderRadius,
+            ...style
+          }}
+        >
+          {errorPlaceholder || (
+            <Box sx={{ textAlign: 'center' }}>
+              <BrokenImageIcon sx={{ fontSize: 48, mb: 1, opacity: 0.5 }} />
+              <Typography variant="body2" color="text.secondary">
+                No image source
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      );
+    }
+    return null;
+  }
+
+  // Loading state
+  if (imageState === 'loading' && showLoading) {
+    return (
+      <Box
+        {...htmlProps}
+        {...styleProps}
+        {...otherProps}
+        className={`image-loading ${className || ''}`.trim()}
+        style={{
+          width: width || '100%',
+          height: height || 200,
+          borderRadius,
+          ...style
+        }}
+      >
+        {loadingPlaceholder || (
+          <Skeleton
+            variant="rectangular"
+            width="100%"
+            height="100%"
+            sx={{ borderRadius }}
+          />
+        )}
+      </Box>
+    );
+  }
+
+  // Error state
+  if (imageState === 'error' && showError) {
+    return (
+      <Box
+        {...htmlProps}
+        {...styleProps}
+        {...otherProps}
+        className={`image-error ${className || ''}`.trim()}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.palette.grey[100],
+          color: theme.palette.text.secondary,
+          width: width || '100%',
+          height: height || 200,
+          borderRadius,
+          ...style
+        }}
+      >
+        {errorPlaceholder || (
+          <Box sx={{ textAlign: 'center', p: 2 }}>
+            <BrokenImageIcon sx={{ fontSize: 48, mb: 1, opacity: 0.5 }} />
+            <Typography variant="body2" color="text.secondary">
+              Failed to load image
+            </Typography>
+            {fallbackSrc && (
+              <Typography variant="caption" color="text.secondary">
+                Fallback image also failed
+              </Typography>
+            )}
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  const imageStyles: React.CSSProperties = {
+    display: 'block',
+    maxWidth: '100%',
+    height: 'auto',
+    objectFit,
+    objectPosition,
+    borderRadius,
+    cursor: onClick ? 'pointer' : 'default',
+    ...style
+  };
+
+  // Apply dimensions if provided
+  if (width) imageStyles.width = width;
+  if (height) imageStyles.height = height;
+
+  return (
+    <img
+      {...htmlProps}
+      {...styleProps}
+      {...otherProps}
+      src={currentSrc}
+      alt={alt}
+      width={width}
+      height={height}
+      loading={loading}
+      title={title}
+      draggable={draggable}
+      sizes={sizes}
+      srcSet={srcSet}
+      className={`image ${className || ''}`.trim()}
+      style={imageStyles}
+      onClick={onClick}
+      onLoad={handleLoad}
+      onError={handleError}
+    />
+  );
+}
+
+// Main component with data binding support and serialization capability
+export class Image extends ModelView<ImageProps, ImageModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'Image';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <Image {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      src: this.props.src,
+      alt: this.props.alt,
+      width: this.props.width,
+      height: this.props.height,
+      objectFit: this.props.objectFit,
+      objectPosition: this.props.objectPosition,
+      loading: this.props.loading,
+      title: this.props.title,
+      draggable: this.props.draggable,
+      borderRadius: this.props.borderRadius,
+      showLoading: this.props.showLoading,
+      showError: this.props.showError,
+      fallbackSrc: this.props.fallbackSrc,
+      sizes: this.props.sizes,
+      srcSet: this.props.srcSet,
+      // Note: loadingPlaceholder and errorPlaceholder are ReactNodes
+      // and will be handled by base serialization if needed
+    };
+  }
+
+  // Image component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
+    return <ImageView {...restProps} />;
+  }
+
+  // Image component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <ImageWithDataBinding {...this.props} />;
+  }
+
+  // Register HTML patterns that Image component can handle
+  static registerPatternHandlers(registry: any): void {
+    // Register img elements
+    if (!registry.hasPattern('img')) {
+      registry.registerPattern('img', Image.transformImage);
+    }
+    
+    // Register figure elements with img
+    if (!registry.hasPattern('figure img')) {
+      registry.registerPattern('figure img', Image.transformFigureImage);
+    }
+  }
+
+  // Transform img elements to Image component
+  private static transformImage(element: Element): any {
+    const src = element.getAttribute('src') || '';
+    const alt = element.getAttribute('alt') || '';
+    const width = element.getAttribute('width');
+    const height = element.getAttribute('height');
+    const loading = element.getAttribute('loading') as 'lazy' | 'eager' | undefined;
+
+    return {
+      tagName: 'Image',
+      props: {
+        src,
+        alt,
+        width: width ? parseInt(width) : undefined,
+        height: height ? parseInt(height) : undefined,
+        loading: loading || 'lazy'
+      }
+    };
+  }
+
+  // Transform figure > img elements to Image component with caption support
+  private static transformFigureImage(element: Element): any {
+    const figure = element.closest('figure');
+    const figcaption = figure?.querySelector('figcaption');
+    const caption = figcaption?.textContent || '';
+    
+    const src = element.getAttribute('src') || '';
+    const alt = element.getAttribute('alt') || caption;
+    const width = element.getAttribute('width');
+    const height = element.getAttribute('height');
+
+    return {
+      tagName: 'Image',
+      props: {
+        src,
+        alt,
+        caption: caption || undefined,
+        width: width ? parseInt(width) : undefined,
+        height: height ? parseInt(height) : undefined,
+        loading: 'lazy'
+      }
+    };
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function ImageWithDataBinding(props: ImageProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...rawImageProps } = useDataBinding<ImageModel>(
+    dataSource!,
+    restProps as Partial<ImageModel>,
+    ImageModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Use props directly since new serialization system handles component-level transformation
+  const imageProps = rawImageProps;
+
+  // Show loading state
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'grey.100',
+          width: imageProps.width || 200,
+          height: imageProps.height || 150,
+          borderRadius: imageProps.borderRadius
+        }}
+      >
+        <Skeleton
+          variant="rectangular"
+          width="100%"
+          height="100%"
+          sx={{ borderRadius: imageProps.borderRadius }}
+        />
+      </Box>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading image:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'error.light',
+            color: 'error.contrastText',
+            p: 2,
+            borderRadius: imageProps.borderRadius,
+            width: imageProps.width || 200,
+            height: imageProps.height || 150
+          }}
+        >
+          <BrokenImageIcon sx={{ fontSize: 48, mb: 1 }} />
+          <Typography variant="body2" align="center">
+            Error Loading Image
+          </Typography>
+          <Typography variant="caption" align="center">
+            {error.message}
+          </Typography>
+        </Box>
+      );
+    }
+    return null;
+  }
+
+  console.log('Resolved props for Image:', imageProps);
+  return <ImageView {...imageProps} />;
+}
+
+export default Image;

package/src/components/blocks/PageBannerHeader.tsx

@@ -397,18 +397,20 @@ function PageBannerHeader(props: PageBannerHeaderProps) {
   );
 
   // Convert HeaderActionModel[] to HeaderAction[] by adding default onClick handlers
-  const convertedActions: HeaderAction[] | undefined = modelProps.actions?.map(action => ({
-    id: action.id,
-    label: action.label,
-    icon: action.icon as React.ReactNode,
-    disabled: action.disabled,
-    destructive: action.destructive,
-    priority: action.priority,
-    onClick: () => {
-      console.log(`Action clicked: ${action.id} - ${action.label}`);
-      // In a real app, this would dispatch events or call configured handlers
-    }
-  }));
+  const convertedActions: HeaderAction[] | undefined = modelProps.actions
+    ?.filter((action): action is typeof action & { id: string } => typeof action.id === 'string')
+    .map(action => ({
+      id: action.id,
+      label: action.label,
+      icon: action.icon as React.ReactNode,
+      disabled: action.disabled,
+      destructive: action.destructive,
+      priority: action.priority,
+      onClick: () => {
+        console.log(`Action clicked: ${action.id} - ${action.label}`);
+        // In a real app, this would dispatch events or call configured handlers
+      }
+    }));
 
   const pageBannerHeaderProps: PageBannerHeaderViewProps = {
     ...modelProps,

package/src/components/blocks/ProductCard.tsx

@@ -380,7 +380,7 @@ function ProductCardView({
             <Button
               key={action.id}
               variant={action.variant || 'contained'}
-              color={action.color || 'primary'}
+              // color={action.color || 'primary'}
               disabled={action.disabled}
               onClick={action.onClick}
               {...(variant === 'compact' && { fullWidth: true })}