@mgonza02/goal-image-gallery 1.0.0

package/lib/components/ImageGalleryModal.js

@@ -0,0 +1,149 @@
+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 { handleImageError } from '../utils/image-utils';
+
+/**
+ * Image modal component for full-screen image viewing
+ */
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const ImageGalleryModal = _ref => {
+  let {
+    open,
+    imageUrl,
+    imageList,
+    selectedImageIndex,
+    zoomLevel,
+    noImageUrl,
+    onClose,
+    onZoomIn,
+    onZoomOut,
+    onPreviousImage,
+    onNextImage
+  } = _ref;
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  return /*#__PURE__*/_jsx(Modal, {
+    open: open,
+    onClose: onClose,
+    closeAfterTransition: true,
+    slots: {
+      backdrop: Backdrop
+    },
+    slotProps: {
+      backdrop: {
+        timeout: 500,
+        sx: {
+          backgroundColor: 'rgba(0, 0, 0, 0.9)'
+        }
+      }
+    },
+    children: /*#__PURE__*/_jsx(Zoom, {
+      in: open,
+      children: /*#__PURE__*/_jsxs(StyledModalContainer, {
+        isMobile: isMobile,
+        children: [/*#__PURE__*/_jsxs(StyledModalHeader, {
+          children: [/*#__PURE__*/_jsxs(Typography, {
+            variant: "h6",
+            children: ["Imagen ", selectedImageIndex + 1, " de ", imageList.length]
+          }), /*#__PURE__*/_jsxs(Stack, {
+            direction: "row",
+            spacing: 1,
+            children: [/*#__PURE__*/_jsx(Tooltip, {
+              title: "Alejar",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: onZoomOut,
+                disabled: zoomLevel <= 0.5,
+                children: /*#__PURE__*/_jsx(ZoomOutIcon, {})
+              })
+            }), /*#__PURE__*/_jsx(Chip, {
+              label: `${Math.round(zoomLevel * 100)}%`,
+              variant: "outlined",
+              size: "small"
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              title: "Acercar",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: onZoomIn,
+                disabled: zoomLevel >= 3,
+                children: /*#__PURE__*/_jsx(ZoomInIcon, {})
+              })
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              title: "Cerrar",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: onClose,
+                children: /*#__PURE__*/_jsx(CloseIcon, {})
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(StyledModalBody, {
+          children: /*#__PURE__*/_jsx(Box, {
+            sx: {
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              overflow: zoomLevel > 1 ? 'auto' : 'hidden',
+              p: 2
+            },
+            children: /*#__PURE__*/_jsx("img", {
+              src: imageUrl,
+              alt: "Imagen completa",
+              style: {
+                maxWidth: '100%',
+                maxHeight: '100%',
+                width: 'auto',
+                height: 'auto',
+                objectFit: 'contain',
+                transform: `scale(${zoomLevel})`,
+                transition: 'transform 0.2s ease-in-out',
+                borderRadius: 8,
+                display: 'block'
+              },
+              onError: e => handleImageError(e, noImageUrl)
+            })
+          })
+        }), imageList.length > 1 && /*#__PURE__*/_jsxs(StyledModalFooter, {
+          children: [/*#__PURE__*/_jsx(Tooltip, {
+            title: "Imagen anterior",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: onPreviousImage,
+              disabled: imageList.length <= 1,
+              children: /*#__PURE__*/_jsx(ChevronLeftIcon, {})
+            })
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: "Use las flechas del teclado para navegar"
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: "Imagen siguiente",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: onNextImage,
+              disabled: imageList.length <= 1,
+              children: /*#__PURE__*/_jsx(ChevronRightIcon, {})
+            })
+          })]
+        })]
+      })
+    })
+  });
+};
+ImageGalleryModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  imageUrl: PropTypes.string,
+  imageList: PropTypes.array.isRequired,
+  selectedImageIndex: PropTypes.number.isRequired,
+  zoomLevel: PropTypes.number.isRequired,
+  noImageUrl: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onZoomIn: PropTypes.func.isRequired,
+  onZoomOut: PropTypes.func.isRequired,
+  onPreviousImage: PropTypes.func.isRequired,
+  onNextImage: PropTypes.func.isRequired
+};
+ImageGalleryModal.defaultProps = {
+  imageUrl: null
+};
+export default ImageGalleryModal;

