@qwickapps/react-framework 1.3.5 → 1.4.0

package/src/components/blocks/Section.tsx

@@ -18,9 +18,11 @@
 
 import { Box, Container } from '@mui/material';
 import type { WithDataBinding } from '@qwickapps/schema';
-import React from 'react';
+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 type { BreakpointValue } from '../../types';
 import { mapToMUIBreakpoint } from '../../utils/breakpoints';
 
@@ -146,18 +148,111 @@ function SectionView({
   );
 }
 
-// Main component with data binding support
-function Section(props: SectionProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// 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
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // 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);
+    }
+  }
+
+  // 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
+      }
+    };
+  }
+}
+
+// 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,
+    dataSource!,
     restProps as Partial<SectionModel>,
     SectionModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
@@ -203,7 +298,17 @@ function Section(props: SectionProps) {
     return null;
   }
 
-  return <SectionView {...sectionProps} />;
+  console.log('Resolved props for Section:', sectionProps);
+  
+  // 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 <SectionView {...typedSectionProps} />;
 }
 
 export default Section;

package/src/components/blocks/Text.tsx

@@ -0,0 +1,285 @@
+/**
+ * Text - Comprehensive typography display component with serialization support
+ * 
+ * Features:
+ * - Complete typography variant support (h1-h6, body1/2, subtitle, etc.)
+ * - Rich styling options (color, alignment, font properties)
+ * - Custom typography overrides (fontSize, fontFamily, etc.)
+ * - Semantic HTML element rendering
+ * - Text formatting and decoration options
+ * - Full serialization support via ModelView
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { ReactElement, ReactNode } from 'react';
+import { Typography } from '@mui/material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
+import TextModel from '../../schemas/TextSchema';
+import { ModelView } from '../base/ModelView';
+
+type TextViewProps = ModelProps<TextModel> & {
+  /** Click handler for the text */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+  /** Additional CSS class names */
+  className?: string;
+};
+
+export interface TextProps extends TextViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function TextView({
+  content,
+  variant = 'body1',
+  color = 'inherit',
+  align = 'inherit',
+  component = 'p',
+  fontWeight = 'inherit',
+  textDecoration = 'none',
+  textTransform = 'none',
+  noWrap = false,
+  paragraph = false,
+  gutterBottom = false,
+  fontSize,
+  lineHeight,
+  letterSpacing,
+  fontFamily,
+  customColor,
+  maxWidth,
+  children,
+  onClick,
+  style,
+  className,
+  ...restProps
+}: TextViewProps) {
+  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
+
+  // Mark as QwickApp component
+  (TextView as any)[QWICKAPP_COMPONENT] = true;
+
+  // Determine the text content to display
+  const textContent = children || content;
+
+  // Early return if no content provided
+  if (!textContent && textContent !== 0) {
+    return null;
+  }
+
+  // Build custom styles
+  const customStyles: React.CSSProperties = {
+    ...style
+  };
+
+  // Apply custom typography overrides
+  if (fontSize) customStyles.fontSize = fontSize;
+  if (lineHeight) customStyles.lineHeight = lineHeight;
+  if (letterSpacing) customStyles.letterSpacing = letterSpacing;
+  if (fontFamily) customStyles.fontFamily = fontFamily;
+  if (customColor) customStyles.color = customColor;
+  if (maxWidth) customStyles.maxWidth = maxWidth;
+
+  // Apply text formatting
+  if (fontWeight !== 'inherit') customStyles.fontWeight = fontWeight;
+  if (textDecoration !== 'none') customStyles.textDecoration = textDecoration;
+  if (textTransform !== 'none') customStyles.textTransform = textTransform;
+
+  // Handle onClick cursor
+  if (onClick) customStyles.cursor = 'pointer';
+
+  return (
+    <Typography
+      {...htmlProps}
+      {...styleProps}
+      {...otherProps}
+      variant={variant}
+      color={color as any}
+      align={align}
+      component={component}
+      noWrap={noWrap}
+      paragraph={paragraph}
+      gutterBottom={gutterBottom}
+      className={`text ${className || ''}`.trim()}
+      style={customStyles}
+      onClick={onClick}
+    >
+      {textContent}
+    </Typography>
+  );
+}
+
+// Main component with data binding support and serialization capability
+export class Text extends ModelView<TextProps, TextModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'Text';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <Text {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      content: this.props.content,
+      variant: this.props.variant,
+      color: this.props.color,
+      align: this.props.align,
+      component: this.props.component,
+      fontWeight: this.props.fontWeight,
+      textDecoration: this.props.textDecoration,
+      textTransform: this.props.textTransform,
+      noWrap: this.props.noWrap,
+      paragraph: this.props.paragraph,
+      gutterBottom: this.props.gutterBottom,
+      fontSize: this.props.fontSize,
+      lineHeight: this.props.lineHeight,
+      letterSpacing: this.props.letterSpacing,
+      fontFamily: this.props.fontFamily,
+      customColor: this.props.customColor,
+      maxWidth: this.props.maxWidth,
+      // Note: children ReactNode will be handled by base serialization if needed
+    };
+  }
+
+  // Text component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
+    return <TextView {...restProps} />;
+  }
+
+  // Text component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <TextWithDataBinding {...this.props} />;
+  }
+
+  // Register HTML patterns that Text component can handle
+  static registerPatternHandlers(registry: any): void {
+    // Register paragraph elements
+    if (!registry.hasPattern('p')) {
+      registry.registerPattern('p', Text.transformParagraph);
+    }
+    
+    // Register heading elements
+    const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    headings.forEach(heading => {
+      if (!registry.hasPattern(heading)) {
+        registry.registerPattern(heading, (element: Element) => Text.transformHeading(element, heading));
+      }
+    });
+    
+    // Register span elements
+    if (!registry.hasPattern('span')) {
+      registry.registerPattern('span', Text.transformSpan);
+    }
+  }
+
+  // Transform paragraph elements to Text component
+  private static transformParagraph(element: Element): any {
+    return {
+      tagName: 'Text',
+      props: {
+        variant: 'body1',
+        component: 'p',
+        children: element.textContent || ''
+      }
+    };
+  }
+
+  // Transform heading elements to Text component
+  private static transformHeading(element: Element, tagName: string): any {
+    const variantMap: { [key: string]: string } = {
+      'h1': 'h1',
+      'h2': 'h2', 
+      'h3': 'h3',
+      'h4': 'h4',
+      'h5': 'h5',
+      'h6': 'h6'
+    };
+
+    return {
+      tagName: 'Text',
+      props: {
+        variant: variantMap[tagName] || 'h4',
+        component: tagName,
+        children: element.textContent || ''
+      }
+    };
+  }
+
+  // Transform span elements to Text component
+  private static transformSpan(element: Element): any {
+    return {
+      tagName: 'Text',
+      props: {
+        variant: 'body2',
+        component: 'span',
+        children: element.textContent || ''
+      }
+    };
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function TextWithDataBinding(props: TextProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...rawTextProps } = useDataBinding<TextModel>(
+    dataSource!,
+    restProps as Partial<TextModel>,
+    TextModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Use props directly since new serialization system handles component-level transformation
+  const textProps = rawTextProps;
+
+  // Show loading state
+  if (loading) {
+    return (
+      <Typography
+        variant={textProps.variant || 'body1'}
+        color="text.secondary"
+        sx={{
+          backgroundColor: 'grey.100',
+          borderRadius: '4px',
+          padding: '0.5rem',
+          maxWidth: textProps.maxWidth
+        }}
+      >
+        Loading text...
+      </Typography>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading text:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Typography
+          variant={textProps.variant || 'body1'}
+          color="error"
+          sx={{
+            backgroundColor: 'error.light',
+            color: 'error.contrastText',
+            borderRadius: '4px',
+            padding: '0.5rem',
+            maxWidth: textProps.maxWidth
+          }}
+        >
+          Error Loading Text: {error.message}
+        </Typography>
+      );
+    }
+    return null;
+  }
+
+  console.log('Resolved props for Text:', textProps);
+  return <TextView {...textProps} />;
+}
+
+export default Text;

package/src/components/blocks/index.ts

@@ -19,6 +19,8 @@ export { default as CoverImageHeader } from './CoverImageHeader';
 export { default as FeatureGrid } from './FeatureGrid';
 export { default as Footer } from './Footer';
 export { default as Section } from './Section';
+export { default as Image } from './Image';
+export { default as Text } from './Text';
 export { default as ProductCard } from './ProductCard';
 export { default as FeatureCard } from './FeatureCard';
 export { default as CardListGrid } from './CardListGrid';
@@ -32,6 +34,8 @@ export type { CoverImageHeaderProps, HeaderAction } from './CoverImageHeader';
 export type { FeatureGridProps, FeatureItem as FeatureGridItem } from './FeatureGrid';
 export type { FooterProps } from './Footer';
 export type { SectionProps } from './Section';
+export type { ImageProps } from './Image';
+export type { TextProps } from './Text';
 export type { ProductCardProps, Product, ProductCardAction } from './ProductCard';
 export type { FeatureCardProps, FeatureItem, FeatureCardAction } from './FeatureCard';
 export type { CardListGridProps } from './CardListGrid';