@qwickapps/react-framework 1.4.8 → 1.5.0

package/src/components/forms/FormField.tsx

@@ -0,0 +1,180 @@
+/**
+ * FormField - Themed form field component wrapping MUI FormControl
+ *
+ * Features:
+ * - Uses QwickApps CSS theme variables for consistent styling
+ * - Supports text, number, password, and email input types
+ * - Integrated with MUI FormControl, Input, and Select
+ * - Handles readonly, disabled, and required states
+ * - Support for adornments and helper text
+ * - Base props support for grid behavior and styling
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import {
+  FormControl,
+  InputLabel,
+  Input,
+  FormHelperText,
+  InputAdornment,
+} from '@mui/material';
+import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+
+export interface FormFieldOption {
+  value: string | number;
+  label: string;
+}
+
+interface FormFieldBaseProps {
+  label: string;
+  value: string | number;
+  onChange?: (value: string | number) => void;
+  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;
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+  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
+  const fieldId = React.useId();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    // If onChangeRaw is provided, use it instead
+    if (onChangeRaw) {
+      onChangeRaw(e);
+      return;
+    }
+
+    if (onChange) {
+      const newValue = type === 'number' ? parseInt(e.target.value) || 0 : e.target.value;
+      onChange(newValue);
+    }
+  };
+
+  const inputStyles = {
+    p: 1,
+    pl: 1.6,
+    mt: 3,
+    color: disabled && disabledColor
+      ? disabledColor
+      : readOnly
+        ? 'var(--theme-text-secondary)'
+        : 'var(--theme-text-primary)',
+    backgroundColor: readOnly ? 'var(--theme-surface-variant)' : 'transparent',
+    borderRadius: 1,
+    '&.Mui-disabled': disabledColor ? {
+      color: disabledColor,
+      WebkitTextFillColor: disabledColor,
+    } : undefined,
+    '& input.Mui-disabled': disabledColor ? {
+      color: disabledColor,
+      WebkitTextFillColor: disabledColor,
+    } : undefined,
+    ...styleProps.sx,
+  };
+
+  const labelStyles = {
+    left: -12,
+    fontWeight: 600,
+    color: 'var(--theme-text-primary)',
+  };
+
+  const helperTextStyles = {
+    color: 'var(--theme-secondary)',
+  };
+
+  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,
+      })}
+    >
+      <InputLabel htmlFor={fieldId} sx={labelStyles} shrink>
+        {label}
+      </InputLabel>
+
+      <Input
+        id={fieldId}
+        type={type}
+        value={value}
+        onChange={handleChange}
+        readOnly={readOnly}
+        disabled={disabled}
+        required={required}
+        multiline={multiline}
+        rows={rows}
+        placeholder={placeholder}
+        inputProps={inputProps}
+        sx={inputStyles}
+        startAdornment={
+          startAdornment ? (
+            <InputAdornment position="start">{startAdornment}</InputAdornment>
+          ) : undefined
+        }
+        endAdornment={
+          endAdornment ? (
+            <InputAdornment position="end">{endAdornment}</InputAdornment>
+          ) : undefined
+        }
+      />
+
+      {helperText && (
+        <FormHelperText sx={helperTextStyles}>{helperText}</FormHelperText>
+      )}
+    </FormControl>
+  );
+});
+
+FormField.displayName = 'FormField';
+
+// Mark as QwickApp component
+(FormField as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+
+export default FormField;

package/src/components/forms/FormSelect.tsx

@@ -0,0 +1,140 @@
+/**
+ * FormSelect - Themed form select component wrapping MUI Select
+ *
+ * Features:
+ * - Uses QwickApps CSS theme variables for consistent styling
+ * - 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
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  FormHelperText,
+} from '@mui/material';
+import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+
+export interface FormSelectOption {
+  value: string | number;
+  label: string;
+}
+
+interface FormSelectBaseProps {
+  label?: string;
+  value: string | number;
+  onChange: (value: string | number) => void;
+  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);
+  };
+
+  const selectStyles = {
+    p: 1,
+    pl: 1.6,
+    ...(label ? { mt: 1, color: 'var(--theme-text-primary)' } : {}),
+    backgroundColor: 'var(--theme-surface-variant)',
+    borderColor: 'var(--theme-surface)',
+    color: 'var(--theme-text-primary)',
+    borderRadius: 1,
+    ...styleProps.sx,
+  };
+
+  const labelStyles = {
+    left: -12,
+    fontWeight: 600,
+    color: 'var(--theme-text-primary)',
+  };
+
+  const helperTextStyles = {
+    color: 'var(--theme-secondary)',
+  };
+
+  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,
+      })}
+    >
+      {label && (
+        <InputLabel sx={labelStyles} shrink>
+          {label}
+        </InputLabel>
+      )}
+
+      <Select
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        required={required}
+        displayEmpty={!!placeholder}
+        sx={selectStyles}
+      >
+        {placeholder && (
+          <MenuItem value="" disabled>
+            {placeholder}
+          </MenuItem>
+        )}
+        {options.map((opt) => (
+          <MenuItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </MenuItem>
+        ))}
+      </Select>
+
+      {helperText && (
+        <FormHelperText sx={helperTextStyles}>{helperText}</FormHelperText>
+      )}
+    </FormControl>
+  );
+});
+
+FormSelect.displayName = 'FormSelect';
+
+// Mark as QwickApp component
+(FormSelect as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+
+export default FormSelect;

package/src/components/forms/index.ts

@@ -1,7 +1,19 @@
 /**
  * Enhanced form components with QwickApps base props support
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 export { default as FormBlock } from './FormBlock';
 export type { FormBlockProps } from './FormBlock';
+
+export { default as FormField } from './FormField';
+export type { FormFieldProps, FormFieldOption } from './FormField';
+
+export { default as FormSelect } from './FormSelect';
+export type { FormSelectProps, FormSelectOption } from './FormSelect';
+
+export { default as FormCheckbox } from './FormCheckbox';
+export type { FormCheckboxProps } from './FormCheckbox';
+
+export { default as Captcha } from './Captcha';
+export type { CaptchaProps, CaptchaProvider } from './Captcha';

package/src/components/index.ts

@@ -18,12 +18,15 @@ import '../schemas/transformers/registry';
 export * from './base';
 export * from './blocks';
 export * from './buttons';
+export * from './dialogs';
 export * from './forms';
 export * from './input';
 export * from './layout';
 export * from './pages';
-export * from './Scaffold';
-export * from './ResponsiveMenu';
+export { default as Scaffold } from './Scaffold';
+export type { ScaffoldProps, AppBarProps } from './Scaffold';
+export { default as ResponsiveMenu } from './ResponsiveMenu';
+export type { ResponsiveMenuProps } from './ResponsiveMenu';
 export * from './QwickApp';
 export * from './AccessibilityChecker';
 export * from './ErrorBoundary';
@@ -34,6 +37,9 @@ export * from './Breadcrumbs';
 export { default as Logo } from './Logo';
 export type { LogoProps } from './Logo';
 
+export { default as ProductLogo } from './ProductLogo';
+export type { ProductLogoProps } from './ProductLogo';
+
 export { default as QwickAppsLogo } from './QwickAppsLogo';
 export type { QwickAppsLogoProps } from './QwickAppsLogo';
 
@@ -48,3 +54,8 @@ export type { HtmlProps } from './Html';
 
 export { default as Markdown } from './Markdown';
 export type { MarkdownProps } from './Markdown';
+
+// Shared utilities for serialization
+export { createSerializableView } from './shared/createSerializableView';
+export type { SerializableComponent } from './shared/createSerializableView';
+export type { ViewProps } from './shared/viewProps';

package/src/components/input/ChoiceInputField.tsx

@@ -16,12 +16,11 @@ import {
   Alert,
   Box,
   Button,
-  Paper,
   Typography
 } from '@mui/material';
 import { Add as AddIcon } from '@mui/icons-material';
 import HtmlInputField from './HtmlInputField';
-import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
+// import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 

package/src/components/input/HtmlInputField.tsx

@@ -22,8 +22,7 @@ import {
   Collapse,
   Alert,
   ButtonGroup,
-  Divider,
-} from '@mui/material';
+  } from '@mui/material';
 import {
   FormatBold as BoldIcon,
   FormatItalic as ItalicIcon,
@@ -35,7 +34,7 @@ import {
 } from '@mui/icons-material';
 import SafeSpan from '../SafeSpan';
 import sanitizeHtml from 'sanitize-html';
-import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';
+// import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 

package/src/components/input/SelectInputField.tsx

@@ -20,7 +20,7 @@ import {
   Select,
   SelectChangeEvent,
 } from '@mui/material';
-import SelectInputFieldModel, { SelectOption } from '../../schemas/SelectInputFieldSchema';
+import { SelectOption } from '../../schemas/SelectInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -63,10 +63,36 @@ function SelectInputFieldView({
   };
 
   // Filter out ViewProps that conflict with FormControl
-  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
-          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
-          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
-          className, ...filteredProps } = restProps;
+  const {
+    margin: _margin,
+    padding: _padding,
+    paddingX: _paddingX,
+    paddingY: _paddingY,
+    paddingTop: _paddingTop,
+    paddingRight: _paddingRight,
+    paddingBottom: _paddingBottom,
+    paddingLeft: _paddingLeft,
+    width: _width,
+    height: _height,
+    minWidth: _minWidth,
+    maxWidth: _maxWidth,
+    minHeight: _minHeight,
+    maxHeight: _maxHeight,
+    sx,
+    style,
+    span: _span,
+    xs: _xs,
+    sm: _sm,
+    md: _md,
+    lg: _lg,
+    xl: _xl,
+    background: _background,
+    backgroundImage: _backgroundImage,
+    backgroundGradient: _backgroundGradient,
+    textAlign: _textAlign,
+    className,
+    ...filteredProps
+  } = restProps;
 
   const labelId = label ? `select-label-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined;
 

package/src/components/input/SwitchInputField.tsx

@@ -18,7 +18,6 @@ import {
   FormHelperText,
   Switch,
 } from '@mui/material';
-import SwitchInputFieldModel from '../../schemas/SwitchInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -52,9 +51,9 @@ function SwitchInputFieldView({
   };
 
   // Filter out ViewProps that conflict with FormControl
-  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
-          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
-          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
+  const { margin: _margin, padding: _padding, paddingX: _paddingX, paddingY: _paddingY, paddingTop: _paddingTop, paddingRight: _paddingRight, paddingBottom: _paddingBottom, paddingLeft: _paddingLeft,
+          width: _width, height: _height, minWidth: _minWidth, maxWidth: _maxWidth, minHeight: _minHeight, maxHeight: _maxHeight, sx, style,
+          span: _span, xs: _xs, sm: _sm, md: _md, lg: _lg, xl: _xl, background: _background, backgroundImage: _backgroundImage, backgroundGradient: _backgroundGradient, textAlign: _textAlign,
           className, ...filteredProps } = restProps;
 
   return (

package/src/components/input/TextField.tsx

@@ -21,7 +21,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
   const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
 
   // Extract commonly used props we may inspect
-  const { placeholder, value, defaultValue, slotProps, InputLabelProps, InputProps, variant = 'outlined', ...other } = restProps as any;
+  const { placeholder, value, defaultValue, slotProps, InputLabelProps, InputProps, variant = 'outlined', ...other } = restProps as MuiTextFieldProps;
 
   // Determine whether label should shrink automatically when a placeholder is shown.
   // MUI does not shrink the label for outlined variant with just a placeholder (and empty value) by default.
@@ -55,7 +55,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
   }
 
   // Mark as QwickApp component
-  (TextField as any)[QWICKAPP_COMPONENT] = true;
+  (TextField as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   return (
     <MuiTextField

package/src/components/input/TextInputField.tsx

@@ -11,9 +11,9 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
-import TextInputFieldModel from '../../schemas/TextInputFieldSchema';
+// import TextInputFieldModel from '../../schemas/TextInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -59,10 +59,36 @@ function TextInputFieldView({
   };
 
   // Filter out ViewProps that conflict with TextField
-  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
-          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
-          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
-          className, ...filteredProps } = restProps;
+  const {
+    margin: _margin,
+    padding: _padding,
+    paddingX: _paddingX,
+    paddingY: _paddingY,
+    paddingTop: _paddingTop,
+    paddingRight: _paddingRight,
+    paddingBottom: _paddingBottom,
+    paddingLeft: _paddingLeft,
+    width: _width,
+    height: _height,
+    minWidth: _minWidth,
+    maxWidth: _maxWidth,
+    minHeight: _minHeight,
+    maxHeight: _maxHeight,
+    sx,
+    style,
+    span: _span,
+    xs: _xs,
+    sm: _sm,
+    md: _md,
+    lg: _lg,
+    xl: _xl,
+    background: _background,
+    backgroundImage: _backgroundImage,
+    backgroundGradient: _backgroundGradient,
+    textAlign: _textAlign,
+    className,
+    ...filteredProps
+  } = restProps;
 
   return (
     <TextField

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

@@ -26,13 +26,10 @@ import {
   SxProps,
   Theme,
 } from '@mui/material';
-import { 
+import {
   ExpandMore as ExpandMoreIcon,
   ExpandLess as ExpandLessIcon,
-  Visibility as VisibilityIcon,
-  VisibilityOff as VisibilityOffIcon,
 } from '@mui/icons-material';
-import { WithDataBinding } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../../hooks';
 import CollapsibleLayoutModel from '../../../schemas/CollapsibleLayoutSchema';
 import {
@@ -170,13 +167,13 @@ function CollapsibleLayoutView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
   
   // Mark as QwickApp component
-  (CollapsibleLayoutView as any)[QWICKAPP_COMPONENT] = true;
+  (CollapsibleLayoutView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Determine controlled vs uncontrolled usage
   const controlled = collapsedProp !== undefined;
   
   // State management
-  const { collapsed, toggle, setCollapsed } = useCollapsibleState(
+  const { collapsed, toggle } = useCollapsibleState(
     controlled,
     collapsedProp,
     defaultCollapsed,
@@ -500,18 +497,21 @@ function CollapsibleLayoutView({
 function CollapsibleLayout(props: CollapsibleLayoutProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<CollapsibleLayoutModel>(
+    dataSource || '',
+    restProps as Partial<CollapsibleLayoutModel>,
+    CollapsibleLayoutModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <CollapsibleLayoutView {...restProps} />;
   }
 
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...collapsibleProps } = useDataBinding<CollapsibleLayoutModel>(
-    dataSource,
-    restProps as Partial<CollapsibleLayoutModel>,
-    CollapsibleLayoutModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
+  // Use data binding result
+  const { loading, error, ...collapsibleProps } = bindingResult;
 
   // Show loading state
   if (loading) {

package/src/components/layout/GridCell.tsx

@@ -34,19 +34,20 @@ export interface GridCellProps extends ViewProps {
  * This component receives fully processed props from createSerializableView
  * and renders the grid cell using Material-UI Box with all styling applied.
  */
