@qwickapps/react-framework 1.3.0

package/src/components/input/TextField.tsx

@@ -0,0 +1,47 @@
+/**
+ * TextField - Enhanced text input component with base props support
+ * 
+ * A QwickApps-enhanced version of Material-UI TextField with:
+ * - Standardized dimension and spacing props
+ * - Grid behavior support for ColumnLayout
+ * - Consistent theming and styling
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { TextField as MuiTextField, TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+
+export interface TextFieldProps extends WithBaseProps<Omit<MuiTextFieldProps, 'sx' | 'className' | 'style'>> {
+  // Additional QwickApps-specific props can be added here
+}
+
+export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
+  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
+
+  // Mark as QwickApp component
+  (TextField as any)[QWICKAPP_COMPONENT] = true;
+
+  return (
+    <MuiTextField
+      ref={ref}
+      {...restProps}
+      {...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,
+      })}
+    />
+  );
+});
+
+TextField.displayName = 'TextField';
+
+export default TextField;

package/src/components/input/TextInputField.tsx

@@ -0,0 +1,144 @@
+/**
+ * TextInputField - Reusable text input component with consistent styling
+ * 
+ * Provides a standardized text field with:
+ * - Consistent Material-UI styling
+ * - Data binding support
+ * - Focus handling
+ * - Validation and error states
+ * - Support for multiline/textarea mode
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { TextField, TextFieldProps, Paper, Typography } from '@mui/material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import TextInputFieldModel from '../../schemas/TextInputFieldSchema';
+
+type TextInputFieldViewProps = ModelProps<TextInputFieldModel> & {
+  /** Change handler */
+  onChange?: (value: string) => void;
+  /** Focus handler */
+  onFocus?: () => void;
+  /** Additional TextField props */
+  textFieldProps?: Omit<TextFieldProps, 'label' | 'value' | 'onChange' | 'onFocus' | 'required' | 'disabled' | 'error' | 'helperText' | 'placeholder' | 'type' | 'multiline' | 'rows' | 'maxRows'>;
+};
+
+export interface TextInputFieldProps extends TextInputFieldViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function TextInputFieldView({
+  label,
+  value = '',
+  onChange,
+  onFocus,
+  required = false,
+  disabled = false,
+  error,
+  helperText,
+  placeholder,
+  type = 'text',
+  multiline = false,
+  rows,
+  maxRows,
+  textFieldProps,
+  ...restProps
+}: TextInputFieldViewProps) {
+  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event.target.value);
+  };
+
+  return (
+    <TextField
+      {...htmlProps}
+      {...styleProps}
+      fullWidth
+      label={label}
+      value={value}
+      onChange={handleChange}
+      onFocus={onFocus}
+      required={required}
+      disabled={disabled}
+      error={!!error}
+      helperText={error || helperText}
+      placeholder={placeholder}
+      type={type}
+      multiline={multiline}
+      rows={rows}
+      maxRows={maxRows}
+      {...textFieldProps}
+    />
+  );
+}
+
+/**
+ * TextInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function TextInputField(props: TextInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <TextInputFieldView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...textInputFieldProps } = useDataBinding<TextInputFieldModel>(
+    dataSource,
+    restProps as Partial<TextInputFieldModel>,
+    TextInputFieldModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 3,
+          textAlign: 'center'
+        }}
+      >
+        <Typography variant="body2">Loading TextInputField...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading text input field from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading text input field:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Paper
+          variant="outlined"
+          sx={{
+            p: 3,
+            textAlign: 'center',
+            borderColor: 'error.main'
+          }}
+        >
+          <Typography variant="body2" color="error">
+            Error loading text input field: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <TextInputFieldView {...textInputFieldProps} />;
+}
+
+// Mark as QwickApp component
+(TextInputField as any)[QWICKAPP_COMPONENT] = true;
+
+export default TextInputField;

package/src/components/input/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Input components export
+ * 
+ * Enhanced input components with QwickApps base props support
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+export { default as ChoiceInputField } from './ChoiceInputField';
+export { default as HtmlInputField } from './HtmlInputField';
+export { default as SelectInputField } from './SelectInputField';
+export { default as TextField } from './TextField';
+export { default as TextInputField } from './TextInputField';
+
+export type { ChoiceInputFieldProps } from './ChoiceInputField';
+export type { HtmlInputFieldProps } from './HtmlInputField';
+export type { SelectInputFieldProps, SelectOption } from './SelectInputField';
+export type { TextFieldProps } from './TextField';
+export type { TextInputFieldProps } from './TextInputField';

package/src/components/layout/GridCell.tsx

@@ -0,0 +1,46 @@
+/**
+ * GridCell - Simple cell wrapper for GridLayout
+ * 
+ * A lightweight wrapper that applies grid props to any content
+ * Uses the base props pattern for consistency
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { Box } from '@mui/material';
+import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+
+export interface GridCellProps extends WithBaseProps {
+  children: React.ReactNode;
+}
+
+export const GridCell: React.FC<GridCellProps> = (props) => {
+  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
+  
+  // Mark as QwickApp component
+  (GridCell as any)[QWICKAPP_COMPONENT] = true;
+
+  return (
+    <Box
+      {...htmlProps}
+      {...styleProps}
+      {...restProps}
+      // 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,
+      })}
+    >
+      {(restProps as any).children}
+    </Box>
+  );
+};
+
+GridCell.displayName = 'GridCell';
+
+export default GridCell;

package/src/components/layout/GridCellWrapper.tsx

@@ -0,0 +1,87 @@
+/**
+ * GridCellWrapper - Responsive grid cell wrapper for layout consistency
+ *
+ * This component provides a flexible wrapper for content within a Material-UI Grid,
+ * supporting responsive sizing, full-width option, and easy integration with form fields or layout elements.
+ *
+ * Features:
+ * - Responsive grid sizing via breakpoint props (xs, sm, md, lg, xl)
+ * - Optional fullWidth prop to force cell to span all columns
+ * - Passes additional GridProps for customization
+ * - Designed for use in forms and layouts needing consistent grid behavior
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { Grid, GridProps } from '@mui/material';
+
+/**
+ * Props for GridCellWrapper
+ * @property children - Content to render inside the grid cell
+ * @property xs, sm, md, lg, xl - Grid breakpoint sizes (number or 'auto')
+ * @property fullWidth - If true, cell spans all columns (xs=12)
+ * @property ...gridProps - Additional GridProps except 'item' and 'children'
+ */
+export interface GridCellWrapperProps extends Omit<GridProps, 'children'> {
+  /** Content to render inside the grid cell */
+  children: React.ReactNode;
+  /** Grid breakpoint size for extra-small screens */
+  xs?: number | 'auto';
+  /** Grid breakpoint size for small screens */
+  sm?: number | 'auto';
+  /** Grid breakpoint size for medium screens */
+  md?: number | 'auto';
+  /** Grid breakpoint size for large screens */
+  lg?: number | 'auto';
+  /** Grid breakpoint size for extra-large screens */
+  xl?: number | 'auto';
+  /** If true, cell spans all columns (xs=12) */
+  fullWidth?: boolean;
+}
+
+/**
+ * GridCellWrapper component
+ * Wraps content in a Material-UI Grid cell with responsive sizing and full-width option.
+ */
+const GridCellWrapper: React.FC<GridCellWrapperProps> = ({
+  children,
+  xs = 12,
+  sm,
+  md,
+  lg,
+  xl,
+  fullWidth = false,
+  ...gridProps
+}) => {
+  // If fullWidth is true, force size=12; otherwise build responsive size object for MUI v6
+  const responsiveSizing = fullWidth 
+    ? { size: 12 }
+    : (() => {
+        const sizeConfig: any = {};
+        if (xs !== undefined) sizeConfig.xs = xs;
+        if (sm !== undefined) sizeConfig.sm = sm;
+        if (md !== undefined) sizeConfig.md = md;
+        if (lg !== undefined) sizeConfig.lg = lg;
+        if (xl !== undefined) sizeConfig.xl = xl;
+        
+        // If only one value provided, use it as a simple size value
+        const definedBreakpoints = Object.keys(sizeConfig);
+        if (definedBreakpoints.length === 1 && xs !== undefined && sm === undefined && md === undefined && lg === undefined && xl === undefined) {
+          return { size: xs };
+        }
+        
+        return { size: sizeConfig };
+      })();
+
+  return (
+    <Grid 
+      {...responsiveSizing}
+      {...gridProps}
+    >
+      {children}
+    </Grid>
+  );
+};
+
+export default GridCellWrapper;

