allaw-ui 4.1.2 → 4.1.4

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

@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import { action } from "@storybook/addon-actions";
+import ProSwitch from "./ProSwitch";
+export default {
+    title: "Components/Molecules/ProSwitch/ProSwitch",
+    component: ProSwitch,
+};
+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: "",
+        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: "",
+        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: "",
+        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: "",
+        profession: "COMMISSAIRE",
+    },
+    {
+        token: "t9",
+        proUserId: "9",
+        name: "Girard",
+        firstName: "Paul",
+        profilePictureLink: "",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t10",
+        proUserId: "10",
+        name: "Fabre",
+        firstName: "Julie",
+        profilePictureLink: "",
+        profession: "NOTAIRE",
+    },
+    {
+        token: "t11",
+        proUserId: "11",
+        name: "Simon",
+        firstName: "Antoine",
+        profilePictureLink: "",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t12",
+        proUserId: "12",
+        name: "Michel",
+        firstName: "Claire",
+        profilePictureLink: "",
+        profession: "COMMISSAIRE",
+    },
+    {
+        token: "t13",
+        proUserId: "13",
+        name: "Garcia",
+        firstName: "Hugo",
+        profilePictureLink: "",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t14",
+        proUserId: "14",
+        name: "David",
+        firstName: "Sarah",
+        profilePictureLink: "",
+        profession: "NOTAIRE",
+    },
+    {
+        token: "t15",
+        proUserId: "15",
+        name: "Robert",
+        firstName: "Nicolas",
+        profilePictureLink: "",
+        profession: "AVOCAT",
+    },
+];
+export var SingleSelect = function () {
+    var _a = useState(["1"]), selected = _a[0], setSelected = _a[1];
+    return (React.createElement(ProSwitch, { pros: samplePros.slice(0, 15), selected: selected, mode: "single", onSelect: function (pros) {
+            setSelected(pros.map(function (p) { return p.proUserId; }));
+            action("onSelect")(pros);
+        }, onOrderChange: action("onOrderChange") }));
+};
+export var MultiSelectOverflow = function () {
+    var _a = useState(["1", "2"]), selected = _a[0], setSelected = _a[1];
+    return (React.createElement("div", { style: { width: 200 } },
+        React.createElement(ProSwitch, { pros: samplePros, selected: selected, mode: "multiple", onSelect: function (pros) {
+                setSelected(pros.map(function (p) { return p.proUserId; }));
+                action("onSelect")(pros);
+            }, onOrderChange: action("onOrderChange") })));
+};

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

@@ -0,0 +1,21 @@
+import React from "react";
+export interface Pro {
+    token: string;
+    proUserId: string;
+    name: string;
+    firstName: string;
+    profilePictureLink: string;
+    profession?: string;
+}
+interface ProSwitchModalProps {
+    open: boolean;
+    pros: Pro[];
+    selected: string[];
+    mode: "single" | "multiple";
+    onClosePortal: () => void;
+    onOpenPortal?: () => void;
+    onOrderChange?: (pros: Pro[]) => void;
+    onSelect?: (selected: Pro[]) => void;
+}
+declare const ProSwitchModal: React.FC<ProSwitchModalProps>;
+export default ProSwitchModal;

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

