npm - allaw-ui - Versions diffs - 3.0.1 → 3.0.3 - Mend

allaw-ui 3.0.1 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

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

@@ -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;
@@ -20,6 +23,7 @@ export interface FileUploaderProps {
     maxSizeLabel?: string;
     fileName?: string;
     fileSize?: number;
+    filePresentationLabel?: string;
 }
 declare const FileUploader: React.FC<FileUploaderProps>;
 export default FileUploader;

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

@@ -35,11 +35,19 @@ 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";
+import IconButton from "../../atoms/buttons/IconButton";
+import { TertiaryButton } from "src/components/atoms/buttons";
 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, _l = _a.filePresentationLabel, filePresentationLabel = _l === void 0 ? "Voici votre fichier." : _l;
+    var _m = useState(null), selectedFile = _m[0], setSelectedFile = _m[1];
+    var _o = useState(null), fileContent = _o[0], setFileContent = _o[1];
+    var _p = useState(false), isHovering = _p[0], setIsHovering = _p[1];
+    var _q = useState(false), showCropper = _q[0], setShowCropper = _q[1];
+    var _r = useState(null), previewUrl = _r[0], setPreviewUrl = _r[1];
+    var _s = useState(null), cropMetadata = _s[0], setCropMetadata = _s[1];
     var fileInputRef = useRef(null);
     var resetFileInput = function () {
         if (fileInputRef.current) {
@@ -55,6 +63,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,37 +99,93 @@ var FileUploader = function (_a) {
         });
     }); };
     var processFile = function (file) { return __awaiter(void 0, void 0, void 0, function () {
-        var fileContent, error_1;
+        var content, url, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!validateFile(file)) {
                         setSelectedFile(null);
+                        setPreviewUrl(null);
+                        setCropMetadata(null);
                         return [2 /*return*/];
                     }
                     _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);
+                    // Créer un aperçu si c'est une image
+                    if (isImageFile(file)) {
+                        url = URL.createObjectURL(file);
+                        setPreviewUrl(url);
+                        // Si le cadrage n'est pas activé, on utilise une métadonnée par défaut
+                        if (!enableCropping) {
+                            setCropMetadata({
+                                zoom: 1,
+                                offsetX: 0,
+                                offsetY: 0,
+                                shape: cropShape,
+                            });
+                        }
+                    }
+                    else {
+                        setPreviewUrl(null);
+                        setCropMetadata(null);
+                    }
+                    // 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();
                     console.error("Error reading file:", error_1);
                     setSelectedFile(null);
+                    setPreviewUrl(null);
+                    setCropMetadata(null);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
         });
     }); };
+    var openCropModal = function () {
+        if (selectedFile && isImageFile(selectedFile)) {
+            setShowCropper(true);
+        }
+    };
+    var handleCropCancel = function () {
+        setShowCropper(false);
+    };
+    var handleCropConfirm = function (cropMetadata) {
+        setShowCropper(false);
+        setCropMetadata(cropMetadata);
+        if (selectedFile && fileContent) {
+            onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
+        }
+    };
     var handleFileDelete = function () {
+        if (previewUrl) {
+            URL.revokeObjectURL(previewUrl);
+        }
         setSelectedFile(null);
+        setFileContent(null);
+        setPreviewUrl(null);
+        setCropMetadata(null);
         resetFileInput();
         onFileRemove === null || onFileRemove === void 0 ? void 0 : onFileRemove();
     };
