@qwickapps/react-framework 1.3.4 → 1.4.0

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

@@ -141,26 +141,29 @@ function ProductCardView({
 
   const displayActions = actions || getDefaultActions();
 
-  const FeaturesList = () => {
-    const featuresToShow = variant === 'compact' 
+  // INLINE WRAPPERS REFACTORED: Instead of inline component declarations (which cause remounts),
+  // compute JSX fragments via plain variables/functions and inject directly.
+
+  const featuresListElement = (() => {
+    const featuresToShow = variant === 'compact'
       ? (product.features || []).slice(0, maxFeaturesCompact)
       : (product.features || []);
 
     return (
       <Box sx={{ mb: variant === 'detailed' ? 2.5 : 2 }}>
-        <Typography 
-          variant="h6" 
+        <Typography
+          variant="h6"
           component="h4"
-          sx={{ 
-            mb: 1.5, 
+          sx={{
+            mb: 1.5,
             fontSize: '1.1rem',
             fontWeight: 600
           }}
         >
           Key Features:
         </Typography>
-        <Box component="ul" sx={{ 
-          m: 0, 
+        <Box component="ul" sx={{
+          m: 0,
           p: 0,
           listStyle: 'none'
         }}>
@@ -185,9 +188,9 @@ function ProductCardView({
                   flexShrink: 0
                 }}
               />
-              <Typography 
-                variant="body2" 
-                sx={{ 
+              <Typography
+                variant="body2"
+                sx={{
                   fontSize: '0.95rem',
                   lineHeight: 1.4,
                   opacity: 0.8
@@ -198,10 +201,10 @@ function ProductCardView({
             </Box>
           ))}
           {variant === 'compact' && (product.features || []).length > maxFeaturesCompact && (
-            <Typography 
-              variant="body2" 
+            <Typography
+              variant="body2"
               color="primary"
-              sx={{ 
+              sx={{
                 fontSize: '0.9rem',
                 pl: 2.5,
                 fontWeight: 500
@@ -213,41 +216,37 @@ function ProductCardView({
         </Box>
       </Box>
     );
-  };
-
-  const TechnologiesSection = () => {
-    if (!showTechnologies || variant === 'compact') return null;
+  })();
 
-    return (
-      <Box sx={{ mb: 3 }}>
-        <Typography 
-          variant="h6" 
-          component="h4"
-          sx={{ 
-            mb: 1.5, 
-            fontSize: '1rem',
-            fontWeight: 600
-          }}
-        >
-          Technologies:
-        </Typography>
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
-          {product.technologies.map((tech, index) => (
-            <Chip
-              key={index}
-              label={tech}
-              variant="outlined"
-              size="small"
-              sx={{
-                fontSize: '0.8rem',
-                fontWeight: 500
-              }}
-            />
-          ))}
-        </Box>
+  const technologiesSectionElement = (!showTechnologies || variant === 'compact') ? null : (
+    <Box sx={{ mb: 3 }}>
+      <Typography
+        variant="h6"
+        component="h4"
+        sx={{
+          mb: 1.5,
+          fontSize: '1rem',
+          fontWeight: 600
+        }}
+      >
+        Technologies:
+      </Typography>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+        {product.technologies.map((tech, index) => (
+          <Chip
+            key={index}
+            label={tech}
+            variant="outlined"
+            size="small"
+            sx={{
+              fontSize: '0.8rem',
+              fontWeight: 500
+            }}
+          />
+        ))}
       </Box>
-    );
-  };
+    </Box>
+  );
 
   return (
     <Box
@@ -364,11 +363,11 @@ function ProductCardView({
           </Typography>
         </Box>
 
-        {/* Features */}
-        <FeaturesList />
+  {/* Features */}
+  {featuresListElement}
 
-        {/* Technologies */}
-        <TechnologiesSection />
+  {/* Technologies */}
+  {technologiesSectionElement}
 
         {/* Action Buttons */}
         <Box sx={{ 
@@ -381,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 })}