allaw-ui 2.9.9 → 3.0.1

package/dist/assets/allaw-icon-pdf.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z" fill="#E30000" />
+  <path d="M14 2V8H20L14 2Z" fill="#FF6666" />
+  <path d="M10.08 16.58C9.63 16.58 9.2 16.5 8.8 16.34V14.54C9.16 14.74 9.56 14.84 10 14.84C10.28 14.84 10.5 14.78 10.66 14.66C10.82 14.54 10.9 14.36 10.9 14.12C10.9 13.9 10.84 13.72 10.72 13.58C10.6 13.44 10.36 13.24 10 12.98C9.62 12.7 9.36 12.44 9.22 12.2C9.08 11.96 9 11.66 9 11.3C9 10.78 9.18 10.38 9.54 10.08C9.9 9.78 10.36 9.64 10.92 9.64C11.32 9.64 11.68 9.68 12 9.76V11.44C11.7 11.3 11.4 11.24 11.1 11.24C10.9 11.24 10.74 11.28 10.62 11.36C10.5 11.44 10.44 11.56 10.44 11.72C10.44 11.86 10.5 11.98 10.62 12.1C10.74 12.22 10.94 12.38 11.22 12.58C11.62 12.86 11.9 13.14 12.06 13.42C12.22 13.7 12.3 14.04 12.3 14.44C12.3 14.98 12.1 15.4 11.7 15.7C11.3 16 10.76 16.16 10.08 16.58Z" fill="white" />
+</svg> 

package/dist/components/molecules/checkboxForm/ColoredCheckbox.module.css

@@ -77,7 +77,6 @@
 
 .emailLocalPart {
   flex-shrink: 1;
-  min-width: 40px;
 }
 
 .emailDomainPart {

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

@@ -0,0 +1,25 @@
+import React from "react";
+export interface FileUploaderProps {
+    acceptedExtensions: string[];
+    maxFileSizeMB: number;
+    enableDragAndDrop?: boolean;
+    iconUrl?: string;
+    descriptionParts?: {
+        beforeLink: string;
+        linkLabel: string;
+        linkUrl: string;
+        afterLink: string;
+    };
+    onFileRead?: (file: File, fileContent: ArrayBuffer) => void;
+    onFileRemove?: () => void;
+    uploadProgress?: number;
+    isLoading?: boolean;
+    errorMessage?: string | null;
+    buttonLabel?: string;
+    acceptedLabel?: string;
+    maxSizeLabel?: string;
+    fileName?: string;
+    fileSize?: number;
+}
+declare const FileUploader: React.FC<FileUploaderProps>;
+export default FileUploader;

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

@@ -0,0 +1,186 @@
+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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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 } from "react";
+import styles from "./FileUploader.module.css";
+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 fileInputRef = useRef(null);
+    var resetFileInput = function () {
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    var validateFile = function (file) {
+        var _a;
+        // Vérifier l'extension
+        var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        var isValidExtension = acceptedExtensions.includes(fileExtension);
+        // Vérifier la taille
+        var isValidSize = file.size <= maxFileSizeMB * 1024 * 1024;
+        return isValidExtension && isValidSize;
+    };
+    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 fileContent, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!validateFile(file)) {
+                        setSelectedFile(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);
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error("Error reading file:", error_1);
+                    setSelectedFile(null);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleFileDelete = function () {
+        setSelectedFile(null);
+        resetFileInput();
+        onFileRemove === null || onFileRemove === void 0 ? void 0 : onFileRemove();
+    };
+    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 displayFileSize = fileSize !== undefined ? fileSize : selectedFile ? selectedFile.size : 0;
+    var displayFileName = fileName || (selectedFile ? selectedFile.name : "");
+    return (React.createElement("div", { className: styles.upload_main_container },
+        enableDragAndDrop ? (React.createElement("div", { className: "".concat(styles.upload_container, " ").concat(isHovering ? styles.drag_over : ""), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
+            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("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.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)))),
+        (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_name_size },
+                    React.createElement("div", { className: styles.uploaded_file_name },
+                        React.createElement("span", { className: styles.file_name }, displayFileName || "Analyse en cours...")),
+                    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, "%") } }))))))));
+};
+export default FileUploader;

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

