allaw-ui 3.4.1 → 3.4.2

package/dist/components/atoms/inputs/TextArea.stories.js

@@ -1,141 +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 { useForm, FormProvider } from "react-hook-form";
-import TextArea from "./TextArea";
-import "../../../styles/global.css";
-export var ActionsData = {};
-export default {
-    title: "Components/Atoms/Inputs/TextArea",
-    component: TextArea,
-    tags: ["autodocs"],
-    excludeStories: /.*Data$/,
-    args: __assign({}, ActionsData),
-    argTypes: {
-        style: {
-            control: {
-                type: "radio",
-                options: ["default", "variation"],
-            },
-        },
-        isRequired: {
-            control: "boolean",
-        },
-        validate: {
-            control: {
-                type: "text",
-            },
-        },
-        maxHeight: {
-            control: {
-                type: "number",
-                min: 100,
-                max: 1000,
-                step: 50,
-            },
-        },
-        minHeight: {
-            control: {
-                type: "number",
-                min: 50,
-                max: 500,
-                step: 10,
-            },
-            description: "Hauteur minimale du TextArea en pixels",
-            table: {
-                type: { summary: "number" },
-                defaultValue: { summary: 100 },
-            },
-        },
-        variant: {
-            control: {
-                type: "select",
-                options: ["bold", "semiBold", "medium"],
-            },
-        },
-        color: {
-            control: {
-                type: "select",
-                options: [
-                    "bleu-allaw",
-                    "mid-grey",
-                    "dark-grey",
-                    "noir",
-                    "pure-white",
-                    "grey-venom",
-                    "venom-grey-dark",
-                ],
-            },
-        },
-    },
-    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 methods = useForm();
-    return (React.createElement(FormProvider, __assign({}, methods),
-        React.createElement(TextArea, __assign({}, args))));
-};
-export var Default = Template.bind({});
-Default.args = {
-    name: "defaultTextArea",
-    title: "Nommer le rendez-vous",
-    placeholder: "Entrez le motif du rendez-vous",
-    style: "default",
-    isRequired: false,
-    maxHeight: 400,
-    minHeight: 100,
-    variant: "medium",
-    color: "noir",
-};
-export var Variation = Template.bind({});
-Variation.args = {
-    name: "variationTextArea",
-    title: "Adresse e-mail",
-    placeholder: "Entrez le motif du rendez-vous",
-    style: "variation",
-    isRequired: true,
-    maxHeight: 400,
-    minHeight: 100,
-};
-export var WithValidation = Template.bind({});
-WithValidation.args = {
-    name: "validationTextArea",
-    title: "Email",
-    placeholder: "Entrez votre email",
-    style: "default",
-    isRequired: true,
-    validate: "email",
-    maxHeight: 400,
-    minHeight: 100,
-};
-export var LargeMinHeight = Template.bind({});
-LargeMinHeight.args = {
-    name: "largeTextArea",
-    title: "Description détaillée",
-    placeholder: "Entrez une description détaillée",
-    style: "default",
-    isRequired: false,
-    maxHeight: 400,
-    minHeight: 200,
-    variant: "medium",
-    color: "noir",
-};

package/dist/components/atoms/inputs/VerificationCodeInput.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-export interface VerificationCodeInputProps {
-    numInputs: number;
-    allowedChars?: "numeric" | "alphabetic" | "alphanumeric";
-    size?: "small" | "medium" | "large";
-    onChange?: (value: string) => void;
-    onError?: (error: string | null) => void;
-    onComplete?: (value: string) => void;
-    testError?: boolean;
-    autoFocus?: boolean;
-    isDisabled?: boolean;
-}
-declare const VerificationCodeInput: React.FC<VerificationCodeInputProps>;
-export default VerificationCodeInput;

package/dist/components/atoms/inputs/VerificationCodeInput.js

