@qwickapps/react-framework 1.4.0 → 1.4.2

package/src/components/input/SelectInputField.tsx

@@ -5,36 +5,39 @@
  * - Complete select dropdown functionality with options
  * - Form validation and error handling
  * - Data binding support for dynamic content
- * - Full serialization support via ModelView
+ * - Full serialization support via factory pattern
  * - Consistent Material-UI styling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement } from 'react';
+import React from 'react';
 import {
   FormControl,
   FormHelperText,
   InputLabel,
   MenuItem,
-  Paper,
   Select,
   SelectChangeEvent,
-  Typography
 } from '@mui/material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import SelectInputFieldModel, { SelectOption } from '../../schemas/SelectInputFieldSchema';
-import { ModelView } from '../base/ModelView';
-
-type SelectInputFieldViewProps = ModelProps<SelectInputFieldModel> & {
-  /** Change handler */
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+
+export interface SelectInputFieldProps extends ViewProps {
+  // Component-specific props from SelectInputFieldModel
+  label?: string;
+  value?: string | number;
+  options?: SelectOption[];
+  required?: boolean;
+  disabled?: boolean;
+  error?: string;
+  helperText?: string;
+  placeholder?: string;
+  // Additional props for enhanced functionality
   onChange?: (value: string | number) => void;
-  /** Focus handler */
   onFocus?: () => void;
-};
-
-export interface SelectInputFieldProps extends SelectInputFieldViewProps, WithDataBinding {}
+}
 
 // Export SelectOption for external use
 export { SelectOption };
