@qwickapps/react-framework 1.5.7 → 1.5.8

package/src/components/blocks/Image.tsx

@@ -17,7 +17,8 @@
 
 import React, { useState, useCallback } from 'react';
 import { Box, Skeleton, Typography, useTheme } from '@mui/material';
-import { BrokenImage as BrokenImageIcon } from '@mui/icons-material';
+import BrokenImage from "@mui/icons-material/BrokenImage";
+const BrokenImageIcon = BrokenImage;
 import { ImageFit, ImageLoading, ImagePosition } from '../../schemas/ImageSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
@@ -231,14 +232,16 @@ interface PatternRegistry {
 
 // Register HTML patterns that Image component can handle
 (Image as unknown as { registerPatternHandlers: (registry: PatternRegistry) => void }).registerPatternHandlers = (registry: PatternRegistry): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
   // Register img elements
-  if (!registry.hasPattern('img')) {
-    registry.registerPattern('img', transformImage);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('img')) {
+    typedRegistry.registerPattern?.('img', transformImage);
   }
 
   // Register figure elements with img
-  if (!registry.hasPattern('figure img')) {
-    registry.registerPattern('figure img', transformFigureImage);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('figure img')) {
+    typedRegistry.registerPattern?.('figure img', transformFigureImage);
   }
 };
 

package/src/components/blocks/PageBannerHeader.tsx