@@ -0,0 +1,285 @@
+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 __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 } from "react";
+import ReactDOM from "react-dom";
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay, } from "@dnd-kit/core";
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, rectSortingStrategy, useSortable, defaultAnimateLayoutChanges, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import AvatarBubble from "./AvatarBubble";
+import SearchBar from "../../atoms/inputs/SearchBar";
+import TinyInfo from "../../atoms/typography/TinyInfo";
+import styles from "./proSwitchModal.module.css";
+import Paragraph from "src/components/atoms/typography/Paragraph";
+var LOCALSTORAGE_KEY = "allaw.proSwitch.order";
+// Composant SortableItem pour wrapper chaque élément
+var SortableItem = function (_a) {
+    var pro = _a.pro, isSelected = _a.isSelected, isReorder = _a.isReorder, onSelect = _a.onSelect, hasActiveDrag = _a.hasActiveDrag;
+    var _b = useSortable({
+        id: pro.proUserId,
+        animateLayoutChanges: defaultAnimateLayoutChanges,
+        transition: {
+            duration: 250,
+            easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+        },
+    }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition, sortableDragging = _b.isDragging;
+    // Console.log uniquement si transform existe et a des valeurs non-nulles
+    if (transform && (transform.x !== 0 || transform.y !== 0)) {
+        console.log("\uD83D\uDD04 ".concat(pro.firstName, ": transform=").concat(transform.x, ",").concat(transform.y));
+    }
+    var style = {
+        transform: CSS.Transform.toString(transform),
+        transition: transition,
+    };
+    var gridItemClass = [
+        styles.gridItem,
+        sortableDragging ? styles.dragging : "",
+        isReorder && !sortableDragging && !hasActiveDrag ? styles.wiggle : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (React.createElement("div", __assign({ ref: setNodeRef, style: style, className: gridItemClass }, (isReorder ? attributes : {}), (isReorder ? listeners : {})),
+        React.createElement("div", { className: styles.avatarWrapper },
+            React.createElement(AvatarBubble, { firstName: pro.firstName, name: pro.name, src: pro.profilePictureLink, size: 56, isSelected: isSelected, onClick: !isReorder ? function () { return onSelect(pro); } : undefined, disabled: false, disableHoverAnimation: isReorder, borderThick: true })),
+        React.createElement("div", { className: styles.name }, isSelected ? (React.createElement("strong", null,
+            pro.firstName,
+            " ",
+            pro.name)) : ("".concat(pro.firstName, " ").concat(pro.name)))));
+};
+var ProSwitchModal = function (_a) {
+    var open = _a.open, pros = _a.pros, selected = _a.selected, mode = _a.mode, onClosePortal = _a.onClosePortal, onOpenPortal = _a.onOpenPortal, onOrderChange = _a.onOrderChange, onSelect = _a.onSelect;
+    var _b = useState(""), search = _b[0], setSearch = _b[1];
+    var _c = useState(false), isReorder = _c[0], setIsReorder = _c[1];
+    var _d = useState([]), order = _d[0], setOrder = _d[1];
+    var _e = useState(null), draggedId = _e[0], setDraggedId = _e[1];
+    var _f = useState(null), hoveredId = _f[0], setHoveredId = _f[1];
+    var _g = useState(null), activeDragPro = _g[0], setActiveDragPro = _g[1];
+    var _h = useState(pros), filteredPros = _h[0], setFilteredPros = _h[1];
+    var modalRef = useRef(null);
+    var firstInputRef = useRef(null);
+    var _j = useState(null), reorderLabel = _j[0], setReorderLabel = _j[1];
+    // Focus trap
+    useEffect(function () {
+        if (open && firstInputRef.current) {
+            firstInputRef.current.focus();
+        }
+        if (open && onOpenPortal)
+            onOpenPortal();
+        // eslint-disable-next-line
+    }, [open]);
+    // Filtrage live
+    useEffect(function () {
+        var lower = search.trim().toLowerCase();
+        var filtered = pros.filter(function (p) {
+            return p.firstName.toLowerCase().includes(lower) ||
+                p.name.toLowerCase().includes(lower);
+        });
+        setFilteredPros(filtered);
+    }, [search, pros]);
+    // Initial order from localStorage or props
+    useEffect(function () {
+        if (open) {
+            var stored = localStorage.getItem(LOCALSTORAGE_KEY);
+            if (stored) {
+                var arr = JSON.parse(stored);
+                // Only keep pros present in the current list
+                setOrder(arr.filter(function (id) { return pros.some(function (p) { return p.proUserId === id; }); }));
+            }
+            else {
+                setOrder(pros.map(function (p) { return p.proUserId; }));
+            }
+        }
+    }, [open, pros]);
+    // Gestion fermeture (overlay, esc)
+    useEffect(function () {
+        if (!open)
+            return;
+        var handleKey = function (e) {
+            if (e.key === "Escape")
+                onClosePortal();
+        };
+        document.addEventListener("keydown", handleKey);
+        return function () { return document.removeEventListener("keydown", handleKey); };
+    }, [open, onClosePortal]);
+    var handleOverlayClick = function (e) {
+        if (e.target === modalRef.current)
+            onClosePortal();
+    };
+    // DnD-kit setup avec activation plus sensible
+    var sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+            delay: 0,
+            tolerance: 5,
+        },
+    }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    // Créer la liste ordonnée des pros filtrés
+    var sortedAndFilteredPros = order
+        .map(function (id) { return filteredPros.find(function (p) { return p.proUserId === id; }); })
+        .filter(Boolean);
+    var sortedPros = order
+        .map(function (id) { return pros.find(function (p) { return p.proUserId === id; }); })
+        .filter(Boolean);
+    console.log("🔧 State:", {
+        isReorder: isReorder,
+        draggedId: draggedId,
+        prosCount: sortedAndFilteredPros.length,
+        orderLength: order.length,
+    });
+    // Réordonnancement handlers
+    var handleDragStart = function (event) {
+        console.log("🚀 DragStart:", event.active.id);
+        setDraggedId(event.active.id);
+        var pro = sortedAndFilteredPros.find(function (p) { return p.proUserId === event.active.id; });
+        setActiveDragPro(pro || null);
+    };
+    var handleDragOver = function (event) {
+        var _a;
+        setHoveredId(((_a = event.over) === null || _a === void 0 ? void 0 : _a.id) || null);
+    };
+    var handleDragEnd = function (event) {
+        var _a;
+        console.log("🏁 DragEnd:", event.active.id, "→", (_a = event.over) === null || _a === void 0 ? void 0 : _a.id);
+        setDraggedId(null);
+        setHoveredId(null);
+        setActiveDragPro(null);
+        var active = event.active, over = event.over;
+        if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+            var oldIndex = order.indexOf(active.id);
+            var newIndex = order.indexOf(over.id);
+            console.log("📊 Reorder:", oldIndex, "→", newIndex);
+            var newOrder = arrayMove(order, oldIndex, newIndex);
+            setOrder(newOrder);
+        }
+    };
+    var handleDragCancel = function () {
+        console.log("❌ DragCancel");
+        setDraggedId(null);
+        setHoveredId(null);
+        setActiveDragPro(null);
+    };
+    var handleValidate = function () {
+        localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(order));
+        if (onOrderChange)
+            onOrderChange(sortedPros);
+        setIsReorder(false);
+    };
+    var handleCancel = function () {
+        setOrder(pros.map(function (p) { return p.proUserId; }));
+        setIsReorder(false);
+    };
+    // Sélection
+    var handleSelect = function (pro) {
+        if (!onSelect)
+            return;
+        var newSelected;
+        if (mode === "single") {
+            newSelected = [pro.proUserId];
+        }
+        else {
+            if (selected.includes(pro.proUserId)) {
+                newSelected = selected.filter(function (id) { return id !== pro.proUserId; });
+            }
+            else {
+                newSelected = __spreadArray(__spreadArray([], selected, true), [pro.proUserId], false);
+            }
+        }
+        var selectedPros = pros.filter(function (p) { return newSelected.includes(p.proUserId); });
+        onSelect(selectedPros);
+    };
+    // Détermination dynamique du max-width selon le nombre de profils
+    var modalMaxWidth = 580;
+    if (pros.length <= 2)
+        modalMaxWidth = 326;
+    else if (pros.length === 3)
+        modalMaxWidth = 445;
+    else if (pros.length >= 4)
+        modalMaxWidth = 580;
+    useEffect(function () {
+        function updateLabel() {
+            var w = window.innerWidth;
+            if (w > 540)
+                setReorderLabel("Réorganiser les profils");
+            else if (w > 480)
+                setReorderLabel("Changer ordre");
+            else if (w > 414)
+                setReorderLabel("Ordre");
+            else
+                setReorderLabel(null);
+        }
+        updateLabel();
+        window.addEventListener("resize", updateLabel);
+        return function () { return window.removeEventListener("resize", updateLabel); };
+    }, []);
+    if (!open)
+        return null;
+    return ReactDOM.createPortal(React.createElement("div", { className: styles.overlay, ref: modalRef, "aria-modal": "true", "aria-labelledby": "pro-switch-modal-title", tabIndex: -1, onMouseDown: handleOverlayClick },
+        React.createElement("div", { className: styles.modal, role: "dialog", style: { maxWidth: modalMaxWidth } },
+            React.createElement("header", { className: styles.header },
+                pros.length > 4 ? (isReorder ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: styles.headerReorderLabel }, reorderLabel && (React.createElement(Paragraph, { variant: "medium", color: "mid-grey", text: reorderLabel }))),
+                    React.createElement("div", { className: styles.headerReorderActions },
+                        React.createElement("button", { className: styles.cancelBtn, onClick: handleCancel, type: "button" }, "Annuler"),
+                        React.createElement("button", { className: styles.validateBtn, onClick: handleValidate, type: "button" }, "Valider")))) : (React.createElement("div", { className: styles.searchContainer },
+                    React.createElement(SearchBar, { value: search, onChange: setSearch, placeholder: "Rechercher...", showClear: true, endIcon: "allaw-icon-search" })))) : (React.createElement("div", { style: { flex: 1 } })),
+                pros.length > 4 && (React.createElement("div", { className: styles.buttonContainer, style: { justifyContent: "flex-start" } },
+                    React.createElement("div", { className: styles.reorderContainer },
+                        React.createElement("button", { className: styles.reorderBtn, onClick: function () { return setIsReorder(function (v) { return !v; }); }, "aria-label": isReorder
+                                ? "Quitter le mode réordonnancement"
+                                : "Activer le mode réordonnancement", "aria-pressed": isReorder, type: "button" },
+                            React.createElement("i", { className: isReorder ? "allaw-icon-drag" : "allaw-icon-drag" }))),
+                    React.createElement("div", { className: styles.closeContainer },
+                        React.createElement("button", { className: styles.closeBtn, onClick: onClosePortal, "aria-label": "Fermer la fen\u00EAtre de s\u00E9lection des professionnels", type: "button" },
+                            React.createElement("i", { className: "allaw-icon-close" }))))),
+                pros.length <= 4 && (React.createElement("div", { className: styles.buttonContainer, style: { justifyContent: "flex-end" } },
+                    React.createElement("div", { className: styles.closeContainer },
+                        React.createElement("button", { className: styles.closeBtn, onClick: onClosePortal, "aria-label": "Fermer la fen\u00EAtre de s\u00E9lection des professionnels", type: "button" },
+                            React.createElement("i", { className: "allaw-icon-close" })))))),
+            React.createElement("main", { className: styles.body },
+                React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel },
+                    React.createElement(SortableContext, { items: sortedAndFilteredPros.map(function (p) { return p.proUserId; }), strategy: rectSortingStrategy },
+                        React.createElement("div", { className: styles.grid + (isReorder ? " " + styles.reorderMode : "") }, sortedAndFilteredPros.map(function (pro) {
+                            return isReorder ? (React.createElement("div", { key: pro.proUserId, className: styles.gridItemContainer },
+                                React.createElement(SortableItem, { pro: pro, isSelected: selected.includes(pro.proUserId), isReorder: isReorder, onSelect: handleSelect, hasActiveDrag: !!draggedId }),
+                                hoveredId === pro.proUserId && draggedId && (React.createElement("div", { className: styles.dropSlot })))) : (React.createElement("div", { key: pro.proUserId, className: styles.gridItem, onClick: function () { return handleSelect(pro); } },
+                                React.createElement("div", { className: styles.avatarWrapper },
+                                    React.createElement(AvatarBubble, { firstName: pro.firstName, name: pro.name, src: pro.profilePictureLink, size: 56, isSelected: selected.includes(pro.proUserId), disabled: false, disableHoverAnimation: false, borderThick: true })),
+                                React.createElement("div", { className: styles.name }, selected.includes(pro.proUserId) ? (React.createElement("strong", null,
+                                    pro.firstName,
+                                    " ",
+                                    pro.name)) : ("".concat(pro.firstName, " ").concat(pro.name)))));
+                        }))),
+                    React.createElement(DragOverlay, { dropAnimation: {
+                            duration: 200,
+                            easing: "cubic-bezier(0.18, 0.67, 0.6, 1.22)",
+                        } }, activeDragPro ? (React.createElement("div", { className: styles.dragOverlay },
+                        React.createElement("div", { className: styles.avatarWrapper },
+                            React.createElement(AvatarBubble, { firstName: activeDragPro.firstName, name: activeDragPro.name, src: activeDragPro.profilePictureLink, size: 56, isSelected: selected.includes(activeDragPro.proUserId), disabled: false, disableHoverAnimation: true })),
+                        React.createElement("div", { className: styles.name }, selected.includes(activeDragPro.proUserId) ? (React.createElement("strong", null,
+                            activeDragPro.firstName,
+                            " ",
+                            activeDragPro.name)) : ("".concat(activeDragPro.firstName, " ").concat(activeDragPro.name))))) : null)),
+                isReorder ? (React.createElement(TinyInfo, { variant: "medium14", text: "D\u00E9placez les profils pour modifier leur ordre", startIcon: "allaw-icon-info", color: "mid-grey", className: styles.reorderInfo })) : (React.createElement("div", { className: styles.selectionInfo },
+                    "S\u00E9lection : ",
+                    selected.length,
+                    "/",
+                    pros.length))))), document.body);
+};
+export default ProSwitchModal;

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

@@ -0,0 +1,60 @@
+declare namespace _default {
+    export let title: string;
+    export { ProSwitchModal as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace open {
+            let control: boolean;
+        }
+        namespace pros {
+            let control_1: boolean;
+            export { control_1 as control };
+        }
+        namespace selected {
+            let control_2: boolean;
+            export { control_2 as control };
+        }
+        namespace mode {
+            export namespace control_3 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_3 as control };
+        }
+        namespace onClosePortal {
+            let action: string;
+        }
+        namespace onOpenPortal {
+            let action_1: string;
+            export { action_1 as action };
+        }
+        namespace onOrderChange {
+            let action_2: string;
+            export { action_2 as action };
+        }
+        namespace onSelect {
+            let action_3: string;
+            export { action_3 as action };
+        }
+    }
+    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 Single: any;
+export const Reorder: any;
+export const Scroll: any;
+export const FallbackInitiales: any;
+export const Responsive: any;
+export const ResponsiveMobile: any;
+export const FewProfiles: any;
+import ProSwitchModal from "./ProSwitchModal";