@andoniaina/react-modal 1.1.1 → 1.1.3

package/README.md

@@ -1,107 +1,49 @@
 # @andoniaina/react-modal
 
-Un composant **Modal React** simple et réutilisable, converti depuis un plugin jQuery modal, prêt à être utilisé dans n'importe quel projet React.
+Un composant **Modal React simple, léger et accessible**, prêt à l’emploi, avec gestion du scroll, fermeture par clic extérieur et touche ESC.
 
-## Installation
+Idéal pour afficher des messages de succès, d’erreur ou des confirmations dans vos applications React.
 
-Installe le package depuis npm :
+---
 
-```bash
-npm install @andoniaina/react-modal
-
-🧩 Problématique initiale
-Limites de la solution jQuery
-
-Manipulation directe du DOM
-
-Couplage fort entre HTML et JavaScript
-
-Difficulté de maintenance à grande échelle
-
-Dépendance à une librairie externe (jQuery)
-
-Intégration complexe dans une application React
-
-👉 Dans une application React, l’utilisation de jQuery va à l’encontre du Virtual DOM et des bonnes pratiques React.
-
-🔄 Solution mise en place
-
-Le plugin jquery-modal a été remplacé par un composant React contrôlé par l’état (state), respectant :
-
-le flux de données unidirectionnel
-
-la logique déclarative de React
+## ✨ Fonctionnalités
 
-la réutilisabilité des composants
+- ✅ Modal contrôlée (`isOpen`)
+- ✅ Fermeture par clic sur l’overlay
+- ✅ Fermeture avec la touche **ESC**
+- ✅ Blocage du scroll en arrière-plan
+- ✅ Styles CSS inclus
+- ✅ Types de modal (`success`, `error`)
+- ✅ Accessible (`role="dialog"`, `aria-modal`)
 
-🔍 Comparaison fonctionnelle
-Fonctionnalité	        jquery-modal	        React Modal
-Ouverture / fermeture	Attribut HTML + JS	    State React
-Overlay	                Oui	                    Oui
-Fermeture par ESC	    Oui	                    Oui
-Fermeture par clic	    Oui	                    Oui
-Animation	            jQuery	                CSS
-Événements	            jQuery events	        Props & callbacks
-Accessibilité	        Limitée	                aria-modal, role="dialog"
-Dépendance externe	    jQuery	                Aucune
+---
 
-🧠 Différence de paradigme
-Approche jQuery (impérative)
-<a href="#modal" rel="modal:open">Open</a>
+## 📦 Installation
 
-$('#modal').modal({ escapeClose: true });
-
-- Le DOM est modifié directement
-- Le comportement dépend de sélecteurs
-- La logique est dispersée
-
-Approche React (déclarative)
-const [isOpen, setIsOpen] = useState(false);
-
-<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
-  Contenu du modal
-</Modal>
-
-- L’UI dépend de l’état
-- La logique est centralisée
-- Le composant est réutilisable
-
-🔁 Correspondance des API
-jquery-modal	            Implémentation React
-rel="modal:open"	        <ModalTrigger />
-$.modal.close()	            setIsOpen(false)
-escapeClose	                closeOnEsc
-clickClose	                closeOnOverlayClick
-fadeDuration	            animationDuration
-modal:open	                onAfterOpen
-modal:close	                onAfterClose
-
-🧱 Architecture du composant
-src/
-├── components/
-│   ├── Modal/
-│   │   ├── Modal.jsx
-│   │   └── Modal.css
-│   └── ModalTrigger.jsx
-├── App.jsx
-
-- Modal.jsx : gestion de l’ouverture, fermeture et événements
-- Modal.css : styles et animations
-- ModalTrigger.jsx : remplacement du déclenchement jQuery
-
-♿ Accessibilité
-Le composant React respecte les bonnes pratiques d’accessibilité :
-* role="dialog"
-* aria-modal="true"
-* Fermeture via la touche Escape
-* Blocage du scroll du body lors de l’ouverture
-
-Ces éléments améliorent l’expérience utilisateur par rapport à la version jQuery.
-
-✅ Bénéfices de la migration
+```bash
+npm install @andoniaina/react-modal
 
-    ❌ Suppression complète de jQuery
-    ♻️ Code plus maintenable
-    🧠 Logique centralisée
-    🚀 Intégration native dans React
-    📈 Performance et lisibilité améliorées
+## Utilisation basique
+import { useState } from "react";
+import { Modal } from "@andoniaina/react-modal";
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>
+        Ouvrir la modal
+      </button>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        type="success"
+        message="L’opération a été effectuée avec succès !"
+      />
+    </>
+  );
+}
+
+export default App;

package/dist/react-modal.css

@@ -0,0 +1 @@
+.modal-overlay{position:fixed;inset:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1001}.modal{background:#fff;padding:1.5rem;border-radius:8px;min-width:300px;text-align:center;animation:fadeIn .2s ease-in-out}.modal.success{border-left:6px solid #2ecc71}.modal.error{border-left:6px solid #e74c3c}.modal button{margin-top:1rem;padding:.5rem 1rem;cursor:pointer}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andoniaina/react-modal",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Reusable, accessible and customizable React modal component",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -8,6 +8,9 @@
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "*.css"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -51,8 +54,8 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
-    "vite": "^7.2.4",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "vite": "^7.2.4"
   }
 }

package/dist/react-hrnet-modal.css

@@ -1 +0,0 @@
-.modal-overlay{position:fixed;inset:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:999}.modal{background:#fff;padding:1.5rem;border-radius:8px;min-width:300px;text-align:center;animation:fadeIn .2s ease-in-out}.modal.success{border-left:6px solid #2ecc71}.modal.error{border-left:6px solid #e74c3c}.modal button{margin-top:1rem;padding:.5rem 1rem;cursor:pointer}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}