@qwickapps/react-framework 1.4.1 → 1.4.3

package/src/components/base/ModelView.tsx

@@ -1,199 +1,333 @@
 /**
- * ModelView - Abstract Base Class for Serializable Components
+ * ModelView - Abstract Base Class implementing ViewSchema
  * 
- * Provides common serialization patterns and data binding support for
- * all QwickApps components. This eliminates code duplication and ensures
- * consistent behavior across all serializable components.
+ * This abstract base class processes ViewSchema props and provides them
+ * to subclasses through processed props. All concrete components should
+ * extend this class to get consistent ViewSchema prop handling.
  * 
- * All components extending ModelView must implement:
- * - getComponentSpecificProps(): Component-specific serialization properties
- * - renderView(): Render method for traditional props
- * - renderWithDataBinding(): Render method for data-bound components
- * - static tagName and version properties
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * Key Features:
+ * - Processes all ViewSchema properties (grid, spacing, styling, etc.)
+ * - Provides processed props to subclasses via getProcessedProps()
+ * - Maintains abstract pattern for component-specific rendering
+ * - Handles serialization and data binding
  */
 
-import React, { ReactElement, ReactNode } from 'react';
-import type { WithDataBinding } from '@qwickapps/schema';
-import { Serializable } from '../../schemas/types/Serializable';
+import { Serializable } from "@/schemas";
+import { SchemaProps, WithDataBinding } from "@qwickapps/schema";
+import React, { ReactElement, ReactNode } from "react";
+import { WithBaseProps } from '../../hooks';
+import ViewSchema from '../../schemas/ViewSchema';
 import { extractTextFromReactNode } from '../../utils/reactUtils';
 
 /**
- * Abstract base class for all serializable QwickApps components
- * Handles common serialization patterns, data binding, and rendering logic
+ * Convert ViewSchema props to BaseComponentProps format
+ */
+function convertSchemaToBaseProps(schema: Partial<ViewSchema>): WithBaseProps {
+  const {
+    // Grid props - convert strings to proper types
+    span,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+
+    // Style props - convert JSON strings to objects
+    sx,
+    style,
+
+    // All other props pass through directly
+    ...restProps
+  } = schema;
+
+  return {
+    // Convert grid span values
+    span: span === 'auto' ? 'auto' : span === 'grow' ? 'grow' : (span && typeof span === 'string') ? parseInt(span, 10) : span,
+    xs: xs === 'auto' ? 'auto' : (xs && typeof xs === 'string') ? parseInt(xs, 10) : xs,
+    sm: sm === 'auto' ? 'auto' : (sm && typeof sm === 'string') ? parseInt(sm, 10) : sm,
+    md: md === 'auto' ? 'auto' : (md && typeof md === 'string') ? parseInt(md, 10) : md,
+    lg: lg === 'auto' ? 'auto' : (lg && typeof lg === 'string') ? parseInt(lg, 10) : lg,
+    xl: xl === 'auto' ? 'auto' : (xl && typeof xl === 'string') ? parseInt(xl, 10) : xl,
+
+    // Parse JSON strings for sx and style
+    sx: typeof sx === 'string' ? (() => {
+      try { return JSON.parse(sx); } catch { return sx; }
+    })() : sx,
+
+    style: typeof style === 'string' ? (() => {
+      try { return JSON.parse(style); } catch { return style; }
+    })() : style,
+
+    // Convert event handlers from strings to functions
+    onClick: typeof schema.onClick === 'string' ? convertEventHandler(schema.onClick) : schema.onClick,
+    onMouseEnter: typeof schema.onMouseEnter === 'string' ? convertEventHandler(schema.onMouseEnter) : schema.onMouseEnter,
+    onMouseLeave: typeof schema.onMouseLeave === 'string' ? convertEventHandler(schema.onMouseLeave) : schema.onMouseLeave,
+    onFocus: typeof schema.onFocus === 'string' ? convertEventHandler(schema.onFocus) : schema.onFocus,
+    onBlur: typeof schema.onBlur === 'string' ? convertEventHandler(schema.onBlur) : schema.onBlur,
+
+    // Pass through all other props directly
+    ...restProps
+  } as WithBaseProps;
+}
+
+/**
+ * Convert string event handler to function
+ */
+function convertEventHandler(handlerStr?: string): ((event: any) => void) | undefined {
+  if (!handlerStr || typeof handlerStr !== 'string') {
+    return undefined;
+  }
+
+  try {
+    // Create function from string - handle both function declarations and expressions
+    let func: Function;
+    if (handlerStr.trim().startsWith('function')) {
+      func = new Function(`return (${handlerStr})`)();
+    } else {
+      func = new Function('event', handlerStr);
+    }
+
+    return (event: any) => func(event);
+  } catch (error) {
+    console.error('Error parsing event handler:', error);
+    return undefined;
+  }
+}
+
+/**
+ * Processed props that subclasses receive
  */
