datakeen-session-react 1.1.8 → 1.1.9

package/README.md

@@ -1,188 +1,87 @@
-# SDK Datakeen Session React
+# Guide d'intégration - Datakeen Session React SDK
 
-<div style="background-color: #11E5C5; height: 8px; width: 100px; margin-bottom: 20px;"></div>
+## Résolution du problème ReactCurrentDispatcher
 
-<div style="display: flex; align-items: center; margin-bottom: 30px;">
-    <img src="./assets/logo.svg" alt="Datakeen Logo" width="180"/>
-    <span style="font-size: 20px; color: #3C3C40; margin-left: 20px; font-weight: 500;">Documentation Technique</span>
-</div>
+Le problème `Cannot read properties of undefined (reading 'ReactCurrentDispatcher')` a été résolu en optimisant la configuration Vite pour un SDK React.
 
-<div style="color: #3C3C40; font-size: 16px;">
+### Changements apportés
 
-## 📦 Installation du SDK
+1. **Configuration Vite** (`vite.config.ts`) :
+   - Ajout du JSX runtime automatique
+   - Externalisation de React, React-DOM et JSX runtime
+   - Externalisation des dépendances UI (Radix, Headless UI, Lucide)
 
-Pour intégrer le SDK Datakeen Session dans votre projet React, vous pouvez utiliser npm, yarn ou pnpm :
+2. **Gestion des dépendances** (`package.json`) :
+   - React et React-DOM déplacés vers `peerDependencies` et `devDependencies`
+   - Dépendances UI déplacées vers `peerDependencies` pour éviter la duplication
+
+### Installation dans une application React
 
 ```bash
-# Via npm
 npm install datakeen-session-react
-
-# Via yarn
-yarn add datakeen-session-react
-
-# Via pnpm
-pnpm add datakeen-session-react
 ```
 
