@incodetech/web 2.0.0-alpha.1

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.
Files changed (176) hide show
  1. package/dev/README.md +163 -0
  2. package/dev/getToken.ts +36 -0
  3. package/dev/headless.html +875 -0
  4. package/dev/index.html +366 -0
  5. package/dev/main-headless.tsx +1332 -0
  6. package/dev/main-orchestrated-flow.tsx +1158 -0
  7. package/dev/main-preact.tsx +323 -0
  8. package/dev/main-simplified.tsx +123 -0
  9. package/dev/main-web-component.tsx +256 -0
  10. package/dev/main.tsx +332 -0
  11. package/dev/manual.html +27 -0
  12. package/dev/orchestrated-flow.html +64 -0
  13. package/dev/simplified.html +64 -0
  14. package/dev/tiktok-logo.svg +7 -0
  15. package/package.json +85 -0
  16. package/src/defineCustomElement.tsx +30 -0
  17. package/src/email/email.test.tsx +368 -0
  18. package/src/email/email.tsx +255 -0
  19. package/src/email/emailInput.test.tsx +264 -0
  20. package/src/email/emailInput.tsx +85 -0
  21. package/src/email/styles.css +59 -0
  22. package/src/flow/flow.test.tsx +796 -0
  23. package/src/flow/flow.tsx +292 -0
  24. package/src/flow/flowCompleted.css +30 -0
  25. package/src/flow/flowCompleted.test.tsx +331 -0
  26. package/src/flow/flowCompleted.tsx +121 -0
  27. package/src/flow/flowInit.test.ts +264 -0
  28. package/src/flow/flowInit.ts +94 -0
  29. package/src/flow/flowStart.css +58 -0
  30. package/src/flow/flowStart.test.tsx +49 -0
  31. package/src/flow/flowStart.tsx +41 -0
  32. package/src/flow/incode-logo.svg +8 -0
  33. package/src/flow/index.ts +7 -0
  34. package/src/flow/preloadFlow.test.ts +421 -0
  35. package/src/flow/preloadFlow.ts +171 -0
  36. package/src/flow/styles.css +9 -0
  37. package/src/flow/unsupportedModule.css +21 -0
  38. package/src/flow/unsupportedModule.tsx +39 -0
  39. package/src/flow/useFlowInitialization.test.tsx +292 -0
  40. package/src/flow/useFlowInitialization.ts +128 -0
  41. package/src/flow/useModuleLoader.test.tsx +212 -0
  42. package/src/flow/useModuleLoader.ts +92 -0
  43. package/src/hooks/index.ts +1 -0
  44. package/src/hooks/useManager.test.ts +91 -0
  45. package/src/hooks/useManager.ts +40 -0
  46. package/src/i18n/index.ts +3 -0
  47. package/src/i18n/instance.ts +16 -0
  48. package/src/i18n/setup.ts +184 -0
  49. package/src/i18n/useTranslation.ts +42 -0
  50. package/src/index.ts +27 -0
  51. package/src/permissions/assets/android-dots-icon.svg +7 -0
  52. package/src/permissions/assets/android-settings-icon.svg +16 -0
  53. package/src/permissions/assets/android-toggle-icon.svg +20 -0
  54. package/src/permissions/assets/bank-card-icon.svg +14 -0
  55. package/src/permissions/assets/camera-icon.svg +12 -0
  56. package/src/permissions/assets/camera-ios.svg +53 -0
  57. package/src/permissions/assets/check-icon.svg +8 -0
  58. package/src/permissions/assets/chrome-icon.svg +43 -0
  59. package/src/permissions/assets/password-icon.svg +11 -0
  60. package/src/permissions/assets/permissions-img.svg +51 -0
  61. package/src/permissions/assets/safari-icon.svg +37 -0
  62. package/src/permissions/assets/settings-icon.svg +33 -0
  63. package/src/permissions/assets/toggle-icon.svg +19 -0
  64. package/src/permissions/assets/warning-icon.svg +6 -0
  65. package/src/permissions/boldWithArrow.css +9 -0
  66. package/src/permissions/boldWithArrow.tsx +41 -0
  67. package/src/permissions/denied.css +37 -0
  68. package/src/permissions/denied.tsx +29 -0
  69. package/src/permissions/deniedAndroid.tsx +56 -0
  70. package/src/permissions/deniedDesktop.css +9 -0
  71. package/src/permissions/deniedDesktop.tsx +64 -0
  72. package/src/permissions/deniedIOS.tsx +73 -0
  73. package/src/permissions/deniedInstructions.tsx +19 -0
  74. package/src/permissions/iconWrapper.css +9 -0
  75. package/src/permissions/iconWrapper.tsx +15 -0
  76. package/src/permissions/learnMore.css +37 -0
  77. package/src/permissions/learnMore.tsx +85 -0
  78. package/src/permissions/numberedStep.css +13 -0
  79. package/src/permissions/numberedStep.tsx +14 -0
  80. package/src/permissions/permissions.css +13 -0
  81. package/src/permissions/permissions.tsx +68 -0
  82. package/src/phone/phone.tsx +246 -0
  83. package/src/phone/phoneInput.test.tsx +275 -0
  84. package/src/phone/phoneInput.tsx +249 -0
  85. package/src/phone/styles.css +158 -0
  86. package/src/selfie/cameraButton.css +13 -0
  87. package/src/selfie/cameraButton.tsx +35 -0
  88. package/src/selfie/capture.css +57 -0
  89. package/src/selfie/capture.tsx +232 -0
  90. package/src/selfie/errorModal.tsx +218 -0
  91. package/src/selfie/errorModalContent.css +33 -0
  92. package/src/selfie/errorModalContent.tsx +44 -0
  93. package/src/selfie/faceOutline.css +5 -0
  94. package/src/selfie/faceOutline.tsx +22 -0
  95. package/src/selfie/loadingBorder.css +12 -0
  96. package/src/selfie/loadingBorder.tsx +77 -0
  97. package/src/selfie/manualCaptureButton.css +13 -0
  98. package/src/selfie/manualCaptureButton.tsx +35 -0
  99. package/src/selfie/noMoreAttemptsModal.tsx +44 -0
  100. package/src/selfie/notification.css +9 -0
  101. package/src/selfie/notification.tsx +36 -0
  102. package/src/selfie/retryErrorModal.tsx +56 -0
  103. package/src/selfie/selfie.test.tsx +458 -0
  104. package/src/selfie/selfie.tsx +83 -0
  105. package/src/selfie/selfieTutorial.json +2626 -0
  106. package/src/selfie/styles.css +1 -0
  107. package/src/selfie/tutorial.test.tsx +200 -0
  108. package/src/selfie/tutorial.tsx +43 -0
  109. package/src/setup.ts +33 -0
  110. package/src/shared/baseTutorial/baseTutorial.css +21 -0
  111. package/src/shared/baseTutorial/baseTutorial.test.tsx +184 -0
  112. package/src/shared/baseTutorial/baseTutorial.tsx +55 -0
  113. package/src/shared/baseTutorial/replaceBaseTutorial.test.ts +267 -0
  114. package/src/shared/baseTutorial/replaceBaseTutorial.ts +68 -0
  115. package/src/shared/button/button.css +55 -0
  116. package/src/shared/button/button.test.tsx +101 -0
  117. package/src/shared/button/button.tsx +47 -0
  118. package/src/shared/componentRoot/incodeComponent.tsx +12 -0
  119. package/src/shared/countries/countries.test.ts +75 -0
  120. package/src/shared/countries/countries.ts +139 -0
  121. package/src/shared/countries/index.ts +6 -0
  122. package/src/shared/icons/chevronDown.tsx +22 -0
  123. package/src/shared/icons/index.ts +2 -0
  124. package/src/shared/icons/successIcon.css +5 -0
  125. package/src/shared/icons/successIcon.test.tsx +40 -0
  126. package/src/shared/icons/successIcon.tsx +26 -0
  127. package/src/shared/loader/loadingIcon.css +28 -0
  128. package/src/shared/loader/loadingIcon.tsx +67 -0
  129. package/src/shared/lottie/lottie.tsx +108 -0
  130. package/src/shared/otpInput/otpInput.css +85 -0
  131. package/src/shared/otpInput/otpInput.test.tsx +356 -0
  132. package/src/shared/otpInput/otpInput.tsx +241 -0
  133. package/src/shared/page/incode-logo.svg +3 -0
  134. package/src/shared/page/page.css +47 -0
  135. package/src/shared/page/page.test.tsx +97 -0
  136. package/src/shared/page/page.tsx +91 -0
  137. package/src/shared/page/pageUiConfig.test.ts +112 -0
  138. package/src/shared/page/pageUiConfig.ts +64 -0
  139. package/src/shared/page/verifiedByIncode.css +5 -0
  140. package/src/shared/page/verifiedByIncode.tsx +75 -0
  141. package/src/shared/spacer/spacer.css +149 -0
  142. package/src/shared/spacer/spacer.test.tsx +143 -0
  143. package/src/shared/spacer/spacer.tsx +88 -0
  144. package/src/shared/spinner/index.ts +2 -0
  145. package/src/shared/spinner/spinner.css +28 -0
  146. package/src/shared/spinner/spinner.test.tsx +82 -0
  147. package/src/shared/spinner/spinner.tsx +65 -0
  148. package/src/shared/title/title.css +7 -0
  149. package/src/shared/title/title.tsx +12 -0
  150. package/src/shared/uiConfig/uiConfig.ts +36 -0
  151. package/src/shared/webComponent/incodeModule.ts +29 -0
  152. package/src/shared/webComponent/registerIncodeElement.ts +15 -0
  153. package/src/styles/__mocks__/fetchTheme.ts +19 -0
  154. package/src/styles/applyTheme.ts +37 -0
  155. package/src/styles/cn.test.tsx +57 -0
  156. package/src/styles/cn.tsx +21 -0
  157. package/src/styles/core.css +12 -0
  158. package/src/styles/fetchTheme.test.ts +390 -0
  159. package/src/styles/fetchTheme.ts +88 -0
  160. package/src/styles/generatePalette.ts +111 -0
  161. package/src/styles/reset.css +65 -0
  162. package/src/styles/resolveCssVariableToHex.ts +28 -0
  163. package/src/styles/tailwind.css +291 -0
  164. package/src/styles/themeTypes.ts +18 -0
  165. package/src/styles/tokens/colors.css +190 -0
  166. package/src/styles/tokens/components.css +174 -0
  167. package/src/styles/tokens/index.css +4 -0
  168. package/src/styles/tokens/primitives.css +129 -0
  169. package/src/styles/tokens/semantic.css +51 -0
  170. package/src/svg.d.ts +4 -0
  171. package/src/types/assets.d.ts +1 -0
  172. package/src/types/custom-elements.d.ts +104 -0
  173. package/tsconfig.json +22 -0
  174. package/vite.config.ts +260 -0
  175. package/vitest.config.ts +40 -0
  176. package/vitest.setup.ts +16 -0
