allaw-ui 3.0.1 → 3.0.2

package/dist/components/molecules/fileUploader/FileUploader.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
+import { CropMetadata } from "./ImageCropperModal";
 export interface FileUploaderProps {
     acceptedExtensions: string[];
     maxFileSizeMB: number;
     enableDragAndDrop?: boolean;
+    enableCropping?: boolean;
+    cropShape?: "circle" | "square";
     iconUrl?: string;
     descriptionParts?: {
         beforeLink: string;
@@ -10,7 +13,7 @@ export interface FileUploaderProps {
         linkUrl: string;
         afterLink: string;
     };
-    onFileRead?: (file: File, fileContent: ArrayBuffer) => void;
+    onFileRead?: (file: File, fileContent: ArrayBuffer, cropMetadata?: CropMetadata) => void;
     onFileRemove?: () => void;
     uploadProgress?: number;
     isLoading?: boolean;

package/dist/components/molecules/fileUploader/FileUploader.js

@@ -35,11 +35,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React, { useState, useRef } from "react";
+import Image from "next/image";
 import styles from "./FileUploader.module.css";
+import ImageCropperModal from "./ImageCropperModal";
 var FileUploader = function (_a) {
-    var acceptedExtensions = _a.acceptedExtensions, maxFileSizeMB = _a.maxFileSizeMB, _b = _a.enableDragAndDrop, enableDragAndDrop = _b === void 0 ? true : _b, iconUrl = _a.iconUrl, descriptionParts = _a.descriptionParts, onFileRead = _a.onFileRead, onFileRemove = _a.onFileRemove, _c = _a.uploadProgress, uploadProgress = _c === void 0 ? 0 : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.errorMessage, errorMessage = _e === void 0 ? null : _e, _f = _a.buttonLabel, buttonLabel = _f === void 0 ? "Choisir un fichier" : _f, _g = _a.acceptedLabel, acceptedLabel = _g === void 0 ? "Format accepté :" : _g, _h = _a.maxSizeLabel, maxSizeLabel = _h === void 0 ? "Taille maximale :" : _h, fileName = _a.fileName, fileSize = _a.fileSize;
-    var _j = useState(null), selectedFile = _j[0], setSelectedFile = _j[1];
-    var _k = useState(false), isHovering = _k[0], setIsHovering = _k[1];
+    var acceptedExtensions = _a.acceptedExtensions, maxFileSizeMB = _a.maxFileSizeMB, _b = _a.enableDragAndDrop, enableDragAndDrop = _b === void 0 ? true : _b, _c = _a.enableCropping, enableCropping = _c === void 0 ? false : _c, _d = _a.cropShape, cropShape = _d === void 0 ? "square" : _d, iconUrl = _a.iconUrl, descriptionParts = _a.descriptionParts, onFileRead = _a.onFileRead, onFileRemove = _a.onFileRemove, _e = _a.uploadProgress, uploadProgress = _e === void 0 ? 0 : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? null : _g, _h = _a.buttonLabel, buttonLabel = _h === void 0 ? "Choisir un fichier" : _h, _j = _a.acceptedLabel, acceptedLabel = _j === void 0 ? "Format accepté :" : _j, _k = _a.maxSizeLabel, maxSizeLabel = _k === void 0 ? "Taille maximale :" : _k, fileName = _a.fileName, fileSize = _a.fileSize;
+    var _l = useState(null), selectedFile = _l[0], setSelectedFile = _l[1];
+    var _m = useState(null), fileContent = _m[0], setFileContent = _m[1];
+    var _o = useState(false), isHovering = _o[0], setIsHovering = _o[1];
+    var _p = useState(false), showCropper = _p[0], setShowCropper = _p[1];
     var fileInputRef = useRef(null);
     var resetFileInput = function () {
         if (fileInputRef.current) {
@@ -55,6 +59,12 @@ var FileUploader = function (_a) {
         var isValidSize = file.size <= maxFileSizeMB * 1024 * 1024;
         return isValidExtension && isValidSize;
     };
+    var isImageFile = function (file) {
+        var _a;
+        var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        var imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp"];
+        return imageExtensions.includes(fileExtension);
+    };
     var handleFileSelect = function (event) { return __awaiter(void 0, void 0, void 0, function () {
         var file;
         return __generator(this, function (_a) {
@@ -85,7 +95,7 @@ var FileUploader = function (_a) {
         });
     }); };
     var processFile = function (file) { return __awaiter(void 0, void 0, void 0, function () {
-        var fileContent, error_1;
+        var content, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -96,11 +106,20 @@ var FileUploader = function (_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    setSelectedFile(file);
                     return [4 /*yield*/, file.arrayBuffer()];
                 case 2:
-                    fileContent = _a.sent();
-                    onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(file, fileContent);
+                    content = _a.sent();
+                    setFileContent(content);
+                    // Si c'est une image et que le cadrage est activé, afficher le composant de cadrage
+                    if (enableCropping && isImageFile(file)) {
+                        setSelectedFile(file);
+                        setShowCropper(true);
+                    }
+                    else {
+                        // Sinon, traiter normalement
+                        setSelectedFile(file);
+                        onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(file, content);
+                    }
                     return [3 /*break*/, 4];
                 case 3:
                     error_1 = _a.sent();
@@ -111,8 +130,20 @@ var FileUploader = function (_a) {
             }
         });
     }); };
+    var handleCropCancel = function () {
+        setShowCropper(false);
+        setSelectedFile(null);
+        resetFileInput();
+    };
+    var handleCropConfirm = function (cropMetadata) {
+        setShowCropper(false);
+        if (selectedFile && fileContent) {
+            onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
+        }
+    };
     var handleFileDelete = function () {
         setSelectedFile(null);
+        setFileContent(null);
         resetFileInput();
         onFileRemove === null || onFileRemove === void 0 ? void 0 : onFileRemove();
     };
@@ -130,7 +161,7 @@ var FileUploader = function (_a) {
     var displayFileSize = fileSize !== undefined ? fileSize : selectedFile ? selectedFile.size : 0;
     var displayFileName = fileName || (selectedFile ? selectedFile.name : "");
     return (React.createElement("div", { className: styles.upload_main_container },
-        enableDragAndDrop ? (React.createElement("div", { className: "".concat(styles.upload_container, " ").concat(isHovering ? styles.drag_over : ""), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
+        enableDragAndDrop ? (React.createElement("div", { className: "".concat(styles.upload_container, " ").concat(isHovering ? styles.drag_over : ""), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } },
             React.createElement("div", { className: styles.upload_content },
                 React.createElement("div", { className: styles.upload_icons },
                     React.createElement("div", { className: styles.upload_file_icon },
@@ -142,10 +173,9 @@ var FileUploader = function (_a) {
                     React.createElement("span", null,
                         "Glissez-d\u00E9posez votre fichier, ou",
                         " ",
-                        React.createElement("label", { htmlFor: "file-upload", className: styles.file_upload_label },
-                            React.createElement("span", { className: styles.btn_tertiary }, buttonLabel),
-                            React.createElement("input", { id: "file-upload", ref: fileInputRef, type: "file", accept: acceptedExtensions.join(","), style: { display: "none" }, onChange: handleFileSelect }))))))) : (React.createElement("div", { className: styles.manual_upload_container },
-            React.createElement("label", { htmlFor: "file-upload", className: styles.file_upload_label },
+                        React.createElement("span", { className: styles.btn_tertiary }, buttonLabel),
+                        React.createElement("input", { id: "file-upload", ref: fileInputRef, type: "file", accept: acceptedExtensions.join(","), style: { display: "none" }, onChange: handleFileSelect })))))) : (React.createElement("div", { className: styles.manual_upload_container },
+            React.createElement("button", { className: styles.file_upload_button, onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } },
                 React.createElement("span", { className: styles.btn_tertiary }, buttonLabel),
                 React.createElement("input", { id: "file-upload", ref: fileInputRef, type: "file", accept: acceptedExtensions.join(","), style: { display: "none" }, onChange: handleFileSelect })))),
         React.createElement("div", { className: styles.limits },
@@ -171,7 +201,7 @@ var FileUploader = function (_a) {
                 React.createElement("span", { className: styles.error_message }, errorMessage)))),
         (isLoading || selectedFile || fileName) && (React.createElement("div", { className: styles.uploaded_file_container },
             React.createElement("div", { className: styles.uploaded_file_content },
-                React.createElement("div", { className: styles.uploaded_file_icon }, iconUrl ? (React.createElement("img", { src: iconUrl, alt: "File icon", className: styles.file_icon })) : (React.createElement("i", { className: "allaw-icon-file" }))),
+                React.createElement("div", { className: styles.uploaded_file_icon }, iconUrl ? (React.createElement(Image, { src: iconUrl, alt: "File icon", className: styles.file_icon, width: 20, height: 20 })) : (React.createElement("i", { className: "allaw-icon-file" }))),
                 React.createElement("div", { className: styles.uploaded_file_name_size },
                     React.createElement("div", { className: styles.uploaded_file_name },
                         React.createElement("span", { className: styles.file_name }, displayFileName || "Analyse en cours...")),
@@ -181,6 +211,7 @@ var FileUploader = function (_a) {
                     React.createElement("div", { className: styles.uploaded_file_delete, onClick: handleFileDelete },
                         React.createElement("i", { className: "allaw-icon-close" }))))),
             React.createElement("div", { className: styles.uploaded_file_progress_bar }, uploadProgress > 0 && (React.createElement("div", { className: styles.progress_bar_container },
-                React.createElement("div", { className: styles.progress_bar_fill, style: { width: "".concat((uploadProgress / 10) * 100, "%") } }))))))));
+                React.createElement("div", { className: styles.progress_bar_fill, style: { width: "".concat((uploadProgress / 10) * 100, "%") } })))))),
+        showCropper && selectedFile && (React.createElement(ImageCropperModal, { file: selectedFile, shape: cropShape, onCancel: handleCropCancel, onConfirm: handleCropConfirm }))));
 };
 export default FileUploader;

