allaw-ui 3.6.8 → 3.6.9

package/dist/components/molecules/modal/Modal.d.ts

@@ -8,6 +8,10 @@ interface ImageConfig {
     className?: string;
     style?: React.CSSProperties;
 }
+interface CustomContentConfig {
+    component: React.ComponentType<any>;
+    props?: Record<string, unknown>;
+}
 export interface ModalProps {
     show: boolean;
     title: string;
@@ -19,6 +23,12 @@ export interface ModalProps {
     isDanger?: boolean;
     confirmIconName?: string;
     imageConfig?: ImageConfig;
+    children?: React.ReactNode;
+    customContent?: CustomContentConfig;
+    renderContent?: (modalProps: {
+        isOpen: boolean;
+        onClose: () => void;
+    }) => React.ReactNode;
     verticalOffset?: {
         top?: number;
         bottom?: number;

package/dist/components/molecules/modal/Modal.js

@@ -17,7 +17,7 @@ import SecondaryButton from "../../atoms/buttons/SecondaryButton";
 import Heading from "../../atoms/typography/Heading";
 import Paragraph from "../../atoms/typography/Paragraph";
 var Modal = function (_a) {
-    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset;
+    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, children = _a.children, customContent = _a.customContent, renderContent = _a.renderContent, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset;
     var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
     var _e = useState(false), imgError = _e[0], setImgError = _e[1];
     var portalContainerRef = useRef(null);
@@ -68,6 +68,26 @@ var Modal = function (_a) {
     var handleImageError = function () {
         setImgError(true);
     };
+    var renderModalContent = function () {
+        if (renderContent) {
+            return (React.createElement("div", { className: style.modalCustomWrapper }, renderContent({ isOpen: show, onClose: onCancel })));
+        }
+        if (customContent) {
+            var Component = customContent.component, _a = customContent.props, props = _a === void 0 ? {} : _a;
+            return (React.createElement("div", { className: style.modalCustomWrapper },
+                React.createElement(Component, __assign({}, props))));
+        }
+        if (children) {
+            return React.createElement("div", { className: style.modalCustomWrapper }, children);
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: style.modalHeadingWrapper },
+                React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
+            React.createElement("div", { className: style.modalParagraphWrapper },
+                React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
+            imageConfig && !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
+                React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage })))));
+    };
     if (!show || !isVisible || !portalContainerRef.current)
         return null;
     var modalContent = (React.createElement("div", { className: "".concat(style.modalOverlay, " ").concat(isVisible ? style.visible : "", " ").concat(show ? style.modal : ""), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, style: {
@@ -83,12 +103,7 @@ var Modal = function (_a) {
                 : undefined,
         } },
         React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : ""), ref: modalContentRef },
-            React.createElement("div", { className: style.modalHeadingWrapper },
-                React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
-            React.createElement("div", { className: style.modalParagraphWrapper },
-                React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
-            imageConfig && !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
-                React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage }))),
+            renderModalContent(),
             React.createElement("div", { className: style.modalButtons },
                 cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),
                 React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true })))));

package/dist/components/molecules/modal/Modal.module.css

@@ -286,6 +286,11 @@
   border-radius: 8px;
 }
 
+.modalCustomWrapper {
+  width: 100%;
+  margin-bottom: 2.5rem;
+}
+
 .modalParagraph {
   text-align: left;
 }

package/dist/components/molecules/modal/Modal.stories.d.ts