package/src/components/layout/GridLayout.tsx

@@ -0,0 +1,169 @@
+/**
+ * GridLayout - Flexible grid layout component
+ * 
+ * Works with any component that has grid props (span, xs, sm, md, lg, xl)
+ * Automatically wraps components in Grid when grid props are detected
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { Grid, SxProps, Theme } from '@mui/material';
+import { SpacingValue, resolveSpacing } from '../../utils/spacing';
+import { DimensionValue, resolveDimension } from '../../utils/dimensions';
+import { QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+
+export interface GridLayoutProps {
+  /** Layout children - any components with grid props work */
+  children: React.ReactNode;
+  /** Number of equal-width columns (auto-distribution) */
+  columns?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Spacing between columns */
+  spacing?: SpacingValue;
+  /** Equal height columns */
+  equalHeight?: boolean;
+  /** Layout dimensions */
+  height?: DimensionValue;
+  width?: DimensionValue;
+  minHeight?: DimensionValue;
+  minWidth?: DimensionValue;
+  maxHeight?: DimensionValue;
+  maxWidth?: DimensionValue;
+  /** Additional CSS class */
+  className?: string;
+  /** Custom styles */
+  sx?: SxProps<Theme>;
+  /** Inline styles */
+  style?: React.CSSProperties;
+}
+
+export const GridLayout: React.FC<GridLayoutProps> = ({
+  children,
+  columns,
+  spacing = 'small',
+  equalHeight = false,
+  height,
+  width,
+  minHeight,
+  minWidth,
+  maxHeight,
+  maxWidth,
+  className,
+  sx,
+  style,
+}) => {
+  const resolvedSpacing = resolveSpacing(spacing, 'gap');
+  
+  // Process children to handle grid props
+  const processChildren = () => {
+    const childArray = React.Children.toArray(children);
+    
+    return childArray.map((child, index) => {
+      if (!React.isValidElement(child)) {
+        return child;
+      }
+
+      // Extract grid props from data attributes or props
+      let gridProps: any = {};
+      
+      // Check if it's a QwickApp component
+      const isQwickApp = (child.type as any)?.[QWICKAPP_COMPONENT];
+      
+      // Extract grid props from both data attributes (QwickApp) and direct props (regular)
+      const props = child.props as any;
+      const span = props['data-grid-span'] || props.span;
+      const xs = props['data-grid-xs'] || props.xs;
+      const sm = props['data-grid-sm'] || props.sm;
+      const md = props['data-grid-md'] || props.md;
+      const lg = props['data-grid-lg'] || props.lg;
+      const xl = props['data-grid-xl'] || props.xl;
+      
+      if (span || xs || sm || md || lg || xl) {
+        // Use span if available, otherwise use breakpoint values
+        if (span) {
+          gridProps = {
+            size: span,
+          };
+        } else {
+          // Build responsive size object for MUI v6
+          const sizeConfig: any = {};
+          if (xs) sizeConfig.xs = xs;
+          if (sm) sizeConfig.sm = sm;
+          if (md) sizeConfig.md = md;
+          if (lg) sizeConfig.lg = lg;
+          if (xl) sizeConfig.xl = xl;
+          
+          gridProps = {
+            size: sizeConfig,
+          };
+        }
+      }
+
+      // If columns prop is set and no grid props, auto-distribute responsively
+      if (columns && Object.keys(gridProps).length === 0) {
+        // Make responsive: single column on mobile, fewer columns on tablet, full columns on desktop
+        gridProps = {
+          size: {
+            xs: 12, // Single column on mobile
+            sm: columns >= 3 ? 6 : 12 / Math.min(columns, 2), // 2 columns max on small screens
+            md: 12 / Math.min(columns, 3), // 3 columns max on medium screens  
+            lg: 12 / columns, // Full columns on large screens
+          },
+        };
+      }
+
+      // If has grid props, wrap in Grid
+      if (Object.keys(gridProps).length > 0) {
+        // Clean grid data attributes from child to avoid duplication
+        const cleanedProps = { ...child.props };
+        delete cleanedProps['data-grid-span'];
+        delete cleanedProps['data-grid-xs'];
+        delete cleanedProps['data-grid-sm'];
+        delete cleanedProps['data-grid-md'];
+        delete cleanedProps['data-grid-lg'];
+        delete cleanedProps['data-grid-xl'];
+        
+        return (
+          <Grid key={child.key || index} {...gridProps}>
+            {React.cloneElement(child, cleanedProps)}
+          </Grid>
+        );
+      }
+
+      return child;
+    });
+  };
+
+  return (
+    <Grid
+      container
+      spacing={resolvedSpacing}
+      className={className}
+      sx={{
+        width: '100%', // Ensure full width by default in MUI v6
+        height: resolveDimension(height, 'height'),
+        minHeight: resolveDimension(minHeight, 'minHeight'),
+        minWidth: resolveDimension(minWidth, 'minWidth'),
+        maxHeight: resolveDimension(maxHeight, 'maxHeight'),
+        maxWidth: resolveDimension(maxWidth, 'maxWidth'),
+        ...(width && { width: resolveDimension(width, 'width') }), // Override only if explicitly set
+        ...(equalHeight && {
+          alignItems: 'stretch',
+          '& > .MuiGrid-item': {
+            display: 'flex',
+            '& > *': {
+              width: '100%',
+              height: '100%',
+            },
+          },
+        }),
+        ...sx,
+      }}
+      style={style}
+    >
+      {processChildren()}
+    </Grid>
+  );
+};
+
+export default GridLayout;

