@qwickapps/react-framework 1.4.8 → 1.5.0

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',

package/src/components/blocks/Text.tsx

@@ -19,7 +19,6 @@ import { Typography } from '@mui/material';
 import React from 'react';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
-import { ComponentTransformer } from '../../schemas/transformers/ComponentTransformer';
 import TextSchema from '../../schemas/TextSchema';
 import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
 
@@ -90,7 +89,7 @@ function TextView({
     <Typography
       {...restProps}
       variant={variant}
-      color={color as any}
+      color={color as 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error'}
       align={align}
       component={component}
       noWrap={noWrap}
@@ -115,32 +114,49 @@ export const Text: SerializableComponent<TextProps> = createSerializableView<Tex
   childrenStrategy: { mode: 'content-prop', propName: 'content' }
 });
 
+// Type for pattern registry with basic methods
+interface PatternRegistry {
+  hasPattern(pattern: string): boolean;
+  registerPattern(pattern: string, handler: (element: Element) => unknown): void;
+}
+
+// Type for Text component with pattern handlers
+interface TextComponentWithPatterns {
+  registerPatternHandlers: (registry: PatternRegistry) => void;
+  transformParagraph: (element: Element) => unknown;
+  transformHeading: (element: Element, tagName: string) => unknown;
+  transformSpan: (element: Element) => unknown;
+}
+
 // Register HTML patterns that Text component can handle
-(Text as any).registerPatternHandlers = (registry: any): void => {
+(Text as unknown as TextComponentWithPatterns).registerPatternHandlers = (registry: PatternRegistry): void => {
+  const textComponent = Text as unknown as TextComponentWithPatterns;
+
   // Register paragraph elements
   if (!registry.hasPattern('p')) {
-    registry.registerPattern('p', (Text as any).transformParagraph);
+    registry.registerPattern('p', textComponent.transformParagraph);
   }
-  
+
   // Register heading elements
   const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
   headings.forEach(heading => {
     if (!registry.hasPattern(heading)) {
-      registry.registerPattern(heading, (element: Element) => (Text as any).transformHeading(element, heading));
+      registry.registerPattern(heading, (element: Element) => textComponent.transformHeading(element, heading));
     }
   });
-  
+
   // Register span elements
   if (!registry.hasPattern('span')) {
-    registry.registerPattern('span', (Text as any).transformSpan);
+    registry.registerPattern('span', textComponent.transformSpan);
   }
 };
 
 // Transform paragraph elements to Text component
-(Text as any).transformParagraph = (element: Element): any => {
+(Text as unknown as TextComponentWithPatterns).transformParagraph = (element: Element): unknown => {
   return {
     tagName: 'Text',
-    props: {
+    version: '1.0.0',
+    data: {
       variant: 'body1',
       component: 'p',
       content: element.textContent || ''
@@ -149,10 +165,10 @@ export const Text: SerializableComponent<TextProps> = createSerializableView<Tex
 };
 
 // Transform heading elements to Text component
-(Text as any).transformHeading = (element: Element, tagName: string): any => {
+(Text as unknown as TextComponentWithPatterns).transformHeading = (element: Element, tagName: string): unknown => {
   const variantMap: { [key: string]: string } = {
     'h1': 'h1',
-    'h2': 'h2', 
+    'h2': 'h2',
     'h3': 'h3',
     'h4': 'h4',
     'h5': 'h5',
@@ -161,7 +177,8 @@ export const Text: SerializableComponent<TextProps> = createSerializableView<Tex
 
   return {
     tagName: 'Text',
-    props: {
+    version: '1.0.0',
+    data: {
       variant: variantMap[tagName] || 'h4',
       component: tagName,
       content: element.textContent || ''
@@ -170,10 +187,11 @@ export const Text: SerializableComponent<TextProps> = createSerializableView<Tex
 };
 
 // Transform span elements to Text component
-(Text as any).transformSpan = (element: Element): any => {
+(Text as unknown as TextComponentWithPatterns).transformSpan = (element: Element): unknown => {
   return {
     tagName: 'Text',
-    props: {
+    version: '1.0.0',
+    data: {
       variant: 'body2',
       component: 'span',
       content: element.textContent || ''

package/src/components/buttons/Button.tsx

@@ -14,11 +14,19 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { Button as MuiButton, ButtonProps as MuiButtonProps, CircularProgress } from '@mui/material';
 import ButtonModel from '../../schemas/ButtonSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
+import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
+import { getIconComponent } from '../../utils/iconMap';
+
+/**
+ * Re-export getIconComponent from iconMap for backwards compatibility
+ * Other components (Scaffold, ResponsiveMenu, etc.) may import from this file
+ */
+export { getIconComponent, iconMap } from '../../utils/iconMap';
 
 // Action serialization pattern for button clicks
 export interface ButtonAction {
@@ -29,27 +37,30 @@ export interface ButtonAction {
   customHandler?: string;
 }
 
-export interface ButtonProps extends ViewProps {
-  // Component-specific props from ButtonModel
-  label?: string;
-  variant?: 'primary' | 'secondary' | 'outlined' | 'text' | 'contained';
-  buttonSize?: 'small' | 'medium' | 'large';
-  href?: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  disabled?: boolean;
-  loading?: boolean;
-  fullWidth?: boolean;
-  // Additional props for enhanced functionality
+/**
+ * Props interface for Button component
+ * Uses SchemaProps<typeof ButtonSchema> for schema-driven typing
+ * Icons are transformed from strings to React components by finalize function
+ *
+ * Note: We omit 'icon' and 'endIcon' from schema props because they are strings in the schema
+ * but get transformed to ReactElements by the finalize function.
+ */
+export type ButtonProps = ViewProps & Omit<SchemaProps<typeof ButtonModel>, 'icon' | 'endIcon'> & {
+  // Runtime props (transformed from schema strings by finalize function)
   icon?: React.ReactNode;
   endIcon?: React.ReactNode;
+  // Additional runtime-only props
   action?: ButtonAction;
-}
+  // HTML button attributes
+  type?: 'button' | 'submit' | 'reset';
+};
 
 // View component - handles the actual rendering
 const ButtonView = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     label,
     variant = 'primary',
+    color,
     buttonSize = 'medium',
     icon,
     endIcon,
@@ -82,8 +93,14 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
     }
   };
 
-  // Map our variants to MUI colors
-  const getMuiColor = (): MuiButtonProps['color'] => {
+  // Get theme color name - prioritize explicit color prop over variant-derived color
+  const getThemeColorName = (): string => {
+    // If color prop is explicitly provided, use it
+    if (color) {
+      return color;
+    }
+
+    // Otherwise derive from variant
     switch (variant) {
       case 'primary':
         return 'primary';
@@ -100,6 +117,54 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
     }
   };
 
+  // Get CSS theme variable styles based on variant and color
+  const getColorStyles = () => {
+    const muiVariant = getMuiVariant();
+    const colorName = getThemeColorName();
+
+    // For contained buttons: use solid background
+    if (muiVariant === 'contained') {
+      return {
+        backgroundColor: `var(--theme-${colorName})`,
+        color: `var(--theme-on-${colorName})`,
+        '&:hover': {
+          backgroundColor: `var(--theme-${colorName}-dark)`,
+        },
+        '&.Mui-disabled': {
+          backgroundColor: 'var(--theme-text-disabled)',
+          color: 'var(--theme-on-surface)',
+        }
+      };
+    }
+
+    // For outlined buttons: border and text color
+    if (muiVariant === 'outlined') {
+      return {
+        borderColor: `var(--theme-${colorName})`,
+        color: `var(--theme-${colorName})`,
+        '&:hover': {
+          borderColor: `var(--theme-${colorName}-dark)`,
+          backgroundColor: `var(--theme-${colorName}-light)`,
+        },
+        '&.Mui-disabled': {
+          borderColor: 'var(--theme-border-main)',
+          color: 'var(--theme-text-disabled)',
+        }
+      };
+    }
+
+    // For text buttons: just text color
+    return {
+      color: `var(--theme-${colorName})`,
+      '&:hover': {
+        backgroundColor: `var(--theme-${colorName}-light)`,
+      },
+      '&.Mui-disabled': {
+        color: 'var(--theme-text-disabled)',
+      }
+    };
+  };
+
   // Handle action serialization pattern for onClick
   const handleActionClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     if (action) {
@@ -111,15 +176,8 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
             if (action.target === '_blank') {
               window.open(action.url, '_blank', 'noopener,noreferrer');
             } else {
-              // Try to use React Router navigation if available
-              try {
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                const navigate = require('react-router-dom').useNavigate();
-                navigate(action.url);
-              } catch {
-                // Fallback to regular navigation
-                window.location.href = action.url;
-              }
+              // Fallback to regular navigation
+              window.location.href = action.url;
             }
           }
           break;
@@ -142,7 +200,7 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
         case 'custom':
           if (action.customHandler && typeof window !== 'undefined') {
             // Look for custom handler function on window
-            const handler = (window as any)[action.customHandler];
+            const handler = (window as Record<string, unknown>)[action.customHandler];
             if (typeof handler === 'function') {
               handler(event);
             }
@@ -163,12 +221,13 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
   // Base button props
   const baseProps: Partial<MuiButtonProps> = {
     variant: getMuiVariant(),
-    color: getMuiColor(),
     size: buttonSize,
     disabled: disabled || loading,
     fullWidth,
     ...restProps,
     sx: {
+      // Apply CSS theme variable colors
+      ...getColorStyles(),
       // Ensure consistent text transform
       textTransform: 'none',
       // Loading state adjustments
@@ -177,6 +236,7 @@ const ButtonView = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
           marginRight: 1,
         },
       }),
+      // Merge user-provided sx prop last to allow overrides
       ...(restProps.sx || {}),
     },
     startIcon: loading ? (
@@ -229,10 +289,30 @@ export const Button: SerializableComponent<ButtonProps> = createSerializableView
   role: 'view',
   View: ButtonView,
   // Button component uses default react-children strategy for potential child content
+  finalize: (props: ButtonProps) => {
+    // Transform icon string names to React icon components
+    const transformedProps = { ...props };
+
+    if (typeof (props as Record<string, unknown>).icon === 'string') {
+      const iconComponent = getIconComponent((props as Record<string, unknown>).icon as string);
+      if (iconComponent) {
+        transformedProps.icon = iconComponent;
+      }
+    }
+
+    if (typeof (props as Record<string, unknown>).endIcon === 'string') {
+      const endIconComponent = getIconComponent((props as Record<string, unknown>).endIcon as string);
+      if (endIconComponent) {
+        transformedProps.endIcon = endIconComponent;
+      }
+    }
+
+    return transformedProps;
+  }
 });
 
 // Register HTML patterns that Button component can handle
-(Button as any).registerPatternHandlers = (registry: any): void => {
+(Button as Record<string, unknown>).registerPatternHandlers = (registry: Record<string, (...args: unknown[]) => unknown>): void => {
   // Register button elements
   if (!registry.hasPattern('button')) {
     registry.registerPattern('button', transformButton);
@@ -250,7 +330,7 @@ export const Button: SerializableComponent<ButtonProps> = createSerializableView
 };
 
 // Transform button elements to Button component
-function transformButton(element: Element): any {
+function transformButton(element: Element): unknown {
   const variant = element.getAttribute('data-variant') || 
                  (element.className.includes('btn-primary') ? 'primary' : 
                   element.className.includes('btn-outlined') ? 'outlined' : 'secondary');
@@ -271,7 +351,7 @@ function transformButton(element: Element): any {
 }
 
 // Transform input type="button" elements to Button component
-function transformInputButton(element: Element): any {
+function transformInputButton(element: Element): unknown {
   const disabled = element.hasAttribute('disabled');
   const value = element.getAttribute('value') || 'Button';
 
@@ -286,7 +366,7 @@ function transformInputButton(element: Element): any {
 }
 
 // Transform input type="submit" elements to Button component
-function transformSubmitButton(element: Element): any {
+function transformSubmitButton(element: Element): unknown {
   const disabled = element.hasAttribute('disabled');
   const value = element.getAttribute('value') || 'Submit';
 

package/src/components/buttons/PaletteSwitcher.tsx

@@ -207,18 +207,21 @@ function PaletteSwitcherView({
 function PaletteSwitcher(props: PaletteSwitcherProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<PaletteSwitcherModel>(
+    dataSource || '',
+    restProps as Partial<PaletteSwitcherModel>,
+    PaletteSwitcherModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // 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 }
-  );
+  // Use data binding result
+  const { loading, error, ...paletteSwitcherProps } = bindingResult;
 
   // Show loading state
   if (loading) {
@@ -263,6 +266,6 @@ function PaletteSwitcher(props: PaletteSwitcherProps) {
 }
 
 // Mark as QwickApp component
-(PaletteSwitcher as any)[QWICKAPP_COMPONENT] = true;
+(PaletteSwitcher as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
 export default PaletteSwitcher;

package/src/components/buttons/ThemeSwitcher.tsx

@@ -140,7 +140,7 @@ function ThemeSwitcherView({
   }
 
   const themeSwitcher = (
-    <>
+    <span suppressHydrationWarning>
       <IconButton
         {...htmlProps}
         onClick={handleClick}
@@ -150,6 +150,7 @@ function ThemeSwitcherView({
         aria-controls={open ? 'theme-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
+        suppressHydrationWarning
         sx={{
           color: 'var(--theme-on-surface, inherit)',
           '&:hover': {
@@ -164,7 +165,7 @@ function ThemeSwitcherView({
       >
         {getCurrentIcon()}
       </IconButton>
-      
+
       <Menu
         id="theme-menu"
         anchorEl={anchorEl}
@@ -179,7 +180,7 @@ function ThemeSwitcherView({
         transformOrigin={getMenuTransformOrigin()}
       >
         {showLightTheme && (
-          <MenuItem 
+          <MenuItem
             onClick={() => handleThemeSelect('light')}
             selected={currentTheme === 'light'}
           >
@@ -189,9 +190,9 @@ function ThemeSwitcherView({
             <ListItemText>Light</ListItemText>
           </MenuItem>
         )}
-        
+
         {showDarkTheme && (
-          <MenuItem 
+          <MenuItem
             onClick={() => handleThemeSelect('dark')}
             selected={currentTheme === 'dark'}
           >
@@ -201,9 +202,9 @@ function ThemeSwitcherView({
             <ListItemText>Dark</ListItemText>
           </MenuItem>
         )}
-        
+
         {showSystemTheme && (
-          <MenuItem 
+          <MenuItem
             onClick={() => handleThemeSelect('system')}
             selected={currentTheme === 'system'}
           >
@@ -214,7 +215,7 @@ function ThemeSwitcherView({
           </MenuItem>
         )}
       </Menu>
-    </>
+    </span>
   );
 
   return showTooltip ? (
@@ -231,18 +232,21 @@ function ThemeSwitcherView({
 function ThemeSwitcher(props: ThemeSwitcherProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<ThemeSwitcherModel>(
+    dataSource || '',
+    restProps as Partial<ThemeSwitcherModel>,
+    ThemeSwitcherModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <ThemeSwitcherView {...restProps} />;
   }
 
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...themeSwitcherProps } = useDataBinding<ThemeSwitcherModel>(
-    dataSource,
-    restProps as Partial<ThemeSwitcherModel>,
-    ThemeSwitcherModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
+  // Use data binding result
+  const { loading, error, ...themeSwitcherProps } = bindingResult;
 
   // Show loading state
   if (loading) {
@@ -278,6 +282,6 @@ function ThemeSwitcher(props: ThemeSwitcherProps) {
 }
 
 // Mark as QwickApp component
-(ThemeSwitcher as any)[QWICKAPP_COMPONENT] = true;
+(ThemeSwitcher as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
 export default ThemeSwitcher;