-## 🚀 Guide de démarrage rapide
-
-### Prérequis
-
-- Une application React fonctionnelle (React 16.8+ recommandé pour support des Hooks)
-- Un identifiant de session Datakeen valide (obtenu via l'API Datakeen)
-
-### Étape 1 : Importer le SDK
-
-```jsx
-import useSession from "datakeen-session-react";
-```
+**Important :** Assurez-vous d'avoir installé toutes les peer dependencies :
 
-### Étape 2 : Initialiser et afficher la session
-
-```jsx
-const MonComposant = () => {
-  // Initialisation avec l'ID de session
-  const { SessionComponent } = useSession("votre-session-id");
-
-  return (
-    <div>
-      {/* Intégrez le composant de session où vous le souhaitez */}
-      {SessionComponent}
-    </div>
-  );
-};
+```bash
+npm install react react-dom axios @headlessui/react @radix-ui/react-checkbox @radix-ui/react-icons @radix-ui/react-label @radix-ui/react-select lucide-react
 ```
 
-## 💡 Cas d'utilisation courants
-
-### Intégration dans une page de vérification d'identité
+### Utilisation
 
-```jsx
-import React from "react";
-import useSession from "datakeen-session-react";
-
-const VerificationPage = () => {
-  // Vous pouvez récupérer l'ID de session depuis votre backend
-  const sessionId = "votre-session-id";
-  const { SessionComponent } = useSession(sessionId);
+```tsx
+import React from 'react';
+import useSession from 'datakeen-session-react';
 
+function App() {
+  const session = useSession();
+  
   return (
-    <div className="verification-container">
-      <h1>Vérification d'identité</h1>
-      <p>Merci de suivre les étapes ci-dessous pour vérifier votre identité</p>
-
-      {/* Le SDK gère automatiquement toutes les étapes du processus */}
-      <div className="session-wrapper">{SessionComponent}</div>
+    <div className="App">
+      {/* Votre composant utilisant le SDK */}
     </div>
   );
-};
-```
+}
 
-### Intégration dans un flux d'onboarding
-
-```jsx
-import React, { useState } from "react";
-import useSession from "datakeen-session-react";
-
-const OnboardingFlow = () => {
-  const [step, setStep] = useState(1);
-  const [sessionId, setSessionId] = useState(null);
-
-  // Fonction pour initialiser la session après l'étape 1
-  const initializeSession = async (userData) => {
-    // Exemple d'appel API pour obtenir un ID de session
-    const response = await fetch("https://api.votreservice.com/init-session", {
-      method: "POST",
-      body: JSON.stringify(userData),
-    });
-
-    const data = await response.json();
-    setSessionId(data.sessionId);
-    setStep(2);
-  };
-
-  // Rendu conditionnel basé sur l'étape
-  if (step === 1) {
-    return (
-      <div>
-        <h2>Étape 1: Informations de base</h2>
-        {/* Votre formulaire de collecte d'informations */}
-        <button
-          onClick={() =>
-            initializeSession({
-              /* données utilisateur */
-            })
-          }
-        >
-          Continuer
-        </button>
-      </div>
-    );
-  }
-
-  if (step === 2 && sessionId) {
-    const { SessionComponent } = useSession(sessionId);
-
-    return (
-      <div>
-        <h2>Étape 2: Vérification d'identité</h2>
-        {SessionComponent}
-      </div>
-    );
-  }
-};
+export default App;
 ```
 
-## 📋 Flux de vérification supportés
-
-Le SDK prend en charge les documents d'identité des pays suivants :
+### CSS
 
-- 🇫🇷 France
+N'oubliez pas d'importer le CSS du SDK :
 
-Les types de documents supportés incluent :
-
-- Carte Nationale d'Identité
-- Passeport
-- Permis de conduire
-- Titre de séjour
+```css
+@import 'datakeen-session-react/dist/datakeen-session-react.css';
+```
 
-## 🔧 Personnalisation
+### Résolution des problèmes
 
-Le SDK s'intègre naturellement avec votre interface utilisateur et adopte automatiquement les styles CSS de votre application. Pour une personnalisation avancée, vous pouvez encapsuler le composant de session dans vos propres conteneurs stylisés.
+Si vous rencontrez encore des erreurs :
 
-## ⚙️ Configuration de l'environnement
+1. Vérifiez que toutes les peerDependencies sont installées
+2. Assurez-vous qu'il n'y a qu'une seule version de React dans votre projet :
+   ```bash
+   npm ls react
+   ```
+3. Si nécessaire, utilisez les résolutions de package dans votre `package.json` :
+   ```json
+   "resolutions": {
+     "react": "^18.0.0",
+     "react-dom": "^18.0.0"
+   }
+   ```
 
-Le SDK utilise des variables d'environnement pour la configuration. Pour configurer l'URL de l'API, créez un fichier `.env` à la racine de votre projet avec le contenu suivant :
+### Build du SDK
 
-```
-VITE_API_BASE_URL=http://localhost:8888
-```
-
-Pour une configuration rapide, vous pouvez utiliser la commande suivante dans le projet SDK :
+Pour rebuilder le SDK après modifications :
 
 ```bash
-npm run setup:env
+npm run clean
+npm run build
 ```
 
-Cette commande génère les fichiers `.env` nécessaires pour le SDK et le projet de démo.
-
-Pour plus de détails sur la configuration de l'environnement, consultez [la documentation dédiée](./docs/environment.md).
-
-## 💬 Support et assistance
-
-Pour toute question technique ou problème d'intégration :
-
-- **Email Support**: support@datakeen.co
-- **Documentation API**: [https://api.datakeen.co/docs](https://api.datakeen.co/docs)
-- **Site Web**: [www.datakeen.co](https://www.datakeen.co)
-
-</div>
-
-<div style="background-color: #11E5C5; color: white; padding: 15px; border-radius: 5px; margin-top: 30px; display: flex; align-items: center; justify-content: space-between;">
-  <div>
-    <strong>Datakeen</strong> - Solutions d'identité numérique
-  </div>
-  <div>
-    Dernière mise à jour: Juin 2025
-  </div>
-</div>
+Le SDK sera construit dans le dossier `dist/` avec :
+- `index.js` (CommonJS)
+- `index.mjs` (ES Modules)
+- `index.d.ts` (Types TypeScript)
+- `datakeen-session-react.css` (Styles)

package/package.json

@@ -1,10 +1,22 @@
 {
   "name": "datakeen-session-react",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "React SDK component to manage and render Datakeen session experiences easily.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "dev": "vite build --watch",
+    "lint": "eslint . --ext .ts,.tsx",
+    "test": "jest",
+    "demo": "cd ../demo && npm run dev",
+    "dev:full": "concurrently \"npm run dev\" \"npm run demo\"",
+    "clean": "rm -rf dist",
+    "setup:env": "echo 'VITE_API_BASE_URL=http://localhost:8888' > .env && echo 'VITE_API_BASE_URL=http://localhost:8888' > ../demo/.env && echo 'Environment files created successfully'",
+    "build:test": "npm run build && cp -r dist example/node_modules/datakeen-session-react/"
+  },
   "keywords": [
     "datakeen",
     "session",
@@ -22,6 +34,7 @@
     "url": "https://gitlab.com/datakeenteam/teamfullstack/client-sessions-react-sdk.git"
   },
   "homepage": "https://www.datakeen.co/",
+  "packageManager": "pnpm@10.9.0",
   "devDependencies": {
     "@headlessui/react": "^2.2.4",
     "@radix-ui/react-checkbox": "^1.3.2",
@@ -73,17 +86,5 @@
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-select": "^2.2.5",
     "lucide-react": "^0.511.0"
-  },
-  "scripts": {
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "dev": "vite build --watch",
-    "lint": "eslint . --ext .ts,.tsx",
-    "test": "jest",
-    "demo": "cd ../demo && npm run dev",
-    "dev:full": "concurrently \"npm run dev\" \"npm run demo\"",
-    "clean": "rm -rf dist",
-    "setup:env": "echo 'VITE_API_BASE_URL=http://localhost:8888' > .env && echo 'VITE_API_BASE_URL=http://localhost:8888' > ../demo/.env && echo 'Environment files created successfully'",
-    "build:test": "npm run build && cp -r dist example/node_modules/datakeen-session-react/"
   }
-}
+}

package/INTEGRATION_GUIDE.md

@@ -1,87 +0,0 @@
-# Guide d'intégration - Datakeen Session React SDK
-
-## Résolution du problème ReactCurrentDispatcher
-
-Le problème `Cannot read properties of undefined (reading 'ReactCurrentDispatcher')` a été résolu en optimisant la configuration Vite pour un SDK React.
-
-### Changements apportés
-
-1. **Configuration Vite** (`vite.config.ts`) :
-   - Ajout du JSX runtime automatique
-   - Externalisation de React, React-DOM et JSX runtime
-   - Externalisation des dépendances UI (Radix, Headless UI, Lucide)
-
-2. **Gestion des dépendances** (`package.json`) :
-   - React et React-DOM déplacés vers `peerDependencies` et `devDependencies`
-   - Dépendances UI déplacées vers `peerDependencies` pour éviter la duplication
-
-### Installation dans une application React
-
-```bash
-npm install datakeen-session-react
-```
-
-**Important :** Assurez-vous d'avoir installé toutes les peer dependencies :
-
-```bash
-npm install react react-dom axios @headlessui/react @radix-ui/react-checkbox @radix-ui/react-icons @radix-ui/react-label @radix-ui/react-select lucide-react
-```
-
-### Utilisation
-
-```tsx
-import React from 'react';
-import useSession from 'datakeen-session-react';
-
-function App() {
-  const session = useSession();
-  
-  return (
-    <div className="App">
-      {/* Votre composant utilisant le SDK */}
-    </div>
-  );
-}
-
-export default App;
-```
-
-### CSS
-
-N'oubliez pas d'importer le CSS du SDK :
-
-```css
-@import 'datakeen-session-react/dist/datakeen-session-react.css';
-```
-
-### Résolution des problèmes
-
-Si vous rencontrez encore des erreurs :
-
-1. Vérifiez que toutes les peerDependencies sont installées
-2. Assurez-vous qu'il n'y a qu'une seule version de React dans votre projet :
-   ```bash
-   npm ls react
-   ```
-3. Si nécessaire, utilisez les résolutions de package dans votre `package.json` :
-   ```json
-   "resolutions": {
-     "react": "^18.0.0",
-     "react-dom": "^18.0.0"
-   }
-   ```
-
-### Build du SDK
-
-Pour rebuilder le SDK après modifications :
-
-```bash
-npm run clean
-npm run build
-```
-
-Le SDK sera construit dans le dossier `dist/` avec :
-- `index.js` (CommonJS)
-- `index.mjs` (ES Modules)
-- `index.d.ts` (Types TypeScript)
-- `datakeen-session-react.css` (Styles)