allaw-ui 3.4.3 → 3.4.4

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

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

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

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

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

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

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

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

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

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

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