@qwickapps/react-framework 1.3.5 → 1.4.1

package/src/components/base/ModelView.tsx

@@ -0,0 +1,199 @@
+/**
+ * ModelView - Abstract Base Class for Serializable Components
+ * 
+ * Provides common serialization patterns and data binding support for
+ * all QwickApps components. This eliminates code duplication and ensures
+ * consistent behavior across all serializable components.
+ * 
+ * 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.
+ */
+
+import React, { ReactElement, ReactNode } from 'react';
+import type { WithDataBinding } from '@qwickapps/schema';
+import { Serializable } from '../../schemas/types/Serializable';
+import { extractTextFromReactNode } from '../../utils/reactUtils';
+
+/**
+ * Abstract base class for all serializable QwickApps components
+ * Handles common serialization patterns, data binding, and rendering logic
+ */
+export abstract class ModelView<TProps = any, TModel = any> 
+  extends React.Component<TProps & 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);
+  }
+  
+  /**
+   * 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
+    };
+  }
+  
+  /**
+   * 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
+    };
+  }
+  
+  /**
+   * 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 {
+    // 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
+ */
+export function createModelViewClass<TProps, TModel>(
+  config: {
+    tagName: string;
+    version: string;
+    getComponentSpecificProps: (props: TProps) => any;
+    hasNestedComponents?: (children: ReactNode) => boolean;
+    renderView: (props: TProps) => React.ReactElement;
+    renderWithDataBinding: (props: TProps & WithDataBinding) => React.ReactElement;
+  }
+): ModelViewConstructor<TProps, TModel> {
+  
+  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);
+    }
+    
+    protected hasNestedComponents(children: ReactNode): boolean {
+      return config.hasNestedComponents ? config.hasNestedComponents(children) : false;
+    }
+    
+    protected renderView(): React.ReactElement {
+      return config.renderView(this.props as TProps);
+    }
+    
+    protected renderWithDataBinding(): React.ReactElement {
+      return config.renderWithDataBinding(this.props as TProps & WithDataBinding);
+    }
+  }
+  
+  return DynamicModelView as ModelViewConstructor<TProps, TModel>;
+}
+
+export default ModelView;

package/src/components/base/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Base Components and Abstractions
+ * 
+ * Provides common base classes and utilities for creating
+ * serializable QwickApps components.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { default as ModelView, createModelViewClass } from './ModelView';
+export type { ModelViewConstructor } from './ModelView';

package/src/components/blocks/Article.tsx

@@ -15,11 +15,11 @@
 
 import { Box, Typography } from '@mui/material';
 import { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import React from 'react';
+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';
-import { defaultArticleRules, TransformConfig } from '../../utils/htmlTransform';
 
 type ArticleViewProps = ModelProps<ArticleModel>;
 
@@ -65,22 +65,15 @@ function ArticleView({
     );
   }
 
-  // Configure transformation for article content
-  const transformConfig: TransformConfig = {
-    rules: defaultArticleRules,
-    sanitize: true
-  };
-
   return (
     <Html
       component="article"
-      transformConfig={transformConfig}
       stripHeaders={skipHeader}
       placeholder="No content available"
       {...htmlProps}
-      {...styleProps}
       {...otherProps}
-      sx={{
+      {...styleProps}
+      {...{
         // Ensure proper width constraints for article content
         maxWidth: '800px',
         mx: 'auto',
@@ -126,18 +119,65 @@ function ArticleView({
   );
 }
 
-// Main component with data binding support
-function Article(props: ArticleProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class Article extends ModelView<ArticleProps, ArticleModel> {
+  // Component self-declaration for serialization
+  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 {
+      html: this.props.html,
+      skipHeader: this.props.skipHeader
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // Article component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <ArticleView {...restProps} />;
   }
 
+  // Article component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <ArticleWithDataBinding {...this.props} />;
+  }
+
+  // Register HTML patterns that Article component can handle
+  static registerPatternHandlers(registry: any): void {
+    // Register article elements
+    if (!registry.hasPattern('article')) {
+      registry.registerPattern('article', Article.transformArticle);
+    }
+  }
+
+  // Transform article elements to Article component
+  private static transformArticle(element: Element): any {
+    const skipHeader = element.getAttribute('data-skip-header') === 'true';
+    
+    return {
+      tagName: 'Article',
+      props: {
+        html: element.innerHTML,
+        skipHeader
+      }
+    };
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function ArticleWithDataBinding(props: ArticleProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const { dataSource: _source, loading, error, cached, ...articleProps } = useDataBinding<ArticleModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<ArticleModel>,
     ArticleModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
@@ -191,4 +231,3 @@ function Article(props: ArticleProps) {
 }
 
 export default Article;
-export { Article };