@qwickapps/react-framework 1.7.0 → 1.8.0

package/dist/index.js

@@ -21103,6 +21103,7 @@ function ProductCardView({
   showImage = true,
   showTechnologies = true,
   maxFeaturesCompact = 3,
+  onAddToCart,
   ...restProps
 }) {
   const {
@@ -21112,6 +21113,16 @@ function ProductCardView({
   const theme = material.useTheme();
   // Return null if no product data
   if (!product) return null;
+  // Detect product type: e-commerce products have price field
+  const isEcommerce = product.price !== undefined;
+  // E-commerce helpers
+  const formatPrice = price => {
+    return `$${price.toFixed(2)}`;
+  };
+  const calculateDiscount = () => {
+    if (!product.price || !product.salePrice) return 0;
+    return Math.round((product.price - product.salePrice) / product.price * 100);
+  };
   const getStatusIcon = status => {
     switch (status) {
       case 'launched':
@@ -21142,11 +21153,26 @@ function ProductCardView({
   const handleProductClick = () => {
     if (onClick) {
       onClick();
-    } else if (product.status === 'launched' && product.url?.startsWith('http')) {
-      window.open(product.url, '_blank', 'noopener,noreferrer');
     }
+    // Note: Navigation is handled by parent wrapper (e.g., Next.js Link in BlockRenderer)
+    // For standalone usage, provide onClick prop with navigation logic
   };
   const getDefaultActions = () => {
+    // E-commerce products get "Add to Cart" action
+    if (isEcommerce) {
+      return [{
+        id: 'add-to-cart',
+        label: 'Add to Cart',
+        variant: 'contained',
+        color: 'primary',
+        onClick: () => {
+          if (onAddToCart && product) {
+            onAddToCart(product);
+          }
+        }
+      }];
+    }
+    // Software products get status-based actions
     const actions = [{
       id: 'primary',
       label: product.status === 'launched' ? 'Learn More' : product.status === 'beta' ? 'Try Beta' : product.status === 'coming-soon' ? 'Coming Soon' : product.status,
@@ -21230,7 +21256,7 @@ function ProductCardView({
       })]
     });
   })();
-  const technologiesSectionElement = !showTechnologies || variant === 'compact' ? null : jsxRuntime.jsxs(material.Box, {
+  const technologiesSectionElement = !showTechnologies || variant === 'compact' || !product.technologies ? null : jsxRuntime.jsxs(material.Box, {
     sx: {
       mb: 3
     },
@@ -21264,26 +21290,25 @@ function ProductCardView({
     className: styleProps.className || "product-card",
     onClick: htmlProps.onClick || (variant === 'compact' ? handleProductClick : undefined),
     sx: {
-      p: 3,
-      // padding="large" equivalent
-      borderRadius: 3,
-      border: '1px solid',
-      borderColor: 'divider',
-      cursor: variant === 'compact' ? 'pointer' : 'default',
-      position: 'relative',
       height: '100%',
       display: 'flex',
       flexDirection: 'column',
       backgroundColor: 'background.paper',
-      transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+      borderRadius: isEcommerce ? 2 : 3,
+      border: '1px solid',
+      borderColor: 'divider',
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: variant === 'compact' ? 'pointer' : 'default',
+      transition: 'transform 0.2s ease, box-shadow 0.2s ease',
       '&:hover': variant === 'compact' ? {
         transform: 'translateY(-4px)',
-        boxShadow: 8
+        boxShadow: 3
       } : {},
       ...(styleProps.sx || {})
     },
     style: styleProps.style,
-    children: [jsxRuntime.jsx(material.Chip, {
+    children: [!isEcommerce && jsxRuntime.jsx(material.Chip, {
       icon: getStatusIcon(product.status),
       label: product.status.replace('-', ' '),
       sx: {
@@ -21302,16 +21327,14 @@ function ProductCardView({
           color: 'white'
         }
       }
-    }), showImage && product.image && jsxRuntime.jsx(material.Box, {
+    }), showImage && product.image && jsxRuntime.jsxs(material.Box, {
       sx: {
         width: '100%',
-        height: variant === 'detailed' ? 240 : 200,
-        mb: 2.5,
-        borderRadius: 1,
-        overflow: 'hidden',
-        backgroundColor: 'divider'
+        height: isEcommerce ? 280 : variant === 'detailed' ? 240 : 200,
+        backgroundColor: 'divider',
+        position: 'relative'
       },
-      children: jsxRuntime.jsx(material.Box, {
+      children: [jsxRuntime.jsx(material.Box, {
         component: "img",
         src: product.image,
         alt: product.name,
@@ -21328,14 +21351,153 @@ function ProductCardView({
             target.parentElement.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: white; font-size: 1.5rem; font-weight: bold;">${product.name}</div>`;
           }
         }
-      })
+      }), isEcommerce && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsxs(material.Box, {
+          sx: {
+            position: 'absolute',
+            top: 12,
+            left: 12,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5
+          },
+          children: [product.isNew && jsxRuntime.jsx(material.Chip, {
+            label: "NEW",
+            sx: {
+              backgroundColor: 'primary.main',
+              color: 'white',
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              height: '24px',
+              px: 1
+            }
+          }), product.featured && jsxRuntime.jsx(material.Chip, {
+            label: "POPULAR",
+            sx: {
+              backgroundColor: 'warning.main',
+              color: 'white',
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              height: '24px',
+              px: 1
+            }
+          })]
+        }), jsxRuntime.jsx(material.Box, {
+          sx: {
+            position: 'absolute',
+            top: 12,
+            right: 12,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5
+          },
+          children: product.salePrice && product.price && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(material.Chip, {
+              label: "ON SALE",
+              sx: {
+                backgroundColor: 'error.main',
+                color: 'white',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                height: '24px',
+                px: 1
+              }
+            }), jsxRuntime.jsx(material.Chip, {
+              label: `-${calculateDiscount()}%`,
+              sx: {
+                backgroundColor: 'error.dark',
+                color: 'white',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                height: '24px',
+                px: 1
+              }
+            })]
+          })
+        })]
+      })]
     }), jsxRuntime.jsxs(material.Box, {
       sx: {
         flex: 1,
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        p: isEcommerce ? 2 : 3
       },
-      children: [jsxRuntime.jsxs(material.Box, {
+      children: [isEcommerce ? (/* E-commerce product info */
+      jsxRuntime.jsxs(material.Box, {
+        children: [product.category && jsxRuntime.jsx(material.Typography, {
+          variant: "caption",
+          sx: {
+            mb: 0.5,
+            color: 'text.secondary',
+            display: 'block'
+          },
+          children: product.category
+        }), jsxRuntime.jsx(material.Typography, {
+          variant: "h6",
+          component: "h3",
+          sx: {
+            mb: 1,
+            fontSize: '1rem',
+            fontWeight: 500,
+            lineHeight: 1.3,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical'
+          },
+          children: product.name
+        }), product.rating !== undefined && product.rating > 0 && jsxRuntime.jsxs(material.Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            mb: 1
+          },
+          children: [jsxRuntime.jsx(material.Rating, {
+            value: product.rating,
+            readOnly: true,
+            size: "small",
+            precision: 0.5,
+            emptyIcon: jsxRuntime.jsx(Star, {
+              style: {
+                opacity: 0.3
+              },
+              fontSize: "inherit"
+            })
+          }), product.reviewCount !== undefined && product.reviewCount > 0 && jsxRuntime.jsxs(material.Typography, {
+            variant: "caption",
+            sx: {
+              color: 'text.secondary'
+            },
+            children: ["(", product.reviewCount, ")"]
+          })]
+        }), jsxRuntime.jsxs(material.Box, {
+          sx: {
+            mt: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1
+          },
+          children: [jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
+            sx: {
+              fontWeight: 600,
+              color: product.salePrice ? 'primary.main' : 'inherit'
+            },
+            children: formatPrice(product.salePrice || product.price)
+          }), product.salePrice && jsxRuntime.jsx(material.Typography, {
+            variant: "body2",
+            sx: {
+              color: 'text.secondary',
+              textDecoration: 'line-through'
+            },
+            children: formatPrice(product.price)
+          })]
+        })]
+      })) : (/* Software product info */
+      jsxRuntime.jsxs(material.Box, {
         sx: {
           mb: 3
         },
@@ -21367,7 +21529,7 @@ function ProductCardView({
           },
           children: variant === 'detailed' ? product.description : product.shortDescription || product.description
         })]
-      }), product.features && product.features.length > 0 && featuresListElement, product.technologies && product.technologies.length > 0 && technologiesSectionElement, jsxRuntime.jsx(material.Box, {
+      })), !isEcommerce && product.features && product.features.length > 0 && featuresListElement, !isEcommerce && product.technologies && product.technologies.length > 0 && technologiesSectionElement, jsxRuntime.jsx(material.Box, {
         sx: {
           display: 'flex',
           gap: 1.5,
@@ -21380,7 +21542,12 @@ function ProductCardView({
           variant: action.variant || 'contained',
           // color={action.color || 'primary'}
           disabled: action.disabled,
-          onClick: action.onClick,
+          onClick: e => {
+            // Prevent Link navigation when clicking button (e.g., Add to Cart)
+            e.stopPropagation();
+            e.preventDefault();
+            action.onClick();
+          },
           ...(variant === 'compact' && {
             fullWidth: true
           }),
@@ -21745,11 +21912,10 @@ function ImageGalleryView({
   if (variant === 'grid') {
     return jsxRuntime.jsxs(material.Box, {
       ...restProps,
-      children: [jsxRuntime.jsx(material.Grid, {
-        container: true,
-        spacing: 2,
-        children: displayImages.map((image, index) => jsxRuntime.jsx(material.Grid, {
-          item: true,
+      children: [jsxRuntime.jsx(GridLayout, {
+        columns: 4,
+        spacing: "medium",
+        children: displayImages.map((image, index) => jsxRuntime.jsx(GridCell, {
           xs: 6,
           sm: 4,
           md: 3,
@@ -21809,6 +21975,21 @@ function OptionSelectorView({
   label = 'Select Option',
   dataSource,
   bindingOptions,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleOptionClick = React.useCallback((optionId, available) => {
@@ -23037,6 +23218,21 @@ function FormFieldView({
   startAdornment,
   endAdornment,
   inputProps,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const fieldId = React.useId();
@@ -23133,6 +23329,21 @@ function FormSelectView({
   fullWidth = true,
   size = 'small',
   placeholder,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleChange = e => {
@@ -23207,6 +23418,21 @@ function FormCheckboxView({
   helperText,
   required = false,
   disabled = false,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleChange = e => {

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "palettes": [
     {
       "id": "default",
@@ -8,11 +8,11 @@
       "description": "Classic blue and neutral color scheme - the original QwickApps palette",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-default.1.7.0.css",
+      "version": "1.8.0",
+      "file": "palette-default.1.8.0.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.7.0.min.css",
+      "fileMinified": "palette-default.1.8.0.min.css",
       "fileLatest": "palette-default.latest.css",
       "fileLatestMinified": "palette-default.latest.min.css"
     },
@@ -22,11 +22,11 @@
       "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-autumn.1.7.0.css",
+      "version": "1.8.0",
+      "file": "palette-autumn.1.8.0.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.7.0.min.css",
+      "fileMinified": "palette-autumn.1.8.0.min.css",
       "fileLatest": "palette-autumn.latest.css",
       "fileLatestMinified": "palette-autumn.latest.min.css"
     },
@@ -36,11 +36,11 @@
       "description": "Sophisticated teal, bronze, and navy - perfect for premium retail and fashion brands",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-boutique.1.7.0.css",
+      "version": "1.8.0",
+      "file": "palette-boutique.1.8.0.css",
       "primaryColor": "#3ca6b6",
       "inlined": false,
-      "fileMinified": "palette-boutique.1.7.0.min.css",
+      "fileMinified": "palette-boutique.1.8.0.min.css",
       "fileLatest": "palette-boutique.latest.css",
       "fileLatestMinified": "palette-boutique.latest.min.css"
     },
@@ -50,11 +50,11 @@
       "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-cosmic.1.7.0.css",
+      "version": "1.8.0",
+      "file": "palette-cosmic.1.8.0.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.7.0.min.css",
+      "fileMinified": "palette-cosmic.1.8.0.min.css",
       "fileLatest": "palette-cosmic.latest.css",
       "fileLatestMinified": "palette-cosmic.latest.min.css"
     },
@@ -64,11 +64,11 @@
       "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-ocean.1.7.0.css",
+      "version": "1.8.0",
+      "file": "palette-ocean.1.8.0.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.7.0.min.css",
+      "fileMinified": "palette-ocean.1.8.0.min.css",
       "fileLatest": "palette-ocean.latest.css",
       "fileLatestMinified": "palette-ocean.latest.min.css"
     },
@@ -78,11 +78,11 @@
       "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-spring.1.7.0.css",
+      "version": "1.8.0",
+      "file": "palette-spring.1.8.0.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.7.0.min.css",
+      "fileMinified": "palette-spring.1.8.0.min.css",
       "fileLatest": "palette-spring.latest.css",
       "fileLatestMinified": "palette-spring.latest.min.css"
     },
@@ -92,11 +92,11 @@
       "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-winter.1.7.0.css",
+      "version": "1.8.0",
+      "file": "palette-winter.1.8.0.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.7.0.min.css",
+      "fileMinified": "palette-winter.1.8.0.min.css",
       "fileLatest": "palette-winter.latest.css",
       "fileLatestMinified": "palette-winter.latest.min.css"
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/blocks/ImageGallery.tsx

@@ -29,7 +29,8 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { Box, IconButton, Modal, Grid, Skeleton } from '@mui/material';
+import { Box, IconButton, Modal, Skeleton } from '@mui/material';
+import { GridLayout, GridCell } from '../layout';
 import CloseIcon from '@mui/icons-material/Close';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
@@ -409,9 +410,9 @@ function ImageGalleryView({
   if (variant === 'grid') {
     return (
       <Box {...restProps}>
-        <Grid container spacing={2}>
+        <GridLayout columns={4} spacing="medium">
           {displayImages.map((image, index) => (
-            <Grid item xs={6} sm={4} md={3} key={index}>
+            <GridCell xs={6} sm={4} md={3} key={index}>
               <Box
                 onClick={() => {
                   setSelectedIndex(index);
@@ -441,9 +442,9 @@ function ImageGalleryView({
                   }}
                 />
               </Box>
-            </Grid>
+            </GridCell>
           ))}
-        </Grid>
+        </GridLayout>
         {renderZoomModal()}
       </Box>
     );

package/src/components/blocks/OptionSelector.tsx

@@ -123,6 +123,21 @@ function OptionSelectorView({
   label = 'Select Option',
   dataSource,
   bindingOptions,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }: OptionSelectorProps) {
   const handleOptionClick = useCallback((optionId: string, available: boolean) => {
@@ -226,14 +241,14 @@ function OptionSelectorView({
   }
 
   // Buttons/Grid variant with visual modes
-  const getLayoutStyles = () => {
+  const getLayoutStyles = (): React.CSSProperties => {
     if (variant === 'grid') {
       const minWidth = displayMode === 'text' ? 60 : sizeInPx + 16;
       return {
         display: 'grid',
         gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}px, 1fr))`,
         gap: displayMode === 'text' ? 1 : 2,
-      };
+      } as React.CSSProperties;
     }
 
     return {
@@ -241,7 +256,7 @@ function OptionSelectorView({
       flexDirection: layout === 'vertical' ? 'column' : 'row',
       flexWrap: layout === 'wrap' ? 'wrap' : 'nowrap',
       gap: 1,
-    };
+    } as React.CSSProperties;
   };
 
   return (