allaw-ui 3.4.1 → 3.4.3

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

@@ -1,88 +0,0 @@
-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

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

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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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;