@@ -1,155 +0,0 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import React, { useState, useEffect, useRef } from "react";
-import styles from "./VerificationCodeInput.module.css";
-import TinyInfo from "../typography/TinyInfo";
-var VerificationCodeInput = function (_a) {
-    var numInputs = _a.numInputs, _b = _a.allowedChars, allowedChars = _b === void 0 ? "numeric" : _b, _c = _a.size, size = _c === void 0 ? "large" : _c, onChange = _a.onChange, onError = _a.onError, onComplete = _a.onComplete, _d = _a.testError, testError = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f;
-    var _g = useState(Array(numInputs).fill("")), values = _g[0], setValues = _g[1];
-    var _h = useState(""), error = _h[0], setError = _h[1];
-    var _j = useState(false), isSmallScreen = _j[0], setIsSmallScreen = _j[1];
-    var inputRefs = useRef(Array(numInputs).fill(null));
-    useEffect(function () {
-        setValues(Array(numInputs).fill(""));
-        inputRefs.current = Array(numInputs).fill(null);
-    }, [numInputs]);
-    useEffect(function () {
-        if (testError) {
-            setError("Code de vérification invalide");
-            onError === null || onError === void 0 ? void 0 : onError("Code de vérification invalide");
-        }
-        else {
-            setError("");
-            onError === null || onError === void 0 ? void 0 : onError(null);
-        }
-    }, [testError, onError]);
-    useEffect(function () {
-        var checkScreenSize = function () {
-            setIsSmallScreen(window.innerWidth < 400);
-        };
-        // Vérifier la taille initiale
-        checkScreenSize();
-        // Ajouter un écouteur d'événement pour les changements de taille
-        window.addEventListener("resize", checkScreenSize);
-        // Nettoyer l'écouteur d'événement
-        return function () { return window.removeEventListener("resize", checkScreenSize); };
-    }, []);
-    var handleInputChange = function (index, value) {
-        // console.log(`[VerificationCodeInput] Input ${index} changed to:`, value);
-        var _a;
-        if (!validateInput(value, allowedChars)) {
-            // console.log("[VerificationCodeInput] Invalid input value");
-            return;
-        }
-        var newValues = __spreadArray([], values, true);
-        newValues[index] = value;
-        setValues(newValues);
-        var fullValue = newValues.join("");
-        // console.log("[VerificationCodeInput] New values:", fullValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
-        if (index === numInputs - 1 && value !== "") {
-            // console.log(
-            //   "[VerificationCodeInput] Last input filled, validating with:",
-            //   fullValue
-            // );
-            if (fullValue.length === numInputs) {
-                setError("");
-                onError === null || onError === void 0 ? void 0 : onError(null);
-                onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
-            }
-        }
-        else if (index < numInputs - 1) {
-            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    };
-    var handleKeyDown = function (index, e) {
-        var _a;
-        if (e.key === "Backspace" && values[index] === "" && index > 0) {
-            (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-            var newValues = __spreadArray([], values, true);
-            newValues[index - 1] = "";
-            setValues(newValues);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
-        }
-    };
-    var handleBlur = function () {
-        setTimeout(function () {
-            var isStillFocused = inputRefs.current.some(function (ref) { return ref === document.activeElement; });
-            if (!isStillFocused) {
-                if (values.every(function (value) { return value !== ""; })) {
-                    var fullValue = values.join("");
-                    // console.log(
-                    //   "[VerificationCodeInput] All inputs filled, length:",
-                    //   fullValue.length
-                    // );
-                    setError("");
-                    onError === null || onError === void 0 ? void 0 : onError(null);
-                    onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
-                }
-            }
-        }, 0);
-    };
-    var handlePaste = function (e) {
-        var _a, _b;
-        e.preventDefault();
-        var pastedText = e.clipboardData.getData("text");
-        var validChars = pastedText
-            .split("")
-            .filter(function (char) { return validateInput(char, allowedChars); })
-            .slice(0, numInputs);
-        if (validChars.length > 0) {
-            var newValues_1 = Array(numInputs).fill("");
-            validChars.forEach(function (char, i) {
-                if (i < numInputs) {
-                    newValues_1[i] = char;
-                }
-            });
-            setValues(newValues_1);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValues_1.join(""));
-            if (validChars.length >= numInputs) {
-                var fullValue = newValues_1.join("");
-                // console.log(
-                //   "[VerificationCodeInput] All inputs filled, length:",
-                //   fullValue.length
-                // );
-                setError("");
-                onError === null || onError === void 0 ? void 0 : onError(null);
-                onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
-                inputRefs.current.forEach(function (input) { return input === null || input === void 0 ? void 0 : input.blur(); });
-                (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
-            }
-            else {
-                var nextIndex = validChars.length;
-                (_b = inputRefs.current[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-        }
-    };
-    var validateInput = function (value, allowedChars) {
-        var regex = allowedChars === "numeric"
-            ? /^[0-9]*$/
-            : allowedChars === "alphabetic"
-                ? /^[a-zA-Z]*$/
-                : /^[a-zA-Z0-9]*$/;
-        return regex.test(value);
-    };
-    var renderInputs = function () {
-        return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : "", " ").concat(isSmallScreen ? styles.responsive : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
-                ? "[0-9]*"
-                : allowedChars === "alphabetic"
-                    ? "[a-zA-Z]*"
-                    : "[a-zA-Z0-9]*", ref: function (input) { return (inputRefs.current[index] = input); }, autoFocus: index === 0 && autoFocus, tabIndex: index === 0 ? 0 : undefined, "data-lpignore": "true" // Empêche Dashlane d'intervenir
-            , "data-form-type": "other" // Indique que ce n'est pas un champ de mot de passe
-            , disabled: isDisabled })); });
-    };
-    return (React.createElement("div", { className: "".concat(styles.container, " ").concat(isSmallScreen ? styles.responsiveContainer : "") },
-        React.createElement("div", { className: "".concat(styles.inputsContainer, " ").concat(isSmallScreen ? styles.responsiveInputsContainer : "") }, renderInputs()),
-        error && (React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))));
-};
-export default VerificationCodeInput;

