diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..a9f7965 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +access=public \ No newline at end of file diff --git a/README.md b/README.md index e69de29..5e189ec 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,117 @@ +# @johanleroy/dialogue-lib + +🧩 **Dialogue-lib** est une bibliothèque Angular standalone permettant d'afficher des **alertes, confirmations ou dialogues personnalisés**, avec animations, timeout, icônes, backdrop et plus encore. + +> ✅ Compatible Angular 20+ • 📦 Utilisable en module partagé ou injecté globalement • 🎨 Style avec Tailwind (ou sans) + +--- + +## 📦 Installation + +```bash +npm install @johanleroy/dialogue-lib +``` + +# 🚀 Utilisation de base + +### 1. Import du provider dans main.ts + +```TS +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app/app.component'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { provideDialogues } from '@ton-nom/dialogue-lib'; + +bootstrapApplication(AppComponent, { + providers: [ + provideAnimations(), + provideDialogues() + ] +}); +``` + +### 2. Appel depuis un composant + +```TS +import { inject } from '@angular/core'; +import { DialogueService } from '@johanleroy/dialogue-lib'; + +export class HomeComponent { + + private dialogue = inject(DialogueService); + + showAlert() { + this.dialogue.confirm({ + title: 'Attention !', + message: 'Cette action est irréversible.', + icon: 'warning', + timeout: 5000 + }); + } + + async showConfirm() { + const confirmed = await this.dialogue.confirm({ + title: 'Supprimer l’élément ?', + message: 'Cette action ne peut pas être annulée.', + icon: 'trash' + }); + + if (confirmed) { + // Suppression... + } + } +} +``` + +# ⚙️ API + +- alert(options: DialogueOptions): void +- title (string) – Titre de l’alerte +- message (string) – Message affiché +- icon? (string) – Nom de l’icône (ex : info, warning, check, trash) +- timeout? (number) – Temps avant fermeture automatique (en ms) +- backdrop? (boolean) – Affiche un fond sombre (par défaut : true) +- confirm(options: DialogueOptions): Promise +- Comme alert, mais avec boutons Oui / Non +- Retourne true si l'utilisateur confirme. + +# 🎨 Personnalisation + +Tu peux override les styles avec Tailwind, ou créer un thème : + +```CSS +/* styles.css */ +.dialogue-container { + @apply bg-white rounded-xl shadow-xl p-4; +} +.dialogue-icon-warning { + @apply text-yellow-500; +} +``` + +# 📁 Structure recommandée + +- src/lib/dialogue.service.ts : gestion centrale +- src/components/alert.component.ts : composant standalone +- src/interfaces/options.ts : interface DialogueOptions +- src/styles/dialogue.css : classes Tailwind par défaut + +# 👨‍💻 Contribution + +Les PR sont les bienvenues ! Clone le repo : + +```bash +git clone https://github.com/ton-nom/dialogue-lib.git +cd dialogue-lib +npm install +npm run build +``` + +# 🐛 Bug ou idée d'amélioration ? + +Crée une issue ici ou contacte-moi directement. +Tu peux aussi me proposer des améliorations UX ou des nouveaux types de dialogues (ex : prompt, select...). + +# 📄 Licence + +MIT — © 2025 Johan Leroy \ No newline at end of file diff --git a/package.json b/package.json index 607c8ef..8691257 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,14 @@ { - "name": "dialogue-lib", + "name": "@johanleroy/dialogue-lib", "version": "1.0.0", "description": "Système de dialogue Angular standalone avec alertes personnalisables", "author": "Johan Leroy", "license": "MIT", + "keywords": ["angular", "dialogue", "alert", "confirm", "standalone"], + "repository": { + "type": "git", + "url": "https://github.com/JohanLeroy/dialogue-lib.git" + }, "devDependencies": { "@angular/compiler-cli": "^20.0.0", "ng-packagr": "next",