@mgonza02/goal-image-gallery 1.0.0

package/lib/GoalImageGallery.js

@@ -0,0 +1,244 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import { useMediaQuery } from '@mui/material';
+import ImageGalleryGrid from './components/ImageGalleryGrid';
+import ImageGalleryModal from './components/ImageGalleryModal';
+import { useImageGallery, useImageZoom, useClipboard, useKeyboardNavigation } from './hooks/use-image-gallery';
+import { downloadImage } from './utils/image-utils';
+
+/**
+ * Enhanced GoalImageGallery Component
+ *
+ * This component provides a modern, accessible image gallery with advanced upload capabilities.
+ *
+ * Key Features:
+ * - Multi-method image upload (file selection, clipboard paste, URL loading)
+ * - Responsive grid layout with hover effects
+ * - Full-screen image viewer with zoom controls
+ * - Keyboard navigation support
+ * - Drag and drop functionality
+ * - Mobile-friendly interface
+ * - Accessibility features (ARIA labels, keyboard navigation)
+ * - Loading states and error handling
+ *
+ * Upload Methods:
+ * 1. File Upload: Click to select or drag and drop image files
+ * 2. Clipboard Paste: Use Ctrl+V to paste images from clipboard
+ * 3. URL Loading: Enter image URLs to load remote images
+ *
+ * Keyboard Shortcuts (when image is open):
+ * - Arrow Left/Right: Navigate between images
+ * - +/=: Zoom in
+ * - -: Zoom out
+ * - Escape: Close image viewer
+ *
+ * Props:
+ * - canEdit: Enable editing capabilities
+ * - ownerEntity: Entity that owns the images
+ * - imageHandlerApi: API function for image operations
+ * - afterUpload: Callback after successful upload
+ * - imageCodes: Array or string of image codes
+ * - multiple: Allow multiple image selection
+ * - permission: Required permission for editing
+ * - emptyMessage: Message shown when no images
+ * - showImageInfo: Show image information overlay
+ * - allowDownload: Enable download functionality
+ * - getImageUrl: Function to get image URL from code
+ * - noImageUrl: Fallback image URL
+ * - showError: Function to show error messages
+ * - hasPermission: Function to check user permissions
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const GoalImageGallery = _ref => {
+  let {
+    canEdit = false,
+    ownerEntity,
+    imageHandlerApi,
+    afterUpload: onRefresh,
+    imageCodes,
+    multiple = false,
+    permission,
+    emptyMessage = 'No hay imágenes para mostrar',
+    showImageInfo = false,
+    allowDownload = false,
+    getImageUrl = _ref2 => {
+      let {
+        imageCode
+      } = _ref2;
+      return `/images/${imageCode}`;
+    },
+    noImageUrl = '/images/no-image.png',
+    showError = message => console.error(message),
+    hasPermission = () => true,
+    currentCompany = 'default'
+  } = _ref;
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [updatable, setUpdatable] = useState(false);
+
+  // Initialize permissions
+  useEffect(() => {
+    const isAllowed = !permission || hasPermission(permission);
+    setUpdatable(!!(isAllowed && canEdit && imageHandlerApi && ownerEntity));
+  }, [canEdit, ownerEntity, permission, hasPermission, imageHandlerApi]);
+
+  // Main gallery state and handlers
+  const {
+    openImage,
+    selectedImageIndex,
+    selectingImage,
+    imageList,
+    selectedImage,
+    zoomLevel,
+    loading,
+    removable,
+    setZoomLevel,
+    handleOpenImage,
+    handleCloseImage,
+    handleImageSelect,
+    handleCancel,
+    handleRemoveImage,
+    handleAfterUpload
+  } = useImageGallery({
+    imageCodes,
+    multiple,
+    canEdit,
+    updatable,
+    imageHandlerApi,
+    ownerEntity,
+    currentCompany,
+    onRefresh,
+    showError
+  });
+
+  // Zoom and navigation handlers
+  const {
+    handleZoomIn,
+    handleZoomOut,
+    handlePreviousImage,
+    handleNextImage
+  } = useImageZoom(getImageUrl, imageList);
+
+  // Enhanced zoom handlers that update the main state
+  const handleZoomInEnhanced = () => {
+    setZoomLevel(prev => Math.min(prev + 0.5, 3));
+  };
+  const handleZoomOutEnhanced = () => {
+    setZoomLevel(prev => Math.max(prev - 0.5, 0.5));
+  };
+  const handlePreviousImageEnhanced = () => {
+    const newImageUrl = handlePreviousImage();
+    handleOpenImage(newImageUrl, selectedImageIndex > 0 ? selectedImageIndex - 1 : imageList.length - 1);
+  };
+  const handleNextImageEnhanced = () => {
+    const newImageUrl = handleNextImage();
+    handleOpenImage(newImageUrl, selectedImageIndex < imageList.length - 1 ? selectedImageIndex + 1 : 0);
+  };
+
+  // Download handler
+  const handleDownloadImage = imageCode => {
+    const imageUrl = getImageUrl({
+      imageCode
+    });
+    downloadImage(imageUrl, imageCode);
+  };
+
+  // Clipboard paste handler
+  const handlePasteImage = file => {
+    handleImageSelect(null);
+    setTimeout(() => {
+      const event = new CustomEvent('pasteImage', {
+        detail: {
+          file
+        }
+      });
+      window.dispatchEvent(event);
+    }, 100);
+  };
+
+  // Clipboard support
+  const {
+    clipboardSupported
+  } = useClipboard(updatable, selectingImage, handlePasteImage);
+
+  // Keyboard navigation
+  useKeyboardNavigation(openImage, handlePreviousImageEnhanced, handleNextImageEnhanced, handleCloseImage, handleZoomInEnhanced, handleZoomOutEnhanced);
+
+  // Show image selector if needed
+  if (updatable && (selectingImage || !imageList || imageList.length === 0)) {
+    return /*#__PURE__*/_jsxs("div", {
+      style: {
+        padding: '20px',
+        border: '2px dashed #ccc',
+        textAlign: 'center',
+        borderRadius: '8px',
+        backgroundColor: '#f5f5f5'
+      },
+      children: [/*#__PURE__*/_jsx("p", {
+        children: multiple ? 'Seleccionar Imágenes' : 'Seleccionar Imagen'
+      }), /*#__PURE__*/_jsx("p", {
+        style: {
+          color: '#666',
+          fontSize: '14px'
+        },
+        children: multiple ? 'Arrastra imágenes aquí o haz clic para seleccionar' : 'Arrastra una imagen aquí o haz clic para seleccionar'
+      }), /*#__PURE__*/_jsx("button", {
+        onClick: handleCancel,
+        style: {
+          marginTop: '10px'
+        },
+        children: "Cancelar"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ImageGalleryGrid, {
+      imageList: imageList,
+      emptyMessage: emptyMessage,
+      multiple: multiple,
+      updatable: updatable,
+      removable: removable,
+      allowDownload: allowDownload,
+      showImageInfo: showImageInfo,
+      loading: loading,
+      clipboardSupported: clipboardSupported,
+      getImageUrl: getImageUrl,
+      noImageUrl: noImageUrl,
+      onImageClick: handleOpenImage,
+      onImageSelect: handleImageSelect,
+      onRemoveImage: handleRemoveImage,
+      onDownloadImage: handleDownloadImage
+    }), /*#__PURE__*/_jsx(ImageGalleryModal, {
+      open: openImage !== null,
+      imageUrl: openImage,
+      imageList: imageList,
+      selectedImageIndex: selectedImageIndex,
+      zoomLevel: zoomLevel,
+      noImageUrl: noImageUrl,
+      onClose: handleCloseImage,
+      onZoomIn: handleZoomInEnhanced,
+      onZoomOut: handleZoomOutEnhanced,
+      onPreviousImage: handlePreviousImageEnhanced,
+      onNextImage: handleNextImageEnhanced
+    })]
+  });
+};
+GoalImageGallery.propTypes = {
+  canEdit: PropTypes.bool,
+  ownerEntity: PropTypes.object,
+  imageHandlerApi: PropTypes.func,
+  afterUpload: PropTypes.func,
+  imageCodes: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  multiple: PropTypes.bool,
+  permission: PropTypes.string,
+  emptyMessage: PropTypes.string,
+  showImageInfo: PropTypes.bool,
+  allowDownload: PropTypes.bool,
+  getImageUrl: PropTypes.func,
+  noImageUrl: PropTypes.string,
+  showError: PropTypes.func,
+  hasPermission: PropTypes.func,
+  currentCompany: PropTypes.string
+};
+export default GoalImageGallery;

