@qwickapps/react-framework 1.5.13 → 1.6.0

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/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/schemas/CaptchaSchema.ts

@@ -0,0 +1,65 @@
+/**
+ * Schema for Captcha component - Universal CAPTCHA widget
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsIn, IsOptional, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
+import ViewSchema from './ViewSchema';
+
+@Schema('Captcha', '1.0.0')
+export class CaptchaModel extends ViewSchema {
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'CAPTCHA Provider',
+    description: 'Which CAPTCHA service to use'
+  })
+  @IsIn(['recaptcha-v2', 'recaptcha-v3', 'hcaptcha', 'turnstile'])
+  provider!: 'recaptcha-v2' | 'recaptcha-v3' | 'hcaptcha' | 'turnstile';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Site Key',
+    description: 'Public site key from CAPTCHA provider',
+    placeholder: 'Enter site key...'
+  })
+  @IsString()
+  siteKey!: string;
+
+  @Field({ defaultValue: 'light' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Theme',
+    description: 'CAPTCHA widget theme'
+  })
+  @IsOptional()
+  @IsIn(['light', 'dark'])
+  theme?: 'light' | 'dark';
+
+  @Field({ defaultValue: 'normal' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Size',
+    description: 'CAPTCHA widget size'
+  })
+  @IsOptional()
+  @IsIn(['normal', 'compact', 'invisible'])
+  size?: 'normal' | 'compact' | 'invisible';
+
+  @Field({ defaultValue: 'submit' })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Action',
+    description: 'reCAPTCHA v3 action name',
+    placeholder: 'submit'
+  })
+  @IsOptional()
+  @IsString()
+  action?: string;
+}
+
+export default CaptchaModel;

package/src/schemas/FormCheckboxSchema.ts

@@ -0,0 +1,65 @@
+/**
+ * Schema for FormCheckbox component - Themed checkbox input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsOptional, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
+import ViewSchema from './ViewSchema';
+
+@Schema('FormCheckbox', '1.0.0')
+export class FormCheckboxModel extends ViewSchema {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Label text for the checkbox',
+    placeholder: 'Enter label...'
+  })
+  @IsString()
+  label!: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Checked',
+    description: 'Checkbox checked state'
+  })
+  @IsBoolean()
+  checked!: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Helper Text',
+    description: 'Helper text displayed below the checkbox',
+    placeholder: 'Enter helper text...'
+  })
+  @IsOptional()
+  @IsString()
+  helperText?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Required',
+    description: 'Mark checkbox as required'
+  })
+  @IsOptional()
+  @IsBoolean()
+  required?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disable the checkbox'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+}
+
+export default FormCheckboxModel;

package/src/schemas/FormFieldSchema.ts

@@ -0,0 +1,140 @@
+/**
+ * Schema for FormField component - Themed text/number input field
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsIn, IsInt, IsOptional, IsString, Min } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
+import ViewSchema from './ViewSchema';
+
+@Schema('FormField', '1.0.0')
+export class FormFieldModel extends ViewSchema {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Label text for the input field',
+    placeholder: 'Enter label...'
+  })
+  @IsString()
+  label!: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Value',
+    description: 'Current input value',
+    placeholder: ''
+  })
+  @IsString()
+  value!: string | number;
+
+  @Field({ defaultValue: 'text' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Input Type',
+    description: 'Type of input field'
+  })
+  @IsOptional()
+  @IsIn(['text', 'number', 'password', 'email', 'tel'])
+  type?: 'text' | 'number' | 'password' | 'email' | 'tel';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Helper Text',
+    description: 'Helper text displayed below the input',
+    placeholder: 'Enter helper text...'
+  })
+  @IsOptional()
+  @IsString()
+  helperText?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Required',
+    description: 'Mark field as required'
+  })
+  @IsOptional()
+  @IsBoolean()
+  required?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Read Only',
+    description: 'Make field read-only'
+  })
+  @IsOptional()
+  @IsBoolean()
+  readOnly?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disable the input field'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Disabled Color',
+    description: 'Custom color for disabled state (CSS color value)',
+    placeholder: 'var(--theme-text-disabled)'
+  })
+  @IsOptional()
+  @IsString()
+  disabledColor?: string;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Full Width',
+    description: 'Make input take full width of container'
+  })
+  @IsOptional()
+  @IsBoolean()
+  fullWidth?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Multiline',
+    description: 'Enable multiline textarea mode'
+  })
+  @IsOptional()
+  @IsBoolean()
+  multiline?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Rows',
+    description: 'Number of rows for multiline textarea',
+    placeholder: '4'
+  })
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  rows?: number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder',
+    description: 'Placeholder text',
+    placeholder: 'Enter text...'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+}
+
+export default FormFieldModel;