@qwickapps/react-framework 1.5.7 → 1.5.9

package/src/components/forms/SchemaFormRenderer.tsx

@@ -0,0 +1,268 @@
+/**
+ * SchemaFormRenderer - Dynamic form generation from @qwickapps/schema models
+ *
+ * Reads @Editor metadata from Model classes and generates Material-UI form fields.
+ * Maps field_type to appropriate input components with validation.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  TextField,
+  FormControlLabel,
+  Switch,
+  Box,
+  Typography,
+  FormHelperText,
+  Alert,
+} from '@mui/material';
+import { Model, FieldType } from '@qwickapps/schema';
+import type { FieldDefinition } from '@qwickapps/schema';
+
+export interface SchemaFormRendererProps<T extends Model> {
+  /** Model class to generate form from */
+  modelClass: new () => T;
+
+  /** Current form data */
+  value: Partial<T>;
+
+  /** Called when any field changes */
+  onChange: (data: Partial<T>) => void;
+
+  /** Show validation errors */
+  showValidation?: boolean;
+
+  /** Validation errors from Model.validate() */
+  validationErrors?: string[];
+
+  /** Read-only mode */
+  readOnly?: boolean;
+}
+
+/**
+ * Render a single form field based on its editor configuration
+ */
+function renderField<T extends Model>(
+  field: FieldDefinition,
+  value: unknown,
+  onChange: (name: string, value: unknown) => void,
+  readOnly: boolean
+): React.ReactNode {
+  const { name, required, editor } = field;
+
+  if (!editor) {
+    return null;
+  }
+
+  const { field_type, label, description, placeholder, validation } = editor;
+  const fieldValue = value ?? '';
+
+  const commonProps = {
+    fullWidth: true,
+    margin: 'normal' as const,
+    required,
+    disabled: readOnly,
+    label,
+    helperText: description,
+  };
+
+  switch (field_type) {
+    case FieldType.TEXT:
+    case FieldType.EMAIL:
+      return (
+        <TextField
+          {...commonProps}
+          type={field_type === FieldType.EMAIL ? 'email' : 'text'}
+          value={fieldValue}
+          onChange={(e) => onChange(name, e.target.value)}
+          placeholder={placeholder}
+          inputProps={{
+            minLength: validation?.min,
+            maxLength: validation?.max,
+          }}
+        />
+      );
+
+    case FieldType.TEXTAREA:
+      return (
+        <TextField
+          {...commonProps}
+          multiline
+          rows={4}
+          value={fieldValue}
+          onChange={(e) => onChange(name, e.target.value)}
+          placeholder={placeholder}
+          inputProps={{
+            minLength: validation?.min,
+            maxLength: validation?.max,
+          }}
+        />
+      );
+
+    case FieldType.NUMBER:
+      return (
+        <TextField
+          {...commonProps}
+          type="number"
+          value={fieldValue}
+          onChange={(e) => {
+            const val = e.target.value;
+            onChange(name, val === '' ? undefined : parseFloat(val));
+          }}
+          placeholder={placeholder}
+          inputProps={{
+            min: validation?.min,
+            max: validation?.max,
+          }}
+        />
+      );
+
+    case FieldType.BOOLEAN:
+      return (
+        <FormControlLabel
+          control={
+            <Switch
+              checked={!!fieldValue}
+              onChange={(e) => onChange(name, e.target.checked)}
+              disabled={readOnly}
+            />
+          }
+          label={
+            <Box>
+              <Typography variant="body2" fontWeight={required ? 600 : 400}>
+                {label}
+              </Typography>
+              {description && (
+                <Typography variant="caption" color="text.secondary">
+                  {description}
+                </Typography>
+              )}
+            </Box>
+          }
+        />
+      );
+
+    case FieldType.DATE_TIME:
+      return (
+        <TextField
+          {...commonProps}
+          type="datetime-local"
+          value={fieldValue}
+          onChange={(e) => onChange(name, e.target.value)}
+          InputLabelProps={{ shrink: true }}
+        />
+      );
+
+    case FieldType.COLOR:
+      return (
+        <Box>
+          <TextField
+            {...commonProps}
+            type="color"
+            value={fieldValue || '#000000'}
+            onChange={(e) => onChange(name, e.target.value)}
+          />
+        </Box>
+      );
+
+    case FieldType.IMAGE:
+      return (
+        <Box>
+          <Typography variant="body2" fontWeight={required ? 600 : 400}>
+            {label}
+          </Typography>
+          <TextField
+            fullWidth
+            margin="normal"
+            type="url"
+            value={fieldValue}
+            onChange={(e) => onChange(name, e.target.value)}
+            placeholder={placeholder || 'https://example.com/image.jpg'}
+            helperText={description}
+            disabled={readOnly}
+          />
+        </Box>
+      );
+
+    case FieldType.FORM:
+      // Nested form - would need recursive rendering
+      return (
+        <Alert severity="info" sx={{ my: 2 }}>
+          Nested form for {name} (not yet implemented)
+        </Alert>
+      );
+
+    case FieldType.MODEL_REPEATER:
+      // Array of nested forms
+      return (
+        <Alert severity="info" sx={{ my: 2 }}>
+          Array field {name} (not yet implemented)
+        </Alert>
+      );
+
+    default:
+      return (
+        <TextField
+          {...commonProps}
+          value={fieldValue}
+          onChange={(e) => onChange(name, e.target.value)}
+          placeholder={placeholder}
+        />
+      );
+  }
+}
+
+/**
+ * SchemaFormRenderer Component
+ */
+export function SchemaFormRenderer<T extends Model>({
+  modelClass,
+  value,
+  onChange,
+  showValidation = false,
+  validationErrors = [],
+  readOnly = false,
+}: SchemaFormRendererProps<T>) {
+  const schema = modelClass.getSchema();
+
+  const handleFieldChange = useCallback(
+    (fieldName: string, fieldValue: any) => {
+      onChange({
+        ...value,
+        [fieldName]: fieldValue,
+      });
+    },
+    [value, onChange]
+  );
+
+  return (
+    <Box>
+      {showValidation && validationErrors.length > 0 && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          <Typography variant="body2" fontWeight={600} gutterBottom>
+            Please fix the following errors:
+          </Typography>
+          <ul style={{ margin: 0, paddingLeft: 20 }}>
+            {validationErrors.map((error, idx) => (
+              <li key={idx}>
+                <Typography variant="body2">{error}</Typography>
+              </li>
+            ))}
+          </ul>
+        </Alert>
+      )}
+
+      {schema.fields.map((field) => (
+        <Box key={field.name}>
+          {renderField<T>(
+            field,
+            (value as any)[field.name],
+            handleFieldChange,
+            readOnly
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}

package/src/components/forms/__tests__/SchemaFormRenderer.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * SchemaFormRenderer Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { SchemaFormRenderer } from '../SchemaFormRenderer';
+import { Model, Field, Editor, FieldType, Schema } from '@qwickapps/schema';
+
+// Test Model with various field types
+@Schema()
+class TestModel extends Model {
+  @Field()
+  @Editor({ field_type: FieldType.TEXT, label: 'Text Field', description: 'Enter text' })
+  textField?: string;
+
+  @Field()
+  @Editor({ field_type: FieldType.EMAIL, label: 'Email Field' })
+  emailField?: string;
+
+  @Field()
+  @Editor({ field_type: FieldType.TEXTAREA, label: 'Textarea Field' })
+  textareaField?: string;
+
+  @Field()
+  @Editor({ field_type: FieldType.NUMBER, label: 'Number Field' })
+  numberField?: number;
+
+  @Field()
+  @Editor({ field_type: FieldType.BOOLEAN, label: 'Boolean Field', description: 'Toggle me' })
+  booleanField?: boolean;
+
+  @Field()
+  @Editor({ field_type: FieldType.DATE_TIME, label: 'DateTime Field' })
+  dateTimeField?: string;
+
+  @Field()
+  @Editor({ field_type: FieldType.COLOR, label: 'Color Field' })
+  colorField?: string;
+}
+
+describe('SchemaFormRenderer', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('renders all field types from schema', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    expect(screen.getByLabelText(/Text Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Email Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Textarea Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Number Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Boolean Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/DateTime Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Color Field/i)).toBeInTheDocument();
+  });
+
+  it('displays field values correctly', () => {
+    const value = {
+      textField: 'test value',
+      emailField: 'test@example.com',
+      numberField: 42,
+      booleanField: true,
+    };
+
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={value}
+        onChange={mockOnChange}
+      />
+    );
+
+    expect(screen.getByDisplayValue('test value')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('test@example.com')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('42')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /Boolean Field/i })).toBeChecked();
+  });
+
+  it('calls onChange when text field changes', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    const textField = screen.getByLabelText(/Text Field/i);
+    fireEvent.change(textField, { target: { value: 'new value' } });
+
+    expect(mockOnChange).toHaveBeenCalledWith({ textField: 'new value' });
+  });
+
+  it('calls onChange when number field changes', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    const numberField = screen.getByLabelText(/Number Field/i);
+    fireEvent.change(numberField, { target: { value: '123' } });
+
+    expect(mockOnChange).toHaveBeenCalledWith({ numberField: 123 });
+  });
+
+  it('handles empty number field correctly (returns undefined, not NaN)', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{ numberField: 42 }}
+        onChange={mockOnChange}
+      />
+    );
+
+    const numberField = screen.getByLabelText(/Number Field/i);
+    fireEvent.change(numberField, { target: { value: '' } });
+
+    expect(mockOnChange).toHaveBeenCalledWith({ numberField: undefined });
+  });
+
+  it('calls onChange when boolean field changes', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    const booleanField = screen.getByRole('checkbox', { name: /Boolean Field/i });
+    fireEvent.click(booleanField);
+
+    expect(mockOnChange).toHaveBeenCalledWith({ booleanField: true });
+  });
+
+  it('displays validation errors when showValidation is true', () => {
+    const errors = ['Field A is required', 'Field B must be positive'];
+
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+        showValidation={true}
+        validationErrors={errors}
+      />
+    );
+
+    expect(screen.getByText(/Please fix the following errors/i)).toBeInTheDocument();
+    expect(screen.getByText('Field A is required')).toBeInTheDocument();
+    expect(screen.getByText('Field B must be positive')).toBeInTheDocument();
+  });
+
+  it('does not display validation errors when showValidation is false', () => {
+    const errors = ['Field A is required'];
+
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+        showValidation={false}
+        validationErrors={errors}
+      />
+    );
+
+    expect(screen.queryByText(/Please fix the following errors/i)).not.toBeInTheDocument();
+  });
+
+  it('disables all fields when readOnly is true', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+        readOnly={true}
+      />
+    );
+
+    expect(screen.getByLabelText(/Text Field/i)).toBeDisabled();
+    expect(screen.getByLabelText(/Email Field/i)).toBeDisabled();
+    expect(screen.getByLabelText(/Number Field/i)).toBeDisabled();
+    expect(screen.getByRole('checkbox', { name: /Boolean Field/i })).toBeDisabled();
+  });
+
+  it('displays field descriptions as helper text', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    expect(screen.getByText('Enter text')).toBeInTheDocument();
+    expect(screen.getByText('Toggle me')).toBeInTheDocument();
+  });
+});

