datakeen-session-react 1.1.8 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -156
- package/dist/datakeen-session-react.css +1 -1
- package/dist/services/documentService.d.ts +0 -0
- package/package.json +6 -5
- package/vite.config.ts +26 -29
- package/INTEGRATION_GUIDE.md +0 -87
- package/postcss.config.js +0 -6
- package/tailwind.config.js +0 -9
package/README.md
CHANGED
|
@@ -1,188 +1,87 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Guide d'intégration - Datakeen Session React SDK
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Résolution du problème ReactCurrentDispatcher
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
<img src="./assets/logo.svg" alt="Datakeen Logo" width="180"/>
|
|
7
|
-
<span style="font-size: 20px; color: #3C3C40; margin-left: 20px; font-weight: 500;">Documentation Technique</span>
|
|
8
|
-
</div>
|
|
5
|
+
Le problème `Cannot read properties of undefined (reading 'ReactCurrentDispatcher')` a été résolu en optimisant la configuration Vite pour un SDK React.
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
### Changements apportés
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
1. **Configuration Vite** (`vite.config.ts`) :
|
|
10
|
+
- Ajout du JSX runtime automatique
|
|
11
|
+
- Externalisation de React, React-DOM et JSX runtime
|
|
12
|
+
- Externalisation des dépendances UI (Radix, Headless UI, Lucide)
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
2. **Gestion des dépendances** (`package.json`) :
|
|
15
|
+
- React et React-DOM déplacés vers `peerDependencies` et `devDependencies`
|
|
16
|
+
- Dépendances UI déplacées vers `peerDependencies` pour éviter la duplication
|
|
17
|
+
|
|
18
|
+
### Installation dans une application React
|
|
15
19
|
|
|
16
20
|
```bash
|
|
17
|
-
# Via npm
|
|
18
21
|
npm install datakeen-session-react
|
|
19
|
-
|
|
20
|
-
# Via yarn
|
|
21
|
-
yarn add datakeen-session-react
|
|
22
|
-
|
|
23
|
-
# Via pnpm
|
|
24
|
-
pnpm add datakeen-session-react
|
|
25
22
|
```
|
|
26
23
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
### Prérequis
|
|
30
|
-
|
|
31
|
-
- Une application React fonctionnelle (React 16.8+ recommandé pour support des Hooks)
|
|
32
|
-
- Un identifiant de session Datakeen valide (obtenu via l'API Datakeen)
|
|
33
|
-
|
|
34
|
-
### Étape 1 : Importer le SDK
|
|
35
|
-
|
|
36
|
-
```jsx
|
|
37
|
-
import useSession from "datakeen-session-react";
|
|
38
|
-
```
|
|
24
|
+
**Important :** Assurez-vous d'avoir installé toutes les peer dependencies :
|
|
39
25
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```jsx
|
|
43
|
-
const MonComposant = () => {
|
|
44
|
-
// Initialisation avec l'ID de session
|
|
45
|
-
const { SessionComponent } = useSession("votre-session-id");
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<div>
|
|
49
|
-
{/* Intégrez le composant de session où vous le souhaitez */}
|
|
50
|
-
{SessionComponent}
|
|
51
|
-
</div>
|
|
52
|
-
);
|
|
53
|
-
};
|
|
26
|
+
```bash
|
|
27
|
+
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
|
|
54
28
|
```
|
|
55
29
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
### Intégration dans une page de vérification d'identité
|
|
30
|
+
### Utilisation
|
|
59
31
|
|
|
60
|
-
```
|
|
61
|
-
import React from
|
|
62
|
-
import useSession from
|
|
63
|
-
|
|
64
|
-
const VerificationPage = () => {
|
|
65
|
-
// Vous pouvez récupérer l'ID de session depuis votre backend
|
|
66
|
-
const sessionId = "votre-session-id";
|
|
67
|
-
const { SessionComponent } = useSession(sessionId);
|
|
32
|
+
```tsx
|
|
33
|
+
import React from 'react';
|
|
34
|
+
import useSession from 'datakeen-session-react';
|
|
68
35
|
|
|
36
|
+
function App() {
|
|
37
|
+
const session = useSession();
|
|
38
|
+
|
|
69
39
|
return (
|
|
70
|
-
<div className="
|
|
71
|
-
|
|
72
|
-
<p>Merci de suivre les étapes ci-dessous pour vérifier votre identité</p>
|
|
73
|
-
|
|
74
|
-
{/* Le SDK gère automatiquement toutes les étapes du processus */}
|
|
75
|
-
<div className="session-wrapper">{SessionComponent}</div>
|
|
40
|
+
<div className="App">
|
|
41
|
+
{/* Votre composant utilisant le SDK */}
|
|
76
42
|
</div>
|
|
77
43
|
);
|
|
78
|
-
}
|
|
79
|
-
```
|
|
44
|
+
}
|
|
80
45
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
```jsx
|
|
84
|
-
import React, { useState } from "react";
|
|
85
|
-
import useSession from "datakeen-session-react";
|
|
86
|
-
|
|
87
|
-
const OnboardingFlow = () => {
|
|
88
|
-
const [step, setStep] = useState(1);
|
|
89
|
-
const [sessionId, setSessionId] = useState(null);
|
|
90
|
-
|
|
91
|
-
// Fonction pour initialiser la session après l'étape 1
|
|
92
|
-
const initializeSession = async (userData) => {
|
|
93
|
-
// Exemple d'appel API pour obtenir un ID de session
|
|
94
|
-
const response = await fetch("https://api.votreservice.com/init-session", {
|
|
95
|
-
method: "POST",
|
|
96
|
-
body: JSON.stringify(userData),
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
const data = await response.json();
|
|
100
|
-
setSessionId(data.sessionId);
|
|
101
|
-
setStep(2);
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
// Rendu conditionnel basé sur l'étape
|
|
105
|
-
if (step === 1) {
|
|
106
|
-
return (
|
|
107
|
-
<div>
|
|
108
|
-
<h2>Étape 1: Informations de base</h2>
|
|
109
|
-
{/* Votre formulaire de collecte d'informations */}
|
|
110
|
-
<button
|
|
111
|
-
onClick={() =>
|
|
112
|
-
initializeSession({
|
|
113
|
-
/* données utilisateur */
|
|
114
|
-
})
|
|
115
|
-
}
|
|
116
|
-
>
|
|
117
|
-
Continuer
|
|
118
|
-
</button>
|
|
119
|
-
</div>
|
|
120
|
-
);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
if (step === 2 && sessionId) {
|
|
124
|
-
const { SessionComponent } = useSession(sessionId);
|
|
125
|
-
|
|
126
|
-
return (
|
|
127
|
-
<div>
|
|
128
|
-
<h2>Étape 2: Vérification d'identité</h2>
|
|
129
|
-
{SessionComponent}
|
|
130
|
-
</div>
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
};
|
|
46
|
+
export default App;
|
|
134
47
|
```
|
|
135
48
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
Le SDK prend en charge les documents d'identité des pays suivants :
|
|
49
|
+
### CSS
|
|
139
50
|
|
|
140
|
-
|
|
51
|
+
N'oubliez pas d'importer le CSS du SDK :
|
|
141
52
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
- Passeport
|
|
146
|
-
- Permis de conduire
|
|
147
|
-
- Titre de séjour
|
|
53
|
+
```css
|
|
54
|
+
@import 'datakeen-session-react/dist/datakeen-session-react.css';
|
|
55
|
+
```
|
|
148
56
|
|
|
149
|
-
|
|
57
|
+
### Résolution des problèmes
|
|
150
58
|
|
|
151
|
-
|
|
59
|
+
Si vous rencontrez encore des erreurs :
|
|
152
60
|
|
|
153
|
-
|
|
61
|
+
1. Vérifiez que toutes les peerDependencies sont installées
|
|
62
|
+
2. Assurez-vous qu'il n'y a qu'une seule version de React dans votre projet :
|
|
63
|
+
```bash
|
|
64
|
+
npm ls react
|
|
65
|
+
```
|
|
66
|
+
3. Si nécessaire, utilisez les résolutions de package dans votre `package.json` :
|
|
67
|
+
```json
|
|
68
|
+
"resolutions": {
|
|
69
|
+
"react": "^18.0.0",
|
|
70
|
+
"react-dom": "^18.0.0"
|
|
71
|
+
}
|
|
72
|
+
```
|
|
154
73
|
|
|
155
|
-
|
|
74
|
+
### Build du SDK
|
|
156
75
|
|
|
157
|
-
|
|
158
|
-
VITE_API_BASE_URL=http://localhost:8888
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
Pour une configuration rapide, vous pouvez utiliser la commande suivante dans le projet SDK :
|
|
76
|
+
Pour rebuilder le SDK après modifications :
|
|
162
77
|
|
|
163
78
|
```bash
|
|
164
|
-
npm run
|
|
79
|
+
npm run clean
|
|
80
|
+
npm run build
|
|
165
81
|
```
|
|
166
82
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
Pour toute question technique ou problème d'intégration :
|
|
174
|
-
|
|
175
|
-
- **Email Support**: support@datakeen.co
|
|
176
|
-
- **Documentation API**: [https://api.datakeen.co/docs](https://api.datakeen.co/docs)
|
|
177
|
-
- **Site Web**: [www.datakeen.co](https://www.datakeen.co)
|
|
178
|
-
|
|
179
|
-
</div>
|
|
180
|
-
|
|
181
|
-
<div style="background-color: #11E5C5; color: white; padding: 15px; border-radius: 5px; margin-top: 30px; display: flex; align-items: center; justify-content: space-between;">
|
|
182
|
-
<div>
|
|
183
|
-
<strong>Datakeen</strong> - Solutions d'identité numérique
|
|
184
|
-
</div>
|
|
185
|
-
<div>
|
|
186
|
-
Dernière mise à jour: Juin 2025
|
|
187
|
-
</div>
|
|
188
|
-
</div>
|
|
83
|
+
Le SDK sera construit dans le dossier `dist/` avec :
|
|
84
|
+
- `index.js` (CommonJS)
|
|
85
|
+
- `index.mjs` (ES Modules)
|
|
86
|
+
- `index.d.ts` (Types TypeScript)
|
|
87
|
+
- `datakeen-session-react.css` (Styles)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.\@container\/card-header{container:card-header/inline-size}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.top-full{top:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.container{width:100%}.mx-auto{margin-inline:auto}.mb-\[2px\]{margin-bottom:2px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-\[3\/2\]{aspect-ratio:3/2}.h-\[18px\]{height:18px}.h-\[48px\]{height:48px}.h-\[60px\]{height:60px}.h-\[75\%\]{height:75%}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[30vh\]{max-height:30vh}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-\[90px\]{width:90px}.w-\[322px\]{width:322px}.w-full{width:100%}.max-w-full{max-width:100%}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.scale-x-\[-1\]{--tw-scale-x:-1;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.auto-rows-min{grid-auto-rows:min-content}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-\[12px\]{border-radius:12px}.rounded-full{border-radius:3.40282e38px}.border,.border-1{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-t-3{border-top-style:var(--tw-border-style);border-top-width:3px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-3{border-bottom-style:var(--tw-border-style);border-bottom-width:3px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#3C3C40\]{border-color:#3c3c40}.border-\[\#11E5C5\]{border-color:#11e5c5}.border-t-\[\#11E5C5\]{border-top-color:#11e5c5}.border-t-transparent{border-top-color:#0000}.border-r-\[\#11E5C5\]{border-right-color:#11e5c5}.border-b-\[\#11E5C5\]{border-bottom-color:#11e5c5}.border-l-transparent{border-left-color:#0000}.bg-\[\#11E5C5\]{background-color:#11e5c5}.bg-transparent{background-color:#0000}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.text-center{text-align:center}.text-left{text-align:left}.leading-\[110\%\]{--tw-leading:110%;line-height:110%}.leading-\[120\%\]{--tw-leading:120%;line-height:120%}.leading-none{--tw-leading:1;line-height:1}.text-\[\#3C3C40\]{color:#3c3c40}.text-\[\#11E5C5\]{color:#11e5c5}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-100{opacity:1}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-\[\#3c3c401e\]:hover{background-color:#3c3c401e}.hover\:bg-\[\#7dffeb\]:hover{background-color:#7dffeb}.hover\:text-\[\#0FC5A8\]:hover{color:#0fc5a8}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-transparent:focus{border-color:#0000}.focus\:bg-\[\#41f6db25\]:focus{background-color:#41f6db25}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-\[\#11E5C5\]:focus{--tw-ring-color:#11e5c5}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:bg-\[\#11e5c57c\]:active{background-color:#11e5c57c}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.data-\[state\=checked\]\:border-\[\#11E5C5\][data-state=checked]{border-color:#11e5c5}.data-\[state\=checked\]\:bg-\[\#11E5C5\][data-state=checked]{background-color:#11e5c5}html{height:-webkit-fill-available}body{min-height:100vh;min-height:-webkit-fill-available;font-family:Open Sans,sans-serif}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}.force-style-selfie button.btn{color:#3c3c40!important}.force-style-selfie h1{font-family:sans-serif;font-size:20px!important;color:#3c3c40!important}.force-style-selfie{font-family:sans-serif;font-size:10px!important}.force-style-selfie.btn{color:#000!important}.selfie{--uni-primary-color: #11e5c5;--uni-secondary-color: #0a9983;--uni-primary-color-lighter: #37a998;--uni-secondary-color-lighter: #1cbeaa;--uni-alt-color: #086e5f;--uni-alt-color-lighter: #0d9485;--uni-light-color-variant-1: #d0f7f2;--uni-light-color-variant-2: #b2ece5;--uni-light-color: #fff;--uni-dark-color: #202020;--uni-error-color: #f44336;--uni-btn-padding: 10px 15px;--uni-btn-border: solid 0px;--uni-btn-border-radius: 12px;--uni-btn-font-size: 16px;--uni-btn-text-transform: normal;--uni-btn-border-outlined: solid 1px;--uni-btn-label-margin: 10px 0px;--uni-btn-disabled-bg-color: #eee;--uni-card-bg-color: rgba(51, 51, 51, .05)}body.recording-selfie{overflow:hidden;position:fixed;width:100%;height:100%;touch-action:none}.selfie uni-video-recorder{display:block;margin:0 auto;width:100%;height:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.selfie .video-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;position:relative;flex:1 1 auto}.selfie uni-video-recorder,.selfie uni-video-recorder *{max-height:100vh;overflow:hidden!important}html.selfie-active,body.selfie-active{overflow:hidden;height:100%;position:fixed;width:100%}.selfie uni-video-recorder::part(root),.selfie uni-video-recorder::shadow-dom(root){max-height:100vh;overflow:hidden!important}html,body{overscroll-behavior-y:contain}.selfie-guide-frame{transition:box-shadow .3s ease;border:2px solid #11e5c5;border-radius:50%}@keyframes pulse-border{0%{box-shadow:0 0 #11e5c5b3}70%{box-shadow:0 0 0 10px #11e5c500}to{box-shadow:0 0 #11e5c500}}.selfie-record-btn{animation:pulse-border 2s infinite}.selfie-instructions{background-color:#fff;border-radius:8px;padding:16px;margin:16px;box-shadow:0 2px 10px #0000001a}.recording-indicator{position:absolute;top:16px;right:16px;display:flex;align-items:center;background-color:#00000080;padding:4px 8px;border-radius:16px}.recording-dot{width:10px;height:10px;border-radius:50%;background-color:#ff3b30;margin-right:8px;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.selfie-confirmation-enter{opacity:0;transform:scale(.95)}.selfie-confirmation-enter-active{opacity:1;transform:scale(1);transition:opacity .3s,transform .3s}.selfie-preview{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a;border:2px solid #11e5c5;transition:transform .2s ease-in-out}.selfie-preview:hover{transform:scale(1.02)}.selfie-preview:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#0000 80%,#0003);pointer-events:none}.selfie button .loading-dots span{background-color:#fff!important}.loading-dots span{animation:loadingDots 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes loadingDots{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.alt-button{padding:10px 16px;border-radius:8px;font-size:14px;transition:all .2s ease;border:1px solid #e2e8f0}.alt-button:hover{background-color:#f8fafc}.alt-button:active{transform:translateY(1px)}uni-video-recorder::part(video-container),uni-video-recorder::shadow-dom(video-container){width:100%!important;height:100%!important;max-height:none!important;-o-object-fit:cover!important;object-fit:cover!important}.selfie uni-video-recorder video,.selfie uni-video-recorder canvas{width:100%!important;height:100%!important;-o-object-fit:cover!important;object-fit:cover!important;max-height:none!important}.video-fullscreen-container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.selfie-recorder-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-direction:column}.selfie-fullscreen,.selfie-fullscreen body{height:100%;overflow:hidden}.selfie-fullscreen #root,.selfie-fullscreen [data-reactroot]{height:100%}.selfie .video-container uni-video-recorder{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important}.selfie *{box-sizing:border-box}.selfie-parent{height:100%;display:flex;flex-direction:column}@media (max-height: 600px){.selfie-guide-frame{height:250px!important;max-width:250px!important}}@media (max-height: 500px){.selfie-guide-frame{height:200px!important;max-width:200px!important}}.selfie uni-video-recorder,uni-video-recorder::part(root),uni-video-recorder::shadow-dom(root),uni-video-recorder video,uni-video-recorder canvas{border-radius:0!important;overflow:hidden!important}uni-video-recorder::part(video-container),uni-video-recorder::shadow-dom(video-container),uni-video-recorder::part(video),uni-video-recorder::shadow-dom(video){border-radius:0!important}.video-container>div,.video-container>div>*,.selfie uni-video-recorder>*{border-radius:0!important}.video-recorder-no-radius,.video-recorder-no-radius::part(video),.video-recorder-no-radius::shadow-dom(video),.video-recorder-no-radius video,.video-recorder-no-radius canvas,.video-recorder-no-radius *{border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;overflow:hidden!important}.selfie video,.selfie canvas,.selfie uni-video-recorder,.selfie uni-video-recorder *,.video-container *,uni-video-recorder,uni-video-recorder *,uni-video-recorder *:before,uni-video-recorder *:after,uni-video-recorder div,uni-video-recorder video,uni-video-recorder canvas{border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;overflow:hidden!important;background:transparent!important}:host,:host(*),::part(*),::shadow-dom(*){border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important}.video-container uni-video-recorder{border-radius:0!important;transform:translateZ(0)}:root{--uni-video-recorder-border-radius: 0 !important;--uni-border-radius: 0 !important}.selfie .video-container uni-video-recorder{--border-radius: 0 !important;border-radius:0!important;overflow:hidden!important}.selfie button{background-color:var(--uni-primary-color, #11e5c5)!important;color:#3c3c40!important;border-radius:12px!important}.selfie button:hover{background-color:#7dffeb!important}.selfie button:active{background-color:#11e5c57c!important}.selfie button:disabled{background-color:#e2e8f0!important;opacity:.6!important;cursor:not-allowed!important}.video-js,.video-js *,.vjs-default-skin,.vjs-big-play-button,.vjs-control-bar,uni-video-recorder::shadow-dom(video-js),uni-video-recorder::part(video-js){border-radius:0!important;background-color:transparent!important;overflow:hidden!important}.video-js{width:100%!important;height:100%!important}.video-js video{-o-object-fit:cover!important;object-fit:cover!important;width:100%!important;height:100%!important;border-radius:0!important}.vjs-control-bar,.vjs-big-play-button,.vjs-menu-button,.vjs-menu-content,.vjs-modal-dialog,.vjs-volume-control,.vjs-progress-control{border-radius:0!important}.video-container:before,.video-container:after,.selfie:before,.selfie:after,uni-video-recorder:before,uni-video-recorder:after{display:none!important}::part(video),::shadow-dom(video),::part(canvas),::shadow-dom(canvas){border-radius:0!important;background:transparent!important}@supports (-webkit-appearance: none){.selfie video,.selfie canvas,uni-video-recorder video,uni-video-recorder canvas{border-radius:0!important;-webkit-border-radius:0!important;mask-image:none!important;-webkit-mask-image:none!important;transform:translateZ(0);-webkit-transform:translateZ(0)}}@-moz-document url-prefix(){.selfie video,.selfie canvas,uni-video-recorder video,uni-video-recorder canvas{border-radius:0!important}}.selfie button,button.selfie-button,.selfie-container button,.selfie .sticky button{background-color:#11e5c5!important;border-radius:12px!important;color:#3c3c40!important;overflow:visible!important}.selfie button:disabled,button.selfie-button:disabled,.selfie-container button:disabled,.selfie .sticky button:disabled{background-color:#e2e8f0!important}.selfie-button{background-color:#11e5c5!important;color:#3c3c40!important;border-radius:12px!important;cursor:pointer!important}.selfie-button:hover{background-color:#7dffeb!important}.selfie-button:active{background-color:#11e5c57c!important}.selfie-button:disabled{background-color:#e2e8f0!important;opacity:.6!important;cursor:not-allowed!important}.selfie-button .loading-dots span{background-color:#fff!important}
|
|
1
|
+
html{height:-webkit-fill-available}body{min-height:100vh;min-height:-webkit-fill-available;font-family:Open Sans,sans-serif}.force-style-selfie button.btn{color:#3c3c40!important}.force-style-selfie h1{font-family:sans-serif;font-size:20px!important;color:#3c3c40!important}.force-style-selfie{font-family:sans-serif;font-size:10px!important}.force-style-selfie.btn{color:#000!important}.selfie{--uni-primary-color: #11e5c5;--uni-secondary-color: #0a9983;--uni-primary-color-lighter: #37a998;--uni-secondary-color-lighter: #1cbeaa;--uni-alt-color: #086e5f;--uni-alt-color-lighter: #0d9485;--uni-light-color-variant-1: #d0f7f2;--uni-light-color-variant-2: #b2ece5;--uni-light-color: #fff;--uni-dark-color: #202020;--uni-error-color: #f44336;--uni-btn-padding: 10px 15px;--uni-btn-border: solid 0px;--uni-btn-border-radius: 12px;--uni-btn-font-size: 16px;--uni-btn-text-transform: normal;--uni-btn-border-outlined: solid 1px;--uni-btn-label-margin: 10px 0px;--uni-btn-disabled-bg-color: #eee;--uni-card-bg-color: rgba(51, 51, 51, .05)}body.recording-selfie{overflow:hidden;position:fixed;width:100%;height:100%;touch-action:none}.selfie uni-video-recorder{display:block;margin:0 auto;width:100%;height:100%;max-height:100%;object-fit:cover}.selfie .video-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;position:relative;flex:1 1 auto}.selfie uni-video-recorder,.selfie uni-video-recorder *{max-height:100vh;overflow:hidden!important}html.selfie-active,body.selfie-active{overflow:hidden;height:100%;position:fixed;width:100%}.selfie uni-video-recorder::part(root),.selfie uni-video-recorder::shadow-dom(root){max-height:100vh;overflow:hidden!important}html,body{overscroll-behavior-y:contain}.selfie-guide-frame{transition:box-shadow .3s ease;border:2px solid #11e5c5;border-radius:50%}@keyframes pulse-border{0%{box-shadow:0 0 #11e5c5b3}70%{box-shadow:0 0 0 10px #11e5c500}to{box-shadow:0 0 #11e5c500}}.selfie-record-btn{animation:pulse-border 2s infinite}.selfie-instructions{background-color:#fff;border-radius:8px;padding:16px;margin:16px;box-shadow:0 2px 10px #0000001a}.recording-indicator{position:absolute;top:16px;right:16px;display:flex;align-items:center;background-color:#00000080;padding:4px 8px;border-radius:16px}.recording-dot{width:10px;height:10px;border-radius:50%;background-color:#ff3b30;margin-right:8px;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.selfie-confirmation-enter{opacity:0;transform:scale(.95)}.selfie-confirmation-enter-active{opacity:1;transform:scale(1);transition:opacity .3s,transform .3s}.selfie-preview{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a;border:2px solid #11e5c5;transition:transform .2s ease-in-out}.selfie-preview:hover{transform:scale(1.02)}.selfie-preview:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#0000 80%,#0003);pointer-events:none}.selfie button .loading-dots span{background-color:#fff!important}.loading-dots span{animation:loadingDots 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes loadingDots{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.alt-button{padding:10px 16px;border-radius:8px;font-size:14px;transition:all .2s ease;border:1px solid #e2e8f0}.alt-button:hover{background-color:#f8fafc}.alt-button:active{transform:translateY(1px)}uni-video-recorder::part(video-container),uni-video-recorder::shadow-dom(video-container){width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important}.selfie uni-video-recorder video,.selfie uni-video-recorder canvas{width:100%!important;height:100%!important;object-fit:cover!important;max-height:none!important}.video-fullscreen-container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.selfie-recorder-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-direction:column}.selfie-fullscreen,.selfie-fullscreen body{height:100%;overflow:hidden}.selfie-fullscreen #root,.selfie-fullscreen [data-reactroot]{height:100%}.selfie .video-container uni-video-recorder{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important}.selfie *{box-sizing:border-box}.selfie-parent{height:100%;display:flex;flex-direction:column}@media (max-height: 600px){.selfie-guide-frame{height:250px!important;max-width:250px!important}}@media (max-height: 500px){.selfie-guide-frame{height:200px!important;max-width:200px!important}}.selfie uni-video-recorder,uni-video-recorder::part(root),uni-video-recorder::shadow-dom(root),uni-video-recorder video,uni-video-recorder canvas{border-radius:0!important;overflow:hidden!important}uni-video-recorder::part(video-container),uni-video-recorder::shadow-dom(video-container),uni-video-recorder::part(video),uni-video-recorder::shadow-dom(video){border-radius:0!important}.video-container>div,.video-container>div>*,.selfie uni-video-recorder>*{border-radius:0!important}.video-recorder-no-radius,.video-recorder-no-radius::part(video),.video-recorder-no-radius::shadow-dom(video),.video-recorder-no-radius video,.video-recorder-no-radius canvas,.video-recorder-no-radius *{border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;overflow:hidden!important}.selfie video,.selfie canvas,.selfie uni-video-recorder,.selfie uni-video-recorder *,.video-container *,uni-video-recorder,uni-video-recorder *,uni-video-recorder *:before,uni-video-recorder *:after,uni-video-recorder div,uni-video-recorder video,uni-video-recorder canvas{border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;overflow:hidden!important;background:transparent!important}:host,:host(*),::part(*),::shadow-dom(*){border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important}.video-container uni-video-recorder{border-radius:0!important;transform:translateZ(0)}:root{--uni-video-recorder-border-radius: 0 !important;--uni-border-radius: 0 !important}.selfie .video-container uni-video-recorder{--border-radius: 0 !important;border-radius:0!important;overflow:hidden!important}.selfie button{background-color:var(--uni-primary-color, #11e5c5)!important;color:#3c3c40!important;border-radius:12px!important}.selfie button:hover{background-color:#7dffeb!important}.selfie button:active{background-color:#11e5c57c!important}.selfie button:disabled{background-color:#e2e8f0!important;opacity:.6!important;cursor:not-allowed!important}.video-js,.video-js *,.vjs-default-skin,.vjs-big-play-button,.vjs-control-bar,uni-video-recorder::shadow-dom(video-js),uni-video-recorder::part(video-js){border-radius:0!important;background-color:transparent!important;overflow:hidden!important}.video-js{width:100%!important;height:100%!important}.video-js video{object-fit:cover!important;width:100%!important;height:100%!important;border-radius:0!important}.vjs-control-bar,.vjs-big-play-button,.vjs-menu-button,.vjs-menu-content,.vjs-modal-dialog,.vjs-volume-control,.vjs-progress-control{border-radius:0!important}.video-container:before,.video-container:after,.selfie:before,.selfie:after,uni-video-recorder:before,uni-video-recorder:after{display:none!important}::part(video),::shadow-dom(video),::part(canvas),::shadow-dom(canvas){border-radius:0!important;background:transparent!important}@supports (-webkit-appearance: none){.selfie video,.selfie canvas,uni-video-recorder video,uni-video-recorder canvas{border-radius:0!important;-webkit-border-radius:0!important;mask-image:none!important;-webkit-mask-image:none!important;transform:translateZ(0);-webkit-transform:translateZ(0)}}@-moz-document url-prefix(){.selfie video,.selfie canvas,uni-video-recorder video,uni-video-recorder canvas{border-radius:0!important}}.selfie button,button.selfie-button,.selfie-container button,.selfie .sticky button{background-color:#11e5c5!important;border-radius:12px!important;color:#3c3c40!important;overflow:visible!important}.selfie button:disabled,button.selfie-button:disabled,.selfie-container button:disabled,.selfie .sticky button:disabled{background-color:#e2e8f0!important}.selfie-button{background-color:#11e5c5!important;color:#3c3c40!important;border-radius:12px!important;cursor:pointer!important}.selfie-button:hover{background-color:#7dffeb!important}.selfie-button:active{background-color:#11e5c57c!important}.selfie-button:disabled{background-color:#e2e8f0!important;opacity:.6!important;cursor:not-allowed!important}.selfie-button .loading-dots span{background-color:#fff!important}
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datakeen-session-react",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.10",
|
|
4
4
|
"description": "React SDK component to manage and render Datakeen session experiences easily.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
"react": "^18.0.0",
|
|
48
48
|
"react-dom": "^18.0.0",
|
|
49
49
|
"tailwindcss": "^4.1.7",
|
|
50
|
+
"@tailwindcss/vite": "^4.1.11",
|
|
50
51
|
"terser": "^5.36.0",
|
|
51
52
|
"tslib": "^2.8.1",
|
|
52
53
|
"typescript": "^5.8.3",
|
|
@@ -64,15 +65,15 @@
|
|
|
64
65
|
"tailwind-merge": "^3.3.1"
|
|
65
66
|
},
|
|
66
67
|
"peerDependencies": {
|
|
67
|
-
"react": "^18.0.0",
|
|
68
|
-
"react-dom": "^18.0.0",
|
|
69
|
-
"axios": "^1.8.0",
|
|
70
68
|
"@headlessui/react": "^2.2.4",
|
|
71
69
|
"@radix-ui/react-checkbox": "^1.3.2",
|
|
72
70
|
"@radix-ui/react-icons": "^1.3.2",
|
|
73
71
|
"@radix-ui/react-label": "^2.1.6",
|
|
74
72
|
"@radix-ui/react-select": "^2.2.5",
|
|
75
|
-
"
|
|
73
|
+
"axios": "^1.8.0",
|
|
74
|
+
"lucide-react": "^0.511.0",
|
|
75
|
+
"react": "^18.0.0",
|
|
76
|
+
"react-dom": "^18.0.0"
|
|
76
77
|
},
|
|
77
78
|
"scripts": {
|
|
78
79
|
"build": "vite build",
|
package/vite.config.ts
CHANGED
|
@@ -1,52 +1,49 @@
|
|
|
1
|
-
import { defineConfig } from
|
|
2
|
-
import react from
|
|
3
|
-
import { resolve } from
|
|
4
|
-
import dts from
|
|
1
|
+
import { defineConfig } from "vite";
|
|
2
|
+
import react from "@vitejs/plugin-react";
|
|
3
|
+
import { resolve } from "path";
|
|
4
|
+
import dts from "vite-plugin-dts";
|
|
5
5
|
|
|
6
6
|
export default defineConfig({
|
|
7
7
|
plugins: [
|
|
8
8
|
react({
|
|
9
|
-
jsxRuntime:
|
|
9
|
+
jsxRuntime: "automatic",
|
|
10
10
|
}),
|
|
11
11
|
dts({
|
|
12
|
-
include: [
|
|
13
|
-
exclude: [
|
|
14
|
-
outDir:
|
|
12
|
+
include: ["src/**/*"],
|
|
13
|
+
exclude: ["src/**/*.test.*", "src/**/*.spec.*"],
|
|
14
|
+
outDir: "dist",
|
|
15
15
|
insertTypesEntry: true,
|
|
16
16
|
}),
|
|
17
17
|
],
|
|
18
18
|
build: {
|
|
19
19
|
lib: {
|
|
20
|
-
entry: resolve(__dirname,
|
|
21
|
-
name:
|
|
22
|
-
formats: [
|
|
23
|
-
fileName: (format) => `index.${format ===
|
|
20
|
+
entry: resolve(__dirname, "src/index.ts"),
|
|
21
|
+
name: "DatakeenSessionReact",
|
|
22
|
+
formats: ["es", "cjs"],
|
|
23
|
+
fileName: (format) => `index.${format === "es" ? "mjs" : "js"}`,
|
|
24
24
|
},
|
|
25
25
|
rollupOptions: {
|
|
26
26
|
external: [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
"react",
|
|
28
|
+
"react-dom",
|
|
29
|
+
"react/jsx-runtime",
|
|
30
|
+
"react/jsx-dev-runtime",
|
|
31
|
+
"axios",
|
|
32
|
+
"lucide-react",
|
|
33
33
|
/^@radix-ui\/.*/,
|
|
34
|
-
/^@headlessui
|
|
34
|
+
/^@headlessui\/.*/,
|
|
35
35
|
],
|
|
36
36
|
output: {
|
|
37
37
|
globals: {
|
|
38
|
-
react:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
axios:
|
|
38
|
+
react: "React",
|
|
39
|
+
"react-dom": "ReactDOM",
|
|
40
|
+
"react/jsx-runtime": "React",
|
|
41
|
+
"react/jsx-dev-runtime": "React",
|
|
42
|
+
axios: "axios",
|
|
43
43
|
},
|
|
44
44
|
},
|
|
45
45
|
},
|
|
46
46
|
sourcemap: true,
|
|
47
|
-
minify:
|
|
47
|
+
minify: "terser",
|
|
48
48
|
},
|
|
49
|
-
|
|
50
|
-
postcss: './postcss.config.js',
|
|
51
|
-
},
|
|
52
|
-
})
|
|
49
|
+
});
|
package/INTEGRATION_GUIDE.md
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
# Guide d'intégration - Datakeen Session React SDK
|
|
2
|
-
|
|
3
|
-
## Résolution du problème ReactCurrentDispatcher
|
|
4
|
-
|
|
5
|
-
Le problème `Cannot read properties of undefined (reading 'ReactCurrentDispatcher')` a été résolu en optimisant la configuration Vite pour un SDK React.
|
|
6
|
-
|
|
7
|
-
### Changements apportés
|
|
8
|
-
|
|
9
|
-
1. **Configuration Vite** (`vite.config.ts`) :
|
|
10
|
-
- Ajout du JSX runtime automatique
|
|
11
|
-
- Externalisation de React, React-DOM et JSX runtime
|
|
12
|
-
- Externalisation des dépendances UI (Radix, Headless UI, Lucide)
|
|
13
|
-
|
|
14
|
-
2. **Gestion des dépendances** (`package.json`) :
|
|
15
|
-
- React et React-DOM déplacés vers `peerDependencies` et `devDependencies`
|
|
16
|
-
- Dépendances UI déplacées vers `peerDependencies` pour éviter la duplication
|
|
17
|
-
|
|
18
|
-
### Installation dans une application React
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm install datakeen-session-react
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
**Important :** Assurez-vous d'avoir installé toutes les peer dependencies :
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
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
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### Utilisation
|
|
31
|
-
|
|
32
|
-
```tsx
|
|
33
|
-
import React from 'react';
|
|
34
|
-
import useSession from 'datakeen-session-react';
|
|
35
|
-
|
|
36
|
-
function App() {
|
|
37
|
-
const session = useSession();
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<div className="App">
|
|
41
|
-
{/* Votre composant utilisant le SDK */}
|
|
42
|
-
</div>
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export default App;
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### CSS
|
|
50
|
-
|
|
51
|
-
N'oubliez pas d'importer le CSS du SDK :
|
|
52
|
-
|
|
53
|
-
```css
|
|
54
|
-
@import 'datakeen-session-react/dist/datakeen-session-react.css';
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
### Résolution des problèmes
|
|
58
|
-
|
|
59
|
-
Si vous rencontrez encore des erreurs :
|
|
60
|
-
|
|
61
|
-
1. Vérifiez que toutes les peerDependencies sont installées
|
|
62
|
-
2. Assurez-vous qu'il n'y a qu'une seule version de React dans votre projet :
|
|
63
|
-
```bash
|
|
64
|
-
npm ls react
|
|
65
|
-
```
|
|
66
|
-
3. Si nécessaire, utilisez les résolutions de package dans votre `package.json` :
|
|
67
|
-
```json
|
|
68
|
-
"resolutions": {
|
|
69
|
-
"react": "^18.0.0",
|
|
70
|
-
"react-dom": "^18.0.0"
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Build du SDK
|
|
75
|
-
|
|
76
|
-
Pour rebuilder le SDK après modifications :
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
npm run clean
|
|
80
|
-
npm run build
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
Le SDK sera construit dans le dossier `dist/` avec :
|
|
84
|
-
- `index.js` (CommonJS)
|
|
85
|
-
- `index.mjs` (ES Modules)
|
|
86
|
-
- `index.d.ts` (Types TypeScript)
|
|
87
|
-
- `datakeen-session-react.css` (Styles)
|
package/postcss.config.js
DELETED