@qwickapps/react-framework 1.3.0

package/src/components/buttons/ThemeSwitcher.tsx

@@ -0,0 +1,283 @@
+/**
+ * ThemeSwitcher - Theme selection control component
+ * 
+ * Provides consistent theme switching with:
+ * - Light/dark/system theme options
+ * - Accessible menu interface
+ * - Current theme indication
+ * - Configurable appearance
+ * - Responsive design
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import {
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Paper,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import {
+  DarkMode as DarkModeIcon,
+  LightMode as LightModeIcon,
+  SettingsSystemDaydream as SystemIcon
+} from '@mui/icons-material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { useState } from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import ThemeSwitcherModel from '../../schemas/ThemeSwitcherSchema';
+import type { ThemeMode } from '../../utils/themeUtils';
+
+type ThemeSwitcherViewProps = ModelProps<ThemeSwitcherModel>;
+
+export interface ThemeSwitcherProps extends ThemeSwitcherViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function ThemeSwitcherView({
+  disabled = false,
+  size = 'medium',
+  tooltipText,
+  showTooltip = true,
+  menuPosition = 'bottom',
+  showLightTheme = true,
+  showDarkTheme = true,
+  showSystemTheme = true,
+  ...restProps
+}: ThemeSwitcherViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+  const { currentTheme, actualThemeMode, setPreferredTheme } = useTheme();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleThemeSelect = (newTheme: ThemeMode) => {
+    if (disabled) return;
+    setPreferredTheme(newTheme);
+    handleClose();
+  };
+
+  const getCurrentIcon = (): React.ReactNode => {
+    switch (actualThemeMode) {
+      case 'dark':
+        return <DarkModeIcon />;
+      case 'light':
+        return <LightModeIcon />;
+      default:
+        return <LightModeIcon />;
+    }
+  };
+
+  const getTooltipText = (): string => {
+    if (tooltipText) return tooltipText;
+    
+    if (disabled) return 'Theme switcher disabled';
+    
+    const modeText = currentTheme === 'system' 
+      ? `System (${actualThemeMode})`
+      : currentTheme.charAt(0).toUpperCase() + currentTheme.slice(1);
+    return `Current theme: ${modeText}`;
+  };
+
+  const getMenuAnchorOrigin = () => {
+    switch (menuPosition) {
+      case 'top':
+        return { vertical: 'top' as const, horizontal: 'right' as const };
+      case 'left':
+        return { vertical: 'bottom' as const, horizontal: 'left' as const };
+      case 'right':
+        return { vertical: 'bottom' as const, horizontal: 'right' as const };
+      default: // bottom
+        return { vertical: 'bottom' as const, horizontal: 'right' as const };
+    }
+  };
+
+  const getMenuTransformOrigin = () => {
+    switch (menuPosition) {
+      case 'top':
+        return { vertical: 'bottom' as const, horizontal: 'right' as const };
+      case 'left':
+        return { vertical: 'top' as const, horizontal: 'right' as const };
+      case 'right':
+        return { vertical: 'top' as const, horizontal: 'left' as const };
+      default: // bottom
+        return { vertical: 'top' as const, horizontal: 'right' as const };
+    }
+  };
+
+  // If no theme options are enabled, show error in development
+  if (!showLightTheme && !showDarkTheme && !showSystemTheme) {
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Paper
+          variant="outlined"
+          sx={{
+            p: 2,
+            textAlign: 'center',
+            borderColor: 'error.main'
+          }}
+        >
+          <Typography variant="body2" color="error">
+            Error: No theme options enabled
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  const themeSwitcher = (
+    <>
+      <IconButton
+        {...htmlProps}
+        onClick={handleClick}
+        disabled={disabled}
+        size={size}
+        aria-label="theme switcher"
+        aria-controls={open ? 'theme-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        sx={{
+          color: 'var(--theme-on-surface, inherit)',
+          '&:hover': {
+            backgroundColor: 'var(--menu-hover, rgba(0, 0, 0, 0.04))',
+          },
+          '&:disabled': {
+            color: 'var(--theme-disabled, rgba(0, 0, 0, 0.26))',
+          },
+          ...styleProps.sx
+        }}
+        className={styleProps.className}
+      >
+        {getCurrentIcon()}
+      </IconButton>
+      
+      <Menu
+        id="theme-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        slotProps={{
+          paper: {
+            'aria-labelledby': 'theme-button',
+          },
+        }}
+        anchorOrigin={getMenuAnchorOrigin()}
+        transformOrigin={getMenuTransformOrigin()}
+      >
+        {showLightTheme && (
+          <MenuItem 
+            onClick={() => handleThemeSelect('light')}
+            selected={currentTheme === 'light'}
+          >
+            <ListItemIcon>
+              <LightModeIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Light</ListItemText>
+          </MenuItem>
+        )}
+        
+        {showDarkTheme && (
+          <MenuItem 
+            onClick={() => handleThemeSelect('dark')}
+            selected={currentTheme === 'dark'}
+          >
+            <ListItemIcon>
+              <DarkModeIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Dark</ListItemText>
+          </MenuItem>
+        )}
+        
+        {showSystemTheme && (
+          <MenuItem 
+            onClick={() => handleThemeSelect('system')}
+            selected={currentTheme === 'system'}
+          >
+            <ListItemIcon>
+              <SystemIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>System</ListItemText>
+          </MenuItem>
+        )}
+      </Menu>
+    </>
+  );
+
+  return showTooltip ? (
+    <Tooltip title={getTooltipText()}>
+      {themeSwitcher}
+    </Tooltip>
+  ) : themeSwitcher;
+}
+
+/**
+ * ThemeSwitcher component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function ThemeSwitcher(props: ThemeSwitcherProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <ThemeSwitcherView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...themeSwitcherProps } = useDataBinding<ThemeSwitcherModel>(
+    dataSource,
+    restProps as Partial<ThemeSwitcherModel>,
+    ThemeSwitcherModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <IconButton disabled size="medium">
+        <LightModeIcon />
+      </IconButton>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading theme switcher:', 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 theme switcher: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <ThemeSwitcherView {...themeSwitcherProps} />;
+}
+
+// Mark as QwickApp component
+(ThemeSwitcher as any)[QWICKAPP_COMPONENT] = true;
+
+export default ThemeSwitcher;

package/src/components/buttons/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Button components for QwickApps React Framework
+ * 
+ * Enhanced button components with QwickApps base props support
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+export { Button } from './Button';
+export { default as ThemeSwitcher } from './ThemeSwitcher';
+export { default as PaletteSwitcher } from './PaletteSwitcher';
+
+export type { ButtonProps } from './Button';

package/src/components/forms/FormBlock.tsx

@@ -0,0 +1,291 @@
+/**
+ * FormBlock - Reusable form layout component
+ * 
+ * Provides consistent layout for forms with:
+ * - Optional header section (logo, title, subtitle)
+ * - Form content area
+ * - Status message area (info, success, warning, error)
+ * - Optional footer section
+ * - Data binding support for dynamic content
+ * - Grid integration with useBaseProps
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import {
+  Alert,
+  Box,
+  Card,
+  CardContent,
+  Container,
+  Paper,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import type { ModelProps, WithDataBinding } from '@qwickapps/schema';
+import React from 'react';
+import { useQwickApp } from '../../contexts/QwickAppContext';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
+import FormBlockModel from '../../schemas/FormBlockSchema';
+import CoverImageHeader from '../blocks/CoverImageHeader';
+import Logo from '../Logo';
+
+type FormBlockViewProps = ModelProps<FormBlockModel> & {
+  /**
+   * Custom header content - when provided, overrides the default header
+   * For full customization control
+   */
+  header?: React.ReactNode;
+
+  /**
+   * Cover image URL or React element for the default header (ignored if custom header is provided)
+   * If not provided, will use Logo component with app name
+   */
+  coverImage?: string | React.ReactNode;
+
+  /**
+   * Form content
+   */
+  form?: React.ReactNode;
+
+  /**
+   * Footer content (links, additional text, etc.)
+   */
+  footer?: React.ReactNode;
+};
+
+export interface FormBlockProps extends FormBlockViewProps, WithDataBinding { }
+
+/**
+ * Default header component that uses CoverImageHeader and Logo
+ */
+const DefaultHeader: React.FC<{
+  title?: string;
+  subtitle?: string;
+  coverImage?: string | React.ReactNode;
+}> = ({
+  title,
+  subtitle,
+  coverImage
+}) => {
+    const { appName } = useQwickApp();
+
+    // Create image element - either coverImage (URL or React element) or Logo component
+    const image = coverImage ? (
+      coverImage
+    ) : (
+      <Logo
+        name={appName || 'Qwick Apps'}
+        size="medium"
+        variant="default"
+      />
+    );
+
+    return (
+      <CoverImageHeader
+        image={image}
+        imageSize="medium"
+        imageShape="square"
+        title={title || 'Welcome'}
+        subtitle={subtitle}
+        variant="default"
+      />
+    );
+  };
+
+// View component - handles the actual rendering
+function FormBlockView({
+  header,
+  title,
+  description,
+  coverImage,
+  form,
+  footer,
+  status,
+  message,
+  maxWidth = 'sm',
+  background = '--theme-surface',
+  backgroundImage,
+  ...restProps
+}: FormBlockViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+  const theme = useTheme();
+
+  // Return empty state if no form content
+  if (!form) {
+    return (
+      <Paper
+        {...htmlProps}
+        {...styleProps}
+        variant="outlined"
+        sx={{
+          p: 3,
+          textAlign: 'center',
+          opacity: 0.6,
+          ...styleProps.sx
+        }}
+      >
+        <Typography variant="body2" color="text.secondary">
+          No form content provided
+        </Typography>
+      </Paper>
+    );
+  }
+
+  const getBackgroundStyle = () => {
+    switch (background) {
+      case 'gradient':
+        return {
+          background: `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
+        };
+      case 'image':
+        return backgroundImage ? {
+          backgroundImage: `linear-gradient(${theme.palette.action.hover}, ${theme.palette.action.hover}), url(${backgroundImage})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+        } : {};
+      default:
+        return {
+          backgroundColor: theme.palette.background.default,
+        };
+    }
+  };
+
+  return (
+    <Box
+      {...htmlProps}
+      {...styleProps}
+      className={`${styleProps.className || ''}`}
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        py: 3,
+        ...getBackgroundStyle(),
+        ...styleProps.sx,
+      }}
+    >
+      <Container maxWidth={maxWidth}>
+        <Card
+          elevation={background === 'default' ? 1 : 8}
+          sx={{
+            borderRadius: 3,
+            overflow: 'hidden', // Changed from 'visible' to 'hidden' to clip the corners
+            backgroundColor: background === 'default'
+              ? theme.palette.background.paper
+              : theme.palette.mode === 'dark'
+                ? 'rgba(18, 18, 18, 0.95)' // Dark mode background with transparency
+                : 'rgba(255, 255, 255, 0.95)', // Light mode background with transparency
+            backdropFilter: background !== 'default' ? 'blur(10px)' : 'none',
+          }}
+        >
+          {/* Header Section - Outside CardContent for edge-to-edge */}
+          {header || (title || description) ? (
+            header || (
+              <DefaultHeader
+                title={title}
+                subtitle={description}
+                coverImage={coverImage}
+              />
+            )
+          ) : null}
+
+          <CardContent sx={{ p: { xs: 3, sm: 4, md: 5 } }}>
+
+            {/* Status Message */}
+            {status && message && (
+              <Alert
+                severity={status}
+                sx={{ mb: 3 }}
+                variant="outlined"
+              >
+                {message}
+              </Alert>
+            )}
+
+            {/* Form Section */}
+            <Box sx={{ mb: footer ? 3 : 0 }}>
+              {form}
+            </Box>
+
+            {/* Footer Section */}
+            {footer && (
+              <Box sx={{ textAlign: 'center' }}>
+                {footer}
+              </Box>
+            )}
+          </CardContent>
+        </Card>
+      </Container>
+    </Box>
+  );
+}
+
+/**
+ * FormBlock component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function FormBlock(props: FormBlockProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <FormBlockView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...formBlockProps } = useDataBinding<FormBlockModel>(
+    dataSource,
+    restProps as Partial<FormBlockModel>,
+    FormBlockModel.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 Form...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading form content from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading form block:', 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 form: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <FormBlockView {...formBlockProps} />;
+}
+
+// Mark as QwickApp component
+(FormBlock as any)[QWICKAPP_COMPONENT] = true;
+
+export default FormBlock;

package/src/components/forms/index.ts

@@ -0,0 +1,7 @@
+/**
+ * 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';

package/src/components/index.ts

@@ -0,0 +1,37 @@
+/**
+ * All component props and exports available in QwickApps React Framework.
+ * 
+ * Includes:
+ * - Buttons
+ * - Form inputs
+ * - Layout components
+ * - Blocks (Hero, Content, FeatureGrid, Section, etc.)
+ * - Pages and scaffolding
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+export * from './blocks';
+export * from './buttons';
+export * from './forms';
+export * from './input';
+export * from './layout';
+export * from './pages';
+export * from './Scaffold';
+export * from './ResponsiveMenu';
+export * from './QwickApp';
+export * from './AccessibilityChecker';
+// DataDrivenSafeSpan functionality is now integrated into SafeSpan
+
+export { default as Logo } from './Logo';
+export type { LogoProps } from './Logo';
+
+export { default as QwickAppsLogo } from './QwickAppsLogo';
+export type { QwickAppsLogoProps } from './QwickAppsLogo';
+
+export { default as SafeSpan } from './SafeSpan';
+export type { SafeSpanProps } from './SafeSpan';
+
+export { default as Html } from './Html';
+export type { HtmlProps } from './Html';
+
+export { default as Markdown } from './Markdown';
+export type { MarkdownProps } from './Markdown';