@@ -0,0 +1,288 @@
+.upload_main_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  gap: 0.5rem;
+}
+
+.upload_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed var(--venom-grey-dark, #d1dce8);
+  border-radius: 16px;
+  padding: 4rem 2rem;
+  min-height: 150px;
+  margin-top: 1rem;
+  background-color: #ffffff;
+  width: 100%;
+  transition: all 0.2s ease-in-out;
+}
+
+.manual_upload_container {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.upload_container:hover {
+  background-color: #f6fcfe;
+  border: 2px dashed var(--bleu-allaw, #25beeb);
+  cursor: pointer;
+}
+
+.upload_container:hover .upload_icon {
+  background-color: #171e25;
+}
+
+.upload_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.upload_icons {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.upload_file_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+  color: var(--lightSteelBlue, #a2b5c8);
+}
+
+.upload_icon_container {
+  position: absolute;
+  bottom: -10px;
+  right: -10px;
+}
+
+.upload_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #25beeb;
+  color: white;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  font-size: 1rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.upload_description {
+  text-align: center;
+}
+
+.upload_description span {
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.file_upload_label {
+  cursor: pointer;
+}
+
+.btn_tertiary {
+  color: #25beeb;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn_tertiary:hover {
+  text-decoration: underline;
+}
+
+.limits {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.limit_text {
+  color: var(--mid-grey, #728ea7);
+  font-size: 14px;
+  font-family: var(--font-open-sans, sans-serif);
+}
+
+.description {
+  color: var(--primary-dark-grey, #456073);
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding-top: 0.5rem;
+}
+
+.description_link {
+  color: #25beeb;
+  text-decoration: underline;
+}
+
+.uploaded_file_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border-radius: 16px;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  background: var(--primary-blanc, #fff);
+  padding: 1rem 1rem 0.5rem 1rem;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.uploaded_file_content {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+}
+
+.uploaded_file_name_size {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  padding-left: 1rem;
+}
+
+.file_name {
+  font-family: var(--font-open-sans, sans-serif);
+  font-weight: 600;
+  color: var(--noir, #171e25);
+  font-size: 14px;
+}
+
+.file_size {
+  font-family: var(--font-open-sans, sans-serif);
+  color: var(--mid-grey, #728ea7);
+  font-size: 12px;
+}
+
+.uploaded_file_delete_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.uploaded_file_delete {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  width: 30px;
+  color: var(--mid-grey, #728ea7);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: color 0.2s ease-in-out;
+}
+
+.uploaded_file_delete:hover {
+  color: var(--noir, #171e25);
+}
+
+.uploaded_file_icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  border-radius: 8px;
+  padding: 0.75rem;
+  position: relative;
+  min-width: 40px;
+  min-height: 40px;
+}
+
+.file_icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+.uploaded_file_progress_bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+}
+
+.progress_bar_container {
+  width: 100%;
+  height: 4px;
+  background-color: #e6edf5;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress_bar_fill {
+  height: 100%;
+  background-color: #25beeb;
+  transition: width 0.3s ease-in-out;
+}
+
+.drag_over {
+  background-color: #f6fcfe;
+  border: 2px dashed var(--bleu-allaw, #25beeb);
+}
+
+.drag_over .upload_icon {
+  background-color: #171e25;
+}
+
+.uploaded_file_error {
+  padding-bottom: 0.5rem;
+  width: 100%;
+}
+
+.error_message {
+  color: var(--actions-error, #eb4a4a);
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+@media (max-width: 768px) {
+  .upload_container {
+    padding: 2rem 1rem;
+  }
+
+  .upload_file_icon {
+    font-size: 2.5rem;
+  }
+
+  .upload_icon {
+    width: 28px;
+    height: 28px;
+    font-size: 0.8rem;
+  }
+
+  .limits {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+}

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

@@ -0,0 +1,88 @@
+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 iconUrl {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace buttonLabel {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace acceptedLabel {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace maxSizeLabel {
+            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;
+            }
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace isLoading {
+            let control_8: string;
+            export { control_8 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
+        namespace errorMessage {
+            let control_9: string;
+            export { control_9 as control };
+            let description_9: string;
+            export { description_9 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;
+import FileUploader from "./FileUploader";

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

@@ -0,0 +1,178 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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 } from "react";
+import FileUploader from "./FileUploader";
+import "../../../styles/global.css";
+import pdfIcon from "../../../assets/allaw-icon-pdf.svg";
+export default {
+    title: "Components/Molecules/FileUploader/FileUploader",
+    component: FileUploader,
+    tags: ["autodocs"],
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+    argTypes: {
+        acceptedExtensions: {
+            control: "array",
+            description: "Liste des extensions de fichiers acceptées",
+        },
+        maxFileSizeMB: {
+            control: "number",
+            description: "Taille maximale du fichier en MB",
+        },
+        enableDragAndDrop: {
+            control: "boolean",
+            description: "Active/désactive la zone de drag & drop",
+        },
+        iconUrl: {
+            control: "text",
+            description: "URL de l'icône du type de fichier",
+        },
+        buttonLabel: {
+            control: "text",
+            description: "Texte du bouton de sélection manuelle",
+        },
+        acceptedLabel: {
+            control: "text",
+            description: "Texte sur le format accepté",
+        },
+        maxSizeLabel: {
+            control: "text",
+            description: "Texte sur la taille maximale",
+        },
+        uploadProgress: {
+            control: { type: "range", min: 0, max: 10, step: 1 },
+            description: "Progression de l'upload (0-10)",
+        },
+        isLoading: {
+            control: "boolean",
+            description: "Affiche un loader pendant lecture ou traitement",
+        },
+        errorMessage: {
+            control: "text",
+            description: "Message d'erreur à afficher",
+        },
+    },
+};
+// Template de base avec gestion d'état intégré pour la démo
+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 () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading(true);
+                    setFile(file);
+                    setFileContent(content);
+                    // Simuler une progression
+                    setProgress(2);
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
+                case 1:
+                    _a.sent();
+                    setProgress(5);
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
+                case 2:
+                    _a.sent();
+                    setProgress(8);
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
+                case 3:
+                    _a.sent();
+                    setProgress(10);
+                    setLoading(false);
+                    console.log("Fichier lu:", file.name, "Taille:", file.size);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleFileRemove = function () {
+        setFile(null);
+        setFileContent(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 })));
+};
+export var Default = Template.bind({});
+Default.args = {
+    acceptedExtensions: [".pdf"],
+    maxFileSizeMB: 5,
+    enableDragAndDrop: true,
+    buttonLabel: "Choisir un fichier",
+    acceptedLabel: "Format accepté :",
+    maxSizeLabel: "Taille maximale :",
+    iconUrl: pdfIcon,
+};
+export var WithDescription = Template.bind({});
+WithDescription.args = __assign(__assign({}, Default.args), { descriptionParts: {
+        beforeLink: "Une",
+        linkLabel: "page sera ajoutée",
+        linkUrl: "https://example.com",
+        afterLink: "à la fin de votre convention d'honoraire précisant les détails du rendez-vous.",
+    } });
+export var WithoutDragAndDrop = Template.bind({});
+WithoutDragAndDrop.args = __assign(__assign({}, Default.args), { enableDragAndDrop: false });
+export var WithError = Template.bind({});
+WithError.args = __assign(__assign({}, Default.args), { errorMessage: "Le format du fichier choisi n'est pas supporté ou sa taille dépasse 5 Mo." });
+export var WithProgress = Template.bind({});
+WithProgress.args = __assign(__assign({}, Default.args), { uploadProgress: 6, isLoading: true, fileName: "document.pdf", fileSize: 2 * 1024 * 1024 });
+// Exemple avec des extensions multiples
+export var MultipleExtensions = Template.bind({});
+MultipleExtensions.args = __assign(__assign({}, Default.args), { acceptedExtensions: [".pdf", ".doc", ".docx"] });

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

@@ -0,0 +1,2 @@
+export { default as FileUploader } from "./FileUploader";
+export type { FileUploaderProps } from "./FileUploader";

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

@@ -0,0 +1 @@
+export { default as FileUploader } from "./FileUploader";

package/dist/index.d.ts

@@ -99,3 +99,5 @@ export { default as BlogText } from "./components/molecules/blogText/BlogText";
 export type { BlogTextProps } from "./components/molecules/blogText/BlogText";
 export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
 export type { BlogTextImageBlockProps } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
+export { default as FileUploader } from "./components/molecules/fileUploader/FileUploader";
+export type { FileUploaderProps } from "./components/molecules/fileUploader/FileUploader";

package/dist/index.js

@@ -100,3 +100,5 @@ export { default as blogFooter } from "./components/molecules/blogFooter/BlogFoo
 export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
 export { default as BlogText } from "./components/molecules/blogText/BlogText";
 export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
+// File Uploader
+export { default as FileUploader } from "./components/molecules/fileUploader/FileUploader";

package/package.json

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