formulaire-dynamique/README.md

Package React pour formulaires dynamiques avec validation et tous types de champs

 Formulaire Dynamique

Un package React moderne pour créer des formulaires dynamiques avec validation et support de tous types de champs.

 🚀 Fonctionnalités

- ✅  Formulaires dynamiques  basés sur une configuration JSON
- ✅  Validation complète  avec messages d'erreur personnalisés
- ✅  Support TypeScript  avec types inclus
- ✅  Tous types de champs  : text, email, password, number, select, checkbox, radio, file, range, textarea, etc.
- ✅  Aperçu d'images  pour les champs de fichiers
- ✅  Icônes personnalisées  pour chaque champ
- ✅  Responsive  et accessible
- ✅  Compatible  avec React 16.8+, Next.js, Vite, Create React App

 📦 Installation

```bash
npm install formulaire-dynamique
 ou
yarn add formulaire-dynamique
 ou
pnpm add formulaire-dynamique
```

 🎯 Utilisation de base

 1. Importation

```javascript
import DynamicForm from 'formulaire-dynamique';
import 'formulaire-dynamique/styles.css';
```

 2. Configuration du formulaire

```javascript
const formConfig = {
  fields: [
    {
      name: 'email',
      type: 'email',
      label: 'Email',
      required: true,
      placeholder: 'votre@email.com',
      validation: {
        required: true,
        pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
        patternMessage: 'Veuillez entrer un email valide'
      }
    },
    {
      name: 'password',
      type: 'password',
      label: 'Mot de passe',
      required: true,
      validation: {
        required: true,
        minLength: 8,
        minLengthMessage: 'Le mot de passe doit contenir au moins 8 caractères'
      }
    },
    {
      name: 'age',
      type: 'number',
      label: 'Âge',
      validation: {
        min: 18,
        max: 120,
        minMessage: 'Vous devez avoir au moins 18 ans'
      }
    }
  ],
  validateOnChange: true,
  validateOnBlur: true,
  submitButton: {
    text: 'Créer mon compte'
  }
};
```

 3. Utilisation du composant

```javascript
function App() {
  const handleSubmit = (data) => {
    console.log('Données du formulaire:', data);
    // Traiter les données
  };

  return (
    <div>
      <h1>Inscription</h1>
      <DynamicForm 
        config={formConfig} 
        onSubmit={handleSubmit}
      />
    </div>
  );
}
```

 📋 Types de champs supportés

 Champs texte
```javascript
{
  name: 'nom',
  type: 'text', // 'email', 'password', 'tel', 'url'
  label: 'Nom complet',
  placeholder: 'Entrez votre nom',
  icon: 'fas fa-user' // Icône Font Awesome
}
```

 Champs numériques
```javascript
{
  name: 'prix',
  type: 'number',
  label: 'Prix',
  validation: {
    min: 0,
    max: 1000
  }
}
```

 Champs de sélection
```javascript
{
  name: 'pays',
  type: 'select',
  label: 'Pays',
  options: [
    { value: 'fr', label: 'France' },
    { value: 'be', label: 'Belgique' },
    { value: 'ch', label: 'Suisse' }
  ]
}
```

 Cases à cocher
```javascript
{
  name: 'accepte_conditions',
  type: 'checkbox',
  label: 'J\'accepte les conditions d\'utilisation',
  required: true
}
```

 Boutons radio
```javascript
{
  name: 'genre',
  type: 'radio',
  label: 'Genre',
  options: [
    { value: 'homme', label: 'Homme' },
    { value: 'femme', label: 'Femme' },
    { value: 'autre', label: 'Autre' }
  ]
}
```

 Champs de fichiers
```javascript
{
  name: 'photo',
  type: 'file',
  label: 'Photo de profil',
  accept: 'image/*',
  previewWidth: '200px',
  previewHeight: '200px',
  validation: {
    required: true,
    accept: 'image/*',
    maxSize: 5242880 // 5MB
  }
}
```

 Champs de plage (range)
```javascript
{
  name: 'satisfaction',
  type: 'range',
  label: 'Niveau de satisfaction',
  min: 1,
  max: 10,
  step: 1,
  defaultValue: 5
}
```

 🔧 Validation

 Règles de validation disponibles