+    var handleNewFileClick = function () {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
     var formatFileSize = function (size) {
         if (size < 1024) {
             return "".concat(size, " octets");
@@ -129,9 +199,28 @@ var FileUploader = function (_a) {
     };
     var displayFileSize = fileSize !== undefined ? fileSize : selectedFile ? selectedFile.size : 0;
     var displayFileName = fileName || (selectedFile ? selectedFile.name : "");
+    var isSelectedImage = selectedFile && isImageFile(selectedFile);
     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 },
-            React.createElement("div", { className: styles.upload_content },
+        enableDragAndDrop ? (React.createElement("div", { className: "".concat(styles.upload_container, " ").concat(isHovering ? styles.drag_over : "", " ").concat(previewUrl ? styles.upload_container_with_preview : ""), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: function () { var _a; return !previewUrl && ((_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click()); } },
+            previewUrl ? (React.createElement("div", { className: styles.preview_container, onClick: function (e) {
+                    var _a;
+                    // Ne pas déclencher si on clique sur le conteneur d'image
+                    if (!e.target.closest(".".concat(styles.preview_image_container))) {
+                        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                    }
+                } },
+                React.createElement("div", { className: "".concat(styles.preview_image_container, " ").concat(styles["preview_image_".concat((cropMetadata === null || cropMetadata === void 0 ? void 0 : cropMetadata.shape) || cropShape)]), onClick: function () { return enableCropping && openCropModal(); } },
+                    React.createElement("div", { className: styles.preview_image_wrapper, style: {
+                            transform: cropMetadata
+                                ? "translate(".concat(cropMetadata.offsetX, "px, ").concat(cropMetadata.offsetY, "px) scale(").concat(cropMetadata.zoom, ")")
+                                : "scale(1)",
+                        } },
+                        React.createElement("img", { src: previewUrl, alt: displayFileName, className: styles.preview_image, draggable: false }))),
+                enableCropping && (React.createElement("div", { className: styles.edit_button_container, onClick: function (e) {
+                        e.stopPropagation();
+                        openCropModal();
+                    } },
+                    React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2" }))))) : (React.createElement("div", { className: styles.upload_content },
                 React.createElement("div", { className: styles.upload_icons },
                     React.createElement("div", { className: styles.upload_file_icon },
                         React.createElement("i", { className: "allaw-icon-file" })),
@@ -142,13 +231,14 @@ 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 },
+        previewUrl ? (React.createElement("div", { className: styles.file_info_container },
+            filePresentationLabel && (React.createElement("span", { className: styles.file_presentation_label }, filePresentationLabel)),
+            React.createElement(TertiaryButton, { label: "Charger ".concat(isSelectedImage ? "une autre image" : "un autre fichier"), color: "bleu-allaw", variant: true, onClick: handleNewFileClick }))) : (React.createElement("div", { className: styles.limits },
             React.createElement("div", { className: styles.format },
                 React.createElement("span", { className: styles.limit_text },
                     acceptedLabel,
@@ -159,7 +249,7 @@ var FileUploader = function (_a) {
                     maxSizeLabel,
                     " ",
                     maxFileSizeMB,
-                    " Mo"))),
+                    " Mo")))),
         descriptionParts && (React.createElement("p", { className: styles.description },
             descriptionParts.beforeLink,
             " ",
@@ -171,16 +261,18 @@ 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...")),
+                        React.createElement("span", { className: styles.file_name }, displayFileName || "Analyse en cours..."),
+                        selectedFile && (React.createElement("i", { className: "allaw-icon-check ".concat(styles.success_icon) }))),
                     React.createElement("div", { className: styles.uploaded_file_size },
                         React.createElement("span", { className: styles.file_size }, displayFileSize > 0 ? formatFileSize(displayFileSize) : ""))),
                 selectedFile && (React.createElement("div", { className: styles.uploaded_file_delete_container },
                     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 CHANGED Viewed

@@ -19,6 +19,7 @@
   background-color: #ffffff;
   width: 100%;
   transition: all 0.2s ease-in-out;
+  cursor: pointer;
 }
 .manual_upload_container {
@@ -265,6 +266,20 @@
   font-weight: 600;
 }
+.file_upload_button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+.format {
+  width: 61.8%;
+}
 @media (max-width: 768px) {
   .upload_container {
     padding: 2rem 1rem;
@@ -285,4 +300,116 @@
     align-items: flex-start;
     gap: 0.25rem;
   }
+  .format {
+    width: 100%;
+  }
+}
+.upload_container_with_preview {
+  padding: 0;
+  cursor: default;
+}
+.preview_container {
+  width: 100%;
+  height: 300px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+  cursor: pointer;
+}
+.preview_image_container {
+  position: relative;
+  width: 280px;
+  height: 280px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.preview_image_circle {
+  border-radius: 50%;
+}
+.preview_image_square {
+  border-radius: 8px;
+}
+.preview_image_wrapper {
+  position: absolute;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  transform-origin: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  will-change: transform;
+  pointer-events: none;
+}
+.preview_image {
+  width: auto;
+  height: auto;
+  object-fit: cover;
+  display: block;
+  max-width: none;
+  max-height: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.edit_button_container {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  z-index: 20;
+  pointer-events: auto;
+}
+.edit_button_container button {
+  pointer-events: auto;
+}
+.file_info_container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.file_info_container span {
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 14px;
+  color: var(----noir, #171e25);
+}
+.file_presentation_label {
+  font-size: 14px;
+  color: var(--gris-03);
+}
+.change_file_link {
+  cursor: pointer;
+  text-decoration: none;
+}
+.success_icon {
+  margin-left: 8px;
+  color: var(--actions-valid, #29a36a);
+  font-size: 14px;
+}
+.uploaded_file_name {
+  display: flex;
+  align-items: center;
 }

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

@@ -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,7 @@ export const WithoutDragAndDrop: any;
 export const WithError: any;
 export const WithProgress: any;
 export const MultipleExtensions: any;
+export const WithSquareCropping: any;
+export const WithCircleCropping: any;
+export const WithPreloadedImage: any;
 import FileUploader from "./FileUploader";

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

@@ -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,33 @@ 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,
+    filePresentationLabel: "Voici votre logo.",
 };
 export var WithDescription = Template.bind({});
 WithDescription.args = __assign(__assign({}, Default.args), { descriptionParts: {
@@ -176,3 +201,32 @@ 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 :",
+};
+// Exemple avec l'affichage d'une image préuploadée
+export var WithPreloadedImage = Template.bind({});
+WithPreloadedImage.args = __assign(__assign({}, Default.args), {
+    // On simule un fichier déjà chargé pour la story
+    fileName: "logo-entreprise.png", fileSize: 1.2 * 1024 * 1024, filePresentationLabel: "Voici votre logo." });

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

@@ -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 ADDED Viewed

@@ -0,0 +1,212 @@
+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 () {
+                            // Retourner les métadonnées de cadrage avec le zoom total
+                            onConfirm({
+                                zoom: baseZoom * zoom,
+                                offsetX: position.x,
+                                offsetY: position.y,
+                                shape: shape,
+                            });
+                        } }, "Valider"))))));
+};
+export default ImageCropperModal;

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

@@ -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 CHANGED Viewed

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