datakeen-session-react 1.1.12 → 1.1.21

package/.gitlab-ci.yml

@@ -0,0 +1,65 @@
+stages:
+  - test
+  - lint
+  - publish
+
+#############################################
+#                                           #
+#                   TESTS                   #
+#                                           #
+#############################################
+
+test:
+  stage: test
+  image: node:18
+  script:
+    - echo "[TODO] TESTS"
+  only:
+    - main
+    - merge_requests
+
+############################################
+#                                          #
+#                   LINT                   #
+#                                          #
+############################################
+
+lint:
+  stage: lint
+  image: node:18
+  script:
+    - npm ci
+    - npm run lint || true
+  only:
+    - main
+    - merge_requests
+  needs:
+    - test
+
+#################################################
+#                                               #
+#                   PUBLISH                     #
+#                                               #
+#################################################
+
+publish:
+  stage: publish
+  image: node:latest
+  script:
+    - git config user.email "ci@example.com"
+    - git config user.name "CI Bot"
+    - git remote set-url origin https://${CI_PUSH_USER}:${CI_PUSH_TOKEN}@gitlab.com/datakeenteam/teamfullstack/client-sessions-react-sdk.git
+
+    - echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
+    - npm ci
+    - npm run build
+    - 'npm version patch -m "chore(release): %s [ci skip]"'
+
+    - git push origin HEAD:main
+    - git push origin --tags
+
+    - npm publish
+  only:
+    - main
+  needs:
+    - lint

package/README.md

@@ -1,87 +1,188 @@
-# Guide d'intégration - Datakeen Session React SDK
+# SDK Datakeen Session React
 
-## Résolution du problème ReactCurrentDispatcher
+<div style="background-color: #11E5C5; height: 8px; width: 100px; margin-bottom: 20px;"></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="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>
 
-### Changements apportés
+<div style="color: #3C3C40; font-size: 16px;">
 
-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)
+## 📦 Installation du SDK
 
-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
+Pour intégrer le SDK Datakeen Session dans votre projet React, vous pouvez utiliser npm, yarn ou pnpm :
 
 ```bash
+# Via npm
 npm install datakeen-session-react
+
+# Via yarn
+yarn add datakeen-session-react
+
+# Via pnpm
+pnpm add datakeen-session-react
 ```
 
-**Important :** Assurez-vous d'avoir installé toutes les peer dependencies :
+## 🚀 Guide de démarrage rapide
 
-```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
+### 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";
 ```
 
-### Utilisation
+### Étape 2 : Initialiser et afficher la session
 
-```tsx
-import React from 'react';
-import useSession from 'datakeen-session-react';
+```jsx
+const MonComposant = () => {
+  // Initialisation avec l'ID de session
+  const { SessionComponent } = useSession("votre-session-id");
 
-function App() {
-  const session = useSession();
-  
   return (
-    <div className="App">
-      {/* Votre composant utilisant le SDK */}
+    <div>
+      {/* Intégrez le composant de session où vous le souhaitez */}
+      {SessionComponent}
     </div>
   );
-}
-
-export default App;
+};
 ```
 
-### CSS
+## 💡 Cas d'utilisation courants
 
-N'oubliez pas d'importer le CSS du SDK :
+### Intégration dans une page de vérification d'identité
+
+```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);
+
+  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>
+  );
+};
+```
 
-```css
-@import 'datakeen-session-react/dist/datakeen-session-react.css';
+### 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>
+    );
+  }
+};
 ```
 
-### Résolution des problèmes
+## 📋 Flux de vérification supportés
+
+Le SDK prend en charge les documents d'identité des pays suivants :
+
+- 🇫🇷 France
+
+Les types de documents supportés incluent :
 
-Si vous rencontrez encore des erreurs :
+- Carte Nationale d'Identité
+- Passeport
+- Permis de conduire
+- Titre de séjour
 
-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"
-   }
-   ```
+## 🔧 Personnalisation
 
-### Build du SDK
+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.
 
-Pour rebuilder le SDK après modifications :
+## ⚙️ Configuration de l'environnement
+
+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 :
+
+```
+VITE_API_BASE_URL=http://localhost:8888
+```
+
+Pour une configuration rapide, vous pouvez utiliser la commande suivante dans le projet SDK :
 
 ```bash
-npm run clean
-npm run build
+npm run setup:env
 ```
 
-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)
+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>

package/dist/index.d.ts

@@ -1,2 +1,19 @@
-import { default as useSession } from './hooks/useSession';
-export default useSession;
+import React from 'react';
+
+interface SessionConfig {
+    selfie?: boolean;
+    requireMobile?: boolean;
+}
+interface UseSessionReturn {
+    SessionComponent: React.ReactElement;
+}
+
+/**
+ * Custom hook to manage the session component.
+ * @param {string} sessionId - The ID of the session.
+ * @param {SessionConfig} sessionConfig - Configuration for the session (optional).
+ * @returns {UseSessionReturn} - An object containing the session component. The session component is a React element that can be rendered in your application.
+ */
+declare const useSession: (sessionId: string, sessionConfig?: SessionConfig) => UseSessionReturn;
+
+export { useSession as default };