allaw-ui 3.3.6 → 3.3.8

package/dist/components/molecules/entityCard/EntityCard.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type EntityCardProps = {
+    entityName: string;
+    numberOfMembers: number;
+    formatedAddress?: string;
+    immat?: string;
+    actionType: "QUIT" | "REQUEST" | "REMOVE_REQUEST" | "NONE";
+    onActionButtonClick?: () => void;
+    onCardClick?: () => void;
+};
+declare function EntityCard({ entityName, numberOfMembers, formatedAddress, immat, actionType, onActionButtonClick, onCardClick }: EntityCardProps): React.JSX.Element;
+export default EntityCard;

package/dist/components/molecules/entityCard/EntityCard.js

@@ -0,0 +1,51 @@
+import React from "react";
+import styles from "./entityCard.module.css";
+var ActionButton = function (_a) {
+    var type = _a.type, action = _a.action;
+    var elements = {
+        "QUIT": {
+            text: "Quitter l'organisation",
+            icon: "allaw-icon-close",
+            color: "#E15151",
+        },
+        "REQUEST": {
+            text: "Demander à rejoindre",
+            icon: "allaw-icon-arrow-right",
+            color: "#25BEEB",
+        },
+        "REMOVE_REQUEST": {
+            text: "Annuler la demande",
+            icon: "allaw-icon-close",
+            color: "#E15151",
+        },
+        "NONE": {
+            text: "",
+            icon: "",
+            color: "",
+        }
+    };
+    return React.createElement("button", { style: { color: elements[type].color }, className: styles.actionButton, onClick: function () { action && action(); } },
+        elements[type].text,
+        React.createElement("i", { className: elements[type].icon }));
+};
+function EntityCard(_a) {
+    var entityName = _a.entityName, numberOfMembers = _a.numberOfMembers, formatedAddress = _a.formatedAddress, immat = _a.immat, actionType = _a.actionType, onActionButtonClick = _a.onActionButtonClick, onCardClick = _a.onCardClick;
+    return React.createElement("div", { className: styles.card, style: { cursor: onCardClick ? "pointer" : "default" }, onClick: function () { return onCardClick && onCardClick(); } },
+        React.createElement("div", { className: styles.picturePlaceHolder },
+            React.createElement("i", { className: "allaw-icon-home" })),
+        React.createElement("div", { className: styles.dataInfo },
+            React.createElement("div", { className: styles.basicsInfo },
+                React.createElement("span", { className: styles.entityName }, entityName),
+                React.createElement("span", { className: styles.numberOfMembers }, formatedAddress)),
+            React.createElement("div", { className: styles.detailsInfo },
+                React.createElement("span", { className: styles.detail },
+                    React.createElement("i", { className: "allaw-icon-users" }),
+                    numberOfMembers,
+                    " membre",
+                    numberOfMembers > 1 ? "s" : ""),
+                React.createElement("span", { className: styles.detail },
+                    React.createElement("i", { className: "allaw-icon-prestation" }),
+                    immat))),
+        actionType != "NONE" && React.createElement(ActionButton, { type: actionType, action: onActionButtonClick && onActionButtonClick() }));
+}
+export default EntityCard;

package/dist/components/molecules/entityCard/EntityCard.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export let title: string;
+    export { EntityCard as component };
+}
+export default _default;
+export const Default: any;
+import EntityCard from "./EntityCard";

package/dist/components/molecules/entityCard/EntityCard.stories.js

