WalletTracker/CONTRIBUTING.md

🤝 Guide de contribution - WalletTracker

Merci de votre intérêt pour contribuer à WalletTracker ! Ce guide vous aidera à démarrer.

📋 Table des matières

• Code de conduite
• Comment contribuer
• Structure du projet
• Standards de code
• Process de développement
• Soumettre une Pull Request

Code de conduite

En participant à ce projet, vous acceptez de respecter notre code de conduite :

• Soyez respectueux et inclusif
• Acceptez les critiques constructives
• Concentrez-vous sur ce qui est le mieux pour la communauté
• Faites preuve d'empathie envers les autres membres

Comment contribuer

Signaler un bug

1. Vérifiez que le bug n'a pas déjà été signalé dans les Issues
2. Créez une nouvelle issue avec le template "Bug Report"
3. Incluez :
   • Description claire du problème
   • Steps to reproduce
   • Comportement attendu vs actuel
   • Screenshots si applicable
   • Version de l'app et de l'OS

Proposer une fonctionnalité

1. Vérifiez que la fonctionnalité n'a pas déjà été proposée
2. Créez une issue avec le template "Feature Request"
3. Expliquez :
   • Le problème que cela résout
   • La solution proposée
   • Des alternatives considérées
   • Des mockups si applicable

Contribuer au code

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

Structure du projet

WalletTracker/
├── src/
│   ├── components/       # Composants réutilisables
│   ├── config/          # Configuration (Firebase, etc.)
│   ├── hooks/           # Custom hooks
│   ├── navigation/      # Configuration de navigation
│   ├── screens/         # Écrans de l'application
│   ├── services/        # Services (API, Firebase)
│   ├── types/           # Types TypeScript
│   └── utils/           # Fonctions utilitaires
├── assets/              # Images, fonts, etc.
└── App.tsx             # Point d'entrée

Standards de code

TypeScript

• Utilisez TypeScript strict
• Définissez des types explicites
• Évitez any, utilisez unknown si nécessaire
• Utilisez des interfaces pour les objets

// ✅ Bon
interface User {
  id: string;
  email: string;
  displayName?: string;
}

// ❌ Mauvais
const user: any = { ... };

Naming Conventions

• Composants : PascalCase (LoginScreen, Button)
• Fonctions : camelCase (formatCurrency, getUserData)
• Constantes : UPPER_SNAKE_CASE (API_URL, MAX_RETRIES)
• Fichiers : Même nom que le composant principal

Composants React

• Utilisez des functional components avec hooks
• Déstructurez les props
• Utilisez TypeScript pour typer les props

// ✅ Bon
interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary';
}

export const Button: React.FC<ButtonProps> = ({ title, onPress, variant = 'primary' }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
};

Styles

• Utilisez StyleSheet.create()
• Groupez les styles par composant
• Utilisez les constantes pour les couleurs et espacements

import { COLORS, SPACING } from '../utils/constants';

const styles = StyleSheet.create({
  container: {
    padding: SPACING.lg,
    backgroundColor: COLORS.white
  }
});

Imports

Organisez les imports dans cet ordre :

1. React et React Native
2. Bibliothèques tierces
3. Composants locaux
4. Services et utils
5. Types
6. Styles

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

import { Button } from '../components/Button';
import { authService } from '../services/authService';
import { formatDate } from '../utils/helpers';
import { User } from '../types';

import styles from './styles';

Commentaires

• Commentez le "pourquoi", pas le "quoi"
• Utilisez JSDoc pour les fonctions publiques
• Évitez les commentaires évidents

/**
 * Calcule la prochaine date de paiement basée sur la fréquence
 * @param currentDate - Date actuelle du paiement
 * @param frequency - Fréquence de l'abonnement
 * @returns La prochaine date de paiement
 */
export const calculateNextPaymentDate = (
  currentDate: Date,
  frequency: SubscriptionFrequency
): Date => {
  // ...
};

