@qwickapps/react-framework 1.4.1 → 1.4.2

package/src/components/layout/GridCell.tsx

@@ -1,43 +1,43 @@
 /**
- * GridCell - Simple cell wrapper for GridLayout with serialization support
+ * GridCell - Factory-based implementation using createSerializableView
+ * 
+ * Migrated from class-based ModelView to factory pattern for better
+ * schema-driven architecture while preserving all functionality.
  * 
  * A lightweight wrapper that applies grid props to any content
  * Uses the base props pattern for consistency
- * Full serialization support via ModelView including nested components
+ * Full serialization support
  * 
  * Usage:
  * - Traditional: <GridCell span={6} background="primary">...</GridCell>
  * - Data-driven: <GridCell dataSource="layout.cell" />
- * - Serializable: ComponentTransformer.serialize(<GridCell ... />)
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement, ReactNode } from 'react';
+import React from 'react';
 import { Box } from '@mui/material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
-import { useDataBinding } from '../../hooks';
-import GridCellModel from '../../schemas/GridCellSchema';
-import { ModelView } from '../base/ModelView';
-import { ComponentTransformer } from '../../schemas/transformers/ComponentTransformer';
-
-type GridCellViewProps = ModelProps<GridCellModel>;
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
 
-export interface GridCellProps extends GridCellViewProps, WithDataBinding {}
-
-// View component - handles the actual rendering
-function GridCellView(props: GridCellViewProps) {
-  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
-  
-  // Mark as QwickApp component
-  (GridCellView as any)[QWICKAPP_COMPONENT] = true;
+/**
+ * Props interface for GridCell component - extends ViewProps
+ */
+export interface GridCellProps extends ViewProps {
+  // Note: Grid responsive properties (span, xs, sm, md, lg, xl) are inherited from ViewProps
+  // Additional styling properties that might not be in ViewProps
+}
 
+/**
+ * GridCellView - Pure view component that renders the actual grid cell
+ * 
+ * This component receives fully processed props from createSerializableView
+ * and renders the grid cell using Material-UI Box with all styling applied.
+ */
+function GridCellView({ children, gridProps, ...props }: GridCellProps & { gridProps?: any }) {
   return (
     <Box
-      {...htmlProps}
-      {...styleProps}
-      {...restProps}
+      {...props}
       // Store grid props as data attributes for GridLayout to pick up
       {...(gridProps && {
         'data-grid-span': gridProps.span,
@@ -48,108 +48,22 @@ function GridCellView(props: GridCellViewProps) {
         'data-grid-xl': gridProps.xl,
       })}
     >
-      {(restProps as any).children}
+      {children}
     </Box>
   );
 }
 
-// Main component with data binding support and serialization capability
-export class GridCell extends ModelView<GridCellProps, GridCellModel> {
-  // Component self-declaration for serialization
-  static readonly tagName = 'GridCell';
-  static readonly version = '1.0.0';
-  
-  // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
-    return <GridCell {...jsonData} />;
-  }
-  
-  // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
-    return {
-      // Grid responsive properties
-      span: this.props.span,
-      xs: this.props.xs,
-      sm: this.props.sm,
-      md: this.props.md,
-      lg: this.props.lg,
-      xl: this.props.xl,
-      // Styling properties
-      background: this.props.background,
-      padding: this.props.padding,
-      margin: this.props.margin,
-      height: this.props.height,
-      width: this.props.width,
-      className: this.props.className
-    };
-  }
-
-  // GridCell 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;
-  }
-
-  // GridCell component renders traditional props view
-  protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
-    return <GridCellView {...restProps} />;
-  }
-
-  // GridCell component renders data-bound view
-  protected renderWithDataBinding(): React.ReactElement {
-    return <GridCellWithDataBinding {...this.props} />;
-  }
-}
-
-// Helper component to handle data binding with hooks (since we can't use hooks in class components)
-function GridCellWithDataBinding(props: GridCellProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
-
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...cellProps } = useDataBinding<GridCellModel>(
-    dataSource!,
-    restProps as Partial<GridCellModel>,
-    GridCellModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-
-  // Show loading state
-  if (loading) {
-    return (
-      <Box sx={{ p: 2, textAlign: 'center', opacity: 0.6 }}>
-        Loading Cell...
-      </Box>
-    );
-  }
-
-  if (error) {
-    console.error('Error loading grid cell:', error);
-    if (process.env.NODE_ENV !== 'production') {
-      return (
-        <Box sx={{ p: 2, textAlign: 'center', borderColor: 'error.main', border: 1 }}>
-          Error Loading Cell: {error.message}
-        </Box>
-      );
-    }
-    return null;
-  }
-
-  console.log('Resolved props for GridCell:', cellProps);
-  return <GridCellView {...cellProps} />;
-}
-
+/**
+ * Create GridCell component using the factory pattern
+ */
+export const GridCell: SerializableComponent<GridCellProps> = createSerializableView<GridCellProps>({
+  tagName: 'GridCell',
+  version: '1.0.0',
+  role: 'container',
+  View: GridCellView
+});
 
+/**
+ * Export the component as default
+ */
 export default GridCell;

package/src/components/layout/GridLayout.tsx

