@qwickapps/react-framework 1.4.0 → 1.4.2

package/src/components/blocks/Code.tsx

@@ -1,44 +1,45 @@
 /**
- * Code - Syntax-highlighted code display component
+ * Code - Content-prop leaf component for secure code display
  * 
- * Provides consistent code block rendering with:
+ * Uses content-prop strategy to prevent JSON deserialization vulnerabilities.
+ * Code content is serialized as data.content (string), not data.children,
+ * preventing recursive deserialization of example JSON that looks like components.
+ * 
+ * Features preserved:
  * - Syntax highlighting support
- * - Copy to clipboard functionality
+ * - Copy to clipboard functionality  
  * - Light/dark theme support
  * - Multiple language support
  * - Responsive design
+ * - Line numbers support
+ * - Title display
+ * - Custom backgrounds
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import {
-  Check as CheckIcon,
-  ContentCopy as CopyIcon
-} from '@mui/icons-material';
-import {
-  Alert,
-  Box,
-  IconButton,
-  Paper,
-  Snackbar,
-  Tooltip,
-  Typography,
-  useTheme
-} from '@mui/material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import React, { ReactElement, useState } from 'react';
-import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
-import CodeModel from '../../schemas/CodeSchema';
-import { ModelView } from '../base/ModelView';
-import { extractTextFromReactNode } from '../../utils/reactUtils';
-
-type CodeViewProps = ModelProps<CodeModel>;
+import React, { useState } from 'react';
+import { Box, Paper, Typography, Tooltip, IconButton, Snackbar, Alert, useTheme } from '@mui/material';
+import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
+import CodeSchema from '../../schemas/CodeSchema';
+import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
+import { ViewProps } from '../shared/viewProps';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 
-export interface CodeProps extends CodeViewProps, WithDataBinding {}
+/**
+ * Props interface for Code component
+ * Uses SchemaProps<typeof CodeSchema> for clean typing
+ */
+export type CodeProps = ViewProps & SchemaProps<typeof CodeSchema>;
 
