@rsuci/shared-form-components 1.0.25 → 1.0.28

package/dist/utils/componentStateUtils.js

@@ -0,0 +1,93 @@
+/**
+ * Utilitaires pour la gestion de l'état des composants de formulaire
+ * RSU v2 - Moteur de Rendu des Formulaires d'Enquête
+ */
+/**
+ * Détermine si un composant doit être en lecture seule
+ *
+ * Règle de priorité: Mode Consultation > isReadonly
+ * - Si le formulaire est en mode consultation (isConsultationMode = true),
+ *   tous les composants sont en lecture seule
+ * - Sinon, on utilise la propriété isReadonly de la variable
+ *
+ * @param variable - La variable de formulaire
+ * @param isConsultationMode - Indique si le formulaire est en mode consultation
+ * @returns true si le composant doit être en lecture seule
+ */
+export function isComponentReadonly(variable, isConsultationMode = false) {
+    // Mode consultation prioritaire: tout est readonly
+    if (isConsultationMode) {
+        return true;
+    }
+    // Sinon, on utilise la propriété isReadonly de la variable
+    return variable.isReadonly === true;
+}
+/**
+ * Détermine si un composant doit être désactivé (disabled)
+ * Un composant disabled ne peut pas recevoir le focus et est visuellement grisé
+ *
+ * @param disabled - Propriété disabled passée au composant
+ * @param variable - La variable de formulaire
+ * @param isConsultationMode - Indique si le formulaire est en mode consultation
+ * @returns true si le composant doit être désactivé
+ */
+export function isComponentDisabled(disabled = false, variable, isConsultationMode = false) {
+    // Si explicitement disabled, retourner true
+    if (disabled) {
+        return true;
+    }
+    // Pour certains composants qui ne supportent pas readonly,
+    // on utilise disabled à la place
+    if (isConsultationMode || variable.isReadonly === true) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Retourne les attributs HTML appropriés pour le mode lecture seule
+ *
+ * @param variable - La variable de formulaire
+ * @param isConsultationMode - Indique si le formulaire est en mode consultation
+ * @param componentSupportsReadonly - Indique si le composant HTML supporte l'attribut readonly
+ * @returns Un objet avec les attributs readonly et/ou disabled
+ */
+export function getReadonlyAttributes(variable, isConsultationMode = false, componentSupportsReadonly = true) {
+    const shouldBeReadonly = isComponentReadonly(variable, isConsultationMode);
+    if (!shouldBeReadonly) {
+        return {};
+    }
+    // Si le composant supporte readonly (input, textarea), on utilise readonly
+    // Sinon (select, checkbox, radio), on utilise disabled
+    if (componentSupportsReadonly) {
+        return { readOnly: true };
+    }
+    else {
+        return { disabled: true };
+    }
+}
+/**
+ * Classes CSS pour les composants en lecture seule
+ */
+export const readonlyClasses = {
+    // Style pour un composant readonly (focusable mais non modifiable)
+    readonly: 'bg-gray-50 cursor-default text-gray-700',
+    // Style pour un composant disabled (non focusable, grisé)
+    disabled: 'bg-gray-100 cursor-not-allowed text-gray-500',
+};
+/**
+ * Retourne les classes CSS appropriées pour l'état du composant
+ *
+ * @param variable - La variable de formulaire
+ * @param isConsultationMode - Indique si le formulaire est en mode consultation
+ * @param isDisabled - Indique si le composant est explicitement désactivé
+ * @returns Les classes CSS à appliquer
+ */
+export function getReadonlyClasses(variable, isConsultationMode = false, isDisabled = false) {
+    if (isDisabled) {
+        return readonlyClasses.disabled;
+    }
+    if (isComponentReadonly(variable, isConsultationMode)) {
+        return readonlyClasses.readonly;
+    }
+    return '';
+}

package/dist/utils/styleUtils.d.ts

@@ -0,0 +1,29 @@
+import { ComponentStyle } from '../types/enquete';
+import { CSSProperties } from 'react';
+/**
+ * Génère un objet de style React à partir de ComponentStyle
+ * Utilise des styles inline pour les couleurs (Tailwind ne peut pas gérer les couleurs dynamiques)
+ *
+ * @param style - Configuration du style du composant
+ * @returns Objet de styles CSS pour le texte/contenu
+ */
+export declare function getStyleObject(style?: ComponentStyle): CSSProperties;
+/**
+ * Génère le style du conteneur (background du composant)
+ *
+ * @param style - Configuration du style du composant
+ * @returns Objet de styles CSS pour le conteneur
+ */
+export declare function getContainerStyle(style?: ComponentStyle): CSSProperties;
+/**
+ * Applique le style complet - retourne à la fois le style du texte et du conteneur
+ * Fonction de commodité qui combine getStyleObject et getContainerStyle
+ *
+ * @param style - Configuration du style du composant
+ * @returns Objet avec textStyle et containerStyle
+ */
+export declare function applyComponentStyle(style?: ComponentStyle): {
+    textStyle: CSSProperties;
+    containerStyle: CSSProperties;
+};
+//# sourceMappingURL=styleUtils.d.ts.map

package/dist/utils/styleUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,aAAa,CAsBpE;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,aAAa,CAMvE;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,CAAC,EAAE,cAAc;;;EAKzD"}

package/dist/utils/styleUtils.js

@@ -0,0 +1,51 @@
+/**
+ * Génère un objet de style React à partir de ComponentStyle
+ * Utilise des styles inline pour les couleurs (Tailwind ne peut pas gérer les couleurs dynamiques)
+ *
+ * @param style - Configuration du style du composant
+ * @returns Objet de styles CSS pour le texte/contenu
+ */
+export function getStyleObject(style) {
+    if (!style)
+        return {};
+    const styleObj = {};
+    if (style.fontColor) {
+        styleObj.color = style.fontColor;
+    }
+    if (style.fontBackgroundColor) {
+        styleObj.backgroundColor = style.fontBackgroundColor;
+    }
+    if (style.fontBold) {
+        styleObj.fontWeight = 'bold';
+    }
+    if (style.fontItalic) {
+        styleObj.fontStyle = 'italic';
+    }
+    return styleObj;
+}
+/**
+ * Génère le style du conteneur (background du composant)
+ *
+ * @param style - Configuration du style du composant
+ * @returns Objet de styles CSS pour le conteneur
+ */
+export function getContainerStyle(style) {
+    if (!style?.componentBackgroundColor)
+        return {};
+    return {
+        backgroundColor: style.componentBackgroundColor,
+    };
+}
+/**
+ * Applique le style complet - retourne à la fois le style du texte et du conteneur
+ * Fonction de commodité qui combine getStyleObject et getContainerStyle
+ *
+ * @param style - Configuration du style du composant
+ * @returns Objet avec textStyle et containerStyle
+ */
+export function applyComponentStyle(style) {
+    return {
+        textStyle: getStyleObject(style),
+        containerStyle: getContainerStyle(style),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsuci/shared-form-components",
-  "version": "1.0.25",
+  "version": "1.0.28",
   "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",
@@ -20,23 +20,25 @@
   "author": "RSU v2 Architecture Team",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": "^0.263.0 || ^0.525.0",
     "next": "^14.0.0 || ^15.0.0",
-    "lucide-react": "^0.263.0 || ^0.525.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "typescript": "^5.0.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/jest-dom": "^6.0.0",
     "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0"
+    "jest-environment-jsdom": "^29.0.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.0.0"
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "tailwind-merge": "^2.0.0",
-    "lucide-react": "^0.525.0"
+    "lucide-react": "^0.263.0 || ^0.525.0",
+    "tailwind-merge": "^2.0.0"
   }
-}
+}