@@ -12,7 +12,8 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { MoreVert as MoreIcon } from '@mui/icons-material';
+import MoreVert from "@mui/icons-material/MoreVert";
+const MoreIcon = MoreVert;
 import {
   Avatar,
   Box,
@@ -387,9 +388,7 @@ function PageBannerHeader(props: PageBannerHeaderProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<PageBannerHeaderModel>(
     dataSource || '',
-    restProps as Partial<PageBannerHeaderModel>,
-    PageBannerHeaderModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<PageBannerHeaderModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/ProductCard.tsx

@@ -10,7 +10,12 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Schedule as ComingSoonIcon, Launch as LaunchIcon, Visibility as PreviewIcon } from '@mui/icons-material';
+import Schedule from '@mui/icons-material/Schedule';
+import Launch from '@mui/icons-material/Launch';
+import Visibility from '@mui/icons-material/Visibility';
+const ComingSoonIcon = Schedule;
+const LaunchIcon = Launch;
+const PreviewIcon = Visibility;
 import {
   Box,
   Chip,
@@ -406,14 +411,12 @@ function ProductCard(props: ProductCardProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Mark as QwickApp component
-  (ProductCard as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(ProductCard, { [QWICKAPP_COMPONENT]: true });
 
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<ProductCardModel>(
     dataSource || '',
-    restProps as Partial<ProductCardModel>,
-    ProductCardModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<ProductCardModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/Section.tsx

@@ -168,14 +168,16 @@ interface PatternRegistry {
 
 // Register HTML patterns that Section component can handle
 (Section as unknown as { registerPatternHandlers: (registry: PatternRegistry) => void }).registerPatternHandlers = (registry: PatternRegistry): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
   // Register section element pattern
-  if (!registry.hasPattern('section')) {
-    registry.registerPattern('section', (Section as unknown as { transformSection: (element: Element) => unknown }).transformSection);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('section')) {
+    typedRegistry.registerPattern?.('section', (Section as unknown as { transformSection: (element: Element) => unknown }).transformSection);
   }
 
   // Register section with specific classes
-  if (!registry.hasPattern('section.blog-section')) {
-    registry.registerPattern('section.blog-section', (Section as unknown as { transformBlogSection: (element: Element) => unknown }).transformBlogSection);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('section.blog-section')) {
+    typedRegistry.registerPattern?.('section.blog-section', (Section as unknown as { transformBlogSection: (element: Element) => unknown }).transformBlogSection);
   }
 };
 

package/src/components/blocks/Text.tsx

@@ -25,8 +25,14 @@ import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
 /**
  * Props interface for Text component
  * Uses SchemaProps<typeof TextSchema> for clean typing
+ * Explicitly includes sx and style for type resolution
  */
-export type TextProps = ViewProps & SchemaProps<typeof TextSchema>;
+export type TextProps = ViewProps & SchemaProps<typeof TextSchema> & {
+  /** 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;
+};
 
 /**
  * TextView - Pure view component that renders the typography
@@ -130,24 +136,26 @@ interface TextComponentWithPatterns {
 
 // Register HTML patterns that Text component can handle
 (Text as unknown as TextComponentWithPatterns).registerPatternHandlers = (registry: PatternRegistry): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
   const textComponent = Text as unknown as TextComponentWithPatterns;
 
   // Register paragraph elements
-  if (!registry.hasPattern('p')) {
-    registry.registerPattern('p', textComponent.transformParagraph);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('p')) {
+    typedRegistry.registerPattern?.('p', textComponent.transformParagraph);
   }
 
   // Register heading elements
   const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
   headings.forEach(heading => {
-    if (!registry.hasPattern(heading)) {
-      registry.registerPattern(heading, (element: Element) => textComponent.transformHeading(element, heading));
+
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern(heading)) {
+      typedRegistry.registerPattern?.(heading, (element: Element) => textComponent.transformHeading(element, heading));
     }
   });
 
   // Register span elements
-  if (!registry.hasPattern('span')) {
-    registry.registerPattern('span', textComponent.transformSpan);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('span')) {
+    typedRegistry.registerPattern?.('span', textComponent.transformSpan);
   }
 };
 

package/src/components/buttons/Button.tsx

@@ -311,19 +311,21 @@ export const Button: SerializableComponent<ButtonProps> = createSerializableView
 
 // Register HTML patterns that Button component can handle
 (Button as Record<string, unknown>).registerPatternHandlers = (registry: Record<string, (...args: unknown[]) => unknown>): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
   // Register button elements
-  if (!registry.hasPattern('button')) {
-    registry.registerPattern('button', transformButton);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('button')) {
+    typedRegistry.registerPattern?.('button', transformButton);
   }
   
   // Register input type="button" elements
-  if (!registry.hasPattern('input[type="button"]')) {
-    registry.registerPattern('input[type="button"]', transformInputButton);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('input[type="button"]')) {
+    typedRegistry.registerPattern?.('input[type="button"]', transformInputButton);
   }
   
   // Register input type="submit" elements
-  if (!registry.hasPattern('input[type="submit"]')) {
-    registry.registerPattern('input[type="submit"]', transformSubmitButton);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('input[type="submit"]')) {
+    typedRegistry.registerPattern?.('input[type="submit"]', transformSubmitButton);
   }
 };
 

package/src/components/buttons/PaletteSwitcher.tsx

@@ -11,10 +11,10 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import {
-  Palette as PaletteIcon,
-  Circle as CircleIcon,
-} from '@mui/icons-material';
+import Palette from '@mui/icons-material/Palette';
+import Circle from '@mui/icons-material/Circle';
+const PaletteIcon = Palette;
+const CircleIcon = Circle;
 import {
   IconButton,
   Menu,
@@ -210,9 +210,7 @@ function PaletteSwitcher(props: PaletteSwitcherProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<PaletteSwitcherModel>(
     dataSource || '',
-    restProps as Partial<PaletteSwitcherModel>,
-    PaletteSwitcherModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<PaletteSwitcherModel>
   );
 
   // If no dataSource, use traditional props
@@ -266,6 +264,6 @@ function PaletteSwitcher(props: PaletteSwitcherProps) {
 }
 
 // Mark as QwickApp component
-(PaletteSwitcher as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(PaletteSwitcher, { [QWICKAPP_COMPONENT]: true });
 
 export default PaletteSwitcher;

package/src/components/buttons/ThemeSwitcher.tsx

@@ -21,11 +21,12 @@ import {
   Tooltip,
   Typography
 } from '@mui/material';
-import {
-  DarkMode as DarkModeIcon,
-  LightMode as LightModeIcon,
-  SettingsSystemDaydream as SystemIcon
-} from '@mui/icons-material';
+import DarkMode from '@mui/icons-material/DarkMode';
+import LightMode from '@mui/icons-material/LightMode';
+import SettingsSystemDaydream from '@mui/icons-material/SettingsSystemDaydream';
+const DarkModeIcon = DarkMode;
+const LightModeIcon = LightMode;
+const SystemIcon = SettingsSystemDaydream;
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { useState } from 'react';
 import { useTheme } from '../../contexts/ThemeContext';
@@ -235,9 +236,7 @@ function ThemeSwitcher(props: ThemeSwitcherProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<ThemeSwitcherModel>(
     dataSource || '',
-    restProps as Partial<ThemeSwitcherModel>,
-    ThemeSwitcherModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<ThemeSwitcherModel>
   );
 
   // If no dataSource, use traditional props
@@ -282,6 +281,6 @@ function ThemeSwitcher(props: ThemeSwitcherProps) {
 }
 
 // Mark as QwickApp component
-(ThemeSwitcher as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(ThemeSwitcher, { [QWICKAPP_COMPONENT]: true });
 
 export default ThemeSwitcher;

package/src/components/forms/Captcha.tsx

@@ -286,6 +286,6 @@ export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, re
 Captcha.displayName = 'Captcha';
 
 // Mark as QwickApp component
-(Captcha as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(Captcha, { [QWICKAPP_COMPONENT]: true });
 
 export default Captcha;

package/src/components/forms/FormBlock.tsx

@@ -225,7 +225,7 @@ function FormBlockView({
 }
 
 // Main component with data binding support and serialization capability
-export class FormBlock extends ModelView<FormBlockProps, FormBlockModel> {
+export class FormBlock extends ModelView<FormBlockProps> {
   // Component self-declaration for serialization
   static readonly tagName = 'FormBlock';
   static readonly version = '1.0.0';
@@ -298,9 +298,7 @@ function FormBlockWithDataBinding(props: FormBlockProps) {
   // Use data binding
   const { loading, error, ...formBlockProps } = useDataBinding<FormBlockModel>(
     dataSource!,
-    restProps as Partial<FormBlockModel>,
-    FormBlockModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<FormBlockModel>
   );
 
   // Show loading state
@@ -346,6 +344,6 @@ function FormBlockWithDataBinding(props: FormBlockProps) {
 }
 
 // Mark as QwickApp component
-(FormBlock as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(FormBlock, { [QWICKAPP_COMPONENT]: true });
 
 export default FormBlock;

package/src/components/forms/FormCheckbox.tsx

@@ -111,6 +111,6 @@ export const FormCheckbox = React.forwardRef<HTMLDivElement, FormCheckboxProps>(
 FormCheckbox.displayName = 'FormCheckbox';
 
 // Mark as QwickApp component
-(FormCheckbox as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(FormCheckbox, { [QWICKAPP_COMPONENT]: true });
 
 export default FormCheckbox;

package/src/components/forms/FormField.tsx

@@ -175,6 +175,6 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
 FormField.displayName = 'FormField';
 
 // Mark as QwickApp component
-(FormField as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(FormField, { [QWICKAPP_COMPONENT]: true });
 
 export default FormField;

package/src/components/forms/FormSelect.tsx

@@ -135,6 +135,6 @@ export const FormSelect = React.forwardRef<HTMLDivElement, FormSelectProps>((pro
 FormSelect.displayName = 'FormSelect';
 
 // Mark as QwickApp component
-(FormSelect as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(FormSelect, { [QWICKAPP_COMPONENT]: true });
 
 export default FormSelect;

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>
+  );
+}