@qwickapps/react-framework 1.4.9 → 1.5.1

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,29 +114,45 @@ 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',
     version: '1.0.0',
@@ -150,7 +165,7 @@ 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',
@@ -172,7 +187,7 @@ 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',
     version: '1.0.0',

package/src/components/buttons/Button.tsx

@@ -14,108 +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 {
-  Home,
-  Download,
-  Settings,
-  Dashboard,
-  Info,
-  Help,
-  Add,
-  Edit,
-  Delete,
-  Check,
-  Close,
-  ArrowForward,
-  ArrowBack,
-  Menu,
-  Search,
-  Favorite,
-  Star,
-  Share,
-  CloudUpload,
-  CloudDownload,
-  Save,
-  Send,
-  Email,
-  Phone,
-  Person,
-  Group,
-  Business,
-  ShoppingCart,
-  AttachMoney,
-  Lock,
-  LockOpen,
-  Visibility,
-  VisibilityOff,
-} from '@mui/icons-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';
 
 /**
- * Icon name to Material-UI icon component mapping
- * Used by finalize function to transform icon string names to React components
+ * Re-export getIconComponent from iconMap for backwards compatibility
+ * Other components (Scaffold, ResponsiveMenu, etc.) may import from this file
  */
-const iconRegistry: Record<string, React.ComponentType> = {
-  home: Home,
-  download: Download,
-  clouddownload: CloudDownload,
-  cloudupload: CloudUpload,
-  settings: Settings,
-  dashboard: Dashboard,
-  info: Info,
-  help: Help,
-  add: Add,
-  edit: Edit,
-  delete: Delete,
-  check: Check,
-  close: Close,
-  arrowforward: ArrowForward,
-  arrowback: ArrowBack,
-  menu: Menu,
-  search: Search,
-  favorite: Favorite,
-  star: Star,
-  share: Share,
-  save: Save,
-  send: Send,
-  email: Email,
-  phone: Phone,
-  person: Person,
-  group: Group,
-  business: Business,
-  shoppingcart: ShoppingCart,
-  attachmoney: AttachMoney,
-  lock: Lock,
-  lockopen: LockOpen,
-  visibility: Visibility,
-  visibilityoff: VisibilityOff,
-};
-
-/**
- * Get icon component from icon name string
- * Exported for use by other components (Scaffold, ResponsiveMenu, etc.)
- */
-export function getIconComponent(iconName: string | undefined): React.ReactElement | null {
-  if (!iconName) return null;
-
-  const IconComponent = iconRegistry[iconName.toLowerCase()];
-  if (!IconComponent) {
-    console.warn(`[Button] Icon "${iconName}" not found in registry`);
-    return null;
-  }
-
-  return <IconComponent />;
-}
-
-/**
- * Export icon registry for extension by applications
- */
-export { iconRegistry };
+export { getIconComponent, iconMap } from '../../utils/iconMap';
 
 // Action serialization pattern for button clicks
 export interface ButtonAction {
@@ -140,6 +51,8 @@ export type ButtonProps = ViewProps & Omit<SchemaProps<typeof ButtonModel>, 'ico
   endIcon?: React.ReactNode;
   // Additional runtime-only props
   action?: ButtonAction;
+  // HTML button attributes
+  type?: 'button' | 'submit' | 'reset';
 };
 
 // View component - handles the actual rendering
@@ -263,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;
@@ -294,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);
             }
@@ -387,18 +293,16 @@ export const Button: SerializableComponent<ButtonProps> = createSerializableView
     // Transform icon string names to React icon components
     const transformedProps = { ...props };
 
-    if (typeof (props as any).icon === 'string') {
-      const iconComponent = getIconComponent((props as any).icon);
-      if (iconComponent) {
-        transformedProps.icon = iconComponent;
-      }
+    if (typeof (props as Record<string, unknown>).icon === 'string') {
+      const iconComponent = getIconComponent((props as Record<string, unknown>).icon as string);
+      // Always transform: use the component if found, otherwise clear the string to prevent text rendering
+      transformedProps.icon = iconComponent || undefined;
     }
 
-    if (typeof (props as any).endIcon === 'string') {
-      const endIconComponent = getIconComponent((props as any).endIcon);
-      if (endIconComponent) {
-        transformedProps.endIcon = endIconComponent;
-      }
+    if (typeof (props as Record<string, unknown>).endIcon === 'string') {
+      const endIconComponent = getIconComponent((props as Record<string, unknown>).endIcon as string);
+      // Always transform: use the component if found, otherwise clear the string to prevent text rendering
+      transformedProps.endIcon = endIconComponent || undefined;
     }
 
     return transformedProps;
@@ -406,7 +310,7 @@ export const Button: SerializableComponent<ButtonProps> = createSerializableView
 });
 
 // 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);
