allaw-ui 3.0.2 → 3.0.4

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

@@ -23,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

@@ -38,12 +38,16 @@ 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 "../../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.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 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) {
@@ -95,12 +99,14 @@ var FileUploader = function (_a) {
         });
     }); };
     var processFile = function (file) { return __awaiter(void 0, void 0, void 0, function () {
-        var content, 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;
@@ -110,6 +116,24 @@ var FileUploader = function (_a) {
                 case 2:
                     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);
@@ -125,28 +149,43 @@ var FileUploader = function (_a) {
                     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);
-        setSelectedFile(null);
-        resetFileInput();
     };
     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");
@@ -160,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, onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } },
-            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" })),
@@ -173,12 +231,14 @@ var FileUploader = function (_a) {
                     React.createElement("span", null,
                         "Glissez-d\u00E9posez votre fichier, ou",
                         " ",
-                        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("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,
@@ -189,7 +249,7 @@ var FileUploader = function (_a) {
                     maxSizeLabel,
                     " ",
                     maxFileSizeMB,
-                    " Mo"))),
+                    " Mo")))),
         descriptionParts && (React.createElement("p", { className: styles.description },
             descriptionParts.beforeLink,
             " ",
@@ -204,7 +264,8 @@ var FileUploader = function (_a) {
                 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 },

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

@@ -276,6 +276,10 @@
   font-size: inherit;
 }
 
+.format {
+  width: 61.8%;
+}
+
 @media (max-width: 768px) {
   .upload_container {
     padding: 2rem 1rem;
@@ -296,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

@@ -103,4 +103,5 @@ 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

@@ -183,6 +183,7 @@ Default.args = {
     buttonLabel: "Choisir une image",
     acceptedLabel: "Formats acceptés :",
     maxSizeLabel: "Taille maximale :",
+    filePresentationLabel: "Voici votre logo.",
 };
 export var WithDescription = Template.bind({});
 WithDescription.args = __assign(__assign({}, Default.args), { descriptionParts: {
@@ -224,3 +225,8 @@ WithCircleCropping.args = {
     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.js

@@ -200,8 +200,9 @@ var ImageCropperModal = function (_a) {
                 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,
+                            // Retourner les métadonnées de cadrage avec le zoom total
+                            onConfirm({
+                                zoom: baseZoom * zoom,
                                 offsetX: position.x,
                                 offsetY: position.y,
                                 shape: shape,

package/package.json

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