Process de développement

1. Setup

git clone https://github.com/yourusername/wallettracker.git
cd wallettracker
npm install

2. Créer une branche

git checkout -b feature/nom-de-la-fonctionnalite

Types de branches :

• feature/ : Nouvelle fonctionnalité
• fix/ : Correction de bug
• refactor/ : Refactoring
• docs/ : Documentation
• test/ : Tests

3. Développer

• Écrivez du code propre et testé
• Suivez les standards de code
• Testez sur iOS et Android
• Vérifiez qu'il n'y a pas d'erreurs TypeScript

4. Tester

# Lancer l'app
npm start

# Vérifier TypeScript
npx tsc --noEmit

# Linter (si configuré)
npm run lint

5. Committer

Utilisez des messages de commit clairs :

git commit -m "feat: add dark mode support"
git commit -m "fix: resolve crash on transaction deletion"
git commit -m "docs: update README with new features"

Format des commits :

• feat: Nouvelle fonctionnalité
• fix: Correction de bug
• docs: Documentation
• style: Formatage, pas de changement de code
• refactor: Refactoring
• test: Ajout de tests
• chore: Maintenance

Soumettre une Pull Request

Checklist avant soumission

• Le code compile sans erreurs
• Les tests passent
• Le code suit les standards du projet
• La documentation est à jour
• Les commits sont bien formatés
• La PR a une description claire

Template de PR

## Description
Brève description des changements

## Type de changement
- [ ] Bug fix
- [ ] Nouvelle fonctionnalité
- [ ] Breaking change
- [ ] Documentation

## Comment tester
1. Étape 1
2. Étape 2
3. Résultat attendu

## Screenshots (si applicable)
[Ajouter des screenshots]

## Checklist
- [ ] Code testé sur iOS
- [ ] Code testé sur Android
- [ ] Documentation mise à jour
- [ ] Pas de console.log

Review process

1. Un mainteneur reviewera votre PR
2. Des changements peuvent être demandés
3. Une fois approuvée, la PR sera mergée
4. Votre contribution sera ajoutée au CHANGELOG

🎨 Design Guidelines

UI/UX

• Suivez les guidelines Material Design (Android) et Human Interface (iOS)
• Utilisez des animations fluides
• Assurez l'accessibilité (contraste, taille de texte)
• Testez sur différentes tailles d'écran

Couleurs

Utilisez les couleurs définies dans src/utils/constants.ts

Espacements

Utilisez les espacements standardisés (8, 12, 16, 24, 32px)

🧪 Tests

Tests manuels

Utilisez le guide dans TESTING.md

Tests automatisés (à venir)

npm test

📝 Documentation

• Mettez à jour le README si nécessaire
• Documentez les nouvelles fonctionnalités
• Ajoutez des exemples d'utilisation
• Mettez à jour le CHANGELOG

🐛 Debugging

Outils utiles

• React Native Debugger
• Flipper
• Reactotron
• Firebase Console

Logs

// Développement
console.log('Debug info');

// Production
// Utilisez un service de logging (Sentry, etc.)

💡 Bonnes pratiques

Performance

• Utilisez React.memo pour les composants lourds
• Évitez les re-renders inutiles
• Optimisez les images
• Utilisez FlatList pour les longues listes

Sécurité

• Ne hardcodez jamais de secrets
• Validez toutes les entrées utilisateur
• Utilisez HTTPS uniquement
• Suivez les règles de sécurité Firebase

Accessibilité

• Ajoutez des labels accessibles
• Testez avec VoiceOver/TalkBack
• Assurez un contraste suffisant
• Supportez les grandes tailles de texte

🆘 Besoin d'aide ?

• Consultez la documentation
• Posez vos questions dans les Discussions
• Rejoignez notre Discord (si applicable)

🙏 Remerciements

Merci à tous les contributeurs qui rendent ce projet possible !

---

Happy coding! 🚀