Les modules Blueprint Modular font partie de l'application Next.js. Il n'y a pas de package séparé par module (pas de pip install blueprint-modular-notification ni npm install blueprint-modular-notification) : on installe l'application une fois. Le module Notification ne requiert aucune dépendance externe (pas de base dédiée, pas d'API) : uniquement React (contexte + composants). Cette documentation décrit comment installer l'app pour utiliser les notifications, comment le module fonctionne, comment le paramétrer (filtre d'affichage dans Paramètres, règles de niveau) et comment l'implanter dans votre code (useNotificationHistory, addNotification).

Comment fonctionne le module Notification

Le module Notification repose sur un contexte React (NotificationHistoryContext) et une cloche dans le header déjà intégrée au layout. Les notifications sont stockées dans le navigateur (état React, pas de base de données). Chaque notification a un niveau (1 = haute priorité, 2 = moyenne, 3 = basse) déduit automatiquement à partir du type (info, success, warning, error) et du titre/page via getNotificationLevel. Le filtre dans Paramètres → Général permet de n'afficher que les niveaux suffisamment prioritaires (ex. uniquement erreurs, ou erreurs + succès).

Niveau 1 — Haute priorité (ex. erreurs).
Niveau 2 — Moyenne (ex. succès, avertissements).
Niveau 3 — Basse (ex. info, paramètres sauvegardés).

Installation et dépendances

Le module fait partie de l'application Next.js. Aucune dépendance externe (API, base) n'est requise pour les notifications : uniquement React (contexte + composants). Aucune variable d'environnement spécifique au module Notification.

Résumé des commandes (installer l'app et utiliser les notifications)

# Depuis la racine du projet
npm install
npm run dev

# L&apos;app est déjà enveloppée avec NotificationProviders (app/layout.tsx).
# Ouvrir l&apos;app puis utiliser la cloche dans le header pour voir l&apos;historique.

L'app est déjà enveloppée avec NotificationProviders dans app/layout.tsx, qui inclut NotificationHistoryProvider. Aucune variable d'environnement spécifique au module Notification.

Comment l'implanter dans votre code

Dans tout composant enfant du layout (déjà sous NotificationHistoryProvider) :

Utiliser useNotificationHistory() pour obtenir addNotification.
Appeler addNotification({ message, type?, title?, pageName? }). Le niveau (1–3) est déduit automatiquement via getNotificationLevel si vous ne fournissez pas level.

import { useNotificationHistory } from "@/contexts/NotificationHistoryContext";
import { getNotificationLevel } from "@/lib/notificationLevels";

function MyComponent() {
  const { addNotification } = useNotificationHistory();

  const handleSave = () => {
    addNotification({
      message: "Enregistrement réussi.",
      type: "success",
      title: "Sauvegarde",
      pageName: "Mon écran",
    });
  };

  const handleError = () => {
    const payload = { message: "Échec.", type: "error" as const, title: "Erreur", pageName: null };
    addNotification({ ...payload, level: getNotificationLevel(payload) });
  };

  return <button onClick={handleSave}>Sauvegarder</button>;
}

Paramétrage

Filtre d'affichage : dans Paramètres → Général, choisir le niveau minimum à afficher (1 = uniquement haute priorité, 2 = haute + moyenne, 3 = toutes).
Règles de niveau : définies dans lib/notificationLevels.ts (LEVEL_RULES). Vous pouvez adapter les règles (ex. titre "Paramètre sauvegardé" → niveau 3) selon vos besoins.

Fichiers principaux

contexts/NotificationHistoryContext.tsx — Provider et hook useNotificationHistory.
lib/notificationLevels.ts — getNotificationLevel, NOTIFICATION_LEVEL_LABELS.
components/NotificationBell.tsx — Cloche dans le header et panneau d'historique.
components/NotificationProviders.tsx — Wrapper (NotificationHistoryProvider + toast) utilisé dans app/layout.tsx.

Documentation — Notification