@librairie/ui-react

Une bibliothèque de composants React moderne et élégante avec des toasts, modals, alertes de confirmation et plus encore. Construite avec TypeScript et Tailwind CSS.

✨ Fonctionnalités

• 🎯 Toast notifications - Notifications élégantes et personnalisables
• 🎪 Modals - Boîtes de dialogue flexibles et réactives
• ⚠️ Alertes de confirmation - Confirmations utilisateur intuitives
• 🎨 Personnalisation complète - Props className pour chaque élément
• 📱 Responsive - Compatible mobile et desktop
• ⚡ Performances optimisées - Bundle léger et tree-shakable
• 🔧 TypeScript - Support complet avec types intégrés
• 🎭 Animations fluides - Transitions et animations CSS natives

🚀 Installation

npm install @librairie/ui-react
# ou
yarn add @librairie/ui-react
# ou
pnpm add @librairie/ui-react

📋 Prérequis

• React >= 17 < 20
• React DOM >= 17 < 20

🎯 Utilisation rapide

Configuration de base

Enveloppez votre application avec le ToastProvider et importez les styles :

import React from 'react';
import { ToastProvider } from '@librairie/ui-react';

function App() {
  return (
    <ToastProvider 
      position="top-right"
      containerClassName="custom-toast-container"
    >
      <YourApp />
    </ToastProvider>
  );
}

Toast Notifications

import React from 'react';
import { useToast } from '@librairie/ui-react';

function MyComponent() {
  const { addToast } = useToast();

  const showSuccessToast = () => {
    addToast({
      type: 'success',
      title: 'Succès !',
      message: 'Votre action a été effectuée avec succès.',
      duration: 5000
    });
  };

  const showCustomToast = () => {
    addToast({
      type: 'info',
      title: 'Information',
      message: 'Toast avec styles personnalisés',
      duration: 5000,
      className: 'my-custom-toast shadow-2xl',
      titleClassName: 'font-bold text-blue-800',
      messageClassName: 'text-blue-600',
      closeButtonClassName: 'text-blue-500 hover:text-blue-700'
    });
  };

  return (
    <div>
      <button onClick={showSuccessToast}>Toast Succès</button>
      <button onClick={showCustomToast}>Toast Personnalisé</button>
    </div>
  );
}

Modal avec styles personnalisés

import React, { useState } from 'react';
import { Modal } from '@librairie/ui-react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button 
        onClick={() => setIsOpen(true)}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Ouvrir Modal
      </button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Ma Modal Personnalisée"
        size="lg"
        className="border-4 border-blue-500 rounded-2xl"
        backdropClassName="bg-purple-900 bg-opacity-75"
        headerClassName="bg-gradient-to-r from-blue-500 to-purple-600 text-white"
        titleClassName="text-white font-bold"
        contentClassName="bg-gray-50"
        closeButtonClassName="text-white hover:text-gray-300"
      >
        <div className="space-y-4">
          <p className="text-gray-700">Contenu personnalisé de votre modal...</p>
          <div className="flex justify-end">
            <button 
              onClick={() => setIsOpen(false)}
              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
            >
              Fermer
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

Alerte de Confirmation stylée

import React from 'react';
import { useConfirm, ConfirmAlert } from '@librairie/ui-react';

function MyComponent() {
  const { confirm, confirmProps } = useConfirm();

  const handleDelete = async () => {
    const result = await confirm(
      'Êtes-vous sûr de vouloir supprimer cet élément ?',
      {
        title: 'Confirmer la suppression',
        type: 'danger',
        confirmText: 'Supprimer',
        cancelText: 'Annuler'
      }
    );

    if (result) {
      console.log('Élément supprimé !');
    }
  };

  const handleCustomDelete = async () => {
    const result = await confirm(
      'Cette action est irréversible. Continuer ?',
      {
        title: 'Attention !',
        type: 'danger',
        confirmText: 'Oui, supprimer',
        cancelText: 'Annuler'
      }
    );

    if (result) {
      console.log('Suppression confirmée !');
    }
  };

  return (
    <div>
      <button onClick={handleDelete}>Supprimer</button>
      <button 
        onClick={handleCustomDelete}
        className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
      >
        Supprimer (Personnalisé)
      </button>
      
      <ConfirmAlert 
        {...confirmProps} 
        className="border-2 border-red-500"
        titleClassName="text-red-800 font-bold"
        messageClassName="text-gray-600 italic"
        iconClassName="bg-red-100"
        buttonsClassName="space-x-4"
        confirmButtonClassName="bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 shadow-lg"
        cancelButtonClassName="border-2 border-gray-400 hover:bg-gray-100"
      />
    </div>
  );
}