package/src/components/forms/index.ts

@@ -17,3 +17,6 @@ export type { FormCheckboxProps } from './FormCheckbox';
 
 export { default as Captcha } from './Captcha';
 export type { CaptchaProps, CaptchaProvider } from './Captcha';
+
+export { SchemaFormRenderer } from './SchemaFormRenderer';
+export type { SchemaFormRendererProps } from './SchemaFormRenderer';

package/src/components/index.ts

@@ -23,6 +23,7 @@ export * from './forms';
 export * from './input';
 export * from './layout';
 export * from './pages';
+export * from './plugins';
 export { default as Scaffold } from './Scaffold';
 export type { ScaffoldProps, AppBarProps } from './Scaffold';
 export type { MenuItem } from './menu/MenuItem';

package/src/components/input/ChoiceInputField.tsx

@@ -18,7 +18,8 @@ import {
   Button,
   Typography
 } from '@mui/material';
-import { Add as AddIcon } from '@mui/icons-material';
+import Add from "@mui/icons-material/Add";
+const AddIcon = Add;
 import HtmlInputField from './HtmlInputField';
 // import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';

package/src/components/input/HtmlInputField.tsx

@@ -23,15 +23,20 @@ import {
   Alert,
   ButtonGroup,
   } from '@mui/material';
