@plone-collective/volto-image-editor 1.0.0-alpha.1

package/.changelog.draft

@@ -0,0 +1,19 @@
+## 1.0.0-alpha.1 (2025-10-20)
+
+### Feature
+
+- Adds support editing the brightness of an image. @Humanaice 
+- Adds support editing the contrast of an image. @Humanaice 
+- Adds support editing the hue of an image. @Humanaice 
+- Adds support editing the saturation of an image. @Humanaice 
+- Adds support for image cropping. @Humanaice 
+- Adds support for image flipping. @Humanaice 
+- Adds support for rotating the image by 90 degrees clockwise and counter-clockwise. @Humanaice 
+- Implement a widget to edit Images in Volto. @Humanaice 
+
+### Internal
+
+- Adds basic instructions to use GitHub Copilot features. @ericof 
+- Implement GitHub Action's workflows. @ericof 
+
+

package/.release-it.json

@@ -0,0 +1,34 @@
+{
+  "plugins": {
+    "../../core/packages/scripts/prepublish.js": {}
+  },
+  "hooks": {
+    "after:bump": [
+      "uvx towncrier build --draft --yes --version ${version} > .changelog.draft",
+      "uvx towncrier build --yes --version ${version}",
+      "cp ../../README.md ./ && cp CHANGELOG.md ../../CHANGELOG.md",
+      "python3 -c 'import json; data = json.load(open(\"../../package.json\")); data[\"version\"] = \"${version}\"; json.dump(data, open(\"../../package.json\", \"w\"), indent=2)'",
+      "git add ../../CHANGELOG.md ../../package.json"
+    ],
+    "after:release": "rm .changelog.draft README.md"
+  },
+  "npm": {
+    "publish": false
+  },
+  "plonePrePublish": {
+    "publish": true
+  },
+  "git": {
+    "changelog": "uvx towncrier build --draft --yes --version 0.0.0",
+    "requireUpstream": false,
+    "requireCleanWorkingDir": false,
+    "commitMessage": "Release ${version}",
+    "tagName": "${version}",
+    "tagAnnotation": "Release ${version}"
+  },
+  "github": {
+    "release": true,
+    "releaseName": "${version}",
+    "releaseNotes": "cat .changelog.draft"
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+<!-- You should *NOT* be adding new change log entries to this file.
+     You should create a file in the news directory instead.
+     For helpful instructions, please see:
+     https://6.docs.plone.org/contributing/index.html#contributing-change-log-label
+-->
+
+<!-- towncrier release notes start -->
+
+## 1.0.0-alpha.1 (2025-10-20)
+
+### Feature
+
+- Adds support editing the brightness of an image. @Humanaice 
+- Adds support editing the contrast of an image. @Humanaice 
+- Adds support editing the hue of an image. @Humanaice 
+- Adds support editing the saturation of an image. @Humanaice 
+- Adds support for image cropping. @Humanaice 
+- Adds support for image flipping. @Humanaice 
+- Adds support for rotating the image by 90 degrees clockwise and counter-clockwise. @Humanaice 
+- Implement a widget to edit Images in Volto. @Humanaice 
+
+### Internal
+
+- Adds basic instructions to use GitHub Copilot features. @ericof 
+- Implement GitHub Action's workflows. @ericof

package/README.md

@@ -0,0 +1,209 @@
+# Volto Image Editor (@plone-collective/volto-image-editor)
+
+An image editor, based on [React Advanced Image Cropper](https://www.npmjs.com/package/react-advanced-cropper), to be used with Plone and Volto.
+
+[![npm](https://img.shields.io/npm/v/@plone-collective/volto-image-editor)](https://www.npmjs.com/package/@plone-collective/volto-image-editor)
+[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook&logoColor=white&style=flat-square)](https://simplesconsultoria.github.io/volto-image-editor/)
+[![Code analysis checks](https://github.com/collective/volto-image-editor/actions/workflows/main.yml/badge.svg)](https://github.com/collective/volto-image-editor/actions/workflows/main.yml)
+
+## ✨ Features
+
+
+This add-on modifies Volto's File widget, providing an image editor with the following actions:
+
+- Crops the image. Supports many aspect ratios
+- Rotates the image in 90-degree increments
+- Flips the image horizontally or vertically
+- Adjusts the image saturation
+- Adjusts the image brightness
+- Adjusts the image contrast
+- Adjusts the image hue
+
+
+
+## 🚀 Installation
+
+> **Note:** This add-on requires Volto 18 or newer. Follow your project's official workflow for dependency management.
+
+
+To install this add-on, edit the `package.json` of your policy package (usually located in `packages/<policy-package>/package.json`):
+
+```json
+"addons": [
+    "@plone-collective/volto-image-editor"
+],
+"dependencies": {
+    "@plone-collective/volto-image-editor": "*"
+}
+```
+
+After editing, follow your project's standard process to update dependencies and rebuild.
+
+## 🧪 Test Installation
+
+Visit http://localhost:3000/ in a browser, log in, and verify that the image editor features are available in the File widget.
+
+## 🌍 Internationalization (i18n)
+
+All UI strings in this add-on are translatable. Use the provided `make i18n` command to extract and sync translation messages.
+
+## 🛠️ Development
+
+
+Development for this add-on uses pnpm workspaces, the latest `mrs-developer`, and Volto core improvements. It is compatible only with pnpm and Volto 18.
+
+
+### 📋 Prerequisites
+
+-   An [operating system](https://6.docs.plone.org/install/create-project-cookieplone.html#prerequisites-for-installation) that runs all the requirements mentioned.
+-   [nvm](https://6.docs.plone.org/install/create-project-cookieplone.html#nvm)
+-   [Node.js and pnpm](https://6.docs.plone.org/install/create-project.html#node-js) 22
+-   [Make](https://6.docs.plone.org/install/create-project-cookieplone.html#make)
+-   [Git](https://6.docs.plone.org/install/create-project-cookieplone.html#git)
+-   [Docker](https://docs.docker.com/get-started/get-docker/) (optional)
+
+
+### 📦 Installation
+
+1.  Clone this repository, then change your working directory.
+
+    ```shell
+    git clone git@github.com:collective/volto-image-editor.git
+    cd volto-image-editor
+    ```
+
+2.  Install this code base.
+
+    ```shell
+    make install
+    ```
+
+
+### 🧰 Make Convenience Commands
+
+Run `make help` to list the available commands.
+
+```text
+help                             Show this help
+install                          Installs the add-on in a development environment
+start                            Starts Volto, allowing reloading of the add-on during development
+build                            Build a production bundle for distribution of the project with the add-on
+i18n                             Sync i18n
+ci-i18n                          Check if i18n is not synced
+format                           Format codebase
+lint                             Lint, or catch and remove problems, in code base
+release                          Release the add-on on npmjs.org
+release-dry-run                  Dry-run the release of the add-on on npmjs.org
+test                             Run unit tests
+ci-test                          Run unit tests in CI
+backend-docker-start             Starts a Docker-based backend for development
+storybook-start                  Start Storybook server on port 6006
+storybook-build                  Build Storybook
+acceptance-frontend-dev-start    Start acceptance frontend in development mode
+acceptance-frontend-prod-start   Start acceptance frontend in production mode
+acceptance-backend-start         Start backend acceptance server
+ci-acceptance-backend-start      Start backend acceptance server in headless mode for CI
+acceptance-test                  Start Cypress in interactive mode
+ci-acceptance-test               Run cypress tests in headless mode for CI
+```
+
+### 🏗️ Development Environment Setup
+
+Install package requirements:
+
+```shell
+make install
+```
+
+### 🚦 Start Developing
+
+Start the backend:
+
+```shell
+make backend-docker-start
+```
+
+In a separate terminal session, start the frontend:
+
+```shell
+make start
+```
+
+### 🧹 Lint Code
+
+Run ESLint, Prettier, and Stylelint in analyze mode:
+
+```shell
+make lint
+```
+
+### 🎨 Format Code
+
+Run ESLint, Prettier, and Stylelint in fix mode:
+
+```shell
+make format
+```
+
+### 🌍 Internationalization (i18n)
+
+Extract the i18n messages to locales:
+
+```shell
+make i18n
+```
+
+### 🧪 Unit Tests
+
+Run unit tests:
+
+```shell
+make test
+```
+
+### 🧪 Run Cypress Tests
+
+Run each of these steps in separate terminal sessions:
+
+In the first session, start the frontend in development mode:
+
+```shell
+make acceptance-frontend-dev-start
+```
+
+In the second session, start the backend acceptance server:
+
+```shell
+make acceptance-backend-start
+```
+
+In the third session, start the Cypress interactive test runner:
+
+```shell
+make acceptance-test
+```
+
+
+## 📄 License
+
+This project is licensed under the MIT license.
+
+
+## 🙏 Credits and Acknowledgements
+
+The development of this add-on was supported by:
+
+<div style="text-align:center;">
+    <div>
+        <img src="https://raw.githubusercontent.com/collective/volto-image-editor/refs/heads/main/docs/docs/_static/ifpb-icon.svg" height="50px" style="max-height:50px">
+        <h3>Instituto Federal da Paraíba</h3>
+    </a>
+    </div>
+    <div>
+        <img src="https://raw.githubusercontent.com/collective/volto-image-editor/refs/heads/main/docs/docs/_static/logo-simples.svg"  height="50px" style="max-height:50px">
+        <h3>Simples Consultoria</h3>
+        </a>
+    </div>
+</div>
+
+Generated using [Cookieplone (0.9.9)](https://github.com/plone/cookieplone) and [cookieplone-templates (62683ae)](https://github.com/plone/cookieplone-templates/commit/62683aec96c2b6454cc32e06e57910fab3d52425) on 2025-10-14 23:13:02.127574. A special thanks to all contributors and supporters!

package/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,187 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: de\n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. Default: "Aspect Ratio"
+#: components/ImageEditor/components/SettingsModal
+msgid "Aspect Ratio"
+msgstr ""
+
+#. Default: "Choose a file"
+#: components/Widgets/FileWidget
+msgid "Choose a file"
+msgstr ""
+
+#. Default: "Circle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Circle"
+msgstr ""
+
+#. Default: "Drop file here to replace the existing file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to replace the existing file"
+msgstr ""
+
+#. Default: "Drop file here to upload a new file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to upload a new file"
+msgstr ""
+
+#. Default: "Drop files here ..."
+#: components/Widgets/FileWidget
+msgid "Drop files here ..."
+msgstr ""
+
+#. Default: "Edit image"
+#: components/ImageEditor/ImageEditorWrapper
+msgid "Edit image"
+msgstr ""
+
+#. Default: "Editor Settings"
+#: components/ImageEditor/components/SettingsModal
+msgid "Editor Settings"
+msgstr ""
+
+#. Default: "File is not of the accepted type {accept}"
+#: components/Widgets/FileWidget
+msgid "File is not of the accepted type {accept}"
+msgstr ""
+
+#. Default: "Fill"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fill Area"
+msgstr ""
+
+#. Default: "Fit"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fit Area"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "Free aspect ratio"
+msgstr ""
+
+#. Default: "Image Restriction"
+#: components/ImageEditor/components/SettingsModal
+msgid "Image Restriction"
+msgstr ""
+
+#. Default: "2:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Landscape (2:1)"
+msgstr ""
+
+#. Default: "Max height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max height"
+msgstr ""
+
+#. Default: "Max width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max width"
+msgstr ""
+
+#. Default: "Maximum Crop Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Maximum Crop Dimensions"
+msgstr ""
+
+#. Default: "Min height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min height"
+msgstr ""
+
+#. Default: "Min width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min width"
+msgstr ""
+
+#. Default: "Minimum Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Minimum Dimensions"
+msgstr ""
+
+#. Default: "9:16"
+#: components/ImageEditor/components/SettingsModal
+msgid "Mobile (9:16)"
+msgstr ""
+
+#. Default: "4:3"
+#: components/ImageEditor/components/SettingsModal
+msgid "Monitor (4:3)"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "No Restriction"
+msgstr ""
+
+#. Default: "3:4"
+#: components/ImageEditor/components/SettingsModal
+msgid "Photo (3:4)"
+msgstr ""
+
+#. Default: "1:2"
+#: components/ImageEditor/components/SettingsModal
+msgid "Portrait (1:2)"
+msgstr ""
+
+#. Default: "Rectangle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Rectangle"
+msgstr ""
+
+#. Default: "Replace existing file"
+#: components/Widgets/FileWidget
+msgid "Replace existing file"
+msgstr ""
+
+#. Default: "Reset rotation and flip"
+#: components/ImageEditor/components/Navigation
+msgid "Reset rotation and flip"
+msgstr ""
+
+#. Default: "1:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Square (1:1)"
+msgstr ""
+
+#. Default: "Stencil"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil"
+msgstr ""
+
+#. Default: "Stencil Grid"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Grid"
+msgstr ""
+
+#. Default: "Stencil Type"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Type"
+msgstr ""
+
+#. Default: "The file you uploaded exceeded the maximum allowed size of {size} bytes"
+#: components/Widgets/FileWidget
+msgid "The file you uploaded exceeded the maximum allowed size of {size} bytes"
+msgstr ""
+
+#. Default: "21:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Ultra Wide (21:9)"
+msgstr ""
+
+#. Default: "16:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Widescreen (16:9)"
+msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,187 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: en\n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. Default: "Aspect Ratio"
+#: components/ImageEditor/components/SettingsModal
+msgid "Aspect Ratio"
+msgstr ""
+
+#. Default: "Choose a file"
+#: components/Widgets/FileWidget
+msgid "Choose a file"
+msgstr ""
+
+#. Default: "Circle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Circle"
+msgstr ""
+
+#. Default: "Drop file here to replace the existing file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to replace the existing file"
+msgstr ""
+
+#. Default: "Drop file here to upload a new file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to upload a new file"
+msgstr ""
+
+#. Default: "Drop files here ..."
+#: components/Widgets/FileWidget
+msgid "Drop files here ..."
+msgstr ""
+
+#. Default: "Edit image"
+#: components/ImageEditor/ImageEditorWrapper
+msgid "Edit image"
+msgstr ""
+
+#. Default: "Editor Settings"
+#: components/ImageEditor/components/SettingsModal
+msgid "Editor Settings"
+msgstr ""
+
+#. Default: "File is not of the accepted type {accept}"
+#: components/Widgets/FileWidget
+msgid "File is not of the accepted type {accept}"
+msgstr ""
+
+#. Default: "Fill"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fill Area"
+msgstr ""
+
+#. Default: "Fit"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fit Area"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "Free aspect ratio"
+msgstr ""
+
+#. Default: "Image Restriction"
+#: components/ImageEditor/components/SettingsModal
+msgid "Image Restriction"
+msgstr ""
+
+#. Default: "2:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Landscape (2:1)"
+msgstr ""
+
+#. Default: "Max height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max height"
+msgstr ""
+
+#. Default: "Max width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max width"
+msgstr ""
+
+#. Default: "Maximum Crop Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Maximum Crop Dimensions"
+msgstr ""
+
+#. Default: "Min height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min height"
+msgstr ""
+
+#. Default: "Min width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min width"
+msgstr ""
+
+#. Default: "Minimum Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Minimum Dimensions"
+msgstr ""
+
+#. Default: "9:16"
+#: components/ImageEditor/components/SettingsModal
+msgid "Mobile (9:16)"
+msgstr ""
+
+#. Default: "4:3"
+#: components/ImageEditor/components/SettingsModal
+msgid "Monitor (4:3)"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "No Restriction"
+msgstr ""
+
+#. Default: "3:4"
+#: components/ImageEditor/components/SettingsModal
+msgid "Photo (3:4)"
+msgstr ""
+
+#. Default: "1:2"
+#: components/ImageEditor/components/SettingsModal
+msgid "Portrait (1:2)"
+msgstr ""
+
+#. Default: "Rectangle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Rectangle"
+msgstr ""
+
+#. Default: "Replace existing file"
+#: components/Widgets/FileWidget
+msgid "Replace existing file"
+msgstr ""
+
+#. Default: "Reset rotation and flip"
+#: components/ImageEditor/components/Navigation
+msgid "Reset rotation and flip"
+msgstr ""
+
+#. Default: "1:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Square (1:1)"
+msgstr ""
+
+#. Default: "Stencil"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil"
+msgstr ""
+
+#. Default: "Stencil Grid"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Grid"
+msgstr ""
+
+#. Default: "Stencil Type"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Type"
+msgstr ""
+
+#. Default: "The file you uploaded exceeded the maximum allowed size of {size} bytes"
+#: components/Widgets/FileWidget
+msgid "The file you uploaded exceeded the maximum allowed size of {size} bytes"
+msgstr ""
+
+#. Default: "21:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Ultra Wide (21:9)"
+msgstr ""
+
+#. Default: "16:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Widescreen (16:9)"
+msgstr ""