allaw-ui 3.4.3 → 3.4.4

package/dist/components/atoms/buttons/TertiaryButton.stories.js

@@ -0,0 +1,128 @@
+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 TertiaryButton from "./TertiaryButton";
+import "../../../styles/global.css";
+export var ActionsData = {
+    onClick: function () { return console.log("Button clicked"); },
+};
+export default {
+    title: "Components/Atoms/Buttons/TertiaryButton",
+    component: TertiaryButton,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        startIcon: {
+            control: {
+                type: "text",
+            },
+        },
+        endIcon: {
+            control: {
+                type: "text",
+            },
+        },
+        variant: {
+            control: {
+                type: "boolean",
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+            },
+            options: [
+                "bleu-allaw",
+                "mid-grey",
+                "dark-grey",
+                "noir",
+                "pure-white",
+                "actions-error",
+                "actions-valid",
+            ],
+        },
+        isDisabled: {
+            control: {
+                type: "boolean",
+            },
+        },
+        onClick: { action: "clicked" },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(TertiaryButton, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    label: "Annuler le RDV",
+    startIcon: "allaw-icon-close",
+    variant: false,
+    color: "noir",
+    isDisabled: false,
+};
+export var BlueButton = Template.bind({});
+BlueButton.args = {
+    label: "Bouton bleu",
+    color: "bleu-allaw",
+    variant: false,
+};
+export var ErrorButton = Template.bind({});
+ErrorButton.args = {
+    label: "Supprimer",
+    color: "actions-error",
+    startIcon: "allaw-icon-trash",
+    variant: false,
+};
+export var Variant = Template.bind({});
+Variant.args = {
+    label: "Voir plus d'horaire",
+    startIcon: "allaw-icon-chevron-down",
+    variant: true,
+    color: "dark-grey",
+    isDisabled: false,
+};
+export var WithEndIcon = Template.bind({});
+WithEndIcon.args = {
+    label: "Ouvrir le lien",
+    endIcon: "allaw-icon-external-link",
+    variant: false,
+    color: "bleu-allaw",
+};
+export var WithBothIcons = Template.bind({});
+WithBothIcons.args = {
+    label: "Télécharger",
+    startIcon: "allaw-icon-download",
+    endIcon: "allaw-icon-chevron-right",
+    variant: false,
+    color: "noir",
+};
+export var Disabled = Template.bind({});
+Disabled.args = {
+    label: "Bouton désactivé",
+    variant: false,
+    isDisabled: true,
+};
+export var ColoredButton = Template.bind({});
+ColoredButton.args = {
+    label: "Bouton coloré",
+    color: "bleu-allaw",
+    variant: false,
+};

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

@@ -0,0 +1,24 @@
+export { default as FavoriteToggle } from "./FavoriteToggle";
+export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
+export { default as FilterButton } from "./FilterButton";
+export { default as GhostButton } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
+export { default as PendingDocuments } from "./PendingDocuments";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
+export { default as TabNavigation } from "./TabNavigation";
+export { default as TertiaryButton } from "./TertiaryButton";
+export { default as OAuthProviderButton } from "./OAuthProviderButton";
+export { default as ActionButton } from "./ActionButton";
+export type { FavoriteToggleProps } from "./FavoriteToggle";
+export type { FilterButtonProps } from "./FilterButton";
+export type { GhostButtonProps } from "./GhostButton";
+export type { IconButtonProps } from "./IconButton";
+export type { PendingDocumentsProps } from "./PendingDocuments";
+export type { PrimaryButtonProps } from "./PrimaryButton";
+export type { SecondaryButtonProps } from "./SecondaryButton";
+export type { TabNavigationProps } from "./TabNavigation";
+export type { TertiaryButtonProps } from "./TertiaryButton";
+export type { OAuthProviderButtonProps } from "./OAuthProviderButton";
+export type { FilterButtonPrimaryProps } from "./FilterButtonPrimary";
+export type { ActionButtonProps } from "./ActionButton";

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

@@ -0,0 +1,12 @@
+export { default as FavoriteToggle } from "./FavoriteToggle";
+export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
+export { default as FilterButton } from "./FilterButton";
+export { default as GhostButton } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
+export { default as PendingDocuments } from "./PendingDocuments";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
+export { default as TabNavigation } from "./TabNavigation";
+export { default as TertiaryButton } from "./TertiaryButton";
+export { default as OAuthProviderButton } from "./OAuthProviderButton";
+export { default as ActionButton } from "./ActionButton";

package/dist/components/atoms/checkboxes/Checkbox.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "../../../styles/global.css";
+import "./Checkbox.css";
+export interface CheckboxProps {
+    id?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    color?: string;
+    size?: "default" | "small";
+    style?: "default" | "light" | "form";
+    markType?: "cross" | "check";
+    dataTestId?: string;
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/components/atoms/checkboxes/Checkbox.js

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import "../../../styles/global.css";
+import "./Checkbox.css";
+var Checkbox = function (_a) {
+    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, color = _a.color, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.style, style = _d === void 0 ? "default" : _d, _e = _a.markType, markType = _e === void 0 ? "cross" : _e, dataTestId = _a.dataTestId;
+    var _f = useState(checked), isChecked = _f[0], setIsChecked = _f[1];
+    var handleClick = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var newChecked = !isChecked;
+        setIsChecked(newChecked);
+        if (onChange) {
+            onChange(newChecked);
+        }
+    };
+    var checkboxColor = style === "light" ? "light" : color;
+    var colorClass = checkboxColor ? "checkbox-".concat(checkboxColor) : "";
+    return (React.createElement("button", { id: id, className: "checkbox ".concat(isChecked ? "checkbox-pressed" : "checkbox-default", " ").concat(colorClass, " ").concat(size === "small" ? "checkbox-small" : "", " ").concat(style === "light" ? "checkbox-light" : "", " ").concat(style === "form" ? "checkbox-style-form" : ""), onClick: handleClick, "data-testid": dataTestId }, isChecked && (React.createElement("span", { className: "checkbox-icon ".concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check", " ").concat(colorClass, " ").concat(style === "light" ? "checkbox-icon-light" : "") }))));
+};
+export default Checkbox;

package/dist/components/atoms/checkboxes/Checkbox.stories.d.ts

@@ -0,0 +1,77 @@
+export const ActionsData: {};
+declare namespace _default {
+    export let title: string;
+    export { Checkbox as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args {
+        let color: string;
+    }
+    export namespace argTypes {
+        export namespace checked {
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace color_1 {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+                export let options: string[];
+            }
+            export { control_1 as control };
+        }
+        export { color_1 as color };
+        export namespace size {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_2 as control };
+        }
+        export namespace style {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_3 as control };
+        }
+        export namespace markType {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+                let options_3: string[];
+                export { options_3 as options };
+            }
+            export { control_4 as control };
+        }
+        export namespace onChange {
+            namespace table {
+                let disable: boolean;
+            }
+        }
+    }
+    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 Pressed: any;
+export const Small: any;
+export const SmallPressed: any;
+export const White: any;
+export const Light: any;
+export const LightPressed: any;
+import Checkbox from "./Checkbox";

package/dist/components/atoms/checkboxes/Checkbox.stories.js

@@ -0,0 +1,123 @@
+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 Checkbox from "./Checkbox";
+import "../../../styles/global.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/Checkboxes/Checkbox",
+    component: Checkbox,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { color: "noir" }),
+    argTypes: {
+        checked: {
+            control: {
+                type: "boolean",
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: [
+                    "bleu-allaw",
+                    "mid-grey",
+                    "dark-grey",
+                    "noir",
+                    "pure-white",
+                    "grey-venom",
+                    "venom-grey-dark",
+                ],
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+                options: ["default", "small"],
+            },
+        },
+        style: {
+            control: {
+                type: "select",
+                options: ["default", "light", "form"],
+            },
+        },
+        markType: {
+            control: {
+                type: "select",
+                options: ["cross", "check"],
+            },
+        },
+        onChange: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) {
+    return React.createElement(Checkbox, __assign({}, args));
+};
+export var Default = Template.bind({});
+Default.args = {
+    checked: false,
+    size: "default",
+    style: "default",
+};
+export var Pressed = Template.bind({});
+Pressed.args = {
+    checked: true,
+    size: "default",
+    style: "default",
+};
+export var Small = Template.bind({});
+Small.args = {
+    checked: false,
+    size: "small",
+    style: "default",
+};
+export var SmallPressed = Template.bind({});
+SmallPressed.args = {
+    checked: true,
+    size: "small",
+    style: "default",
+};
+export var White = Template.bind({});
+White.args = {
+    checked: false,
+    color: "pure-white",
+    size: "default",
+    style: "default",
+};
+export var Light = Template.bind({});
+Light.args = {
+    checked: false,
+    size: "default",
+    style: "light",
+};
+export var LightPressed = Template.bind({});
+LightPressed.args = {
+    checked: true,
+    size: "default",
+    style: "light",
+};

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import "./datepicker.css";
+import "../../../styles/global.css";
+export interface DatepickerProps {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    yearDropdownItemNumber?: number;
+    maxDaysInPast?: number;
+    minDate?: Date;
+    disableFutur?: Boolean;
+}
+declare const Datepicker: React.FC<DatepickerProps>;
+export default Datepicker;

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, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d;
+    var _e = useState(value), selectedDate = _e[0], setSelectedDate = _e[1];
+    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = useState({ top: 0, left: 0 }), position = _g[0], setPosition = _g[1];
+    var buttonRef = useRef(null);
+    var calendarRef = useRef(null);
+    var _h = useState("bottom"), placement = _h[0], setPlacement = _h[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: disableFutur ? new Date() : undefined, 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";