allaw-ui 5.1.1 → 5.1.3

package/dist/components/atoms/inputs/TextArea.d.ts

@@ -14,6 +14,7 @@ export interface TextAreaProps {
     error?: string;
     maxHeight?: number;
     minHeight?: number;
+    maxLength?: number;
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
     dataTestId?: string;

package/dist/components/atoms/inputs/TextArea.js

@@ -6,7 +6,7 @@ import Paragraph from "../typography/Paragraph";
 import TinyInfo from "../typography/TinyInfo";
 import "./TextArea.css";
 var TextArea = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataTestId = _a.dataTestId, _g = _a.isPrefilled, isPrefilled = _g === void 0 ? false : _g;
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, maxLength = _a.maxLength, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataTestId = _a.dataTestId, _g = _a.isPrefilled, isPrefilled = _g === void 0 ? false : _g;
     var _h = useState(propValue || ""), value = _h[0], setValue = _h[1];
     var _j = useState(propError || ""), error = _j[0], setError = _j[1];
     var _k = useState(false), isTouched = _k[0], setIsTouched = _k[1];
@@ -86,7 +86,7 @@ var TextArea = forwardRef(function (_a, ref) {
                     : ""), "data-testid": dataTestId || "text-area" },
                 React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: minHeight !== undefined
                         ? "text-area-placeholder no-transition"
-                        : "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: textareaStyle, "data-testid": dataTestId || "text-area" })),
+                        : "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: textareaStyle, maxLength: maxLength, "data-testid": dataTestId || "text-area" })),
             error && isTouched && (React.createElement("div", { className: "error-message" },
                 React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
 });

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

@@ -6,6 +6,21 @@ export interface FileUploaderProps {
     enableDragAndDrop?: boolean;
     enableCropping?: boolean;
     cropShape?: "circle" | "square" | "banner";
+    clientSideCrop?: boolean;
+    cropOutputDimensions?: {
+        square?: {
+            width: number;
+            height: number;
+        };
+        circle?: {
+            width: number;
+            height: number;
+        };
+        banner?: {
+            width: number;
+            height: number;
+        };
+    };
     iconUrl?: string;
     descriptionParts?: {
         beforeLink: string;

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

@@ -41,17 +41,21 @@ import ImageCropperModal from "./ImageCropperModal";
 import IconButton from "../../atoms/buttons/IconButton";
 import TertiaryButton from "../../atoms/buttons/TertiaryButton";
 var FileUploader = function (_a) {
-    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.autoManageProgress, autoManageProgress = _g === void 0 ? false : _g, _h = _a.progressSteps, progressSteps = _h === void 0 ? 10 : _h, _j = _a.progressInterval, progressInterval = _j === void 0 ? 500 : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? null : _k, _l = _a.buttonLabel, buttonLabel = _l === void 0 ? "Choisir un fichier" : _l, _m = _a.acceptedLabel, acceptedLabel = _m === void 0 ? "Format accepté :" : _m, _o = _a.maxSizeLabel, maxSizeLabel = _o === void 0 ? "Taille maximale :" : _o, fileName = _a.fileName, fileSize = _a.fileSize, _p = _a.filePresentationLabel, filePresentationLabel = _p === void 0 ? "Voici votre fichier." : _p, initialFile = _a.initialFile, initialPreviewUrl = _a.initialPreviewUrl, initialCropMetadata = _a.initialCropMetadata, originalFileName = _a.originalFileName;
-    var _q = useState(initialFile || null), selectedFile = _q[0], setSelectedFile = _q[1];
-    var _r = useState(null), fileContent = _r[0], setFileContent = _r[1];
-    var _s = useState(false), isHovering = _s[0], setIsHovering = _s[1];
-    var _t = useState(false), showCropper = _t[0], setShowCropper = _t[1];
-    var _u = useState(initialPreviewUrl || null), previewUrl = _u[0], setPreviewUrl = _u[1];
-    var _v = useState(initialCropMetadata || null), cropMetadata = _v[0], setCropMetadata = _v[1];
-    var _w = useState(0), internalProgress = _w[0], setInternalProgress = _w[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, _e = _a.clientSideCrop, clientSideCrop = _e === void 0 ? false : _e, _f = _a.cropOutputDimensions, cropOutputDimensions = _f === void 0 ? {
+        square: { width: 200, height: 200 },
+        circle: { width: 200, height: 200 },
+        banner: { width: 1200, height: 400 },
+    } : _f, iconUrl = _a.iconUrl, descriptionParts = _a.descriptionParts, onFileRead = _a.onFileRead, onFileRemove = _a.onFileRemove, _g = _a.uploadProgress, uploadProgress = _g === void 0 ? 0 : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, _j = _a.autoManageProgress, autoManageProgress = _j === void 0 ? false : _j, _k = _a.progressSteps, progressSteps = _k === void 0 ? 10 : _k, _l = _a.progressInterval, progressInterval = _l === void 0 ? 500 : _l, _m = _a.errorMessage, errorMessage = _m === void 0 ? null : _m, _o = _a.buttonLabel, buttonLabel = _o === void 0 ? "Choisir un fichier" : _o, _p = _a.acceptedLabel, acceptedLabel = _p === void 0 ? "Format accepté :" : _p, _q = _a.maxSizeLabel, maxSizeLabel = _q === void 0 ? "Taille maximale :" : _q, fileName = _a.fileName, fileSize = _a.fileSize, _r = _a.filePresentationLabel, filePresentationLabel = _r === void 0 ? "Voici votre fichier." : _r, initialFile = _a.initialFile, initialPreviewUrl = _a.initialPreviewUrl, initialCropMetadata = _a.initialCropMetadata, originalFileName = _a.originalFileName;
+    var _s = useState(initialFile || null), selectedFile = _s[0], setSelectedFile = _s[1];
+    var _t = useState(null), fileContent = _t[0], setFileContent = _t[1];
+    var _u = useState(false), isHovering = _u[0], setIsHovering = _u[1];
+    var _v = useState(false), showCropper = _v[0], setShowCropper = _v[1];
+    var _w = useState(initialPreviewUrl || null), previewUrl = _w[0], setPreviewUrl = _w[1];
+    var _x = useState(initialCropMetadata || null), cropMetadata = _x[0], setCropMetadata = _x[1];
+    var _y = useState(0), internalProgress = _y[0], setInternalProgress = _y[1];
     var progressIntervalRef = useRef(null);
     var fileInputRef = useRef(null);
-    var _x = useState(originalFileName), currentFileName = _x[0], setCurrentFileName = _x[1];
+    var _z = useState(originalFileName), currentFileName = _z[0], setCurrentFileName = _z[1];
     useEffect(function () {
         if (initialFile) {
             setSelectedFile(initialFile);
@@ -207,19 +211,161 @@ var FileUploader = function (_a) {
             setShowCropper(true);
         }
     };
+    /**
+     * Crop l'image côté client et retourne un Blob
+     * Utilise la même logique que ImageCropperModal pour calculer le crop
+     */
+    var cropImageToBlob = function (imageUrl, cropMetadata, outputWidth, outputHeight) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, new Promise(function (resolve, reject) {
+                    var img = new window.Image();
+                    img.crossOrigin = "anonymous";
+                    img.onload = function () {
+                        try {
+                            // Créer un canvas aux dimensions de sortie
+                            var canvas = document.createElement("canvas");
+                            canvas.width = outputWidth;
+                            canvas.height = outputHeight;
+                            var ctx = canvas.getContext("2d");
+                            if (!ctx) {
+                                reject(new Error("Impossible de créer le contexte canvas"));
+                                return;
+                            }
+                            // Dimensions de la zone de crop dans le modal (selon le CSS)
+                            // Ces dimensions correspondent exactement à celles utilisées dans ImageCropperModal.module.css
+                            var cropAreaWidth = 280; // Dimensions réelles du cadre de crop pour square/circle
+                            var cropAreaHeight = 280;
+                            if (cropMetadata.shape === "banner") {
+                                cropAreaWidth = 320;
+                                cropAreaHeight = 60;
+                            }
+                            // Le zoom dans cropMetadata est déjà le zoom total (baseZoom * zoom relatif)
+                            // Comme calculé dans ImageCropperModal ligne 318: zoom: baseZoom * zoom
+                            var totalZoom = cropMetadata.zoom;
+                            // Dimensions de l'image après zoom
+                            var scaledImgWidth = img.width * totalZoom;
+                            var scaledImgHeight = img.height * totalZoom;
+                            // Dans le modal, l'image est centrée dans le container
+                            // Le container a les mêmes dimensions que le viewport du modal
+                            // La cropArea est centrée dans ce container
+                            // Les offsets (offsetX, offsetY) représentent le déplacement de l'image depuis le centre
+                            // Position du centre de l'image zoomée (qui correspond au centre du container)
+                            var imgCenterX = scaledImgWidth / 2;
+                            var imgCenterY = scaledImgHeight / 2;
+                            // Position du centre de la cropArea dans l'image zoomée
+                            // Les offsets sont la position de l'image par rapport au centre du container
+                            // Donc le centre de la cropArea dans l'image zoomée est :
+                            var cropCenterX = imgCenterX - cropMetadata.offsetX;
+                            var cropCenterY = imgCenterY - cropMetadata.offsetY;
+                            // Coordonnées du coin supérieur gauche de la zone à cropper dans l'image zoomée
+                            var cropXInScaledImg = cropCenterX - cropAreaWidth / 2;
+                            var cropYInScaledImg = cropCenterY - cropAreaHeight / 2;
+                            // Convertir ces coordonnées en coordonnées de l'image originale (diviser par le zoom)
+                            var sourceX = cropXInScaledImg / totalZoom;
+                            var sourceY = cropYInScaledImg / totalZoom;
+                            var sourceWidth = cropAreaWidth / totalZoom;
+                            var sourceHeight = cropAreaHeight / totalZoom;
+                            // S'assurer que les coordonnées sont valides
+                            var clampedSourceX = Math.max(0, Math.min(sourceX, img.width - sourceWidth));
+                            var clampedSourceY = Math.max(0, Math.min(sourceY, img.height - sourceHeight));
+                            var clampedSourceWidth = Math.min(sourceWidth, img.width - clampedSourceX);
+                            var clampedSourceHeight = Math.min(sourceHeight, img.height - clampedSourceY);
+                            // Dessiner l'image croppée sur le canvas
+                            ctx.drawImage(img, clampedSourceX, clampedSourceY, clampedSourceWidth, clampedSourceHeight, 0, 0, outputWidth, outputHeight);
+                            // Si c'est un cercle, appliquer un masque
+                            if (cropMetadata.shape === "circle") {
+                                var imageData = ctx.getImageData(0, 0, outputWidth, outputHeight);
+                                var pixels = imageData.data;
+                                var centerX = outputWidth / 2;
+                                var centerY = outputHeight / 2;
+                                var radius = Math.min(outputWidth, outputHeight) / 2;
+                                for (var y = 0; y < outputHeight; y++) {
+                                    for (var x = 0; x < outputWidth; x++) {
+                                        var distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
+                                        if (distance > radius) {
+                                            var index = (y * outputWidth + x) * 4;
+                                            pixels[index + 3] = 0; // Rendre transparent
+                                        }
+                                    }
+                                }
+                                ctx.putImageData(imageData, 0, 0);
+                            }
+                            // Convertir en Blob PNG
+                            canvas.toBlob(function (blob) {
+                                if (blob) {
+                                    resolve(blob);
+                                }
+                                else {
+                                    reject(new Error("Échec de la conversion canvas vers Blob"));
+                                }
+                            }, "image/png", 0.95);
+                        }
+                        catch (error) {
+                            reject(error);
+                        }
+                    };
+                    img.onerror = function () {
+                        reject(new Error("Échec du chargement de l'image"));
+                    };
+                    img.src = imageUrl;
+                })];
+        });
+    }); };
     var handleCropCancel = function () {
         setShowCropper(false);
     };
-    var handleCropConfirm = function (cropMetadata) {
-        setShowCropper(false);
-        setCropMetadata(cropMetadata);
-        if (autoManageProgress) {
-            startProgressSimulation();
-        }
-        if (selectedFile && fileContent) {
-            onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
-        }
-    };
+    var handleCropConfirm = function (cropMetadata) { return __awaiter(void 0, void 0, void 0, function () {
+        var dimensions, croppedBlob, croppedFile, croppedContent, croppedUrl, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setShowCropper(false);
+                    setCropMetadata(cropMetadata);
+                    if (autoManageProgress) {
+                        startProgressSimulation();
+                    }
+                    if (!(selectedFile && fileContent && previewUrl)) return [3 /*break*/, 7];
+                    if (!clientSideCrop) return [3 /*break*/, 6];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    dimensions = cropOutputDimensions[cropMetadata.shape] ||
+                        cropOutputDimensions.square ||
+                        { width: 200, height: 200 };
+                    return [4 /*yield*/, cropImageToBlob(previewUrl, cropMetadata, dimensions.width, dimensions.height)];
+                case 2:
+                    croppedBlob = _a.sent();
+                    croppedFile = new File([croppedBlob], selectedFile.name.replace(/\.[^/.]+$/, ".png"), // Remplacer l'extension par .png
+                    { type: "image/png" });
+                    return [4 /*yield*/, croppedFile.arrayBuffer()];
+                case 3:
+                    croppedContent = _a.sent();
+                    croppedUrl = URL.createObjectURL(croppedBlob);
+                    if (previewUrl && !initialPreviewUrl) {
+                        URL.revokeObjectURL(previewUrl);
+                    }
+                    setPreviewUrl(croppedUrl);
+                    setSelectedFile(croppedFile);
+                    setFileContent(croppedContent);
+                    setCurrentFileName(croppedFile.name);
+                    // Appeler onFileRead avec le fichier croppé (pas de cropMetadata car déjà croppé)
+                    onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(croppedFile, croppedContent);
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_2 = _a.sent();
+                    console.error("Erreur lors du crop de l'image:", error_2);
+                    // En cas d'erreur, fallback sur l'image originale avec métadonnées
+                    onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
+                    return [3 /*break*/, 5];
+                case 5: return [3 /*break*/, 7];
+                case 6:
+                    // Passer l'image originale avec les métadonnées au serveur
+                    onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
+                    _a.label = 7;
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
     var handleFileDelete = function () {
         if (previewUrl && !initialPreviewUrl) {
             URL.revokeObjectURL(previewUrl);

package/package.json

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