@kyssii_gtml/modal-lib-p14

Composant Modal React – Projet P14 | OpenClassrooms

Une petite librairie React pour afficher une fenêtre modale réutilisable, avec styles SCSS/CSS extraits, fermeture par clic extérieur et bouton de fermeture.

Fonctionnalités

• ✅ Composant 100% React
• 🎨 Styles Sass extraits en CSS (Rollup + PostCSS)
• 🖱️ Fermeture par clic sur le backdrop et bouton « X »
• ♿ Comportement accessible (focus gérable côté app)

API du composant Modal

Props principales utilisées dans le projet actuel:

• modalId: string – identifiant unique du modal (clé d’ouverture/fermeture)
• title?: string – titre optionnel
• enableBackdropClose?: boolean – clic sur le backdrop ferme la modale (défaut: true)
• enableCloseButton?: boolean – affiche le bouton « X » (défaut: true)
• children: ReactNode – contenu de la modale

Le composant Modal lit son état d’ouverture dans un contexte React (voir ModalContext). Assure-toi que ton application est enveloppée par un Provider compatible.

Installation (lib publiée)

npm install @kyssii_gtml/modal-lib-p14

Dans une application consommatrice, importe le CSS distribué et le composant:

import { useState } from 'react'
import { Modal } from '@kyssii_gtml/modal-lib-p14'
import '@kyssii_gtml/modal-lib-p14/dist/modal-lib-p14.css'

Remarque: la version publiée exporte le Modal. Le Provider n’est pas exporté par défaut dans l’index actuel du bundle. Tu peux implémenter un provider minimal similaire à celui de la démo (voir ci-dessous) ou intégrer la logique d’ouverture/fermeture dans ton propre contexte applicatif.

Démo locale de ce repo

Prérequis (peer deps):

• react ^18 || ^19
• react-dom ^18 || ^19
• (facultatif pour la démo actuelle) react-router-dom si tu utilises le provider avancé

Installation des dépendances:

npm install

Lancer la démo en mode développement (watch, serveur local, livereload):

npm run dev:demo

Servir les fichiers statiques après build de la démo:

npm run serve   # lance: npm run build:demo && serve demo

Build de la démo uniquement:

npm run build:demo

Build de la librairie (bundle ESM/CJS + CSS extrait vers dist/):

npm run build

• JS de la démo: demo/dist/bundle.js
• CSS démo extrait: demo/dist/modal-lib-demo.css
• JS librairie: dist/modal-lib.esm.js, dist/modal-lib.cjs.js
• CSS librairie extrait: dist/modal-lib-p14.css

Dans rollup.demo.config.js, le CSS est extrait via PostCSS avec extract: 'demo/dist/modal-lib-demo.css'.

Exemple de démo (provider minimal)

La démo inclut un provider minimal sans react-router pour contrôler l’ouverture par identifiant:

// demo/main.jsx (extrait)
import * as React from 'react'
import { useState, createContext, useContext } from 'react'
import ReactDOM from 'react-dom/client'
import Modal from '../src/modal/view/modal'
import { ModalContext } from '../src/modal/context/modal-context'
import { useModal } from '../src/modal/context/modal-context'
import '../src/modal/assets/style/modal.scss'

const ModalProvider = ({ children }) => {
  const [modals, setModals] = useState({})
  const openModal = (id) => setModals((m) => ({ ...m, [id]: true }))
  const closeModal = (id) => setModals((m) => ({ ...m, [id]: false }))
  const closeAllModals = () => setModals({})
  return (
    <ModalContext.Provider value={{ modals, openModal, closeModal, closeAllModals }}>
      {children}
    </ModalContext.Provider>
  )
}

const AppContent = () => {
  const { openModal } = useModal()
  return (
    <div>
      <h1>Demo Modal</h1>
      <button onClick={() => openModal('employeeCreated')}>Open Modal</button>
      <Modal modalId="employeeCreated" title="Employees">
        <p>Employee Created!</p>
      </Modal>
    </div>
  )
}

const App = () => (
  <ModalProvider>
    <AppContent />
  </ModalProvider>
)

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

Scripts NPM disponibles

• build – build de la librairie (dist/)
• build:demo – build de la démo (demo/dist/)
• dev:demo – watch + serveur de dev Rollup sur http://localhost:3005
• serve – build de la démo puis serveur statique sur le dossier demo/

Arborescence

modal-lib/
├── demo/                   # Projet de démonstration
│   ├── index.html          # Charge ./dist/bundle.js et modal-lib-demo.css
│   └── main.jsx            # Code de la démo (+ provider minimal)
├── src/
│   └── modal/
│       ├── assets/style/   # SCSS/CSS source des styles
│       ├── context/        # ModalContext, ModalProvider (avancé)
│       └── view/           # Composant Modal et index d’export
├── dist/                   # Bundles de la librairie (build)
├── rollup.config.js        # Build librairie (CSS: extract -> dist/modal-lib-p14.css)
├── rollup.demo.config.js   # Build + serveur démo (CSS: extract -> demo/dist/modal-lib-demo.css)
└── package.json

Notes importantes

• La démo utilise un Provider « minimal » sans react-router. Le Provider avancé (src/modal/context/modal-provider.jsx) dépend de react-router et ferme toutes les modales lors d’un changement de route.
• Si tu consommes la lib publiée, assure-toi d’exporter ou de reconstituer un Provider compatible avec l’API attendue par Modal ({ modals, openModal, closeModal, closeAllModals }).
• Si tu vois un 404 en démo, assure-toi d’utiliser npm run dev:demo ou npm run serve (qui build + sert la démo). Ouvrir index.html en file:// ne fonctionnera pas.

Auteur

KANDO Jason — Parcours Développeur Front‑End – OpenClassrooms

Licence

MIT