@qwickapps/react-framework 1.3.0

package/src/components/blocks/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Provides a set of standardized blocks for consistent layout and styling.
+ * 
+ * Includes:
+ * - Hero blocks
+ * - Content
+ * - Page headers
+ * - Feature grids
+ * - Sections with responsive design
+ * - Footer blocks
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+export { default as HeroBlock } from './HeroBlock';
+export { default as Code } from './Code';
+export { default as Article } from './Article';
+export { default as Content } from './Content';
+export { default as PageBannerHeader } from './PageBannerHeader';
+export { default as CoverImageHeader } from './CoverImageHeader';
+export { default as FeatureGrid } from './FeatureGrid';
+export { default as Footer } from './Footer';
+export { default as Section } from './Section';
+export { default as ProductCard } from './ProductCard';
+export { default as FeatureCard } from './FeatureCard';
+export { default as CardListGrid } from './CardListGrid';
+
+export type { HeroBlockProps } from './HeroBlock';
+export type { CodeProps } from './Code';
+export type { ArticleProps } from './Article';
+export type { ContentProps } from './Content';
+export type { PageBannerHeaderProps } from './PageBannerHeader';
+export type { CoverImageHeaderProps, HeaderAction } from './CoverImageHeader';
+export type { FeatureGridProps, FeatureItem as FeatureGridItem } from './FeatureGrid';
+export type { FooterProps } from './Footer';
+export type { SectionProps } from './Section';
+export type { ProductCardProps, Product, ProductCardAction } from './ProductCard';
+export type { FeatureCardProps, FeatureItem, FeatureCardAction } from './FeatureCard';
+export type { CardListGridProps } from './CardListGrid';

package/src/components/buttons/Button.tsx

