@mgonza02/goal-image-gallery 1.0.9 → 1.1.1

package/CHANGELOG.md

@@ -5,6 +5,27 @@ All notable changes to the GoalImageGallery project will be documented in this f
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.1] - 2025-07-14
+### 🐛 Bug Fixes
+- **Fixed Image Gallery Modal**: Resolved issues with the image gallery modal not displaying correctly
+- **Improved Image Handling**: Enhanced image error handling and loading states
+- **Modal Responsiveness**: Ensured the modal is fully responsive and adapts to different screen sizes
+- **Accessibility Improvements**: Enhanced keyboard navigation and ARIA attributes for better accessibility
+- **Code Cleanup**: Removed unused imports and optimized component structure
+- **Remove styled-components**: Replaced styled-components with MUI's Box component for better consistency
+
+## [1.1.0] - 2025-07-14
+
+### 🐛 Bug Fixes
+- **Fixed handleAfterUpload Array Structure**: Resolved issue where `handleAfterUpload` was creating nested arrays instead of flat arrays for `image_code` parameter
+- **Improved Array Handling**: Enhanced logic to properly handle both single image replacement and bulk image addition scenarios
+- **Better Code Organization**: Refactored `handleAfterUpload` method for clearer logic flow and better maintainability
+
+### 🔧 Technical Improvements
+- **Clearer Logic Separation**: Separated replacement logic from addition logic for better code readability
+- **Duplicate Prevention**: Enhanced duplicate checking to prevent adding the same image code multiple times
+- **Array Flattening**: Fixed array structure to ensure `image_code` is always a flat array of strings
+
 ## [1.0.9] - 2025-07-14
 
 ### ✨ New Features

package/lib/GoalImageGallery.js

