allaw-ui 4.1.2 → 4.1.4

package/dist/components/molecules/proSwitch/AvatarToggleGroup.js

@@ -0,0 +1,150 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import AvatarBubble from "./AvatarBubble";
+import styles from "./avatarToggleGroup.module.css";
+var AvatarToggleGroup = function (_a) {
+    var pros = _a.pros, mode = _a.mode, selected = _a.selected, onSelect = _a.onSelect, maxVisible = _a.maxVisible, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onOpenPortal = _a.onOpenPortal, _c = _a.className, className = _c === void 0 ? "" : _c;
+    var containerRef = useRef(null);
+    var _d = useState(maxVisible || 0), calculatedMaxVisible = _d[0], setCalculatedMaxVisible = _d[1];
+    var _e = useState(-1), focusedIndex = _e[0], setFocusedIndex = _e[1];
+    // Calcul dynamique de maxVisible
+    var calculateMaxVisible = useCallback(function () {
+        if (maxVisible !== undefined) {
+            setCalculatedMaxVisible(maxVisible);
+            return;
+        }
+        if (!containerRef.current || pros.length === 0) {
+            setCalculatedMaxVisible(0);
+            return;
+        }
+        var container = containerRef.current;
+        var containerWidth = container.clientWidth - 24; // Padding de 12px de chaque côté
+        var avatarDiameter = 42.5; // Taille par défaut
+        var overlap = avatarDiameter - 8; // Chevauchement de 8px
+        var threshold = 0.66 * avatarDiameter; // 66% de visibilité
+        var count = 0;
+        while (count < pros.length) {
+            var nextAvatarPosition = count * overlap;
+            var visibleWidth = containerWidth - nextAvatarPosition;
+            if (visibleWidth >= threshold) {
+                count++;
+            }
+            else {
+                break;
+            }
+        }
+        setCalculatedMaxVisible(Math.max(0, count));
+    }, [maxVisible, pros.length]);
+    // Recalculer lors du resize
+    useEffect(function () {
+        calculateMaxVisible();
+        var resizeObserver = new ResizeObserver(function () {
+            calculateMaxVisible();
+        });
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, [calculateMaxVisible]);
+    // Gestion de la sélection
+    var handleAvatarClick = useCallback(function (pro) {
+        if (disabled)
+            return;
+        var newSelected;
+        if (mode === "single") {
+            // En mode single, on remplace la sélection
+            newSelected = [pro.proUserId];
+        }
+        else {
+            // En mode multiple, on toggle
+            var isCurrentlySelected = selected.includes(pro.proUserId);
+            if (isCurrentlySelected) {
+                newSelected = selected.filter(function (id) { return id !== pro.proUserId; });
+            }
+            else {
+                newSelected = __spreadArray(__spreadArray([], selected, true), [pro.proUserId], false);
+            }
+        }
+        // Appeler onSelect avec les objets complets
+        var selectedPros = pros.filter(function (pro) {
+            return newSelected.includes(pro.proUserId);
+        });
+        onSelect(selectedPros);
+    }, [mode, selected, pros, onSelect, disabled]);
+    // Gestion du clavier
+    var handleKeyDown = useCallback(function (event) {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (onOpenPortal) {
+                    onOpenPortal();
+                }
+                break;
+            case "ArrowLeft":
+                event.preventDefault();
+                setFocusedIndex(function (prev) { return Math.max(-1, prev - 1); });
+                break;
+            case "ArrowRight":
+                event.preventDefault();
+                setFocusedIndex(function (prev) {
+                    return Math.min(calculatedMaxVisible - 1, prev + 1);
+                });
+                break;
+            case "Tab":
+                // Laisser le comportement par défaut pour la navigation
+                break;
+        }
+    }, [disabled, onOpenPortal, calculatedMaxVisible]);
+    // Navigation clavier globale
+    useEffect(function () {
+        var handleGlobalKeyDown = function (event) {
+            if (disabled)
+                return;
+            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                var container = containerRef.current;
+                if (container && container.contains(document.activeElement)) {
+                    event.preventDefault();
+                    setFocusedIndex(function (prev) {
+                        if (event.key === "ArrowLeft") {
+                            return Math.max(-1, prev - 1);
+                        }
+                        else {
+                            return Math.min(calculatedMaxVisible - 1, prev + 1);
+                        }
+                    });
+                }
+            }
+        };
+        document.addEventListener("keydown", handleGlobalKeyDown);
+        return function () { return document.removeEventListener("keydown", handleGlobalKeyDown); };
+    }, [disabled, calculatedMaxVisible]);
+    var visiblePros = pros.slice(0, calculatedMaxVisible);
+    var hiddenCount = pros.length - calculatedMaxVisible;
+    var hasHiddenPros = hiddenCount > 0;
+    return (React.createElement("div", { ref: containerRef, className: "".concat(styles.proSwitch, " ").concat(className), role: "group", "aria-label": "S\u00E9lection de professionnels", "data-disabled": disabled },
+        React.createElement("div", { className: styles.avatarStack }, visiblePros.map(function (pro, index) {
+            var isSelected = selected.includes(pro.proUserId);
+            return (React.createElement("div", { key: pro.proUserId, className: styles.avatarWrapper, style: {
+                    zIndex: isSelected ? 100 : visiblePros.length - index,
+                    marginLeft: index === 0 ? 0 : -8,
+                } },
+                React.createElement(AvatarBubble, { firstName: pro.firstName, name: pro.name, src: pro.profilePictureLink, size: 42.5, isSelected: isSelected, disabled: disabled, onClick: function () { return handleAvatarClick(pro); }, alt: "".concat(pro.firstName, " ").concat(pro.name), className: focusedIndex === index ? styles.focused : "" })));
+        })),
+        hasHiddenPros && (React.createElement("button", { className: styles.moreButton, onClick: onOpenPortal, onKeyDown: handleKeyDown, disabled: disabled, "aria-label": "Voir ".concat(pros.length, " professionnels"), tabIndex: disabled ? -1 : 0 },
+            "+",
+            hiddenCount))));
+};
+export default AvatarToggleGroup;