@@ -0,0 +1,30 @@
+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);
+};
+import React from "react";
+import EntityCard from "./EntityCard";
+import { action } from "@storybook/addon-actions";
+export default {
+    title: "Components/Molecules/EntityCard",
+    component: EntityCard,
+};
+var Template = function (args) { return React.createElement(EntityCard, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    pictureLink: "https://via.placeholder.com/100",
+    entityName: "Cabinet Martin & Associés",
+    numberOfMembers: 3,
+    formatedAddress: "12 rue du Droit, 75001 Paris",
+    immat: "RCS Paris 123 456 789",
+    actionType: "REQUEST",
+    onActionButtonClick: action("Action button clicked"),
+    onCardClick: action("Card clicked"),
+};

package/dist/components/molecules/entityCard/entityCard.module.css

@@ -0,0 +1,115 @@
+.card {
+    display: flex;
+    min-height: 92px;
+    padding: 16px;
+    justify-content: start;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+    align-self: stretch;
+    border-radius: 16px;
+    border: 1.5px solid var(--Primary-Venom-grey, #E6EDF5);
+}
+
+.picturePlaceHolder {
+    display: flex;
+    width: 60px;
+    height: 60px;
+    padding: 8px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    background: #F5F7FA;
+}
+
+.dataInfo {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    flex-wrap: wrap;
+}
+
+.basicsInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: start;
+}
+
+.entityName {
+    color: #000;
+    leading-trim: both;
+    text-edge: cap;
+    font-family: Poppins;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px; /* 137.5% */
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    }
+
+.numberOfMembers {
+    color: #456073;
+    leading-trim: both;
+    text-edge: cap;
+    font-family: var(--font-open-sans);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.detailsInfo {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.detail {
+    display: flex;
+    padding: 2px 0px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    color: var(--Primary-Dark-grey, #456073);
+    leading-trim: both;
+    text-edge: cap;
+    text-wrap: nowrap;
+    /* OS - 16px - Paragraphe/OS - SemiBold */
+    font-family: var(--font-open-sans);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+.actionButton {
+    margin-left: auto;
+    display: flex;
+    padding: 12px 0px;
+    align-items: baseline;
+    gap: 8px;
+    cursor: pointer;
+
+    font-family: var(--font-open-sans);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    background: transparent;
+    border: none;
+}
+
+.actionButton > i {
+    font-size: 12px;
+}

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

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

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

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

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

@@ -1,18 +1,32 @@
 import React from "react";
+interface ImageConfig {
+    url: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    padding?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
 export interface ModalProps {
     show: boolean;
     title: string;
     description: string;
     confirmLabel: string;
-    cancelLabel: string;
+    cancelLabel?: string;
     onConfirm: () => void;
     onCancel: () => void;
     isDanger?: boolean;
     confirmIconName?: string;
+    imageConfig?: ImageConfig;
     verticalOffset?: {
         top?: number;
         bottom?: number;
     };
+    horizontalOffset?: {
+        left?: number;
+        right?: number;
+    };
 }
 declare const Modal: React.FC<ModalProps>;
 export default Modal;

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

@@ -1,3 +1,14 @@
+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);
+};
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import style from "./Modal.module.css";
@@ -6,8 +17,9 @@ 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, verticalOffset = _a.verticalOffset;
+    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 _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
+    var _e = useState(false), imgError = _e[0], setImgError = _e[1];
     var portalContainerRef = useRef(null);
     var modalContentRef = useRef(null);
     var isMouseDownOutsideRef = useRef(false);
@@ -18,6 +30,7 @@ var Modal = function (_a) {
             portalContainerRef.current = container;
             document.body.style.overflow = "hidden";
             setIsVisible(true);
+            setImgError(false);
         }
         else {
             setIsVisible(false);
@@ -52,6 +65,9 @@ var Modal = function (_a) {
             onCancel();
         }
     };
+    var handleImageError = function () {
+        setImgError(true);
+    };
     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: {
@@ -59,14 +75,22 @@ var Modal = function (_a) {
             paddingBottom: (verticalOffset === null || verticalOffset === void 0 ? void 0 : verticalOffset.bottom)
                 ? "".concat(verticalOffset.bottom, "px")
                 : undefined,
+            paddingLeft: (horizontalOffset === null || horizontalOffset === void 0 ? void 0 : horizontalOffset.left)
+                ? "".concat(horizontalOffset.left, "px")
+                : undefined,
+            paddingRight: (horizontalOffset === null || horizontalOffset === void 0 ? void 0 : horizontalOffset.right)
+                ? "".concat(horizontalOffset.right, "px")
+                : 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 }))),
             React.createElement("div", { className: style.modalButtons },
-                React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true }),
+                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 })))));
     return ReactDOM.createPortal(modalContent, portalContainerRef.current);
 };

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

@@ -275,6 +275,17 @@
   overflow-y: auto;
 }
 
+.modalImageWrapper {
+  text-align: center;
+  margin: 0 0 2.5rem 0;
+}
+
+.modalImage {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
 .modalParagraph {
   text-align: left;
 }
@@ -290,6 +301,10 @@
   flex: 1;
 }
 
