allaw-ui 0.1.71 → 1.0.0

package/dist/components/atoms/datepickers/Datepicker.js

@@ -0,0 +1,151 @@
+"use client";
+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, { forwardRef, useState, useRef, useEffect, useMemo } from "react";
+import ReactDatePicker from "react-datepicker";
+import ReactDOM from "react-dom";
+import "react-datepicker/dist/react-datepicker.css";
+import "./datepicker.css";
+import "../../../styles/global.css";
+import { fr } from "date-fns/locale";
+import { format } from "date-fns";
+var CustomInput = forwardRef(function (_a, ref) {
+    var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
+    var _b = useState(placeholder), displayedPlaceholder = _b[0], setDisplayedPlaceholder = _b[1];
+    var containerRef = useRef(null);
+    var testRef = useRef(null);
+    useEffect(function () {
+        var checkTextFit = function () {
+            if (containerRef.current && testRef.current && placeholder) {
+                // Élément de test invisible pour mesurer la largeur réelle du texte complet
+                testRef.current.style.visibility = "hidden";
+                testRef.current.style.position = "absolute";
+                testRef.current.textContent = placeholder;
+                var containerWidth = containerRef.current.offsetWidth;
+                var textWidth = testRef.current.offsetWidth;
+                // Ajouter une marge pour l'icône et le padding (40px)
+                setDisplayedPlaceholder(textWidth + 40 > containerWidth ? "Date" : placeholder);
+            }
+        };
+        checkTextFit();
+        window.addEventListener("resize", checkTextFit);
+        return function () { return window.removeEventListener("resize", checkTextFit); };
+    }, [placeholder]);
+    return (React.createElement("button", { type: "button", className: "datepicker", onClick: onClick, ref: ref },
+        React.createElement("span", { className: "datepicker-content", ref: containerRef },
+            React.createElement("span", { className: "datepicker-text" }, value || displayedPlaceholder),
+            React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" })),
+        React.createElement("span", { className: "datepicker-test-text", ref: testRef, "aria-hidden": "true" })));
+});
+CustomInput.displayName = "CustomInput";
+var Datepicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate;
+    var _d = useState(value), selectedDate = _d[0], setSelectedDate = _d[1];
+    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = useState({ top: 0, left: 0 }), position = _f[0], setPosition = _f[1];
+    var buttonRef = useRef(null);
+    var calendarRef = useRef(null);
+    var _g = useState("bottom"), placement = _g[0], setPlacement = _g[1];
+    useEffect(function () {
+        setSelectedDate(value);
+    }, [value]);
+    var updatePosition = function () {
+        if (buttonRef.current) {
+            var rect = buttonRef.current.getBoundingClientRect();
+            var windowHeight = window.innerHeight;
+            var calendarHeight = 360; // Hauteur approximative du calendrier
+            // Vérifier s'il y a assez d'espace en dessous
+            var spaceBelow = windowHeight - rect.bottom;
+            var shouldShowBelow = spaceBelow >= calendarHeight;
+            setPlacement(shouldShowBelow ? "bottom" : "top");
+            // Calcul de la position horizontale centrée
+            var buttonCenter = rect.left + rect.width / 2;
+            var calendarWidth = 300; // Largeur du calendrier
+            var leftPosition = buttonCenter - calendarWidth / 2;
+            // Ajuster si le calendrier dépasse de l'écran
+            if (leftPosition + calendarWidth > window.innerWidth) {
+                leftPosition = window.innerWidth - calendarWidth - 16;
+            }
+            if (leftPosition < 16) {
+                leftPosition = 16;
+            }
+            // Calcul de la position verticale
+            var topPosition = shouldShowBelow
+                ? rect.bottom + window.scrollY + 8 // 8px de marge en dessous du bouton
+                : rect.top + window.scrollY - calendarHeight - 8; // 8px de marge au-dessus du bouton
+            setPosition({
+                top: topPosition,
+                left: leftPosition + window.scrollX,
+            });
+        }
+    };
+    useEffect(function () {
+        if (isOpen) {
+            updatePosition();
+            window.addEventListener("scroll", updatePosition);
+            window.addEventListener("resize", updatePosition);
+        }
+        return function () {
+            window.removeEventListener("scroll", updatePosition);
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [isOpen]);
+    var handleDateChange = function (date) {
+        // console.log("Avant l'appel à onChange :", date);
+        setSelectedDate(date || undefined);
+        if (date) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(date);
+        }
+        // console.log("Après l'appel à onChange :", date);
+        setIsOpen(false);
+    };
+    var handleClickOutside = function (event) {
+        if (buttonRef.current &&
+            !buttonRef.current.contains(event.target) &&
+            calendarRef.current &&
+            !calendarRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    useEffect(function () {
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    // Calcul de la date minimale
+    var calculatedMinDate = useMemo(function () {
+        if (minDate)
+            return minDate;
+        if (maxDaysInPast) {
+            var date = new Date();
+            date.setDate(date.getDate() - maxDaysInPast);
+            return date;
+        }
+        return new Date(new Date().setFullYear(new Date().getFullYear() - yearDropdownItemNumber));
+    }, [minDate, maxDaysInPast, yearDropdownItemNumber]);
+    return (React.createElement("div", { className: "datepicker-container", ref: buttonRef },
+        React.createElement(CustomInput, { value: selectedDate
+                ? format(selectedDate, "dd MMMM yyyy", { locale: fr })
+                : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder }),
+        isOpen &&
+            ReactDOM.createPortal(React.createElement("div", { ref: calendarRef, className: "datepicker-portal ".concat(placement), style: __assign({ left: "".concat(position.left, "px") }, (placement === "bottom"
+                    ? { top: "".concat(position.top, "px") }
+                    : { top: "".concat(position.top, "px") })) },
+                React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", maxDate: new Date(), minDate: calculatedMinDate })), document.body)));
+};
+export default Datepicker;

package/dist/components/atoms/datepickers/Datepicker.stories.d.ts

@@ -0,0 +1,90 @@
+declare namespace _default {
+    export let title: string;
+    export { Datepicker 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 yearDropdownItemNumber {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+            let defaultValue: number;
+        }
+        namespace maxDaysInPast {
+            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 };
+        }
+        namespace minDate {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    namespace args {
+        export let placeholder: string;
+        let yearDropdownItemNumber_1: number;
+        export { yearDropdownItemNumber_1 as yearDropdownItemNumber };
+    }
+}
+export namespace WithValue {
+    export namespace args_1 {
+        export let value: Date;
+        let placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        let yearDropdownItemNumber_2: number;
+        export { yearDropdownItemNumber_2 as yearDropdownItemNumber };
+    }
+    export { args_1 as args };
+}
+export namespace WithMaxDaysInPast {
+    export namespace args_2 {
+        let placeholder_2: string;
+        export { placeholder_2 as placeholder };
+        let maxDaysInPast_1: number;
+        export { maxDaysInPast_1 as maxDaysInPast };
+    }
+    export { args_2 as args };
+}
+export namespace WithMinDate {
+    export namespace args_3 {
+        let placeholder_3: string;
+        export { placeholder_3 as placeholder };
+        let minDate_1: Date;
+        export { minDate_1 as minDate };
+    }
+    export { args_3 as args };
+}
+export namespace WithBothConstraints {
+    export namespace args_4 {
+        let placeholder_4: string;
+        export { placeholder_4 as placeholder };
+        let maxDaysInPast_2: number;
+        export { maxDaysInPast_2 as maxDaysInPast };
+        let minDate_2: Date;
+        export { minDate_2 as minDate };
+    }
+    export { args_4 as args };
+}
+import Datepicker from "./Datepicker";

package/dist/components/atoms/datepickers/Datepicker.stories.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Datepicker from "./Datepicker";
+import "../../../styles/global.css";
+import "react-datepicker/dist/react-datepicker.css";
+import { fr } from "date-fns/locale";
+export default {
+    title: "Components/Atoms/Datepickers/Datepicker",
+    component: Datepicker,
+    tags: ["autodocs"],
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+    argTypes: {
+        yearDropdownItemNumber: {
+            control: { type: "number" },
+            description: "Nombre d'années à afficher dans la liste déroulante",
+            defaultValue: 10,
+        },
+        maxDaysInPast: {
+            control: { type: "number" },
+            description: "Nombre maximum de jours dans le passé sélectionnables",
+        },
+        minDate: {
+            control: { type: "date" },
+            description: "Date minimale sélectionnable",
+        },
+    },
+};
+export var Default = {
+    args: {
+        placeholder: "Sélectionner une date",
+        yearDropdownItemNumber: 10,
+    },
+};
+export var WithValue = {
+    args: {
+        value: new Date("2022-11-10"),
+        placeholder: "Sélectionner une date",
+        yearDropdownItemNumber: 10,
+    },
+};
+export var WithMaxDaysInPast = {
+    args: {
+        placeholder: "Sélectionner une date",
+        maxDaysInPast: 10,
+    },
+};
+export var WithMinDate = {
+    args: {
+        placeholder: "Sélectionner une date",
+        minDate: new Date("2024-01-01"),
+    },
+};
+export var WithBothConstraints = {
+    args: {
+        placeholder: "Sélectionner une date",
+        maxDaysInPast: 30,
+        minDate: new Date("2024-01-01"),
+    },
+};

package/dist/components/atoms/datepickers/datepicker.css

@@ -0,0 +1,241 @@
+.datepicker-container {
+  position: relative;
+  width: 100%;
+}
+
+.datepicker {
+  display: flex;
+  height: 40px;
+  padding: 8px 16px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  background: var(--Primary-Light-grey, #f4f7fb);
+  border: none;
+  cursor: pointer;
+  min-width: 120px;
+  width: 100%;
+}
+
+.datepicker:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.datepicker-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.datepicker-text {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.datepicker-icon {
+  color: var(--Primary-Dark-grey, #456073);
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.datepicker-test-text {
+  visibility: hidden;
+  position: absolute;
+  white-space: nowrap;
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-weight: 700;
+}
+
+/* Customisation du calendrier */
+.custom-calendar {
+  border: none !important;
+  font-family: "Open Sans";
+  font-size: 16px;
+  width: 300px !important;
+  padding: 16px;
+}
+
+.react-datepicker__month-container {
+  width: 100%;
+}
+
+.react-datepicker__header {
+  background: white;
+  border: none;
+  padding: 0;
+}
+
+.react-datepicker__day-names {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 8px;
+}
+
+.react-datepicker__day-name {
+  color: var(--Primary-Dark-grey, #456073);
+  font-weight: 600;
+  width: 36px;
+  margin: 0;
+}
+
+.react-datepicker__month {
+  margin: 0;
+  padding: 8px;
+}
+
+.react-datepicker__day {
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  margin: 0;
+  border-radius: 18px;
+  color: var(--Primary-Dark-grey, #456073);
+  font-family: "Open Sans";
+}
+
+.react-datepicker__day:hover {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+}
+
+.react-datepicker__day--selected {
+  background: var(--bleu-allaw, #1985e8) !important;
+  border-radius: 18px !important;
+  color: white !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+  color: var(--Primary-Mid-black, #171e25);
+}
+
+.react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover,
+.react-datepicker__quarter-text--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover,
+.react-datepicker__year-text--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover {
+  background-color: var(--bleu-allaw, #25beeb);
+  color: white;
+  border-radius: 18px;
+}
+
+.custom-header {
+  margin-bottom: 16px;
+}
+
+.year-dropdown,
+.month-dropdown {
+  padding: 8px;
+  min-width: 100px;
+}
+
+/* Style pour mobile */
+@media (max-width: 768px) {
+  .datepicker {
+    width: 100%;
+    min-width: unset;
+  }
+}
+
+.datepicker-portal {
+  position: absolute;
+  z-index: 9999;
+  background: white;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  border-radius: 8px;
+  box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
+}
+
+/* Suppression des styles top et bottom qui ne sont plus nécessaires */
+.datepicker-portal.top,
+.datepicker-portal.bottom {
+  transform: none; /* Suppression de la transformation */
+}
+
+/* Customisation des flèches de navigation */
+.react-datepicker__navigation {
+  padding: 8px;
+  border-radius: 18px;
+  margin: 8px;
+}
+
+.react-datepicker__navigation--previous {
+  left: 1px;
+}
+
+.react-datepicker__navigation--next {
+  right: 1px;
+}
+
+.react-datepicker__navigation:hover {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+}
+
+/* Padding pour le mois en cours */
+.react-datepicker__current-month {
+  padding-bottom: 18px;
+}
+
+.react-datepicker__current-month.react-datepicker__current-month--hasYearDropdown.react-datepicker__current-month--hasMonthDropdown {
+  padding-bottom: 16px;
+}
+
+.react-datepicker__month-select,
+.react-datepicker__year-select {
+  font-size: 16px;
+  font-family: "Open Sans";
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  background-color: white;
+  cursor: pointer;
+}
+
+.react-datepicker__month-select:hover,
+.react-datepicker__year-select:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.react-datepicker__navigation-icon.react-datepicker__navigation-icon--previous {
+  left: 1px;
+}
+
+.react-datepicker__navigation-icon.react-datepicker__navigation-icon--next {
+  right: 1px;
+}
+
+.react-datepicker__day:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text:not([aria-disabled="true"]):hover,
+.react-datepicker__quarter-text:not([aria-disabled="true"]):hover,
+.react-datepicker__year-text:not([aria-disabled="true"]):hover {
+  border-radius: 18px;
+}
+
+.react-datepicker__day--disabled {
+  color: var(--venom-grey-dark, #d1dce8) !important;
+  cursor: not-allowed;
+  transition: all 0.2s ease;
+}
+
+.react-datepicker__day--disabled:hover {
+  background: none !important;
+  cursor: not-allowed;
+}

package/dist/components/atoms/datepickers/index.d.ts

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

package/dist/components/atoms/datepickers/index.js

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

package/dist/components/atoms/filter/Basefiler.css

@@ -26,7 +26,7 @@
     border-radius: 4px;
     background-color: #ffffff;
     box-shadow: rgba(9, 30, 66, 0.15) 0px 8px 12px 0px;
-    z-index: 2000;
+    z-index: 1000;
     padding: 0.4rem 0rem;
 }
 

package/dist/components/atoms/filter/Filter.d.ts

@@ -0,0 +1,17 @@
+import "./Basefiler.css";
+import React from "react";
+export type FilterProps = {
+    defaultSelectedValue?: string;
+    filterData: {
+        value: string;
+        name: string;
+    }[];
+    setFilter: (selectedValue: string) => void;
+    children?: React.ReactNode;
+    required?: boolean;
+    showNumIndic?: boolean;
+    showBackdrop?: boolean;
+    isStatusTag?: boolean;
+};
+declare const BaseFilter: ({ showNumIndic, required, defaultSelectedValue, filterData, setFilter, showBackdrop, children, ...props }: FilterProps) => React.JSX.Element;
+export default BaseFilter;

package/dist/components/atoms/filter/Filter.js

@@ -0,0 +1,70 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import "./Basefiler.css";
+import { FilterButtonPrimary, PrimaryButton } from "../buttons";
+import { TinyInfo } from "../typography";
+import React, { useState } from "react";
+var BaseFilter = function (_a) {
+    var _b = _a.showNumIndic, showNumIndic = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? true : _c, defaultSelectedValue = _a.defaultSelectedValue, filterData = _a.filterData, setFilter = _a.setFilter, _d = _a.showBackdrop, showBackdrop = _d === void 0 ? false : _d, children = _a.children, props = __rest(_a, ["showNumIndic", "required", "defaultSelectedValue", "filterData", "setFilter", "showBackdrop", "children"]);
+    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = useState(defaultSelectedValue || ""), selectedValue = _f[0], setSelectedValue = _f[1];
+    var handleClose = function () {
+        setFilter(selectedValue);
+        setIsOpen(false);
+    };
+    var handleButtonTap = function () {
+        isOpen ? handleClose() : setIsOpen(true);
+    };
+    var Item = function (_a) {
+        var name = _a.name, value = _a.value;
+        return (React.createElement("button", { className: "item", onClick: function () { setSelectedValue(value); handleClose(); } },
+            React.createElement("div", { className: "round" },
+                React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
+            React.createElement("span", null, name)));
+    };
+    var SmallItem = function (_a) {
+        var name = _a.name, value = _a.value;
+        return (React.createElement("button", { className: "smallItem", onClick: function () { setSelectedValue(value); } },
+            React.createElement("div", { className: "round" },
+                React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
+            React.createElement("span", null, name)));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({ className: "baseFilter" }, props),
+            React.createElement(FilterButtonPrimary, { onClick: handleButtonTap, zIndex: "100" },
+                children,
+                React.createElement("p", { style: { color: "#25BEEB", fontWeight: "600" } }, showNumIndic && "(".concat(selectedValue.length, ")"))),
+            isOpen && (React.createElement("div", { className: "options" }, filterData && filterData.length > 0 &&
+                filterData.map(function (item, idx) { return (React.createElement(Item, { name: item.name, value: item.value, key: idx })); }))),
+            React.createElement("div", { className: "optionsSmall", style: { bottom: isOpen ? "0" : "-100%" } },
+                React.createElement("div", { className: "row" },
+                    React.createElement("div", { style: { minWidth: "20px" } }),
+                    React.createElement(TinyInfo, { text: children, variant: "bold14", color: "noir" }),
+                    React.createElement("button", { className: "closeButton", onClick: handleClose },
+                        React.createElement("i", { className: "allaw-icon-close" }))),
+                React.createElement("div", { className: "choices" }, filterData && filterData.length > 0 &&
+                    filterData.map(function (item, idx) { return (React.createElement(SmallItem, { name: item.name, value: item.value, key: idx })); })),
+                React.createElement(PrimaryButton, { label: "Voir les r\u00E9sultats", onClick: handleClose }))),
+        isOpen && (React.createElement("div", { className: "backdrop", onClick: handleClose }))));
+};
+export default BaseFilter;

package/dist/components/atoms/filter/Filter.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export let title: string;
+    export { BaseFilter as component };
+}
+export default _default;
+export const Default: any;
+export const SingleSelect: any;
+export const WithoutIcon: any;
+import BaseFilter from './Filter';