package/lib/components/ImageGalleryEmptyState.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Stack, Chip, Button } from '@mui/material';
+import { Image as ImageIcon, CloudUpload as UploadIcon, ContentPaste as PasteIcon, Link as LinkIcon, Add as AddIcon } from '@mui/icons-material';
+import { StyledEmptyStateContainer } from '../styles/styled-components';
+
+/**
+ * Empty state component for image gallery
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ImageGalleryEmptyState = _ref => {
+  let {
+    emptyMessage,
+    updatable,
+    clipboardSupported,
+    onAddImage
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledEmptyStateContainer, {
+    children: /*#__PURE__*/_jsxs(Stack, {
+      spacing: 3,
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(ImageIcon, {
+        sx: {
+          fontSize: 64,
+          color: 'text.secondary'
+        }
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "h6",
+        color: "text.secondary",
+        children: emptyMessage
+      }), updatable && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+          onClick: onAddImage,
+          sx: {
+            mt: 2
+          },
+          children: "Agregar imagen"
+        }), /*#__PURE__*/_jsxs(Stack, {
+          direction: "row",
+          spacing: 1,
+          alignItems: "center",
+          sx: {
+            mt: 2
+          },
+          children: [/*#__PURE__*/_jsx(Chip, {
+            icon: /*#__PURE__*/_jsx(UploadIcon, {}),
+            label: "Subir archivo",
+            variant: "outlined",
+            size: "small",
+            onClick: onAddImage
+          }), clipboardSupported && /*#__PURE__*/_jsx(Chip, {
+            icon: /*#__PURE__*/_jsx(PasteIcon, {}),
+            label: "Pegar (Ctrl+V)",
+            variant: "outlined",
+            size: "small",
+            color: "secondary"
+          }), /*#__PURE__*/_jsx(Chip, {
+            icon: /*#__PURE__*/_jsx(LinkIcon, {}),
+            label: "Desde URL",
+            variant: "outlined",
+            size: "small",
+            color: "info"
+          })]
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          color: "text.secondary",
+          textAlign: "center",
+          children: "Soporta m\xFAltiples m\xE9todos de carga: archivos, portapapeles y URLs"
+        })]
+      })]
+    })
+  });
+};
+ImageGalleryEmptyState.propTypes = {
+  emptyMessage: PropTypes.string.isRequired,
+  updatable: PropTypes.bool,
+  clipboardSupported: PropTypes.bool,
+  onAddImage: PropTypes.func
+};
+ImageGalleryEmptyState.defaultProps = {
+  updatable: false,
+  clipboardSupported: false,
+  onAddImage: () => {}
+};
+export default ImageGalleryEmptyState;

