@qwickapps/react-framework 1.5.13 → 1.7.0

package/src/components/forms/FormCheckbox.tsx

@@ -6,7 +6,7 @@
  * - Supports FormControlLabel for proper label positioning
  * - Handles required and disabled states
  * - Helper text support
- * - Base props support for grid behavior and styling
+ * - Schema-driven architecture with serialization support
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
@@ -18,31 +18,32 @@ import {
   Checkbox,
   FormHelperText,
 } from '@mui/material';
-import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+import type { SchemaProps } from '@qwickapps/schema';
+import FormCheckboxModel from '../../schemas/FormCheckboxSchema';
+import { ViewProps } from '../shared/viewProps';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 
-interface FormCheckboxBaseProps {
-  label: string;
-  checked: boolean;
+/**
+ * Props interface for FormCheckbox component
+ * Combines schema props with callback handler
+ */
+export interface FormCheckboxProps extends ViewProps, SchemaProps<typeof FormCheckboxModel> {
+  /** Callback when checkbox state changes */
   onChange: (checked: boolean) => void;
-  helperText?: string;
-  required?: boolean;
-  disabled?: boolean;
 }
 
-export interface FormCheckboxProps extends WithBaseProps<FormCheckboxBaseProps> {}
-
-export const FormCheckbox = React.forwardRef<HTMLDivElement, FormCheckboxProps>((props, ref) => {
-  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
-
-  const {
-    label,
-    checked,
-    onChange,
-    helperText,
-    required = false,
-    disabled = false,
-  } = restProps as FormCheckboxBaseProps;
-
+/**
+ * FormCheckboxView - Pure view component that renders the checkbox
+ */
+function FormCheckboxView({
+  label,
+  checked,
+  onChange,
+  helperText,
+  required = false,
+  disabled = false,
+  ...restProps
+}: FormCheckboxProps) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.checked);
   };
@@ -65,29 +66,15 @@ export const FormCheckbox = React.forwardRef<HTMLDivElement, FormCheckboxProps>(
     '& .MuiFormControlLabel-label.Mui-disabled': {
       color: 'var(--theme-text-disabled)',
     },
-    ...styleProps.sx,
   };
 
   const helperTextStyles = {
     color: 'var(--theme-secondary)',
-    marginLeft: '32px', // Align with checkbox + label
+    marginLeft: '32px',
   };
 
   return (
-    <FormControl
-      ref={ref}
-      {...htmlProps}
-      {...styleProps}
-      // Store grid props as data attributes for ColumnLayout to pick up
-      {...(gridProps && {
-        'data-grid-span': gridProps.span,
-        'data-grid-xs': gridProps.xs,
-        'data-grid-sm': gridProps.sm,
-        'data-grid-md': gridProps.md,
-        'data-grid-lg': gridProps.lg,
-        'data-grid-xl': gridProps.xl,
-      })}
-    >
+    <FormControl {...restProps}>
       <FormControlLabel
         control={
           <Checkbox
@@ -106,11 +93,16 @@ export const FormCheckbox = React.forwardRef<HTMLDivElement, FormCheckboxProps>(
       )}
     </FormControl>
   );
-});
-
-FormCheckbox.displayName = 'FormCheckbox';
+}
 
-// Mark as QwickApp component
-Object.assign(FormCheckbox, { [QWICKAPP_COMPONENT]: true });
+/**
+ * Create FormCheckbox component using the factory pattern
+ */
+export const FormCheckbox: SerializableComponent<FormCheckboxProps> = createSerializableView<FormCheckboxProps>({
+  tagName: 'FormCheckbox',
+  version: '1.0.0',
+  role: 'input',
+  View: FormCheckboxView,
+});
 
 export default FormCheckbox;

package/src/components/forms/FormField.tsx

@@ -4,10 +4,10 @@
  * Features:
  * - Uses QwickApps CSS theme variables for consistent styling
  * - Supports text, number, password, and email input types
- * - Integrated with MUI FormControl, Input, and Select
+ * - Integrated with MUI FormControl, Input
  * - Handles readonly, disabled, and required states
  * - Support for adornments and helper text
- * - Base props support for grid behavior and styling
+ * - Schema-driven architecture with serialization support
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
@@ -20,63 +20,54 @@ import {
   FormHelperText,
   InputAdornment,
 } from '@mui/material';