package/src/components/layout/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Layout components export
+ * 
+ * Layout components using the new base props pattern
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { GridLayout } from './GridLayout';
+export type { GridLayoutProps } from './GridLayout';
+
+export { GridCell } from './GridCell';
+export type { GridCellProps } from './GridCell';

package/src/components/menu/MenuItem.tsx

@@ -0,0 +1,32 @@
+/**
+ * MenuItem - Standardized menu item type for navigation components
+ *
+ * Used by Scaffold, navigation rails, drawers, and other menu systems.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+
+export interface MenuItem {
+  /** Unique identifier for the menu item */
+  id: string;
+  /** Display label for the menu item */
+  label: string;
+  /** Icon component or JSX element to display */
+  icon?: React.ReactNode;
+  /** Click handler for the menu item */
+  onClick?: () => void;
+  /** External link URL (if this is a link) */
+  href?: string;
+  /** Route path for automatic navigation (React Router) */
+  route?: string;
+  /** Whether this item is currently active/selected */
+  active?: boolean;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+  /** Badge text or number to display */
+  badge?: string | number;
+  /** Priority for ordering (lower numbers = higher priority) */
+  priority?: number;
+}

package/src/components/menu/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Menu components export
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+export { type MenuItem } from './MenuItem';

package/src/components/pages/FormPage.tsx