-export abstract class ModelView<TProps = any, TModel = any> 
-  extends React.Component<TProps & WithDataBinding> 
+export interface ProcessedProps {
+  gridProps: any;
+  styleProps: any;
+  htmlProps: any;
+  restProps: any;
+}
+
+/**
+ * Abstract base class implementing ViewSchema
+ * All concrete components should extend this class
+ */
+export abstract class ModelView<TProps = any, TModel = any>
+  extends React.Component<TProps & SchemaProps<ViewSchema> & WithDataBinding>
   implements Serializable {
-  
+
   // Static properties - must be overridden by subclasses
-  // Note: TypeScript doesn't support abstract static members, so we provide defaults
   static readonly tagName: string = '';
   static readonly version: string = '';
-  
+
   /**
    * Common fromJson implementation
-   * Subclasses can override this if they need custom deserialization logic
    */
   static fromJson(jsonData: any): ReactElement {
-    // This will be overridden by subclasses but provides the base pattern
-    const ComponentClass = this as any;
-    return React.createElement(ComponentClass, jsonData);
+    const { tagName, version, data } = jsonData;
+    if (tagName !== this.tagName) {
+      throw new Error(`Cannot deserialize: Expected tagName '${this.tagName}' but got '${tagName}'`);
+    }
+    if (version !== this.version) {
+      console.warn(`Version mismatch: Expected ${this.version} but got ${version}`);
+    }
+
+    return React.createElement(this as any, data || {});
   }
-  
+
   /**
    * Common toJson implementation with hooks for customization
-   * Combines base serializable props with component-specific props
    */
   toJson(): any {
     const baseProps = this.getBaseSerializableProps();
     const componentProps = this.getComponentSpecificProps();
-    
     return {
-      ...baseProps,
-      ...componentProps
+      tagName: (this.constructor as typeof ModelView).tagName,
+      version: (this.constructor as typeof ModelView).version,
+      data: {
+        ...baseProps,
+        ...componentProps
+      }
     };
   }
-  
+
+  /**
+   * Get processed props for subclasses to use
+   * This converts ViewSchema props and processes them through useBaseProps
+   */
+  protected getProcessedProps(): ProcessedProps {
+    const { dataSource, bindingOptions, ...schemaProps } = this.props;
+
+    // Convert ViewSchema props to BaseComponentProps format
+    const convertedProps = convertSchemaToBaseProps(schemaProps);
+
+    // Process through useBaseProps utility (this is a bit of a hack since we're in a class component)
+    // We'll simulate what useBaseProps does
+    const mockProps = {
+      gridProps: {
+        span: convertedProps.span,
+        xs: convertedProps.xs,
+        sm: convertedProps.sm,
+        md: convertedProps.md,
+        lg: convertedProps.lg,
+        xl: convertedProps.xl,
+      },
+      styleProps: {
+        className: convertedProps.className,
+        sx: convertedProps.sx,
+        style: convertedProps.style,
+      },
+      htmlProps: {
+        id: convertedProps.id,
+        role: convertedProps.role,
+        'aria-label': convertedProps['aria-label'],
+        'aria-labelledby': convertedProps['aria-labelledby'],
+        'aria-describedby': convertedProps['aria-describedby'],
+        'data-testid': convertedProps['data-testid'],
+        onClick: convertedProps.onClick,
+        onMouseEnter: convertedProps.onMouseEnter,
+        onMouseLeave: convertedProps.onMouseLeave,
+        onFocus: convertedProps.onFocus,
+        onBlur: convertedProps.onBlur,
+      },
+      restProps: {
+        // All the spacing, dimension, and background props
+        width: convertedProps.width,
+        height: convertedProps.height,
+        minWidth: convertedProps.minWidth,
+        minHeight: convertedProps.minHeight,
+        maxWidth: convertedProps.maxWidth,
+        maxHeight: convertedProps.maxHeight,
+        padding: convertedProps.padding,
+        paddingTop: convertedProps.paddingTop,
+        paddingRight: convertedProps.paddingRight,
+        paddingBottom: convertedProps.paddingBottom,
+        paddingLeft: convertedProps.paddingLeft,
+        paddingX: convertedProps.paddingX,
+        paddingY: convertedProps.paddingY,
+        margin: convertedProps.margin,
+        marginTop: convertedProps.marginTop,
+        marginRight: convertedProps.marginRight,
+        marginBottom: convertedProps.marginBottom,
+        marginLeft: convertedProps.marginLeft,
+        marginX: convertedProps.marginX,
+        marginY: convertedProps.marginY,
+        background: convertedProps.background,
+        backgroundImage: convertedProps.backgroundImage,
+        backgroundGradient: convertedProps.backgroundGradient,
+        textAlign: convertedProps.textAlign,
+      }
+    };
+
+    return mockProps;
+  }
+
   /**
    * Common base props that all components serialize
-   * Handles ReactNode children, data binding, and common styling props
    */
   protected getBaseSerializableProps(): any {
     const props = this.props as any;
     return {
-      // Handle ReactNode children conversion
       children: props.children ? this.serializeChildren(props.children) : undefined,
-      // Preserve data binding
       dataSource: props.dataSource,
       bindingOptions: props.bindingOptions,
-      // Common styling props that many components have
-      className: props.className,
-      id: props.id
+      // Include all ViewSchema props in serialization
+      ...props,
     };
   }
-  
+
   /**
    * Hook for subclasses to add component-specific serialization
-   * Must be implemented by each component to include its specific props
    */
   protected abstract getComponentSpecificProps(): any;
-  
+
   /**
    * Common children serialization logic
-   * Handles different children types based on component capabilities
    */
   protected serializeChildren(children: ReactNode): any {
     if (typeof children === 'string') {
       return children;
     }
-    
-    // For complex components (Section), we'll let the specific component handle serialization
-    // to avoid circular dependencies. The Section component can override this method.
+
     if (this.hasNestedComponents(children)) {
-      // This should be overridden by components that support nested components
       throw new Error('Components with nested components must override serializeChildren method');
     }
-    
-    // For simple components (Code, Button), extract text
+
     return extractTextFromReactNode(children);
   }
-  
+
   /**
    * Helper to determine if children contain other serializable components
-   * Override in subclasses that support nested components (like Section)
    */
   protected hasNestedComponents(children: ReactNode): boolean {
-    // Default: false for simple components
     return false;
   }
-  
+
   /**
    * Common render pattern
-   * Determines whether to use data binding or traditional props rendering
    */
   render() {
     const props = this.props as any;
-    
+
     if (props.dataSource) {
       return this.renderWithDataBinding();
     }
-    
+
     return this.renderView();
   }
-  
+
   /**
    * Hook for subclasses to implement traditional props rendering
-   * This is where the component renders using props directly
    */
   protected abstract renderView(): React.ReactElement;
-  
+
   /**
    * Hook for subclasses to implement data binding rendering
-   * This should render the data-bound version of the component
    */
   protected abstract renderWithDataBinding(): React.ReactElement;
 
   /**
    * Register HTML pattern handlers for this component
-   * Override this method to register patterns that this component can handle
-   * @param registry - ComponentTransformer to register patterns with
    */
-  static registerPatternHandlers(registry: any): void {
+  static registerPatternHandlers(_registry: any): void {
     // Default: no patterns to register
-    // Subclasses should override this to register their HTML patterns
   }
 }
 
 /**
- * Type helper for ModelView component constructors
- * Ensures proper typing for registration and factory functions
- */
-export interface ModelViewConstructor<TProps = any, TModel = any> {
-  new (props: TProps & WithDataBinding): ModelView<TProps, TModel>;
-  readonly tagName: string;
-  readonly version: string;
-  fromJson(jsonData: any): ReactElement;
-}
-
-/**
- * Helper function to create a ModelView component class
- * Provides better TypeScript inference for component registration
+ * Helper function for creating ModelView component classes with ViewSchema support
+ * Updated to work with the new ViewSchema processing system
  */
 export function createModelViewClass<TProps, TModel>(
   config: {
     tagName: string;
     version: string;
-    getComponentSpecificProps: (props: TProps) => any;
+    getComponentSpecificProps: (props: TProps, processedProps: ProcessedProps) => any;
     hasNestedComponents?: (children: ReactNode) => boolean;
-    renderView: (props: TProps) => React.ReactElement;
-    renderWithDataBinding: (props: TProps & WithDataBinding) => React.ReactElement;
+    renderView: (props: TProps, processedProps: ProcessedProps) => React.ReactElement;
+    renderWithDataBinding: (props: TProps & WithDataBinding, processedProps: ProcessedProps) => React.ReactElement;
   }
-): ModelViewConstructor<TProps, TModel> {
-  
+): any {
+
   class DynamicModelView extends ModelView<TProps, TModel> {
     static readonly tagName = config.tagName;
     static readonly version = config.version;
-    
+
     protected getComponentSpecificProps(): any {
-      return config.getComponentSpecificProps(this.props as TProps);
+      const processedProps = this.getProcessedProps();
+      return config.getComponentSpecificProps(this.props as TProps, processedProps);
     }
-    
+
     protected hasNestedComponents(children: ReactNode): boolean {
       return config.hasNestedComponents ? config.hasNestedComponents(children) : false;
     }
-    
+
     protected renderView(): React.ReactElement {
-      return config.renderView(this.props as TProps);
+      const processedProps = this.getProcessedProps();
+      return config.renderView(this.props as TProps, processedProps);
     }
-    
+
     protected renderWithDataBinding(): React.ReactElement {
-      return config.renderWithDataBinding(this.props as TProps & WithDataBinding);
+      const processedProps = this.getProcessedProps();
+      return config.renderWithDataBinding(this.props as TProps & WithDataBinding, processedProps);
     }
   }
-  
-  return DynamicModelView as ModelViewConstructor<TProps, TModel>;
-}
 
-export default ModelView;
+  return DynamicModelView;
+}

