@qwickapps/react-framework 1.4.1 → 1.4.3

package/src/components/blocks/Section.tsx

@@ -1,7 +1,8 @@
 /**
- * Section Component - Themed, responsive section container with data binding support
+ * Section Component - Factory-based implementation using createSerializableView
  *
- * Enhanced with data binding support through dataSource prop.
+ * Migrated from class-based ModelView to factory pattern for better
+ * schema-driven architecture while preserving all functionality.
  *
  * Usage:
  * - Traditional: <Section background="#f5f5f5" padding="large">Content</Section>
@@ -17,18 +18,16 @@
  */
 
 import { Box, Container } from '@mui/material';
-import type { WithDataBinding } from '@qwickapps/schema';
-import React, { ReactElement, ReactNode } from 'react';
-import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
-import SectionModel from '../../schemas/SectionSchema';
-import { ModelView } from '../base/ModelView';
-import { ComponentTransformer } from '../../schemas/transformers/ComponentTransformer';
+import React from 'react';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
 import type { BreakpointValue } from '../../types';
 import { mapToMUIBreakpoint } from '../../utils/breakpoints';
 
-interface SectionViewProps extends WithBaseProps {
-  /** Section content */
-  children?: React.ReactNode;
+/**
+ * Props interface for Section component - extends ViewProps
+ */
+export interface SectionProps extends ViewProps {
   /** Section background color */
   background?: string;
   /** Section text color */
@@ -41,10 +40,11 @@ interface SectionViewProps extends WithBaseProps {
   component?: 'div' | 'section' | 'article' | 'main';
 }
 
-export interface SectionProps extends SectionViewProps, WithDataBinding {}
-
 /**
- * Core Section View component - handles section rendering
+ * SectionView - Pure view component that renders the actual section
+ * 
+ * This component receives fully processed props from createSerializableView
+ * and renders the section using Material-UI Box with all styling applied.
  */
 function SectionView({
   children,
@@ -53,28 +53,24 @@ function SectionView({
   padding = 'medium',
   contentMaxWidth = 'lg',
   component = 'section',
-  ...restProps
-}: SectionViewProps) {
-  const { gridProps, styleProps, htmlProps } = useBaseProps(restProps);
-  
-  // Mark as QwickApp component
-  (SectionView as any)[QWICKAPP_COMPONENT] = true;
+  gridProps,
+  ...props
+}: SectionProps & { gridProps?: any }) {
   
   // Return empty state if no content
   if (!children) {
     return (
       <Box
         component={component}
-        {...htmlProps}
-        {...styleProps}
-        {...gridProps}
+        {...props}
+        {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
         sx={{
           backgroundColor: background,
           color,
           position: 'static',
           py: 2,
           px: 0,
-          ...styleProps.sx,
+          ...props.sx,
         }}
       >
         <Container
@@ -120,15 +116,14 @@ function SectionView({
   return (
     <Box
       component={component}
-      {...htmlProps}
-      {...styleProps}
-      {...gridProps}
+      {...props}
+      {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
       sx={{
         backgroundColor: background,
         color,
         position: 'static',
         ...getPadding(),
-        ...styleProps.sx,
+        ...props.sx,
       }}
     >
       {/* Content Container */}
@@ -148,167 +143,70 @@ function SectionView({
   );
 }
 
-// Main component with data binding support and serialization capability
-export class Section extends ModelView<SectionProps, SectionModel> {
-  // Component self-declaration for serialization
-  static readonly tagName = 'Section';
-  static readonly version = '1.0.0';
-  
-  // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
-    return <Section {...jsonData} />;
-  }
-  
-  // Section supports nested components
-  protected hasNestedComponents(children: ReactNode): boolean {
-    return true;
-  }
-  
-  // Override serializeChildren to handle nested components properly
-  protected serializeChildren(children: ReactNode): any {
-    if (typeof children === 'string') {
-      return children;
-    }
-    
-    if (children !== undefined) {
-      return ComponentTransformer.serialize(children);
-    }
-    
-    return undefined;
-  }
-  
-  // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
-    return {
-      background: this.props.background,
-      color: this.props.color,
-      padding: this.props.padding,
-      contentMaxWidth: this.props.contentMaxWidth,
-      component: this.props.component
-    };
-  }
-
-  // Section component renders traditional props view
-  protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
-    return <SectionView {...restProps} />;
-  }
-
-  // Section component renders data-bound view
-  protected renderWithDataBinding(): React.ReactElement {
-    return <SectionWithDataBinding {...this.props} />;
-  }
-
-  // Register HTML patterns that Section component can handle
-  static registerPatternHandlers(registry: any): void {
-    // Register section element pattern
-    if (!registry.hasPattern('section')) {
-      registry.registerPattern('section', Section.transformSection);
-    }
-    
-    // Register section with specific classes
-    if (!registry.hasPattern('section.blog-section')) {
-      registry.registerPattern('section.blog-section', Section.transformBlogSection);
+/**
+ * Create Section component using the factory pattern
+ */
+export const Section: SerializableComponent<SectionProps> = createSerializableView<SectionProps>({
+  tagName: 'Section',
+  version: '1.0.0',
+  role: 'container',
+  View: SectionView,
+  finalize: (props: SectionProps) => {
+    // Handle type conversion for contentMaxWidth - convert "false" string to boolean false
+    if ((props.contentMaxWidth as any) === "false") {
+      return { ...props, contentMaxWidth: false as BreakpointValue };
     }
+    return props;
   }
+});
 
-  // Transform generic section elements to Section component
-  private static transformSection(element: Element): any {
-    const padding = element.getAttribute('data-padding') || 'medium';
-    const background = element.getAttribute('data-background');
-    const contentMaxWidth = element.getAttribute('data-max-width') || 'lg';
-
-    return {
-      tagName: 'Section',
-      props: {
-        padding,
-        background,
-        contentMaxWidth,
-        children: element.innerHTML
-      }
-    };
-  }
-
-  // Transform blog section elements to Section component with specific styling
-  private static transformBlogSection(element: Element): any {
-    const padding = element.getAttribute('data-padding') || 'large';
-    const background = element.getAttribute('data-background') || 'var(--theme-surface)';
-    
-    return {
-      tagName: 'Section',
-      props: {
-        padding,
-        background,
-        contentMaxWidth: 'md',
-        children: element.innerHTML
-      }
-    };
+// Register HTML patterns that Section component can handle
+(Section as any).registerPatternHandlers = (registry: any): void => {
+  // Register section element pattern
+  if (!registry.hasPattern('section')) {
+    registry.registerPattern('section', (Section as any).transformSection);
   }
-}
-
-// Helper component to handle data binding with hooks (since we can't use hooks in class components)
-function SectionWithDataBinding(props: SectionProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
-
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...sectionProps } = useDataBinding<SectionModel>(
-    dataSource!,
-    restProps as Partial<SectionModel>,
-    SectionModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-
-  // Show loading state
-  if (loading) {
-    return (
-      <Box
-        component="section"
-        sx={{
-          backgroundColor: 'var(--theme-surface)',
-          py: 4,
-          px: 0,
-        }}
-      >
-        <Container maxWidth="lg" sx={{ textAlign: 'center' }}>
-          <div>Loading Section...</div>
-        </Container>
-      </Box>
-    );
+  
+  // Register section with specific classes
+  if (!registry.hasPattern('section.blog-section')) {
+    registry.registerPattern('section.blog-section', (Section as any).transformBlogSection);
   }
-
-  if (error) {
-    console.error('Error loading section:', error);
-    if (process.env.NODE_ENV !== 'production') {
-      return (
-        <Box
-          component="section"
-          sx={{
-            backgroundColor: 'var(--theme-surface)',
-            py: 4,
-            px: 0,
-            border: '1px solid red'
-          }}
-        >
-          <Container maxWidth="lg" sx={{ textAlign: 'center' }}>
-            <div>Error Loading Section: {error.message}</div>
-          </Container>
-        </Box>
-      );
+};
+
+// Transform generic section elements to Section component
+(Section as any).transformSection = (element: Element): any => {
+  const padding = element.getAttribute('data-padding') || 'medium';
+  const background = element.getAttribute('data-background');
+  const contentMaxWidth = element.getAttribute('data-max-width') || 'lg';
+
+  return {
+    tagName: 'Section',
+    props: {
+      padding,
+      background,
+      contentMaxWidth,
+      children: element.innerHTML
     }
-    return null;
-  }
+  };
+};
 
-  console.log('Resolved props for Section:', sectionProps);
+// Transform blog section elements to Section component with specific styling
+(Section as any).transformBlogSection = (element: Element): any => {
+  const padding = element.getAttribute('data-padding') || 'large';
+  const background = element.getAttribute('data-background') || 'var(--theme-surface)';
   
-  // Handle type conversion for contentMaxWidth - convert "false" string to boolean false
-  const typedSectionProps: SectionViewProps = {
-    ...sectionProps,
-    contentMaxWidth: sectionProps.contentMaxWidth === "false" 
-      ? false 
-      : sectionProps.contentMaxWidth as BreakpointValue
+  return {
+    tagName: 'Section',
+    props: {
+      padding,
+      background,
+      contentMaxWidth: 'md',
+      children: element.innerHTML
+    }
   };
-  
-  return <SectionView {...typedSectionProps} />;
-}
+};
 
+/**
+ * Export the component as default
+ */
 export default Section;