package/dist/components/atoms/inputs/VerificationCodeInput.stories.d.ts

@@ -1,81 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { VerificationCodeInput as component };
-    export let tags: string[];
-    export namespace parameters {
-        namespace controls {
-            let expanded: boolean;
-        }
-    }
-    export namespace argTypes {
-        namespace size {
-            let control: string;
-            let options: string[];
-            let description: string;
-            let defaultValue: string;
-        }
-        namespace allowedChars {
-            let control_1: string;
-            export { control_1 as control };
-            let options_1: string[];
-            export { options_1 as options };
-            let description_1: string;
-            export { description_1 as description };
-            let defaultValue_1: string;
-            export { defaultValue_1 as defaultValue };
-            export namespace table {
-                export namespace defaultValue_2 {
-                    let summary: string;
-                }
-                export { defaultValue_2 as defaultValue };
-            }
-        }
-        namespace numInputs {
-            export namespace control_2 {
-                let type: string;
-                let min: number;
-                let max: number;
-                let step: number;
-            }
-            export { control_2 as control };
-            let description_2: string;
-            export { description_2 as description };
-            let defaultValue_3: number;
-            export { defaultValue_3 as defaultValue };
-        }
-        namespace testError {
-            let control_3: string;
-            export { control_3 as control };
-            let description_3: string;
-            export { description_3 as description };
-            let defaultValue_4: boolean;
-            export { defaultValue_4 as defaultValue };
-        }
-    }
-}
-export default _default;
-export const Default: any;
-export const WithError: any;
-export function Responsive(args: any): React.JSX.Element;
-export namespace Responsive {
-    export namespace args {
-        let numInputs_1: number;
-        export { numInputs_1 as numInputs };
-        let size_1: string;
-        export { size_1 as size };
-    }
-    export namespace parameters_1 {
-        namespace docs {
-            export namespace description_4 {
-                let story: string;
-            }
-            export { description_4 as description };
-        }
-        namespace viewport {
-            let defaultViewport: string;
-        }
-    }
-    export { parameters_1 as parameters };
-}
-import VerificationCodeInput from "./VerificationCodeInput";
-import React from "react";

