@qwickapps/react-framework 1.3.5 → 1.4.1

package/src/components/input/SelectInputField.tsx

@@ -1,15 +1,17 @@
 /**
- * SelectInputField - Select dropdown component with data binding support
+ * SelectInputField - Select dropdown component with serialization support
  * 
- * Provides a standardized select field with:
+ * Features:
+ * - Complete select dropdown functionality with options
+ * - Form validation and error handling
+ * - Data binding support for dynamic content
+ * - Full serialization support via ModelView
  * - Consistent Material-UI styling
- * - Data binding capabilities
- * - Comprehensive option support
- * - Focus and error handling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
+import React, { ReactElement } from 'react';
 import {
   FormControl,
   FormHelperText,
@@ -21,9 +23,9 @@ import {
   Typography
 } from '@mui/material';
 import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
-import { useDataBinding } from '../../hooks';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import SelectInputFieldModel, { SelectOption } from '../../schemas/SelectInputFieldSchema';
+import { ModelView } from '../base/ModelView';
 
 type SelectInputFieldViewProps = ModelProps<SelectInputFieldModel> & {
   /** Change handler */
@@ -129,21 +131,51 @@ function SelectInputFieldView({
   );
 }
 
-/**
- * SelectInputField component with data binding support
- * Supports both traditional props and dataSource-driven rendering
- */
-function SelectInputField(props: SelectInputFieldProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class SelectInputField extends ModelView<SelectInputFieldProps, SelectInputFieldModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'SelectInputField';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <SelectInputField {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      label: this.props.label,
+      value: this.props.value,
+      options: this.props.options,
+      required: this.props.required,
+      disabled: this.props.disabled,
+      error: this.props.error,
+      helperText: this.props.helperText,
+      placeholder: this.props.placeholder,
+      // Event handlers don't serialize
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // SelectInputField component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <SelectInputFieldView {...restProps} />;
   }
 
+  // SelectInputField component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <SelectInputFieldWithDataBinding {...this.props} />;
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function SelectInputFieldWithDataBinding(props: SelectInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const { dataSource: _source, loading, error, cached, ...selectInputFieldProps } = useDataBinding<SelectInputFieldModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<SelectInputFieldModel>,
     SelectInputFieldModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }

package/src/components/input/SwitchInputField.tsx

@@ -1,16 +1,17 @@
 /**
- * SwitchInputField - Switch toggle component with data binding support
+ * SwitchInputField - Switch toggle component with serialization support
  * 
- * Provides a standardized switch field with:
+ * Features:
+ * - Complete switch toggle functionality
+ * - Form validation and error handling
+ * - Data binding support for dynamic content
+ * - Full serialization support via ModelView
  * - Consistent Material-UI styling
- * - Data binding capabilities
- * - Label and helper text support
- * - Focus and error handling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import {
   FormControl,
   FormControlLabel,
@@ -20,9 +21,9 @@ import {
   Typography
 } from '@mui/material';
 import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
-import { useDataBinding } from '../../hooks';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import SwitchInputFieldModel from '../../schemas/SwitchInputFieldSchema';
+import { ModelView } from '../base/ModelView';
 
 type SwitchInputFieldViewProps = ModelProps<SwitchInputFieldModel> & {
   /** Change handler */
@@ -90,21 +91,51 @@ function SwitchInputFieldView({
   );
 }
 
-/**
- * SwitchInputField component with data binding support
- * Supports both traditional props and dataSource-driven rendering
- */
-function SwitchInputField(props: SwitchInputFieldProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class SwitchInputField extends ModelView<SwitchInputFieldProps, SwitchInputFieldModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'SwitchInputField';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <SwitchInputField {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      label: this.props.label,
+      checked: this.props.checked,
+      required: this.props.required,
+      disabled: this.props.disabled,
+      error: this.props.error,
+      helperText: this.props.helperText,
+      size: this.props.size,
+      color: this.props.color,
+      // Event handlers don't serialize
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // SwitchInputField component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <SwitchInputFieldView {...restProps} />;
   }
 
+  // SwitchInputField component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <SwitchInputFieldWithDataBinding {...this.props} />;
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function SwitchInputFieldWithDataBinding(props: SwitchInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const bindingResult = useDataBinding<SwitchInputFieldModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<SwitchInputFieldModel>,
     SwitchInputFieldModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }

package/src/components/input/TextField.tsx

@@ -20,13 +20,53 @@ export interface TextFieldProps extends WithBaseProps<Omit<MuiTextFieldProps, 's
 export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
   const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
 
+  // Extract commonly used props we may inspect
+  const { placeholder, value, defaultValue, slotProps, InputLabelProps, InputProps, variant = 'outlined', ...other } = restProps as any;
+
+  // Determine whether label should shrink automatically when a placeholder is shown.
+  // MUI does not shrink the label for outlined variant with just a placeholder (and empty value) by default.
+  // We standardize that behavior for consistency across admin surfaces.
+  const hasContent = (() => {
+    if (value != null && value !== '') return true;
+    if (defaultValue != null && defaultValue !== '') return true;
+    return false;
+  })();
+
+  const autoShrink = !!placeholder && !hasContent;
+
+  // Allow explicit user override: if consumer supplied slotProps.inputLabel.shrink or InputLabelProps.shrink, respect it.
+  const userShrink = slotProps?.inputLabel?.shrink ?? InputLabelProps?.shrink;
+  const finalShrink = userShrink !== undefined ? userShrink : autoShrink;
+
+  const mergedSlotProps = {
+    ...slotProps,
+    inputLabel: {
+      ...(slotProps?.inputLabel || {}),
+      ...(finalShrink ? { shrink: true } : {}),
+    },
+  };
+
+  // Prepare InputProps (for OutlinedInput) to ensure notch appears when we auto-shrink.
+  let mergedInputProps = InputProps || {};
+  if (variant === 'outlined' && finalShrink && placeholder && !hasContent) {
+    if (mergedInputProps.notched === undefined) {
+      mergedInputProps = { ...mergedInputProps, notched: true };
+    }
+  }
+
   // Mark as QwickApp component
   (TextField as any)[QWICKAPP_COMPONENT] = true;
 
   return (
     <MuiTextField
       ref={ref}
-      {...restProps}
+      placeholder={placeholder}
+      value={value}
+      defaultValue={defaultValue}
+      variant={variant}
+      slotProps={mergedSlotProps}
+      InputProps={mergedInputProps}
+      {...other}
       {...htmlProps}
       {...styleProps}
       // Store grid props as data attributes for ColumnLayout to pick up

package/src/components/input/TextInputField.tsx

@@ -1,22 +1,22 @@
 /**
- * TextInputField - Reusable text input component with consistent styling
+ * TextInputField - Reusable text input component with serialization support
  * 
- * Provides a standardized text field with:
+ * Features:
+ * - Complete text field functionality (single/multiline, input types)
+ * - Form validation and error handling
+ * - Data binding support for dynamic content
+ * - Full serialization support via ModelView
  * - Consistent Material-UI styling
- * - Data binding support
- * - Focus handling
- * - Validation and error states
- * - Support for multiline/textarea mode
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { TextField, TextFieldProps, Paper, Typography } from '@mui/material';
 import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
-import { useDataBinding } from '../../hooks';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import TextInputFieldModel from '../../schemas/TextInputFieldSchema';
+import { ModelView } from '../base/ModelView';
 
 type TextInputFieldViewProps = ModelProps<TextInputFieldModel> & {
   /** Change handler */
@@ -76,21 +76,55 @@ function TextInputFieldView({
   );
 }
 
-/**
- * TextInputField component with data binding support
- * Supports both traditional props and dataSource-driven rendering
- */
-function TextInputField(props: TextInputFieldProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class TextInputField extends ModelView<TextInputFieldProps, TextInputFieldModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'TextInputField';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <TextInputField {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      label: this.props.label,
+      value: this.props.value,
+      required: this.props.required,
+      disabled: this.props.disabled,
+      error: this.props.error,
+      helperText: this.props.helperText,
+      placeholder: this.props.placeholder,
+      type: this.props.type,
+      multiline: this.props.multiline,
+      rows: this.props.rows,
+      maxRows: this.props.maxRows,
+      // Event handlers don't serialize
+      // textFieldProps don't serialize (they're component-specific overrides)
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // TextInputField component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <TextInputFieldView {...restProps} />;
   }
 
+  // TextInputField component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <TextInputFieldWithDataBinding {...this.props} />;
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function TextInputFieldWithDataBinding(props: TextInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const { dataSource: _source, loading, error, cached, ...textInputFieldProps } = useDataBinding<TextInputFieldModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<TextInputFieldModel>,
     TextInputFieldModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }

package/src/components/layout/GridCell.tsx

@@ -1,25 +1,37 @@
 /**
- * GridCell - Simple cell wrapper for GridLayout
+ * GridCell - Simple cell wrapper for GridLayout with serialization support
  * 
  * 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
+ * 
+ * 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 from 'react';
+import React, { ReactElement, ReactNode } 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';
 
-export interface GridCellProps extends WithBaseProps {
-  children: React.ReactNode;
-}
+type GridCellViewProps = ModelProps<GridCellModel>;
+
+export interface GridCellProps extends GridCellViewProps, WithDataBinding {}
 
-export const GridCell: React.FC<GridCellProps> = (props) => {
+// View component - handles the actual rendering
+function GridCellView(props: GridCellViewProps) {
   const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
   
   // Mark as QwickApp component
-  (GridCell as any)[QWICKAPP_COMPONENT] = true;
+  (GridCellView as any)[QWICKAPP_COMPONENT] = true;
 
   return (
     <Box
@@ -39,8 +51,105 @@ export const GridCell: React.FC<GridCellProps> = (props) => {
       {(restProps as any).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} />;
+}
 
-GridCell.displayName = 'GridCell';
 
 export default GridCell;

package/src/components/layout/GridLayout.tsx

@@ -1,43 +1,40 @@
 /**
- * GridLayout - Flexible grid layout component
+ * GridLayout - Flexible grid layout component with serialization support
  * 
  * 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
+ * 
+ * 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 from 'react';
+import React, { ReactElement, ReactNode } 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';
 
-export interface GridLayoutProps {
-  /** Layout children - any components with grid props work */
-  children: React.ReactNode;
-  /** Number of equal-width columns (auto-distribution) */
-  columns?: 1 | 2 | 3 | 4 | 5 | 6;
-  /** Spacing between columns */
-  spacing?: SpacingValue;
-  /** Equal height columns */
-  equalHeight?: boolean;
-  /** Layout dimensions */
-  height?: DimensionValue;
-  width?: DimensionValue;
-  minHeight?: DimensionValue;
-  minWidth?: DimensionValue;
-  maxHeight?: DimensionValue;
-  maxWidth?: DimensionValue;
-  /** Additional CSS class */
-  className?: string;
+type GridLayoutViewProps = ModelProps<GridLayoutModel> & {
   /** Custom styles */
   sx?: SxProps<Theme>;
   /** Inline styles */
   style?: React.CSSProperties;
-}
+};
+
+export interface GridLayoutProps extends GridLayoutViewProps, WithDataBinding {}
 
-export const GridLayout: React.FC<GridLayoutProps> = ({
+// View component - handles the actual rendering
+function GridLayoutView({
   children,
   columns,
   spacing = 'small',
@@ -51,7 +48,11 @@ export const GridLayout: React.FC<GridLayoutProps> = ({
   className,
   sx,
   style,
-}) => {
+  ...restProps
+}: GridLayoutViewProps) {
+  // Mark as QwickApp component
+  (GridLayoutView as any)[QWICKAPP_COMPONENT] = true;
+  
   const resolvedSpacing = resolveSpacing(spacing, 'gap');
   
   // Process children to handle grid props
@@ -164,6 +165,106 @@ export const GridLayout: React.FC<GridLayoutProps> = ({
       {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} />;
+}
 
 export default GridLayout;