package/dist/components/molecules/proSwitch/AvatarToggleGroup.stories.d.ts

@@ -0,0 +1,75 @@
+declare namespace _default {
+    export let title: string;
+    export { AvatarToggleGroup as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace pros {
+            let control: string;
+            let description: string;
+        }
+        namespace mode {
+            export namespace control_1 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace selected {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace maxVisible {
+            export namespace control_3 {
+                let type_1: string;
+                export { type_1 as type };
+                export let min: number;
+                export let max: number;
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace disabled {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace onSelect {
+            export let action: string;
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace onOpenPortal {
+            let action_1: string;
+            export { action_1 as action };
+            let description_6: string;
+            export { description_6 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Multiple: any;
+export const WithManyPros: any;
+export const Disabled: any;
+export const WithMaxVisible: any;
+export const SingleWithInitials: any;
+export function ResponsiveTest(): React.JSX.Element;
+export function InteractiveDemo(): React.JSX.Element;
+import AvatarToggleGroup from "./AvatarToggleGroup";
+import React from "react";

package/dist/components/molecules/proSwitch/AvatarToggleGroup.stories.js

@@ -0,0 +1,276 @@
+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, { useState } from "react";
+import { action } from "@storybook/addon-actions";
+import AvatarToggleGroup from "./AvatarToggleGroup";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/ProSwitch/AvatarToggleGroup",
+    component: AvatarToggleGroup,
+    tags: ["autodocs"],
+    argTypes: {
+        pros: {
+            control: "object",
+            description: "Liste des professionnels à afficher",
+        },
+        mode: {
+            control: {
+                type: "select",
+                options: ["single", "multiple"],
+            },
+            description: "Mode de sélection (single ou multiple)",
+        },
+        selected: {
+            control: "object",
+            description: "Liste des IDs des pros sélectionnés",
+        },
+        maxVisible: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 10,
+            },
+            description: "Nombre maximum d'avatars visibles (optionnel)",
+        },
+        disabled: {
+            control: "boolean",
+            description: "État désactivé",
+        },
+        onSelect: {
+            action: "selected",
+            description: "Callback appelé lors de la sélection",
+        },
+        onOpenPortal: {
+            action: "portal opened",
+            description: "Callback appelé à l'ouverture de la modal",
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+// Données de test
+var samplePros = [
+    {
+        token: "t1",
+        proUserId: "1",
+        name: "Dupont",
+        firstName: "Jean",
+        profilePictureLink: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t2",
+        proUserId: "2",
+        name: "Martin",
+        firstName: "Marie",
+        profilePictureLink: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face",
+        profession: "NOTAIRE",
+    },
+    {
+        token: "t3",
+        proUserId: "3",
+        name: "Durand",
+        firstName: "Pierre",
+        profilePictureLink: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t4",
+        proUserId: "4",
+        name: "Bernard",
+        firstName: "Sophie",
+        profilePictureLink: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face",
+        profession: "COMMISSAIRE",
+    },
+    {
+        token: "t5",
+        proUserId: "5",
+        name: "Petit",
+        firstName: "Lucas",
+        profilePictureLink: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&h=150&fit=crop&crop=face",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t6",
+        proUserId: "6",
+        name: "Rousseau",
+        firstName: "Emma",
+        profilePictureLink: "https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=150&h=150&fit=crop&crop=face",
+        profession: "NOTAIRE",
+    },
+    {
+        token: "t7",
+        proUserId: "7",
+        name: "Leroy",
+        firstName: "François",
+        profilePictureLink: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=150&h=150&fit=crop&crop=face",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t8",
+        proUserId: "8",
+        name: "Moreau",
+        firstName: "Alice",
+        profilePictureLink: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&h=150&fit=crop&crop=face",
+        profession: "COMMISSAIRE",
+    },
+];
+var Template = function (args) {
+    var _a = useState(args.selected || []), selected = _a[0], setSelected = _a[1];
+    var handleSelect = function (selectedPros) {
+        setSelected(selectedPros.map(function (pro) { return pro.proUserId; }));
+        action("onSelect")(selectedPros);
+    };
+    return (React.createElement("div", { style: { padding: "20px", maxWidth: "600px" } },
+        React.createElement(AvatarToggleGroup, __assign({}, args, { selected: selected, onSelect: handleSelect })),
+        React.createElement("div", { style: { marginTop: "20px", fontSize: "14px", color: "#666" } },
+            React.createElement("strong", null, "S\u00E9lection actuelle :"),
+            " ",
+            selected.join(", ") || "Aucune")));
+};
+export var Default = Template.bind({});
+Default.args = {
+    pros: samplePros.slice(0, 3),
+    mode: "single",
+    selected: ["1"],
+    disabled: false,
+};
+export var Multiple = Template.bind({});
+Multiple.args = {
+    pros: samplePros.slice(0, 4),
+    mode: "multiple",
+    selected: ["1", "3"],
+    disabled: false,
+};
+export var WithManyPros = Template.bind({});
+WithManyPros.args = {
+    pros: samplePros,
+    mode: "multiple",
+    selected: ["1", "3", "5"],
+    disabled: false,
+};
+export var Disabled = Template.bind({});
+Disabled.args = {
+    pros: samplePros.slice(0, 3),
+    mode: "single",
+    selected: ["1"],
+    disabled: true,
+};
+export var WithMaxVisible = Template.bind({});
+WithMaxVisible.args = {
+    pros: samplePros,
+    mode: "multiple",
+    selected: ["1", "2"],
+    maxVisible: 3,
+    disabled: false,
+};
+export var SingleWithInitials = Template.bind({});
+SingleWithInitials.args = {
+    pros: [
+        {
+            token: "t1",
+            proUserId: "1",
+            name: "Dupont",
+            firstName: "Jean",
+            profilePictureLink: "", // Pas d'image pour forcer les initiales
+            profession: "AVOCAT",
+        },
+        {
+            token: "t2",
+            proUserId: "2",
+            name: "Martin",
+            firstName: "Marie",
+            profilePictureLink: "",
+            profession: "NOTAIRE",
+        },
+        {
+            token: "t3",
+            proUserId: "3",
+            name: "Durand",
+            firstName: "Pierre",
+            profilePictureLink: "",
+            profession: "AVOCAT",
+        },
+    ],
+    mode: "single",
+    selected: ["1"],
+    disabled: false,
+};
+export var ResponsiveTest = function () {
+    var _a = useState(["1"]), selected = _a[0], setSelected = _a[1];
+    var handleSelect = function (selectedPros) {
+        setSelected(selectedPros.map(function (pro) { return pro.proUserId; }));
+        action("onSelect")(selectedPros);
+    };
+    return (React.createElement("div", { style: { padding: "20px" } },
+        React.createElement("h3", { style: { marginBottom: "20px" } }, "Test Responsive - Redimensionnez la fen\u00EAtre"),
+        React.createElement("div", { style: {
+                border: "1px solid #ccc",
+                padding: "20px",
+                marginBottom: "20px",
+                maxWidth: "100%",
+                overflow: "hidden",
+            } },
+            React.createElement(AvatarToggleGroup, { pros: samplePros, mode: "multiple", selected: selected, onSelect: handleSelect, onOpenPortal: function () { return action("Portal opened")(); } })),
+        React.createElement("div", { style: { fontSize: "14px", color: "#666" } },
+            React.createElement("strong", null, "S\u00E9lection :"),
+            " ",
+            selected.join(", ") || "Aucune")));
+};
+export var InteractiveDemo = function () {
+    var _a = useState("single"), mode = _a[0], setMode = _a[1];
+    var _b = useState(["1"]), selected = _b[0], setSelected = _b[1];
+    var _c = useState(false), disabled = _c[0], setDisabled = _c[1];
+    var handleSelect = function (selectedPros) {
+        setSelected(selectedPros.map(function (pro) { return pro.proUserId; }));
+        action("onSelect")(selectedPros);
+    };
+    return (React.createElement("div", { style: { padding: "20px" } },
+        React.createElement("div", { style: {
+                marginBottom: "20px",
+                display: "flex",
+                gap: "20px",
+                alignItems: "center",
+            } },
+            React.createElement("label", null,
+                React.createElement("input", { type: "radio", name: "mode", value: "single", checked: mode === "single", onChange: function (e) { return setMode(e.target.value); } }),
+                "Single"),
+            React.createElement("label", null,
+                React.createElement("input", { type: "radio", name: "mode", value: "multiple", checked: mode === "multiple", onChange: function (e) { return setMode(e.target.value); } }),
+                "Multiple"),
+            React.createElement("label", null,
+                React.createElement("input", { type: "checkbox", checked: disabled, onChange: function (e) { return setDisabled(e.target.checked); } }),
+                "Disabled")),
+        React.createElement("div", { style: {
+                border: "1px solid #ccc",
+                padding: "20px",
+                marginBottom: "20px",
+            } },
+            React.createElement(AvatarToggleGroup, { pros: samplePros.slice(0, 5), mode: mode, selected: selected, onSelect: handleSelect, disabled: disabled, onOpenPortal: function () { return action("Portal opened")(); } })),
+        React.createElement("div", { style: { fontSize: "14px", color: "#666" } },
+            React.createElement("strong", null, "Mode :"),
+            " ",
+            mode,
+            " | ",
+            React.createElement("strong", null, "S\u00E9lection :"),
+            " ",
+            selected.join(", ") || "Aucune")));
+};

package/dist/components/molecules/proSwitch/ProSwitch.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { Pro } from "./AvatarToggleGroup";
+interface ProSwitchProps {
+    pros: Pro[];
+    selected: string[];
+    mode: "single" | "multiple";
+    disabled?: boolean;
+    maxVisible?: number;
+    onSelect?: (selected: Pro[]) => void;
+    onOrderChange?: (ordered: Pro[]) => void;
+    onOpenPortal?: () => void;
+    onClosePortal?: () => void;
+    className?: string;
+}
+declare const ProSwitch: React.FC<ProSwitchProps>;
+export default ProSwitch;

package/dist/components/molecules/proSwitch/ProSwitch.js

@@ -0,0 +1,86 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import AvatarToggleGroup from "./AvatarToggleGroup";
+import ProSwitchModal from "./ProSwitchModal";
+import styles from "./proSwitch.module.css";
+var LOCALSTORAGE_KEY = "allaw.proSwitch.order";
+var ProSwitch = function (_a) {
+    var _b = _a.pros, pros = _b === void 0 ? [] : _b, _c = _a.selected, selected = _c === void 0 ? [] : _c, mode = _a.mode, _d = _a.disabled, disabled = _d === void 0 ? false : _d, maxVisible = _a.maxVisible, onSelect = _a.onSelect, onOrderChange = _a.onOrderChange, onOpenPortal = _a.onOpenPortal, onClosePortal = _a.onClosePortal, _e = _a.className, className = _e === void 0 ? "" : _e;
+    var containerRef = useRef(null);
+    var _f = useState([]), order = _f[0], setOrder = _f[1];
+    var _g = useState(selected), selectedIds = _g[0], setSelectedIds = _g[1];
+    var _h = useState(false), modalOpen = _h[0], setModalOpen = _h[1];
+    // Initialisation de l'ordre depuis localStorage ou props
+    useEffect(function () {
+        var initialOrder = pros.map(function (p) { return p.proUserId; });
+        try {
+            var stored = localStorage.getItem(LOCALSTORAGE_KEY);
+            if (stored) {
+                var arr = JSON.parse(stored);
+                // Ne garder que les ids présents dans pros
+                initialOrder = arr.filter(function (id) { return pros.some(function (p) { return p.proUserId === id; }); });
+                // Ajouter les nouveaux ids non présents dans le storage
+                initialOrder = __spreadArray(__spreadArray([], initialOrder, true), pros
+                    .map(function (p) { return p.proUserId; })
+                    .filter(function (id) { return !initialOrder.includes(id); }), true);
+            }
+        }
+        catch (_a) {
+            // Fallback : ordre par défaut
+        }
+        setOrder(initialOrder);
+    }, [pros]);
+    // Sync selectedIds si props.selected change
+    useEffect(function () {
+        setSelectedIds(selected);
+    }, [selected]);
+    // Gestion de la sélection
+    var handleSelect = useCallback(function (selectedPros) {
+        setSelectedIds(selectedPros.map(function (p) { return p.proUserId; }));
+        if (onSelect)
+            onSelect(selectedPros);
+    }, [onSelect]);
+    // Gestion de l'ouverture de la modal
+    var handleOpenModal = useCallback(function () {
+        setModalOpen(true);
+        if (onOpenPortal)
+            onOpenPortal();
+    }, [onOpenPortal]);
+    // Gestion de la fermeture de la modal
+    var handleCloseModal = useCallback(function () {
+        setModalOpen(false);
+        if (onClosePortal)
+            onClosePortal();
+    }, [onClosePortal]);
+    // Gestion du réordonnancement
+    var handleOrderChange = useCallback(function (orderedPros) {
+        var newOrder = orderedPros.map(function (p) { return p.proUserId; });
+        setOrder(newOrder);
+        try {
+            localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(newOrder));
+        }
+        catch (_a) { }
+        if (onOrderChange)
+            onOrderChange(orderedPros);
+    }, [onOrderChange]);
+    // Pros ordonnés
+    var orderedPros = order
+        .map(function (id) { return pros.find(function (p) { return p.proUserId === id; }); })
+        .filter(Boolean);
+    // Fallback si aucun pro
+    if (!pros || pros.length === 0) {
+        return (React.createElement("div", { className: styles.proSwitchEmpty }, "Aucun professionnel disponible"));
+    }
+    return (React.createElement("div", { className: "".concat(styles.proSwitchContainer, " ").concat(className), ref: containerRef },
+        React.createElement(AvatarToggleGroup, { pros: orderedPros, mode: mode, selected: selectedIds, onSelect: handleSelect, onOpenPortal: handleOpenModal, disabled: disabled, maxVisible: maxVisible, className: styles.avatarToggleGroup }),
+        modalOpen && (React.createElement(ProSwitchModal, { open: modalOpen, pros: orderedPros, selected: selectedIds, mode: mode, onClosePortal: handleCloseModal, onOpenPortal: onOpenPortal, onOrderChange: handleOrderChange, onSelect: handleSelect }))));
+};
+export default ProSwitch;

package/dist/components/molecules/proSwitch/ProSwitch.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export let title: string;
+    export { ProSwitch as component };
+}
+export default _default;
+export function SingleSelect(): React.JSX.Element;
+export function MultiSelectOverflow(): React.JSX.Element;
+import ProSwitch from "./ProSwitch";
+import React from "react";