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

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

# React Native Bootstrap 5

Une librairie React Native complète qui réplique Bootstrap 5 avec support total des thèmes et modes dark/light.

## 🚀 Fonctionnalités

- ✅ **100% Bootstrap 5.3** - Tous les composants et fonctionnalités
- 🎨 **Système de thème complet** - Variables CSS surchargeables
- 🌙 **Mode Dark/Light** - Basé sur React Context API
- 🎯 **Toutes les couleurs Bootstrap** - Incluant indigo, pink, teal, etc.
- 🔥 **Variables RGB** - Support complet des opacités
- 💫 **Emphasis & Subtle** - Toutes les variantes Bootstrap 5.3
- 🛠️ **Utilities classes** - text-*, bg-*, border-*
- 📱 **Multi-plateforme** - iOS, Android, Web, Windows, macOS
- 🌐 **React Native Web** - Support complet pour le web
- 🖥️ **React Native Windows** - Compatible Windows 10/11
- 🍎 **React Native macOS** - Support natif macOS
- 🎯 **TypeScript** - Support complet TypeScript
- ⚡ **Performance** - Optimisé avec StyleSheet natif
- 🔧 **Flexbox natif** - Système de grille fidèle à Bootstrap

## 📦 Installation

```bash
npm install @whitemordred/react-native-bootstrap5
# ou
yarn add @whitemordred/react-native-bootstrap5
```

## 🎯 Utilisation de base

```tsx
import React from 'react';
import { BootstrapProvider, Button, Container } from '@whitemordred/react-native-bootstrap5';

const customTheme = {
  colors: {
    primary: '#ff5733',
    dark: {
      background: '#121212',
      text: '#ffffff'
    },
  }
};

export default function App() {
  return (
    <BootstrapProvider theme={customTheme} mode="dark">
      <Container>
        <Button variant="primary">Cliquez-moi</Button>
      </Container>
    </BootstrapProvider>
  );
}
```

## 🧩 Composants disponibles

### Boutons
```tsx
import { Button } from '@whitemordred/react-native-bootstrap5';

// Toutes les variantes Bootstrap 5
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>
<Button variant="light">Light</Button>
<Button variant="dark">Dark</Button>
<Button variant="link">Link</Button>

// Couleurs étendues
<Button variant="indigo">Indigo</Button>
<Button variant="purple">Purple</Button>
<Button variant="pink">Pink</Button>
<Button variant="orange">Orange</Button>
<Button variant="teal">Teal</Button>
<Button variant="cyan">Cyan</Button>

// Variantes outline (toutes disponibles)
<Button variant="outline-primary">Outline Primary</Button>
<Button variant="outline-indigo">Outline Indigo</Button>

// Options avancées
<Button pill>Pill Button</Button>
<Button gradient>Gradient</Button>
<Button active>Active State</Button>

// Tailles
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

// Block button
<Button block>Block Button</Button>

// États
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>
```

### Cards
```tsx
import { 
  Card, 
  CardHeader, 
  CardBody, 
  CardFooter, 
  CardTitle, 
  CardText,
  CardImage 
} from '@whitemordred/react-native-bootstrap5';

<Card>
  <CardImage source={{ uri: 'https://example.com/image.jpg' }} top />
  <CardHeader>En-tête de la card</CardHeader>
  <CardBody>
    <CardTitle>Titre de la card</CardTitle>
    <CardText>
      Texte du contenu de la card avec des informations utiles.
    </CardText>
    <Button variant="primary">Action</Button>
  </CardBody>
  <CardFooter>
    Pied de page de la card
  </CardFooter>
</Card>
```

### Système de grille
```tsx
import { Container, Row, Col } from '@whitemordred/react-native-bootstrap5';

<Container fluid>
  <Row>
    <Col xs={12} sm={6} md={4}>
      Colonne 1
    </Col>
    <Col xs={12} sm={6} md={4}>
      Colonne 2
    </Col>
    <Col xs={12} sm={12} md={4}>
      Colonne 3
    </Col>
  </Row>
</Container>
```

