@mgonza02/goal-image-gallery 1.0.0

package/lib/styles/styled-components.js

@@ -0,0 +1,173 @@
+import { Box } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+
+/**
+ * Styled component 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
+      }
+    }
+  };
+});
+
+/**
+ * Styled component 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)
+      }
+    }
+  };
+});
+
+/**
+ * Styled component for modal container
+ */
+export const StyledModalContainer = styled(Box)(_ref3 => {
+  let {
+    theme,
+    isMobile
+  } = _ref3;
+  return {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    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
+ */
+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)
+  };
+});
+
+/**
+ * Styled component 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]
+  };
+});
+
+/**
+ * Styled component 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)
+  };
+});
+
+/**
+ * Styled component 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
+  };
+});
+
+/**
+ * Styled component 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
+  };
+});

package/lib/utils/image-utils.js

@@ -0,0 +1,129 @@
+/**
+ * Image gallery utility functions
+ */
+
+/**
+ * Handle image errors with fallback logic
+ */
+export const handleImageError = (e, noImageUrl) => {
+  if (e.target.src.includes(noImageUrl)) {
+    e.target.src = '/static/images/pic-share-logo.png';
+  } else {
+    e.target.onerror = null;
+    e.target.src = noImageUrl;
+  }
+};
+
+/**
+ * Download image from URL
+ */
+export const downloadImage = (imageUrl, imageCode) => {
+  const link = document.createElement('a');
+  link.href = imageUrl;
+  link.download = `image-${imageCode}.jpg`;
+  link.click();
+};
+
+/**
+ * Process image codes into standardized format
+ */
+export const processImageCodes = imageCodes => {
+  if (!imageCodes) return [];
+  const splitedImages = Array.isArray(imageCodes) ? imageCodes : imageCodes.split(/[\s,]+/);
+  return splitedImages.map((image_code, index) => ({
+    id: index,
+    width: 1,
+    height: 1,
+    title: 'Goal Image',
+    image_code
+  }));
+};
+
+/**
+ * Get responsive grid columns based on screen size and multiple flag
+ */
+export const getGridColumns = (isMobile, isTablet, multiple) => {
+  if (isMobile) return 6; // 2 columns on mobile
+  if (isTablet) return multiple ? 4 : 6; // 3 or 2 columns on tablet
+  return multiple ? 3 : 4; // 4 or 3 columns on desktop
+};
+
+/**
+ * Validate image file type
+ */
+export const isValidImageFile = file => {
+  const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
+  return validTypes.includes(file.type);
+};
+
+/**
+ * Format file size for display
+ */
+export const formatFileSize = bytes => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+/**
+ * Generate unique ID for components
+ */
+export const generateId = () => {
+  return Math.random().toString(36).substr(2, 9);
+};
+
+/**
+ * Debounce function for performance optimization
+ */
+export const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+/**
+ * Check if device supports touch
+ */
+export const isTouchDevice = () => {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+};
+
+/**
+ * Get image dimensions from URL
+ */
+export const getImageDimensions = url => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve({
+        width: img.width,
+        height: img.height
+      });
+    };
+    img.onerror = reject;
+    img.src = url;
+  });
+};
+
+/**
+ * Create image preview from file
+ */
+export const createImagePreview = file => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = e => resolve(e.target.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+};

package/package.json

@@ -0,0 +1,93 @@
+{
+    "name": "@mgonza02/goal-image-gallery",
+    "version": "1.0.0",
+    "description": "Enhanced, modular image gallery component for React applications",
+    "main": "lib/index.js",
+    "module": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "keywords": [
+        "react",
+        "image-gallery",
+        "material-ui",
+        "component",
+        "upload",
+        "drag-drop",
+        "clipboard",
+        "modal",
+        "zoom",
+        "responsive"
+    ],
+    "author": "Goal Team",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/goal-systems/goal-image-gallery"
+    },
+    "homepage": "https://github.com/goal-systems/goal-image-gallery#readme",
+    "bugs": {
+        "url": "https://github.com/goal-systems/goal-image-gallery/issues"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "lib/",
+        "README.md",
+        "QUICK_REFERENCE.md",
+        "MIGRATION.md",
+        "IMPLEMENTATION_SUMMARY.md",
+        "LICENSE"
+    ],
+    "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "@mui/material": "^5.0.0",
+        "@mui/icons-material": "^5.0.0",
+        "@emotion/react": "^11.0.0",
+        "@emotion/styled": "^11.0.0"
+    },
+    "dependencies": {
+        "prop-types": "^15.8.0"
+    },
+    "scripts": {
+        "build": "npm run clean && npm run build:js && npm run build:types",
+        "build:js": "babel src --out-dir lib --copy-files --ignore '**/*.test.js'",
+        "build:types": "cp src/index.d.ts lib/index.d.ts",
+        "prepublishOnly": "npm run build",
+        "test": "jest",
+        "lint": "eslint src/**/*.js --fix",
+        "lint:check": "eslint src/**/*.js",
+        "format": "prettier --write src/**/*.js",
+        "format:check": "prettier --check src/**/*.js",
+        "clean": "rm -rf lib",
+        "validate": "npm run lint:check && npm run format:check",
+        "dev": "npm run build -- --watch",
+        "prepack": "npm run validate && npm run build"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.20.0",
+        "@babel/core": "^7.20.0",
+        "@babel/preset-env": "^7.20.0",
+        "@babel/preset-react": "^7.18.0",
+        "eslint": "^8.30.0",
+        "eslint-plugin-react": "^7.31.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "jest": "^29.0.0",
+        "prettier": "^2.8.0"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "engines": {
+        "node": ">=16.0.0"
+    }
+}