@qwickapps/react-framework 1.4.9 → 1.5.0

package/src/components/blocks/Article.tsx

@@ -1,21 +1,23 @@
+'use client';
+
 /**
  * Article - Transforms HTML content to use framework components with data binding support
- * 
+ *
  * Automatically transforms:
  * - <pre><code> blocks to Code components with syntax highlighting
  * - Complex <code> elements to Code components
  * - <section class="blog-section"> to Section components
  * - Other framework-compatible elements
  * - Preserves all other HTML structure and attributes
- * 
+ *
  * Supports both traditional props and data binding through dataSource.
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
 import { Box, Typography } from '@mui/material';
 import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import ArticleModel from '../../schemas/ArticleSchema';
 import { ModelView } from '../base/ModelView';
@@ -37,7 +39,7 @@ function ArticleView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (ArticleView as any)[QWICKAPP_COMPONENT] = true;
+  (ArticleView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Return empty state if no HTML content
   if (!html.trim()) {
@@ -55,10 +57,10 @@ function ArticleView({
           ...styleProps.sx
         }}
       >
-        <Typography variant="h6" color="text.secondary">
+        <Typography variant="h6" color="var(--theme-text)">
           No Content Available
         </Typography>
-        <Typography variant="body2" color="text.secondary">
+        <Typography variant="body2" color="var(--theme-text)">
           No HTML content provided for this article
         </Typography>
       </Box>
@@ -74,115 +76,257 @@ function ArticleView({
       {...otherProps}
       {...styleProps}
       {...{
-        // Ensure proper width constraints for article content
-        maxWidth: '800px',
+        // Modern article layout
+        maxWidth: '900px',
         mx: 'auto',
-        p: 3,
-        // Header styling when headers are present
+        px: { xs: 2, sm: 3, md: 4 },
+        py: { xs: 3, md: 5 },
+
+        // Typography - Modern, readable hierarchy
         '& h1, & h2, & h3, & h4, & h5, & h6': {
-          maxWidth: '100%',
-          mb: 2,
-          mt: 3,
-          color: 'var(--theme-text-primary)',
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          fontWeight: 700,
+          letterSpacing: '-0.02em',
+          color: 'var(--theme-text)',
+          scrollMarginTop: '100px', // For anchor links
           '&:first-of-type': {
             mt: 0
           }
         },
         '& h1': {
-          fontSize: '2.5rem',
-          fontWeight: 700,
-          lineHeight: 1.2
+          fontSize: { xs: '2rem', md: '2.75rem' },
+          lineHeight: 1.15,
+          mb: 3,
+          mt: 5
         },
         '& h2': {
-          fontSize: '2rem',
-          fontWeight: 600,
-          lineHeight: 1.3
+          fontSize: { xs: '1.5rem', md: '2rem' },
+          lineHeight: 1.25,
+          mb: 2.5,
+          mt: 5,
+          pb: 1.5,
+          borderBottom: '1px solid var(--theme-border-lighter)'
         },
         '& h3': {
-          fontSize: '1.5rem',
-          fontWeight: 600,
-          lineHeight: 1.4
+          fontSize: { xs: '1.25rem', md: '1.5rem' },
+          lineHeight: 1.3,
+          mb: 2,
+          mt: 4
         },
         '& h4': {
-          fontSize: '1.25rem',
-          fontWeight: 600,
+          fontSize: { xs: '1.1rem', md: '1.25rem' },
           lineHeight: 1.4,
-          mt: 2.5,
-          mb: 1.5
+          mb: 1.5,
+          mt: 3,
+          color: 'var(--theme-text)',
+          fontWeight: 600
         },
-        // Ensure paragraphs have proper spacing
+
+        // Body text - Optimized for reading
         '& p': {
+          fontSize: { xs: '1rem', md: '1.0625rem' },
+          lineHeight: 1.75,
           mb: 2,
-          lineHeight: 1.8,
-          fontSize: '1.1rem',
-          color: 'var(--theme-text-primary)'
+          color: 'var(--theme-text)',
+          fontFamily: 'Georgia, "Times New Roman", serif',
+          '&:last-child': {
+            mb: 0
+          }
         },
-        // Ensure lists have proper spacing
+
+        // Lists - Better visual hierarchy
         '& ul, & ol': {
-          mb: 2.5,
-          pl: 4,
+          mb: 3,
+          pl: { xs: 3, md: 4 },
           '& li': {
-            mb: 1,
-            lineHeight: 1.8,
-            fontSize: '1.05rem',
-            color: 'var(--theme-text-primary)'
+            mb: 1.25,
+            lineHeight: 1.7,
+            fontSize: { xs: '1rem', md: '1.0625rem' },
+            color: 'var(--theme-text)',
+            fontFamily: 'Georgia, "Times New Roman", serif',
+            '&::marker': {
+              color: 'var(--theme-primary)',
+              fontWeight: 600
+            },
+            '& p': {
+              mb: 0.5
+            }
+          },
+          '& ul, & ol': {
+            mt: 1,
+            mb: 0
+          }
+        },
+
+        // Code blocks - Modern syntax highlighting style
+        '& pre': {
+          backgroundColor: 'var(--theme-surface-elevated)',
+          color: 'var(--theme-text)',
+          borderRadius: 'var(--theme-border-radius)',
+          p: { xs: 2, md: 3 },
+          mb: 3,
+          overflow: 'auto',
+          fontSize: '0.9rem',
+          lineHeight: 1.6,
+          fontFamily: '"Fira Code", "Cascadia Code", "SF Mono", Monaco, Consolas, monospace',
+          border: '1px solid var(--theme-border-light)',
+          boxShadow: 'var(--theme-elevation-2)',
+          '& code': {
+            backgroundColor: 'transparent',
+            color: 'inherit',
+            padding: 0,
+            fontSize: 'inherit',
+            fontFamily: 'inherit'
           }
         },
-        // Blockquote styling
+
+        // Inline code - Subtle highlight
+        '& code': {
+          backgroundColor: 'var(--theme-code-bg)',
+          color: 'var(--theme-error)',
+          padding: '0.2em 0.4em',
+          borderRadius: 'var(--theme-border-radius-small)',
+          fontSize: '0.9em',
+          fontFamily: '"Fira Code", "Cascadia Code", "SF Mono", Monaco, Consolas, monospace',
+          fontWeight: 500
+        },
+
+        // Blockquotes - Elegant callouts
         '& blockquote': {
           borderLeft: '4px solid var(--theme-primary)',
+          backgroundColor: 'var(--theme-surface-variant)',
+          borderRadius: `0 var(--theme-border-radius-small) var(--theme-border-radius-small) 0`,
           pl: 3,
-          pr: 2,
-          py: 2,
-          my: 3,
+          pr: 3,
+          py: 2.5,
+          my: 4,
           ml: 0,
           mr: 0,
-          background: 'var(--theme-surface)',
-          borderRadius: '8px',
           '& p': {
-            fontSize: '1.15rem',
+            fontSize: { xs: '1.05rem', md: '1.125rem' },
             fontStyle: 'italic',
-            lineHeight: 1.7,
-            mb: 1,
-            color: 'var(--theme-text-primary)'
+            lineHeight: 1.6,
+            mb: 1.5,
+            color: 'var(--theme-text)',
+            '&:last-child': {
+              mb: 0
+            }
           },
           '& cite': {
             display: 'block',
-            fontSize: '0.95rem',
+            fontSize: '0.9rem',
             fontStyle: 'normal',
-            fontWeight: 600,
-            color: 'var(--theme-text-secondary)',
-            mt: 1
+            fontWeight: 500,
+            color: 'var(--theme-text)',
+            mt: 1,
+            '&::before': {
+              content: '"— "',
+              color: 'var(--theme-primary)'
+            }
+          }
+        },
+
+        // Tables - Clean, modern design
+        '& table': {
+          width: '100%',
+          borderCollapse: 'separate',
+          borderSpacing: 0,
+          mb: 3,
+          fontSize: '0.95rem',
+          overflow: 'hidden',
+          borderRadius: 'var(--theme-border-radius-small)',
+          border: '1px solid var(--theme-border-light)',
+          '& thead': {
+            backgroundColor: 'var(--theme-surface-variant)',
+            '& th': {
+              padding: '12px 16px',
+              textAlign: 'left',
+              fontWeight: 600,
+              color: 'var(--theme-text)',
+              borderBottom: '2px solid var(--theme-border-main)',
+              fontSize: '0.875rem',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em'
+            }
+          },
+          '& tbody': {
+            '& tr': {
+              borderBottom: '1px solid var(--theme-border-lighter)',
+              transition: 'background-color 0.2s ease',
+              '&:hover': {
+                backgroundColor: 'var(--theme-surface-variant)'
+              },
+              '&:last-child': {
+                borderBottom: 'none'
+              }
+            },
+            '& td': {
+              padding: '12px 16px',
+              color: 'var(--theme-text)',
+              lineHeight: 1.6
+            }
           }
         },
-        // Strong/bold text
+
+        // Text emphasis
         '& strong': {
-          fontWeight: 600,
-          color: 'var(--theme-text-primary)'
+          fontWeight: 700,
+          color: 'var(--theme-text)'
         },
-        // Emphasis/italic text
         '& em': {
           fontStyle: 'italic',
-          color: 'var(--theme-text-primary)'
+          color: 'var(--theme-text)'
         },
-        // Links
+
+        // Links - Modern, accessible
         '& a': {
           color: 'var(--theme-primary)',
           textDecoration: 'none',
           fontWeight: 500,
+          borderBottom: '1px solid transparent',
+          transition: 'border-color 0.2s ease',
           '&:hover': {
-            textDecoration: 'underline'
+            borderBottomColor: 'var(--theme-primary)'
+          },
+          '&:focus-visible': {
+            outline: '2px solid var(--theme-primary)',
+            outlineOffset: '2px',
+            borderRadius: '2px'
           }
         },
+
         // Images and figures
+        '& img': {
+          maxWidth: '100%',
+          height: 'auto',
+          borderRadius: 'var(--theme-border-radius-small)',
+          display: 'block',
+          my: 3
+        },
         '& figure': {
-          margin: '2rem 0',
+          margin: '3rem 0',
           '& img': {
             maxWidth: '100%',
             height: 'auto',
-            borderRadius: '8px'
+            borderRadius: 'var(--theme-border-radius-small)',
+            boxShadow: 'var(--theme-elevation-2)'
+          },
+          '& figcaption': {
+            textAlign: 'center',
+            fontSize: '0.875rem',
+            color: 'var(--theme-text)',
+            mt: 1.5,
+            fontStyle: 'italic'
           }
         },
+
+        // Horizontal rules
+        '& hr': {
+          border: 'none',
+          borderTop: '1px solid var(--theme-border-light)',
+          my: 5
+        },
+
         ...styleProps.sx
       }}
     >
@@ -198,7 +342,7 @@ export class Article extends ModelView<ArticleProps, ArticleModel> {
   static readonly version = '1.0.0';
   
   // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
+  protected getComponentSpecificProps(): unknown {
     return {
       html: this.props.html,
       skipHeader: this.props.skipHeader
@@ -207,7 +351,7 @@ export class Article extends ModelView<ArticleProps, ArticleModel> {
 
   // Article component renders traditional props view
   protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
+    const { ...restProps } = this.props;
     return <ArticleView {...restProps} />;
   }
 
@@ -217,7 +361,7 @@ export class Article extends ModelView<ArticleProps, ArticleModel> {
   }
 
   // Register HTML patterns that Article component can handle
-  static registerPatternHandlers(registry: any): void {
+  static registerPatternHandlers(registry: unknown): void {
     // Register article elements
     if (!registry.hasPattern('article')) {
       registry.registerPattern('article', Article.transformArticle);
@@ -225,7 +369,7 @@ export class Article extends ModelView<ArticleProps, ArticleModel> {
   }
 
   // Transform article elements to Article component
-  private static transformArticle(element: Element): any {
+  private static transformArticle(element: Element): unknown {
     const skipHeader = element.getAttribute('data-skip-header') === 'true';
     
     return {
@@ -243,7 +387,7 @@ function ArticleWithDataBinding(props: ArticleProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Use data binding
-  const { dataSource: _source, loading, error, cached, ...articleProps } = useDataBinding<ArticleModel>(
+  const { loading, error, ...articleProps } = useDataBinding<ArticleModel>(
     dataSource!,
     restProps as Partial<ArticleModel>,
     ArticleModel.getSchema(),
@@ -263,7 +407,7 @@ function ArticleWithDataBinding(props: ArticleProps) {
         }}
       >
         <Typography variant="h6">Loading Article...</Typography>
-        <Typography variant="body2" color="text.secondary">
+        <Typography variant="body2" color="var(--theme-text)">
           Loading
         </Typography>
       </Box>
@@ -284,7 +428,7 @@ function ArticleWithDataBinding(props: ArticleProps) {
           }}
         >
           <Typography variant="h6">Error Loading Article</Typography>
-          <Typography variant="body2" color="text.secondary">
+          <Typography variant="body2" color="var(--theme-text)">
             {error.message}
           </Typography>
         </Box>

package/src/components/blocks/CardListGrid.tsx

@@ -1,11 +1,13 @@
+'use client';
+
 /**
  * CardListGrid - Generic grid layout for cards with data binding support
- * 
+ *
  * A unified grid component that can display any type of card component
  * with consistent spacing and layout. Works with ProductCard, FeatureCard,
- * or any other card-like components. Supports both traditional props and 
+ * or any other card-like components. Supports both traditional props and
  * data binding through dataSource.
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
@@ -19,15 +21,15 @@ import { ProductCard } from './ProductCard';
 
 type CardListGridViewProps = SchemaProps<CardListGridModel> & {
   /** Render function for each item (traditional usage) */