@@ -1,39 +1,58 @@
 /**
- * GridLayout - Flexible grid layout component with serialization support
+ * GridLayout - Factory-based implementation using createSerializableView
+ * 
+ * Migrated from class-based ModelView to factory pattern for better
+ * schema-driven architecture while preserving all functionality.
  * 
  * Works with any component that has grid props (span, xs, sm, md, lg, xl)
  * Automatically wraps components in Grid when grid props are detected
- * Full serialization support via ModelView including nested components
+ * Full serialization support
  * 
  * Usage:
  * - Traditional: <GridLayout columns={3} spacing="medium">...</GridLayout>
  * - Data-driven: <GridLayout dataSource="layouts.main" />
- * - Serializable: ComponentTransformer.serialize(<GridLayout ... />)
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement, ReactNode } from 'react';
+import React from 'react';
 import { Grid, SxProps, Theme } from '@mui/material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
 import { SpacingValue, resolveSpacing } from '../../utils/spacing';
 import { DimensionValue, resolveDimension } from '../../utils/dimensions';
 import { QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
-import { useDataBinding } from '../../hooks';
-import GridLayoutModel from '../../schemas/GridLayoutSchema';
-import { ModelView } from '../base/ModelView';
-import { ComponentTransformer } from '../../schemas/transformers/ComponentTransformer';
-
-type GridLayoutViewProps = ModelProps<GridLayoutModel> & {
-  /** Custom styles */
-  sx?: SxProps<Theme>;
-  /** Inline styles */
-  style?: React.CSSProperties;
-};
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
 
-export interface GridLayoutProps extends GridLayoutViewProps, WithDataBinding {}
+/**
+ * Props interface for GridLayout component - extends ViewProps
+ */
+export interface GridLayoutProps extends ViewProps {
+  /** Number of equal-width columns for auto-distribution */
+  columns?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Spacing between grid items */
+  spacing?: string;
+  /** Make all grid items the same height */
+  equalHeight?: boolean;
+  /** Grid container height */
+  height?: string;
+  /** Grid container width */
+  width?: string;
+  /** Minimum grid container height */
+  minHeight?: string;
+  /** Minimum grid container width */
+  minWidth?: string;
+  /** Maximum grid container height */
+  maxHeight?: string;
+  /** Maximum grid container width */
+  maxWidth?: string;
+}
 
-// View component - handles the actual rendering
+/**
+ * GridLayoutView - Pure view component that renders the actual grid layout
+ * 
+ * This component receives fully processed props from createSerializableView
+ * and renders the grid layout using Material-UI Grid with all styling applied.
+ */
 function GridLayoutView({
   children,
   columns,
@@ -45,13 +64,9 @@ function GridLayoutView({
   minWidth,
   maxHeight,
   maxWidth,
-  className,
-  sx,
-  style,
-  ...restProps
-}: GridLayoutViewProps) {
-  // Mark as QwickApp component
-  (GridLayoutView as any)[QWICKAPP_COMPONENT] = true;
+  gridProps,
+  ...props
+}: GridLayoutProps & { gridProps?: any }) {
   
   const resolvedSpacing = resolveSpacing(spacing, 'gap');
   
@@ -139,7 +154,8 @@ function GridLayoutView({
     <Grid
       container
       spacing={resolvedSpacing}
-      className={className}
+      {...props}
+      {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
       sx={{
         width: '100%', // Ensure full width by default in MUI v6
         height: resolveDimension(height, 'height'),
@@ -158,113 +174,25 @@ function GridLayoutView({
             },
           },
         }),
-        ...sx,
+        ...props.sx,
       }}
-      style={style}
     >
       {processChildren()}
     </Grid>
   );
 }
 
-// Main component with data binding support and serialization capability
-export class GridLayout extends ModelView<GridLayoutProps, GridLayoutModel> {
-  // Component self-declaration for serialization
-  static readonly tagName = 'GridLayout';
-  static readonly version = '1.0.0';
-  
-  // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
-    return <GridLayout {...jsonData} />;
-  }
-  
-  // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
-    return {
-      columns: this.props.columns,
-      spacing: this.props.spacing,
-      equalHeight: this.props.equalHeight,
-      height: this.props.height,
-      width: this.props.width,
-      minHeight: this.props.minHeight,
-      minWidth: this.props.minWidth,
-      maxHeight: this.props.maxHeight,
-      maxWidth: this.props.maxWidth,
-      className: this.props.className,
-      style: this.props.style,
-      sx: this.props.sx
-    };
-  }
-
-  // GridLayout 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;
-  }
-
-  // GridLayout component renders traditional props view
-  protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
-    return <GridLayoutView {...restProps} />;
-  }
-
-  // GridLayout component renders data-bound view
-  protected renderWithDataBinding(): React.ReactElement {
-    return <GridLayoutWithDataBinding {...this.props} />;
-  }
-}
-
-// Helper component to handle data binding with hooks (since we can't use hooks in class components)
-function GridLayoutWithDataBinding(props: GridLayoutProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
-
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...gridProps } = useDataBinding<GridLayoutModel>(
-    dataSource!,
-    restProps as Partial<GridLayoutModel>,
-    GridLayoutModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-
-  // Show loading state
-  if (loading) {
-    return (
-      <Grid container sx={{ p: 3, textAlign: 'center' }}>
-        <Grid size={12}>
-          Loading Grid Layout...
-        </Grid>
-      </Grid>
-    );
-  }
-
-  if (error) {
-    console.error('Error loading grid layout:', error);
-    if (process.env.NODE_ENV !== 'production') {
-      return (
-        <Grid container sx={{ p: 3, textAlign: 'center', borderColor: 'error.main', border: 1 }}>
-          <Grid size={12}>
-            Error Loading Grid Layout: {error.message}
-          </Grid>
-        </Grid>
-      );
-    }
-    return null;
-  }
-
-  console.log('Resolved props for GridLayout:', gridProps);
-  return <GridLayoutView {...gridProps} />;
-}
+/**
+ * Create GridLayout component using the factory pattern
+ */
+export const GridLayout: SerializableComponent<GridLayoutProps> = createSerializableView<GridLayoutProps>({
+  tagName: 'GridLayout',
+  version: '1.0.0',
+  role: 'container',
+  View: GridLayoutView
+});
 
+/**
+ * Export the component as default
+ */
 export default GridLayout;