-// View component - handles the actual rendering
+/**
+ * CodeView - Pure view component that renders the code display
+ * 
+ * This component receives fully processed props from createSerializableView
+ * and renders the code using Material-UI components with all features preserved.
+ */
 function CodeView({
-  children = '',
+  content,
   language = 'text',
   showCopy = true,
   showLineNumbers = false,
@@ -46,34 +47,29 @@ function CodeView({
   wrapLines = false,
   codeBackground,
   ...restProps
-}: CodeViewProps) {
-  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
-
-  // Mark as QwickApp component
-  (CodeView as any)[QWICKAPP_COMPONENT] = true;
+}: CodeProps) {
   
   
   const theme = useTheme();
   const [copied, setCopied] = useState(false);
   const [showCopiedAlert, setShowCopiedAlert] = useState(false);
   
-  const codeMaxHeight = styleProps.sx?.maxHeight || 400;
+  const codeMaxHeight = (restProps.sx as any)?.maxHeight || 400;
 
-  // Convert ReactNode children to string for processing
-  const codeContent = typeof children === 'string' ? children : extractTextFromReactNode(children);
+  // Use content prop directly (already a string from content-prop strategy)
+  const codeContent = content || '';
   
   // Return empty state if no code content
   if (!codeContent?.trim()) {
     return (
       <Paper
-        {...htmlProps}
-        {...styleProps}
+        {...restProps}
         variant="outlined"
         sx={{
           p: 3,
           textAlign: 'center',
           opacity: 0.6,
-          ...styleProps.sx
+          ...restProps.sx
         }}
       >
         <Typography variant="body2" color="text.secondary">
@@ -115,9 +111,7 @@ function CodeView({
 
   return (
     <Paper
-      {...htmlProps}
-      {...styleProps}
-      {...otherProps}
+      {...restProps}
       variant="outlined"
       sx={{
         backgroundColor: getBackgroundColor(),
@@ -125,7 +119,7 @@ function CodeView({
         borderRadius: 1,
         overflow: 'hidden',
         position: 'relative',
-        ...styleProps.sx
+        ...restProps.sx
       }}
     >
       {/* Header with title and copy button */}
@@ -218,7 +212,7 @@ function CodeView({
                   minWidth: `${String(codeLines.length).length + 1}ch`,
                 }}
               >
-                {codeLines.map((_, index) => (
+                {codeLines.map((_: string, index: number) => (
                   <Box key={index} sx={{ textAlign: 'right' }}>
                     {index + 1}
                   </Box>
@@ -251,150 +245,68 @@ function CodeView({
   );
 }
 
-// Main component with data binding support and serialization capability
-export class Code extends ModelView<CodeProps, CodeModel> {
-  // Component self-declaration for serialization
-  static readonly tagName = 'Code';
-  static readonly version = '1.0.0';
-  
-  // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
-    return <Code {...jsonData} />;
+/**
+ * Create Code component using the factory pattern
+ */
+export const Code: SerializableComponent<CodeProps> = createSerializableView<CodeProps>({
+  tagName: 'Code',
+  version: '1.0.0',
+  role: 'view',
+  View: CodeView,
+  childrenStrategy: { mode: 'content-prop', propName: 'content' }
+});
+
+// Register HTML patterns that Code component can handle
+(Code as any).registerPatternHandlers = (registry: any): void => {
+  // Register pre + code pattern
+  if (!registry.hasPattern('pre code')) {
+    registry.registerPattern('pre code', (Code as any).transformPreCode);
   }
   
-  // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
-    return {
-      language: this.props.language,
-      showCopy: this.props.showCopy,
-      showLineNumbers: this.props.showLineNumbers,
-      title: this.props.title,
-      wrapLines: this.props.wrapLines,
-      codeBackground: this.props.codeBackground
-    };
+  // Register standalone code pattern for complex code blocks
+  if (!registry.hasPattern('code.highlight')) {
+    registry.registerPattern('code.highlight', (Code as any).transformCodeHighlight);
   }
+};
 
-  // Code component renders traditional props view
-  protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
-    return <CodeView {...restProps} />;
-  }
+// Transform pre + code elements to Code component
+(Code as any).transformPreCode = (element: Element): any => {
+  const codeChild = element.querySelector('code');
+  if (!codeChild) return null;
 
-  // Code component renders data-bound view
-  protected renderWithDataBinding(): React.ReactElement {
-    return <CodeWithDataBinding {...this.props} />;
-  }
+  const language = Array.from(codeChild.classList)
+    .find(cls => cls.startsWith('language-'))
+    ?.replace('language-', '') || 'text';
 
-  // Register HTML patterns that Code component can handle
-  static registerPatternHandlers(registry: any): void {
-    // Register pre + code pattern
-    if (!registry.hasPattern('pre code')) {
-      registry.registerPattern('pre code', Code.transformPreCode);
-    }
-    
-    // Register standalone code pattern for complex code blocks
-    if (!registry.hasPattern('code.highlight')) {
-      registry.registerPattern('code.highlight', Code.transformCodeHighlight);
+  return {
+    tagName: 'Code',
+    props: {
+      language,
+      showCopy: true,
+      showLineNumbers: false,
+      content: codeChild.textContent || ''
     }
-  }
-
-  // Transform pre + code elements to Code component
-  private static transformPreCode(element: Element): any {
-    const codeChild = element.querySelector('code');
-    if (!codeChild) return null;
-
-    const language = Array.from(codeChild.classList)
-      .find(cls => cls.startsWith('language-'))
-      ?.replace('language-', '') || 'text';
-
-    return {
-      tagName: 'Code',
-      props: {
-        language,
-        showCopy: true,
-        showLineNumbers: false,
-        children: codeChild.textContent || ''
-      }
-    };
-  }
-
-  // Transform highlighted code elements to Code component
-  private static transformCodeHighlight(element: Element): any {
-    const language = Array.from(element.classList)
-      .find(cls => cls.startsWith('language-'))
-      ?.replace('language-', '') || 'text';
-
-    return {
-      tagName: 'Code',
-      props: {
-        language,
-        showCopy: true,
-        showLineNumbers: false,
-        children: element.textContent || ''
-      }
-    };
-  }
-}
-
-// Helper component to handle data binding with hooks (since we can't use hooks in class components)
-function CodeWithDataBinding(props: CodeProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
-
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...rawCodeProps } = useDataBinding<CodeModel>(
-    dataSource!,
-    restProps as Partial<CodeModel>,
-    CodeModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-
-  // Use props directly since new serialization system handles component-level transformation
-  const codeProps = rawCodeProps;
+  };
+};
 
-  // Show loading state
-  if (loading) {
-    return (
-      <Paper
-        variant="outlined"
-        sx={{
-          p: 3,
-          textAlign: 'center'
-        }}
-      >
-        <Typography variant="body2">Loading Code...</Typography>
-        <Typography variant="caption" color="text.secondary">
-          Loading
-        </Typography>
-      </Paper>
-    );
-  }
+// Transform highlighted code elements to Code component
+(Code as any).transformCodeHighlight = (element: Element): any => {
+  const language = Array.from(element.classList)
+    .find(cls => cls.startsWith('language-'))
+    ?.replace('language-', '') || 'text';
 
-  if (error) {
-    console.error('Error loading code:', error);
-    if (process.env.NODE_ENV !== 'production') {
-      return (
-        <Paper
-          variant="outlined"
-          sx={{
-            p: 3,
-            textAlign: 'center',
-            borderColor: 'error.main'
-          }}
-        >
-          <Typography variant="body2" color="error">
-            Error Loading Code
-          </Typography>
-          <Typography variant="caption" color="text.secondary">
-            {error.message}
-          </Typography>
-        </Paper>
-      );
+  return {
+    tagName: 'Code',
+    props: {
+      language,
+      showCopy: true,
+      showLineNumbers: false,
+      content: element.textContent || ''
     }
-    return null;
-  }
-
-  console.log('Resolved props for Code:', codeProps);
-  return <CodeView {...codeProps} />;
-}
+  };
+};
 
+/**
+ * Export the component as default
+ */
 export default Code;

package/src/components/blocks/Content.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Box, Paper, Stack, SxProps, Theme, Typography, useTheme } from '@mui/material';
-import { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import React from 'react';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import ContentModel from '../../schemas/ContentSchema';
@@ -24,7 +24,7 @@ import { mapToMUIBreakpoint } from '../../utils/breakpoints';
 import { Button } from '../buttons/Button';
 import Html from '../Html';
 
-type ContentViewProps = ModelProps<ContentModel>;
+type ContentViewProps = SchemaProps<ContentModel>;
 
 export interface ContentProps extends ContentViewProps, WithDataBinding {}
 

package/src/components/blocks/CoverImageHeader.tsx

@@ -21,7 +21,7 @@ import {
   Paper,
   Typography,
 } from '@mui/material';
-import { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import React, { useState } from 'react';
 import { useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
 import CoverImageHeaderModel from '../../schemas/CoverImageHeaderSchema';
@@ -44,7 +44,7 @@ export interface HeaderAction {
   priority?: number;
 }
 
-type CoverImageHeaderViewProps = Omit<ModelProps<CoverImageHeaderModel>, 'actions' | 'tags' | 'image'> & WithBaseProps & {
+type CoverImageHeaderViewProps = Omit<SchemaProps<CoverImageHeaderModel>, 'actions' | 'tags' | 'image'> & WithBaseProps & {
   /** Image URL or React component (extended from schema string) */
   image?: string | React.ReactNode;
   /** Array of tag strings or JSX elements (extended from schema string[]) */

package/src/components/blocks/HeroBlock.tsx

@@ -1,44 +1,60 @@
 /**
- * HeroBlock Component - Full-width hero section with serialization support
+ * HeroBlock Component - Factory-based implementation using createSerializableView
+ *
+ * Migrated from class-based ModelView to factory pattern for better
+ * schema-driven architecture while preserving all functionality.
  *
  * 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
+ * - Full serialization support
+ * - Nested Button component 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 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 React from 'react';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
 import { Button, ButtonProps } from '../buttons/Button';
 
-type HeroBlockViewProps = ModelProps<HeroBlockModel> & {
+/**
+ * Props interface for HeroBlock component - extends ViewProps
+ */
+export interface HeroBlockProps extends ViewProps {
+  /** Main headline text */
+  title?: string;
+  /** Subtitle or description text */
+  subtitle?: string;
+  /** Background image URL */
+  backgroundImage?: string;
+  /** Background gradient CSS value */
+  backgroundGradient?: string;
+  /** Background color theme variant */
+  backgroundColor?: 'default' | 'primary' | 'secondary' | 'surface';
   /** Action buttons (data-driven) */
   actions?: ButtonProps[];
-  /** Additional content below the text */
-  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 {}
+  /** Text alignment */
+  textAlign?: 'left' | 'center' | 'right';
+  /** Block height preset */
+  blockHeight?: 'small' | 'medium' | 'large' | 'viewport';
+  /** Custom overlay opacity (0-1) when using background images */
+  overlayOpacity?: number;
+}
 
-// View component - handles the actual rendering
+/**
+ * HeroBlockView - Pure view component that renders the actual hero block
+ * 
+ * This component receives fully processed props from createSerializableView
+ * and renders the hero block using Material-UI components with all styling applied.
+ */
 function HeroBlockView({
   title = '',
   subtitle,
@@ -50,12 +66,9 @@ function HeroBlockView({
   textAlign = 'center',
   blockHeight = 'medium',
   overlayOpacity = 0.5,
-  ...restProps
-}: HeroBlockViewProps) {
-  const { gridProps, styleProps, htmlProps } = useBaseProps(restProps);
-  
-  // Mark as QwickApp component
-  (HeroBlockView as any)[QWICKAPP_COMPONENT] = true;
+  gridProps,
+  ...props
+}: HeroBlockProps & { gridProps?: any }) {
   const theme = useTheme();
 
   // Map height variants to actual heights
@@ -113,16 +126,8 @@ function HeroBlockView({
   return (
     <Box
       component="section"
-      {...htmlProps}
-      {...styleProps}
-      {...(gridProps && {
-        'data-grid-span': gridProps.span,
-        'data-grid-xs': gridProps.xs,
-        'data-grid-sm': gridProps.sm,
-        'data-grid-md': gridProps.md,
-        'data-grid-lg': gridProps.lg,
-        'data-grid-xl': gridProps.xl,
-      })}
+      {...props}
+      {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
       sx={{
         position: 'relative',
         display: 'flex',
@@ -136,7 +141,7 @@ function HeroBlockView({
         backgroundPosition: backgroundImage ? 'center' : 'initial',
         backgroundRepeat: 'no-repeat',
         overflow: 'hidden',
-        ...styleProps.sx,
+        ...props.sx,
       }}
     >
       {/* Overlay for background images */}
@@ -234,114 +239,17 @@ function HeroBlockView({
   );
 }
 
-// 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;
-  }
-
-  // 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!,
-    restProps as Partial<HeroBlockModel>,
-    HeroBlockModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-
-  // Show loading state
-  if (loading) {
-    return (
-      <HeroBlockView
-        title="Loading Hero..."
-        backgroundColor="default"
-        blockHeight="medium"
-        textAlign="center"
-      />
-    );
-  }
-
-  if (error) {
-    console.error('Error loading hero block:', error);
-    if (process.env.NODE_ENV !== 'production') {
-      return (
-        <HeroBlockView
-          title="Error Loading Hero"
-          subtitle={error.message}
-          backgroundColor="default"
-          blockHeight="medium"
-          textAlign="center"
-        />
-      );
-    }
-    return null;
-  }
-
-  return <HeroBlockView {...heroProps} />;
-}
-
-// Mark as QwickApp component
-(HeroBlock as any)[QWICKAPP_COMPONENT] = true;
+/**
+ * Create HeroBlock component using the factory pattern
+ */
+export const HeroBlock: SerializableComponent<HeroBlockProps> = createSerializableView<HeroBlockProps>({
+  tagName: 'HeroBlock',
+  version: '1.0.0',
+  role: 'container',
+  View: HeroBlockView
+});
 
+/**
+ * Export the component as default
+ */
 export default HeroBlock;