npm package: @kyssiii_gtml/modal-lib-p14
Description: Package-modal_P14
Author: KANDO
Latest version: 1.0.4

# @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)

```bash
npm install @kyssii_gtml/modal-lib-p14
```

Dans une application consommatrice, importe le CSS distribué et le composant:

```jsx
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:

```bash
npm install
```

Lancer la démo en mode développement (watch, serveur local, livereload):

```bash
npm run dev:demo
```

Servir les fichiers statiques après build de la démo:

```bash
npm run serve   # lance: npm run build:demo && serve demo
```

Build de la démo uniquement:

```bash
npm run build:demo
```

Build de la librairie (bundle ESM/CJS + CSS extrait vers `dist/`):

```bash
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:

```jsx
// 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