package/dist/components/atoms/inputs/VerificationCodeInput.stories.js

@@ -1,89 +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 VerificationCodeInput from "./VerificationCodeInput";
-export default {
-    title: "Components/Atoms/Inputs/VerificationCodeInput",
-    component: VerificationCodeInput,
-    tags: ["autodocs"],
-    parameters: {
-        controls: {
-            expanded: true,
-        },
-    },
-    argTypes: {
-        size: {
-            control: "select",
-            options: ["small", "medium", "large"],
-            description: "Taille des inputs",
-            defaultValue: "large",
-        },
-        allowedChars: {
-            control: "select",
-            options: ["numeric", "alphabetic", "alphanumeric"],
-            description: "Type de caractères autorisés",
-            defaultValue: "numeric",
-            table: {
-                defaultValue: { summary: "numeric" },
-            },
-        },
-        numInputs: {
-            control: {
-                type: "number",
-                min: 1,
-                max: 20,
-                step: 1,
-            },
-            description: "Nombre d'inputs",
-            defaultValue: 5,
-        },
-        testError: {
-            control: "boolean",
-            description: "Simuler une erreur de validation",
-            defaultValue: false,
-        },
-    },
-};
-var Template = function (args) { return React.createElement(VerificationCodeInput, __assign({}, args)); };
-export var Default = Template.bind({});
-Default.args = {
-    numInputs: 5,
-};
-export var WithError = Template.bind({});
-WithError.args = {
-    numInputs: 5,
-    testError: true,
-};
-WithError.parameters = {
-    docs: {
-        description: {
-            story: "Simule un état d'erreur lors de la validation du code",
-        },
-    },
-};
-export var Responsive = function (args) { return (React.createElement("div", null,
-    React.createElement("p", { style: { marginBottom: "10px" } }, "Redimensionnez la fen\u00EAtre \u00E0 moins de 400px pour voir le design responsive"),
-    React.createElement(VerificationCodeInput, __assign({}, args)))); };
-Responsive.args = {
-    numInputs: 6,
-    size: "large",
-};
-Responsive.parameters = {
-    docs: {
-        description: {
-            story: "Montre le comportement responsive du composant lorsque la largeur de l'écran est inférieure à 400px",
-        },
-    },
-    viewport: {
-        defaultViewport: "mobile1",
-    },
-};

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

@@ -1,8 +0,0 @@
-export { default as Input } from "./Input";
-export { default as TextArea } from "./TextArea";
-export { default as SearchBar } from "./SearchBar";
-export { default as VerificationCodeInput } from "./VerificationCodeInput";
-export type { InputProps, InputRef } from "./Input";
-export type { SearchBarProps } from "./SearchBar";
-export type { TextAreaProps, TextAreaRef } from "./TextArea";
-export type { VerificationCodeInputProps } from "./VerificationCodeInput";

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

@@ -1,4 +0,0 @@
-export { default as Input } from "./Input";
-export { default as TextArea } from "./TextArea";
-export { default as SearchBar } from "./SearchBar";
-export { default as VerificationCodeInput } from "./VerificationCodeInput";

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

