# 🤝 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](#code-de-conduite)
- [Comment contribuer](#comment-contribuer)
- [Structure du projet](#structure-du-projet)
- [Standards de code](#standards-de-code)
- [Process de développement](#process-de-développement)
- [Soumettre une Pull Request](#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](https://github.com/yourusername/wallettracker/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

```typescript
// ✅ 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

```typescript
// ✅ 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

```typescript
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

```typescript
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

```typescript
/**
 * 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

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

### 2. Créer une branche

```bash
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

```bash
# 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 :

```bash
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

```markdown
## 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)

```bash
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

```typescript
// 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](./README.md)
- Posez vos questions dans les [Discussions](https://github.com/yourusername/wallettracker/discussions)
- Rejoignez notre [Discord](https://discord.gg/wallettracker) (si applicable)

## 🙏 Remerciements

Merci à tous les contributeurs qui rendent ce projet possible !

---

**Happy coding! 🚀**