@qwickapps/react-framework 1.3.0

package/src/components/blocks/Footer.tsx

@@ -0,0 +1,343 @@
+/**
+ * Footer - Reusable footer component with flexible layout options
+ * 
+ * Provides a clean footer layout with:
+ * - Configurable orientation (vertical/horizontal)
+ * - Optional logo/branding
+ * - Multiple sections for links, text, or custom content
+ * - Responsive design with MUI components
+ * - Copyright and legal information support
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import {
+  Box,
+  Divider,
+  Link,
+  Paper,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { WithDataBinding } from '@qwickapps/schema';
+import React from 'react';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
+import FooterModel from '../../schemas/FooterSchema';
+
+export interface FooterSection {
+  /** Unique identifier for the section */
+  id: string;
+  /** Section title/heading */
+  title?: string;
+  /** Array of items in this section */
+  items: FooterItem[];
+}
+
+export interface FooterItem {
+  /** Unique identifier for the item */
+  id: string;
+  /** Display text */
+  label: string;
+  /** Optional URL for links */
+  href?: string;
+  /** Click handler for custom actions */
+  onClick?: () => void;
+  /** Whether to open links in new tab */
+  external?: boolean;
+}
+
+interface FooterViewProps extends WithBaseProps {
+  /** Footer sections */
+  sections?: FooterSection[];
+  /** Optional logo or branding element */
+  logo?: React.ReactNode;
+  /** Copyright text */
+  copyright?: string;
+  /** Additional legal or info text */
+  legalText?: string;
+  /** Layout orientation */
+  orientation?: 'vertical' | 'horizontal';
+  /** Background variant */
+  variant?: 'default' | 'contained' | 'outlined';
+  /** Whether to show divider above footer */
+  showDivider?: boolean;
+}
+
+export interface FooterProps extends FooterViewProps, WithDataBinding {}
+
+function FooterView({
+  sections = [],
+  logo,
+  copyright,
+  legalText,
+  orientation = 'vertical',
+  variant = 'default',
+  showDivider = true,
+  ...restProps
+}: FooterViewProps) {
+  const { gridProps, styleProps, htmlProps } = useBaseProps(restProps);
+  
+  // Mark as QwickApp component
+  (FooterView as any)[QWICKAPP_COMPONENT] = true;
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  
+  // Force vertical on mobile for better usability
+  const effectiveOrientation = isMobile ? 'vertical' : orientation;
+
+  const renderFooterItem = (item: FooterItem) => {
+    const content = (
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        sx={{ 
+          textDecoration: item.href ? 'none' : 'inherit',
+          '&:hover': item.href ? { color: 'primary.main' } : {},
+          cursor: item.href || item.onClick ? 'pointer' : 'default',
+          transition: 'color 0.2s'
+        }}
+        onClick={item.onClick}
+      >
+        {item.label}
+      </Typography>
+    );
+
+    if (item.href) {
+      return (
+        <Link
+          key={item.id}
+          href={item.href}
+          target={item.external ? '_blank' : undefined}
+          rel={item.external ? 'noopener noreferrer' : undefined}
+          underline="none"
+          sx={{ display: 'block', mb: 0.5 }}
+        >
+          {content}
+        </Link>
+      );
+    }
+
+    return (
+      <Box key={item.id} sx={{ mb: 0.5 }}>
+        {content}
+      </Box>
+    );
+  };
+
+  const renderSection = (section: FooterSection) => (
+    <Box key={section.id} sx={{ minWidth: 0 }}>
+      {section.title && (
+        <Typography
+          variant="subtitle2"
+          component="h3"
+          sx={{ 
+            fontWeight: 600,
+            mb: 1.5,
+            color: 'text.primary'
+          }}
+        >
+          {section.title}
+        </Typography>
+      )}
+      <Box>
+        {section.items.map(item => renderFooterItem(item))}
+      </Box>
+    </Box>
+  );
+
+  const getContainerProps = () => {
+    const baseProps = {
+      component: 'footer' as const,
+      ...htmlProps,
+      ...styleProps,
+      ...(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,
+      }),
+      sx: {
+        mt: 'auto',
+        py: 3,
+        px: { xs: 2, sm: 3 },
+        ...styleProps.sx
+      }
+    };
+
+    switch (variant) {
+      case 'contained':
+        return {
+          ...baseProps,
+          component: Paper,
+          sx: {
+            ...baseProps.sx,
+            borderRadius: 0,
+            backgroundColor: 'background.paper'
+          }
+        };
+      case 'outlined':
+        return {
+          ...baseProps,
+          component: Paper,
+          sx: {
+            ...baseProps.sx,
+            borderRadius: 0,
+            border: 1,
+            borderColor: 'divider',
+            backgroundColor: 'transparent'
+          },
+          variant: 'outlined' as const
+        };
+      default:
+        return baseProps;
+    }
+  };
+
+  const containerProps = getContainerProps();
+
+  return (
+    <>
+      {showDivider && <Divider />}
+      <Box {...containerProps}>
+        <Box
+          sx={{
+            maxWidth: 'lg',
+            mx: 'auto',
+            display: 'flex',
+            flexDirection: effectiveOrientation === 'vertical' ? 'column' : 'row',
+            gap: effectiveOrientation === 'vertical' ? 3 : 4,
+            alignItems: effectiveOrientation === 'horizontal' ? 'flex-start' : 'stretch'
+          }}
+        >
+          {/* Logo/Branding Section */}
+          {logo && (
+            <Box 
+              sx={{ 
+                flexShrink: 0,
+                mb: effectiveOrientation === 'vertical' ? 2 : 0,
+                mr: effectiveOrientation === 'horizontal' ? 'auto' : 0
+              }}
+            >
+              {logo}
+            </Box>
+          )}
+
+          {/* Footer Sections */}
+          {sections.length > 0 && (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: effectiveOrientation === 'vertical' ? 'column' : 'row' },
+                gap: { xs: 2, sm: 4 },
+                flex: 1,
+                justifyContent: effectiveOrientation === 'horizontal' ? 'space-between' : 'flex-start'
+              }}
+            >
+              {sections.map(section => renderSection(section))}
+            </Box>
+          )}
+        </Box>
+
+        {/* Copyright and Legal */}
+        {(copyright || legalText) && (
+          <Box
+            sx={{
+              mt: 3,
+              pt: 2,
+              borderTop: 1,
+              borderColor: 'divider',
+              maxWidth: 'lg',
+              mx: 'auto'
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: 'row' },
+                justifyContent: 'space-between',
+                alignItems: { xs: 'flex-start', sm: 'center' },
+                gap: 1
+              }}
+            >
+              {copyright && (
+                <Typography variant="caption" color="text.secondary">
+                  {copyright}
+                </Typography>
+              )}
+              {legalText && (
+                <Typography variant="caption" color="text.secondary">
+                  {legalText}
+                </Typography>
+              )}
+            </Box>
+          </Box>
+        )}
+      </Box>
+    </>
+  );
+}
+
+function Footer(props: FooterProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <FooterView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...footerProps } = useDataBinding<FooterModel>(
+    dataSource,
+    restProps as Partial<FooterModel>,
+    FooterModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <Box
+        component="footer"
+        sx={{
+          mt: 'auto',
+          py: 3,
+          px: { xs: 2, sm: 3 },
+          textAlign: 'center'
+        }}
+      >
+        <Typography variant="body2" color="text.secondary">
+          Loading Footer...
+        </Typography>
+      </Box>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading footer:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Box
+          component="footer"
+          sx={{
+            mt: 'auto',
+            py: 3,
+            px: { xs: 2, sm: 3 },
+            textAlign: 'center'
+          }}
+        >
+          <Typography variant="body2" color="error">
+            Error Loading Footer: {error.message}
+          </Typography>
+        </Box>
+      );
+    }
+    return null;
+  }
+
+  return <FooterView {...footerProps} />;
+}
+
+export default Footer;