@@ -1,18 +0,0 @@
-import React from "react";
-import "./ProgressBar.css";
-import "../../../styles/global.css";
-import "../../../styles/icons.css";
-export type BarColor = "blue" | "red" | "green" | "grey";
-export interface ProgressBarProps {
-    steps: number;
-    currentStep: number;
-    startIcon?: boolean;
-    endIcon?: boolean;
-    onStartIconClick?: () => void;
-    onEndIconClick?: () => void;
-    showProgressBar?: boolean;
-    barColor?: BarColor;
-    isWrapperProgressBar?: boolean;
-}
-declare const ProgressBar: React.FC<ProgressBarProps>;
-export default ProgressBar;

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

@@ -1,26 +0,0 @@
-import React from "react";
-import "./ProgressBar.css";
-import "../../../styles/global.css";
-import "../../../styles/icons.css";
-var ProgressBar = function (_a) {
-    var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? true : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, onStartIconClick = _a.onStartIconClick, onEndIconClick = _a.onEndIconClick, _d = _a.showProgressBar, showProgressBar = _d === void 0 ? true : _d, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e, _f = _a.isWrapperProgressBar, isWrapperProgressBar = _f === void 0 ? true : _f;
-    var constrainedCurrentStep = Math.max(0, Math.min(currentStep, steps));
-    var progressWidth = constrainedCurrentStep === 0 ? 0 : (constrainedCurrentStep / steps) * 100;
-    var noIconsMargin = !startIcon && !endIcon ? "0px" : "0 10px";
-    return (React.createElement("div", { className: "progress-bar-container" },
-        isWrapperProgressBar && startIcon && (React.createElement("div", { className: "progress-bar-icon-container" },
-            React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
-                React.createElement("i", { className: "allaw-icon-chevron-left" })))),
-        React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content"), style: {
-                height: isWrapperProgressBar ? "6px" : "8px",
-                width: startIcon ? "calc(100% - 32px)" : "100%",
-                margin: noIconsMargin,
-            } },
-            React.createElement("div", { className: "progress-bar-fill progress-bar-fill-".concat(barColor), style: {
-                    width: "".concat(progressWidth, "%"),
-                    height: isWrapperProgressBar ? "6px" : "8px",
-                } })),
-        endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick, "data-cy": "close-stepper" },
-            React.createElement("i", { className: "allaw-icon-close" })))));
-};
-export default ProgressBar;

package/dist/components/atoms/progressBars/ProgressBar.stories.d.ts

@@ -1,83 +0,0 @@
-export const ActionsData: {};
-declare namespace _default {
-    export let title: string;
-    export { ProgressBar as component };
-    export let tags: string[];
-    export let excludeStories: RegExp;
-    export namespace args {
-        let steps: number;
-        let currentStep: number;
-        let startIcon: boolean;
-        let endIcon: boolean;
-        let showProgressBar: boolean;
-        let barColor: string;
-    }
-    export namespace argTypes {
-        export namespace steps_1 {
-            namespace control {
-                let type: string;
-            }
-        }
-        export { steps_1 as steps };
-        export namespace currentStep_1 {
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-        }
-        export { currentStep_1 as currentStep };
-        export namespace startIcon_1 {
-            export namespace control_2 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_2 as control };
-        }
-        export { startIcon_1 as startIcon };
-        export namespace endIcon_1 {
-            export namespace control_3 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_3 as control };
-        }
-        export { endIcon_1 as endIcon };
-        export namespace showProgressBar_1 {
-            export namespace control_4 {
-                let type_4: string;
-                export { type_4 as type };
-            }
-            export { control_4 as control };
-        }
-        export { showProgressBar_1 as showProgressBar };
-        export namespace barColor_1 {
-            export namespace control_5 {
-                let type_5: string;
-                export { type_5 as type };
-                export let options: string[];
-            }
-            export { control_5 as control };
-            export let description: string;
-        }
-        export { barColor_1 as barColor };
-    }
-    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 FirstStep: any;
-export const Hidden: any;
-export const RedProgress: any;
-export const GreenProgress: any;
-export const GreyProgress: any;
-import ProgressBar from "./ProgressBar";