allaw-ui 2.3.4 → 2.3.5

package/dist/components/atoms/inputs/Input.css

@@ -10,6 +10,7 @@
 .Input-title-container {
   display: flex;
   align-items: center;
+  min-height: 78px;
 }
 
 .Input-required {

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

@@ -0,0 +1,12 @@
+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;
+}
+declare const VerificationCodeInput: React.FC<VerificationCodeInputProps>;
+export default VerificationCodeInput;

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

@@ -0,0 +1,169 @@
+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;
+    var _e = useState(Array(numInputs).fill("")), values = _e[0], setValues = _e[1];
+    var _f = useState(""), error = _f[0], setError = _f[1];
+    var inputRefs = useRef(Array(numInputs).fill(null));
+    useEffect(function () {
+        setValues(Array(numInputs).fill(""));
+        inputRefs.current = Array(numInputs).fill(null);
+        setTimeout(function () {
+            var _a;
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    }, [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]);
+    var validateAllInputs = function () {
+        var _a;
+        var fullValue = values.join("");
+        // console.log("Attempting validation with value:", fullValue);
+        if (fullValue.length === numInputs) {
+            if (testError) {
+                // console.log("Showing error state");
+                setError("Code de vérification invalide");
+                onError === null || onError === void 0 ? void 0 : onError("Code de vérification invalide");
+                return;
+            }
+            // console.log("Code validation successful:", fullValue);
+            setError("");
+            onError === null || onError === void 0 ? void 0 : onError(null);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
+            (_a = inputRefs.current[numInputs - 1]) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+    };
+    var handleInputChange = function (index, value) {
+        var _a, _b, _c, _d;
+        if (value.length > 1) {
+            var pastedChars = value.split("");
+            var validChars = pastedChars
+                .filter(function (char) { return validateInput(char, allowedChars); })
+                .slice(0, numInputs - index);
+            if (validChars.length > 0) {
+                var newValues_1 = __spreadArray([], values, true);
+                validChars.forEach(function (char, i) {
+                    if (index + i < numInputs) {
+                        newValues_1[index + i] = char;
+                    }
+                });
+                setValues(newValues_1);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValues_1.join(""));
+                var nextEmptyIndex = newValues_1.findIndex(function (val, i) { return i >= index && !val; });
+                var focusIndex = nextEmptyIndex === -1 ? numInputs - 1 : nextEmptyIndex;
+                (_a = inputRefs.current[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                if (nextEmptyIndex === -1) {
+                    validateAllInputs();
+                    (_b = inputRefs.current[numInputs - 1]) === null || _b === void 0 ? void 0 : _b.blur();
+                }
+                return;
+            }
+        }
+        if (!validateInput(value, allowedChars)) {
+            return;
+        }
+        var newValues = __spreadArray([], values, true);
+        newValues[index] = value;
+        setValues(newValues);
+        if (value === "")
+            return;
+        setError("");
+        onError === null || onError === void 0 ? void 0 : onError(null);
+        var fullValue = newValues.join("");
+        onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
+        if (index < numInputs - 1) {
+            (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        else if (index === numInputs - 1 && value !== "") {
+            // console.log("Last input filled, triggering validation");
+            validateAllInputs();
+            (_d = inputRefs.current[index]) === null || _d === void 0 ? void 0 : _d.blur();
+        }
+    };
+    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) {
+                // console.log("All inputs lost focus, checking validation");
+                validateAllInputs();
+            }
+        }, 0);
+    };
+    var handlePaste = function (e) {
+        var _a, _b;
+        e.preventDefault();
+        var pastedText = e.clipboardData.getData("text");
+        // console.log("Pasted text:", pastedText);
+        var validChars = pastedText
+            .split("")
+            .filter(function (char) { return validateInput(char, allowedChars); })
+            .slice(0, numInputs);
+        if (validChars.length > 0) {
+            var newValues_2 = Array(numInputs).fill("");
+            validChars.forEach(function (char, i) {
+                if (i < numInputs) {
+                    newValues_2[i] = char;
+                }
+            });
+            setValues(newValues_2);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValues_2.join(""));
+            if (validChars.length >= numInputs) {
+                // console.log("All inputs filled by paste, triggering validation");
+                validateAllInputs();
+                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 : ""), 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); } })); });
+    };
+    return (React.createElement("div", { className: styles.container },
+        React.createElement("div", { className: styles.inputsContainer }, renderInputs()),
+        error && (React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))));
+};
+export default VerificationCodeInput;

package/dist/components/atoms/inputs/VerificationCodeInput.module.css

@@ -0,0 +1,84 @@
+/* VerificationCodeInput.module.css */
+@import "../../../styles/colors.css";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: fit-content;
+}
+
+.inputsContainer {
+  display: flex;
+  gap: 8px;
+  width: fit-content;
+}
+
+.input {
+  border: 2px solid var(--grey-venom);
+  border-radius: 8px;
+  text-align: center;
+  font-size: 16px;
+  outline: none;
+  color: var(--noir);
+  transition: border-color 0.2s ease;
+}
+
+.input:hover {
+  border-color: var(--venom-grey-dark);
+}
+
+.input:focus-within {
+  border-color: var(--mid-grey);
+}
+
+.currentInput {
+  border-color: #25beeb;
+  position: relative;
+}
+
+.currentInput::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 60%;
+  background-color: #25beeb;
+  animation: blink 1s infinite;
+}
+
+.filledInput {
+  border-color: var(--bleu-allaw);
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Tailles */
+.small {
+  width: 40px;
+  height: 40px;
+}
+
+.medium {
+  width: 48px;
+  height: 48px;
+  font-size: 18px;
+}
+
+.large {
+  width: 56px;
+  height: 56px;
+  font-size: 20px;
+}

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

@@ -0,0 +1,59 @@
+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;
+import VerificationCodeInput from "./VerificationCodeInput";

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

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

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

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

@@ -1,3 +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/index.d.ts

@@ -64,6 +64,8 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
 export type { PaginationProps } from "./components/molecules/pagination/Pagination";
+export { default as VerificationCodeInput } from "./components/atoms/inputs/VerificationCodeInput";
+export type { VerificationCodeInputProps } from "./components/atoms/inputs/VerificationCodeInput";
 export { default as Banner } from "./components/molecules/banner/Banner";
 export type { BannerProps } from "./components/molecules/banner/Banner";
 export { default as FeatureCard } from "./components/atoms/featureCard/featureCard";

package/dist/index.js

@@ -80,6 +80,8 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 // Pagination
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
+// Verification Code Input
+export { default as VerificationCodeInput } from "./components/atoms/inputs/VerificationCodeInput";
 // Storyblok component
 export { default as Banner } from "./components/molecules/banner/Banner";
 export { default as FeatureCard } from "./components/atoms/featureCard/featureCard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",