-  renderItem?: (item: any, index: number) => React.ReactNode;
+  renderItem?: (item: unknown, index: number) => React.ReactNode;
 };
 
 export interface CardListGridProps extends CardListGridViewProps, WithDataBinding {
 }
 
 // Default render function based on component type
-const getDefaultRenderItem = (renderComponent: string = 'ProductCard', itemProps: Record<string, any> = {}) => {
-  return (item: any, index: number) => {
+const getDefaultRenderItem = (renderComponent: string = 'ProductCard', itemProps: Record<string, unknown> = {}) => {
+  return (item: unknown, index: number) => {
     const key = item?.id || item?.key || index;
 
     switch (renderComponent) {
@@ -82,19 +84,21 @@ function CardListGridView({
 function CardListGrid(props: CardListGridProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
-    return <CardListGridView {...restProps} />;
-  }
-
-  // Use data binding
+  // Always call hooks unconditionally
   const result = useDataBinding<CardListGridModel>(
-    dataSource,
+    dataSource || '',
     restProps as Partial<CardListGridModel>,
     CardListGridModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
   );
-  const { dataSource: _source, loading, error, cached, ...cardListGridProps } = result;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <CardListGridView {...restProps} />;
+  }
+
+  // Use data binding result
+  const { loading, error, ...cardListGridProps } = result;
 
   // Show loading state
   if (loading) {

package/src/components/blocks/Code.tsx

@@ -1,25 +1,27 @@
+'use client';
+
 /**
  * Code - Content-prop leaf component for secure code display
- * 
+ *
  * Uses content-prop strategy to prevent JSON deserialization vulnerabilities.
  * Code content is serialized as data.content (string), not data.children,
  * preventing recursive deserialization of example JSON that looks like components.
- * 
+ *
  * Features preserved:
  * - Syntax highlighting support
- * - Copy to clipboard functionality  
+ * - Copy to clipboard functionality
  * - Light/dark theme support
  * - Multiple language support
  * - Responsive design
  * - Line numbers support
  * - Title display
  * - Custom backgrounds
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
 import React, { useState } from 'react';
-import { Box, Paper, Typography, Tooltip, IconButton, Snackbar, Alert, useTheme } from '@mui/material';
+import { Box, Typography, Tooltip, IconButton, Snackbar, Alert, useTheme, Paper } from '@mui/material';
 import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
 import CodeSchema from '../../schemas/CodeSchema';
 import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
@@ -40,7 +42,7 @@ export type CodeProps = ViewProps & SchemaProps<typeof CodeSchema>;
  */
 function CodeView({
   content,
-  language = 'text',
+  language: _language = 'text',
   showCopy = true,
   showLineNumbers = false,
   title,
@@ -54,7 +56,7 @@ function CodeView({
   const [copied, setCopied] = useState(false);
   const [showCopiedAlert, setShowCopiedAlert] = useState(false);
   
-  const codeMaxHeight = (restProps.sx as any)?.maxHeight || 400;
+  const codeMaxHeight = (restProps.sx as Record<string, unknown>)?.maxHeight as number || 400;
 
   // Use content prop directly (already a string from content-prop strategy)
   const codeContent = content || '';
@@ -257,20 +259,23 @@ export const Code: SerializableComponent<CodeProps> = createSerializableView<Cod
 });
 
 // Register HTML patterns that Code component can handle
-(Code as any).registerPatternHandlers = (registry: any): void => {
+(Code as Record<string, unknown>).registerPatternHandlers = (registry: Record<string, (...args: unknown[]) => unknown>): void => {
   // Register pre + code pattern
+  if (!registry.hasPattern) {
+    return;
+  }
   if (!registry.hasPattern('pre code')) {
-    registry.registerPattern('pre code', (Code as any).transformPreCode);
+    registry.registerPattern('pre code', (Code as Record<string, unknown>).transformPreCode as (...args: unknown[]) => unknown);
   }
-  
+
   // Register standalone code pattern for complex code blocks
   if (!registry.hasPattern('code.highlight')) {
-    registry.registerPattern('code.highlight', (Code as any).transformCodeHighlight);
+    registry.registerPattern('code.highlight', (Code as Record<string, unknown>).transformCodeHighlight as (...args: unknown[]) => unknown);
   }
 };
 
 // Transform pre + code elements to Code component
-(Code as any).transformPreCode = (element: Element): any => {
+(Code as Record<string, unknown>).transformPreCode = (element: Element): unknown => {
   const codeChild = element.querySelector('code');
   if (!codeChild) return null;
 
@@ -290,7 +295,7 @@ export const Code: SerializableComponent<CodeProps> = createSerializableView<Cod
 };
 
 // Transform highlighted code elements to Code component
-(Code as any).transformCodeHighlight = (element: Element): any => {
+(Code as Record<string, unknown>).transformCodeHighlight = (element: Element): unknown => {
   const language = Array.from(element.classList)
     .find(cls => cls.startsWith('language-'))
     ?.replace('language-', '') || 'text';

package/src/components/blocks/Content.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Content Component - General-purpose content container with data binding support
  *
@@ -14,7 +16,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Paper, Stack, SxProps, Theme, Typography, useTheme } from '@mui/material';
+import { Box, Stack, SxProps, Theme, Typography, useTheme, Paper } from '@mui/material';
 import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import React from 'react';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
@@ -43,7 +45,7 @@ function ContentView({
   const theme = useTheme();
 
   // Mark as QwickApp component
-  (ContentView as any)[QWICKAPP_COMPONENT] = true;
+  (ContentView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Map spacing to padding values
   const getPadding = () => {
@@ -74,7 +76,7 @@ function ContentView({
   };
 
   let Wrapper: React.ElementType = Box;
-  let wrapperProps: Record<string, any> = { ...htmlProps, ...otherProps, sx: commonSx };
+  let wrapperProps: Record<string, unknown> = { ...htmlProps, ...otherProps, sx: commonSx };
   if (variant === 'elevated') {
     Wrapper = Paper;
     wrapperProps = { ...wrapperProps, elevation: 4, sx: { ...commonSx, backgroundColor: theme.palette.background.paper } };
@@ -165,18 +167,21 @@ function ContentView({
 function Content(props: ContentProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<ContentModel>(
+    dataSource || '',
+    restProps as Partial<ContentModel>,
+    ContentModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <ContentView {...restProps} />;
   }
 
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...contentProps } = useDataBinding<ContentModel>(
-    dataSource,
-    restProps as Partial<ContentModel>,
-    ContentModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
+  // Use data binding result
+  const { loading, error, ...contentProps } = bindingResult;
 
   // Show loading state
   if (loading) {

package/src/components/blocks/CoverImageHeader.tsx

@@ -1,11 +1,13 @@
+'use client';
+
 /**
  * CoverImageHeader - Flexible header with optional image, info section, and context menu
- * 
+ *
  * Provides a clean header layout similar to modern app interfaces with:
  * - Optional image/avatar on the left
  * - Info section with overline, title, subtitle, and tags
  * - Context menu with up to 3 visible actions + overflow menu
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
@@ -396,18 +398,21 @@ function ErrorState() {
 function CoverImageHeader(props: CoverImageHeaderProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<CoverImageHeaderModel>(
+    dataSource || '',
+    restProps as Partial<CoverImageHeaderModel>,
+    CoverImageHeaderModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <CoverImageHeaderView {...restProps} />;
   }
 
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...coverImageHeaderProps } = useDataBinding<CoverImageHeaderModel>(
-    dataSource,
-    restProps as Partial<CoverImageHeaderModel>,
-    CoverImageHeaderModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
+  // Use data binding result
+  const { loading, error, ...coverImageHeaderProps } = bindingResult;
 
   // Show loading state
   if (loading) {