@@ -424,7 +328,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');
@@ -445,7 +349,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';
 
@@ -460,7 +364,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;

package/src/components/dialogs/Dialog.tsx

@@ -0,0 +1,126 @@
+/**
+ * Dialog - Themed dialog component that wraps MUI Dialog
+ *
+ * Features:
+ * - Uses QwickApps CSS theme variables
+ * - Consistent styling with other QwickApps components
+ * - Supports all standard MUI Dialog props
+ * - Themed DialogTitle, DialogContent, and DialogActions
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, {} from 'react';
+import {
+  Dialog as MuiDialog,
+  DialogProps as MuiDialogProps,
+  DialogTitle as MuiDialogTitle,
+  DialogContent as MuiDialogContent,
+  DialogActions as MuiDialogActions,
+  DialogContentText as MuiDialogContentText,
+  DialogTitleProps,
+  DialogContentProps,
+  DialogActionsProps,
+  DialogContentTextProps
+} from '@mui/material';
+
+// Re-export MUI Dialog props for convenience
+export type DialogProps = MuiDialogProps;
+
+/**
+ * Themed Dialog component
+ */
+export function Dialog({ children, PaperProps, ...props }: DialogProps) {
+  return (
+    <MuiDialog
+      {...props}
+      PaperProps={{
+        ...PaperProps,
+        sx: {
+          backgroundColor: 'var(--theme-surface)',
+          color: 'var(--theme-text-primary)',
+          borderRadius: 'var(--theme-border-radius, 8px)',
+          ...PaperProps?.sx
+        }
+      }}
+    >
+      {children}
+    </MuiDialog>
+  );
+}
+
+/**
+ * Themed DialogTitle component
+ */
+export function DialogTitle({ children, sx, ...props }: DialogTitleProps) {
+  return (
+    <MuiDialogTitle
+      {...props}
+      sx={{
+        color: 'var(--theme-text-primary)',
+        backgroundColor: 'var(--theme-surface)',
+        borderBottom: '1px solid var(--theme-border)',
+        ...sx
+      }}
+    >
+      {children}
+    </MuiDialogTitle>
+  );
+}
+
+/**
+ * Themed DialogContent component
+ */
+export function DialogContent({ children, sx, ...props }: DialogContentProps) {
+  return (
+    <MuiDialogContent
+      {...props}
+      sx={{
+        color: 'var(--theme-text-primary)',
+        backgroundColor: 'var(--theme-surface)',
+        ...sx
+      }}
+    >
+      {children}
+    </MuiDialogContent>
+  );
+}
+
+/**
+ * Themed DialogActions component
+ */
+export function DialogActions({ children, sx, ...props }: DialogActionsProps) {
+  return (
+    <MuiDialogActions
+      {...props}
+      sx={{
+        backgroundColor: 'var(--theme-surface)',
+        borderTop: '1px solid var(--theme-border)',
+        padding: '16px 24px',
+        ...sx
+      }}
+    >
+      {children}
+    </MuiDialogActions>
+  );
+}
+
+/**
+ * Themed DialogContentText component
+ */
+export function DialogContentText({ children, sx, ...props }: DialogContentTextProps) {
+  return (
+    <MuiDialogContentText
+      {...props}
+      sx={{
+        color: 'var(--theme-text-secondary)',
+        ...sx
+      }}
+    >
+      {children}
+    </MuiDialogContentText>
+  );
+}
+
+// Default export
+export default Dialog;

package/src/components/dialogs/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Dialogs - Themed dialog components
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  DialogContentText
+} from './Dialog';
+
+export type { DialogProps } from './Dialog';