allaw-ui 3.4.1 → 3.4.3

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

@@ -1,346 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useRef, useEffect } 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.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 progressIntervalRef = useRef(null);
-    var fileInputRef = useRef(null);
-    var _x = useState(originalFileName), currentFileName = _x[0], setCurrentFileName = _x[1];
-    useEffect(function () {
-        if (initialFile) {
-            setSelectedFile(initialFile);
-            initialFile.arrayBuffer().then(function (content) {
-                setFileContent(content);
-            });
-        }
-        if (initialPreviewUrl) {
-            setPreviewUrl(initialPreviewUrl);
-        }
-        if (initialCropMetadata) {
-            setCropMetadata(initialCropMetadata);
-        }
-        if (originalFileName) {
-            setCurrentFileName(originalFileName);
-        }
-    }, [initialFile, initialPreviewUrl, initialCropMetadata, originalFileName]);
-    useEffect(function () {
-        return function () {
-            if (previewUrl && !initialPreviewUrl) {
-                URL.revokeObjectURL(previewUrl);
-            }
-        };
-    }, [previewUrl, initialPreviewUrl]);
-    var startProgressSimulation = function () {
-        stopProgressSimulation();
-        setInternalProgress(1);
-        progressIntervalRef.current = setInterval(function () {
-            setInternalProgress(function (prev) {
-                if (prev >= progressSteps) {
-                    stopProgressSimulation();
-                    return progressSteps;
-                }
-                return prev + 1;
-            });
-        }, progressInterval);
-    };
-    var stopProgressSimulation = function () {
-        if (progressIntervalRef.current) {
-            clearInterval(progressIntervalRef.current);
-            progressIntervalRef.current = null;
-        }
-    };
-    var resetFileInput = function () {
-        if (fileInputRef.current) {
-            fileInputRef.current.value = "";
-        }
-    };
-    var validateFile = function (file) {
-        var _a;
-        var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-        var isValidExtension = acceptedExtensions.includes(fileExtension);
-        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) {
-            if (event.target.files && event.target.files.length > 0) {
-                file = event.target.files[0];
-                processFile(file);
-            }
-            return [2 /*return*/];
-        });
-    }); };
-    var handleDragOver = function (event) {
-        event.preventDefault();
-        setIsHovering(true);
-    };
-    var handleDragLeave = function () {
-        setIsHovering(false);
-    };
-    var handleDrop = function (event) { return __awaiter(void 0, void 0, void 0, function () {
-        var file;
-        return __generator(this, function (_a) {
-            event.preventDefault();
-            setIsHovering(false);
-            if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
-                file = event.dataTransfer.files[0];
-                processFile(file);
-            }
-            return [2 /*return*/];
-        });
-    }); };
-    var processFile = function (file) { return __awaiter(void 0, void 0, void 0, function () {
-        var content, url, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!validateFile(file)) {
-                        setSelectedFile(null);
-                        setPreviewUrl(null);
-                        setCropMetadata(null);
-                        setCurrentFileName(undefined);
-                        return [2 /*return*/];
-                    }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, file.arrayBuffer()];
-                case 2:
-                    content = _a.sent();
-                    setFileContent(content);
-                    setCurrentFileName(file.name);
-                    if (isImageFile(file)) {
-                        url = URL.createObjectURL(file);
-                        setPreviewUrl(url);
-                        if (!enableCropping) {
-                            setCropMetadata({
-                                zoom: 1,
-                                offsetX: 0,
-                                offsetY: 0,
-                                shape: cropShape,
-                            });
-                        }
-                    }
-                    else {
-                        setPreviewUrl(null);
-                        setCropMetadata(null);
-                    }
-                    if (autoManageProgress && !(enableCropping && isImageFile(file))) {
-                        startProgressSimulation();
-                    }
-                    if (enableCropping && isImageFile(file)) {
-                        setSelectedFile(file);
-                        setShowCropper(true);
-                    }
-                    else {
-                        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);
-                    setCurrentFileName(undefined);
-                    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 (autoManageProgress) {
-            startProgressSimulation();
-        }
-        if (selectedFile && fileContent) {
-            onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
-        }
-    };
-    var handleFileDelete = function () {
-        if (previewUrl && !initialPreviewUrl) {
-            URL.revokeObjectURL(previewUrl);
-        }
-        if (autoManageProgress) {
-            stopProgressSimulation();
-            setInternalProgress(0);
-        }
-        setSelectedFile(null);
-        setFileContent(null);
-        setPreviewUrl(null);
-        setCropMetadata(null);
-        setCurrentFileName(undefined);
-        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");
-        }
-        else if (size < 1024 * 1024) {
-            return "".concat((size / 1024).toFixed(2), " Ko");
-        }
-        else {
-            return "".concat((size / (1024 * 1024)).toFixed(2), " Mo");
-        }
-    };
-    var displayProgress = autoManageProgress
-        ? internalProgress
-        : uploadProgress;
-    var isLoadingState = autoManageProgress
-        ? internalProgress > 0 && internalProgress < progressSteps
-        : isLoading;
-    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 : "", " ").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: "".concat(styles.preview_container, " ").concat((cropMetadata === null || cropMetadata === void 0 ? void 0 : cropMetadata.shape) === "banner" || cropShape === "banner"
-                    ? styles.preview_container_banner
-                    : ""), onClick: function (e) {
-                    var _a;
-                    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" })),
-                    React.createElement("div", { className: styles.upload_icon_container },
-                        React.createElement("div", { className: styles.upload_icon },
-                            React.createElement("i", { className: "allaw-icon-export" })))),
-                React.createElement("div", { className: styles.upload_description },
-                    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("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 })))),
-        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,
-                    " ",
-                    acceptedExtensions.join(", "))),
-            React.createElement("div", { className: styles.size },
-                React.createElement("span", { className: styles.limit_text },
-                    maxSizeLabel,
-                    " ",
-                    maxFileSizeMB,
-                    " Mo")))),
-        descriptionParts && (React.createElement("p", { className: styles.description },
-            descriptionParts.beforeLink,
-            " ",
-            React.createElement("a", { href: descriptionParts.linkUrl, target: "_blank", rel: "noopener noreferrer", className: styles.description_link }, descriptionParts.linkLabel),
-            " ",
-            descriptionParts.afterLink)),
-        errorMessage && (React.createElement("div", { className: styles.uploaded_file_container },
-            React.createElement("div", { className: styles.uploaded_file_error },
-                React.createElement("span", { className: styles.error_message }, errorMessage)))),
-        (isLoadingState || 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(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 || currentFileName || "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 === null || selectedFile === void 0 ? void 0 : selectedFile.size)
-                                ? formatFileSize(selectedFile.size)
-                                : ""))),
-                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" }))))),
-            displayProgress > 0 && (React.createElement("div", { className: styles.uploaded_file_progress_bar },
-                React.createElement("div", { className: styles.progress_bar_container },
-                    React.createElement("div", { className: styles.progress_bar_fill, style: {
-                            width: "".concat((displayProgress / progressSteps) * 100, "%"),
-                        } })))))),
-        showCropper && selectedFile && (React.createElement(ImageCropperModal, { file: selectedFile, shape: cropShape, onCancel: handleCropCancel, onConfirm: handleCropConfirm }))));
-};
-export default FileUploader;

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

