@qwickapps/react-framework 1.3.0

package/src/components/blocks/ProductCard.tsx

@@ -0,0 +1,472 @@
+/**
+ * ProductCard - Unified product card component with variants
+ * 
+ * A flexible product card that can display products in different formats:
+ * - Compact variant: For showcases and lists (shows limited features)
+ * - Detailed variant: For product pages (shows full details)
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Schedule as ComingSoonIcon, Launch as LaunchIcon, Visibility as PreviewIcon } from '@mui/icons-material';
+import {
+  Box,
+  Chip,
+  Typography,
+  useTheme
+} from '@mui/material';
+import { WithDataBinding } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
+import ProductCardModel from '../../schemas/ProductCardSchema';
+import { Button } from '../buttons/Button';
+
+export interface Product {
+  id: string;
+  name: string;
+  category: string;
+  description: string;
+  shortDescription?: string;
+  features: string[];
+  technologies: string[];
+  status: string;
+  image?: string;
+  url?: string;
+}
+
+export interface ProductCardAction {
+  id: string;
+  label: string;
+  variant?: 'contained' | 'outlined' | 'text';
+  color?: 'primary' | 'secondary' | 'error';
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+interface ProductCardViewProps extends WithBaseProps {
+  /** Product data */
+  product?: Product;
+  /** Card variant */
+  variant?: 'compact' | 'detailed';
+  /** Custom actions - if not provided, uses default actions */
+  actions?: ProductCardAction[];
+  /** Click handler for card */
+  onClick?: () => void;
+  /** Whether to show the image */
+  showImage?: boolean;
+  /** Whether to show technologies */
+  showTechnologies?: boolean;
+  /** Maximum features to show in compact mode */
+  maxFeaturesCompact?: number;
+}
+
+export interface ProductCardProps extends ProductCardViewProps, WithDataBinding {}
+
+/**
+ * Core ProductCard View component - handles product card rendering
+ */
+function ProductCardView({
+  product,
+  variant = 'compact',
+  actions,
+  onClick,
+  showImage = true,
+  showTechnologies = true,
+  maxFeaturesCompact = 3,
+  ...restProps
+}: ProductCardViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+  const theme = useTheme();
+
+  // Return null if no product data
+  if (!product) return null;
+
+  const getStatusIcon = (status: Product['status']) => {
+    switch (status) {
+      case 'launched':
+        return <LaunchIcon fontSize="small" />;
+      case 'beta':
+        return <PreviewIcon fontSize="small" />;
+      case 'coming-soon':
+        return <ComingSoonIcon fontSize="small" />;
+    }
+  };
+
+  const getStatusColor = (status: Product['status']) => {
+    switch (status) {
+      default:
+      case 'launched':
+        return theme.palette.success.main;
+      case 'beta':
+        return theme.palette.warning.main;
+      case 'coming-soon':
+        return theme.palette.grey[500];
+    }
+  };
+
+  const handleProductClick = () => {
+    if (onClick) {
+      onClick();
+    } else if (product.status === 'launched' && product.url?.startsWith('http')) {
+      window.open(product.url, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  const getDefaultActions = (): ProductCardAction[] => {
+    const actions: ProductCardAction[] = [
+      {
+        id: 'primary',
+        label: product.status === 'launched' ? 'Launch App' :
+               product.status === 'beta' ? 'Try Beta' :
+               product.status === 'coming-soon' ? 'Coming Soon' :
+               product.status,
+        variant: 'contained',
+        color: 'primary',
+        disabled: product.status === 'coming-soon',
+        onClick: handleProductClick
+      }
+    ];
+
+    if (variant === 'detailed' && product.status !== 'coming-soon') {
+      actions.push({
+        id: 'secondary',
+        label: 'Learn More',
+        variant: 'outlined',
+        color: 'primary',
+        onClick: () => window.location.hash = '#/contact'
+      });
+    }
+
+    return actions;
+  };
+
+  const displayActions = actions || getDefaultActions();
+
+  const FeaturesList = () => {
+    const featuresToShow = variant === 'compact' 
+      ? (product.features || []).slice(0, maxFeaturesCompact)
+      : (product.features || []);
+
+    return (
+      <Box sx={{ mb: variant === 'detailed' ? 2.5 : 2 }}>
+        <Typography 
+          variant="h6" 
+          component="h4"
+          sx={{ 
+            mb: 1.5, 
+            fontSize: '1.1rem',
+            fontWeight: 600
+          }}
+        >
+          Key Features:
+        </Typography>
+        <Box component="ul" sx={{ 
+          m: 0, 
+          p: 0,
+          listStyle: 'none'
+        }}>
+          {featuresToShow.map((feature, index) => (
+            <Box
+              key={index}
+              component="li"
+              sx={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                mb: 0.5,
+                gap: 1.5
+              }}
+            >
+              <Box
+                sx={{
+                  width: 6,
+                  height: 6,
+                  backgroundColor: 'primary.main',
+                  borderRadius: '50%',
+                  mt: 1,
+                  flexShrink: 0
+                }}
+              />
+              <Typography 
+                variant="body2" 
+                sx={{ 
+                  fontSize: '0.95rem',
+                  lineHeight: 1.4,
+                  opacity: 0.8
+                }}
+              >
+                {feature}
+              </Typography>
+            </Box>
+          ))}
+          {variant === 'compact' && (product.features || []).length > maxFeaturesCompact && (
+            <Typography 
+              variant="body2" 
+              color="primary"
+              sx={{ 
+                fontSize: '0.9rem',
+                pl: 2.5,
+                fontWeight: 500
+              }}
+            >
+              +{(product.features || []).length - maxFeaturesCompact} more features
+            </Typography>
+          )}
+        </Box>
+      </Box>
+    );
+  };
+
+  const TechnologiesSection = () => {
+    if (!showTechnologies || variant === 'compact') return null;
+
+    return (
+      <Box sx={{ mb: 3 }}>
+        <Typography 
+          variant="h6" 
+          component="h4"
+          sx={{ 
+            mb: 1.5, 
+            fontSize: '1rem',
+            fontWeight: 600
+          }}
+        >
+          Technologies:
+        </Typography>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+          {product.technologies.map((tech, index) => (
+            <Chip
+              key={index}
+              label={tech}
+              variant="outlined"
+              size="small"
+              sx={{
+                fontSize: '0.8rem',
+                fontWeight: 500
+              }}
+            />
+          ))}
+        </Box>
+      </Box>
+    );
+  };
+
+  return (
+    <Box
+      className={styleProps.className || "product-card"}
+      onClick={htmlProps.onClick || (variant === 'compact' ? handleProductClick : undefined)}
+      sx={{
+        p: 3, // padding="large" equivalent
+        borderRadius: 3,
+        border: '1px solid',
+        borderColor: 'divider',
+        cursor: variant === 'compact' ? 'pointer' : 'default',
+        position: 'relative',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'background.paper',
+        transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+        '&:hover': variant === 'compact' ? {
+          transform: 'translateY(-4px)',
+          boxShadow: 8
+        } : {},
+        ...(styleProps.sx || {})
+      }}
+      style={styleProps.style}
+    >
+      {/* Status Badge */}
+      <Chip
+        icon={getStatusIcon(product.status)}
+        label={product.status.replace('-', ' ')}
+        sx={{
+          position: 'absolute',
+          top: 16,
+          right: 16,
+          backgroundColor: getStatusColor(product.status),
+          color: 'white',
+          fontSize: '0.8rem',
+          fontWeight: 500,
+          textTransform: 'capitalize',
+          zIndex: 2,
+          '& .MuiChip-icon': {
+            color: 'white'
+          }
+        }}
+      />
+
+      {/* Product Image */}
+      {showImage && product.image && (
+        <Box
+          sx={{ 
+            width: '100%', 
+            height: variant === 'detailed' ? 240 : 200, 
+            mb: 2.5,
+            borderRadius: 1,
+            overflow: 'hidden',
+            backgroundColor: 'divider'
+          }}
+        >
+          <Box
+            component="img"
+            src={product.image}
+            alt={product.name}
+            sx={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover'
+            }}
+            onError={(e) => {
+              const target = e.target as HTMLImageElement;
+              target.style.display = 'none';
+              if (target.parentElement) {
+                target.parentElement.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+                target.parentElement.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: white; font-size: 1.5rem; font-weight: bold;">${product.name}</div>`;
+              }
+            }}
+          />
+        </Box>
+      )}
+
+      {/* Product Info */}
+      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+        <Box sx={{ mb: 2 }}>
+          <Typography 
+            variant="h4" 
+            component="h3"
+            sx={{ 
+              mb: 1, 
+              fontSize: variant === 'detailed' ? '1.75rem' : '1.5rem',
+              fontWeight: 600
+            }}
+          >
+            {product.name}
+          </Typography>
+          <Typography 
+            variant="overline"
+            sx={{ 
+              mb: 1.5,
+              color: 'primary.main',
+              fontSize: '0.9rem',
+              fontWeight: 500,
+              letterSpacing: '0.5px',
+              display: 'block'
+            }}
+          >
+            {product.category}
+          </Typography>
+          <Typography 
+            variant="body1"
+            sx={{ 
+              opacity: 0.8,
+              lineHeight: 1.6
+            }}
+          >
+            {variant === 'detailed' ? product.description : (product.shortDescription || product.description)}
+          </Typography>
+        </Box>
+
+        {/* Features */}
+        <FeaturesList />
+
+        {/* Technologies */}
+        <TechnologiesSection />
+
+        {/* Action Buttons */}
+        <Box sx={{ 
+          display: 'flex', 
+          gap: 1.5,
+          mt: 'auto',
+          ...(variant === 'compact' && { justifyContent: 'center' })
+        }}>
+          {displayActions.map((action) => (
+            <Button
+              key={action.id}
+              variant={action.variant || 'contained'}
+              color={action.color || 'primary'}
+              disabled={action.disabled}
+              onClick={action.onClick}
+              {...(variant === 'compact' && { fullWidth: true })}
+            >
+              {action.label}
+            </Button>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * ProductCard component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function ProductCard(props: ProductCardProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+  
+  // Mark as QwickApp component
+  (ProductCard as any)[QWICKAPP_COMPONENT] = true;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <ProductCardView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...productProps } = useDataBinding<ProductCardModel>(
+    dataSource,
+    restProps as Partial<ProductCardModel>,
+    ProductCardModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <ProductCardView
+        {...restProps}
+        product={{
+          id: 'loading-product',
+          name: 'Loading Product...',
+          category: 'Loading',
+          description: 'Loading product information from data source',
+          shortDescription: 'Loading...',
+          features: ['Loading features...'],
+          technologies: ['Loading'],
+          status: 'coming-soon'
+        }}
+        variant={restProps.variant || 'compact'}
+        showImage={false}
+      />
+    );
+  }
+
+  if (error) {
+    console.error('Error loading product card:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <ProductCardView
+          {...restProps}
+          product={{
+            id: 'error-product',
+            name: 'Product Loading Error',
+            category: 'Error',
+            description: error.message,
+            features: ['Unable to load product features'],
+            technologies: ['N/A'],
+            status: 'coming-soon'
+          }}
+          variant={restProps.variant || 'compact'}
+          showImage={false}
+        />
+      );
+    }
+    return null;
+  }
+
+  // Pass through data directly - let component handle missing properties
+  const transformedProps = productProps as ProductCardViewProps;
+
+  return <ProductCardView {...transformedProps} />;
+}
+
+export default ProductCard;
+export { ProductCard };

package/src/components/blocks/Section.tsx

@@ -0,0 +1,209 @@
+/**
+ * Section Component - Themed, responsive section container with data binding support
+ *
+ * Enhanced with data binding support through dataSource prop.
+ *
+ * Usage:
+ * - Traditional: <Section background="#f5f5f5" padding="large">Content</Section>
+ * - Data-driven: <Section dataSource="pages.home.intro-section">Content</Section>
+ *
+ * Features:
+ * - Theme-aware background color (supports theme palette paths and CSS colors)
+ * - Responsive vertical spacing and max width
+ * - Semantic HTML element customization
+ * - Full CMS integration through dataSource prop
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Box, Container } from '@mui/material';
+import type { WithDataBinding } from '@qwickapps/schema';
+import React from 'react';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
+import SectionModel from '../../schemas/SectionSchema';
+import type { BreakpointValue } from '../../types';
+import { mapToMUIBreakpoint } from '../../utils/breakpoints';
+
+interface SectionViewProps extends WithBaseProps {
+  /** Section content */
+  children?: React.ReactNode;
+  /** Section background color */
+  background?: string;
+  /** Section text color */
+  color?: string;
+  /** Section padding/spacing */
+  padding?: 'none' | 'tiny' | 'small' | 'medium' | 'large' | 'extra-large';
+  /** Maximum content width (maps to MUI Container maxWidth) */
+  contentMaxWidth?: BreakpointValue;
+  /** HTML element type */
+  component?: 'div' | 'section' | 'article' | 'main';
+}
+
+export interface SectionProps extends SectionViewProps, WithDataBinding {}
+
+/**
+ * Core Section View component - handles section rendering
+ */
+function SectionView({
+  children,
+  background = 'var(--theme-surface)',
+  color = 'var(--theme-on-surface)',
+  padding = 'medium',
+  contentMaxWidth = 'lg',
+  component = 'section',
+  ...restProps
+}: SectionViewProps) {
+  const { gridProps, styleProps, htmlProps } = useBaseProps(restProps);
+  
+  // Mark as QwickApp component
+  (SectionView as any)[QWICKAPP_COMPONENT] = true;
+  
+  // Return empty state if no content
+  if (!children) {
+    return (
+      <Box
+        component={component}
+        {...htmlProps}
+        {...styleProps}
+        {...gridProps}
+        sx={{
+          backgroundColor: background,
+          color,
+          position: 'static',
+          py: 2,
+          px: 0,
+          ...styleProps.sx,
+        }}
+      >
+        <Container
+          maxWidth={mapToMUIBreakpoint(contentMaxWidth)}
+          sx={{
+            position: 'relative',
+            textAlign: 'center',
+            opacity: 0.6,
+            ...(contentMaxWidth === false && {
+              maxWidth: 'none !important',
+              px: 3,
+            }),
+          }}
+        >
+          No content provided for this section
+        </Container>
+      </Box>
+    );
+  }
+  
+  /**
+   * Returns MUI spacing units for vertical padding based on spacing preset.
+   */
+  const getPadding = () => {
+    switch (padding) {
+      case 'none':
+        return 0;
+      case 'tiny':
+        return { py: 1, px: 0 }; //  8px bottom only (avoiding double spacing)
+      case 'small':
+        return { py: 2, px: 0 }; // 16px vertical, no horizontal (Container handles)
+      case 'medium':
+        return { py: 4, px: 0 }; // 32px vertical
+      case 'large':
+        return { py: 8, px: 0 }; // 64px vertical
+      case 'extra-large':
+        return { py: 12, px: 0 }; // 96px vertical
+      default:
+        return { py: 4, px: 0 };  // Default to medium if unknown
+    }
+  };
+
+  return (
+    <Box
+      component={component}
+      {...htmlProps}
+      {...styleProps}
+      {...gridProps}
+      sx={{
+        backgroundColor: background,
+        color,
+        position: 'static',
+        ...getPadding(),
+        ...styleProps.sx,
+      }}
+    >
+      {/* Content Container */}
+      <Container
+        maxWidth={mapToMUIBreakpoint(contentMaxWidth)}
+        sx={{
+          position: 'relative',
+          ...(contentMaxWidth === false && {
+            maxWidth: 'none !important',
+            px: 3, // Add some padding when no max width
+          }),
+        }}
+      >
+        {children}
+      </Container>
+    </Box>
+  );
+}
+
+// Main component with data binding support
+function Section(props: SectionProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <SectionView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...sectionProps } = useDataBinding<SectionModel>(
+    dataSource,
+    restProps as Partial<SectionModel>,
+    SectionModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <Box
+        component="section"
+        sx={{
+          backgroundColor: 'var(--theme-surface)',
+          py: 4,
+          px: 0,
+        }}
+      >
+        <Container maxWidth="lg" sx={{ textAlign: 'center' }}>
+          <div>Loading Section...</div>
+        </Container>
+      </Box>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading section:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Box
+          component="section"
+          sx={{
+            backgroundColor: 'var(--theme-surface)',
+            py: 4,
+            px: 0,
+            border: '1px solid red'
+          }}
+        >
+          <Container maxWidth="lg" sx={{ textAlign: 'center' }}>
+            <div>Error Loading Section: {error.message}</div>
+          </Container>
+        </Box>
+      );
+    }
+    return null;
+  }
+
+  return <SectionView {...sectionProps} />;
+}
+
+export default Section;