📚 Documentation complète des composants

ToastProvider

Le provider principal pour gérer les toasts dans votre application.

Props

| Prop | Type | Défaut | Description | |------|------|---------|-------------| | children | ReactNode | - | Les composants enfants | | position | 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' | 'top-right' | Position des toasts | | containerClassName | string | '' | Classes CSS pour le conteneur des toasts |

useToast Hook

Hook pour ajouter et gérer les toasts.

Méthodes

• addToast(toast) - Ajoute un nouveau toast
• removeToast(id) - Supprime un toast par son ID

Options de toast

| Prop | Type | Défaut | Description | |------|------|---------|-------------| | type | 'success' \| 'error' \| 'warning' \| 'info' | 'info' | Type de toast | | title | string | - | Titre du toast (optionnel) | | message | string | - | Message du toast | | duration | number | 5000 | Durée d'affichage en ms | | className | string | '' | Classes CSS pour le conteneur du toast | | titleClassName | string | '' | Classes CSS pour le titre | | messageClassName | string | '' | Classes CSS pour le message | | closeButtonClassName | string | '' | Classes CSS pour le bouton fermer |

Modal

Composant modal flexible et personnalisable.

Props

| Prop | Type | Défaut | Description | |------|------|---------|-------------| | isOpen | boolean | - | État d'ouverture de la modal | | onClose | () => void | - | Fonction appelée à la fermeture | | title | string | - | Titre de la modal | | children | ReactNode | - | Contenu de la modal | | size | 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Taille de la modal | | showCloseButton | boolean | true | Afficher le bouton de fermeture | | closeOnBackdropClick | boolean | true | Fermer en cliquant sur l'arrière-plan | | closeOnEscape | boolean | true | Fermer avec la touche Échap | | className | string | '' | Classes CSS pour la modal | | backdropClassName | string | '' | Classes CSS pour l'arrière-plan | | headerClassName | string | '' | Classes CSS pour l'en-tête | | titleClassName | string | '' | Classes CSS pour le titre | | contentClassName | string | '' | Classes CSS pour le contenu | | closeButtonClassName | string | '' | Classes CSS pour le bouton de fermeture |

ConfirmAlert

Composant d'alerte de confirmation.

Props

| Prop | Type | Défaut | Description | |------|------|---------|-------------| | isOpen | boolean | - | État d'ouverture de l'alerte | | title | string | 'Confirmation' | Titre de l'alerte | | message | string | - | Message de confirmation | | confirmText | string | 'Confirmer' | Texte du bouton de confirmation | | cancelText | string | 'Annuler' | Texte du bouton d'annulation | | type | 'danger' \| 'warning' \| 'info' | 'info' | Type d'alerte | | onConfirm | () => void | - | Fonction appelée lors de la confirmation | | onCancel | () => void | - | Fonction appelée lors de l'annulation | | className | string | '' | Classes CSS pour l'alerte | | iconClassName | string | '' | Classes CSS pour l'icône | | titleClassName | string | '' | Classes CSS pour le titre | | messageClassName | string | '' | Classes CSS pour le message | | buttonsClassName | string | '' | Classes CSS pour le conteneur des boutons | | confirmButtonClassName | string | '' | Classes CSS pour le bouton de confirmation | | cancelButtonClassName | string | '' | Classes CSS pour le bouton d'annulation |

useConfirm Hook

Hook pour gérer les confirmations de manière programmatique.

Méthodes

• confirm(message, options) - Affiche une confirmation et retourne une Promise

Options

| Prop | Type | Défaut | Description | |------|------|---------|-------------| | title | string | 'Confirmation' | Titre de la confirmation | | confirmText | string | 'Confirmer' | Texte du bouton de confirmation | | cancelText | string | 'Annuler' | Texte du bouton d'annulation | | type | 'danger' \| 'warning' \| 'info' | 'info' | Type de confirmation |

🎨 Exemples de personnalisation

Thème sombre

// Toast sombre
addToast({
  type: 'info',
  title: 'Mode sombre',
  message: 'Mode sombre activé',
  className: 'bg-gray-800 text-white border-l-blue-400',
  titleClassName: 'text-white font-semibold',
  messageClassName: 'text-gray-200',
  closeButtonClassName: 'text-gray-400 hover:text-white'
});

// Modal sombre
<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Modal Sombre"
  className="bg-gray-800 text-white border border-gray-600"
  headerClassName="border-gray-700 bg-gray-800"
  titleClassName="text-white"
  contentClassName="bg-gray-800 text-white"
  closeButtonClassName="text-gray-400 hover:text-white"
>
  <p className="text-gray-300">Contenu de la modal sombre...</p>
