@inputdev/sdk 1.0.0

package/README.md

@@ -0,0 +1,457 @@
+# InputDev SDK
+
+🚀 **SDK JavaScript ultra-simple pour la soumission de formulaires**
+
+Un SDK moderne et intelligent qui facilite l'intégration de formulaires avec votre backend InputDev.
+
+## ✨ **Caractéristiques principales**
+
+- 🎯 **Installation instantanée** - Un simple attribut HTML
+- 📧 **Validation emails automatique** 
+- 🔇 **Mode silencieux** pour la production
+- 🎨 **Messages d'erreur intelligents**
+- 📊 **Logs détaillés et configurables**
+- ⚡ **Compatible avec tous les frameworks**
+
+## 🚀 **Installation**
+
+### **CDN (recommandé)**
+```html
+<script src="https://cdn.jsdelivr.net/npm/inputdev-sdk@latest/dist/inputdev-sdk.min.js"></script>
+```
+
+### **NPM**
+```bash
+npm install inputdev-sdk
+```
+
+## 📖 **Utilisation rapide**
+
+### **1. Formulaire automatique** 
+```html
+<form data-inputdev="votre-clé-api">
+    <input type="text" name="name" required>
+    <input type="email" name="email" required>
+    <textarea name="message" required></textarea>
+    <button type="submit">Envoyer</button>
+</form>
+```
+
+### **2. Mode silencieux** (pas de logs)
+```html
+<form data-inputdev-silence="votre-clé-api">
+    <input type="text" name="name" required>
+    <input type="email" name="email" required>
+    <textarea name="message" required></textarea>
+    <button type="submit">Envoyer</button>
+</form>
+```
+
+**🔇 Mode silencieux =** 
+- ❌ **Aucun log dans la console**
+- ❌ **Pas de messages d'erreur visibles**
+- ✅ **Uniquement les événements personnalisés**
+- ✅ **Idéal pour la production**
+
+### **3. Appel manuel (avec logs)**
+```javascript
+const dev = new InputDevSDK();
+
+await dev.submit("votre-clé-api", {
+    name: "John Doe",
+    email: "john@example.com",
+    message: "Hello!"
+});
+```
+
+**📊 Mode normal =**
+- ✅ **Logs détaillés dans la console**
+- ✅ **Messages d'erreur intelligents**
+- ✅ **Instructions pour les erreurs courantes**
+- ✅ **Idéal pour le développement**
+
+### **4. Appel manuel silencieux**
+```javascript
+await dev.submit("votre-clé-api", "silence", {
+    name: "John Doe", 
+    email: "john@example.com",
+    message: "Hello!"
+});
+```
+
+**🔇 Mode silencieux manuel =**
+- ❌ **Aucun log dans la console**
+- ❌ **Pas de messages d'erreur**
+- ✅ **Uniquement les événements personnalisés**
+- ✅ **Parfait pour la production**
+
+## 🎨 **Fonctionnalités avancées**
+
+### **Validation emails automatique**
+Le SDK valide automatiquement les champs `<input type="email">` et les données contenant "email" :
+
+- ✅ **Validation en temps réel** sur les champs HTML
+- ✅ **Validation des données JSON** dans `submit()`
+- ✅ **Feedback visuel** avec messages d'erreur
+- ✅ **Messages console** détaillés
+
+### **Gestion des erreurs intelligente**
+Messages d'aide contextuels pour les erreurs courantes :
+
+- **DOM_001** : Erreur de domaine non autorisé
+- **API_003** : Clé API désactivée  
+- **EMAIL_INVALID** : Email invalide
+
+### **Logs configurables**
+```javascript
+const dev = new InputDevSDK();
+
+// Contrôler les logs
+dev.disableLogs();  // Désactiver tous les logs
+dev.enableLogs();   // Réactiver les logs
+```
+
+## 🔧 **Configuration**
+
+### **Modes de fonctionnement**
+
+#### **📊 Mode normal (développement)**
+```javascript
+const dev = new InputDevSDK();
+// Par défaut : logs activés, messages activés
+```
+
+**Avantages :**
+- ✅ **Logs complets** pour le débogage
+- ✅ **Messages d'erreur détaillés**
+- ✅ **Instructions contextuelles** (DOM_001, API_003)
+- ✅ **Validation emails** avec feedback visuel
+
+#### **🔇 Mode silencieux (production)**
+```javascript
+// Attribut HTML
+<form data-inputdev-silence="votre-clé-api">
+
+// Ou appel manuel
+await dev.submit("votre-clé-api", "silence", data);
+```
+
+**Avantages :**
+- ❌ **Aucun log** dans la console
+- ❌ **Pas de messages d'erreur** visibles
+- ✅ **Console propre** pour les utilisateurs
+- ✅ **Uniquement les événements** personnalisés
+
+### **Contrôle manuel des logs**
+```javascript
+const dev = new InputDevSDK();
+
+// Désactiver tous les logs
+dev.disableLogs();
+
+// Réactiver les logs
+dev.enableLogs();
+```
+
+### **Contrôle manuel des messages**
+```javascript
+// Désactiver les notifications visuelles
+dev.disableMessages();
+
+// Réactiver les notifications
+dev.enableMessages();
+```
+
+### **Quand utiliser quel mode ?**
+
+| Situation | Mode recommandé | Pourquoi ? |
+|-----------|-----------------|-----------|
+| **Développement** | 📊 **Normal** | Débogage facile avec logs complets |
+| **Production** | 🔇 **Silencieux** | Console propre pour les utilisateurs |
+| **Tests** | 🔇 **Silencieux** | Pas de pollution des logs de test |
+| **Débogage client** | 📊 **Normal** | Instructions d'erreur détaillées |
+
+## 📋 **Événements personnalisés**
+
+```javascript
+// Écouter les succès
+document.addEventListener('inputdev:success', (event) => {
+    console.log('Formulaire envoyé!', event.detail);
+});
+
+// Écouter les erreurs
+document.addEventListener('inputdev:error', (event) => {
+    console.log('Erreur:', event.detail);
+});
+```
+
+## 🌍 **Compatibilité**
+
+- ✅ **Vanilla JavaScript**
+- ✅ **React**
+- ✅ **Vue.js**
+- ✅ **Angular**
+- ✅ **Svelte**
+- ✅ **Tous les navigateurs modernes**
+
+## 📦 **Taille et performance**
+
+- 📊 **~5KB** minifié et gzippé
+- ⚡ **Chargement instantané**
+- 🔄 **Aucune dépendance**
+- 📱 **Mobile-friendly**
+
+## 🔐 **Sécurité**
+
+- 🔒 **Clés API masquées** dans les logs
+- 🛡️ **Validation côté client**
+- 🚫 **Pas de données sensibles** exposées
+
+## 📚 **Exemples complets**
+
+### **React**
+```jsx
+import { InputDevSDK } from 'inputdev-sdk';
+
+const dev = new InputDevSDK();
+
+const handleSubmit = async (data) => {
+    try {
+        await dev.submit("votre-clé-api", data);
+        alert("Message envoyé !");
+    } catch (error) {
+        console.error("Erreur:", error);
+    }
+};
+```
+
+### **Vanilla JS**
+```html
+<script src="inputdev-sdk.min.js"></script>
+<script>
+    const dev = new InputDevSDK();
+    
+    document.getElementById('myForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        const data = {
+            name: document.getElementById('name').value,
+            email: document.getElementById('email').value
+        };
+        
+        await dev.submit("votre-clé-api", "silence", data);
+    });
+</script>
+```
+
+## 🤝 **Contribution**
+
+Contributions bienvenues ! 
+- Fork le projet
+- Créez une branche (`git checkout -b feature/amazing-feature`)
+- Committez (`git commit -m 'Add amazing feature'`)
+- Push (`git push origin feature/amazing-feature`)
+- Ouvrez une Pull Request
+
+## 📄 **Licence**
+
+MIT License - libre pour usage commercial et personnel
+
+## 🔗 **Liens utiles**
+
+- 📖 **Documentation complète** : [docs.inputdev.com](https://docs.inputdev.com)
+- 🚀 **Démo en ligne** : [demo.inputdev.com](https://demo.inputdev.com)
+- 🐛 **Issues** : [GitHub Issues](https://github.com/inputdev/sdk/issues)
+- 💬 **Support** : [Discord](https://discord.gg/inputdev)
+
+---
+
+**Made with ❤️ by InputDev Team**
+
+## API Reference
+
+### `dev.submit(apiKey, data)`
+
+Envoie les données du formulaire vers l'API InputDev.
+
+**Paramètres :**
+- `apiKey` (string): Votre clé API InputDev
+- `data` (object): Données du formulaire
+
+**Retour :**
+- `Promise`: Résolution avec la réponse de l'API
+
+**Exemple :**
+```javascript
+const data = {
+  email: "contact@example.com",
+  message: "Bonjour, j'aimerais en savoir plus...",
+  telephone: "+33612345678",
+  plan: "free"
+};
+
+dev.submit("grts_VotreCleApiDeCeSite", data)
+  .then(response => {
+    console.log('Formulaire soumis:', response);
+  })
+  .catch(error => {
+    console.error('Erreur:', error.message);
+  });
+```
+
+## Événements personnalisés
+
+Le SDK émet des événements que vous pouvez écouter :
+
+```javascript
+// Succès de la soumission
+document.addEventListener('inputdev:success', (event) => {
+  const { form, response } = event.detail;
+  console.log('Formulaire envoyé avec succès:', response);
+});
+
+// Erreur de soumission
+document.addEventListener('inputdev:error', (event) => {
+  const { form, error } = event.detail;
+  console.error('Erreur lors de l\'envoi:', error);
+});
+```
+
+## Codes d'erreur
+
+| Code | Message | Description |
+|------|---------|-------------|
+| API_001 | Clé API invalide | La clé API n'existe pas ou est mal formatée |
+| API_003 | Clé API désactivée | La clé API a été désactivée |
+| DOM_001 | Domaine non autorisé | Le domaine n'est pas autorisé pour cette clé |
+| QUO_001 | Quota de soumissions épuisé | Vous avez atteint votre limite de soumissions |
+| STO_001 | Quota de stockage épuisé | Vous avez atteint votre limite de stockage |
+| SRV_001 | Erreur serveur | Erreur interne du serveur |
+| SRV_004 | Trop de requêtes | Rate limit dépassé (10 req/min par clé) |
+
+## Configuration avancée
+
+### Personnaliser la configuration
+
+```javascript
+// Mettre à jour la configuration
+dev.updateConfig({
+  apiEndpoint: 'https://votre-serveur-personnalisé.com/submit',
+  timeout: 15000,
+  retries: 3
+});
+
+// Voir la configuration actuelle
+console.log(dev.getConfig());
+```
+
+### Options de configuration
+
+| Option | Défaut | Description |
+|--------|--------|-------------|
+| `apiEndpoint` | `https://votre-serveur.com/submit` | URL de l'API InputDev |
+| `timeout` | `10000` | Timeout en millisecondes |
+| `retries` | `2` | Nombre de tentatives en cas d'échec |
+
+## Exemples pratiques
+
+### Formulaire de contact
+```html
+<form data-inputdev="grts_VotreCleApi">
+  <div>
+    <label for="name">Nom:</label>
+    <input type="text" id="name" name="name" required>
+  </div>
+  
+  <div>
+    <label for="email">Email:</label>
+    <input type="email" id="email" name="email" required>
+  </div>
+  
+  <div>
+    <label for="subject">Sujet:</label>
+    <input type="text" id="subject" name="subject">
+  </div>
+  
+  <div>
+    <label for="message">Message:</label>
+    <textarea id="message" name="message" required></textarea>
+  </div>
+  
+  <button type="submit">Envoyer</button>
+</form>
+
+<script src="https://cdn.inputdev.dev/latest.js"></script>
+```
+
+### Formulaire avec validation personnalisée
+```javascript
+document.addEventListener('inputdev:success', (event) => {
+  // Rediriger après succès
+  window.location.href = '/merci.html';
+});
+
+document.addEventListener('inputdev:error', (event) => {
+  // Afficher une notification personnalisée
+  showNotification('Erreur: ' + event.detail.error.message, 'error');
+});
+```
+
+### Intégration React
+```jsx
+import { dev } from "@inputdev/sdk";
+
+function ContactForm() {
+  const [formData, setFormData] = useState({
+    email: '',
+    message: ''
+  });
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    
+    try {
+      await dev.submit("grts_VotreCleApi", formData);
+      alert('Message envoyé avec succès!');
+      setFormData({ email: '', message: '' });
+    } catch (error) {
+      alert('Erreur: ' + error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="email"
+        value={formData.email}
+        onChange={(e) => setFormData({...formData, email: e.target.value})}
+        placeholder="Votre email"
+        required
+      />
+      <textarea
+        value={formData.message}
+        onChange={(e) => setFormData({...formData, message: e.target.value})}
+        placeholder="Votre message"
+        required
+      />
+      <button type="submit" disabled={loading}>
+        {loading ? 'Envoi...' : 'Envoyer'}
+      </button>
+    </form>
+  );
+}
+```
+
+## Support
+
+- 📖 Documentation complète : [docs.inputdev.dev](https://docs.inputdev.dev)
+- 🐛 Rapports de bugs : [GitHub Issues](https://github.com/inputdev/sdk/issues)
+- 💬 Communauté : [Discord](https://discord.gg/inputdev)
+
+## Licence
+
+MIT License - voir le fichier LICENSE pour les détails.

package/inputdev-sdk.d.ts

@@ -0,0 +1,54 @@
+/**
+ * InputDev SDK - TypeScript Definitions
+ * Backend de formulaires sans code
+ */
+
+export interface InputDevConfig {
+    apiEndpoint?: string;
+    timeout?: number;
+    retries?: number;
+}
+
+export interface SubmissionResponse {
+    success: boolean;
+    message: string;
+    submissionId: string;
+}
+
+export interface SubmissionError {
+    code: string;
+    message: string;
+}
+
+export interface InputDevSDK {
+    /**
+     * Envoie les données du formulaire vers l'API InputDev
+     * @param apiKey - Clé API InputDev
+     * @param data - Données du formulaire
+     * @returns Promise avec la réponse
+     */
+    submit(apiKey: string, data: Record<string, any>): Promise<SubmissionResponse>;
+
+    /**
+     * Met à jour la configuration du SDK
+     * @param newConfig - Nouvelle configuration
+     */
+    updateConfig(newConfig: InputDevConfig): void;
+
+    /**
+     * Récupère la configuration actuelle
+     * @returns Configuration actuelle
+     */
+    getConfig(): InputDevConfig;
+}
+
+export declare class InputDevSDKClass implements InputDevSDK {
+    constructor(config?: InputDevConfig);
+    submit(apiKey: string, data: Record<string, any>): Promise<SubmissionResponse>;
+    updateConfig(newConfig: InputDevConfig): void;
+    getConfig(): InputDevConfig;
+}
+
+export declare const dev: InputDevSDK;
+
+export default InputDevSDKClass;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@inputdev/sdk",
+  "version": "1.0.0",
+  "description": "Backend de formulaires sans code - SDK JavaScript",
+  "main": "inputdev-sdk.js",
+  "types": "inputdev-sdk.d.ts",
+  "scripts": {
+    "build": "webpack --mode=production",
+    "dev": "webpack --mode=development --watch",
+    "test": "jest",
+    "lint": "eslint *.js",
+    "minify": "terser inputdev-sdk.js -o inputdev-sdk.min.js --compress --mangle"
+  },
+  "keywords": [
+    "form",
+    "backend",
+    "api",
+    "sdk",
+    "javascript",
+    "frontend",
+    "backend-as-a-service",
+    "form-handler",
+    "inputdev"
+  ],
+  "author": "InputDev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/inputdev/sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/inputdev/sdk/issues"
+  },
+  "homepage": "https://inputdev.dev",
+  "files": [
+    "inputdev-sdk.js",
+    "inputdev-sdk.min.js",
+    "inputdev-sdk.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "browser": "inputdev-sdk.js",
+  "module": "inputdev-sdk.js",
+  "unpkg": "inputdev-sdk.min.js",
+  "jsdelivr": "inputdev-sdk.min.js"
+}