package/dist/components/molecules/fileUploader/FileUploader.module.css

@@ -19,6 +19,7 @@
   background-color: #ffffff;
   width: 100%;
   transition: all 0.2s ease-in-out;
+  cursor: pointer;
 }
 
 .manual_upload_container {
@@ -265,6 +266,16 @@
   font-weight: 600;
 }
 
+.file_upload_button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+
 @media (max-width: 768px) {
   .upload_container {
     padding: 2rem 1rem;

package/dist/components/molecules/fileUploader/FileUploader.stories.d.ts

@@ -29,53 +29,69 @@ declare namespace _default {
             let description_2: string;
             export { description_2 as description };
         }
-        namespace iconUrl {
+        namespace enableCropping {
             let control_3: string;
             export { control_3 as control };
             let description_3: string;
             export { description_3 as description };
         }
-        namespace buttonLabel {
-            let control_4: string;
+        namespace cropShape {
+            export namespace control_4 {
+                let type: string;
+                let options: string[];
+            }
             export { control_4 as control };
             let description_4: string;
             export { description_4 as description };
         }
-        namespace acceptedLabel {
+        namespace iconUrl {
             let control_5: string;
             export { control_5 as control };
             let description_5: string;
             export { description_5 as description };
         }
-        namespace maxSizeLabel {
+        namespace buttonLabel {
             let control_6: string;
             export { control_6 as control };
             let description_6: string;
             export { description_6 as description };
         }
-        namespace uploadProgress {
-            export namespace control_7 {
-                let type: string;
-                let min: number;
-                let max: number;
-                let step: number;
-            }
+        namespace acceptedLabel {
+            let control_7: string;
             export { control_7 as control };
             let description_7: string;
             export { description_7 as description };
         }
-        namespace isLoading {
+        namespace maxSizeLabel {
             let control_8: string;
             export { control_8 as control };
             let description_8: string;
             export { description_8 as description };
         }
-        namespace errorMessage {
-            let control_9: string;
+        namespace uploadProgress {
+            export namespace control_9 {
+                let type_1: string;
+                export { type_1 as type };
+                export let min: number;
+                export let max: number;
+                export let step: number;
+            }
             export { control_9 as control };
             let description_9: string;
             export { description_9 as description };
         }
+        namespace isLoading {
+            let control_10: string;
+            export { control_10 as control };
+            let description_10: string;
+            export { description_10 as description };
+        }
+        namespace errorMessage {
+            let control_11: string;
+            export { control_11 as control };
+            let description_11: string;
+            export { description_11 as description };
+        }
     }
 }
 export default _default;
@@ -85,4 +101,6 @@ export const WithoutDragAndDrop: any;
 export const WithError: any;
 export const WithProgress: any;
 export const MultipleExtensions: any;
+export const WithSquareCropping: any;
+export const WithCircleCropping: any;
 import FileUploader from "./FileUploader";

package/dist/components/molecules/fileUploader/FileUploader.stories.js

@@ -77,6 +77,14 @@ export default {
             control: "boolean",
             description: "Active/désactive la zone de drag & drop",
         },
+        enableCropping: {
+            control: "boolean",
+            description: "Active/désactive le cadrage pour les images",
+        },
+        cropShape: {
+            control: { type: "select", options: ["circle", "square"] },
+            description: "Forme du masque de cadrage (cercle ou carré)",
+        },
         iconUrl: {
             control: "text",
             description: "URL de l'icône du type de fichier",
@@ -111,16 +119,21 @@ export default {
 var Template = function (args) {
     var _a = useState(null), file = _a[0], setFile = _a[1];
     var _b = useState(null), fileContent = _b[0], setFileContent = _b[1];
-    var _c = useState(0), progress = _c[0], setProgress = _c[1];
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    var _e = useState(null), error = _e[0], setError = _e[1];
-    var handleFileRead = function (file, content) { return __awaiter(void 0, void 0, void 0, function () {
+    var _c = useState(null), cropMetadata = _c[0], setCropMetadata = _c[1];
+    var _d = useState(0), progress = _d[0], setProgress = _d[1];
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
+    var _f = useState(null), error = _f[0], setError = _f[1];
+    var handleFileRead = function (file, content, cropMeta) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setLoading(true);
                     setFile(file);
                     setFileContent(content);
+                    if (cropMeta) {
+                        setCropMetadata(cropMeta);
+                        console.log("Métadonnées de cadrage:", cropMeta);
+                    }
                     // Simuler une progression
                     setProgress(2);
                     return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
@@ -144,21 +157,32 @@ var Template = function (args) {
     var handleFileRemove = function () {
         setFile(null);
         setFileContent(null);
+        setCropMetadata(null);
         setProgress(0);
         setError(null);
         console.log("Fichier supprimé");
     };
-    return (React.createElement(FileUploader, __assign({}, args, { onFileRead: handleFileRead, onFileRemove: handleFileRemove, uploadProgress: progress, isLoading: loading, errorMessage: error })));
+    return (React.createElement("div", null,
+        React.createElement(FileUploader, __assign({}, args, { onFileRead: handleFileRead, onFileRemove: handleFileRemove, uploadProgress: progress, isLoading: loading, errorMessage: error })),
+        cropMetadata && (React.createElement("div", { style: {
+                marginTop: "20px",
+                padding: "10px",
+                backgroundColor: "#f5f5f5",
+                borderRadius: "8px",
+            } },
+            React.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", color: "#456073" } }, "M\u00E9tadonn\u00E9es de cadrage:"),
+            React.createElement("code", { style: { display: "block", fontSize: "12px", color: "#333" } }, JSON.stringify(cropMetadata, null, 2))))));
 };
 export var Default = Template.bind({});
 Default.args = {
-    acceptedExtensions: [".pdf"],
+    acceptedExtensions: [".jpg", ".jpeg", ".png", ".webp"],
     maxFileSizeMB: 5,
     enableDragAndDrop: true,
-    buttonLabel: "Choisir un fichier",
-    acceptedLabel: "Format accepté :",
+    enableCropping: true,
+    cropShape: "circle",
+    buttonLabel: "Choisir une image",
+    acceptedLabel: "Formats acceptés :",
     maxSizeLabel: "Taille maximale :",
-    iconUrl: pdfIcon,
 };
 export var WithDescription = Template.bind({});
 WithDescription.args = __assign(__assign({}, Default.args), { descriptionParts: {
@@ -176,3 +200,27 @@ WithProgress.args = __assign(__assign({}, Default.args), { uploadProgress: 6, is
 // Exemple avec des extensions multiples
 export var MultipleExtensions = Template.bind({});
 MultipleExtensions.args = __assign(__assign({}, Default.args), { acceptedExtensions: [".pdf", ".doc", ".docx"] });
+// Exemple avec le cadrage d'image en carré
+export var WithSquareCropping = Template.bind({});
+WithSquareCropping.args = {
+    acceptedExtensions: [".jpg", ".jpeg", ".png", ".webp"],
+    maxFileSizeMB: 5,
+    enableDragAndDrop: true,
+    enableCropping: true,
+    cropShape: "square",
+    buttonLabel: "Choisir une image",
+    acceptedLabel: "Formats acceptés :",
+    maxSizeLabel: "Taille maximale :",
+};
+// Exemple avec le cadrage d'image en cercle
+export var WithCircleCropping = Template.bind({});
+WithCircleCropping.args = {
+    acceptedExtensions: [".jpg", ".jpeg", ".png", ".webp"],
+    maxFileSizeMB: 5,
+    enableDragAndDrop: true,
+    enableCropping: true,
+    cropShape: "circle",
+    buttonLabel: "Choisir une image",
+    acceptedLabel: "Formats acceptés :",
+    maxSizeLabel: "Taille maximale :",
+};

package/dist/components/molecules/fileUploader/ImageCropperModal.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface CropMetadata {
+    zoom: number;
+    offsetX: number;
+    offsetY: number;
+    shape: "circle" | "square";
+}
+interface ImageCropperModalProps {
+    file: File;
+    shape: "circle" | "square";
+    onCancel: () => void;
+    onConfirm: (cropMetadata: CropMetadata) => void;
+}
+declare const ImageCropperModal: React.FC<ImageCropperModalProps>;
+export default ImageCropperModal;

package/dist/components/molecules/fileUploader/ImageCropperModal.js

@@ -0,0 +1,211 @@
+import React, { useState, useRef, useEffect } from "react";
+import Image from "next/image";
+import styles from "./ImageCropperModal.module.css";
+var ImageCropperModal = function (_a) {
+    var file = _a.file, shape = _a.shape, onCancel = _a.onCancel, onConfirm = _a.onConfirm;
+    var _b = useState(1), zoom = _b[0], setZoom = _b[1]; // Facteur de zoom relatif (1-3)
+    var _c = useState(1), baseZoom = _c[0], setBaseZoom = _c[1]; // Zoom de base pour fit l'image
+    var _d = useState({
+        x: 0,
+        y: 0,
+    }), position = _d[0], setPosition = _d[1];
+    var _e = useState(false), isDragging = _e[0], setIsDragging = _e[1];
+    var _f = useState(null), imageSrc = _f[0], setImageSrc = _f[1];
+    var _g = useState({
+        x: 0,
+        y: 0,
+    }), dragStart = _g[0], setDragStart = _g[1];
+    var _h = useState(null), imageSize = _h[0], setImageSize = _h[1];
+    var imageRef = useRef(null);
+    var cropAreaRef = useRef(null);
+    var imageWrapperRef = useRef(null);
+    // Calcule le zoom de base pour que l'image "fit" parfaitement dans le cadre
+    var calculateFitZoom = function (imgWidth, imgHeight) {
+        if (!cropAreaRef.current)
+            return 1;
+        var cropRect = cropAreaRef.current.getBoundingClientRect();
+        var cropWidth = cropRect.width;
+        var cropHeight = cropRect.height;
+        // Calcul du zoom pour que l'image couvre complètement le cadre
+        // On utilise max pour assurer que l'image couvre tout le cadre, sans espace vide
+        var fitZoom = Math.max(cropWidth / imgWidth, cropHeight / imgHeight);
+        return fitZoom;
+    };
+    // Calcule les limites de déplacement pour éviter les zones vides
+    var calculateBoundaries = function () {
+        if (!cropAreaRef.current || !imageSize) {
+            return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+        }
+        var cropRect = cropAreaRef.current.getBoundingClientRect();
+        var cropWidth = cropRect.width;
+        var cropHeight = cropRect.height;
+        // Taille de l'image après application des deux zooms
+        var totalZoom = baseZoom * zoom;
+        var scaledWidth = imageSize.width * totalZoom;
+        var scaledHeight = imageSize.height * totalZoom;
+        // Si l'image est plus petite que le crop à cause du zoom
+        // ce qui ne devrait pas arriver avec notre logique, mais au cas où
+        if (scaledWidth <= cropWidth || scaledHeight <= cropHeight) {
+            return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+        }
+        // Calcule combien l'image peut être déplacée sans créer d'espace vide
+        var xLimit = Math.max(0, (scaledWidth - cropWidth) / 2);
+        var yLimit = Math.max(0, (scaledHeight - cropHeight) / 2);
+        return {
+            minX: -xLimit,
+            maxX: xLimit,
+            minY: -yLimit,
+            maxY: yLimit,
+        };
+    };
+    // Centre l'image dans la zone de crop
+    var centerImage = function () {
+        setPosition({ x: 0, y: 0 });
+    };
+    useEffect(function () {
+        var reader = new FileReader();
+        reader.onload = function (e) {
+            if (e.target && typeof e.target.result === "string") {
+                setImageSrc(e.target.result);
+                // Charge l'image pour obtenir ses dimensions
+                var img_1 = new window.Image();
+                img_1.onload = function () {
+                    setImageSize({ width: img_1.width, height: img_1.height });
+                    // Attendre que les refs soient disponibles
+                    setTimeout(function () {
+                        var fitZoom = calculateFitZoom(img_1.width, img_1.height);
+                        setBaseZoom(fitZoom);
+                        setZoom(1); // Zoom initial toujours à 1 (relatif)
+                        centerImage();
+                    }, 50);
+                };
+                img_1.src = e.target.result;
+            }
+        };
+        reader.readAsDataURL(file);
+        return function () {
+            reader.abort();
+        };
+    }, [file]);
+    // Recalcule les limites quand le zoom change
+    useEffect(function () {
+        // Quand zoom change, recalculer les limites et ajuster la position si nécessaire
+        if (imageSize && cropAreaRef.current) {
+            var boundaries = calculateBoundaries();
+            // Ajuste la position pour rester dans les limites
+            setPosition({
+                x: Math.max(boundaries.minX, Math.min(boundaries.maxX, position.x)),
+                y: Math.max(boundaries.minY, Math.min(boundaries.maxY, position.y)),
+            });
+        }
+    }, [zoom, imageSize]);
+    var handleMouseDown = function (e) {
+        e.preventDefault();
+        setIsDragging(true);
+        setDragStart({
+            x: e.clientX - position.x,
+            y: e.clientY - position.y,
+        });
+    };
+    var handleTouchStart = function (e) {
+        if (e.touches.length !== 1)
+            return;
+        e.preventDefault();
+        setIsDragging(true);
+        setDragStart({
+            x: e.touches[0].clientX - position.x,
+            y: e.touches[0].clientY - position.y,
+        });
+    };
+    var updatePosition = function (clientX, clientY) {
+        if (!isDragging)
+            return;
+        var newX = clientX - dragStart.x;
+        var newY = clientY - dragStart.y;
+        var boundaries = calculateBoundaries();
+        setPosition({
+            x: Math.max(boundaries.minX, Math.min(boundaries.maxX, newX)),
+            y: Math.max(boundaries.minY, Math.min(boundaries.maxY, newY)),
+        });
+    };
+    var handleMouseMove = function (e) {
+        if (!isDragging)
+            return;
+        updatePosition(e.clientX, e.clientY);
+    };
+    var handleTouchMove = function (e) {
+        if (!isDragging || e.touches.length !== 1)
+            return;
+        e.preventDefault();
+        updatePosition(e.touches[0].clientX, e.touches[0].clientY);
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    var handleTouchEnd = function () {
+        setIsDragging(false);
+    };
+    var handleZoomChange = function (e) {
+        var newZoom = parseFloat(e.target.value);
+        setZoom(Math.min(3, Math.max(1, newZoom)));
+    };
+    useEffect(function () {
+        if (isDragging) {
+            document.addEventListener("mousemove", handleDocumentMouseMove);
+            document.addEventListener("mouseup", handleDocumentMouseUp);
+            document.addEventListener("touchmove", handleDocumentTouchMove, {
+                passive: false,
+            });
+            document.addEventListener("touchend", handleDocumentTouchEnd);
+        }
+        return function () {
+            document.removeEventListener("mousemove", handleDocumentMouseMove);
+            document.removeEventListener("mouseup", handleDocumentMouseUp);
+            document.removeEventListener("touchmove", handleDocumentTouchMove);
+            document.removeEventListener("touchend", handleDocumentTouchEnd);
+        };
+    }, [isDragging, dragStart, zoom, imageSize]);
+    var handleDocumentMouseMove = function (e) {
+        updatePosition(e.clientX, e.clientY);
+    };
+    var handleDocumentTouchMove = function (e) {
+        if (e.touches.length !== 1)
+            return;
+        e.preventDefault();
+        updatePosition(e.touches[0].clientX, e.touches[0].clientY);
+    };
+    var handleDocumentMouseUp = function () {
+        setIsDragging(false);
+    };
+    var handleDocumentTouchEnd = function () {
+        setIsDragging(false);
+    };
+    return (React.createElement("div", { className: styles.modal_overlay },
+        React.createElement("div", { className: styles.modal_content },
+            React.createElement("div", { className: styles.modal_header },
+                React.createElement("h3", { className: styles.modal_title }, "Recadrer l'image")),
+            React.createElement("div", { className: styles.crop_container },
+                React.createElement("div", { className: styles.image_wrapper, ref: imageWrapperRef }, imageSrc && (React.createElement("div", { ref: imageRef, className: styles.image_container, style: {
+                        transform: "translate(".concat(position.x, "px, ").concat(position.y, "px) scale(").concat(baseZoom * zoom, ")"),
+                        cursor: isDragging ? "grabbing" : "grab",
+                    } },
+                    React.createElement(Image, { src: imageSrc, alt: "Aper\u00E7u", className: styles.image, draggable: false, width: 1000, height: 1000, priority: true, unoptimized: true })))),
+                React.createElement("div", { ref: cropAreaRef, className: "".concat(styles.crop_area, " ").concat(styles["crop_area_".concat(shape)]), onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd })),
+            React.createElement("div", { className: styles.controls },
+                React.createElement("div", { className: styles.zoom_control },
+                    React.createElement("span", { className: styles.zoom_label }, "Zoom:"),
+                    React.createElement("button", { className: styles.zoom_button, onClick: function () { return setZoom(Math.max(1, zoom - 0.1)); }, disabled: zoom <= 1 }, "\u2013"),
+                    React.createElement("input", { type: "range", min: "1", max: "3", step: "0.1", value: zoom, onChange: handleZoomChange, className: styles.zoom_slider }),
+                    React.createElement("button", { className: styles.zoom_button, onClick: function () { return setZoom(Math.min(3, zoom + 0.1)); }, disabled: zoom >= 3 }, "+")),
+                React.createElement("div", { className: styles.action_buttons },
+                    React.createElement("button", { className: styles.cancel_button, onClick: onCancel }, "Annuler"),
+                    React.createElement("button", { className: styles.confirm_button, onClick: function () {
+                            return onConfirm({
+                                zoom: zoom,
+                                offsetX: position.x,
+                                offsetY: position.y,
+                                shape: shape,
+                            });
+                        } }, "Valider"))))));
+};
+export default ImageCropperModal;

package/dist/components/molecules/fileUploader/ImageCropperModal.module.css

@@ -0,0 +1,232 @@
+.modal_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.modal_content {
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 500px;
+  height: 80vh;
+  max-height: 600px;
+  overflow: hidden;
+}
+
+.modal_header {
+  padding: 1rem;
+  background-color: white;
+  border-bottom: 1px solid var(--grey-venom, #e6edf5);
+  border-radius: 12px 12px 0 0;
+}
+
+.modal_title {
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--noir, #171e25);
+  margin: 0;
+}
+
+.crop_container {
+  position: relative;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.crop_mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  z-index: 10;
+}
+
+.crop_area {
+  position: relative;
+  width: 280px;
+  height: 280px;
+  background-color: transparent;
+  z-index: 20;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+}
+
+.crop_area_square {
+  border-radius: 8px;
+}
+
+.crop_area_circle {
+  border-radius: 50%;
+}
+
+.crop_area::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 25;
+}
+
+.image_wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 5;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.image_container {
+  position: absolute;
+  transform-origin: center;
+  will-change: transform;
+  touch-action: none;
+  cursor: grab;
+  pointer-events: all;
+}
+
+.image {
+  width: auto !important;
+  height: auto !important;
+  max-width: none !important;
+  max-height: none !important;
+  user-select: none;
+  -webkit-user-drag: none;
+  display: block;
+  object-fit: cover !important;
+}
+
+.controls {
+  padding: 1rem;
+  background-color: white;
+  border-top: 1px solid var(--grey-venom, #e6edf5);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-radius: 0 0 12px 12px;
+}
+
+.zoom_control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.zoom_label {
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 14px;
+  color: var(--mid-grey, #728ea7);
+  white-space: nowrap;
+}
+
+.zoom_slider {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 2px;
+  outline: none;
+}
+
+.zoom_slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--bleu-allaw, #25beeb);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.zoom_slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--bleu-allaw, #25beeb);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.zoom_button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  background-color: white;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--noir, #171e25);
+}
+
+.zoom_button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action_buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+.cancel_button,
+.confirm_button {
+  padding: 0.5rem 1.5rem;
+  border-radius: 4px;
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cancel_button {
+  background-color: transparent;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  color: var(--mid-grey, #728ea7);
+}
+
+.confirm_button {
+  background-color: var(--bleu-allaw, #25beeb);
+  border: 1px solid var(--bleu-allaw, #25beeb);
+  color: white;
+}
+
+.cancel_button:hover {
+  background-color: #f8f9fb;
+}
+
+.confirm_button:hover {
+  background-color: #1da9d2;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",