@@ -236,7 +236,6 @@ const GoalImageGallery = _ref => {
     slotProps = {}
   } = _ref;
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const [updatable, setUpdatable] = useState(false);
   const {
     selector: ImageSelector
@@ -257,7 +256,6 @@ const GoalImageGallery = _ref => {
     selectedImageIndex,
     selectingImage,
     imageList,
-    selectedImage,
     zoomLevel,
     loading,
     removable,
@@ -282,8 +280,6 @@ const GoalImageGallery = _ref => {
 
   // Zoom and navigation handlers
   const {
-    handleZoomIn,
-    handleZoomOut,
     handlePreviousImage,
     handleNextImage
   } = useImageZoom(getImageUrl, imageList);

package/lib/components/ImageGalleryGrid.js

@@ -1,11 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Card, CardContent, useMediaQuery } from '@mui/material';
+import { Grid, Card, CardContent } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import ImageGalleryItem from './ImageGalleryItem';
 import ImageGalleryEmptyState from './ImageGalleryEmptyState';
 import { StyledImageGridContainer } from '../styles/styled-components';
-import { getGridColumns } from '../utils/image-utils';
 
 /**
  * Image grid component for displaying gallery images
@@ -30,8 +28,6 @@ const ImageGalleryGrid = _ref => {
     onDownloadImage
   } = _ref;
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const isTablet = useMediaQuery(theme.breakpoints.down('lg'));
   if (imageList.length === 0) {
     return /*#__PURE__*/_jsx(Card, {
       elevation: 2,
@@ -53,8 +49,11 @@ const ImageGalleryGrid = _ref => {
           container: true,
           spacing: 2,
           children: imageList.map((image, index) => /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: getGridColumns(isMobile, isTablet, multiple),
+            size: {
+              xs: 6,
+              sm: multiple ? 4 : 6,
+              md: multiple ? 3 : 4
+            },
             sx: {
               position: 'relative'
             },

package/lib/components/ImageGalleryItem.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Box, IconButton, Skeleton, Tooltip, Typography, Button } from '@mui/material';
 import { alpha, useTheme } from '@mui/material/styles';
 import { ChangeCircle as ChangeIcon, Download as DownloadIcon, Visibility as ViewIcon, Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
-import { StyledImageContainer, ImageOverlay } from '../styles/styled-components';
+import { getImageContainerStyles, getImageOverlayStyles } from '../styles/styled-components';
 import { handleImageError } from '../utils/image-utils';
 
 /**
@@ -30,8 +30,9 @@ const ImageGalleryItem = _ref => {
 
   // Handle add button (+) image
   if (image.image_code === '+') {
-    return /*#__PURE__*/_jsx(StyledImageContainer, {
+    return /*#__PURE__*/_jsx(Box, {
       sx: {
+        ...getImageContainerStyles(theme),
         height: 200,
         display: 'flex',
         alignItems: 'center',
@@ -62,7 +63,8 @@ const ImageGalleryItem = _ref => {
       })
     });
   }
-  return /*#__PURE__*/_jsxs(StyledImageContainer, {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: getImageContainerStyles(theme),
     children: [loading && /*#__PURE__*/_jsx(Skeleton, {
       variant: "rectangular",
       width: "100%",
@@ -84,8 +86,9 @@ const ImageGalleryItem = _ref => {
         objectFit: 'cover',
         display: loading ? 'none' : 'block'
       }
-    }, image.image_code), /*#__PURE__*/_jsxs(ImageOverlay, {
+    }, image.image_code), /*#__PURE__*/_jsxs(Box, {
       className: "image-overlay",
+      sx: getImageOverlayStyles(theme),
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Ver imagen",
         children: /*#__PURE__*/_jsx(IconButton, {

package/lib/components/ImageGalleryModal.js

@@ -1,8 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Zoom, Backdrop, Typography, IconButton, Stack, Chip, Tooltip, Box, useMediaQuery, useTheme } from '@mui/material';
 import { Close as CloseIcon, ZoomIn as ZoomInIcon, ZoomOut as ZoomOutIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon } from '@mui/icons-material';
-import { StyledModalContainer, StyledModalHeader, StyledModalBody, StyledModalFooter } from '../styles/styled-components';
+import { getModalContainerStyles, getModalHeaderStyles, getModalBodyStyles, getModalFooterStyles } from '../styles/styled-components';
 import { handleImageError } from '../utils/image-utils';
 
 /**
@@ -42,9 +41,10 @@ const ImageGalleryModal = _ref => {
     },
     children: /*#__PURE__*/_jsx(Zoom, {
       in: open,
-      children: /*#__PURE__*/_jsxs(StyledModalContainer, {
-        isMobile: isMobile,
-        children: [/*#__PURE__*/_jsxs(StyledModalHeader, {
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: getModalContainerStyles(theme, isMobile),
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: getModalHeaderStyles(theme),
           children: [/*#__PURE__*/_jsxs(Typography, {
             variant: "h6",
             children: ["Imagen ", selectedImageIndex + 1, " de ", imageList.length]
@@ -77,7 +77,8 @@ const ImageGalleryModal = _ref => {
               })
             })]
           })]
-        }), /*#__PURE__*/_jsx(StyledModalBody, {
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: getModalBodyStyles(theme),
           children: /*#__PURE__*/_jsx(Box, {
             sx: {
               width: '100%',
@@ -105,7 +106,8 @@ const ImageGalleryModal = _ref => {
               onError: e => handleImageError(e, noImageUrl)
             })
           })
-        }), imageList.length > 1 && /*#__PURE__*/_jsxs(StyledModalFooter, {
+        }), imageList.length > 1 && /*#__PURE__*/_jsxs(Box, {
+          sx: getModalFooterStyles(theme),
           children: [/*#__PURE__*/_jsx(Tooltip, {
             title: "Imagen anterior",
             children: /*#__PURE__*/_jsx(IconButton, {

package/lib/hooks/use-image-gallery.js

@@ -109,32 +109,45 @@ export const useImageGallery = _ref => {
 
     // Handle both single image and array of images
     const imagesArray = Array.isArray(uploadedImages) ? uploadedImages : [uploadedImages];
-    const imagesToSave = imageList.reduce((acc, img) => {
-      if (img.image_code !== '+') {
-        // If this is the image being replaced, replace with the first uploaded image
-        if (img.image_code === currentImageCode && imagesArray.length > 0) {
-          acc.push(imagesArray[0].code);
-        } else {
-          acc.push(img.image_code);
+    let imagesToSave = [];
+    if (currentImageCode) {
+      // Replacing an existing image
+      imagesToSave = imageList.reduce((acc, img) => {
+        if (img.image_code !== '+') {
+          if (img.image_code === currentImageCode) {
+            // Replace the selected image with the first uploaded image
+            acc.push(imagesArray[0].code);
+          } else {
+            // Keep existing image codes
+            acc.push(img.image_code);
+          }
         }
+        return acc;
+      }, []);
+
+      // If multiple images uploaded, add the additional ones
+      if (imagesArray.length > 1) {
+        imagesArray.slice(1).forEach(image => {
+          if (!imagesToSave.includes(image.code)) {
+            imagesToSave.push(image.code);
+          }
+        });
       }
-      return acc;
-    }, []);
+    } else {
+      // Adding new images (no current selection)
+      imagesToSave = imageList.reduce((acc, img) => {
+        if (img.image_code !== '+') {
+          acc.push(img.image_code);
+        }
+        return acc;
+      }, []);
 
-    // If no current image code (adding new images), add all new image codes
-    if (!currentImageCode) {
+      // Add all new image codes
       imagesArray.forEach(image => {
         if (!imagesToSave.includes(image.code)) {
           imagesToSave.push(image.code);
         }
       });
-    } else if (imagesArray.length > 1) {
-      // If replacing and multiple images uploaded, add additional images
-      imagesArray.slice(1).forEach(image => {
-        if (!imagesToSave.includes(image.code)) {
-          imagesToSave.push(image.code);
-        }
-      });
     }
     const result = await imageHandlerApi({
       ...ownerEntity,

package/lib/styles/styled-components.js

@@ -1,173 +1,142 @@
 import { Box } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 
 /**
- * Styled component for image containers with enhanced hover effects
+ * Styles for image containers with enhanced hover effects
  */
-export const StyledImageContainer = styled(Box)(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    position: 'relative',
-    borderRadius: theme.spacing(1.5),
-    overflow: 'hidden',
-    backgroundColor: theme.palette.background.paper,
-    border: `1px solid ${theme.palette.divider}`,
-    cursor: 'pointer',
-    transition: theme.transitions.create(['border-color', 'box-shadow', 'transform'], {
-      duration: theme.transitions.duration.short
-    }),
-    '&:hover': {
-      borderColor: theme.palette.primary.main,
-      boxShadow: theme.shadows[4],
-      transform: 'translateY(-2px)',
-      '& .image-overlay': {
-        opacity: 1
-      }
+export const getImageContainerStyles = theme => ({
+  position: 'relative',
+  borderRadius: theme.spacing(1.5),
+  overflow: 'hidden',
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  cursor: 'pointer',
+  transition: theme.transitions.create(['border-color', 'box-shadow', 'transform'], {
+    duration: theme.transitions.duration.short
+  }),
+  '&:hover': {
+    borderColor: theme.palette.primary.main,
+    boxShadow: theme.shadows[4],
+    transform: 'translateY(-2px)',
+    '& .image-overlay': {
+      opacity: 1
     }
-  };
+  }
 });
 
 /**
- * Styled component for image overlay with action buttons
+ * Styles for image overlay with action buttons
  */
-export const ImageOverlay = styled(Box)(_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: alpha(theme.palette.common.black, 0.5),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    opacity: 0,
-    transition: theme.transitions.create('opacity', {
-      duration: theme.transitions.duration.short
-    }),
-    '& .MuiIconButton-root': {
-      color: theme.palette.common.white,
-      backgroundColor: alpha(theme.palette.common.black, 0.7),
-      margin: theme.spacing(0.5),
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.common.black, 0.9)
-      }
+export const getImageOverlayStyles = theme => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  background: alpha(theme.palette.common.black, 0.5),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  opacity: 0,
+  transition: theme.transitions.create('opacity', {
+    duration: theme.transitions.duration.short
+  }),
+  '& .MuiIconButton-root': {
+    color: theme.palette.common.white,
+    backgroundColor: alpha(theme.palette.common.black, 0.7),
+    margin: theme.spacing(0.5),
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.common.black, 0.9)
     }
-  };
+  }
 });
 
 /**
- * Styled component for modal container
+ * Styles for modal container
  */
-export const StyledModalContainer = styled(Box)(_ref3 => {
-  let {
-    theme,
-    isMobile
-  } = _ref3;
-  return {
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%) !important',
-    position: 'absolute',
-    width: isMobile ? '95vw' : '90vw',
-    maxWidth: 1200,
-    height: isMobile ? '95vh' : '90vh',
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: theme.spacing(2),
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    boxShadow: 24
-  };
+export const getModalContainerStyles = (theme, isMobile) => ({
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%) !important',
+  position: 'absolute',
+  width: isMobile ? '95vw' : '90vw',
+  maxWidth: 1200,
+  height: isMobile ? '95vh' : '90vh',
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.spacing(2),
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: 24
 });
 
 /**
- * Styled component for modal header
+ * Styles for modal header
  */
-export const StyledModalHeader = styled(Box)(_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    backgroundColor: alpha(theme.palette.background.paper, 0.95)
-  };
+export const getModalHeaderStyles = theme => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  backgroundColor: alpha(theme.palette.background.paper, 0.95)
 });
 
 /**
- * Styled component for modal body
+ * Styles for modal body
  */
-export const StyledModalBody = styled(Box)(_ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return {
-    flex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    position: 'relative',
-    backgroundColor: theme.palette.grey[50]
-  };
+export const getModalBodyStyles = theme => ({
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  position: 'relative',
+  backgroundColor: theme.palette.grey[50]
 });
 
 /**
- * Styled component for modal footer
+ * Styles for modal footer
  */
-export const StyledModalFooter = styled(Box)(_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    borderTop: `1px solid ${theme.palette.divider}`,
-    backgroundColor: alpha(theme.palette.background.paper, 0.95)
-  };
+export const getModalFooterStyles = theme => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  borderTop: `1px solid ${theme.palette.divider}`,
+  backgroundColor: alpha(theme.palette.background.paper, 0.95)
 });
 
 /**
- * Styled component for empty state container
+ * Styles for empty state container
  */
-export const StyledEmptyStateContainer = styled(Box)(_ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    minHeight: 300
-  };
+export const getEmptyStateContainerStyles = theme => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  minHeight: 300
 });
 
 /**
- * Styled component for image grid container
+ * Styles for image grid container
  */
-export const StyledImageGridContainer = styled(Box)(_ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    minHeight: 200
-  };
-});
+export const getImageGridContainerStyles = theme => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  minHeight: 200
+});
+
+// Legacy styled components exports for backward compatibility
+export const StyledImageContainer = Box;
+export const ImageOverlay = Box;
+export const StyledModalContainer = Box;
+export const StyledModalHeader = Box;
+export const StyledModalBody = Box;
+export const StyledModalFooter = Box;
+export const StyledEmptyStateContainer = Box;
+export const StyledImageGridContainer = Box;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mgonza02/goal-image-gallery",
-    "version": "1.0.9",
+    "version": "1.1.1",
     "description": "Advanced, accessible, and highly customizable React image gallery component with multi-method upload, responsive design, and extensive TypeScript support",
     "main": "lib/index.js",
     "module": "lib/index.js",