feat: creation d'un FormRenderer.js pour creer un formulaire dynamique [NEWTS-17]

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

@@ -0,0 +1,61 @@
+import dynamic from 'next/dynamic';
+import 'react-quill/dist/quill.snow.css';
+
+const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
+
+export default function WisiwigTextArea({
+  label = 'Zone de Texte',
+  value,
+  onChange,
+  placeholder = 'Ecrivez votre texte ici...',
+  className = 'h-64',
+  required = false,
+  errorMsg,
+  errorLocalMsg,
+  enable = true,
+}) {
+  return (
+    <div className={`mb-4 ${className}`}>
+      <label className="block text-sm font-medium text-gray-700">
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <div
+        className={`
+          mt-1 border rounded-md
+          ${
+            errorMsg || errorLocalMsg
+              ? 'border-red-500 hover:border-red-700'
+              : 'border-gray-200 hover:border-gray-400'
+          }
+          ${!errorMsg && !errorLocalMsg ? 'focus-within:border-gray-500' : ''}
+          ${!enable ? 'bg-gray-100 cursor-not-allowed' : ''}
+        `}
+      >
+        <ReactQuill
+          theme="snow"
+          value={value}
+          onChange={enable ? onChange : undefined}
+          placeholder={placeholder}
+          readOnly={!enable}
+          className={`bg-white rounded-md border-0 shadow-none !border-0 !outline-none ${!enable ? 'bg-gray-100 cursor-not-allowed' : ''}`}
+          style={{ minHeight: 250, border: 'none', boxShadow: 'none' }}
+        />
+      </div>
+      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
+      {errorLocalMsg && (
+        <p className="mt-2 text-sm text-red-600">{errorLocalMsg}</p>
+      )}
+      <style jsx global>{`
+        .ql-toolbar.ql-snow {
+          border: none !important;
+          border-bottom: 1px solid #e5e7eb !important; /* gray-200 */
+          border-radius: 0.375rem 0.375rem 0 0 !important; /* rounded-t-md */
+        }
+        .ql-container.ql-snow {
+          border: none !important;
+        }
+      `}</style>
+    </div>
+  );
+}