@andoniaina/react-modal 1.0.0

package/README.md

@@ -0,0 +1,96 @@
+🧩 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
+
+la réutilisabilité des composants
+
+🔍 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>
+
+$('#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
+
+    ❌ Suppression complète de jQuery
+    ♻️ Code plus maintenable
+    🧠 Logique centralisée
+    🚀 Intégration native dans React
+    📈 Performance et lisibilité améliorées

package/dist/react-modal.css

@@ -0,0 +1 @@
+.modal-overlay{position:fixed;inset:0;background:#0009;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity ease-in-out;z-index:1000}.modal-overlay.show{opacity:1}.modal-content{background:#fff;padding:24px;border-radius:6px;min-width:300px;max-width:90%}

package/dist/react-simple-modal.es.js

@@ -0,0 +1,307 @@
+import re, { useEffect as D } from "react";
+var w = { exports: {} }, _ = {};
+var F;
+function te() {
+  if (F) return _;
+  F = 1;
+  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.fragment");
+  function i(c, o, l) {
+    var f = null;
+    if (l !== void 0 && (f = "" + l), o.key !== void 0 && (f = "" + o.key), "key" in o) {
+      l = {};
+      for (var d in o)
+        d !== "key" && (l[d] = o[d]);
+    } else l = o;
+    return o = l.ref, {
+      $$typeof: s,
+      type: c,
+      key: f,
+      ref: o !== void 0 ? o : null,
+      props: l
+    };
+  }
+  return _.Fragment = u, _.jsx = i, _.jsxs = i, _;
+}
+var v = {};
+var L;
+function ne() {
+  return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Q ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case O:
+          return "Fragment";
+        case J:
+          return "Profiler";
+        case q:
+          return "StrictMode";
+        case X:
+          return "Suspense";
+        case H:
+          return "SuspenseList";
+        case B:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case U:
+            return "Portal";
+          case z:
+            return e.displayName || "Context";
+          case V:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case G:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
+          case A:
+            r = e._payload, e = e._init;
+            try {
+              return s(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function u(e) {
+      return "" + e;
+    }
+    function i(e) {
+      try {
+        u(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          n
+        ), u(e);
+      }
+    }
+    function c(e) {
+      if (e === O) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === A)
+        return "<...>";
+      try {
+        var r = s(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = P.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function f(e) {
+      if (g.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function d(e, r) {
+      function t() {
+        N || (N = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function R() {
+      var e = s(this.type);
+      return C[e] || (C[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function b(e, r, t, n, y, h) {
+      var a = t.ref;
+      return e = {
+        $$typeof: j,
+        type: e,
+        key: r,
+        props: t,
+        _owner: n
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: R
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: y
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: h
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function p(e, r, t, n, y, h) {
+      var a = r.children;
+      if (a !== void 0)
+        if (n)
+          if (K(a)) {
+            for (n = 0; n < a.length; n++)
+              m(a[n]);
+            Object.freeze && Object.freeze(a);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else m(a);
+      if (g.call(r, "key")) {
+        a = s(e);
+        var E = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        n = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", I[a + n] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          n,
+          a,
+          E,
+          a
+        ), I[a + n] = !0);
+      }
+      if (a = null, t !== void 0 && (i(t), a = "" + t), f(r) && (i(r.key), a = "" + r.key), "key" in r) {
+        t = {};
+        for (var x in r)
+          x !== "key" && (t[x] = r[x]);
+      } else t = r;
+      return a && d(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), b(
+        e,
+        a,
+        t,
+        o(),
+        y,
+        h
+      );
+    }
+    function m(e) {
+      T(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? T(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function T(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === j;
+    }
+    var k = re, j = /* @__PURE__ */ Symbol.for("react.transitional.element"), U = /* @__PURE__ */ Symbol.for("react.portal"), O = /* @__PURE__ */ Symbol.for("react.fragment"), q = /* @__PURE__ */ Symbol.for("react.strict_mode"), J = /* @__PURE__ */ Symbol.for("react.profiler"), V = /* @__PURE__ */ Symbol.for("react.consumer"), z = /* @__PURE__ */ Symbol.for("react.context"), G = /* @__PURE__ */ Symbol.for("react.forward_ref"), X = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), A = /* @__PURE__ */ Symbol.for("react.lazy"), B = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), P = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, g = Object.prototype.hasOwnProperty, K = Array.isArray, S = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    k = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var N, C = {}, Y = k.react_stack_bottom_frame.bind(
+      k,
+      l
+    )(), $ = S(c(l)), I = {};
+    v.Fragment = O, v.jsx = function(e, r, t) {
+      var n = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return p(
+        e,
+        r,
+        t,
+        !1,
+        n ? Error("react-stack-top-frame") : Y,
+        n ? S(c(e)) : $
+      );
+    }, v.jsxs = function(e, r, t) {
+      var n = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return p(
+        e,
+        r,
+        t,
+        !0,
+        n ? Error("react-stack-top-frame") : Y,
+        n ? S(c(e)) : $
+      );
+    };
+  })()), v;
+}
+var M;
+function ae() {
+  return M || (M = 1, process.env.NODE_ENV === "production" ? w.exports = te() : w.exports = ne()), w.exports;
+}
+var W = ae();
+function le({
+  isOpen: s,
+  onClose: u,
+  children: i,
+  closeOnEsc: c = !0,
+  closeOnOverlayClick: o = !0,
+  animationDuration: l = 300,
+  onBeforeOpen: f,
+  onAfterOpen: d,
+  onBeforeClose: R,
+  onAfterClose: b
+}) {
+  if (D(() => (s ? (f?.(), d?.(), document.body.style.overflow = "hidden") : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [s]), D(() => {
+    if (!c) return;
+    const m = (T) => {
+      T.key === "Escape" && (R?.(), u(), b?.());
+    };
+    return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
+  }, [c, u]), !s) return null;
+  const p = () => {
+    o && (R?.(), u(), b?.());
+  };
+  return /* @__PURE__ */ W.jsx(
+    "div",
+    {
+      className: "modal-overlay show",
+      style: { transitionDuration: `${l}ms` },
+      onClick: p,
+      role: "dialog",
+      "aria-modal": "true",
+      children: /* @__PURE__ */ W.jsx(
+        "div",
+        {
+          className: "modal-content",
+          onClick: (m) => m.stopPropagation(),
+          children: i
+        }
+      )
+    }
+  );
+}
+export {
+  le as default
+};

package/dist/react-simple-modal.umd.js

@@ -0,0 +1,6 @@
+(function(l,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("react")):typeof define=="function"&&define.amd?define(["react"],c):(l=typeof globalThis<"u"?globalThis:l||self,l.ReactSimpleModal=c(l.React))})(this,(function(l){"use strict";var c={exports:{}},R={};var g;function U(){if(g)return R;g=1;var u=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function d(f,o,s){var m=null;if(s!==void 0&&(m=""+s),o.key!==void 0&&(m=""+o.key),"key"in o){s={};for(var E in o)E!=="key"&&(s[E]=o[E])}else s=o;return o=s.ref,{$$typeof:u,type:f,key:m,ref:o!==void 0?o:null,props:s}}return R.Fragment=i,R.jsx=d,R.jsxs=d,R}var b={};var N;function J(){return N||(N=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case O:return"Fragment";case X:return"Profiler";case G:return"StrictMode";case Q:return"Suspense";case K:return"SuspenseList";case re:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case q:return"Portal";case Z:return e.displayName||"Context";case H:return(e._context.displayName||"Context")+".Consumer";case B:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ee:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function i(e){return""+e}function d(e){try{i(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),i(e)}}function f(e){if(e===O)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=A.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function m(e){if(D.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function E(e,r){function t(){F||(F=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function p(){var e=u(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function T(e,r,t,n,h,x){var a=t.ref;return e={$$typeof:I,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:p}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:h}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function k(e,r,t,n,h,x){var a=r.children;if(a!==void 0)if(n)if(ne(a)){for(n=0;n<a.length;n++)_(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else _(a);if(D.call(r,"key")){a=u(e);var v=Object.keys(r).filter(function(ae){return ae!=="key"});n=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",W[a+n]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,a,v,a),W[a+n]=!0)}if(a=null,t!==void 0&&(d(t),a=""+t),m(r)&&(d(r.key),a=""+r.key),"key"in r){t={};for(var j in r)j!=="key"&&(t[j]=r[j])}else t=r;return a&&E(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,a,t,o(),h,x)}function _(e){y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function y(e){return typeof e=="object"&&e!==null&&e.$$typeof===I}var w=l,I=Symbol.for("react.transitional.element"),q=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),G=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),Z=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),Q=Symbol.for("react.suspense"),K=Symbol.for("react.suspense_list"),ee=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),re=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),A=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,ne=Array.isArray,P=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(e){return e()}};var F,L={},M=w.react_stack_bottom_frame.bind(w,s)(),$=P(f(s)),W={};b.Fragment=O,b.jsx=function(e,r,t){var n=1e4>A.recentlyCreatedOwnerStacks++;return k(e,r,t,!1,n?Error("react-stack-top-frame"):M,n?P(f(e)):$)},b.jsxs=function(e,r,t){var n=1e4>A.recentlyCreatedOwnerStacks++;return k(e,r,t,!0,n?Error("react-stack-top-frame"):M,n?P(f(e)):$)}})()),b}var C;function V(){return C||(C=1,process.env.NODE_ENV==="production"?c.exports=U():c.exports=J()),c.exports}var Y=V();function z({isOpen:u,onClose:i,children:d,closeOnEsc:f=!0,closeOnOverlayClick:o=!0,animationDuration:s=300,onBeforeOpen:m,onAfterOpen:E,onBeforeClose:p,onAfterClose:T}){if(l.useEffect(()=>(u?(m?.(),E?.(),document.body.style.overflow="hidden"):document.body.style.overflow="",()=>{document.body.style.overflow=""}),[u]),l.useEffect(()=>{if(!f)return;const _=y=>{y.key==="Escape"&&(p?.(),i(),T?.())};return document.addEventListener("keydown",_),()=>document.removeEventListener("keydown",_)},[f,i]),!u)return null;const k=()=>{o&&(p?.(),i(),T?.())};return Y.jsx("div",{className:"modal-overlay show",style:{transitionDuration:`${s}ms`},onClick:k,role:"dialog","aria-modal":"true",children:Y.jsx("div",{className:"modal-content",onClick:_=>_.stopPropagation(),children:d})})}return z}));

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@andoniaina/react-modal",
+  "version": "1.0.0",
+  "description": "Reusable, accessible and customizable React modal component",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.esm.js",
+    "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "react",
+    "modal",
+    "dialog",
+    "accessible",
+    "ui",
+    "component"
+  ],
+  "author": "Ton Nom",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/andoniaina/react-modal"
+  },
+  "bugs": {
+    "url": "https://github.com/andoniaina/react-modal/issues"
+  },
+  "homepage": "https://github.com/andoniaina/react-modal#readme",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.2.4"
+  }
+}