package/dev/index.html ADDED
@@ -0,0 +1,366 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Incode Web SDK - Dev Demos</title>
7
+ <style>
8
+ /* Incode Design Tokens */
9
+ :root {
10
+ /* Primitives */
11
+ --color-gray-0: #ffffff;
12
+ --color-gray-50: #fcfcfd;
13
+ --color-gray-100: #ebecef;
14
+ --color-gray-200: #c6c8d2;
15
+ --color-gray-300: #a3a8b8;
16
+ --color-gray-500: #60667c;
17
+ --color-gray-700: #3a3e4b;
18
+ --color-gray-800: #262831;
19
+ --color-gray-900: #14151a;
20
+ --color-gray-1000: #000000;
21
+
22
+ --color-brand-50: #e5f0ff;
23
+ --color-brand-200: #99ceff;
24
+ --color-brand-300: #66a6ff;
25
+ --color-brand-400: #3388ff;
26
+ --color-brand-500: #006aff;
27
+ --color-brand-600: #0055cc;
28
+
29
+ --color-positive-600: #189f60;
30
+ --color-warning-500: #ff9900;
31
+ --color-negative-500: #ff5a5f;
32
+
33
+ --font-family: "Rethink Sans", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
34
+ --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
35
+ }
36
+
37
+ * {
38
+ box-sizing: border-box;
39
+ margin: 0;
40
+ padding: 0;
41
+ }
42
+
43
+ body {
44
+ font-family: var(--font-family);
45
+ background: var(--color-gray-900);
46
+ min-height: 100vh;
47
+ color: var(--color-gray-50);
48
+ padding: 2rem;
49
+ }
50
+
51
+ .container {
52
+ max-width: 1200px;
53
+ margin: 0 auto;
54
+ }
55
+
56
+ header {
57
+ text-align: center;
58
+ margin-bottom: 3rem;
59
+ }
60
+
61
+ h1 {
62
+ font-size: 2.5rem;
63
+ font-weight: 700;
64
+ color: var(--color-brand-500);
65
+ margin-bottom: 0.5rem;
66
+ }
67
+
68
+ .subtitle {
69
+ color: var(--color-gray-300);
70
+ font-size: 1.1rem;
71
+ }
72
+
73
+ .config-section {
74
+ background: var(--color-gray-800);
75
+ border: 1px solid var(--color-gray-700);
76
+ border-radius: 12px;
77
+ padding: 1.5rem;
78
+ margin-bottom: 2rem;
79
+ }
80
+
81
+ .config-section label {
82
+ display: block;
83
+ font-size: 0.875rem;
84
+ color: var(--color-gray-300);
85
+ margin-bottom: 0.5rem;
86
+ }
87
+
88
+ .config-input-row {
89
+ display: flex;
90
+ gap: 1rem;
91
+ align-items: center;
92
+ }
93
+
94
+ .config-input-row input {
95
+ flex: 1;
96
+ background: var(--color-gray-900);
97
+ border: 1px solid var(--color-gray-700);
98
+ border-radius: 8px;
99
+ padding: 0.75rem 1rem;
100
+ font-size: 1rem;
101
+ color: var(--color-gray-0);
102
+ font-family: var(--font-mono);
103
+ transition: border-color 0.2s, box-shadow 0.2s;
104
+ }
105
+
106
+ .config-input-row input:focus {
107
+ outline: none;
108
+ border-color: var(--color-brand-500);
109
+ box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.2);
110
+ }
111
+
112
+ .config-input-row input::placeholder {
113
+ color: var(--color-gray-500);
114
+ }
115
+
116
+ .config-hint {
117
+ font-size: 0.75rem;
118
+ color: var(--color-gray-500);
119
+ margin-top: 0.5rem;
120
+ }
121
+
122
+ .demos-grid {
123
+ display: grid;
124
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
125
+ gap: 1.5rem;
126
+ }
127
+
128
+ .demo-card {
129
+ background: var(--color-gray-800);
130
+ border: 1px solid var(--color-gray-700);
131
+ border-radius: 16px;
132
+ padding: 1.5rem;
133
+ text-decoration: none;
134
+ color: inherit;
135
+ transition: transform 0.2s, border-color 0.2s, background 0.2s;
136
+ display: flex;
137
+ flex-direction: column;
138
+ gap: 0.75rem;
139
+ }
140
+
141
+ .demo-card:hover {
142
+ transform: translateY(-4px);
143
+ border-color: var(--color-brand-400);
144
+ background: rgba(0, 106, 255, 0.05);
145
+ }
146
+
147
+ .demo-header {
148
+ display: flex;
149
+ justify-content: space-between;
150
+ align-items: flex-start;
151
+ }
152
+
153
+ .demo-title {
154
+ font-size: 1.25rem;
155
+ font-weight: 600;
156
+ color: var(--color-gray-0);
157
+ }
158
+
159
+ .demo-badge {
160
+ font-size: 0.7rem;
161
+ font-weight: 600;
162
+ padding: 0.25rem 0.5rem;
163
+ border-radius: 4px;
164
+ text-transform: uppercase;
165
+ letter-spacing: 0.05em;
166
+ }
167
+
168
+ .badge-recommended {
169
+ background: rgba(24, 159, 96, 0.15);
170
+ color: var(--color-positive-600);
171
+ }
172
+
173
+ .badge-simple {
174
+ background: rgba(0, 106, 255, 0.15);
175
+ color: var(--color-brand-400);
176
+ }
177
+
178
+ .badge-advanced {
179
+ background: rgba(255, 153, 0, 0.15);
180
+ color: var(--color-warning-500);
181
+ }
182
+
183
+ .badge-legacy {
184
+ background: rgba(163, 168, 184, 0.15);
185
+ color: var(--color-gray-300);
186
+ }
187
+
188
+ .demo-pattern {
189
+ font-size: 0.8rem;
190
+ color: var(--color-brand-400);
191
+ font-family: var(--font-mono);
192
+ }
193
+
194
+ .demo-description {
195
+ font-size: 0.9rem;
196
+ color: var(--color-gray-300);
197
+ line-height: 1.5;
198
+ }
199
+
200
+ .demo-footer {
201
+ display: flex;
202
+ justify-content: space-between;
203
+ align-items: center;
204
+ margin-top: auto;
205
+ padding-top: 0.75rem;
206
+ border-top: 1px solid var(--color-gray-700);
207
+ }
208
+
209
+ .demo-complexity {
210
+ font-size: 0.75rem;
211
+ color: var(--color-gray-500);
212
+ }
213
+
214
+ .demo-arrow {
215
+ color: var(--color-brand-500);
216
+ font-size: 1.25rem;
217
+ transition: transform 0.2s;
218
+ }
219
+
220
+ .demo-card:hover .demo-arrow {
221
+ transform: translateX(4px);
222
+ }
223
+
224
+ .section-title {
225
+ font-size: 0.875rem;
226
+ font-weight: 600;
227
+ color: var(--color-gray-500);
228
+ text-transform: uppercase;
229
+ letter-spacing: 0.1em;
230
+ margin-bottom: 1rem;
231
+ }
232
+
233
+ footer {
234
+ margin-top: 3rem;
235
+ text-align: center;
236
+ color: var(--color-gray-500);
237
+ font-size: 0.875rem;
238
+ }
239
+
240
+ footer a {
241
+ color: var(--color-brand-500);
242
+ text-decoration: none;
243
+ }
244
+
245
+ footer a:hover {
246
+ text-decoration: underline;
247
+ }
248
+ </style>
249
+ </head>
250
+ <body>
251
+ <div class="container">
252
+ <header>
253
+ <h1>Incode Web SDK</h1>
254
+ <p class="subtitle">Development Demos</p>
255
+ </header>
256
+
257
+ <section class="config-section">
258
+ <label for="configId">Configuration ID</label>
259
+ <div class="config-input-row">
260
+ <input
261
+ type="text"
262
+ id="configId"
263
+ placeholder="Enter your configId (e.g., 67ddc65d36b9814a930c4dff)"
264
+ />
265
+ </div>
266
+ <p class="config-hint">Used by Simplified and Orchestrated demos to fetch session tokens</p>
267
+ </section>
268
+
269
+ <p class="section-title">Choose Your Integration Level</p>
270
+ <p style="color: var(--color-gray-300); margin-bottom: 1.5rem; font-size: 0.95rem;">
271
+ From zero-code web component to fully custom UI — pick the level of control you need.
272
+ </p>
273
+
274
+ <div class="demos-grid">
275
+ <a href="#" class="demo-card" data-demo="simplified">
276
+ <div class="demo-header">
277
+ <span class="demo-title">Web Component</span>
278
+ <span class="demo-badge badge-simple">Easiest</span>
279
+ </div>
280
+ <span class="demo-pattern">&lt;incode-flow&gt;</span>
281
+ <p class="demo-description">
282
+ <strong>Zero customization needed.</strong> Drop-in web component with built-in start screen, module rendering, completion handling, and error states. Just set props and go.
283
+ </p>
284
+ <div class="demo-footer">
285
+ <span class="demo-complexity">Setup: ~5 lines of code</span>
286
+ <span class="demo-arrow">→</span>
287
+ </div>
288
+ </a>
289
+
290
+ <a href="#" class="demo-card" data-demo="orchestrated">
291
+ <div class="demo-header">
292
+ <span class="demo-title">Orchestrated Flow</span>
293
+ <span class="demo-badge badge-recommended">Recommended</span>
294
+ </div>
295
+ <span class="demo-pattern">createOrchestratedFlowManager()</span>
296
+ <p class="demo-description">
297
+ <strong>Custom wrapper, standard modules.</strong> You control loading states, error handling, screens between modules, and styling. Uses the same Selfie/Phone/Email components internally.
298
+ </p>
299
+ <div class="demo-footer">
300
+ <span class="demo-complexity">Setup: ~50 lines of code</span>
301
+ <span class="demo-arrow">→</span>
302
+ </div>
303
+ </a>
304
+
305
+ <a href="#" class="demo-card" data-demo="headless">
306
+ <div class="demo-header">
307
+ <span class="demo-title">Headless Mode</span>
308
+ <span class="demo-badge badge-advanced">Full Control</span>
309
+ </div>
310
+ <span class="demo-pattern">createPhoneManager()</span>
311
+ <p class="demo-description">
312
+ <strong>Build your own UI entirely.</strong> Access the state machine directly with no pre-built components. Full control over every visual element using vanilla JS, React, Vue, or any framework.
313
+ </p>
314
+ <div class="demo-footer">
315
+ <span class="demo-complexity">Setup: 100+ lines of code</span>
316
+ <span class="demo-arrow">→</span>
317
+ </div>
318
+ </a>
319
+ </div>
320
+
321
+ <footer>
322
+ <p>See <a href="/README.md">README.md</a> for detailed documentation</p>
323
+ </footer>
324
+ </div>
325
+
326
+ <script>
327
+ const configInput = document.getElementById('configId');
328
+ const STORAGE_KEY = 'incode-dev-configId';
329
+
330
+ // Load saved configId
331
+ const savedConfigId = localStorage.getItem(STORAGE_KEY);
332
+ if (savedConfigId) {
333
+ configInput.value = savedConfigId;
334
+ }
335
+
336
+ // Save on change
337
+ configInput.addEventListener('input', () => {
338
+ localStorage.setItem(STORAGE_KEY, configInput.value);
339
+ });
340
+
341
+ // Handle demo links
342
+ document.querySelectorAll('.demo-card[data-demo]').forEach(card => {
343
+ card.addEventListener('click', (e) => {
344
+ e.preventDefault();
345
+ const demo = card.dataset.demo;
346
+ const configId = configInput.value.trim();
347
+
348
+ let url;
349
+ if (demo === 'simplified') {
350
+ url = '/simplified.html';
351
+ } else if (demo === 'orchestrated') {
352
+ url = '/orchestrated-flow.html';
353
+ } else if (demo === 'headless') {
354
+ url = '/headless.html';
355
+ }
356
+
357
+ if (configId) {
358
+ url += `?configId=${encodeURIComponent(configId)}`;
359
+ }
360
+
361
+ window.location.href = url;
362
+ });
363
+ });
364
+ </script>
365
+ </body>
366
+ </html>