@@ -0,0 +1,108 @@
+/**
+ * FormPage - Reusable page layout for forms with consistent header, status, and footer
+ * 
+ * Provides a standardized full-page layout for forms with:
+ * - CoverImageHeader as the default header with smart branding defaults
+ * - Status message handling (info, success, warning, error)
+ * - Consistent form container and footer
+ * - Background variants (default, gradient, image)
+ * - Responsive design for all screen sizes
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import FormBlock from '../forms/FormBlock';
+
+export interface FormPageProps {
+  /**
+   * Page title (required)
+   */
+  title: string;
+  
+  /**
+   * Page subtitle/description
+   */
+  description?: string;
+  
+  /**
+   * Cover image URL or React element for the header
+   * If not provided, will use Logo component with app name
+   */
+  coverImage?: string | React.ReactNode;
+  
+  /**
+   * Form content (required)
+   */
+  form: React.ReactNode;
+  
+  /**
+   * Footer content
+   */
+  footer?: React.ReactNode;
+  
+  /**
+   * Status message type
+   */
+  status?: 'info' | 'success' | 'warning' | 'error';
+  
+  /**
+   * Status message content
+   */
+  message?: string;
+  
+  /**
+   * Maximum width of the form container
+   */
+  maxWidth?: 'xs' | 'sm' | 'md';
+  
+  /**
+   * Background style variant
+   */
+  background?: 'default' | 'gradient' | 'image';
+  
+  /**
+   * Background image URL (when background='image')
+   */
+  backgroundImage?: string;
+  
+  /**
+   * Custom styling
+   */
+  sx?: object;
+}
+
+/**
+ * FormPage component for consistent form page layouts
+ */
+export const FormPage: React.FC<FormPageProps> = ({
+  title,
+  description,
+  coverImage,
+  form,
+  footer,
+  status,
+  message,
+  maxWidth = 'sm',
+  background = 'default',
+  backgroundImage,
+  sx = {},
+}) => {
+  return (
+    <FormBlock
+      title={title}
+      description={description}
+      coverImage={coverImage}
+      form={form}
+      footer={footer}
+      status={status}
+      message={message}
+      maxWidth={maxWidth}
+      background={background}
+      backgroundImage={backgroundImage}
+      sx={sx}
+    />
+  );
+};
+
+export default FormPage;