@qwickapps/react-framework 1.4.0 → 1.4.2

package/src/components/blocks/Text.tsx

@@ -1,5 +1,8 @@
 /**
- * Text - Comprehensive typography display component with serialization support
+ * Text - Factory-based typography component with serialization support
+ * 
+ * Migrated from class-based ModelView to factory pattern for better
+ * schema-driven architecture while preserving all typography features.
  * 
  * Features:
  * - Complete typography variant support (h1-h6, body1/2, subtitle, etc.)
@@ -7,30 +10,31 @@
  * - Custom typography overrides (fontSize, fontFamily, etc.)
  * - Semantic HTML element rendering
  * - Text formatting and decoration options
- * - Full serialization support via ModelView
+ * - Full serialization support via createSerializableView
  * 
  * 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;
-};
+import React from 'react';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+import { ComponentTransformer } from '../../schemas/transformers/ComponentTransformer';
+import TextSchema from '../../schemas/TextSchema';
+import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
 
-export interface TextProps extends TextViewProps, WithDataBinding {}
+/**
+ * Props interface for Text component
+ * Uses SchemaProps<typeof TextSchema> for clean typing
+ */
+export type TextProps = ViewProps & SchemaProps<typeof TextSchema>;
 
-// View component - handles the actual rendering
+/**
+ * TextView - Pure view component that renders the typography
+ * 
+ * This component receives fully processed props from createSerializableView
+ * and renders the text using Material-UI Typography with all styling applied.
+ */
 function TextView({
   content,
   variant = 'body1',
@@ -49,22 +53,15 @@ function TextView({
   fontFamily,
   customColor,
   maxWidth,
-  children,
-  onClick,
-  style,
   className,
+  style,
   ...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;
+}: TextProps) {
+  // Use content prop directly (already a string from content-prop strategy)
+  const textContent = content || '';
 
   // Early return if no content provided
-  if (!textContent && textContent !== 0) {
+  if (!textContent) {
     return null;
   }
 
@@ -86,14 +83,12 @@ function TextView({
   if (textDecoration !== 'none') customStyles.textDecoration = textDecoration;
   if (textTransform !== 'none') customStyles.textTransform = textTransform;
 
-  // Handle onClick cursor
-  if (onClick) customStyles.cursor = 'pointer';
+  // Handle onClick cursor if onClick is provided
+  if (restProps.onClick) customStyles.cursor = 'pointer';
 
   return (
     <Typography
-      {...htmlProps}
-      {...styleProps}
-      {...otherProps}
+      {...restProps}
       variant={variant}
       color={color as any}
       align={align}
@@ -103,183 +98,90 @@ function TextView({
       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} />;
+/**
+ * Create Text component using the factory pattern
+ */
+export const Text: SerializableComponent<TextProps> = createSerializableView<TextProps>({
+  tagName: 'Text',
+  version: '1.0.0',
+  role: 'view',
+  View: TextView,
+  childrenStrategy: { mode: 'content-prop', propName: 'content' }
+});
+
+// Register HTML patterns that Text component can handle
+(Text as any).registerPatternHandlers = (registry: any): void => {
+  // Register paragraph elements
+  if (!registry.hasPattern('p')) {
+    registry.registerPattern('p', (Text as any).transformParagraph);
   }
   
-  // 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);
+  // Register heading elements
+  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+  headings.forEach(heading => {
+    if (!registry.hasPattern(heading)) {
+      registry.registerPattern(heading, (element: Element) => (Text as any).transformHeading(element, heading));
     }
+  });
+  
+  // Register span elements
+  if (!registry.hasPattern('span')) {
+    registry.registerPattern('span', (Text as any).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;
+// Transform paragraph elements to Text component
+(Text as any).transformParagraph = (element: Element): any => {
+  return {
+    tagName: 'Text',
+    props: {
+      variant: 'body1',
+      component: 'p',
+      content: element.textContent || ''
+    }
+  };
+};
 
-  // 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>
-    );
-  }
+// Transform heading elements to Text component
+(Text as any).transformHeading = (element: Element, tagName: string): any => {
+  const variantMap: { [key: string]: string } = {
+    'h1': 'h1',
+    'h2': 'h2', 
+    'h3': 'h3',
+    'h4': 'h4',
+    'h5': 'h5',
+    'h6': 'h6'
+  };
 
-  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 {
+    tagName: 'Text',
+    props: {
+      variant: variantMap[tagName] || 'h4',
+      component: tagName,
+      content: element.textContent || ''
     }
-    return null;
-  }
+  };
+};
 
-  console.log('Resolved props for Text:', textProps);
-  return <TextView {...textProps} />;
-}
+// Transform span elements to Text component
+(Text as any).transformSpan = (element: Element): any => {
+  return {
+    tagName: 'Text',
+    props: {
+      variant: 'body2',
+      component: 'span',
+      content: element.textContent || ''
+    }
+  };
+};
 
+/**
+ * Export the component as default
+ */
 export default Text;

package/src/components/buttons/Button.tsx

@@ -15,12 +15,10 @@
  */
 
 import React, { ReactElement } from 'react';
-import { Button as MuiButton, ButtonProps as MuiButtonProps, CircularProgress, Paper, Typography } from '@mui/material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
-import { useDataBinding } from '../../hooks';
+import { Button as MuiButton, ButtonProps as MuiButtonProps, CircularProgress } from '@mui/material';
 import ButtonModel from '../../schemas/ButtonSchema';
-import { ModelView } from '../base/ModelView';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
 
 // Action serialization pattern for button clicks
 export interface ButtonAction {
@@ -31,23 +29,24 @@ export interface ButtonAction {
   customHandler?: string;
 }
 
-type ButtonViewProps = ModelProps<ButtonModel> & {
-  /** Icon to display (before text) */
+export interface ButtonProps extends ViewProps {
+  // Component-specific props from ButtonModel
+  label?: string;
+  variant?: 'primary' | 'secondary' | 'outlined' | 'text' | 'contained';
+  buttonSize?: 'small' | 'medium' | 'large';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  // Additional props for enhanced functionality
   icon?: React.ReactNode;
-  /** Icon to display after text */
   endIcon?: React.ReactNode;
-  /** Event handler for clicks */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  /** Button content when using children */
-  children?: React.ReactNode;
-  /** Serializable action descriptor for buttons */
   action?: ButtonAction;
-};
-
-export interface ButtonProps extends ButtonViewProps, WithDataBinding {}
+}
 
 // View component - handles the actual rendering
-const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props, ref) => {
+const ButtonView = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     label,
     variant = 'primary',
@@ -64,8 +63,6 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props,
     children,
     ...restProps
   } = props;
-  
-  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Map our variants to MUI variants
   const getMuiVariant = (): MuiButtonProps['variant'] => {
@@ -170,8 +167,7 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props,
     size: buttonSize,
     disabled: disabled || loading,
     fullWidth,
-    ...htmlProps,
-    ...styleProps,
+    ...restProps,
     sx: {
       // Ensure consistent text transform
       textTransform: 'none',
@@ -181,7 +177,7 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props,
           marginRight: 1,
         },
       }),
-      ...styleProps.sx,
+      ...(restProps.sx || {}),
     },
     startIcon: loading ? (
       <CircularProgress
@@ -226,177 +222,83 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props,
 
 ButtonView.displayName = 'ButtonView';
 
-// Main component with data binding support and serialization capability
-export class Button extends ModelView<ButtonProps, ButtonModel> {
-  // Component self-declaration for serialization
-  static readonly tagName = 'Button';
-  static readonly version = '1.0.0';
-  
-  // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
-    return <Button {...jsonData} />;
+// Create the serializable Button component using the factory
+export const Button: SerializableComponent<ButtonProps> = createSerializableView<ButtonProps>({
+  tagName: 'Button',
+  version: '1.0.0',
+  role: 'view',
+  View: ButtonView,
+  // Button component uses default react-children strategy for potential child content
+});
+
+// Register HTML patterns that Button component can handle
+(Button as any).registerPatternHandlers = (registry: any): void => {
+  // Register button elements
+  if (!registry.hasPattern('button')) {
+    registry.registerPattern('button', transformButton);
   }
   
-  // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
-    return {
-      label: this.props.label,
-      variant: this.props.variant,
-      buttonSize: this.props.buttonSize,
-      href: this.props.href,
-      target: this.props.target,
-      disabled: this.props.disabled,
-      loading: this.props.loading,
-      fullWidth: this.props.fullWidth,
-      // Include action pattern for click handlers
-      action: this.props.action
-    };
-  }
-
-  // Button component renders traditional props view
-  protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
-    return <ButtonView {...restProps} />;
+  // Register input type="button" elements
+  if (!registry.hasPattern('input[type="button"]')) {
+    registry.registerPattern('input[type="button"]', transformInputButton);
   }
-
-  // Button component renders data-bound view
-  protected renderWithDataBinding(): React.ReactElement {
-    return <ButtonWithDataBinding {...this.props} />;
+  
+  // Register input type="submit" elements
+  if (!registry.hasPattern('input[type="submit"]')) {
+    registry.registerPattern('input[type="submit"]', transformSubmitButton);
   }
+};
 
-  // Register HTML patterns that Button component can handle
-  static registerPatternHandlers(registry: any): void {
-    // Register button elements
-    if (!registry.hasPattern('button')) {
-      registry.registerPattern('button', Button.transformButton);
-    }
-    
-    // Register input type="button" elements
-    if (!registry.hasPattern('input[type="button"]')) {
-      registry.registerPattern('input[type="button"]', Button.transformInputButton);
+// Transform button elements to Button component
+function transformButton(element: Element): any {
+  const variant = element.getAttribute('data-variant') || 
+                 (element.className.includes('btn-primary') ? 'primary' : 
+                  element.className.includes('btn-outlined') ? 'outlined' : 'secondary');
+  const disabled = element.hasAttribute('disabled');
+  const href = element.getAttribute('data-href');
+  const target = element.getAttribute('data-target');
+
+  return {
+    tagName: 'Button',
+    props: {
+      label: element.textContent || 'Button',
+      variant,
+      disabled,
+      href: href || undefined,
+      target: target || undefined
     }
-    
-    // Register input type="submit" elements
-    if (!registry.hasPattern('input[type="submit"]')) {
-      registry.registerPattern('input[type="submit"]', Button.transformSubmitButton);
-    }
-  }
-
-  // Transform button elements to Button component
-  private static transformButton(element: Element): any {
-    const variant = element.getAttribute('data-variant') || 
-                   (element.className.includes('btn-primary') ? 'primary' : 
-                    element.className.includes('btn-outlined') ? 'outlined' : 'secondary');
-    const disabled = element.hasAttribute('disabled');
-    const href = element.getAttribute('data-href');
-    const target = element.getAttribute('data-target');
-
-    return {
-      tagName: 'Button',
-      props: {
-        label: element.textContent || 'Button',
-        variant,
-        disabled,
-        href: href || undefined,
-        target: target || undefined
-      }
-    };
-  }
-
-  // Transform input type="button" elements to Button component
-  private static transformInputButton(element: Element): any {
-    const disabled = element.hasAttribute('disabled');
-    const value = element.getAttribute('value') || 'Button';
-
-    return {
-      tagName: 'Button',
-      props: {
-        label: value,
-        variant: 'secondary',
-        disabled
-      }
-    };
-  }
-
-  // Transform input type="submit" elements to Button component
-  private static transformSubmitButton(element: Element): any {
-    const disabled = element.hasAttribute('disabled');
-    const value = element.getAttribute('value') || 'Submit';
-
-    return {
-      tagName: 'Button',
-      props: {
-        label: value,
-        variant: 'primary',
-        disabled,
-        type: 'submit'
-      }
-    };
-  }
+  };
 }
 
-// Helper component to handle data binding with hooks (since we can't use hooks in class components)
-function ButtonWithDataBinding(props: ButtonProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
-
-  // Use data binding
-  const bindingResult = useDataBinding<ButtonModel>(
-    dataSource!,
-    restProps as Partial<ButtonModel>,
-    ButtonModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-  
-  // Check if we're still loading data using the metadata properties
-  const bindingLoading = bindingResult.$loading;
-  
-  // Extract all the actual button properties (excluding metadata)
-  const { dataSource: _source, $loading, $error, $dataSource, $cached, cached, ...buttonProps } = bindingResult;
-  const error = bindingResult.$error;
-
-  // Show loading state while fetching data
-  if (bindingLoading) {
-    return (
-      <Paper
-        variant="outlined"
-        sx={{
-          p: 2,
-          textAlign: 'center'
-        }}
-      >
-        <Typography variant="body2">Loading Button...</Typography>
-        <Typography variant="caption" color="text.secondary">
-          Loading button configuration from data source...
-        </Typography>
-      </Paper>
-    );
-  }
-
-  if (error) {
-    console.error('Error loading button:', error);
-    if (process.env.NODE_ENV !== 'production') {
-      return (
-        <Paper
-          variant="outlined"
-          sx={{
-            p: 2,
-            textAlign: 'center',
-            borderColor: 'error.main'
-          }}
-        >
-          <Typography variant="body2" color="error">
-            Error loading button: {error.message}
-          </Typography>
-        </Paper>
-      );
+// Transform input type="button" elements to Button component
+function transformInputButton(element: Element): any {
+  const disabled = element.hasAttribute('disabled');
+  const value = element.getAttribute('value') || 'Button';
+
+  return {
+    tagName: 'Button',
+    props: {
+      label: value,
+      variant: 'secondary',
+      disabled
     }
-    return null;
-  }
-
-  return <ButtonView {...buttonProps} />;
+  };
 }
 
-// Mark as QwickApp component
-(Button as any)[QWICKAPP_COMPONENT] = true;
+// Transform input type="submit" elements to Button component
+function transformSubmitButton(element: Element): any {
+  const disabled = element.hasAttribute('disabled');
+  const value = element.getAttribute('value') || 'Submit';
+
+  return {
+    tagName: 'Button',
+    props: {
+      label: value,
+      variant: 'primary',
+      disabled,
+      type: 'submit'
+    }
+  };
+}
 
 export default Button;