-import {
-  FormatBold as BoldIcon,
-  FormatItalic as ItalicIcon,
-  FormatUnderlined as UnderlineIcon,
-  Code as CodeIcon,
-  Visibility as PreviewIcon,
-  VisibilityOff as EditIcon,
-  Help as HelpIcon
-} from '@mui/icons-material';
+import FormatBold from '@mui/icons-material/FormatBold';
+import FormatItalic from '@mui/icons-material/FormatItalic';
+import FormatUnderlined from '@mui/icons-material/FormatUnderlined';
+import Code from '@mui/icons-material/Code';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import Help from '@mui/icons-material/Help';
+const BoldIcon = FormatBold;
+const ItalicIcon = FormatItalic;
+const UnderlineIcon = FormatUnderlined;
+const CodeIcon = Code;
+const PreviewIcon = Visibility;
+const EditIcon = VisibilityOff;
+const HelpIcon = Help;
 import SafeSpan from '../SafeSpan';
 import sanitizeHtml from 'sanitize-html';
 // import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';

package/src/components/input/TextField.tsx

@@ -55,7 +55,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
   }
 
   // Mark as QwickApp component
-  (TextField as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(TextField, { [QWICKAPP_COMPONENT]: true });
 
   return (
     <MuiTextField

package/src/components/layout/CollapsibleLayout/CollapsibleLayout.tsx

@@ -26,10 +26,10 @@ import {
   SxProps,
   Theme,
 } from '@mui/material';
-import {
-  ExpandMore as ExpandMoreIcon,
-  ExpandLess as ExpandLessIcon,
-} from '@mui/icons-material';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+const ExpandMoreIcon = ExpandMore;
+const ExpandLessIcon = ExpandLess;
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../../hooks';
 import CollapsibleLayoutModel from '../../../schemas/CollapsibleLayoutSchema';
 import {
@@ -167,7 +167,7 @@ function CollapsibleLayoutView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
   
   // Mark as QwickApp component
-  (CollapsibleLayoutView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(CollapsibleLayoutView, { [QWICKAPP_COMPONENT]: true });
 
   // Determine controlled vs uncontrolled usage
   const controlled = collapsedProp !== undefined;
@@ -500,9 +500,7 @@ function CollapsibleLayout(props: CollapsibleLayoutProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<CollapsibleLayoutModel>(
     dataSource || '',
-    restProps as Partial<CollapsibleLayoutModel>,
-    CollapsibleLayoutModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<CollapsibleLayoutModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/layout/GridLayout.tsx

@@ -44,6 +44,10 @@ export interface GridLayoutProps extends ViewProps {
   maxHeight?: string;
   /** Maximum grid container width */
   maxWidth?: string;
+  /** MUI sx prop for advanced styling (explicit override for type resolution) */
+  sx?: import('@mui/material/styles').SxProps<import('@mui/material/styles').Theme>;
+  /** Inline CSS styles (explicit override for type resolution) */
+  style?: React.CSSProperties;
 }
 
 /**