@mfn-lib/mfn-ui-lib

Une bibliothèque Angular moderne pour la gestion des notifications (Toasts et Alerts).

Caractéristiques

• 🎨 Design moderne avec Tailwind CSS
• 🚀 Composants standalone pour une intégration facile
• 📍 9 positions différentes pour les notifications
• 🎯 4 types de notifications prédéfinis (success, error, warning, info)
• ⚡ Performances optimisées avec des pipes personnalisés
• 🌗 Support du mode sombre
• ♿ Accessible (ARIA)
• 🔄 Animations fluides

Installation

npm install @mfn-lib/mfn-ui-lib

Dépendances requises

Cette bibliothèque nécessite :

• Angular >= 18.0.0
• Tailwind CSS

Configuration

1. Configuration de Tailwind CSS

Ajoutez les chemins de la bibliothèque à votre fichier tailwind.config.js :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ... vos chemins existants
    "./node_modules/@librairie/mfn-lib/**/*.{js,ts}"
  ],
  // ... reste de votre configuration
};

2. Importation des styles (optionnel)

Si vous souhaitez personnaliser les styles, vous pouvez créer un fichier CSS :

/* styles.css */
.mfn-toast {
  /* Vos styles personnalisés */
}

.mfn-alert {
  /* Vos styles personnalisés */
}

Utilisation

Toast

import { ToastService } from '@mfn-lib/mfn-ui-lib';

@Component({
  // ...
})
export class AppComponent {
  constructor(private toastService: ToastService) {}

  showToast() {
    // Utilisation simple
    this.toastService.success('Opération réussie !');

    // Avec titre
    this.toastService.error('Une erreur est survenue', 'Erreur');

    // Configuration avancée
    this.toastService.show({
      title: 'Titre personnalisé',
      message: 'Message détaillé',
      type: 'info',
      duration: 5000,
      position: 'top-center'
    });
  }
}

Alert

import { AlertService } from '@mfn-lib/mfn-ui-lib';

@Component({
  // ...
})
export class AppComponent {
  constructor(private alertService: AlertService) {}

  showAlert() {
    // Utilisation simple
    this.alertService.info('Information importante');

    // Avec titre
    this.alertService.warning('Attention', 'Avertissement');

    // Configuration avancée
    this.alertService.show({
      title: 'Titre',
      message: 'Message',
      type: 'success',
      position: 'middle-center',
      dismissible: true
    });
  }
}

API

Interfaces

type Position = 
  | 'top-left' | 'top-center' | 'top-right'
  | 'middle-left' | 'middle-center' | 'middle-right'
  | 'bottom-left' | 'bottom-center' | 'bottom-right';

type Type = 'success' | 'error' | 'warning' | 'info' | 'default';

export interface ToastData {
  id?: string;
  title?: string;
  message: string;
  duration?: number;
  type?: Type;
  backgroundColor?: string;
  textColor?: string;
  position?: Position;

}

interface AlertData {
  id?: string;
  title?: string;
  message: string;
  type?: Type;
  position?: Position;
  dismissible?: boolean;
}

Services

ToastService

• show(config: ToastConfig): string
• success(message: string, title?: string, options?: Partial<ToastConfig>): string
• error(message: string, title?: string, options?: Partial<ToastConfig>): string
• warning(message: string, title?: string, options?: Partial<ToastConfig>): string
• info(message: string, title?: string, options?: Partial<ToastConfig>): string

AlertService

• show(config: AlertConfig): string
• success(message: string, title?: string, options?: Partial<AlertConfig>): string
• error(message: string, title?: string, options?: Partial<AlertConfig>): string
• warning(message: string, title?: string, options?: Partial<AlertConfig>): string
• info(message: string, title?: string, options?: Partial<AlertConfig>): string
• dismiss(id: string): void

Contribution

Les contributions sont les bienvenues ! Pour contribuer :

1. Forkez le repository
2. Créez votre branche (git checkout -b feature/AmazingFeature)
3. Committez vos changements (git commit -m 'Add some AmazingFeature')
4. Poussez vers la branche (git push origin feature/AmazingFeature)
5. Ouvrez une Pull Request

Licence

none

Support

Pour toute question ou problème, veuillez ouvrir une issue.