package/src/components/base/index.ts

@@ -7,5 +7,6 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-export { default as ModelView, createModelViewClass } from './ModelView';
-export type { ModelViewConstructor } from './ModelView';
+export { ModelView, createModelViewClass } from './ModelView';
+export { default as Container, } from './Container';
+export type { ContainerProps } from './Container';

package/src/components/blocks/Article.tsx

@@ -14,14 +14,14 @@
  */
 
 import { Box, Typography } from '@mui/material';
-import { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import React, { ReactElement } from 'react';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import ArticleModel from '../../schemas/ArticleSchema';
 import { ModelView } from '../base/ModelView';
 import Html from '../Html';
 
-type ArticleViewProps = ModelProps<ArticleModel>;
+type ArticleViewProps = SchemaProps<ArticleModel>;
 
 export interface ArticleProps extends ArticleViewProps, WithDataBinding {
 }
@@ -125,11 +125,6 @@ export class Article extends ModelView<ArticleProps, ArticleModel> {
   static readonly tagName = 'Article';
   static readonly version = '1.0.0';
   
-  // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
-    return <Article {...jsonData} />;
-  }
-  
   // Component-specific serialization properties
   protected getComponentSpecificProps(): any {
     return {

package/src/components/blocks/CardListGrid.tsx

@@ -9,7 +9,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import React from 'react';
 import { useBaseProps, useDataBinding } from '../../hooks';
 import CardListGridModel from '../../schemas/CardListGridSchema';
@@ -17,7 +17,7 @@ import { GridLayout } from '../layout';
 import { FeatureCard } from './FeatureCard';
 import { ProductCard } from './ProductCard';
 
-type CardListGridViewProps = ModelProps<CardListGridModel> & {
+type CardListGridViewProps = SchemaProps<CardListGridModel> & {
   /** Render function for each item (traditional usage) */
   renderItem?: (item: any, index: number) => React.ReactNode;
 };