@rsuci/shared-form-components 1.0.76 → 1.0.77

package/dist/components/inputs/PhoneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/PhoneInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/PhoneInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8DzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/inputs/PhoneInput.js

@@ -3,7 +3,8 @@
  * RSU v2 - Moteur de Rendu des Formulaires d'Enquête
  */
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
 import { applyComponentStyle } from '../../utils/styleUtils';
 import { isComponentReadonly, readonlyClasses } from '../../utils/componentStateUtils';
 const PhoneInput = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
@@ -11,16 +12,40 @@ const PhoneInput = ({ variable, value, onChange, onBlur, error, disabled, isCons
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
     // Déterminer si le composant est en lecture seule
     const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    const [localError, setLocalError] = useState(null);
+    const validate = useCallback((val) => {
+        if (!val)
+            return null;
+        if (val.length !== 10) {
+            return 'Le numéro doit contenir exactement 10 chiffres';
+        }
+        const prefix2 = val.slice(0, 2);
+        const firstDigit = val[0];
+        if (!['07', '05', '01'].includes(prefix2) && firstDigit !== '2') {
+            return 'Le numéro doit commencer par 07, 05, 01 ou 2';
+        }
+        return null;
+    }, []);
+    const handleChange = (e) => {
+        const raw = e.target.value.replace(/\D/g, '').slice(0, 10);
+        setLocalError(validate(raw));
+        onChange(raw);
+    };
+    const handleBlur = () => {
+        setLocalError(validate(stringValue));
+        onBlur?.();
+    };
     // Générer les classes CSS
+    const displayError = error || localError;
     const getInputClasses = () => {
         const baseClasses = 'w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900';
-        const errorClasses = error ? 'border-red-500' : 'border-gray-300';
+        const errorClasses = displayError ? 'border-red-500' : 'border-gray-300';
         if (disabled)
             return `${baseClasses} ${errorClasses} bg-gray-100 cursor-not-allowed text-gray-500`;
         if (isReadonly)
             return `${baseClasses} ${errorClasses} ${readonlyClasses.readonly}`;
         return `${baseClasses} ${errorClasses} bg-white`;
     };
-    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "tel", value: stringValue, onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: variable.proprietes?.placeholder || "+225 XX XX XX XX", disabled: disabled, readOnly: isReadonly, style: textStyle, className: getInputClasses() }) }));
+    return (_jsxs("div", { style: containerStyle, children: [_jsx("input", { type: "tel", value: stringValue, onChange: handleChange, onBlur: handleBlur, placeholder: variable.proprietes?.placeholder || "07 XX XX XX XX", disabled: disabled, readOnly: isReadonly, maxLength: 10, style: textStyle, className: getInputClasses() }), displayError && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: displayError }))] }));
 };
 export default PhoneInput;

package/dist/lib/utils/variableValueConverter.js

@@ -429,7 +429,7 @@ export class VariableValueConverter {
                 case 'HOUR':
                     return /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(value);
                 case 'PHONE':
-                    return /^\+?[1-9]\d{1,14}$/.test(value.replace(/\s/g, ''));
+                    return /^(0[157]|2)\d{8}$/.test(value.replace(/\s/g, ''));
                 case 'GPS':
                     try {
                         const parsed = JSON.parse(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsuci/shared-form-components",
-  "version": "1.0.76",
+  "version": "1.0.77",
   "description": "Composants partagés de rendu de formulaires RSU v2 - Package local pour frontend Admin et Public",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",