@qwickapps/react-framework 1.4.8 → 1.4.9

package/src/components/buttons/Button.tsx

@@ -16,9 +16,106 @@
 
 import React, { ReactElement } 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';
+
+/**
+ * Icon name to Material-UI icon component mapping
+ * Used by finalize function to transform icon string names to React components
+ */
+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 };
 
 // Action serialization pattern for button clicks
 export interface ButtonAction {
@@ -29,27 +126,28 @@ 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;
-}
+};
 
 // 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 +180,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 +204,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) {
@@ -163,12 +315,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 +330,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,6 +383,26 @@ 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 any).icon === 'string') {
+      const iconComponent = getIconComponent((props as any).icon);
+      if (iconComponent) {
+        transformedProps.icon = iconComponent;
+      }
+    }
+
+    if (typeof (props as any).endIcon === 'string') {
+      const endIconComponent = getIconComponent((props as any).endIcon);
+      if (endIconComponent) {
+        transformedProps.endIcon = endIconComponent;
+      }
+    }
+
+    return transformedProps;
+  }
 });
 
 // Register HTML patterns that Button component can handle

package/src/components/menu/MenuItem.tsx

@@ -13,8 +13,8 @@ export interface MenuItem {
   id: string;
   /** Display label for the menu item */
   label: string;
-  /** Icon component or JSX element to display */
-  icon?: React.ReactNode;
+  /** Icon name (string) or icon component (React.ReactNode) to display */
+  icon?: string | React.ReactNode;
   /** Click handler for the menu item */
   onClick?: () => void;
   /** External link URL (if this is a link) */

package/src/contexts/ThemeContext.tsx

@@ -242,7 +242,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     const surfaceMain = getCSSCustomProperty('--theme-surface') || (isDark ? '#1e1e1e' : '#ffffff');
 
     const textPrimary = getCSSCustomProperty('--theme-text-primary') || (isDark ? '#ffffff' : '#000000');
-    const textSecondary = getCSSCustomProperty('--theme-text-secondary') || (isDark ? '#000000' : '#ffffff');
+    const textSecondary = getCSSCustomProperty('--theme-text-secondary') || (isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)');
     const textDisabled = getCSSCustomProperty('--theme-on-disabled') || (isDark ? 'rgba(255, 255, 255, 0.38)' : 'rgba(0, 0, 0, 0.38)');
 
     return createTheme({

package/src/schemas/ButtonSchema.ts

@@ -33,6 +33,17 @@ export class ButtonModel extends ViewSchema {
   @IsIn(['primary', 'secondary', 'outlined', 'text', 'contained'])
   variant?: 'primary' | 'secondary' | 'outlined' | 'text' | 'contained';
 
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Button Color',
+    description: 'Color theme for the button (overrides variant color)'
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['primary', 'secondary', 'error', 'warning', 'info', 'success'])
+  color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+
   @Field({ defaultValue: 'medium' })
   @Editor({
     field_type: FieldType.SELECT,
@@ -95,6 +106,28 @@ export class ButtonModel extends ViewSchema {
   @IsOptional()
   @IsBoolean()
   fullWidth?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Icon',
+    description: 'Icon name to display before button text (e.g., "home", "download", "settings")',
+    placeholder: 'Icon name...'
+  })
+  @IsOptional()
+  @IsString()
+  icon?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'End Icon',
+    description: 'Icon name to display after button text',
+    placeholder: 'Icon name...'
+  })
+  @IsOptional()
+  @IsString()
+  endIcon?: string;
 }
 
 export default ButtonModel;

package/src/schemas/ViewSchema.ts

@@ -516,7 +516,7 @@ export class ViewSchema extends Model {
     field_type: FieldType.TEXTAREA,
     label: 'Click Handler',
     description: 'JavaScript function for click events',
-    placeholder: 'function(event) { console.log("clicked"); }'
+    placeholder: 'function(event) { console.debug("clicked"); }'
   })
   @IsOptional()
   @IsString()

package/src/schemas/transformers/ComponentTransformer.ts

@@ -85,7 +85,6 @@ export class ComponentTransformer {
       console.warn(`Component '${tagName}' is already registered. Overwriting existing registration.`);
     }
 
-    console.log(`TEST: Registering component: ${tagName} (version ${version})`);
     componentRegistry.set(tagName, componentClass);
 
     // Register HTML patterns if component supports them
@@ -210,14 +209,10 @@ export class ComponentTransformer {
       if (typeof componentType === 'function') {
         const tagName = ComponentTransformer.findTagNameForComponent(componentType);
         if (tagName) {
-          console.log(`TEST: Serializing component instance of ${tagName}:`, element.props);
           const componentClass = componentRegistry.get(tagName)!;
 
           let serializedData: any = null;
-          console.log(`TEST: Element type:`, typeof (element as any).toJson);
-          console.log(`TEST: Component type:`, typeof (componentClass as any).toJson);
           if (typeof (componentClass as any).toJson === 'function') {
-            console.log(`TEST: Serializing via component toJson method ${tagName}:`, element.props);
             serializedData = (componentClass as any).toJson(element.props);
           }
 
@@ -231,7 +226,7 @@ export class ComponentTransformer {
               ...key,
               ...serializedData
             };
-            console.log(`TEST: Serialized component ${tagName}:`, result);
+            
             return result;
           }
         } else if (strictMode) {
@@ -251,8 +246,7 @@ export class ComponentTransformer {
       version: FALLBACK_VERSION,
       data: ReactNodeTransformer.serialize(node)
     };
-    console.log(`TEST: Serialized unregistered node as ${FALLBACK_TAG}:`, result, node);
-    console.log(`TEST: Component Registry:`, componentRegistry);
+    
     return result;
   }
 

package/src/schemas/transformers/ReactNodeTransformer.ts

@@ -45,7 +45,6 @@ export class ReactNodeTransformer {
     // Handle React elements
     if (isValidElement(node)) {
       const element = node as ReactElement;
-      console.log(`TEST: isValidElement:`, element);
 
       const comp: any = element.type;
       const rawName =
@@ -176,7 +175,7 @@ export class ReactNodeTransformer {
       // Handle HTML elements
       if (typeof elementType === 'string') {
         const deserializedProps = ReactNodeTransformer.deserializeProps(props);
-        console.log(`TEST: Create Element:`, elementType, deserializedProps);
+        
         return createElement(elementType, { key, ...deserializedProps });
       }
     } catch (error) {

package/src/stories/Article.stories.tsx

@@ -58,7 +58,7 @@ function MyApp() {
  <ProductCard dataSource="products.featured" />
 &lt;/QwickApp&gt;</code></pre>
 
- <p>You can also use inline code like <code>console.log('hello')</code> within paragraphs.</p>
+ <p>You can also use inline code like <code>console.debug('hello')</code> within paragraphs.</p>
  
  <h2>Complex Multi-line Code</h2>
  <code>

package/src/stories/ChoiceInputField.stories.tsx

@@ -198,12 +198,12 @@ function InteractiveChoiceExample({
  const newOptions = [...options];
  newOptions[optionIndex] = value;
  setOptions(newOptions);
- console.log('Option changed:', { optionIndex, value, allOptions: newOptions });
+ console.debug('Option changed:', { optionIndex, value, allOptions: newOptions });
  };
  
  const handleAddOption = () => {
  setOptions([...options, '']);
- console.log('Added new option, total:', options.length + 1);
+ console.debug('Added new option, total:', options.length + 1);
  };
  
  return (