@qwickapps/react-framework 1.4.1 → 1.4.2

package/src/components/buttons/PaletteSwitcher.tsx

@@ -27,14 +27,14 @@ import {
   Paper,
 } from '@mui/material';
 import React, { useState } from 'react';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
 import { useDataBinding } from '../../hooks';
 import { usePalette } from '../../contexts';
 import type { PaletteConfig } from '../../contexts';
 import PaletteSwitcherModel from '../../schemas/PaletteSwitcherSchema';
 
-type PaletteSwitcherViewProps = ModelProps<PaletteSwitcherModel>;
+type PaletteSwitcherViewProps = SchemaProps<PaletteSwitcherModel>;
 
 export interface PaletteSwitcherProps extends PaletteSwitcherViewProps, WithDataBinding {}
 

package/src/components/buttons/ThemeSwitcher.tsx

@@ -26,7 +26,7 @@ import {
   LightMode as LightModeIcon,
   SettingsSystemDaydream as SystemIcon
 } from '@mui/icons-material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { useState } from 'react';
 import { useTheme } from '../../contexts/ThemeContext';
 import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
@@ -34,7 +34,7 @@ import { useDataBinding } from '../../hooks';
 import ThemeSwitcherModel from '../../schemas/ThemeSwitcherSchema';
 import type { ThemeMode } from '../../utils/themeUtils';
 
-type ThemeSwitcherViewProps = ModelProps<ThemeSwitcherModel>;
+type ThemeSwitcherViewProps = SchemaProps<ThemeSwitcherModel>;
 
 export interface ThemeSwitcherProps extends ThemeSwitcherViewProps, WithDataBinding {}
 

package/src/components/forms/FormBlock.tsx

@@ -23,7 +23,7 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import type { ModelProps, WithDataBinding } from '@qwickapps/schema';
+import type { SchemaProps, WithDataBinding } from '@qwickapps/schema';
 import { useQwickApp } from '../../contexts/QwickAppContext';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import FormBlockModel from '../../schemas/FormBlockSchema';
@@ -31,7 +31,7 @@ import CoverImageHeader from '../blocks/CoverImageHeader';
 import Logo from '../Logo';
 import { ModelView } from '../base/ModelView';
 