+.modalButtons button:only-child {
+  width: 100%;
+}
+
 @media (max-width: 1000px) {
   .modalContent {
     z-index: 5001;

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

@@ -9,44 +9,62 @@ declare namespace _default {
             }
             let description: string;
         }
-        export namespace show {
-            let control_1: string;
+        export namespace horizontalOffset {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
             export { control_1 as control };
             let description_1: string;
             export { description_1 as description };
         }
-        export namespace title_1 {
+        export namespace show {
             let control_2: string;
             export { control_2 as control };
             let description_2: string;
             export { description_2 as description };
         }
-        export { title_1 as title };
-        export namespace description_3 {
+        export namespace title_1 {
             let control_3: string;
             export { control_3 as control };
-            let description_4: string;
-            export { description_4 as description };
+            let description_3: string;
+            export { description_3 as description };
         }
-        export { description_3 as description };
-        export namespace confirmLabel {
+        export { title_1 as title };
+        export namespace description_4 {
             let control_4: string;
             export { control_4 as control };
             let description_5: string;
             export { description_5 as description };
         }
-        export namespace cancelLabel {
+        export { description_4 as description };
+        export namespace confirmLabel {
             let control_5: string;
             export { control_5 as control };
             let description_6: string;
             export { description_6 as description };
         }
-        export namespace isDanger {
+        export namespace cancelLabel {
             let control_6: string;
             export { control_6 as control };
             let description_7: string;
             export { description_7 as description };
         }
+        export namespace imageConfig {
+            export namespace control_7 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_7 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
+        export namespace isDanger {
+            let control_8: string;
+            export { control_8 as control };
+            let description_9: string;
+            export { description_9 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -63,4 +81,7 @@ export default _default;
 export const Default: any;
 export const DangerModal: any;
 export const WithLargeOffset: any;
+export const WithImageConfig: any;
+export const WithoutCancel: any;
+export const OffsetBothWays: any;
 import Modal from "./Modal";

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

@@ -1,3 +1,4 @@
+// src/components/molecules/modal/Modal.stories.jsx
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -19,11 +20,13 @@ export default {
     tags: ["autodocs"],
     argTypes: {
         verticalOffset: {
-            control: {
-                type: "object",
-            },
+            control: { type: "object" },
             description: "Décalage vertical du modal (en px) pour éviter les barres de navigation",
         },
+        horizontalOffset: {
+            control: { type: "object" },
+            description: "Décalage horizontal du modal (en px) pour éviter les éléments latéraux",
+        },
         show: {
             control: "boolean",
             description: "Affiche ou masque la modal",
@@ -42,7 +45,11 @@ export default {
         },
         cancelLabel: {
             control: "text",
-            description: "Texte du bouton secondaire",
+            description: "Texte du bouton secondaire (optionnel)",
+        },
+        imageConfig: {
+            control: { type: "object" },
+            description: "Configuration de l'image à afficher (url, alt, dimensions, styles, padding, className)",
         },
         isDanger: {
             control: "boolean",
@@ -81,15 +88,39 @@ Default.args = {
     confirmLabel: "Confirmer",
     cancelLabel: "Annuler",
     isDanger: false,
-    verticalOffset: {
-        top: 64,
-        bottom: 0,
+    verticalOffset: { top: 64, bottom: 0 },
+    horizontalOffset: { left: 0, right: 0 },
+    imageConfig: {
+        url: "https://cdn.iconscout.com/icon/free/png-512/free-checkmark-icon-download-in-svg-png-gif-file-formats--done-approved-check-tick-user-interface-pack-icons-1502470.png?f=webp&w=512",
+        alt: "Checkmark",
+        width: 64,
+        height: 64,
+        padding: "0px, 0px, 250px, 300px",
+        className: "",
+        style: {
+            backgroundColor: "#ffffff",
+        },
     },
 };
 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({});
-WithLargeOffset.args = __assign(__assign({}, Default.args), { verticalOffset: {
-        top: 120,
-        bottom: 80,
-    } });
+WithLargeOffset.args = __assign(__assign({}, Default.args), { verticalOffset: { top: 120, bottom: 80 } });
+export var WithImageConfig = Template.bind({});
+WithImageConfig.args = __assign(__assign({}, Default.args), { title: "Image personnalisée", description: "Cette modal affiche une image avec dimensions et styles personnalisés.", imageConfig: {
+        url: Default.args.imageConfig.url,
+        alt: "Custom checkmark",
+        width: 200,
+        height: 200,
+        padding: "24px",
+        className: "border-circle",
+        style: {
+            border: "4px dashed #007bff",
+            borderRadius: "50%",
+            backgroundColor: "#e9f5ff",
+        },
+    }, confirmLabel: "Valider", cancelLabel: "Annuler" });
+export var WithoutCancel = Template.bind({});
+WithoutCancel.args = __assign(__assign({}, Default.args), { title: "Information", description: "Cette action a été effectuée avec succès.", confirmLabel: "OK", cancelLabel: undefined });
+export var OffsetBothWays = Template.bind({});
+OffsetBothWays.args = __assign(__assign({}, Default.args), { title: "Modal avec décalages", description: "Décalages verticaux et horizontaux appliqués.", verticalOffset: { top: 100, bottom: 50 }, horizontalOffset: { left: 80, right: 80 } });

package/dist/index.d.ts

@@ -81,6 +81,8 @@ export { default as FeatureCard } from "./components/atoms/featureCard/featureCa
 export type { FeatureType } from "./components/atoms/featureCard/featureCard";
 export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
 export type { FeatureGridProps } from "./components/molecules/featureGrid/FeatureGrid";
+export { default as EntityCard } from "./components/molecules/entityCard/EntityCard";
+export type { EntityCardProps } from "./components/molecules/entityCard/EntityCard";
 export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
 export type { HeroSectionProps } from "./components/molecules/heroSection/HeroSection";
 export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";

package/dist/index.js

@@ -91,6 +91,7 @@ export { default as VerificationCodeInput } from "./components/atoms/inputs/Veri
 export { default as Banner } from "./components/molecules/banner/Banner";
 export { default as FeatureCard } from "./components/atoms/featureCard/featureCard";
 export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
+export { default as EntityCard } from "./components/molecules/entityCard/EntityCard";
 export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
 export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";
 export { default as QuestionAnswer } from "./components/molecules/questionAnswer/QuestionAnswer";

package/package.json

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