@mgonza02/goal-image-gallery 1.1.1 → 1.2.1

package/CHANGELOG.md

@@ -5,6 +5,39 @@ 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.2.1] - 2026-05-22
+
+### 🐛 Bug Fixes
+- **Stack alignItems**: Moved `alignItems` prop inside the `sx` prop in `ImageGalleryEmptyState` component to prevent React from passing it down as an unrecognized attribute to DOM elements.
+
+## [1.2.0] - 2026-04-29
+
+### ⬆️ Dependency Upgrades
+- **MUI v9**: Upgraded `@mui/material` and `@mui/icons-material` from `^5.18` to `^9.0.0`
+- **Emotion**: Updated `@emotion/react` and `@emotion/styled` to `^11.14.0`
+- **Node engine**: Minimum Node.js version raised to `>=18.0.0`
+
+### 🔧 Migration — MUI v9 Breaking Changes
+- **System props removed**: Migrated deprecated shorthand props (`color`, `alignItems`, `textAlign`, `display`) on Typography and Stack to the `sx` prop using the official `@mui/codemod v9.0.0/system-props` codemod
+- **Stack alignItems**: Restored `alignItems` as a direct prop on `Stack` components where the codemod incorrectly moved it into `sx`, fixing a React DOM prop warning (`React does not recognize the alignItems prop on a DOM element`)
+- **Grid v2**: Confirmed Grid already uses the v2 `size` prop API required by MUI v9
+
+### 📦 Package Manager — Migrated to pnpm
+- **pnpm@10.33.2**: Replaced npm with pnpm as the official package manager
+- Added `"packageManager": "pnpm@10.33.2"` to `package.json`
+- Added `.npmrc` with `engine-strict=true`, `auto-install-peers=true`, `shamefully-hoist=false`
+- All `npm run X` script calls replaced with `pnpm X`
+- `package-lock.json` replaced by `pnpm-lock.yaml`
+- Updated `.gitignore` and `.npmignore` with pnpm log/lockfile entries
+
+### 🐳 Docker
+- **Dockerfile**: Replaced `npm install` with `corepack enable && corepack prepare pnpm@10.33.2 --activate` + `pnpm install --frozen-lockfile`; `CMD` updated to `pnpm start`
+- **docker-compose.yml**: Updated `command` from `node start.js` to `pnpm build`
+
+### 📐 Architecture
+- Added `SOLID_PRINCIPLES.md`: documents how SRP, OCP, LSP, ISP, and DIP are applied and enforced in this codebase, including allowed import direction graph and PR checklist
+
+
 ## [1.1.1] - 2025-07-14
 ### 🐛 Bug Fixes
 - **Fixed Image Gallery Modal**: Resolved issues with the image gallery modal not displaying correctly

package/README.md

@@ -53,10 +53,10 @@ import { GoalImageGallery } from '@mgonza02/goal-image-gallery';
 
 ## Installation & Setup
 
-### NPM Installation
+### Installation
 
 ```bash
-npm install @mgonza02/goal-image-gallery
+pnpm add @mgonza02/goal-image-gallery
 ```
 
 ### Peer Dependencies
@@ -64,7 +64,7 @@ npm install @mgonza02/goal-image-gallery
 Make sure you have the required peer dependencies installed:
 
 ```bash
-npm install @mui/material @mui/icons-material @emotion/react @emotion/styled react react-dom
+pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled react react-dom
 ```
 
 ### Import
@@ -1106,13 +1106,14 @@ When contributing to this component:
 For detailed information about changes, new features, and updates across versions, see [CHANGELOG.md](CHANGELOG.md).
 
 ### Recent Updates
+- **v1.2.1**: Fixed warning about invalid `alignItems` prop being passed to DOM elements by Stack components
+- **v1.2.0**: Upgraded to MUI v9, migrated to pnpm, Docker build pipeline, SOLID principles documentation
+- **v1.1.1**: Modal responsiveness, accessibility improvements, styled-components replaced with MUI Box
+- **v1.1.0**: Fixed handleAfterUpload array structure for bulk uploads
 - **v1.0.6**: Major package cleanup and optimization
 - **v1.0.5**: Initial package review and dependency analysis
 - **v1.0.4**: Comprehensive documentation overhaul
 - **v1.0.3**: NPM publication and scoped package setup
-- **v1.0.2**: Slot system implementation and UI enhancements
-- **v1.0.1**: Bug fixes and stability improvements
-- **v1.0.0**: Initial release with core features
 
 ## License
 

package/lib/GoalImageGallery.js

@@ -14,7 +14,7 @@ import { downloadImage } from "./utils/image-utils";
  * Provides advanced upload capabilities, responsive design, accessibility features, and extensive customization options.
  * 
  * @component
- * @version 1.0.3
+ * @version 1.2.0
  * @author Goal Team
  * @since 2023
  * 