package/src/components/blocks/HeroBlock.tsx

@@ -0,0 +1,280 @@
+/**
+ * HeroBlock Component - Full-width hero section with data binding support
+ *
+ * Enhanced with data binding support through dataSource prop.
+ *
+ * Usage:
+ * - Traditional: <HeroBlock title="Welcome" subtitle="Get started" actions={[...]} />
+ * - Data-driven: <HeroBlock dataSource="pages.home.hero" />
+ *
+ * Features:
+ * - Responsive headline, subtitle, and actions
+ * - Supports background images, gradients, and theme colors
+ * - Overlay for image backgrounds
+ * - Customizable height, alignment, and overlay opacity
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Box, Container, Stack, Typography, useTheme } from '@mui/material';
+import { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import React from 'react';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
+import HeroBlockModel from '../../schemas/HeroBlockSchema';
+import { Button, ButtonProps } from '../buttons/Button';
+
+type HeroBlockViewProps = Partial<ModelProps<HeroBlockModel>> & WithBaseProps & {
+  /** Action buttons (data-driven) */
+  actions?: ButtonProps[];
+  /** Additional content below the text */
+  children?: React.ReactNode;
+};
+
+export interface HeroBlockProps extends HeroBlockViewProps, WithDataBinding {}
+
+/**
+ * Core HeroBlock View component - handles hero section rendering
+ */
+function HeroBlockView({
+  title = '',
+  subtitle,
+  backgroundImage,
+  backgroundGradient,
+  backgroundColor = 'primary',
+  actions = [],
+  children,
+  textAlign = 'center',
+  blockHeight = 'medium',
+  overlayOpacity = 0.5,
+  ...restProps
+}: HeroBlockViewProps) {
+  const { gridProps, styleProps, htmlProps } = useBaseProps(restProps);
+  
+  // Mark as QwickApp component
+  (HeroBlockView as any)[QWICKAPP_COMPONENT] = true;
+  const theme = useTheme();
+
+  // Map height variants to actual heights
+  const getHeight = () => {
+    switch (blockHeight) {
+      case 'small':
+        return 300;
+      case 'medium':
+        return 400;
+      case 'large':
+        return 600;
+      case 'viewport':
+        return '100vh';
+      default:
+        return 400;
+    }
+  };
+
+  // Get background color from theme
+  const getBackgroundColor = () => {
+    if (backgroundImage || backgroundGradient) {
+      return 'transparent';
+    }
+    
+    switch (backgroundColor) {
+      case 'primary':
+        return theme.palette.primary.main;
+      case 'secondary':
+        return theme.palette.secondary.main;
+      case 'surface':
+        return theme.palette.background.paper;
+      default:
+        return theme.palette.background.default;
+    }
+  };
+
+  // Get text color based on background
+  const getTextColor = () => {
+    if (backgroundImage || backgroundGradient) {
+      return '#ffffff'; // White text on images/gradients
+    }
+    
+    switch (backgroundColor) {
+      case 'primary':
+        return theme.palette.primary.contrastText;
+      case 'secondary':
+        return theme.palette.secondary.contrastText;
+      case 'surface':
+        return theme.palette.getContrastText(theme.palette.background.paper);
+      default:
+        return theme.palette.text.primary;
+    }
+  };
+
+  return (
+    <Box
+      component="section"
+      {...htmlProps}
+      {...styleProps}
+      {...(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,
+      })}
+      sx={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: getHeight(),
+        backgroundColor: getBackgroundColor(),
+        color: getTextColor(),
+        backgroundImage: backgroundImage ? `url(${backgroundImage})` : backgroundGradient || 'none',
+        backgroundSize: backgroundImage ? 'cover' : 'auto',
+        backgroundPosition: backgroundImage ? 'center' : 'initial',
+        backgroundRepeat: 'no-repeat',
+        overflow: 'hidden',
+        ...styleProps.sx,
+      }}
+    >
+      {/* Overlay for background images */}
+      {backgroundImage && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            opacity: overlayOpacity,
+            zIndex: 1,
+          }}
+        />
+      )}
+
+      {/* Content */}
+      <Container
+        maxWidth="md"
+        sx={{
+          position: 'relative',
+          zIndex: 2,
+          textAlign,
+          py: 4,
+        }}
+      >
+        <Stack spacing={3} alignItems={textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start'}>
+          {/* Title */}
+          <Typography
+            variant="h2"
+            component="h1"
+            sx={{
+              fontWeight: 700,
+              fontSize: {
+                xs: '2rem',
+                sm: '2.5rem',
+                md: '3rem',
+                lg: '3.5rem',
+              },
+              lineHeight: 1.2,
+              maxWidth: '800px',
+            }}
+          >
+            {title}
+          </Typography>
+
+          {/* Subtitle */}
+          {subtitle && (
+            <Typography
+              variant="h5"
+              component="p"
+              sx={{
+                opacity: 0.9,
+                maxWidth: '600px',
+                fontWeight: 400,
+              }}
+            >
+              {subtitle}
+            </Typography>
+          )}
+
+          {/* Actions */}
+          {actions.length > 0 && (
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{
+                mt: 2,
+                flexWrap: 'wrap',
+                gap: 1,
+                justifyContent: textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start',
+              }}
+            >
+              {actions.map((action, index) => (
+                <Button
+                  key={`hero-action-${index}`}
+                  buttonSize="large"
+                  {...action}
+                />
+              ))}
+            </Stack>
+          )}
+
+          {/* Additional content */}
+          {children && (
+            <Box sx={{ maxWidth: '800px' }}>
+              {children}
+            </Box>
+          )}
+        </Stack>
+      </Container>
+    </Box>
+  );
+}
+
+function HeroBlock(props: HeroBlockProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <HeroBlockView {...restProps} />;
+  }
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...heroProps } = useDataBinding<HeroBlockModel>(
+    dataSource,
+    restProps as Partial<HeroBlockModel>,
+    HeroBlockModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <HeroBlockView
+        title="Loading Hero..."
+        backgroundColor="default"
+        blockHeight="medium"
+        textAlign="center"
+      />
+    );
+  }
+
+  if (error) {
+    console.error('Error loading hero block:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <HeroBlockView
+          title="Error Loading Hero"
+          subtitle={error.message}
+          backgroundColor="default"
+          blockHeight="medium"
+          textAlign="center"
+        />
+      );
+    }
+    return null;
+  }
+
+  return <HeroBlockView {...heroProps} />;
+}
+
+export default HeroBlock;