@whitemordred/react-native-bootstrap5/CONTRIBUTING.md

A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode

# Guide de Contribution

Merci de votre intérêt pour contribuer à React Native Bootstrap 5 ! Ce guide vous aidera à bien démarrer.

## 🚀 Configuration de l'environnement de développement

### Prérequis

- Node.js >= 16.0.0
- npm >= 8.0.0 ou yarn >= 1.22.0
- React Native development environment configuré

### Installation

1. Fork le repository
2. Clone votre fork :
   ```bash
   git clone https://github.com/votre-username/react-native-bootstrap5.git
   cd react-native-bootstrap5
   ```

3. Installez les dépendances :
   ```bash
   npm install --legacy-peer-deps
   ```

4. Lancez le build en mode watch :
   ```bash
   npm run watch
   ```

## 🏗️ Structure du projet

```
src/
├── components/          # Composants React Native
│   ├── Button.tsx
│   ├── Card.tsx
│   ├── Form.tsx
│   ├── Grid.tsx
│   ├── Modal.tsx
│   ├── Badge.tsx
│   ├── Alert.tsx
│   ├── Spinner.tsx
│   └── __tests__/       # Tests unitaires
├── theme/               # Système de thème
│   ├── ThemeProvider.tsx
│   └── defaultTheme.ts
└── index.ts             # Point d'entrée principal

example/                 # Application d'exemple
├── App.tsx

lib/                     # Build output (généré)
```

## 🧪 Tests

### Lancer les tests
```bash
npm test

# Tests en mode watch
npm test -- --watch

# Tests avec coverage
npm test -- --coverage
```

### Écrire des tests

Les tests sont écrits avec Jest et React Native Testing Library. Exemple :

```tsx
import React from 'react';
import { render } from '@testing-library/react-native';
import { Button } from '../Button';
import { BootstrapProvider } from '../../theme/ThemeProvider';

const renderWithProvider = (component: React.ReactElement) => {
  return render(
    <BootstrapProvider>
      {component}
    </BootstrapProvider>
  );
};

describe('Button Component', () => {
  it('renders correctly', () => {
    const { getByText } = renderWithProvider(
      <Button>Test Button</Button>
    );
    
    expect(getByText('Test Button')).toBeTruthy();
  });
});
```

## 🎨 Ajout de nouveaux composants

### 1. Créer le composant

Créez un nouveau fichier dans `src/components/` :

```tsx
import React from 'react';
import { View, ViewStyle } from 'react-native';
import { useTheme } from '../theme/ThemeProvider';

interface MonComposantProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary';
  style?: ViewStyle;
}

export const MonComposant: React.FC<MonComposantProps> = ({
  children,
  variant = 'primary',
  style,
}: MonComposantProps) => {
  const { theme, currentColors } = useTheme();

  const componentStyles: ViewStyle = {
    // Styles basés sur le thème
    backgroundColor: currentColors[variant],
    padding: theme.spacing[3],
    borderRadius: theme.borderRadius.base,
  };

  return (
    <View style={[componentStyles, style]}>
      {children}
    </View>
  );
};
```

### 2. Ajouter les tests

Créez `src/components/__tests__/MonComposant.test.tsx` :

```tsx
import React from 'react';
import { render } from '@testing-library/react-native';
import { MonComposant } from '../MonComposant';
import { BootstrapProvider } from '../../theme/ThemeProvider';

// Tests...
```

### 3. Exporter le composant

Ajoutez l'export dans `src/index.ts` :

```tsx
export { MonComposant } from './components/MonComposant';
export type { MonComposantProps } from './components/MonComposant';
```

### 4. Documenter

Ajoutez la documentation dans le README.md et créez un exemple d'utilisation.

## 🎯 Standards de code

### TypeScript

- Utilisez TypeScript strict
- Définissez des interfaces pour toutes les props
- Utilisez des types génériques quand approprié
- Exportez les types pour les utilisateurs

### Style

- Utilisez le hook `useTheme` pour accéder au thème
- Préférez `ViewStyle`, `TextStyle` aux styles inline
- Utilisez `theme.spacing`, `theme.colors`, etc.
- Supportez les props `style` personnalisées

### Performance

- Utilisez `React.memo` pour les composants complexes
- Évitez les recalculs inutiles avec `useMemo`
- Utilisez `StyleSheet.create` quand possible

## 📝 Convention de nommage

- Composants : PascalCase (`Button`, `FormControl`)
- Props : camelCase (`variant`, `isDisabled`)
- Fichiers : PascalCase pour les composants (`Button.tsx`)
- Types : PascalCase avec suffixe (`ButtonProps`, `ThemeMode`)

## 🔄 Workflow Git

### Branches

- `main` : version stable
- `develop` : développement en cours
- `feature/nom-feature` : nouvelles fonctionnalités
- `fix/nom-bug` : corrections de bugs

### Commits

Utilisez des messages de commit descriptifs :

```
feat: add Dropdown component with keyboard navigation
fix: resolve Button loading state accessibility issue
docs: update installation instructions
test: add Modal component unit tests
```

### Pull Requests

1. Créez une branche depuis `develop`
2. Implémentez votre fonctionnalité avec tests
3. Vérifiez que tous les tests passent
4. Mettez à jour la documentation si nécessaire
5. Créez une PR vers `develop`

Template de PR :
```markdown
## Description
Brève description des changements

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

## Tests
- [ ] Tests unitaires ajoutés/mis à jour
- [ ] Tests manuels effectués

## Checklist
- [ ] Mon code respecte les standards du projet
- [ ] J'ai effectué une revue de mon propre code
- [ ] J'ai commenté le code complexe
- [ ] J'ai mis à jour la documentation
- [ ] Mes changements ne génèrent pas de nouveaux warnings
- [ ] J'ai ajouté des tests qui prouvent que ma correction est efficace
- [ ] Les tests nouveaux et existants passent localement
```

## 🐛 Signaler des bugs

Utilisez le template d'issue GitHub :

```markdown
**Description du bug**
Description claire et concise du problème.

**Reproduction**
Étapes pour reproduire le comportement :
1. Aller à '...'
2. Cliquer sur '....'
3. Faire défiler vers '....'
4. Voir l'erreur

**Comportement attendu**
Description de ce qui devrait se passer.

**Screenshots**
Si applicable, ajoutez des screenshots.

**Environnement:**
 - OS: [e.g. iOS, Android]
 - Version React Native: [e.g. 0.72.0]
 - Version de la librairie: [e.g. 1.0.0]

**Contexte additionnel**
Toute autre information pertinente.
```

## 💡 Proposer des fonctionnalités

Avant d'implémenter une nouvelle fonctionnalité majeure :

1. Créez une issue de discussion
2. Décrivez le besoin et la solution proposée
3. Attendez les retours de la communauté
4. Commencez l'implémentation une fois approuvée

## 📚 Ressources

- [Bootstrap 5 Documentation](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
- [React Native Documentation](https://reactnative.dev/docs/getting-started)
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
- [Testing Library React Native](https://callstack.github.io/react-native-testing-library/)

## 🤝 Code de conduite

En participant à ce projet, vous acceptez de respecter notre code de conduite. Soyez respectueux, inclusif et professionnel dans toutes vos interactions.

## ❓ Questions

Si vous avez des questions, n'hésitez pas à :

- Créer une issue GitHub
- Rejoindre les discussions
- Contacter les mainteneurs

Merci pour votre contribution ! 🎉