Arthur Lempereur
e99d00b83b
- Add DEPLOYMENT.md with complete deployment instructions - Add CONTRIBUTING.md for contributors - Add CHANGELOG.md to track versions - Add .env.example for environment variables
382 lines
8.6 KiB
Markdown
382 lines
8.6 KiB
Markdown
# 🤝 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! 🚀**
|