@qwickapps/react-framework 1.4.1 → 1.4.2

package/src/components/blocks/Image.tsx

@@ -8,7 +8,7 @@
  * - Accessibility support with proper alt text
  * - Lazy loading support
  * - Fallback image handling
- * - Full serialization support via ModelView
+ * - Full serialization support via factory pattern
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
@@ -16,21 +16,30 @@
 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';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
 
-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 {}
+export interface ImageProps extends ViewProps {
+  // Component-specific props from ImageModel
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  objectFit?: ImageFit;
+  objectPosition?: ImagePosition;
+  loading?: ImageLoading;
+  title?: string;
+  draggable?: boolean;
+  borderRadius?: string;
+  showLoading?: boolean;
+  showError?: boolean;
+  fallbackSrc?: string;
+  sizes?: string;
+  srcSet?: string;
+  loadingPlaceholder?: React.ReactNode;
+  errorPlaceholder?: React.ReactNode;
+}
 
 // View component - handles the actual rendering
 function ImageView({
@@ -55,13 +64,9 @@ function ImageView({
   style,
   className,
   ...restProps
-}: ImageViewProps) {
-  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
+}: ImageProps) {
   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);
 
@@ -83,9 +88,7 @@ function ImageView({
     if (showError) {
       return (
         <Box
-          {...htmlProps}
-          {...styleProps}
-          {...otherProps}
+          {...restProps}
           className={`image-error ${className || ''}`.trim()}
           style={{
             display: 'flex',
@@ -117,9 +120,7 @@ function ImageView({
   if (imageState === 'loading' && showLoading) {
     return (
       <Box
-        {...htmlProps}
-        {...styleProps}
-        {...otherProps}
+        {...restProps}
         className={`image-loading ${className || ''}`.trim()}
         style={{
           width: width || '100%',
@@ -144,9 +145,7 @@ function ImageView({
   if (imageState === 'error' && showError) {
     return (
       <Box
-        {...htmlProps}
-        {...styleProps}
-        {...otherProps}
+        {...restProps}
         className={`image-error ${className || ''}`.trim()}
         style={{
           display: 'flex',
@@ -194,9 +193,7 @@ function ImageView({
 
   return (
     <img
-      {...htmlProps}
-      {...styleProps}
-      {...otherProps}
+      {...restProps}
       src={currentSrc}
       alt={alt}
       width={width}
@@ -215,181 +212,70 @@ function ImageView({
   );
 }
 
-// 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} />;
+// Create the serializable Image component using the factory
+export const Image: SerializableComponent<ImageProps> = createSerializableView<ImageProps>({
+  tagName: 'Image',
+  version: '1.0.0',
+  role: 'view',
+  View: ImageView,
+  // Image component uses default react-children strategy
+});
+
+// Register HTML patterns that Image component can handle
+(Image as any).registerPatternHandlers = (registry: any): void => {
+  // Register img elements
+  if (!registry.hasPattern('img')) {
+    registry.registerPattern('img', transformImage);
   }
   
-  // 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} />;
+  // Register figure elements with img
+  if (!registry.hasPattern('figure img')) {
+    registry.registerPattern('figure img', transformFigureImage);
   }
+};
 
-  // Image component renders data-bound view
-  protected renderWithDataBinding(): React.ReactElement {
-    return <ImageWithDataBinding {...this.props} />;
-  }
+// Transform img elements to Image component
+function 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;
 
-  // 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);
+  return {
+    tagName: 'Image',
+    props: {
+      src,
+      alt,
+      width: width ? parseInt(width) : undefined,
+      height: height ? parseInt(height) : undefined,
+      loading: loading || 'lazy'
     }
-  }
-
-  // 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>
-    );
-  }
+// Transform figure > img elements to Image component with caption support
+function 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');
 
-  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 {
+    tagName: 'Image',
+    props: {
+      src,
+      alt,
+      caption: caption || undefined,
+      width: width ? parseInt(width) : undefined,
+      height: height ? parseInt(height) : undefined,
+      loading: 'lazy'
     }
-    return null;
-  }
-
-  console.log('Resolved props for Image:', imageProps);
-  return <ImageView {...imageProps} />;
+  };
 }
 
 export default Image;

package/src/components/blocks/PageBannerHeader.tsx

@@ -24,13 +24,13 @@ import {
   useMediaQuery,
   useTheme,
 } from '@mui/material';
-import { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import React from 'react';
 import { useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
 import PageBannerHeaderModel from '../../schemas/PageBannerHeaderSchema';
 import { HeaderAction } from './CoverImageHeader';
 
-type PageBannerHeaderViewProps = Omit<ModelProps<PageBannerHeaderModel>, 'actions'> & {
+type PageBannerHeaderViewProps = Omit<SchemaProps<PageBannerHeaderModel>, 'actions'> & {
   /** Profile/avatar image URL or component (extended from schema string) */
   profileImage?: string | React.ReactNode;
   /** Array of tag strings or JSX elements (extended from schema string[]) */