allaw-ui 3.4.2 → 3.4.4

package/dist/components/atoms/progressBars/ProgressBar.stories.js

@@ -0,0 +1,88 @@
+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 ProgressBar from "./ProgressBar";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/ProgressBars/ProgressBar",
+    component: ProgressBar,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { steps: 5, currentStep: 2, startIcon: true, endIcon: true, showProgressBar: true, barColor: "blue" }),
+    argTypes: {
+        steps: {
+            control: {
+                type: "number",
+            },
+        },
+        currentStep: {
+            control: {
+                type: "number",
+            },
+        },
+        startIcon: {
+            control: {
+                type: "boolean",
+            },
+        },
+        endIcon: {
+            control: {
+                type: "boolean",
+            },
+        },
+        showProgressBar: {
+            control: {
+                type: "boolean",
+            },
+        },
+        barColor: {
+            control: {
+                type: "select",
+                options: ["blue", "red", "green", "grey"],
+            },
+            description: "Couleur de la barre de progression",
+        },
+    },
+    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(ProgressBar, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    steps: 5,
+    currentStep: 2,
+    startIcon: true,
+    endIcon: true,
+    showProgressBar: true,
+    barColor: "blue",
+};
+export var FirstStep = Template.bind({});
+FirstStep.args = __assign(__assign({}, Default.args), { currentStep: 1 });
+export var Hidden = Template.bind({});
+Hidden.args = __assign(__assign({}, Default.args), { showProgressBar: false });
+export var RedProgress = Template.bind({});
+RedProgress.args = __assign(__assign({}, Default.args), { barColor: "red" });
+export var GreenProgress = Template.bind({});
+GreenProgress.args = __assign(__assign({}, Default.args), { barColor: "green" });
+export var GreyProgress = Template.bind({});
+GreyProgress.args = __assign(__assign({}, Default.args), { barColor: "grey" });

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

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

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

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

package/dist/components/atoms/radios/RadioButton.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "../../../styles/global.css";
+import "./RadioButton.css";
+export interface RadioButtonProps {
+    label: string;
+    style?: "user" | "hybride";
+    isActive: boolean;
+    onClick: () => void;
+    dataTestId?: string;
+}
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;

package/dist/components/atoms/radios/RadioButton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "../../../styles/global.css";
+import "./RadioButton.css";
+var RadioButton = function (_a) {
+    var label = _a.label, _b = _a.style, style = _b === void 0 ? "user" : _b, isActive = _a.isActive, onClick = _a.onClick, dataTestId = _a.dataTestId;
+    return (React.createElement("button", { className: "radio-button radio-button-".concat(style, " ").concat(isActive ? "radio-button-".concat(style, "-active") : ""), onClick: onClick, "data-testid": dataTestId },
+        React.createElement("span", { className: "radio-button-icon" }, isActive && React.createElement("span", { className: "radio-button-icon-inner" })),
+        React.createElement("span", { className: "radio-button-label" }, label)));
+};
+export default RadioButton;

package/dist/components/atoms/radios/RadioButton.stories.d.ts