-import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+import type { SchemaProps } from '@qwickapps/schema';
+import FormFieldModel from '../../schemas/FormFieldSchema';
+import { ViewProps } from '../shared/viewProps';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 
-export interface FormFieldOption {
-  value: string | number;
-  label: string;
-}
-
-interface FormFieldBaseProps {
-  label: string;
-  value: string | number;
+/**
+ * Props interface for FormField component
+ * Combines schema props with callback handlers and adornments
+ */
+export interface FormFieldProps extends ViewProps, SchemaProps<typeof FormFieldModel> {
+  /** Callback when value changes */
   onChange?: (value: string | number) => void;
+  /** Raw change handler with event */
   onChangeRaw?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  type?: 'text' | 'number' | 'password' | 'email' | 'tel';
-  helperText?: string;
-  required?: boolean;
-  readOnly?: boolean;
-  disabled?: boolean;
-  disabledColor?: string;
-  fullWidth?: boolean;
-  multiline?: boolean;
-  rows?: number;
-  placeholder?: string;
+  /** Start adornment (icon, text, etc.) */
   startAdornment?: React.ReactNode;
+  /** End adornment (icon, text, etc.) */
   endAdornment?: React.ReactNode;
+  /** Additional input props */
   inputProps?: unknown;
 }
 
-export interface FormFieldProps extends WithBaseProps<FormFieldBaseProps> {}
-
-export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props, ref) => {
-  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
-
-  const {
-    label,
-    value,
-    onChange,
-    onChangeRaw,
-    type = 'text',
-    helperText,
-    required = false,
-    readOnly = false,
-    disabled = false,
-    disabledColor,
-    fullWidth = true,
-    multiline = false,
-    rows,
-    placeholder,
-    startAdornment,
-    endAdornment,
-    inputProps,
-  } = restProps as FormFieldBaseProps;
-
-  // Generate a unique ID for the input field
+/**
+ * FormFieldView - Pure view component that renders the input field
+ */
+function FormFieldView({
+  label,
+  value,
+  onChange,
+  onChangeRaw,
+  type = 'text',
+  helperText,
+  required = false,
+  readOnly = false,
+  disabled = false,
+  disabledColor,
+  fullWidth = true,
+  multiline = false,
+  rows,
+  placeholder,
+  startAdornment,
+  endAdornment,
+  inputProps,
+  ...restProps
+}: FormFieldProps) {
   const fieldId = React.useId();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    // If onChangeRaw is provided, use it instead
     if (onChangeRaw) {
       onChangeRaw(e);
       return;
@@ -107,7 +98,6 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
       color: disabledColor,
       WebkitTextFillColor: disabledColor,
     } : undefined,
-    ...styleProps.sx,
   };
 
   const labelStyles = {
@@ -122,19 +112,8 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
 
   return (
     <FormControl
-      ref={ref}
       fullWidth={fullWidth}
-      {...htmlProps}
-      {...styleProps}
-      // Store grid props as data attributes for ColumnLayout to pick up
-      {...(gridProps && {
-        'data-grid-span': gridProps.span,
-        'data-grid-xs': gridProps.xs,
-        'data-grid-sm': gridProps.sm,
-        'data-grid-md': gridProps.md,
-        'data-grid-lg': gridProps.lg,
-        'data-grid-xl': gridProps.xl,
-      })}
+      {...restProps}
     >
       <InputLabel htmlFor={fieldId} sx={labelStyles} shrink>
         {label}
@@ -170,11 +149,16 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
       )}
     </FormControl>
   );
-});
-
-FormField.displayName = 'FormField';
+}
 
-// Mark as QwickApp component
-Object.assign(FormField, { [QWICKAPP_COMPONENT]: true });
+/**
+ * Create FormField component using the factory pattern
+ */
+export const FormField: SerializableComponent<FormFieldProps> = createSerializableView<FormFieldProps>({
+  tagName: 'FormField',
+  version: '1.0.0',
+  role: 'input',
+  View: FormFieldView,
+});
 
 export default FormField;

package/src/components/forms/FormSelect.tsx

@@ -6,7 +6,7 @@
  * - Simplified select-only interface (use FormField for mixed inputs)
  * - Support for placeholder, size variants, and helper text
  * - Integrated with MUI FormControl and Select
- * - Base props support for grid behavior and styling
+ * - Schema-driven architecture with serialization support
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
@@ -19,46 +19,45 @@ import {
   MenuItem,
   FormHelperText,
 } from '@mui/material';
-import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+import type { SchemaProps } from '@qwickapps/schema';
+import FormSelectModel from '../../schemas/FormSelectSchema';
+import { ViewProps } from '../shared/viewProps';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 
 export interface FormSelectOption {
   value: string | number;
   label: string;
 }
 