@@ -52,69 +55,49 @@ function SelectInputFieldView({
   helperText,
   placeholder,
   ...restProps
-}: SelectInputFieldViewProps) {
-  const { styleProps, htmlProps } = useBaseProps(restProps);
-
+}: SelectInputFieldProps) {
   const handleChange = (event: SelectChangeEvent<string | number>) => {
     if (onChange) {
       onChange(event.target.value);
     }
   };
 
-  // Return error state if no options provided
-  if (!options.length) {
-    return (
-      <Paper
-        {...htmlProps}
-        {...styleProps}
-        variant="outlined"
-        sx={{
-          p: 2,
-          textAlign: 'center',
-          opacity: 0.6,
-          borderColor: 'error.main',
-          ...styleProps.sx
-        }}
-      >
-        <Typography variant="body2" color="error">
-          No options provided for select field
-        </Typography>
-      </Paper>
-    );
-  }
+  // Filter out ViewProps that conflict with FormControl
+  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
+          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
+          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
+          className, ...filteredProps } = restProps;
+
+  const labelId = label ? `select-label-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined;
 
   return (
-    <FormControl
-      {...htmlProps}
-      {...styleProps}
-      fullWidth
-      error={!!error}
-      required={required}
-      disabled={disabled}
-      sx={{
-        ...styleProps.sx
-      }}
+    <FormControl 
+      fullWidth 
+      required={required} 
+      disabled={disabled} 
+      error={!!error} 
+      sx={sx}
+      style={style}
+      className={className}
+      {...filteredProps}
     >
-      <InputLabel shrink={!!value || !!placeholder}>
-        {label}
-      </InputLabel>
+      {label && <InputLabel id={labelId}>{label}</InputLabel>}
       <Select
+        labelId={labelId}
+        label={label}
         value={value}
         onChange={handleChange}
         onFocus={onFocus}
         displayEmpty={!!placeholder}
-        renderValue={value !== '' ? undefined : () => (
-          <span style={{ opacity: 0.6 }}>{placeholder}</span>
-        )}
       >
         {placeholder && (
           <MenuItem value="" disabled>
             <em>{placeholder}</em>
           </MenuItem>
         )}
-        {options.map((option) => (
+        {options.map((option, index) => (
           <MenuItem
-            key={option.value}
+            key={`${option.value}-${index}`}
             value={option.value}
             disabled={option.disabled}
           >
@@ -123,107 +106,19 @@ function SelectInputFieldView({
         ))}
       </Select>
       {(error || helperText) && (
-        <FormHelperText>
-          {error || helperText}
-        </FormHelperText>
+        <FormHelperText>{error || helperText}</FormHelperText>
       )}
     </FormControl>
   );
 }
 
-// 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
-    };
-  }
-
-  // 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!,
-    restProps as Partial<SelectInputFieldModel>,
-    SelectInputFieldModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-
-  // Show loading state
-  if (loading) {
-    return (
-      <Paper
-        variant="outlined"
-        sx={{
-          p: 2,
-          textAlign: 'center'
-        }}
-      >
-        <Typography variant="body2">Loading SelectInputField...</Typography>
-        <Typography variant="caption" color="text.secondary">
-          Loading select field configuration from data source...
-        </Typography>
-      </Paper>
-    );
-  }
-
-  if (error) {
-    console.error('Error loading select input field:', 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 select field: {error.message}
-          </Typography>
-        </Paper>
-      );
-    }
-    return null;
-  }
-
-  return <SelectInputFieldView {...selectInputFieldProps} />;
-}
-
-// Mark as QwickApp component
-(SelectInputField as any)[QWICKAPP_COMPONENT] = true;
+// Create the serializable SelectInputField component using the factory
+export const SelectInputField: SerializableComponent<SelectInputFieldProps> = createSerializableView<SelectInputFieldProps>({
+  tagName: 'SelectInputField',
+  version: '1.0.0',
+  role: 'view',
+  View: SelectInputFieldView,
+  // SelectInputField component uses default react-children strategy
+});
 
 export default SelectInputField;

package/src/components/input/SwitchInputField.tsx

@@ -5,34 +5,35 @@
  * - Complete switch toggle functionality
  * - Form validation and error handling
  * - Data binding support for dynamic content
- * - Full serialization support via ModelView
+ * - Full serialization support via factory pattern
  * - Consistent Material-UI styling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement } from 'react';
+import React from 'react';
 import {
   FormControl,
   FormControlLabel,
   FormHelperText,
-  Paper,
   Switch,
-  Typography
 } from '@mui/material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import SwitchInputFieldModel from '../../schemas/SwitchInputFieldSchema';
-import { ModelView } from '../base/ModelView';
-
-type SwitchInputFieldViewProps = ModelProps<SwitchInputFieldModel> & {
-  /** Change handler */
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+
+export interface SwitchInputFieldProps extends ViewProps {
+  // Component-specific props from SwitchInputFieldModel
+  label?: string;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  error?: string;
+  helperText?: string;
+  // Additional props for enhanced functionality
   onChange?: (checked: boolean) => void;
-  /** Focus handler */
   onFocus?: () => void;
-};
-
-export interface SwitchInputFieldProps extends SwitchInputFieldViewProps, WithDataBinding {}
+}
 
 // View component - handles the actual rendering
 function SwitchInputFieldView({
@@ -44,29 +45,27 @@ function SwitchInputFieldView({
   disabled = false,
   error,
   helperText,
-  size = 'medium',
-  color = 'primary',
   ...restProps
-}: SwitchInputFieldViewProps) {
-  const { styleProps, htmlProps } = useBaseProps(restProps);
-
+}: SwitchInputFieldProps) {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChange) {
-      onChange(event.target.checked);
-    }
+    onChange?.(event.target.checked);
   };
 
+  // Filter out ViewProps that conflict with FormControl
+  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
+          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
+          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
+          className, ...filteredProps } = restProps;
+
   return (
-    <FormControl
-      {...htmlProps}
-      {...styleProps}
-      error={!!error}
-      required={required}
-      disabled={disabled}
-      sx={{
-        display: 'block',
-        ...styleProps.sx
-      }}
+    <FormControl 
+      component="fieldset" 
+      error={!!error} 
+      disabled={disabled} 
+      sx={sx}
+      style={style}
+      className={className}
+      {...filteredProps}
     >
       <FormControlLabel
         control={
@@ -74,123 +73,26 @@ function SwitchInputFieldView({
             checked={checked}
             onChange={handleChange}
             onFocus={onFocus}
-            size={size}
-            color={color}
+            required={required}
             disabled={disabled}
           />
         }
         label={label}
-        disabled={disabled}
       />
       {(error || helperText) && (
-        <FormHelperText>
-          {error || helperText}
-        </FormHelperText>
+        <FormHelperText>{error || helperText}</FormHelperText>
       )}
     </FormControl>
   );
 }
 
-// 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
-    };
-  }
-
-  // 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!,
-    restProps as Partial<SwitchInputFieldModel>,
-    SwitchInputFieldModel.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 switch properties (excluding metadata)
-  const { dataSource: _source, $loading, $error, $dataSource, $cached, cached, ...switchInputFieldProps } = 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 SwitchInputField...</Typography>
-        <Typography variant="caption" color="text.secondary">
-          Loading switch field configuration from data source...
-        </Typography>
-      </Paper>
-    );
-  }
-
-  if (error) {
-    console.error('Error loading switch input field:', 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 switch field: {error.message}
-          </Typography>
-        </Paper>
-      );
-    }
-    return null;
-  }
-
-  return <SwitchInputFieldView {...switchInputFieldProps} />;
-}
-
-// Mark as QwickApp component
-(SwitchInputField as any)[QWICKAPP_COMPONENT] = true;
+// Create the serializable SwitchInputField component using the factory
+export const SwitchInputField: SerializableComponent<SwitchInputFieldProps> = createSerializableView<SwitchInputFieldProps>({
+  tagName: 'SwitchInputField',
+  version: '1.0.0',
+  role: 'view',
+  View: SwitchInputFieldView,
+  // SwitchInputField component uses default react-children strategy
+});
 
 export default SwitchInputField;

package/src/components/input/TextInputField.tsx

@@ -5,29 +5,36 @@
  * - Complete text field functionality (single/multiline, input types)
  * - Form validation and error handling
  * - Data binding support for dynamic content
- * - Full serialization support via ModelView
+ * - Full serialization support via factory pattern
  * - Consistent Material-UI styling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
 import React, { ReactElement } from 'react';
-import { TextField, TextFieldProps, Paper, Typography } from '@mui/material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
+import { TextField, TextFieldProps } from '@mui/material';
 import TextInputFieldModel from '../../schemas/TextInputFieldSchema';
-import { ModelView } from '../base/ModelView';
-
-type TextInputFieldViewProps = ModelProps<TextInputFieldModel> & {
-  /** Change handler */
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+
+export interface TextInputFieldProps extends ViewProps {
+  // Component-specific props from TextInputFieldModel
+  label?: string;
+  value?: string;
+  required?: boolean;
+  disabled?: boolean;
+  error?: string;
+  helperText?: string;
+  placeholder?: string;
+  type?: string;
+  multiline?: boolean;
+  rows?: number;
+  maxRows?: number;
+  // Additional props for enhanced functionality
   onChange?: (value: string) => void;
-  /** Focus handler */
   onFocus?: () => void;
-  /** Additional TextField props */
   textFieldProps?: Omit<TextFieldProps, 'label' | 'value' | 'onChange' | 'onFocus' | 'required' | 'disabled' | 'error' | 'helperText' | 'placeholder' | 'type' | 'multiline' | 'rows' | 'maxRows'>;
-};
-
-export interface TextInputFieldProps extends TextInputFieldViewProps, WithDataBinding {}
+}
 
 // View component - handles the actual rendering
 function TextInputFieldView({
@@ -46,17 +53,20 @@ function TextInputFieldView({
   maxRows,
   textFieldProps,
   ...restProps
-}: TextInputFieldViewProps) {
-  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
-
+}: TextInputFieldProps) {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange?.(event.target.value);
   };
 
+  // Filter out ViewProps that conflict with TextField
+  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
+          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
+          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
+          className, ...filteredProps } = restProps;
+
   return (
     <TextField
-      {...htmlProps}
-      {...styleProps}
+      {...filteredProps}
       fullWidth
       label={label}
       value={value}
@@ -71,108 +81,21 @@ function TextInputFieldView({
       multiline={multiline}
       rows={rows}
       maxRows={maxRows}
+      sx={sx}
+      style={style}
+      className={className}
       {...textFieldProps}
     />
   );
 }
 
-// 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)
-    };
-  }
-
-  // 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!,
-    restProps as Partial<TextInputFieldModel>,
-    TextInputFieldModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-
-  // Show loading state
-  if (loading) {
-    return (
-      <Paper
-        variant="outlined"
-        sx={{
-          p: 3,
-          textAlign: 'center'
-        }}
-      >
-        <Typography variant="body2">Loading TextInputField...</Typography>
-        <Typography variant="caption" color="text.secondary">
-          Loading text input field from data source...
-        </Typography>
-      </Paper>
-    );
-  }
-
-  if (error) {
-    console.error('Error loading text input field:', error);
-    if (process.env.NODE_ENV !== 'production') {
-      return (
-        <Paper
-          variant="outlined"
-          sx={{
-            p: 3,
-            textAlign: 'center',
-            borderColor: 'error.main'
-          }}
-        >
-          <Typography variant="body2" color="error">
-            Error loading text input field: {error.message}
-          </Typography>
-        </Paper>
-      );
-    }
-    return null;
-  }
-
-  return <TextInputFieldView {...textInputFieldProps} />;
-}
-
-// Mark as QwickApp component
-(TextInputField as any)[QWICKAPP_COMPONENT] = true;
+// Create the serializable TextInputField component using the factory
+export const TextInputField: SerializableComponent<TextInputFieldProps> = createSerializableView<TextInputFieldProps>({
+  tagName: 'TextInputField',
+  version: '1.0.0',
+  role: 'view',
+  View: TextInputFieldView,
+  // TextInputField component uses default react-children strategy
+});
 
 export default TextInputField;