@@ -0,0 +1,36 @@
+export namespace ActionsData {
+    namespace onClick {
+        let action: string;
+    }
+}
+declare namespace _default {
+    export let title: string;
+    export { RadioButton as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args { }
+    export namespace argTypes {
+        namespace style {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const UserDefault: any;
+export const UserActive: any;
+export const HybrideDefault: any;
+export const HybrideActive: any;
+import RadioButton from "./RadioButton";

package/dist/components/atoms/radios/RadioButton.stories.js

@@ -0,0 +1,75 @@
+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 RadioButton from "./RadioButton";
+import "../../../styles/global.css";
+export var ActionsData = {
+    onClick: { action: "clicked" },
+};
+export default {
+    title: "Components/Atoms/Radios/RadioButton",
+    component: RadioButton,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        style: {
+            control: {
+                type: "radio",
+                options: ["user", "hybride"],
+            },
+        },
+    },
+    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) {
+    var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
+    var handleClick = function () {
+        setIsActive(!isActive);
+        args.onClick();
+    };
+    return React.createElement(RadioButton, __assign({}, args, { isActive: isActive, onClick: handleClick }));
+};
+export var UserDefault = Template.bind({});
+UserDefault.args = {
+    label: "Option 2",
+    style: "user",
+    isActive: false,
+};
+export var UserActive = Template.bind({});
+UserActive.args = {
+    label: "Option 2",
+    style: "user",
+    isActive: true,
+};
+export var HybrideDefault = Template.bind({});
+HybrideDefault.args = {
+    label: "Option 2",
+    style: "hybride",
+    isActive: false,
+};
+export var HybrideActive = Template.bind({});
+HybrideActive.args = {
+    label: "Option 2",
+    style: "hybride",
+    isActive: true,
+};

package/dist/components/atoms/radios/SelectCard.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import "../../../styles/icons.css";
+export type ResponsiveConfig = {
+    label?: string;
+    height?: number;
+    width?: number;
+    maxWidth?: number;
+    imageVerticalOffset?: number;
+};
+export type ResponsiveBreakpoints = Record<number, ResponsiveConfig>;
+export interface SelectCardProps {
+    iconName?: string;
+    iconUrl?: string;
+    label: string;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    size?: "small" | "medium" | "large";
+    onClick: () => void;
+    responsiveConfig?: ResponsiveBreakpoints;
+    maxWidth?: number;
+    imageVerticalOffset?: number;
+}
+declare const SelectCard: React.FC<SelectCardProps>;
+export default SelectCard;

package/dist/components/atoms/radios/SelectCard.js

@@ -0,0 +1,100 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useEffect, useState } from "react";
+import styles from "./SelectCard.module.css";
+import "../../../styles/icons.css";
+var SelectCard = function (_a) {
+    var iconName = _a.iconName, iconUrl = _a.iconUrl, label = _a.label, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "medium" : _d, onClick = _a.onClick, responsiveConfig = _a.responsiveConfig, maxWidth = _a.maxWidth, _e = _a.imageVerticalOffset, imageVerticalOffset = _e === void 0 ? 0 : _e;
+    var _f = useState(label), currentLabel = _f[0], setCurrentLabel = _f[1];
+    var _g = useState({}), currentStyle = _g[0], setCurrentStyle = _g[1];
+    var _h = useState(imageVerticalOffset), currentImageOffset = _h[0], setCurrentImageOffset = _h[1];
+    useEffect(function () {
+        if (!responsiveConfig)
+            return;
+        var handleResize = function () {
+            var width = window.innerWidth;
+            var breakpoints = Object.keys(responsiveConfig)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            // Réinitialiser aux valeurs par défaut
+            var selectedLabel = label;
+            var selectedWidth = undefined;
+            var selectedHeight = undefined;
+            var selectedMaxWidth = maxWidth;
+            var selectedImageOffset = imageVerticalOffset;
+            // Trouver la configuration appropriée pour la largeur actuelle
+            for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+                var breakpoint = breakpoints_1[_i];
+                if (width >= breakpoint) {
+                    var config = responsiveConfig[breakpoint];
+                    if (config.label)
+                        selectedLabel = config.label;
+                    if (config.width)
+                        selectedWidth = config.width;
+                    if (config.height)
+                        selectedHeight = config.height;
+                    if (config.maxWidth !== undefined)
+                        selectedMaxWidth = config.maxWidth;
+                    if (config.imageVerticalOffset !== undefined)
+                        selectedImageOffset = config.imageVerticalOffset;
+                }
+                else {
+                    break;
+                }
+            }
+            setCurrentLabel(selectedLabel);
+            setCurrentStyle({
+                width: selectedWidth ? "".concat(selectedWidth, "px") : undefined,
+                height: selectedHeight ? "".concat(selectedHeight, "px") : undefined,
+                maxWidth: selectedMaxWidth ? "".concat(selectedMaxWidth, "px") : undefined,
+            });
+            setCurrentImageOffset(selectedImageOffset);
+        };
+        // Vérification initiale
+        handleResize();
+        // Ajouter un écouteur d'événement
+        window.addEventListener("resize", handleResize);
+        // Nettoyage
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [responsiveConfig, label, maxWidth, imageVerticalOffset]);
+    var handleClick = function () {
+        if (!isDisabled) {
+            onClick();
+        }
+    };
+    var renderIcon = function () {
+        if (iconUrl) {
+            return (React.createElement("img", { src: iconUrl, alt: currentLabel, className: styles.iconImage }));
+        }
+        else if (iconName) {
+            return React.createElement("i", { className: "".concat(iconName, " ").concat(styles.iconFont) });
+        }
+        return null;
+    };
+    // Calculer le style pour l'icône avec l'offset vertical
+    var iconWrapperStyle = {
+        transform: currentImageOffset !== 0
+            ? "translateY(".concat(currentImageOffset, "px)")
+            : undefined,
+    };
+    // Calculer le style pour le bouton avec maxWidth
+    var buttonStyle = __assign(__assign({}, currentStyle), { maxWidth: maxWidth && !currentStyle.maxWidth
+            ? "".concat(maxWidth, "px")
+            : currentStyle.maxWidth });
+    return (React.createElement("button", { className: "".concat(styles.selectCard, " \n                ").concat(isActive ? styles.active : "", " \n                ").concat(isDisabled ? styles.disabled : "", " \n                ").concat(styles[size]), onClick: handleClick, disabled: isDisabled, type: "button", style: buttonStyle, title: currentLabel },
+        React.createElement("div", { className: styles.contentWrapper },
+            (iconName || iconUrl) && (React.createElement("div", { className: styles.iconWrapper, style: iconWrapperStyle }, renderIcon())),
+            React.createElement("span", { className: styles.label }, currentLabel))));
+};
+export default SelectCard;

package/dist/components/atoms/radios/SelectCard.stories.d.ts

@@ -0,0 +1,92 @@
+export namespace ActionsData {
+    namespace onClick {
+        let action: string;
+    }
+}
+declare namespace _default {
+    export let title: string;
+    export { SelectCard as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args { }
+    export namespace argTypes {
+        namespace iconName {
+            let control: string;
+            let description: string;
+        }
+        namespace iconUrl {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace label {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace isActive {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace isDisabled {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace size {
+            export namespace control_5 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace maxWidth {
+            let control_6: string;
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        namespace imageVerticalOffset {
+            let control_7: string;
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace responsiveConfig {
+            let control_8: string;
+            export { control_8 as control };
+            let description_8: string;
+            export { description_8 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 Active: any;
+export const Disabled: any;
+export const Small: any;
+export const Large: any;
+export const WithImageUrl: any;
+export const WithLongText: any;
+export const WithCustomMaxWidth: any;
+export const WithImageOffset: any;
+export const WithNegativeImageOffset: any;
+export const WithResponsiveConfig: any;
+import SelectCard from "./SelectCard";

package/dist/components/atoms/radios/SelectCard.stories.js

@@ -0,0 +1,192 @@
+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 SelectCard from "./SelectCard";
+export var ActionsData = {
+    onClick: { action: "clicked" },
+};
+export default {
+    title: "Components/Atoms/Radios/SelectCard",
+    component: SelectCard,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        iconName: {
+            control: "text",
+            description: "Nom de l'icône à afficher (utilise la font allaw-font)",
+        },
+        iconUrl: {
+            control: "text",
+            description: "URL de l'image à afficher (alternative à iconName)",
+        },
+        label: {
+            control: "text",
+            description: "Texte du bouton",
+        },
+        isActive: {
+            control: "boolean",
+            description: "État actif du bouton",
+        },
+        isDisabled: {
+            control: "boolean",
+            description: "État désactivé du bouton",
+        },
+        size: {
+            control: {
+                type: "select",
+                options: ["small", "medium", "large"],
+            },
+            description: "Taille du bouton",
+        },
+        maxWidth: {
+            control: "number",
+            description: "Largeur maximale du bouton en pixels",
+        },
+        imageVerticalOffset: {
+            control: "number",
+            description: "Décalage vertical de l'icône en pixels (positif = vers le bas, négatif = vers le haut)",
+        },
+        responsiveConfig: {
+            control: "object",
+            description: "Configuration responsive du bouton",
+        },
+    },
+    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) {
+    var _a = useState(args.isActive || false), isActive = _a[0], setIsActive = _a[1];
+    var handleClick = function () {
+        if (!args.isDisabled) {
+            setIsActive(!isActive);
+            args.onClick();
+        }
+    };
+    return React.createElement(SelectCard, __assign({}, args, { isActive: isActive, onClick: handleClick }));
+};
+export var Default = Template.bind({});
+Default.args = {
+    label: "Utiliser la convention type d'allaw",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+};
+export var Active = Template.bind({});
+Active.args = {
+    label: "Choix 1",
+    iconName: "allaw-icon-upload-file",
+    isActive: true,
+    isDisabled: false,
+    size: "medium",
+};
+export var Disabled = Template.bind({});
+Disabled.args = {
+    label: "Choix 1",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: true,
+    size: "medium",
+};
+export var Small = Template.bind({});
+Small.args = {
+    label: "Choix 1",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "small",
+};
+export var Large = Template.bind({});
+Large.args = {
+    label: "Choix 1",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "large",
+};
+export var WithImageUrl = Template.bind({});
+WithImageUrl.args = {
+    label: "Choix 1",
+    iconUrl: "https://www.svgrepo.com/show/428478/file-choose.svg",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+};
+export var WithLongText = Template.bind({});
+WithLongText.args = {
+    label: "Texte très long qui devrait être tronqué avec des points de suspension",
+    iconUrl: "https://www.svgrepo.com/show/428478/file-choose.svg",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+};
+export var WithCustomMaxWidth = Template.bind({});
+WithCustomMaxWidth.args = {
+    label: "Bouton avec largeur maximale personnalisée",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+    maxWidth: 200,
+};
+export var WithImageOffset = Template.bind({});
+WithImageOffset.args = {
+    label: "Icône décalée vers le bas",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+    imageVerticalOffset: 10,
+};
+export var WithNegativeImageOffset = Template.bind({});
+WithNegativeImageOffset.args = {
+    label: "Icône décalée vers le haut",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+    imageVerticalOffset: -10,
+};
+export var WithResponsiveConfig = Template.bind({});
+WithResponsiveConfig.args = {
+    label: "Version Desktop",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+    responsiveConfig: {
+        768: {
+            label: "Version Tablette",
+            width: 100,
+            height: 100,
+            maxWidth: 150,
+            imageVerticalOffset: 5,
+        },
+        480: {
+            label: "Mobile",
+            width: 80,
+            height: 80,
+            maxWidth: 100,
+            imageVerticalOffset: -5,
+        },
+    },
+};

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

@@ -0,0 +1,4 @@
+export { default as RadioButton } from "./RadioButton";
+export type { RadioButtonProps } from "./RadioButton";
+export { default as SelectCard } from "./SelectCard";
+export type { SelectCardProps } from "./SelectCard";

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

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

package/dist/components/atoms/selects/ComboBox.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import "./ComboBox.css";
+import "../../../styles/global.css";
+export interface SelectItem {
+    label: string;
+    value: string;
+}
+export interface ComboBoxProps {
+    items: SelectItem[];
+    selectedItem?: string;
+    placeholder?: string;
+    isRequired?: boolean;
+    showError?: boolean;
+    width?: number;
+    onSelect?: (selected: string) => void;
+    onChange?: (value: string) => void;
+    onError?: (error: string) => void;
+    openOnMount?: boolean;
+    title?: string;
+    titleStyle?: "medium" | "semiBold" | "bold";
+}
+export interface ComboBoxRef {
+    validate: () => boolean;
+}
+declare const _default: (props: ComboBoxProps & {
+    ref?: React.Ref<ComboBoxRef>;
+}) => React.ReactElement;
+export default _default;