@qwickapps/react-framework 1.4.9 → 1.5.0

package/src/components/blocks/FeatureCard.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * FeatureCard Component - Unified feature card with data binding support
  *
@@ -153,8 +155,8 @@ function FeatureCardView({
     onClick: onClick || (() => {})
   }] : []);
 
-  const handleClick = onClick || htmlProps.onClick;
-  const { onClick: _, ...filteredHtmlProps } = htmlProps || {};
+  const handleClick = onClick || htmlProps?.onClick;
+  const { onClick: _htmlOnClick, ...filteredHtmlProps } = htmlProps || {};
 
   return (
     <Paper
@@ -256,22 +258,25 @@ function FeatureCardView({
  */
 function FeatureCard(props: FeatureCardProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
-  
+
   // Mark as QwickApp component
-  (FeatureCard as any)[QWICKAPP_COMPONENT] = true;
+  (FeatureCard as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<FeatureCardModel>(
+    dataSource || '',
+    restProps as Partial<FeatureCardModel>,
+    FeatureCardModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
 
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <FeatureCardView {...restProps} />;
   }
 
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...featureProps } = useDataBinding<FeatureCardModel>(
-    dataSource,
-    restProps as Partial<FeatureCardModel>,
-    FeatureCardModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
+  // Use data binding result
+  const { loading, error, ...featureProps } = bindingResult;
 
   // Show loading state
   if (loading) {

package/src/components/blocks/FeatureGrid.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * FeatureGrid Component - Responsive grid for showcasing features with data binding support
  *
@@ -62,7 +64,7 @@ function FeatureGridView({
   const { styleProps, htmlProps } = useBaseProps(restProps);
   
   // Mark as QwickApp component
-  (FeatureGridView as any)[QWICKAPP_COMPONENT] = true;
+  (FeatureGridView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Map gap to spacing value for GridLayout
   const getSpacing = (): 'none' | 'tiny' | 'small' | 'medium' | 'large' | 'huge' => {
@@ -90,18 +92,21 @@ function FeatureGridView({
 function FeatureGrid(props: FeatureGridProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<FeatureGridModel>(
+    dataSource || '',
+    restProps as Partial<FeatureGridModel>,
+    FeatureGridModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <FeatureGridView {...restProps} />;
   }
 
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...featureGridProps } = useDataBinding<FeatureGridModel>(
-    dataSource,
-    restProps as Partial<FeatureGridModel>,
-    FeatureGridModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
+  // Use data binding result
+  const { loading, error, ...featureGridProps } = bindingResult;
 
   // Show loading state
   if (loading) {

package/src/components/blocks/Footer.tsx

@@ -1,13 +1,15 @@
+'use client';
+
 /**
  * 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.
  */
 
@@ -52,8 +54,8 @@ interface FooterViewProps extends WithBaseProps {
   sections?: FooterSection[];
   /** Optional logo or branding element */
   logo?: React.ReactNode;
-  /** Copyright text */
-  copyright?: string;
+  /** Copyright text or custom React element */
+  copyright?: string | React.ReactNode;
   /** Additional legal or info text */
   legalText?: string;
   /** Layout orientation */
@@ -64,7 +66,7 @@ interface FooterViewProps extends WithBaseProps {
   showDivider?: boolean;
 }
 
-export interface FooterProps extends FooterViewProps, WithDataBinding { }
+export interface FooterProps extends FooterViewProps, WithDataBinding {}
 
 function FooterView({
   sections = [],
@@ -79,7 +81,7 @@ function FooterView({
   const { gridProps, styleProps, htmlProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (FooterView as any)[QWICKAPP_COMPONENT] = true;
+  (FooterView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
@@ -263,9 +265,13 @@ function FooterView({
               }}
             >
               {copyright && (
-                <Text variant="caption" customColor='var(--theme-text-secondary)'>
-                  {copyright}
-                </Text>
+                typeof copyright === 'string' ? (
+                  <Text variant="caption" customColor='var(--theme-text-secondary)'>
+                    {copyright}
+                  </Text>
+                ) : (
+                  copyright
+                )
               )}
               {legalText && (
                 <Text variant="caption" customColor="var(--theme-text-secondary)">
@@ -283,18 +289,21 @@ function FooterView({
 function Footer(props: FooterProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<FooterModel>(
+    dataSource || '',
+    restProps as Partial<FooterModel>,
+    FooterModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // 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 }
-  );
+  // Use data binding result
+  const { loading, error, ...footerProps } = bindingResult;
 
   // Show loading state
   if (loading) {

package/src/components/blocks/HeroBlock.tsx

@@ -19,11 +19,12 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Container, Stack, Typography, useTheme } from '@mui/material';
+import { Box, Container, Stack, useTheme } from '@mui/material';
 import React from 'react';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 import { Button, ButtonProps } from '../buttons/Button';
+import Text from './Text';
 
 /**
  * Props interface for HeroBlock component - extends ViewProps
@@ -68,7 +69,7 @@ function HeroBlockView({
   overlayOpacity = 0.5,
   gridProps,
   ...props
-}: HeroBlockProps & { gridProps?: any }) {
+}: HeroBlockProps & { gridProps?: unknown }) {
   const theme = useTheme();
 
   // Map height variants to actual heights
@@ -107,10 +108,6 @@ function HeroBlockView({
 
   // 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;
@@ -127,7 +124,7 @@ function HeroBlockView({
     <Box
       component="section"
       {...props}
-      {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
+      {...(gridProps ? { 'data-grid': JSON.stringify(gridProps) } : {})}
       sx={{
         position: 'relative',
         display: 'flex',
@@ -172,9 +169,10 @@ function HeroBlockView({
       >
         <Stack spacing={3} alignItems={textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start'}>
           {/* Title */}
-          <Typography
+          <Text
             variant="h2"
             component="h1"
+            customColor='var(--theme-on-primary)'
             sx={{
               fontWeight: 700,
               fontSize: {
@@ -188,21 +186,22 @@ function HeroBlockView({
             }}
           >
             {title}
-          </Typography>
+          </Text>
 
           {/* Subtitle */}
           {subtitle && (
-            <Typography
+            <Text
               variant="h5"
               component="p"
+              customColor='var(--theme-on-primary)'
+              fontWeight='400'
               sx={{
                 opacity: 0.9,
-                maxWidth: '600px',
-                fontWeight: 400,
+                maxWidth: '600px'
               }}
             >
               {subtitle}
-            </Typography>
+            </Text>
           )}
 
           {/* Actions */}

package/src/components/blocks/Image.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 /**
  * Image - Comprehensive image display component with serialization support
- * 
+ *
  * Features:
  * - Responsive image handling with srcSet and sizes
  * - Multiple fit modes and positioning options
@@ -9,14 +11,14 @@
  * - Lazy loading support
  * - Fallback image handling
  * - Full serialization support via factory pattern
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement, useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Box, Skeleton, Typography, useTheme } from '@mui/material';
 import { BrokenImage as BrokenImageIcon } from '@mui/icons-material';
-import ImageModel, { ImageFit, ImageLoading, ImagePosition } from '../../schemas/ImageSchema';
+import { ImageFit, ImageLoading, ImagePosition } from '../../schemas/ImageSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -221,13 +223,19 @@ export const Image: SerializableComponent<ImageProps> = createSerializableView<I
   // Image component uses default react-children strategy
 });
 
+// Type for pattern registry with basic methods
+interface PatternRegistry {
+  hasPattern(pattern: string): boolean;
+  registerPattern(pattern: string, handler: (element: Element) => unknown): void;
+}
+
 // Register HTML patterns that Image component can handle
-(Image as any).registerPatternHandlers = (registry: any): void => {
+(Image as unknown as { registerPatternHandlers: (registry: PatternRegistry) => void }).registerPatternHandlers = (registry: PatternRegistry): void => {
   // Register img elements
   if (!registry.hasPattern('img')) {
     registry.registerPattern('img', transformImage);
   }
-  
+
   // Register figure elements with img
   if (!registry.hasPattern('figure img')) {
     registry.registerPattern('figure img', transformFigureImage);
@@ -235,7 +243,7 @@ export const Image: SerializableComponent<ImageProps> = createSerializableView<I
 };
 
 // Transform img elements to Image component
-function transformImage(element: Element): any {
+function transformImage(element: Element): unknown {
   const src = element.getAttribute('src') || '';
   const alt = element.getAttribute('alt') || '';
   const width = element.getAttribute('width');
@@ -255,7 +263,7 @@ function transformImage(element: Element): any {
 }
 
 // Transform figure > img elements to Image component with caption support
-function transformFigureImage(element: Element): any {
+function transformFigureImage(element: Element): unknown {
   const figure = element.closest('figure');
   const figcaption = figure?.querySelector('figcaption');
   const caption = figcaption?.textContent || '';

package/src/components/blocks/PageBannerHeader.tsx

@@ -1,12 +1,14 @@
+'use client';
+
 /**
  * PageBannerHeader - Facebook-style banner header with cover image and profile info
- * 
+ *
  * Similar to social media banners with:
  * - Large cover/banner image background
  * - Profile image overlay (typically bottom-left)
  * - Info section with title, subtitle, and metadata
  * - Action buttons in various positions
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
@@ -26,7 +28,7 @@ import {
 } from '@mui/material';
 import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import React from 'react';
-import { useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
+import { useBaseProps, useDataBinding} from '../../hooks';
 import PageBannerHeaderModel from '../../schemas/PageBannerHeaderSchema';
 import { HeaderAction } from './CoverImageHeader';
 
@@ -45,7 +47,6 @@ export interface PageBannerHeaderProps extends PageBannerHeaderViewProps, WithDa
 
 function PageBannerHeaderView({
   coverImage,
-  coverImageAlt = '',
   profileImage,
   profileImageAlt = '',
   profileImageSize = 'large',
@@ -383,18 +384,21 @@ function PageBannerHeaderView({
 function PageBannerHeader(props: PageBannerHeaderProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<PageBannerHeaderModel>(
+    dataSource || '',
+    restProps as Partial<PageBannerHeaderModel>,
+    PageBannerHeaderModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <PageBannerHeaderView {...restProps} />;
   }
 
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...modelProps } = useDataBinding<PageBannerHeaderModel>(
-    dataSource,
-    restProps as Partial<PageBannerHeaderModel>,
-    PageBannerHeaderModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
+  // Use data binding result
+  const { loading, error, ...modelProps } = bindingResult;
 
   // Convert HeaderActionModel[] to HeaderAction[] by adding default onClick handlers
   const convertedActions: HeaderAction[] | undefined = modelProps.actions

package/src/components/blocks/ProductCard.tsx

@@ -1,10 +1,12 @@
+'use client';
+
 /**
  * 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.
  */
 
@@ -115,7 +117,7 @@ function ProductCardView({
     const actions: ProductCardAction[] = [
       {
         id: 'primary',
-        label: product.status === 'launched' ? 'Launch App' :
+        label: product.status === 'launched' ? 'Learn More' :
                product.status === 'beta' ? 'Try Beta' :
                product.status === 'coming-soon' ? 'Coming Soon' :
                product.status,
@@ -286,6 +288,8 @@ function ProductCardView({
           fontWeight: 500,
           textTransform: 'capitalize',
           zIndex: 2,
+          height: '28px',
+          px: 1.5,
           '& .MuiChip-icon': {
             color: 'white'
           }
@@ -327,21 +331,21 @@ function ProductCardView({
 
       {/* Product Info */}
       <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-        <Box sx={{ mb: 2 }}>
-          <Typography 
-            variant="h4" 
+        <Box sx={{ mb: 3 }}>
+          <Typography
+            variant="h4"
             component="h3"
-            sx={{ 
-              mb: 1, 
+            sx={{
+              mb: 1,
               fontSize: variant === 'detailed' ? '1.75rem' : '1.5rem',
               fontWeight: 600
             }}
           >
             {product.name}
           </Typography>
-          <Typography 
+          <Typography
             variant="overline"
-            sx={{ 
+            sx={{
               mb: 1.5,
               color: 'primary.main',
               fontSize: '0.9rem',
@@ -352,9 +356,9 @@ function ProductCardView({
           >
             {product.category}
           </Typography>
-          <Typography 
+          <Typography
             variant="body1"
-            sx={{ 
+            sx={{
               opacity: 0.8,
               lineHeight: 1.6
             }}
@@ -363,11 +367,11 @@ function ProductCardView({
           </Typography>
         </Box>
 
-  {/* Features */}
-  {featuresListElement}
+  {/* Features - only show if features exist */}
+  {product.features && product.features.length > 0 && featuresListElement}
 
-  {/* Technologies */}
-  {technologiesSectionElement}
+  {/* Technologies - only show if technologies exist */}
+  {product.technologies && product.technologies.length > 0 && technologiesSectionElement}
 
         {/* Action Buttons */}
         <Box sx={{ 
@@ -400,22 +404,25 @@ function ProductCardView({
  */
 function ProductCard(props: ProductCardProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
-  
+
   // Mark as QwickApp component
-  (ProductCard as any)[QWICKAPP_COMPONENT] = true;
+  (ProductCard as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<ProductCardModel>(
+    dataSource || '',
+    restProps as Partial<ProductCardModel>,
+    ProductCardModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
 
   // 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 }
-  );
+  // Use data binding result
+  const { loading, error, ...productProps } = bindingResult;
 
   // Show loading state
   if (loading) {

package/src/components/blocks/Section.tsx

@@ -55,7 +55,7 @@ function SectionView({
   component = 'section',
   gridProps,
   ...props
-}: SectionProps & { gridProps?: any }) {
+}: SectionProps & { gridProps?: unknown }) {
   
   // Return empty state if no content
   if (!children) {
@@ -63,7 +63,7 @@ function SectionView({
       <Box
         component={component}
         {...props}
-        {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
+        {...(gridProps ? { 'data-grid': JSON.stringify(gridProps) } : {})}
         sx={{
           backgroundColor: background,
           color,
@@ -117,7 +117,7 @@ function SectionView({
     <Box
       component={component}
       {...props}
-      {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
+      {...(gridProps ? { 'data-grid': JSON.stringify(gridProps) } : {})}
       sx={{
         backgroundColor: background,
         color,
@@ -153,35 +153,42 @@ export const Section: SerializableComponent<SectionProps> = createSerializableVi
   View: SectionView,
   finalize: (props: SectionProps) => {
     // Handle type conversion for contentMaxWidth - convert "false" string to boolean false
-    if ((props.contentMaxWidth as any) === "false") {
+    if ((props.contentMaxWidth as unknown) === "false") {
       return { ...props, contentMaxWidth: false as BreakpointValue };
     }
     return props;
   }
 });
 
+// Type for pattern registry with basic methods
+interface PatternRegistry {
+  hasPattern(pattern: string): boolean;
+  registerPattern(pattern: string, handler: (element: Element) => unknown): void;
+}
+
 // Register HTML patterns that Section component can handle
-(Section as any).registerPatternHandlers = (registry: any): void => {
+(Section as unknown as { registerPatternHandlers: (registry: PatternRegistry) => void }).registerPatternHandlers = (registry: PatternRegistry): void => {
   // Register section element pattern
   if (!registry.hasPattern('section')) {
-    registry.registerPattern('section', (Section as any).transformSection);
+    registry.registerPattern('section', (Section as unknown as { transformSection: (element: Element) => unknown }).transformSection);
   }
-  
+
   // Register section with specific classes
   if (!registry.hasPattern('section.blog-section')) {
-    registry.registerPattern('section.blog-section', (Section as any).transformBlogSection);
+    registry.registerPattern('section.blog-section', (Section as unknown as { transformBlogSection: (element: Element) => unknown }).transformBlogSection);
   }
 };
 
 // Transform generic section elements to Section component
-(Section as any).transformSection = (element: Element): any => {
+(Section as unknown as { transformSection: (element: Element) => unknown }).transformSection = (element: Element): unknown => {
   const padding = element.getAttribute('data-padding') || 'medium';
   const background = element.getAttribute('data-background');
   const contentMaxWidth = element.getAttribute('data-max-width') || 'lg';
 
   return {
     tagName: 'Section',
-    props: {
+    version: '1.0.0',
+    data: {
       padding,
       background,
       contentMaxWidth,
@@ -191,13 +198,14 @@ export const Section: SerializableComponent<SectionProps> = createSerializableVi
 };
 
 // Transform blog section elements to Section component with specific styling
-(Section as any).transformBlogSection = (element: Element): any => {
+(Section as unknown as { transformBlogSection: (element: Element) => unknown }).transformBlogSection = (element: Element): unknown => {
   const padding = element.getAttribute('data-padding') || 'large';
   const background = element.getAttribute('data-background') || 'var(--theme-surface)';
-  
+
   return {
     tagName: 'Section',
-    props: {
+    version: '1.0.0',
+    data: {
       padding,
       background,
       contentMaxWidth: 'md',