@@ -0,0 +1,233 @@
+/**
+ * Button - Enhanced button component with comprehensive features
+ * 
+ * A QwickApps-enhanced version of Material-UI Button with:
+ * - Standardized dimension and spacing props
+ * - Grid behavior support for ColumnLayout
+ * - Custom variants and styling
+ * - Loading states with spinner
+ * - Link support (href prop)
+ * - Icon support
+ * - Consistent theming and styling
+ * - Data binding support for dynamic content
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { Button as MuiButton, ButtonProps as MuiButtonProps, CircularProgress, Paper, Typography } from '@mui/material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import ButtonModel from '../../schemas/ButtonSchema';
+
+type ButtonViewProps = ModelProps<ButtonModel> & {
+  /** Icon to display (before text) */
+  icon?: React.ReactNode;
+  /** Icon to display after text */
+  endIcon?: React.ReactNode;
+  /** Event handler for clicks */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Button content when using children */
+  children?: React.ReactNode;
+};
+
+export interface ButtonProps extends ButtonViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+const ButtonView = React.forwardRef<HTMLButtonElement, ButtonViewProps>((props, ref) => {
+  const {
+    label,
+    variant = 'primary',
+    buttonSize = 'medium',
+    icon,
+    endIcon,
+    href,
+    target = '_self',
+    onClick,
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    children,
+    ...restProps
+  } = props;
+  
+  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
+
+  // Map our variants to MUI variants
+  const getMuiVariant = (): MuiButtonProps['variant'] => {
+    switch (variant) {
+      case 'primary':
+        return 'contained';
+      case 'secondary':
+        return 'contained';
+      case 'outlined':
+        return 'outlined';
+      case 'text':
+        return 'text';
+      case 'contained':
+        return 'contained';
+      default:
+        return 'contained';
+    }
+  };
+
+  // Map our variants to MUI colors
+  const getMuiColor = (): MuiButtonProps['color'] => {
+    switch (variant) {
+      case 'primary':
+        return 'primary';
+      case 'secondary':
+        return 'secondary';
+      case 'outlined':
+        return 'primary';
+      case 'text':
+        return 'primary';
+      case 'contained':
+        return 'primary';
+      default:
+        return 'primary';
+    }
+  };
+
+  // Determine if this should be a link
+  const isLink = Boolean(href && !disabled && !loading);
+
+  // Base button props
+  const baseProps: Partial<MuiButtonProps> = {
+    variant: getMuiVariant(),
+    color: getMuiColor(),
+    size: buttonSize,
+    disabled: disabled || loading,
+    fullWidth,
+    ...htmlProps,
+    ...styleProps,
+    sx: {
+      // Ensure consistent text transform
+      textTransform: 'none',
+      // Loading state adjustments
+      ...(loading && {
+        '& .MuiButton-startIcon': {
+          marginRight: 1,
+        },
+      }),
+      ...styleProps.sx,
+    },
+    startIcon: loading ? (
+      <CircularProgress
+        size={16}
+        color="inherit"
+        aria-label="Loading"
+      />
+    ) : icon,
+    endIcon: loading ? undefined : endIcon,
+  };
+
+  // Link-specific props
+  if (isLink) {
+    const linkProps = {
+      ...baseProps,
+      component: 'a' as const,
+      href,
+      target,
+      rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+      onClick: undefined, // Links don't use onClick
+    };
+
+    return (
+      <MuiButton ref={ref} {...linkProps}>
+        {label || children}
+      </MuiButton>
+    );
+  }
+
+  // Button-specific props
+  const buttonProps = {
+    ...baseProps,
+    onClick: disabled || loading ? undefined : onClick,
+  };
+
+  return (
+    <MuiButton ref={ref} {...buttonProps}>
+      {label || children}
+    </MuiButton>
+  );
+});
+
+ButtonView.displayName = 'ButtonView';
+
+/**
+ * Button component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function Button(props: ButtonProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <ButtonView {...restProps} />;
+  }
+
+  // Use data binding
+  const bindingResult = useDataBinding<ButtonModel>(
+    dataSource,
+    restProps as Partial<ButtonModel>,
+    ButtonModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+  
+  // Check if we're still loading data using the metadata properties
+  const bindingLoading = bindingResult.$loading;
+  
+  // Extract all the actual button properties (excluding metadata)
+  const { dataSource: _source, $loading, $error, $dataSource, $cached, cached, ...buttonProps } = bindingResult;
+  const error = bindingResult.$error;
+
+
+  // Show loading state while fetching data
+  if (bindingLoading) {
+    return (
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 2,
+          textAlign: 'center'
+        }}
+      >
+        <Typography variant="body2">Loading Button...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading button configuration from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading button:', 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 button: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <ButtonView {...buttonProps} />;
+}
+
+// Mark as QwickApp component
+(Button as any)[QWICKAPP_COMPONENT] = true;
+
+export { Button };
+export default Button;

package/src/components/buttons/PaletteSwitcher.tsx

@@ -0,0 +1,268 @@
+/**
+ * PaletteSwitcher - Color palette switching control component
+ * 
+ * Provides consistent palette switching with:
+ * - Visual palette preview icons
+ * - Tooltip with current palette name
+ * - Menu-based palette selection
+ * - Active palette indicators
+ * - Configurable display options
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import {
+  Palette as PaletteIcon,
+  Circle as CircleIcon,
+} from '@mui/icons-material';
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  Tooltip,
+  Box,
+  Typography,
+  Paper,
+} from '@mui/material';
+import React, { useState } from 'react';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import { usePalette } from '../../contexts';
+import type { PaletteConfig } from '../../contexts';
+import PaletteSwitcherModel from '../../schemas/PaletteSwitcherSchema';
+
+type PaletteSwitcherViewProps = ModelProps<PaletteSwitcherModel>;
+
+export interface PaletteSwitcherProps extends PaletteSwitcherViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function PaletteSwitcherView({
+  disabled = false,
+  buttonSize = 'medium',
+  tooltipText,
+  showActiveBadge = true,
+  showDescriptions = true,
+  ...restProps
+}: PaletteSwitcherViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+  const { currentPalette, setPreferredPalette, availablePalettes } = usePalette();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handlePaletteSelect = (paletteId: string) => {
+    setPreferredPalette(paletteId);
+    handleClose();
+  };
+
+  const getPaletteIcon = (palette: PaletteConfig): React.ReactNode => {
+    const isSelected = palette.id === currentPalette;
+    return (
+      <CircleIcon 
+        fontSize="small" 
+        sx={{ 
+          color: palette.primaryColor,
+          filter: isSelected 
+            ? 'drop-shadow(0 0 3px currentColor) brightness(1.2)' 
+            : 'none',
+          transform: isSelected ? 'scale(1.1)' : 'scale(1)',
+          transition: 'all 0.2s ease-in-out'
+        }} 
+      />
+    );
+  };
+
+  const getCurrentPalette = (): PaletteConfig => {
+    return availablePalettes.find(p => p.id === currentPalette) || availablePalettes[0];
+  };
+
+  // If no palettes available, return empty state
+  if (!availablePalettes || availablePalettes.length === 0) {
+    return (
+      <Paper
+        {...htmlProps}
+        {...styleProps}
+        variant="outlined"
+        sx={{
+          p: 2,
+          textAlign: 'center',
+          opacity: 0.6,
+          ...styleProps.sx
+        }}
+      >
+        <Typography variant="body2" color="text.secondary">
+          No color palettes available
+        </Typography>
+      </Paper>
+    );
+  }
+
+  const defaultTooltipText = `Switch color palette (current: ${getCurrentPalette().name})`;
+
+  return (
+    <Box {...htmlProps} {...styleProps}>
+      <Tooltip title={tooltipText || defaultTooltipText}>
+        <IconButton
+          onClick={handleClick}
+          disabled={disabled}
+          size={buttonSize}
+          aria-label="palette switcher"
+          aria-controls={open ? 'palette-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))',
+            },
+          }}
+        >
+          <PaletteIcon />
+        </IconButton>
+      </Tooltip>
+      
+      <Menu
+        id="palette-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        slotProps={{
+          paper: {
+            'aria-labelledby': 'palette-button',
+          },
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        {availablePalettes.map((palette) => (
+          <MenuItem 
+            key={palette.id}
+            onClick={() => handlePaletteSelect(palette.id)}
+            selected={currentPalette === palette.id}
+            sx={{
+              '&:hover': {
+                backgroundColor: 'action.hover',
+              },
+              '&.Mui-selected': {
+                backgroundColor: 'action.selected',
+                '&:hover': {
+                  backgroundColor: 'action.selected',
+                },
+              },
+            }}
+          >
+            <ListItemIcon>
+              {getPaletteIcon(palette)}
+            </ListItemIcon>
+            <ListItemText 
+              primary={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  {palette.name}
+                  {showActiveBadge && currentPalette === palette.id && (
+                    <Box
+                      component="span"
+                      sx={{
+                        fontSize: '0.75rem',
+                        px: 1,
+                        py: 0.25,
+                        borderRadius: 1,
+                        backgroundColor: 'primary.main',
+                        color: 'primary.contrastText',
+                      }}
+                    >
+                      Active
+                    </Box>
+                  )}
+                </Box>
+              }
+              secondary={showDescriptions ? palette.description : undefined}
+            />
+          </MenuItem>
+        ))}
+      </Menu>
+    </Box>
+  );
+}
+
+/**
+ * PaletteSwitcher component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function PaletteSwitcher(props: PaletteSwitcherProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <PaletteSwitcherView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...paletteSwitcherProps } = useDataBinding<PaletteSwitcherModel>(
+    dataSource,
+    restProps as Partial<PaletteSwitcherModel>,
+    PaletteSwitcherModel.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 PaletteSwitcher...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading palette switcher from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading palette 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 palette switcher: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <PaletteSwitcherView {...paletteSwitcherProps} />;
+}
+
+// Mark as QwickApp component
+(PaletteSwitcher as any)[QWICKAPP_COMPONENT] = true;
+
+export default PaletteSwitcher;