@@ -1,107 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { FileUploader as component };
-    export let tags: string[];
-    export namespace parameters {
-        namespace backgrounds {
-            let _default: string;
-            export { _default as default };
-            export let values: {
-                name: string;
-                value: string;
-            }[];
-        }
-    }
-    export namespace argTypes {
-        namespace acceptedExtensions {
-            let control: string;
-            let description: string;
-        }
-        namespace maxFileSizeMB {
-            let control_1: string;
-            export { control_1 as control };
-            let description_1: string;
-            export { description_1 as description };
-        }
-        namespace enableDragAndDrop {
-            let control_2: string;
-            export { control_2 as control };
-            let description_2: string;
-            export { description_2 as description };
-        }
-        namespace enableCropping {
-            let control_3: string;
-            export { control_3 as control };
-            let description_3: string;
-            export { description_3 as description };
-        }
-        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 iconUrl {
-            let control_5: string;
-            export { control_5 as control };
-            let description_5: string;
-            export { description_5 as description };
-        }
-        namespace buttonLabel {
-            let control_6: string;
-            export { control_6 as control };
-            let description_6: string;
-            export { description_6 as description };
-        }
-        namespace acceptedLabel {
-            let control_7: string;
-            export { control_7 as control };
-            let description_7: string;
-            export { description_7 as description };
-        }
-        namespace maxSizeLabel {
-            let control_8: string;
-            export { control_8 as control };
-            let description_8: string;
-            export { description_8 as description };
-        }
-        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;
-export const Default: any;
-export const WithDescription: any;
-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";