package/lib/components/ImageGalleryGrid.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, Card, CardContent, useMediaQuery } 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
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ImageGalleryGrid = _ref => {
+  let {
+    imageList,
+    emptyMessage,
+    multiple,
+    updatable,
+    removable,
+    allowDownload,
+    showImageInfo,
+    loading,
+    clipboardSupported,
+    getImageUrl,
+    noImageUrl,
+    onImageClick,
+    onImageSelect,
+    onRemoveImage,
+    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,
+      children: /*#__PURE__*/_jsx(CardContent, {
+        children: /*#__PURE__*/_jsx(ImageGalleryEmptyState, {
+          emptyMessage: emptyMessage,
+          updatable: updatable,
+          clipboardSupported: clipboardSupported,
+          onAddImage: () => onImageSelect(null)
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Card, {
+    elevation: 2,
+    children: /*#__PURE__*/_jsx(CardContent, {
+      children: /*#__PURE__*/_jsx(StyledImageGridContainer, {
+        children: /*#__PURE__*/_jsx(Grid, {
+          container: true,
+          spacing: 2,
+          children: imageList.map((image, index) => /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: getGridColumns(isMobile, isTablet, multiple),
+            sx: {
+              position: 'relative'
+            },
+            children: /*#__PURE__*/_jsx(ImageGalleryItem, {
+              image: image,
+              index: index,
+              getImageUrl: getImageUrl,
+              noImageUrl: noImageUrl,
+              loading: loading,
+              updatable: updatable,
+              removable: removable,
+              allowDownload: allowDownload,
+              showImageInfo: showImageInfo,
+              onImageClick: onImageClick,
+              onImageSelect: onImageSelect,
+              onRemoveImage: onRemoveImage,
+              onDownloadImage: onDownloadImage
+            })
+          }, image.id))
+        })
+      })
+    })
+  });
+};
+ImageGalleryGrid.propTypes = {
+  imageList: PropTypes.array.isRequired,
+  emptyMessage: PropTypes.string.isRequired,
+  multiple: PropTypes.bool,
+  updatable: PropTypes.bool,
+  removable: PropTypes.bool,
+  allowDownload: PropTypes.bool,
+  showImageInfo: PropTypes.bool,
+  loading: PropTypes.bool,
+  clipboardSupported: PropTypes.bool,
+  getImageUrl: PropTypes.func.isRequired,
+  noImageUrl: PropTypes.string.isRequired,
+  onImageClick: PropTypes.func.isRequired,
+  onImageSelect: PropTypes.func.isRequired,
+  onRemoveImage: PropTypes.func.isRequired,
+  onDownloadImage: PropTypes.func.isRequired
+};
+ImageGalleryGrid.defaultProps = {
+  multiple: false,
+  updatable: false,
+  removable: false,
+  allowDownload: false,
+  showImageInfo: false,
+  loading: false,
+  clipboardSupported: false
+};
+export default ImageGalleryGrid;

package/lib/components/ImageGalleryItem.js

@@ -0,0 +1,175 @@
+import React from 'react';
+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 { handleImageError } from '../utils/image-utils';
+
+/**
+ * Individual image item component
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ImageGalleryItem = _ref => {
+  let {
+    image,
+    index,
+    getImageUrl,
+    noImageUrl,
+    loading,
+    updatable,
+    removable,
+    allowDownload,
+    showImageInfo,
+    onImageClick,
+    onImageSelect,
+    onRemoveImage,
+    onDownloadImage
+  } = _ref;
+  const theme = useTheme();
+
+  // Handle add button (+) image
+  if (image.image_code === '+') {
+    return /*#__PURE__*/_jsx(StyledImageContainer, {
+      sx: {
+        height: 200,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: '2px dashed',
+        borderColor: 'primary.main',
+        backgroundColor: alpha(theme.palette.primary.main, 0.04),
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: alpha(theme.palette.primary.main, 0.08)
+        }
+      },
+      onClick: () => onImageSelect(null),
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+        sx: {
+          width: '100%',
+          height: '100%',
+          border: 'none',
+          backgroundColor: 'transparent',
+          '&:hover': {
+            border: 'none',
+            backgroundColor: 'transparent'
+          }
+        },
+        children: "Agregar imagen"
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(StyledImageContainer, {
+    children: [loading && /*#__PURE__*/_jsx(Skeleton, {
+      variant: "rectangular",
+      width: "100%",
+      height: 200,
+      animation: "wave"
+    }), /*#__PURE__*/_jsx("img", {
+      src: getImageUrl({
+        imageCode: image.image_code,
+        thumbMail: true
+      }),
+      alt: image.title || `Imagen ${index + 1}`,
+      onClick: () => onImageClick(getImageUrl({
+        imageCode: image.image_code
+      }), index),
+      onError: e => handleImageError(e, noImageUrl),
+      style: {
+        width: '100%',
+        height: 200,
+        objectFit: 'cover',
+        display: loading ? 'none' : 'block'
+      }
+    }, image.image_code), /*#__PURE__*/_jsxs(ImageOverlay, {
+      className: "image-overlay",
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Ver imagen",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: e => {
+            e.stopPropagation();
+            onImageClick(getImageUrl({
+              imageCode: image.image_code
+            }), index);
+          },
+          children: /*#__PURE__*/_jsx(ViewIcon, {})
+        })
+      }), allowDownload && /*#__PURE__*/_jsx(Tooltip, {
+        title: "Descargar imagen",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: e => {
+            e.stopPropagation();
+            onDownloadImage(image.image_code);
+          },
+          children: /*#__PURE__*/_jsx(DownloadIcon, {})
+        })
+      }), updatable && /*#__PURE__*/_jsx(Tooltip, {
+        title: "Cambiar imagen",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: e => {
+            e.stopPropagation();
+            onImageSelect(image);
+          },
+          children: /*#__PURE__*/_jsx(ChangeIcon, {})
+        })
+      }), removable && /*#__PURE__*/_jsx(Tooltip, {
+        title: "Eliminar imagen",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: e => {
+            e.stopPropagation();
+            if (window.confirm('¿Está seguro de que desea eliminar esta imagen?')) {
+              onRemoveImage(image);
+            }
+          },
+          color: "error",
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })]
+    }), showImageInfo && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: alpha(theme.palette.common.black, 0.7),
+        color: 'white',
+        p: 1
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        noWrap: true,
+        children: image.title || `Imagen ${index + 1}`
+      })
+    })]
+  });
+};
+ImageGalleryItem.propTypes = {
+  image: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
+  getImageUrl: PropTypes.func.isRequired,
+  noImageUrl: PropTypes.string.isRequired,
+  loading: PropTypes.bool,
+  updatable: PropTypes.bool,
+  removable: PropTypes.bool,
+  allowDownload: PropTypes.bool,
+  showImageInfo: PropTypes.bool,
+  onImageClick: PropTypes.func.isRequired,
+  onImageSelect: PropTypes.func.isRequired,
+  onRemoveImage: PropTypes.func.isRequired,
+  onDownloadImage: PropTypes.func.isRequired
+};
+ImageGalleryItem.defaultProps = {
+  loading: false,
+  updatable: false,
+  removable: false,
+  allowDownload: false,
+  showImageInfo: false
+};
+export default ImageGalleryItem;