@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/components/blocks/Content.tsx

@@ -61,85 +61,33 @@ function ContentView({
     }
   };
 
-  // Content wrapper based on variant
-  const ContentWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const paddingValue = getPadding();
-    const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth as BreakpointValue);
-    const commonSx: SxProps<Theme> = {
-      textAlign: centered ? 'center' : 'left',
-      maxWidth: mappedMaxWidth !== false 
-        ? theme.breakpoints.values[mappedMaxWidth] 
-        : '100%',
-      width: '100%',
-      ...(centered && contentMaxWidth && {
-        mx: 'auto',
-      }),
-      p: paddingValue,
-      ...styleProps.sx,
-    };
-
-    switch (variant) {
-      case 'elevated':
-        return (
-          <Paper 
-            elevation={4}
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: theme.palette.background.paper,
-            }}
-          >
-            {children}
-          </Paper>
-        );
-      case 'outlined':
-        return (
-          <Paper 
-            variant="outlined" 
-            elevation={0}
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: 'var(--theme-surface)',
-              borderColor: 'var(--theme-border-main)', // Use theme border color
-              borderWidth: 1,
-              borderStyle: 'solid',
-            }}
-          >
-            {children}
-          </Paper>
-        );
-      case 'filled':
-        return (
-          <Box
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: 'var(--theme-surface-variant)', // Use theme surface variant
-              borderRadius: 1,
-            }}
-          >
-            {children}
-          </Box>
-        );
-      default:
-        return (
-          <Box
-            {...htmlProps}
-            {...otherProps}
-            sx={commonSx}
-          >
-            {children}
-          </Box>
-        );
-    }
+  // Compute stable wrapper element (avoid recreating component type each render which caused remount & focus loss)
+  const paddingValue = getPadding();
+  const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth as BreakpointValue);
+  const commonSx: SxProps<Theme> = {
+    textAlign: centered ? 'center' : 'left',
+    maxWidth: mappedMaxWidth !== false ? theme.breakpoints.values[mappedMaxWidth] : '100%',
+    width: '100%',
+    ...(centered && contentMaxWidth && { mx: 'auto' }),
+    p: paddingValue,
+    ...styleProps.sx,
   };
 
+  let Wrapper: React.ElementType = Box;
+  let wrapperProps: Record<string, any> = { ...htmlProps, ...otherProps, sx: commonSx };
+  if (variant === 'elevated') {
+    Wrapper = Paper;
+    wrapperProps = { ...wrapperProps, elevation: 4, sx: { ...commonSx, backgroundColor: theme.palette.background.paper } };
+  } else if (variant === 'outlined') {
+    Wrapper = Paper;
+    wrapperProps = { ...wrapperProps, variant: 'outlined', elevation: 0, sx: { ...commonSx, backgroundColor: 'var(--theme-surface)', borderColor: 'var(--theme-border-main)', borderWidth: 1, borderStyle: 'solid' } };
+  } else if (variant === 'filled') {
+    Wrapper = Box;
+    wrapperProps = { ...wrapperProps, sx: { ...commonSx, backgroundColor: 'var(--theme-surface-variant)', borderRadius: 1 } };
+  }
+
   return (
-    <ContentWrapper>
+    <Wrapper {...wrapperProps}>
       <Stack spacing={2}>
         {/* Header */}
         {(title || subtitle) && (
@@ -210,7 +158,7 @@ function ContentView({
           </Stack>
         )}
       </Stack>
-    </ContentWrapper>
+  </Wrapper>
   );
 }
 

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;