-function GridCellView({ children, gridProps, ...props }: GridCellProps & { gridProps?: any }) {
+function GridCellView({ children, gridProps, ...props }: GridCellProps & { gridProps?: unknown }) {
+  const typedGridProps = gridProps as { span?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number } | undefined;
   return (
     <Box
       {...props}
       // Store grid props as data attributes for GridLayout 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,
-      })}
+      {...(typedGridProps ? {
+        'data-grid-span': typedGridProps.span,
+        'data-grid-xs': typedGridProps.xs,
+        'data-grid-sm': typedGridProps.sm,
+        'data-grid-md': typedGridProps.md,
+        'data-grid-lg': typedGridProps.lg,
+        'data-grid-xl': typedGridProps.xl,
+      } : {})}
     >
       {children}
     </Box>

package/src/components/layout/GridCellWrapper.tsx

@@ -58,7 +58,7 @@ const GridCellWrapper: React.FC<GridCellWrapperProps> = ({
   const responsiveSizing = fullWidth 
     ? { size: 12 }
     : (() => {
-        const sizeConfig: any = {};
+        const sizeConfig: unknown = {};
         if (xs !== undefined) sizeConfig.xs = xs;
         if (sm !== undefined) sizeConfig.sm = sm;
         if (md !== undefined) sizeConfig.md = md;