-interface FormSelectBaseProps {
-  label?: string;
-  value: string | number;
+/**
+ * Props interface for FormSelect component
+ * Combines schema props with callback handlers
+ */
+export interface FormSelectProps extends ViewProps, SchemaProps<typeof FormSelectModel> {
+  /** Callback when value changes */
   onChange: (value: string | number) => void;
+  /** Options array (runtime prop, overrides schema) */
   options: FormSelectOption[];
-  helperText?: string;
-  required?: boolean;
-  disabled?: boolean;
-  fullWidth?: boolean;
-  size?: 'small' | 'medium';
-  placeholder?: string;
 }
 
-export interface FormSelectProps extends WithBaseProps<FormSelectBaseProps> {}
-
-export const FormSelect = React.forwardRef<HTMLDivElement, FormSelectProps>((props, ref) => {
-  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
-
-  const {
-    label,
-    value,
-    onChange,
-    options,
-    helperText,
-    required = false,
-    disabled = false,
-    fullWidth = true,
-    size = 'small',
-    placeholder,
-  } = restProps as FormSelectBaseProps;
-
-  const handleChange = (e: unknown) => {
-    onChange(e.target.value);
+/**
+ * FormSelectView - Pure view component that renders the select field
+ */
+function FormSelectView({
+  label,
+  value,
+  onChange,
+  options,
+  helperText,
+  required = false,
+  disabled = false,
+  fullWidth = true,
+  size = 'small',
+  placeholder,
+  ...restProps
+}: FormSelectProps) {
+  const handleChange = (e: { target: { value: unknown } }) => {
+    onChange(e.target.value as string | number);
   };
 
   const selectStyles = {
@@ -69,7 +68,6 @@ export const FormSelect = React.forwardRef<HTMLDivElement, FormSelectProps>((pro
     borderColor: 'var(--theme-surface)',
     color: 'var(--theme-text-primary)',
     borderRadius: 1,
-    ...styleProps.sx,
   };
 
   const labelStyles = {
@@ -84,20 +82,9 @@ export const FormSelect = React.forwardRef<HTMLDivElement, FormSelectProps>((pro
 
   return (
     <FormControl
-      ref={ref}
       fullWidth={fullWidth}
       size={size}
-      {...htmlProps}
-      {...styleProps}
-      // Store grid props as data attributes for ColumnLayout to pick up
-      {...(gridProps && {
-        'data-grid-span': gridProps.span,
-        'data-grid-xs': gridProps.xs,
-        'data-grid-sm': gridProps.sm,
-        'data-grid-md': gridProps.md,
-        'data-grid-lg': gridProps.lg,
-        'data-grid-xl': gridProps.xl,
-      })}
+      {...restProps}
     >
       {label && (
         <InputLabel sx={labelStyles} shrink>
@@ -130,11 +117,16 @@ export const FormSelect = React.forwardRef<HTMLDivElement, FormSelectProps>((pro
       )}
     </FormControl>
   );
-});
-
-FormSelect.displayName = 'FormSelect';
+}
 
-// Mark as QwickApp component
-Object.assign(FormSelect, { [QWICKAPP_COMPONENT]: true });
+/**
+ * Create FormSelect component using the factory pattern
+ */
+export const FormSelect: SerializableComponent<FormSelectProps> = createSerializableView<FormSelectProps>({
+  tagName: 'FormSelect',
+  version: '1.0.0',
+  role: 'input',
+  View: FormSelectView,
+});
 
 export default FormSelect;

package/src/contexts/QwickAppContext.tsx

@@ -28,7 +28,7 @@ export interface QwickAppProps {
   enableScaffolding?: boolean;
   /** Primary navigation items for scaffolding */
   navigationItems?: MenuItem[];
-  /** App bar configuration for scaffolding */
+  /** App bar configuration for scaffolding - use render function for actions to cross server/client boundaries safely */
   appBar?: ScaffoldProps['appBar'];
   /** Whether to show app bar when scaffolding is enabled (default: true) */
   showAppBar?: boolean;

package/src/hooks/useBaseProps.ts

@@ -82,10 +82,43 @@ export interface BaseComponentProps {
  */
 export const QWICKAPP_COMPONENT = Symbol('QwickAppComponent');
 
+/**
+ * Return type for useBaseProps hook
+ */
+export interface BasePropsResult<T extends BaseComponentProps> {
+  gridProps: {
+    span?: number | 'auto' | 'grow';
+    xs?: number | 'auto';
+    sm?: number | 'auto';
+    md?: number | 'auto';
+    lg?: number | 'auto';
+    xl?: number | 'auto';
+  } | null;
+  styleProps: {
+    className?: string;
+    sx?: SxProps<Theme>;
+    style?: React.CSSProperties;
+  };
+  htmlProps: {
+    id?: string;
+    role?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'data-testid'?: string;
+    onClick?: React.MouseEventHandler<unknown>;
+    onMouseEnter?: React.MouseEventHandler<unknown>;
+    onMouseLeave?: React.MouseEventHandler<unknown>;
+    onFocus?: React.FocusEventHandler<unknown>;
+    onBlur?: React.FocusEventHandler<unknown>;
+  };
+  restProps: Omit<T, keyof BaseComponentProps>;
+}
+
 /**
  * Hook to process base component props
  */
-export function useBaseProps<T extends BaseComponentProps>(props: T) {
+export function useBaseProps<T extends BaseComponentProps>(props: T): BasePropsResult<T> {
   const {
     // Grid props
     span,

package/src/palettes/PaletteAutumn.css

@@ -61,12 +61,14 @@ html[data-palette="autumn"][data-theme="light"] {
   --palette-error-main: #dc2626;
   --palette-error-light: #fee2e2;
   --palette-error-dark: #7f1d1d;
+  --palette-on-error: #ffffff;
   --palette-error-border: #fecaca;
-  
+
   /* Warning palette - Amber */
   --palette-warning-main: #f59e0b;
   --palette-warning-light: #fef3c7;
   --palette-warning-dark: #78350f;
+  --palette-on-warning: #000000;
   --palette-warning-border: #fde68a;
   
   /* Info palette - Teal */

package/src/palettes/PaletteBoutique.css

@@ -0,0 +1,176 @@
+/**
+ * Boutique Color Palette
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ *
+ * Sophisticated teal, bronze, and navy - perfect for premium retail and fashion brands
+ */
+
+/* ===== BOUTIQUE PALETTE - LIGHT THEME ===== */
+html[data-palette="boutique"]:not([data-theme="dark"]),
+html[data-palette="boutique"][data-theme="light"] {
+  /* Primary palette - Teal */
+  --palette-primary-main: #3ca6b6;
+  --palette-primary-light: #6bc4d1;
+  --palette-primary-dark: #2a7a86;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Bronze */
+  --palette-secondary-main: #be765e;
+  --palette-secondary-light: #d4987e;
+  --palette-secondary-dark: #9a5742;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Warm ivory */
+  --palette-surface-main: #fefcf8;
+  --palette-surface-variant: #f5f0ea;
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #2c2520;
+
+  /* Background palette - Soft cream */
+  --palette-background-main: #fffdf9;
+  --palette-background-dark: #f8f4ed;
+  --palette-background-overlay: rgba(255, 253, 249, 0.95);
+  --palette-on-background: #3d3530;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(255, 253, 249, 0.98);
+  --palette-header-bg-end: rgba(255, 253, 249, 0.95);
+  --palette-header-collapsed-bg-start: rgba(255, 253, 249, 0.99);
+  --palette-header-collapsed-bg-end: rgba(255, 253, 249, 0.96);
+
+  /* Text palette - Deep brown */
+  --palette-text-primary: #2c2520;
+  --palette-text-secondary: #5d5349;
+  --palette-text-disabled: rgba(44, 37, 32, 0.38);
+  --palette-text-inverted: #ffffff;
+
+  /* Border palette - Soft taupe */
+  --palette-border-main: #d4cdc4;
+  --palette-border-light: rgba(44, 37, 32, 0.12);
+  --palette-border-lighter: rgba(44, 37, 32, 0.05);
+  --palette-border-medium: #b8afa4;
+
+  /* Success palette - Emerald */
+  --palette-success-main: #10b981;
+  --palette-success-light: #d1fae5;
+  --palette-success-dark: #047857;
+  --palette-success-border: #a7f3d0;
+
+  /* Error palette - Rose */
+  --palette-error-main: #f43f5e;
+  --palette-error-light: #ffe4e6;
+  --palette-error-dark: #9f1239;
+  --palette-on-error: #ffffff;
+  --palette-error-border: #fecdd3;
+
+  /* Warning palette - Amber */
+  --palette-warning-main: #f59e0b;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #d97706;
+  --palette-on-warning: #000000;
+  --palette-warning-border: #fde68a;
+
+  /* Info palette - Sky blue */
+  --palette-info-main: #0284c7;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #075985;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #7dd3fc;
+
+  /* Accent palette - Navy */
+  --palette-accent-main: #0a1a3e;
+  --palette-accent-light: #1e3a73;
+  --palette-accent-dark: #050d1f;
+  --palette-on-accent: #ffffff;
+
+  /* Control palette - Deep teal */
+  --palette-control-main: #2a7a86;
+  --palette-control-light: #3ca6b6;
+  --palette-control-text: #ffffff;
+  --palette-control-border: #217380;
+}
+
+/* ===== BOUTIQUE PALETTE - DARK THEME ===== */
+html[data-palette="boutique"][data-theme="dark"] {
+  /* Primary palette - Bright teal */
+  --palette-primary-main: #6bc4d1;
+  --palette-primary-light: #8fd5de;
+  --palette-primary-dark: #3ca6b6;
+  --palette-on-primary: #0a1a1d;
+
+  /* Secondary palette - Warm bronze */
+  --palette-secondary-main: #d4987e;
+  --palette-secondary-light: #e3b9a4;
+  --palette-secondary-dark: #be765e;
+  --palette-on-secondary: #1a1210;
+
+  /* Surface palette - Charcoal */
+  --palette-surface-main: #1a1614;
+  --palette-surface-variant: #252220;
+  --palette-surface-elevated: #332f2c;
+  --palette-on-surface: #f5f0ea;
+
+  /* Background palette - Deep slate */
+  --palette-background-main: #0f0d0c;
+  --palette-background-dark: #1a1614;
+  --palette-background-overlay: rgba(26, 22, 20, 0.95);
+  --palette-on-background: #e8e4de;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(15, 13, 12, 0.98);
+  --palette-header-bg-end: rgba(15, 13, 12, 0.95);
+  --palette-header-collapsed-bg-start: rgba(15, 13, 12, 0.99);
+  --palette-header-collapsed-bg-end: rgba(15, 13, 12, 0.96);
+
+  /* Text palette - Warm light */
+  --palette-text-primary: #f5f0ea;
+  --palette-text-secondary: #cdc5bc;
+  --palette-text-disabled: rgba(245, 240, 234, 0.38);
+  --palette-text-inverted: #0f0d0c;
+
+  /* Border palette - Warm gray */
+  --palette-border-main: #4a4440;
+  --palette-border-light: rgba(245, 240, 234, 0.12);
+  --palette-border-lighter: rgba(245, 240, 234, 0.05);
+  --palette-border-medium: #3d3833;
+
+  /* Success palette - Bright emerald */
+  --palette-success-main: #34d399;
+  --palette-success-light: #064e3b;
+  --palette-success-dark: #10b981;
+  --palette-success-border: #065f46;
+
+  /* Error palette - Bright rose */
+  --palette-error-main: #fb7185;
+  --palette-error-light: #4c0519;
+  --palette-error-dark: #f43f5e;
+  --palette-on-error: #ffffff;
+  --palette-error-border: #881337;
+
+  /* Warning palette - Bright amber */
+  --palette-warning-main: #fbbf24;
+  --palette-warning-light: #451a03;
+  --palette-warning-dark: #f59e0b;
+  --palette-on-warning: #1c1917;
+  --palette-warning-border: #78350f;
+
+  /* Info palette - Bright sky */
+  --palette-info-main: #38bdf8;
+  --palette-info-light: #0c4a6e;
+  --palette-info-dark: #0284c7;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #075985;
+
+  /* Accent palette - Bright navy */
+  --palette-accent-main: #3b5ba3;
+  --palette-accent-light: #5a7cc4;
+  --palette-accent-dark: #1e3a73;
+  --palette-on-accent: #ffffff;
+
+  /* Control palette - Teal glow */
+  --palette-control-main: #6bc4d1;
+  --palette-control-light: #8fd5de;
+  --palette-control-text: #0a1a1d;
+  --palette-control-border: #3ca6b6;
+}

package/src/palettes/PaletteBoutique.ts

@@ -0,0 +1,16 @@
+/**
+ * Boutique Palette Configuration
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import "./PaletteBoutique.css";
+import type { PaletteConfig } from '../contexts/PaletteContext';
+
+export const PaletteBoutique: PaletteConfig = {
+  id: 'boutique',
+  name: 'Boutique',
+  description: 'Sophisticated teal, bronze, and navy - perfect for premium retail and fashion brands',
+  primaryColor: '#3ca6b6',
+};
+
+export default PaletteBoutique;