-type FormBlockViewProps = ModelProps<FormBlockModel> & {
+type FormBlockViewProps = SchemaProps<FormBlockModel> & {
   /**
    * Custom header content - when provided, overrides the default header
    * For full customization control

package/src/components/index.ts

@@ -8,8 +8,13 @@
  * - Layout components
  * - Blocks (Hero, Content, FeatureGrid, Section, etc.)
  * - Pages and scaffolding
+ * - Schema-driven component registration (Phase 0)
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
+
+// Import registry to ensure all serializable components are registered
+// This must happen when the framework is imported to enable serialization
+import '../schemas/transformers/registry';
 export * from './base';
 export * from './blocks';
 export * from './buttons';

package/src/components/input/ChoiceInputField.tsx

@@ -5,13 +5,13 @@
  * - Complete dynamic option input management
  * - Rich text editing for each option (via HtmlInputField)
  * - 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 {
   Alert,
   Box,
@@ -20,22 +20,25 @@ import {
   Typography
 } from '@mui/material';
 import { Add as AddIcon } from '@mui/icons-material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
-import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import HtmlInputField from './HtmlInputField';
 import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
-import { ModelView } from '../base/ModelView';
-
-type ChoiceInputFieldViewProps = ModelProps<ChoiceInputFieldModel> & {
-  /** Handler for option value changes */
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+
+export interface ChoiceInputFieldProps extends Omit<ViewProps, 'onFocus'> {
+  // Component-specific props from ChoiceInputFieldModel
+  label?: string;
+  options?: string[];
+  disabled?: boolean;
+  placeholder?: string;
+  optionLabelPrefix?: string;
+  rows?: number;
+  maxOptions?: number;
+  // Additional props for enhanced functionality
   onOptionChange?: (optionIndex: number, value: string) => void;
-  /** Handler for adding new options */
   onAddOption?: () => void;
-  /** Focus handler */
-  onFocus?: (optionIndex?: number) => void;
-};
-
-export interface ChoiceInputFieldProps extends ChoiceInputFieldViewProps, WithDataBinding {}
+  onChoiceFieldFocus?: (optionIndex?: number) => void;
+}
 
 // View component - handles the actual rendering
 function ChoiceInputFieldView({
@@ -43,176 +46,89 @@ function ChoiceInputFieldView({
   options = [],
   onOptionChange,
   onAddOption,
-  onFocus,
+  onChoiceFieldFocus,
   disabled = false,
   placeholder = 'Enter option text. HTML formatting supported.',
   optionLabelPrefix = 'Option',
   rows = 2,
-  addButtonText = 'Add Option',
+  maxOptions = 10,
   ...restProps
-}: ChoiceInputFieldViewProps) {
-  const { styleProps, htmlProps } = useBaseProps(restProps);
+}: ChoiceInputFieldProps) {
 
-  // Return empty state if no options and no handlers
-  if (options.length === 0 && !onAddOption) {
-    return (
-      <Paper
-        {...htmlProps}
-        {...styleProps}
-        variant="outlined"
-        sx={{
-          p: 3,
-          textAlign: 'center',
-          opacity: 0.6,
-          ...styleProps.sx
-        }}
-      >
-        <Typography variant="body2" color="text.secondary">
-          No options provided
-        </Typography>
-      </Paper>
-    );
-  }
+  const handleOptionChange = (optionIndex: number) => (value: string) => {
+    onOptionChange?.(optionIndex, value);
+  };
+
+  const handleOptionFocus = (optionIndex: number) => () => {
+    onChoiceFieldFocus?.(optionIndex);
+  };
+
+  const handleAddOption = () => {
+    if (options.length < maxOptions) {
+      onAddOption?.();
+    }
+  };
 
   return (
-    <Box
-      {...htmlProps}
-      {...styleProps}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1,
-        ...styleProps.sx
-      }}
-    >
-      {label && (
-        <Typography variant="subtitle2" gutterBottom>
-          {label}
-        </Typography>
+    <Box {...restProps}>
+      <Typography variant="h6" gutterBottom>
+        {label}
+      </Typography>
+
+      {/* Display warning if no options */}
+      {options.length === 0 && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          No options added yet. Click "Add Option" to get started.
+        </Alert>
       )}
-      
-      {options.map((option, optionIndex) => (
-        <Box key={optionIndex}>
+
+      {/* Render options */}
+      {options.map((optionValue, index) => (
+        <Box key={index} sx={{ mb: 2 }}>
           <HtmlInputField
-            label={`${optionLabelPrefix} ${optionIndex + 1}`}
-            value={option}
-            onChange={onOptionChange ? (value: string) => onOptionChange(optionIndex, value) : undefined}
-            onFocus={onFocus ? () => onFocus(optionIndex) : undefined}
+            label={`${optionLabelPrefix} ${index + 1}`}
+            value={optionValue}
+            onChange={handleOptionChange(index)}
+            onFocus={handleOptionFocus(index)}
+            placeholder={placeholder}
             rows={rows}
             disabled={disabled}
-            placeholder={placeholder}
+            showPreview={true}
+            showHelp={false}
           />
         </Box>
       ))}
-      
-      {onAddOption && (
+
+      {/* Add Option Button */}
+      {options.length < maxOptions && (
         <Button
+          variant="outlined"
           startIcon={<AddIcon />}
-          onClick={onAddOption}
-          size="small"
+          onClick={handleAddOption}
           disabled={disabled}
-          variant="text"
-          sx={{ mt: 1, alignSelf: 'flex-start' }}
+          sx={{ mt: 1 }}
         >
-          {addButtonText}
+          Add Option
         </Button>
       )}
-    </Box>
-  );
-}
 
-// Main component with data binding support and serialization capability
-export class ChoiceInputField extends ModelView<ChoiceInputFieldProps, ChoiceInputFieldModel> {
-  // Component self-declaration for serialization
-  static readonly tagName = 'ChoiceInputField';
-  static readonly version = '1.0.0';
-  
-  // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
-    return <ChoiceInputField {...jsonData} />;
-  }
-  
-  // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
-    return {
-      label: this.props.label,
-      options: this.props.options,
-      disabled: this.props.disabled,
-      placeholder: this.props.placeholder,
-      optionLabelPrefix: this.props.optionLabelPrefix,
-      rows: this.props.rows,
-      addButtonText: this.props.addButtonText,
-      // Event handlers don't serialize
-    };
-  }
-
-  // ChoiceInputField component renders traditional props view
-  protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
-    return <ChoiceInputFieldView {...restProps} />;
-  }
-
-  // ChoiceInputField component renders data-bound view
-  protected renderWithDataBinding(): React.ReactElement {
-    return <ChoiceInputFieldWithDataBinding {...this.props} />;
-  }
-}
-
-// Helper component to handle data binding with hooks (since we can't use hooks in class components)
-function ChoiceInputFieldWithDataBinding(props: ChoiceInputFieldProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
-
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...choiceInputFieldProps } = useDataBinding<ChoiceInputFieldModel>(
-    dataSource!,
-    restProps as Partial<ChoiceInputFieldModel>,
-    ChoiceInputFieldModel.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 Choice Input Field...</Typography>
-        <Typography variant="caption" color="text.secondary">
-          Loading options from data source...
+      {/* Max options reached message */}
+      {options.length >= maxOptions && (
+        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
+          Maximum number of options ({maxOptions}) reached.
         </Typography>
-      </Paper>
-    );
-  }
-
-  if (error) {
-    console.error('Error loading choice 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 choice input field: {error.message}
-          </Typography>
-        </Paper>
-      );
-    }
-    return null;
-  }
-
-  return <ChoiceInputFieldView {...choiceInputFieldProps} />;
+      )}
+    </Box>
+  );
 }
 
-// Mark as QwickApp component
-(ChoiceInputField as any)[QWICKAPP_COMPONENT] = true;
+// Create the serializable ChoiceInputField component using the factory
+export const ChoiceInputField: SerializableComponent<ChoiceInputFieldProps> = createSerializableView<ChoiceInputFieldProps>({
+  tagName: 'ChoiceInputField',
+  version: '1.0.0',
+  role: 'view',
+  View: ChoiceInputFieldView,
+  // ChoiceInputField component uses default react-children strategy
+});
 
 export default ChoiceInputField;