@qwickapps/react-framework 1.3.0

package/src/components/input/ChoiceInputField.tsx

@@ -0,0 +1,188 @@
+/**
+ * ChoiceInputField - Dynamic option inputs management component
+ * 
+ * Provides consistent interface for:
+ * - Dynamic list of option inputs  
+ * - Adding new options
+ * - Rich text editing for each option
+ * - Data binding support
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import {
+  Alert,
+  Box,
+  Button,
+  Paper,
+  Typography
+} from '@mui/material';
+import { Add as AddIcon } from '@mui/icons-material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import HtmlInputField from './HtmlInputField';
+import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
+
+type ChoiceInputFieldViewProps = ModelProps<ChoiceInputFieldModel> & {
+  /** Handler for option value changes */
+  onOptionChange?: (optionIndex: number, value: string) => void;
+  /** Handler for adding new options */
+  onAddOption?: () => void;
+  /** Focus handler */
+  onFocus?: (optionIndex?: number) => void;
+};
+
+export interface ChoiceInputFieldProps extends ChoiceInputFieldViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function ChoiceInputFieldView({
+  label = 'Options',
+  options = [],
+  onOptionChange,
+  onAddOption,
+  onFocus,
+  disabled = false,
+  placeholder = 'Enter option text. HTML formatting supported.',
+  optionLabelPrefix = 'Option',
+  rows = 2,
+  addButtonText = 'Add Option',
+  ...restProps
+}: ChoiceInputFieldViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+
+  // Return empty state if no options and no handlers
+  if (options.length === 0 && !onAddOption) {
+    return (
+      <Paper
+        {...htmlProps}
+        {...styleProps}
+        variant="outlined"
+        sx={{
+          p: 3,
+          textAlign: 'center',
+          opacity: 0.6,
+          ...styleProps.sx
+        }}
+      >
+        <Typography variant="body2" color="text.secondary">
+          No options provided
+        </Typography>
+      </Paper>
+    );
+  }
+
+  return (
+    <Box
+      {...htmlProps}
+      {...styleProps}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        ...styleProps.sx
+      }}
+    >
+      {label && (
+        <Typography variant="subtitle2" gutterBottom>
+          {label}
+        </Typography>
+      )}
+      
+      {options.map((option, optionIndex) => (
+        <Box key={optionIndex}>
+          <HtmlInputField
+            label={`${optionLabelPrefix} ${optionIndex + 1}`}
+            value={option}
+            onChange={onOptionChange ? (value: string) => onOptionChange(optionIndex, value) : undefined}
+            onFocus={onFocus ? () => onFocus(optionIndex) : undefined}
+            rows={rows}
+            disabled={disabled}
+            placeholder={placeholder}
+          />
+        </Box>
+      ))}
+      
+      {onAddOption && (
+        <Button
+          startIcon={<AddIcon />}
+          onClick={onAddOption}
+          size="small"
+          disabled={disabled}
+          variant="text"
+          sx={{ mt: 1, alignSelf: 'flex-start' }}
+        >
+          {addButtonText}
+        </Button>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * ChoiceInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function ChoiceInputField(props: ChoiceInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <ChoiceInputFieldView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...choiceInputFieldProps } = useDataBinding<ChoiceInputFieldModel>(
+    dataSource,
+    restProps as Partial<ChoiceInputFieldModel>,
+    ChoiceInputFieldModel.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 Choice Input Field...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading options from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading choice 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 choice input field: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <ChoiceInputFieldView {...choiceInputFieldProps} />;
+}
+
+// Mark as QwickApp component
+(ChoiceInputField as any)[QWICKAPP_COMPONENT] = true;
+
+export default ChoiceInputField;

package/src/components/input/HtmlInputField.tsx

@@ -0,0 +1,326 @@
+/**
+ * HtmlInputField - Custom HTML text field with formatting controls
+ * 
+ * Provides HTML editing capabilities with:
+ * - Formatting toolbar (bold, italic, underline, code)
+ * - HTML preview mode
+ * - Help system with supported tags
+ * - HTML sanitization for security
+ * - Data binding support
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState } from 'react';
+import {
+  Box,
+  TextField,
+  IconButton,
+  Tooltip,
+  Typography,
+  Collapse,
+  Alert,
+  ButtonGroup,
+  Divider,
+  Paper
+} from '@mui/material';
+import {
+  FormatBold as BoldIcon,
+  FormatItalic as ItalicIcon,
+  FormatUnderlined as UnderlineIcon,
+  Code as CodeIcon,
+  Visibility as PreviewIcon,
+  VisibilityOff as EditIcon,
+  Help as HelpIcon
+} from '@mui/icons-material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import SafeSpan from '../SafeSpan';
+import sanitizeHtml from 'sanitize-html';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';
+
+type HtmlInputFieldViewProps = ModelProps<HtmlInputFieldModel> & {
+  /** Change handler */
+  onChange?: (value: string) => void;
+  /** Focus handler */
+  onFocus?: () => void;
+};
+
+export interface HtmlInputFieldProps extends HtmlInputFieldViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function HtmlInputFieldView({
+  label,
+  value = '',
+  onChange,
+  onFocus,
+  required = false,
+  placeholder = '',
+  multiline = true,
+  rows = 4,
+  disabled = false,
+  ...restProps
+}: HtmlInputFieldViewProps) {
+  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
+  const [showPreview, setShowPreview] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+
+  // Return empty state if no onChange handler
+  if (!onChange) {
+    return (
+      <Paper
+        {...htmlProps}
+        {...styleProps}
+        variant="outlined"
+        sx={{
+          p: 3,
+          textAlign: 'center',
+          opacity: 0.6,
+          ...styleProps.sx
+        }}
+      >
+        <Typography variant="body2" color="text.secondary">
+          No onChange handler provided for {label}
+        </Typography>
+      </Paper>
+    );
+  }
+
+  // Sanitize HTML content using default configuration
+  const sanitizeHtmlContent = (htmlContent: string) => {
+    return sanitizeHtml(htmlContent);
+  };
+
+  // Handle text formatting
+  const insertFormatting = (openTag: string, closeTag: string) => {
+    const textarea = document.getElementById(`html-textfield-${label}`) as HTMLTextAreaElement;
+    if (textarea) {
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const selectedText = value.substring(start, end);
+      
+      let newText;
+      if (selectedText) {
+        // Wrap selected text
+        newText = value.substring(0, start) + openTag + selectedText + closeTag + value.substring(end);
+      } else {
+        // Insert tags at cursor position
+        newText = value.substring(0, start) + openTag + closeTag + value.substring(start);
+      }
+      
+      onChange(newText);
+      
+      // Set cursor position after the opening tag
+      setTimeout(() => {
+        const newPosition = selectedText ? end + openTag.length + closeTag.length : start + openTag.length;
+        textarea.setSelectionRange(newPosition, newPosition);
+        textarea.focus();
+      }, 0);
+    }
+  };
+
+  const formatButtons = [
+    { icon: BoldIcon, tooltip: 'Bold', openTag: '<b>', closeTag: '</b>' },
+    { icon: ItalicIcon, tooltip: 'Italic', openTag: '<i>', closeTag: '</i>' },
+    { icon: UnderlineIcon, tooltip: 'Underline', openTag: '<u>', closeTag: '</u>' },
+    { icon: CodeIcon, tooltip: 'Code', openTag: '<code>', closeTag: '</code>' }
+  ];
+
+  const helpContent = (
+    <Alert severity="info" sx={{ mt: 1 }}>
+      <Typography variant="body2" gutterBottom>
+        <strong>Supported HTML tags:</strong>
+      </Typography>
+      <Typography variant="body2" component="div">
+        • <code>&lt;b&gt;</code> or <code>&lt;strong&gt;</code> - Bold text<br/>
+        • <code>&lt;i&gt;</code> or <code>&lt;em&gt;</code> - Italic text<br/>
+        • <code>&lt;u&gt;</code> - Underlined text<br/>
+        • <code>&lt;code&gt;</code> - Code formatting<br/>
+        • <code>&lt;br&gt;</code> - Line break<br/>
+        • <code>&lt;span style="color: red"&gt;</code> - Colored text
+      </Typography>
+    </Alert>
+  );
+
+  return (
+    <Box
+      {...htmlProps}
+      {...styleProps}
+      sx={{ mb: 2, ...styleProps.sx }}
+    >
+      {/* Toolbar */}
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, gap: 1 }}>
+        <Typography variant="body2" color="text.secondary">
+          {label} {required && '*'}
+        </Typography>
+        
+        <Box sx={{ flexGrow: 1 }} />
+        
+        {/* Formatting buttons */}
+        <ButtonGroup size="small" variant="outlined">
+          {formatButtons.map(({ icon: Icon, tooltip, openTag, closeTag }) => (
+            <Tooltip key={tooltip} title={tooltip}>
+              <IconButton
+                size="small"
+                onClick={() => insertFormatting(openTag, closeTag)}
+                disabled={disabled}
+                sx={{ p: 0.5 }}
+              >
+                <Icon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          ))}
+        </ButtonGroup>
+
+        <Divider orientation="vertical" flexItem />
+
+        {/* Preview toggle */}
+        <Tooltip title={showPreview ? "Edit HTML" : "Preview HTML"}>
+          <IconButton
+            size="small"
+            onClick={() => setShowPreview(!showPreview)}
+            color={showPreview ? "primary" : "default"}
+            disabled={disabled}
+            sx={{ p: 0.5 }}
+          >
+            {showPreview ? <EditIcon fontSize="small" /> : <PreviewIcon fontSize="small" />}
+          </IconButton>
+        </Tooltip>
+
+        {/* Help toggle */}
+        <Tooltip title="HTML Help">
+          <IconButton
+            size="small"
+            onClick={() => setShowHelp(!showHelp)}
+            color={showHelp ? "primary" : "default"}
+            disabled={disabled}
+            sx={{ p: 0.5 }}
+          >
+            <HelpIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      </Box>
+
+      {/* Help content */}
+      <Collapse in={showHelp}>
+        {helpContent}
+      </Collapse>
+
+      {/* Input field or preview */}
+      {showPreview ? (
+        <Box
+          sx={{
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 1,
+            p: 2,
+            minHeight: multiline ? `${rows * 1.5}em` : '1.5em',
+            backgroundColor: 'background.paper'
+          }}
+        >
+          <Typography variant="body2" color="text.secondary" gutterBottom>
+            HTML Preview:
+          </Typography>
+          <Box
+            sx={{
+              '& code': {
+                backgroundColor: 'action.hover',
+                padding: '2px 4px',
+                borderRadius: 0.5,
+                fontFamily: 'monospace'
+              }
+            }}
+          >
+            <SafeSpan html={sanitizeHtmlContent(value)} placeholder="No content" />
+          </Box>
+        </Box>
+      ) : (
+        <TextField
+          id={`html-textfield-${label}`}
+          value={value}
+          onChange={(e) => {
+            const sanitizedValue = sanitizeHtmlContent(e.target.value);
+            onChange(sanitizedValue);
+          }}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          multiline={multiline}
+          rows={multiline ? rows : undefined}
+          fullWidth
+          variant="outlined"
+          required={required}
+          disabled={disabled}
+          {...otherProps}
+        />
+      )}
+    </Box>
+  );
+}
+
+/**
+ * HtmlInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function HtmlInputField(props: HtmlInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <HtmlInputFieldView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...htmlInputFieldProps } = useDataBinding<HtmlInputFieldModel>(
+    dataSource,
+    restProps as Partial<HtmlInputFieldModel>,
+    HtmlInputFieldModel.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 HtmlInputField...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading HTML input field from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading HtmlInputField:', 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 HtmlInputField: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <HtmlInputFieldView {...htmlInputFieldProps} />;
+}
+
+// Mark as QwickApp component
+(HtmlInputField as any)[QWICKAPP_COMPONENT] = true;
+
+export default HtmlInputField;

package/src/components/input/SelectInputField.tsx

@@ -0,0 +1,197 @@
+/**
+ * SelectInputField - Select dropdown component with data binding support
+ * 
+ * Provides a standardized select field with:
+ * - Consistent Material-UI styling
+ * - Data binding capabilities
+ * - Comprehensive option support
+ * - Focus and error handling
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import {
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Typography
+} from '@mui/material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import SelectInputFieldModel, { SelectOption } from '../../schemas/SelectInputFieldSchema';
+
+type SelectInputFieldViewProps = ModelProps<SelectInputFieldModel> & {
+  /** Change handler */
+  onChange?: (value: string | number) => void;
+  /** Focus handler */
+  onFocus?: () => void;
+};
+
+export interface SelectInputFieldProps extends SelectInputFieldViewProps, WithDataBinding {}
+
+// Export SelectOption for external use
+export { SelectOption };
+
+// View component - handles the actual rendering
+function SelectInputFieldView({
+  label,
+  value = '',
+  onChange,
+  onFocus,
+  options = [],
+  required = false,
+  disabled = false,
+  error,
+  helperText,
+  placeholder,
+  ...restProps
+}: SelectInputFieldViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+
+  const handleChange = (event: SelectChangeEvent<string | number>) => {
+    if (onChange) {
+      onChange(event.target.value);
+    }
+  };
+
+  // Return error state if no options provided
+  if (!options.length) {
+    return (
+      <Paper
+        {...htmlProps}
+        {...styleProps}
+        variant="outlined"
+        sx={{
+          p: 2,
+          textAlign: 'center',
+          opacity: 0.6,
+          borderColor: 'error.main',
+          ...styleProps.sx
+        }}
+      >
+        <Typography variant="body2" color="error">
+          No options provided for select field
+        </Typography>
+      </Paper>
+    );
+  }
+
+  return (
+    <FormControl
+      {...htmlProps}
+      {...styleProps}
+      fullWidth
+      error={!!error}
+      required={required}
+      disabled={disabled}
+      sx={{
+        ...styleProps.sx
+      }}
+    >
+      <InputLabel shrink={!!value || !!placeholder}>
+        {label}
+      </InputLabel>
+      <Select
+        value={value}
+        onChange={handleChange}
+        onFocus={onFocus}
+        displayEmpty={!!placeholder}
+        renderValue={value !== '' ? undefined : () => (
+          <span style={{ opacity: 0.6 }}>{placeholder}</span>
+        )}
+      >
+        {placeholder && (
+          <MenuItem value="" disabled>
+            <em>{placeholder}</em>
+          </MenuItem>
+        )}
+        {options.map((option) => (
+          <MenuItem
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+      {(error || helperText) && (
+        <FormHelperText>
+          {error || helperText}
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+}
+
+/**
+ * SelectInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function SelectInputField(props: SelectInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <SelectInputFieldView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...selectInputFieldProps } = useDataBinding<SelectInputFieldModel>(
+    dataSource,
+    restProps as Partial<SelectInputFieldModel>,
+    SelectInputFieldModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 2,
+          textAlign: 'center'
+        }}
+      >
+        <Typography variant="body2">Loading SelectInputField...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading select field configuration from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading select input field:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Paper
+          variant="outlined"
+          sx={{
+            p: 2,
+            textAlign: 'center',
+            borderColor: 'error.main'
+          }}
+        >
+          <Typography variant="body2" color="error">
+            Error loading select field: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <SelectInputFieldView {...selectInputFieldProps} />;
+}
+
+// Mark as QwickApp component
+(SelectInputField as any)[QWICKAPP_COMPONENT] = true;
+
+export default SelectInputField;