package/lib/components/ImageGalleryEmptyState.js

@@ -18,7 +18,9 @@ const ImageGalleryEmptyState = _ref => {
   return /*#__PURE__*/_jsx(StyledEmptyStateContainer, {
     children: /*#__PURE__*/_jsxs(Stack, {
       spacing: 3,
-      alignItems: "center",
+      sx: {
+        alignItems: 'center'
+      },
       children: [/*#__PURE__*/_jsx(ImageIcon, {
         sx: {
           fontSize: 64,
@@ -26,7 +28,9 @@ const ImageGalleryEmptyState = _ref => {
         }
       }), /*#__PURE__*/_jsx(Typography, {
         variant: "h6",
-        color: "text.secondary",
+        sx: {
+          color: 'text.secondary'
+        },
         children: emptyMessage
       }), updatable && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Button, {
@@ -40,9 +44,9 @@ const ImageGalleryEmptyState = _ref => {
         }), /*#__PURE__*/_jsxs(Stack, {
           direction: "row",
           spacing: 1,
-          alignItems: "center",
           sx: {
-            mt: 2
+            mt: 2,
+            alignItems: 'center'
           },
           children: [/*#__PURE__*/_jsx(Chip, {
             icon: /*#__PURE__*/_jsx(UploadIcon, {}),
@@ -65,8 +69,10 @@ const ImageGalleryEmptyState = _ref => {
           })]
         }), /*#__PURE__*/_jsx(Typography, {
           variant: "caption",
-          color: "text.secondary",
-          textAlign: "center",
+          sx: {
+            color: 'text.secondary',
+            textAlign: 'center'
+          },
           children: "Soporta m\xFAltiples m\xE9todos de carga: archivos, portapapeles y URLs"
         })]
       })]

package/lib/components/ImageGalleryModal.js

@@ -117,7 +117,9 @@ const ImageGalleryModal = _ref => {
             })
           }), /*#__PURE__*/_jsx(Typography, {
             variant: "body2",
-            color: "text.secondary",
+            sx: {
+              color: 'text.secondary'
+            },
             children: "Use las flechas del teclado para navegar"
           }), /*#__PURE__*/_jsx(Tooltip, {
             title: "Imagen siguiente",

package/lib/examples.js

@@ -285,8 +285,10 @@ export const AdvancedUploadExample = () => {
       children: "Advanced Upload Methods Demo"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
       paragraph: true,
+      sx: {
+        color: 'text.secondary'
+      },
       children: "This gallery supports multiple upload methods:"
     }), /*#__PURE__*/_jsxs("ul", {
       children: [/*#__PURE__*/_jsx("li", {
@@ -358,8 +360,10 @@ export const MobileGalleryExample = () => {
       children: "Mobile-Optimized Gallery"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
       paragraph: true,
+      sx: {
+        color: 'text.secondary'
+      },
       children: "Optimized for mobile devices with touch-friendly interface"
     }), /*#__PURE__*/_jsx(GoalImageGallery, {
       imageCodes: mobileImages,
@@ -542,14 +546,16 @@ export const CustomSelectorExample = () => {
         children: title
       }), /*#__PURE__*/_jsx(Typography, {
         variant: "body1",
-        color: "text.secondary",
         paragraph: true,
+        sx: {
+          color: 'text.secondary'
+        },
         children: uploadMessage
       }), /*#__PURE__*/_jsxs(Typography, {
         variant: "caption",
-        display: "block",
-        color: "text.secondary",
         sx: {
+          display: 'block',
+          color: 'text.secondary',
           mb: 2
         },
         children: ["Maximum file size: ", maxFileSize / 1024 / 1024, "MB | Theme: ", theme]
@@ -612,8 +618,10 @@ export const CustomSelectorExample = () => {
       children: "Custom Image Selector with Slots"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
       paragraph: true,
+      sx: {
+        color: 'text.secondary'
+      },
       children: "This example demonstrates how to use the slot system to provide a custom image selector with enhanced UI and functionality."
     }), /*#__PURE__*/_jsx(GoalImageGallery, {
       imageCodes: images,
@@ -768,12 +776,16 @@ export const BulkUploadExample = () => {
         children: "Bulk Upload Images"
       }), /*#__PURE__*/_jsx(Typography, {
         variant: "body2",
-        color: "text.secondary",
         paragraph: true,
+        sx: {
+          color: 'text.secondary'
+        },
         children: "Drop multiple images here or click to select"
       }), selectedFiles.length > 0 && /*#__PURE__*/_jsxs(Typography, {
         variant: "body2",
-        color: "success.main",
+        sx: {
+          color: 'success.main'
+        },
         children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"]
       }), /*#__PURE__*/_jsx(Button, {
         variant: "contained",
@@ -800,8 +812,10 @@ export const BulkUploadExample = () => {
       children: "Bulk Upload Gallery"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
       paragraph: true,
+      sx: {
+        color: 'text.secondary'
+      },
       children: "This example demonstrates bulk upload functionality where multiple images can be uploaded at once. The handleAfterUpload method now accepts arrays of image objects."
     }), /*#__PURE__*/_jsx(GoalImageGallery, {
       imageCodes: galleryImages,

package/lib/index.js

@@ -136,13 +136,21 @@ export const CONFIG = {
 };
 
 // Export version info
-export const VERSION = '2.0.0';
+export const VERSION = '1.2.1';
 export const CHANGELOG = [{
-  version: '2.0.0',
-  date: '2024-01-01',
-  changes: ['Added multi-method upload support', 'Enhanced UI/UX with Material Design 3', 'Improved accessibility features', 'Added keyboard navigation', 'Mobile optimization', 'Comprehensive documentation']
+  version: '1.2.1',
+  date: '2026-05-22',
+  changes: ['Fixed warning about invalid alignItems prop being passed to DOM elements by Stack components']
+}, {
+  version: '1.2.0',
+  date: '2026-04-29',
+  changes: ['Upgraded to MUI v9', 'Migrated to pnpm package manager', 'Implemented Docker build pipeline', 'Added SOLID principles documentation']
+}, {
+  version: '1.1.1',
+  date: '2025-07-14',
+  changes: ['Enhanced modal responsiveness and accessibility', 'Replaced styled-components with MUI Box']
 }, {
   version: '1.0.0',
-  date: '2023-12-01',
-  changes: ['Initial release', 'Basic image gallery functionality', 'File upload support', 'Image viewer modal']
+  date: '2025-07-11',
+  changes: ['Initial release with multi-method upload support', 'Enhanced UI/UX with Material Design 3', 'Added keyboard navigation and accessibility features']
 }];

package/package.json

@@ -1,90 +1,89 @@
 {
-    "name": "@mgonza02/goal-image-gallery",
-    "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",
-    "types": "lib/index.d.ts",
-    "keywords": [
-        "react",
-        "image-gallery",
-        "material-ui",
-        "component",
-        "upload",
-        "drag-drop",
-        "clipboard",
-        "modal",
-        "zoom",
-        "responsive"
+  "name": "@mgonza02/goal-image-gallery",
+  "version": "1.2.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",
+  "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": "git+https://github.com/mgonza02/goal-image-gallery.git"
+  },
+  "homepage": "https://github.com/mgonza02/goal-image-gallery#readme",
+  "bugs": {
+    "url": "https://github.com/mgonza02/goal-image-gallery/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib/",
+    "README.md",
+    "CHANGELOG.md",
+    "QUICK_REFERENCE.md",
+    "MIGRATION.md",
+    "IMPLEMENTATION_GUIDE.md",
+    "IMPLEMENTATION_SUMMARY.md",
+    "DOCUMENTATION_UPDATE_SUMMARY.md",
+    "PACKAGE_CLEANUP_SUMMARY.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.8.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.20.0",
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-react": "^7.18.0",
+    "prettier": "^3.4.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ],
-    "author": "Goal Team",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/mgonza02/goal-image-gallery.git"
-    },
-    "homepage": "https://github.com/mgonza02/goal-image-gallery#readme",
-    "bugs": {
-        "url": "https://github.com/mgonza02/goal-image-gallery/issues"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "lib/",
-        "README.md",
-        "CHANGELOG.md",
-        "QUICK_REFERENCE.md",
-        "MIGRATION.md",
-        "IMPLEMENTATION_GUIDE.md",
-        "IMPLEMENTATION_SUMMARY.md",
-        "DOCUMENTATION_UPDATE_SUMMARY.md",
-        "PACKAGE_CLEANUP_SUMMARY.md",
-        "LICENSE"
-    ],
-    "peerDependencies": {
-        "@emotion/react": "^11.0.0",
-        "@emotion/styled": "^11.0.0",
-        "@mui/icons-material": "^5.18.0",
-        "@mui/material": "^5.18.0",
-        "react": "^18.0.0",
-        "react-dom": "^18.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",
-        "format": "prettier --write src/**/*.js",
-        "format:check": "prettier --check src/**/*.js",
-        "clean": "rm -rf lib",
-        "validate": "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",
-        "prettier": "^3.4.2"
-    },
-    "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"
-    }
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=9.0.0"
+  },
+  "scripts": {
+    "build": "pnpm clean && pnpm build:js && pnpm 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",
+    "format": "prettier --write src/**/*.js",
+    "format:check": "prettier --check src/**/*.js",
+    "clean": "rm -rf lib",
+    "validate": "pnpm format:check",
+    "dev": "pnpm build -- --watch"
+  }
 }