package/lib/components/index.js

@@ -0,0 +1,5 @@
+// Components index for easy importing
+export { default as ImageGalleryGrid } from './ImageGalleryGrid';
+export { default as ImageGalleryModal } from './ImageGalleryModal';
+export { default as ImageGalleryItem } from './ImageGalleryItem';
+export { default as ImageGalleryEmptyState } from './ImageGalleryEmptyState';

package/lib/examples.js

@@ -0,0 +1,503 @@
+// GoalImageGallery Usage Examples
+// This file demonstrates various ways to use the GoalImageGallery component
+
+import React, { useState, useCallback } from 'react';
+import { Box, Typography, Button, Divider } from '@mui/material';
+import GoalImageGallery from './GoalImageGallery';
+
+// Example 1: Basic Read-Only Gallery
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BasicGalleryExample = () => {
+  const imageCodes = ['img1', 'img2', 'img3', 'img4'];
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Basic Read-Only Gallery"
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: imageCodes,
+      canEdit: false,
+      emptyMessage: "No images to display"
+    })]
+  });
+};
+
+// Example 2: Editable Product Gallery
+export const ProductGalleryExample = () => {
+  const [productImages, setProductImages] = useState(['prod1', 'prod2']);
+  const currentCompany = 'default-company';
+  const hasPermission = perm => true; // Mock permission check
+
+  const handleImageUpload = useCallback(async imageData => {
+    try {
+      // Mock API call
+      const response = await new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            success: true,
+            data: {
+              code: `img-${Date.now()}`
+            },
+            message: 'Product images uploaded successfully'
+          });
+        }, 1000);
+      });
+      return response;
+    } catch (error) {
+      return {
+        success: false,
+        message: error.message
+      };
+    }
+  }, [currentCompany]);
+  const refreshProduct = useCallback(result => {
+    // Refresh product data after upload
+    console.log('Product updated:', result);
+  }, []);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Product Gallery (Editable)"
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: productImages,
+      canEdit: hasPermission('EDIT_PRODUCTS'),
+      ownerEntity: {
+        id: 'product-123',
+        type: 'product'
+      },
+      imageHandlerApi: handleImageUpload,
+      afterUpload: refreshProduct,
+      multiple: true,
+      emptyMessage: "No product images available",
+      showImageInfo: true,
+      allowDownload: true,
+      hasPermission: hasPermission,
+      currentCompany: currentCompany
+    })]
+  });
+};
+
+// Example 3: User Avatar Gallery
+export const UserAvatarExample = () => {
+  const [userAvatar, setUserAvatar] = useState('avatar-001');
+  const {
+    account
+  } = useAuth();
+  const handleAvatarUpload = useCallback(async imageData => {
+    try {
+      const response = await goalMediaApi.submitImage({
+        values: {
+          ...imageData,
+          application: 'USER_AVATAR',
+          folder: 'avatars',
+          owner: account.userName
+        }
+      });
+      return {
+        success: true,
+        data: response.data,
+        message: 'Avatar updated successfully'
+      };
+    } catch (error) {
+      return {
+        success: false,
+        message: error.message
+      };
+    }
+  }, [account]);
+  const refreshUser = useCallback(result => {
+    setUserAvatar(result.data.code);
+  }, []);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "User Avatar (Single Image)"
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: [userAvatar],
+      canEdit: true,
+      ownerEntity: {
+        id: account.id,
+        type: 'user'
+      },
+      imageHandlerApi: handleAvatarUpload,
+      afterUpload: refreshUser,
+      multiple: false,
+      emptyMessage: "No avatar set",
+      showImageInfo: false
+    })]
+  });
+};
+
+// Example 4: Document Attachments Gallery
+export const DocumentGalleryExample = () => {
+  const [documentImages, setDocumentImages] = useState([]);
+  const {
+    currentCompany
+  } = useApp();
+  const {
+    hasPermission
+  } = useAuth();
+  const handleDocumentImageUpload = useCallback(async imageData => {
+    try {
+      const response = await goalMediaApi.submitImage({
+        values: {
+          ...imageData,
+          application: 'DOCUMENT_ATTACHMENTS',
+          folder: 'documents',
+          companyId: currentCompany
+        }
+      });
+      return {
+        success: true,
+        data: response.data,
+        message: 'Document images uploaded successfully'
+      };
+    } catch (error) {
+      return {
+        success: false,
+        message: error.message
+      };
+    }
+  }, [currentCompany]);
+  const refreshDocument = useCallback(result => {
+    // Update document with new images
+    console.log('Document updated:', result);
+  }, []);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Document Attachments Gallery"
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: documentImages,
+      canEdit: hasPermission('EDIT_DOCUMENTS'),
+      ownerEntity: {
+        id: 'doc-456',
+        type: 'document'
+      },
+      imageHandlerApi: handleDocumentImageUpload,
+      afterUpload: refreshDocument,
+      multiple: true,
+      permission: "EDIT_DOCUMENTS",
+      emptyMessage: "No document attachments",
+      showImageInfo: true,
+      allowDownload: true
+    })]
+  });
+};
+
+// Example 5: Gallery with Custom Empty State
+export const CustomEmptyStateExample = () => {
+  const [images, setImages] = useState([]);
+  const handleUpload = useCallback(async imageData => {
+    // Simulate API call
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve({
+          success: true,
+          data: {
+            code: `img-${Date.now()}`
+          },
+          message: 'Image uploaded successfully'
+        });
+      }, 1000);
+    });
+  }, []);
+  const refreshImages = useCallback(result => {
+    setImages(prev => [...prev, result.data.code]);
+  }, []);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Custom Empty State Gallery"
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: images,
+      canEdit: true,
+      ownerEntity: {
+        id: 'custom-gallery',
+        type: 'gallery'
+      },
+      imageHandlerApi: handleUpload,
+      afterUpload: refreshImages,
+      multiple: true,
+      emptyMessage: "Start building your gallery by adding images",
+      showImageInfo: true
+    })]
+  });
+};
+
+// Example 6: Gallery with URL and Clipboard Support Demo
+export const AdvancedUploadExample = () => {
+  const [images, setImages] = useState(['demo1', 'demo2']);
+  const handleAdvancedUpload = useCallback(async imageData => {
+    // Handle different upload methods
+    const uploadMethod = imageData.method || 'file';
+    console.log(`Uploading via ${uploadMethod}:`, imageData);
+    try {
+      const response = await goalMediaApi.submitImage({
+        values: {
+          ...imageData,
+          application: 'ADVANCED_GALLERY',
+          folder: 'advanced',
+          uploadMethod
+        }
+      });
+      return {
+        success: true,
+        data: response.data,
+        message: `Image uploaded successfully via ${uploadMethod}`
+      };
+    } catch (error) {
+      return {
+        success: false,
+        message: error.message
+      };
+    }
+  }, []);
+  const refreshGallery = useCallback(result => {
+    setImages(prev => [...prev, result.data.code]);
+  }, []);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Advanced Upload Methods Demo"
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      paragraph: true,
+      children: "This gallery supports multiple upload methods:"
+    }), /*#__PURE__*/_jsxs("ul", {
+      children: [/*#__PURE__*/_jsx("li", {
+        children: "File upload: Click \"Add Image\" or drag & drop"
+      }), /*#__PURE__*/_jsx("li", {
+        children: "Clipboard paste: Copy an image and press Ctrl+V"
+      }), /*#__PURE__*/_jsx("li", {
+        children: "URL loading: Enter image URLs directly"
+      })]
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: images,
+      canEdit: true,
+      ownerEntity: {
+        id: 'advanced-gallery',
+        type: 'gallery'
+      },
+      imageHandlerApi: handleAdvancedUpload,
+      afterUpload: refreshGallery,
+      multiple: true,
+      emptyMessage: "Try all upload methods: file, clipboard, and URL",
+      showImageInfo: true,
+      allowDownload: true
+    })]
+  });
+};
+
+// Example 7: Mobile-Optimized Gallery
+export const MobileGalleryExample = () => {
+  const [mobileImages, setMobileImages] = useState(['mobile1', 'mobile2', 'mobile3']);
+  const handleMobileUpload = useCallback(async imageData => {
+    // Optimize for mobile upload
+    const compressedData = {
+      ...imageData,
+      quality: 0.8,
+      // Compress for mobile
+      maxWidth: 1200,
+      maxHeight: 1200
+    };
+    try {
+      const response = await goalMediaApi.submitImage({
+        values: {
+          ...compressedData,
+          application: 'MOBILE_GALLERY',
+          folder: 'mobile'
+        }
+      });
+      return {
+        success: true,
+        data: response.data,
+        message: 'Mobile image uploaded successfully'
+      };
+    } catch (error) {
+      return {
+        success: false,
+        message: error.message
+      };
+    }
+  }, []);
+  const refreshMobileGallery = useCallback(result => {
+    setMobileImages(prev => [...prev, result.data.code]);
+  }, []);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Mobile-Optimized Gallery"
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      paragraph: true,
+      children: "Optimized for mobile devices with touch-friendly interface"
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: mobileImages,
+      canEdit: true,
+      ownerEntity: {
+        id: 'mobile-gallery',
+        type: 'gallery'
+      },
+      imageHandlerApi: handleMobileUpload,
+      afterUpload: refreshMobileGallery,
+      multiple: true,
+      emptyMessage: "Mobile gallery - tap to add images",
+      showImageInfo: false,
+      allowDownload: false
+    })]
+  });
+};
+
+// Example 8: Full Example with State Management
+export const FullExampleWithStateManagement = () => {
+  const [galleryState, setGalleryState] = useState({
+    images: ['state1', 'state2'],
+    loading: false,
+    error: null
+  });
+  const handleStateUpload = useCallback(async imageData => {
+    setGalleryState(prev => ({
+      ...prev,
+      loading: true,
+      error: null
+    }));
+    try {
+      const response = await goalMediaApi.submitImage({
+        values: {
+          ...imageData,
+          application: 'STATE_GALLERY',
+          folder: 'state-managed'
+        }
+      });
+      if (response.success) {
+        setGalleryState(prev => ({
+          ...prev,
+          images: [...prev.images, response.data.code],
+          loading: false
+        }));
+        return {
+          success: true,
+          data: response.data,
+          message: 'Image uploaded and state updated'
+        };
+      } else {
+        throw new Error(response.message);
+      }
+    } catch (error) {
+      setGalleryState(prev => ({
+        ...prev,
+        loading: false,
+        error: error.message
+      }));
+      return {
+        success: false,
+        message: error.message
+      };
+    }
+  }, []);
+  const refreshWithState = useCallback(result => {
+    // State is managed in the upload handler
+    console.log('Gallery state updated:', result);
+  }, []);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Full Example with State Management"
+    }), galleryState.error && /*#__PURE__*/_jsxs(Typography, {
+      color: "error",
+      variant: "body2",
+      paragraph: true,
+      children: ["Error: ", galleryState.error]
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: galleryState.images,
+      canEdit: true,
+      ownerEntity: {
+        id: 'state-gallery',
+        type: 'gallery'
+      },
+      imageHandlerApi: handleStateUpload,
+      afterUpload: refreshWithState,
+      multiple: true,
+      emptyMessage: "State-managed gallery - add images to see state updates",
+      showImageInfo: true,
+      allowDownload: true
+    })]
+  });
+};
+
+// Complete Demo Component
+export const GoalImageGalleryExamples = () => {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 3
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h4",
+      gutterBottom: true,
+      children: "GoalImageGallery Examples"
+    }), /*#__PURE__*/_jsx(BasicGalleryExample, {}), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        my: 3
+      }
+    }), /*#__PURE__*/_jsx(ProductGalleryExample, {}), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        my: 3
+      }
+    }), /*#__PURE__*/_jsx(UserAvatarExample, {}), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        my: 3
+      }
+    }), /*#__PURE__*/_jsx(DocumentGalleryExample, {}), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        my: 3
+      }
+    }), /*#__PURE__*/_jsx(CustomEmptyStateExample, {}), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        my: 3
+      }
+    }), /*#__PURE__*/_jsx(AdvancedUploadExample, {}), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        my: 3
+      }
+    }), /*#__PURE__*/_jsx(MobileGalleryExample, {}), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        my: 3
+      }
+    }), /*#__PURE__*/_jsx(FullExampleWithStateManagement, {})]
+  });
+};
+export default GoalImageGalleryExamples;