</Modal>

Style minimaliste

// Toast minimaliste
addToast({
  type: 'success',
  message: 'Action réussie',
  className: 'bg-white border border-gray-200 shadow-sm rounded-lg',
  messageClassName: 'text-gray-600 text-sm font-medium',
  closeButtonClassName: 'text-gray-400 hover:text-gray-600'
});

Style coloré et moderne

// Toast avec gradient
addToast({
  type: 'info',
  title: 'Information',
  message: 'Mise à jour disponible',
  className: 'bg-gradient-to-r from-blue-500 to-purple-600 text-white border-none shadow-xl',
  titleClassName: 'text-white font-bold',
  messageClassName: 'text-blue-100',
  closeButtonClassName: 'text-blue-200 hover:text-white'
});

// Modal avec effets spéciaux
<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Modal Moderne"
  className="bg-white backdrop-blur-lg bg-opacity-95 shadow-2xl border-0 rounded-3xl"
  backdropClassName="bg-gradient-to-br from-purple-900 to-blue-900 bg-opacity-50 backdrop-blur-sm"
  headerClassName="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-t-3xl"
  titleClassName="text-white font-bold text-xl"
  contentClassName="bg-white bg-opacity-90"
>
  <div className="space-y-4">
    <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl">
      <p className="text-gray-700">Contenu avec style moderne...</p>
    </div>
  </div>
</Modal>

🔧 Configuration Webpack (si nécessaire)

Si vous utilisez une configuration Webpack personnalisée, assurez-vous d'inclure le support CSS :

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
};

🛠️ Configuration Tailwind CSS

Si vous voulez étendre ou personnaliser les styles Tailwind utilisés par la librairie :

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@librairie/ui-react/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      // Vos personnalisations
      animation: {
        'fade-in': 'fadeIn 0.2s ease-in-out',
        'slide-in': 'slideIn 0.3s ease-out',
        'slide-out': 'slideOut 0.3s ease-in'
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        slideIn: {
          '0%': { transform: 'translateX(100%)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' }
        },
        slideOut: {
          '0%': { transform: 'translateX(0)', opacity: '1' },
          '100%': { transform: 'translateX(100%)', opacity: '0' }
        }
      }
    }
  },
  plugins: []
};

📦 Exports disponibles

La librairie exporte les éléments suivants :

import {
  // Composants
  Toast,
  Modal,
  ConfirmAlert,
  
  // Providers et Hooks
  ToastProvider,
  useToast,
  useConfirm,
  
  // Types TypeScript
  ToastProps,
  ModalProps,
  ConfirmAlertProps
} from '@librairie/ui-react';

🔍 Dépannage

Les styles ne s'appliquent pas

Assurez-vous d'importer le fichier CSS :

import '@librairie/ui-react/dist/styles.css';

Erreur "useToast must be used within a ToastProvider"

Vérifiez que votre composant est bien enveloppé dans le ToastProvider :

// ✅ Correct
<ToastProvider>
  <MyComponent />
</ToastProvider>

// ❌ Incorrect
<MyComponent /> // useToast() appelé ici sans provider

Problèmes de compatibilité avec React 18+

La librairie est compatible avec React 17-19. Si vous utilisez React 18+, assurez-vous d'avoir les bonnes versions des peer dependencies.

🤝 Contribution

Les contributions sont les bienvenues ! Pour contribuer :

1. Forkez le projet
2. Créez une branche pour votre fonctionnalité (git checkout -b feature/nouvelle-fonctionnalite)
3. Committez vos changements (git commit -m 'Ajout d'une nouvelle fonctionnalité')
4. Poussez vers la branche (git push origin feature/nouvelle-fonctionnalite)
5. Ouvrez une Pull Request

Scripts de développement

# Build de la librairie
npm run build

# Préparer la publication
npm run prepare

🐛 Rapport de bugs

Si vous trouvez un bug, merci d'ouvrir une issue avec :

• Description détaillée du problème
• Étapes pour reproduire le bug
• Comportement attendu vs comportement actuel
• Version de React utilisée
• Configuration Webpack/bundler (si applicable)
• Navigateur et version

📄 Licence

MIT © Fatou Niang

🙏 Remerciements

• React - La bibliothèque UI
• Tailwind CSS - Le framework CSS
• Webpack - Le bundler
• TypeScript - Pour le typage statique

📈 Changelog

v1.0.0

• 🎉 Version initiale
• ✨ Composants Toast, Modal et ConfirmAlert
• 🎨 Support complet de la personnalisation CSS
• 📱 Design responsive
• 🔧 Support TypeScript complet
• 🎭 Animations fluides

Développé par Fatou Niang