```javascript
validation: {
  required: true,
  requiredMessage: 'Ce champ est obligatoire',
  minLength: 3,
  maxLength: 50,
  minLengthMessage: 'Minimum 3 caractères',
  maxLengthMessage: 'Maximum 50 caractères',
  pattern: '^[A-Za-z]+$',
  patternMessage: 'Seules les lettres sont autorisées',
  min: 0,
  max: 100,
  minMessage: 'Valeur minimale : 0',
  maxMessage: 'Valeur maximale : 100'
}
```

 Validation personnalisée

```javascript
const customValidation = {
  email: (value) => {
    if (value && value.includes('example.com')) {
      return 'Les emails example.com ne sont pas autorisés';
    }
    return null;
  },
  password: (value) => {
    if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
      return 'Le mot de passe doit contenir au moins une minuscule, une majuscule et un chiffre';
    }
    return null;
  }
};

<DynamicForm 
  config={formConfig} 
  onSubmit={handleSubmit}
  customValidation={customValidation}
/>
```

 🎨 Personnalisation CSS

Le package inclut des styles CSS par défaut que vous pouvez importer :

```javascript
import 'formulaire-dynamique/styles.css';
```

 Classes CSS principales

```css
.dynamic-form { /* Conteneur du formulaire */ }
.form-field-container { /* Conteneur de chaque champ */ }
.field-label { /* Labels des champs */ }
.form-field { /* Champs de saisie */ }
.form-field.error { /* Champs en erreur */ }
.error-message { /* Messages d'erreur */ }
.form-submit-button { /* Bouton de soumission */ }
```

 Personnalisation avec CSS custom

```css
.dynamic-form {
  --primary-color: #007bff;
  --error-color: #dc3545;
  --border-radius: 8px;
}

.form-field {
  border-radius: var(--border-radius);
  border: 2px solid #e9ecef;
  transition: border-color 0.3s ease;
}

.form-field:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
```

 🔗 Compatibilité

 Frameworks supportés

- ✅  Create React App  (v5+)
- ✅  Next.js  (v12+)
- ✅  Vite  (v3+)
- ✅  Remix  (v1+)
- ✅  Gatsby  (v4+)

 Versions React supportées

- ✅ React 16.8+ (Hooks requis)
- ✅ React 17.x
- ✅ React 18.x
- ✅ React 19.x

 Exemples d'intégration

 Next.js
```javascript
// pages/contact.js ou app/contact/page.js
import DynamicForm from 'formulaire-dynamique';
import 'formulaire-dynamique/styles.css';

export default function Contact() {
  const handleSubmit = async (data) => {
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
    
    if (response.ok) {
      alert('Message envoyé !');
    }
  };

  return (
    <div>
      <DynamicForm config={formConfig} onSubmit={handleSubmit} />
    </div>
  );
}
```

 Vite
```javascript
// src/components/ContactForm.jsx
import DynamicForm from 'formulaire-dynamique';
import 'formulaire-dynamique/styles.css';

export default function ContactForm() {
  // Configuration et logique du formulaire
  return <DynamicForm config={formConfig} onSubmit={handleSubmit} />;
}
```

 📚 API Référence

 Props du composant DynamicForm

| Prop | Type | Requis | Description |
|------|------|--------|-------------|
| `config` | `Object` | ✅ | Configuration du formulaire |
| `onSubmit` | `Function` | ✅ | Fonction appelée lors de la soumission |
| `customValidation` | `Object` | ❌ | Fonctions de validation personnalisées |
| `className` | `String` | ❌ | Classe CSS personnalisée |

 Configuration du formulaire

```javascript
const config = {
  fields: [/* Array des champs */],
  validateOnChange: true, // Valider lors de la saisie
  validateOnBlur: true,   // Valider lors de la perte de focus
  disableSubmitOnError: true, // Désactiver le bouton si erreurs
  submitButton: {
    text: 'Envoyer' // Texte du bouton de soumission
  }
};
```

 🤝 Contribution

Les contributions sont les bienvenues ! Veuillez consulter le [guide de contribution](CONTRIBUTING.md).

 📄 Licence

MIT © François EDEGNON

 🐛 Signaler un problème

Si vous rencontrez un problème, n'hésitez pas à [créer une issue](https://github.com/edegnon/formulaire-dynamique/issues).