### Modals
```tsx
import { 
  Modal, 
  ModalHeader, 
  ModalBody, 
  ModalFooter 
} from '@whitemordred/react-native-bootstrap5';

const [visible, setVisible] = useState(false);

<Modal 
  visible={visible} 
  onClose={() => setVisible(false)}
  size="lg"
  centered
>
  <ModalHeader onClose={() => setVisible(false)}>
    Titre du modal
  </ModalHeader>
  <ModalBody>
    Contenu du modal
  </ModalBody>
  <ModalFooter>
    <Button variant="secondary" onPress={() => setVisible(false)}>
      Annuler
    </Button>
    <Button variant="primary" onPress={() => setVisible(false)}>
      Sauvegarder
    </Button>
  </ModalFooter>
</Modal>
```

### Formulaires
```tsx
import { 
  FormGroup, 
  FormLabel, 
  FormControl, 
  FormText, 
  InvalidFeedback 
} from '@whitemordred/react-native-bootstrap5';

<FormGroup>
  <FormLabel required>Nom</FormLabel>
  <FormControl
    placeholder="Entrez votre nom"
    value={name}
    onChangeText={setName}
    isInvalid={!!errors.name}
  />
  {errors.name && (
    <InvalidFeedback>{errors.name}</InvalidFeedback>
  )}
  <FormText muted>Votre nom complet</FormText>
</FormGroup>
```

## 🎨 Gestion des thèmes

### BootstrapProvider
Le composant `BootstrapProvider` doit envelopper votre application :

```tsx
import { BootstrapProvider } from '@whitemordred/react-native-bootstrap5';

<BootstrapProvider 
  theme={customTheme} 
  mode="light" // 'light' | 'dark'
  followSystemTheme={true} // suit le thème système
>
  <App />
</BootstrapProvider>
```

### Hook useTheme
```tsx
import { useTheme } from '@whitemordred/react-native-bootstrap5';

function MyComponent() {
  const { theme, mode, setMode, toggleMode, currentColors } = useTheme();

  return (
    <View style={{ backgroundColor: currentColors.background }}>
      <Button onPress={toggleMode}>
        Mode actuel: {mode}
      </Button>
    </View>
  );
}
```

### Personnalisation du thème
```tsx
const customTheme = {
  colors: {
    primary: '#ff5733',
    secondary: '#6c757d',
    success: '#28a745',
    // ... autres couleurs
  },
  darkColors: {
    background: '#121212',
    surface: '#1e1e1e',
    text: '#ffffff',
    primary: '#ff7961',
    // ... autres couleurs pour le mode sombre
  },
  spacing: {
    0: 0,
    1: 4,
    2: 8,
    3: 16,
    4: 24,
    5: 48,
  },
  typography: {
    fontSizes: {
      xs: 12,
      sm: 14,
      base: 16,
      lg: 18,
      xl: 20,
      '2xl': 24,
    },
    fontWeights: {
      light: '300',
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
    },
  },
  borderRadius: {
    none: 0,
    sm: 2,
    base: 4,
    md: 6,
    lg: 8,
    xl: 12,
    full: 9999,
  },
  shadows: {
    sm: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.05,
      shadowRadius: 2,
      elevation: 2,
    },
    // ... autres ombres
  },
};
```

## 🎯 Props des composants

### Button
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | ButtonVariant | 'primary' | Variante du bouton |
| size | 'sm' \| 'lg' \| 'default' | 'default' | Taille du bouton |
| disabled | boolean | false | Bouton désactivé |
| loading | boolean | false | Affiche un spinner |
| block | boolean | false | Bouton pleine largeur |

### Card
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | ReactNode | - | Contenu de la card |
| style | ViewStyle | - | Styles personnalisés |

### Modal
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| visible | boolean | - | Visibilité du modal |
| onClose | () => void | - | Callback de fermeture |
| size | 'sm' \| 'lg' \| 'xl' \| 'default' | 'default' | Taille du modal |
| centered | boolean | false | Modal centré |
| backdrop | boolean | true | Fermeture sur backdrop |

## 🚀 Fonctionnalités avancées

### Responsive Design
Le système de grille utilise des breakpoints similaires à Bootstrap :
- `xs` : 0px et plus
- `sm` : 576px et plus  
- `md` : 768px et plus
- `lg` : 992px et plus
- `xl` : 1200px et plus

### Performance
- Utilisation de `StyleSheet.create` pour l'optimisation
- Composants optimisés avec `React.memo` quand approprié
- Gestion efficace des changements de thème

