feat: Ajout des composants manquant dans le FormTemplateBuilder [N3WTS-17]

Front-End/src/components/Form/CheckBox.js

@@ -0,0 +1,52 @@
+import logger from '@/utils/logger';
+import React from 'react';
+
+const CheckBox = ({
+  item,
+  formData,
+  handleChange,
+  fieldName,
+  itemLabelFunc = () => null,
+  horizontal = false,
+}) => {
+  // Vérifier si formData[fieldName] est un tableau ou une valeur booléenne
+  const isChecked = Array.isArray(formData[fieldName])
+    ? formData[fieldName].includes(parseInt(item.id)) // Si c'est un tableau, vérifier si l'élément est inclus
+    : formData[fieldName]; // Si c'est une valeur booléenne, l'utiliser directement
+
+  return (
+    <div
+      key={item.id}
+      className={`flex ${horizontal ? 'flex-col items-center' : 'flex-row items-center'}`}
+    >
+      {horizontal && (
+        <label
+          htmlFor={`${fieldName}-${item.id}`}
+          className="block text-sm text-center mb-1 font-medium text-gray-700 cursor-pointer"
+        >
+          {itemLabelFunc(item)}
+        </label>
+      )}
+      <input
+        type="checkbox"
+        id={`${fieldName}-${item.id}`}
+        name={fieldName}
+        value={item.id}
+        checked={isChecked}
+        onChange={handleChange}
+        className={`form-checkbox h-4 w-4 rounded-mg text-emerald-600 hover:ring-emerald-400 checked:bg-emerald-600 hover:border-emerald-500 hover:bg-emerald-500 cursor-pointer ${horizontal ? 'mt-1' : 'mr-2'}`}
+        style={{ borderRadius: '6px', outline: 'none', boxShadow: 'none' }}
+      />
+      {!horizontal && (
+        <label
+          htmlFor={`${fieldName}-${item.id}`}
+          className="block text-sm font-medium text-gray-700 cursor-pointer"
+        >
+          {itemLabelFunc(item)}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default CheckBox;