@@ -3,68 +3,89 @@ declare namespace _default {
     export { Modal as component };
     export let tags: string[];
     export namespace argTypes {
-        export namespace verticalOffset {
-            namespace control {
-                let type: string;
-            }
+        export namespace children {
+            let control: boolean;
             let description: string;
         }
-        export namespace horizontalOffset {
+        export namespace customContent {
             export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
+                let type: string;
             }
             export { control_1 as control };
             let description_1: string;
             export { description_1 as description };
         }
-        export namespace show {
-            let control_2: string;
+        export namespace renderContent {
+            let control_2: boolean;
             export { control_2 as control };
             let description_2: string;
             export { description_2 as description };
         }
-        export namespace title_1 {
-            let control_3: string;
+        export namespace verticalOffset {
+            export namespace control_3 {
+                let type_1: string;
+                export { type_1 as type };
+            }
             export { control_3 as control };
             let description_3: string;
             export { description_3 as description };
         }
-        export { title_1 as title };
-        export namespace description_4 {
-            let control_4: string;
+        export namespace horizontalOffset {
+            export namespace control_4 {
+                let type_2: string;
+                export { type_2 as type };
+            }
             export { control_4 as control };
-            let description_5: string;
-            export { description_5 as description };
+            let description_4: string;
+            export { description_4 as description };
         }
-        export { description_4 as description };
-        export namespace confirmLabel {
+        export namespace show {
             let control_5: string;
             export { control_5 as control };
-            let description_6: string;
-            export { description_6 as description };
+            let description_5: string;
+            export { description_5 as description };
         }
-        export namespace cancelLabel {
+        export namespace title_1 {
             let control_6: string;
             export { control_6 as control };
-            let description_7: string;
-            export { description_7 as description };
+            let description_6: string;
+            export { description_6 as description };
         }
-        export namespace imageConfig {
-            export namespace control_7 {
-                let type_2: string;
-                export { type_2 as type };
-            }
+        export { title_1 as title };
+        export namespace description_7 {
+            let control_7: string;
             export { control_7 as control };
             let description_8: string;
             export { description_8 as description };
         }
-        export namespace isDanger {
+        export { description_7 as description };
+        export namespace confirmLabel {
             let control_8: string;
             export { control_8 as control };
             let description_9: string;
             export { description_9 as description };
         }
+        export namespace cancelLabel {
+            let control_9: string;
+            export { control_9 as control };
+            let description_10: string;
+            export { description_10 as description };
+        }
+        export namespace imageConfig {
+            export namespace control_10 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_10 as control };
+            let description_11: string;
+            export { description_11 as description };
+        }
+        export namespace isDanger {
+            let control_11: string;
+            export { control_11 as control };
+            let description_12: string;
+            export { description_12 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -79,6 +100,9 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
+export const WithChildren: any;
+export const WithCustomContent: any;
+export const WithRenderContent: any;
 export const DangerModal: any;
 export const WithLargeOffset: any;
 export const WithImageConfig: any;

package/dist/components/molecules/modal/Modal.stories.js

@@ -14,11 +14,46 @@ import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 import Modal from "./Modal";
 import "../../../styles/global.css";
+// Composant d'exemple pour démontrer les nouvelles fonctionnalités
+var CustomFormComponent = function (_a) {
+    var title = _a.title, onSubmit = _a.onSubmit, _b = _a.initialValue, initialValue = _b === void 0 ? "" : _b;
+    var _c = useState(initialValue), value = _c[0], setValue = _c[1];
+    return (React.createElement("div", { style: { textAlign: "center" } },
+        React.createElement("h3", { style: { marginBottom: "1rem", color: "#1f2937" } }, title),
+        React.createElement("div", { style: { marginBottom: "1rem" } },
+            React.createElement("input", { type: "text", value: value, onChange: function (e) { return setValue(e.target.value); }, placeholder: "Saisissez votre texte...", style: {
+                    width: "100%",
+                    padding: "0.75rem",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "0.375rem",
+                    fontSize: "1rem",
+                } })),
+        React.createElement("button", { onClick: function () { return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(value); }, disabled: !value.trim(), style: {
+                padding: "0.5rem 1rem",
+                backgroundColor: value.trim() ? "#3b82f6" : "#9ca3af",
+                color: "white",
+                border: "none",
+                borderRadius: "0.375rem",
+                cursor: value.trim() ? "pointer" : "not-allowed",
+            } }, "Valider la saisie")));
+};
 export default {
     title: "Components/Molecules/Modal",
     component: Modal,
     tags: ["autodocs"],
     argTypes: {
+        children: {
+            control: false,
+            description: "Contenu React à afficher dans la modal (ReactNode)",
+        },
+        customContent: {
+            control: { type: "object" },
+            description: "Composant personnalisé avec ses props { component, props }",
+        },
+        renderContent: {
+            control: false,
+            description: "Fonction de rendu (modalProps) => ReactNode",
+        },
         verticalOffset: {
             control: { type: "object" },
             description: "Décalage vertical du modal (en px) pour éviter les barres de navigation",
@@ -102,6 +137,75 @@ Default.args = {
         },
     },
 };
+// Nouvelle story : Modal avec children
+export var WithChildren = Template.bind({});
+WithChildren.args = {
+    show: false,
+    confirmLabel: "Valider",
+    cancelLabel: "Annuler",
+    children: (React.createElement("div", { style: { textAlign: "center", padding: "2rem" } },
+        React.createElement("h2", { style: { color: "#1f2937", marginBottom: "1rem" } }, "Contenu personnalis\u00E9"),
+        React.createElement("p", { style: { color: "#6b7280", marginBottom: "1.5rem" } },
+            "Ce contenu est pass\u00E9 via la prop ",
+            React.createElement("code", null, "children")),
+        React.createElement("div", { style: {
+                padding: "1rem",
+                backgroundColor: "#f3f4f6",
+                borderRadius: "0.5rem",
+                border: "2px dashed #9ca3af",
+            } },
+            React.createElement("span", { style: { fontSize: "2rem" } }, "\uD83C\uDF89"),
+            React.createElement("p", { style: { margin: "0.5rem 0 0 0", fontWeight: "bold" } }, "Succ\u00E8s !")))),
+};
+// Nouvelle story : Modal avec customContent
+export var WithCustomContent = Template.bind({});
+WithCustomContent.args = {
+    show: false,
+    confirmLabel: "Valider",
+    cancelLabel: "Annuler",
+    customContent: {
+        component: CustomFormComponent,
+        props: {
+            title: "Formulaire personnalisé",
+            initialValue: "Valeur initiale",
+            onSubmit: function (value) { return action("Form submitted")(value); },
+        },
+    },
+};
+// Nouvelle story : Modal avec renderContent
+export var WithRenderContent = Template.bind({});
+WithRenderContent.args = {
+    show: false,
+    confirmLabel: "Fermer",
+    cancelLabel: undefined,
+    renderContent: function (_a) {
+        var isOpen = _a.isOpen, onClose = _a.onClose;
+        return (React.createElement("div", { style: { textAlign: "center" } },
+            React.createElement("h2", { style: { color: "#dc2626", marginBottom: "1rem" } }, "\u26A0\uFE0F Attention"),
+            React.createElement("p", { style: { marginBottom: "1rem" } },
+                "Modal \u00E9tat : ",
+                isOpen ? "Ouverte" : "Fermée"),
+            React.createElement("div", { style: {
+                    padding: "1rem",
+                    backgroundColor: "#fef2f2",
+                    border: "1px solid #fecaca",
+                    borderRadius: "0.5rem",
+                    marginBottom: "1rem",
+                } },
+                React.createElement("p", { style: { margin: 0, fontSize: "0.875rem", color: "#991b1b" } }, "Cette action est irr\u00E9versible et supprimera d\u00E9finitivement vos donn\u00E9es.")),
+            React.createElement("button", { onClick: function () {
+                    action("Internal action")();
+                    onClose();
+                }, style: {
+                    padding: "0.5rem 1rem",
+                    backgroundColor: "#dc2626",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "0.375rem",
+                    cursor: "pointer",
+                } }, "Action dangereuse")));
+    },
+};
 export var DangerModal = Template.bind({});
 DangerModal.args = __assign(__assign({}, Default.args), { title: "Attention", description: "Cette action est irréversible. Voulez-vous continuer ?", confirmLabel: "Supprimer", isDanger: true });
 export var WithLargeOffset = Template.bind({});

package/package.json

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