## 🧪 Tests

```bash
npm run test
# ou
yarn test
```

## 🔧 Développement

```bash
# Installation des dépendances
npm install

# Build
npm run build

# Watch mode
npm run watch

# Linting
npm run lint
npm run lint:fix
```

## � Exemple Desktop

Un exemple complet d'application desktop est disponible dans le dossier `example/BootstrapDesktopDemo/`. 

### Fonctionnalités de l'exemple

- ✅ Tous les composants Bootstrap 5 démontrés
- ✅ Interface desktop optimisée  
- ✅ Mode sombre/clair avec basculement
- ✅ Responsive design
- ✅ Support web (React Native Web)
- ✅ Support Electron (application native)

### Démarrage rapide

```bash
# Accéder au dossier de l'exemple
cd example/BootstrapDesktopDemo

# Installer les dépendances
npm install

# Lancer en mode web
npm start
# Ouvre automatiquement http://localhost:3000

# Configurer Electron (optionnel)
./setup-electron.sh
npm run electron-dev
```

### Structure de l'exemple

```
example/BootstrapDesktopDemo/
├── src/
│   ├── App.tsx          # Démo complète de tous les composants
│   └── index.tsx        # Point d'entrée React Native Web
├── public/
│   └── index.html       # Template HTML
├── electron.js          # Configuration Electron (optionnelle)
├── webpack.config.js    # Configuration Webpack
└── README.md           # Documentation de l'exemple
```

## �📱 Compatibilité

- **React Native** : >= 0.60.0
- **React** : >= 16.8.0
- **iOS** : iOS 10+
- **Android** : API Level 21+
- **Web** : Supporté via React Native Web

## 🎯 Plateformes supportées

| Plateforme | Status | Version requise |
|------------|--------|-----------------|
| 📱 **iOS** | ✅ Supporté | React Native ≥ 0.60 |
| 🤖 **Android** | ✅ Supporté | React Native ≥ 0.60 |
| 🌐 **Web** | ✅ Supporté | React Native Web ≥ 0.17 |
| 🖥️ **Windows** | ✅ Supporté | React Native Windows ≥ 0.68 |
| 🍎 **macOS** | ✅ Supporté | React Native macOS ≥ 0.68 |

### Configuration spécifique par plateforme

#### React Native Web
```bash
npm install react-native-web
# Aucune configuration supplémentaire requise
```

#### React Native Windows
```bash
npx react-native-windows-init --overwrite
# La librairie fonctionne out-of-the-box
```

#### React Native macOS
```bash
npx react-native-macos-init
# Support natif des composants
```

## 🎨 Thématisation

Pour une documentation complète sur le système de thème, consultez [THEMING.md](./THEMING.md).

### Exemple rapide

```tsx
import { BootstrapProvider, useTheme } from '@whitemordred/react-native-bootstrap5';

const customTheme = {
  colors: {
    primary: '#ff5733',
    // Toutes les couleurs Bootstrap disponibles
  }
};

<BootstrapProvider theme={customTheme} mode="dark">
  <App />
</BootstrapProvider>
```

### Utilitaires de couleur

```tsx
import { TextUtility, BackgroundUtility, UtilityBox } from '@whitemordred/react-native-bootstrap5';

// Texte coloré
<TextUtility color="primary">Texte primary</TextUtility>
<TextUtility color="danger-emphasis">Danger emphasis</TextUtility>

// Fond coloré
<BackgroundUtility bg="success-subtle">
  Fond success subtle
</BackgroundUtility>

// Box utilitaire
<UtilityBox 
  bg="primary-subtle"
  border="primary"
  p={3}
  rounded
  shadow="sm"
>
  Contenu
</UtilityBox>
```

## 🤝 Contribution

Les contributions sont les bienvenues ! Veuillez lire le guide de contribution avant de soumettre une PR.

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

## 📄 License

MIT © WhiteMordred

## 🙏 Remerciements

- [Bootstrap](https://getbootstrap.com/) pour l'inspiration et les designs
- La communauté React Native pour les outils et librairies

---

**Note** : Cette librairie est en développement actif. N'hésitez pas à signaler des bugs ou proposer des améliorations via les issues GitHub.