@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.11

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 (209) hide show
  1. package/dist/base.css +1071 -0
  2. package/dist/browser-ponyfill-B6W6hHVY.js +344 -0
  3. package/dist/email/email.es.js +145 -0
  4. package/dist/email/styles.css +123 -0
  5. package/dist/flow/flow.es.js +555 -0
  6. package/dist/flow/styles.css +1119 -0
  7. package/dist/incodeModule-Dv8Qllrv.js +254 -0
  8. package/dist/index.es.js +6 -0
  9. package/dist/instance-B-q0ZREN.js +2140 -0
  10. package/dist/otpInput-BtoZe0Wz.js +151 -0
  11. package/dist/page-Dh_Zw2ik.js +234 -0
  12. package/dist/phone/phone.es.js +3441 -0
  13. package/dist/phone/styles.css +305 -0
  14. package/dist/selfie/selfie.es.js +893 -0
  15. package/dist/selfie/styles.css +590 -0
  16. package/dist/selfieTutorial-C-u5GufD.js +29 -0
  17. package/dist/setup-wNL83jmW.js +20 -0
  18. package/dist/themes/dark.css +652 -0
  19. package/dist/themes/light.css +543 -0
  20. package/dist/title-BfO5Dlzk.js +25 -0
  21. package/dist/types/base.d.ts +1 -0
  22. package/dist/types/dark.d.ts +1 -0
  23. package/dist/types/email.d.ts +57 -0
  24. package/dist/types/flow.d.ts +69 -0
  25. package/dist/types/index.d.ts +38 -0
  26. package/dist/types/light.d.ts +1 -0
  27. package/dist/types/phone.d.ts +58 -0
  28. package/dist/types/selfie.d.ts +31 -0
  29. package/dist/types/styles.d.ts +1 -0
  30. package/dist/types/themes/dark.d.ts +1 -0
  31. package/dist/types/themes/light.d.ts +1 -0
  32. package/dist/uiConfig-CQ1W9cUD.js +23 -0
  33. package/dist/vendor-preact-CK0WeTOR.js +584 -0
  34. package/package.json +32 -26
  35. package/dev/README.md +0 -163
  36. package/dev/getToken.ts +0 -36
  37. package/dev/headless.html +0 -875
  38. package/dev/index.html +0 -366
  39. package/dev/main-headless.tsx +0 -1332
  40. package/dev/main-orchestrated-flow.tsx +0 -1158
  41. package/dev/main-preact.tsx +0 -323
  42. package/dev/main-simplified.tsx +0 -123
  43. package/dev/main-web-component.tsx +0 -256
  44. package/dev/main.tsx +0 -332
  45. package/dev/manual.html +0 -27
  46. package/dev/orchestrated-flow.html +0 -64
  47. package/dev/simplified.html +0 -64
  48. package/dev/tiktok-logo.svg +0 -7
  49. package/src/defineCustomElement.tsx +0 -30
  50. package/src/email/email.test.tsx +0 -368
  51. package/src/email/email.tsx +0 -255
  52. package/src/email/emailInput.test.tsx +0 -264
  53. package/src/email/emailInput.tsx +0 -85
  54. package/src/email/styles.css +0 -59
  55. package/src/flow/flow.test.tsx +0 -796
  56. package/src/flow/flow.tsx +0 -292
  57. package/src/flow/flowCompleted.css +0 -30
  58. package/src/flow/flowCompleted.test.tsx +0 -331
  59. package/src/flow/flowCompleted.tsx +0 -121
  60. package/src/flow/flowInit.test.ts +0 -264
  61. package/src/flow/flowInit.ts +0 -94
  62. package/src/flow/flowStart.css +0 -58
  63. package/src/flow/flowStart.test.tsx +0 -49
  64. package/src/flow/flowStart.tsx +0 -41
  65. package/src/flow/incode-logo.svg +0 -8
  66. package/src/flow/index.ts +0 -7
  67. package/src/flow/preloadFlow.test.ts +0 -421
  68. package/src/flow/preloadFlow.ts +0 -171
  69. package/src/flow/styles.css +0 -9
  70. package/src/flow/unsupportedModule.css +0 -21
  71. package/src/flow/unsupportedModule.tsx +0 -39
  72. package/src/flow/useFlowInitialization.test.tsx +0 -292
  73. package/src/flow/useFlowInitialization.ts +0 -128
  74. package/src/flow/useModuleLoader.test.tsx +0 -212
  75. package/src/flow/useModuleLoader.ts +0 -92
  76. package/src/hooks/index.ts +0 -1
  77. package/src/hooks/useManager.test.ts +0 -91
  78. package/src/hooks/useManager.ts +0 -40
  79. package/src/i18n/index.ts +0 -3
  80. package/src/i18n/instance.ts +0 -16
  81. package/src/i18n/setup.ts +0 -184
  82. package/src/i18n/useTranslation.ts +0 -42
  83. package/src/index.ts +0 -27
  84. package/src/permissions/assets/android-dots-icon.svg +0 -7
  85. package/src/permissions/assets/android-settings-icon.svg +0 -16
  86. package/src/permissions/assets/android-toggle-icon.svg +0 -20
  87. package/src/permissions/assets/bank-card-icon.svg +0 -14
  88. package/src/permissions/assets/camera-icon.svg +0 -12
  89. package/src/permissions/assets/camera-ios.svg +0 -53
  90. package/src/permissions/assets/check-icon.svg +0 -8
  91. package/src/permissions/assets/chrome-icon.svg +0 -43
  92. package/src/permissions/assets/password-icon.svg +0 -11
  93. package/src/permissions/assets/permissions-img.svg +0 -51
  94. package/src/permissions/assets/safari-icon.svg +0 -37
  95. package/src/permissions/assets/settings-icon.svg +0 -33
  96. package/src/permissions/assets/toggle-icon.svg +0 -19
  97. package/src/permissions/assets/warning-icon.svg +0 -6
  98. package/src/permissions/boldWithArrow.css +0 -9
  99. package/src/permissions/boldWithArrow.tsx +0 -41
  100. package/src/permissions/denied.css +0 -37
  101. package/src/permissions/denied.tsx +0 -29
  102. package/src/permissions/deniedAndroid.tsx +0 -56
  103. package/src/permissions/deniedDesktop.css +0 -9
  104. package/src/permissions/deniedDesktop.tsx +0 -64
  105. package/src/permissions/deniedIOS.tsx +0 -73
  106. package/src/permissions/deniedInstructions.tsx +0 -19
  107. package/src/permissions/iconWrapper.css +0 -9
  108. package/src/permissions/iconWrapper.tsx +0 -15
  109. package/src/permissions/learnMore.css +0 -37
  110. package/src/permissions/learnMore.tsx +0 -85
  111. package/src/permissions/numberedStep.css +0 -13
  112. package/src/permissions/numberedStep.tsx +0 -14
  113. package/src/permissions/permissions.css +0 -13
  114. package/src/permissions/permissions.tsx +0 -68
  115. package/src/phone/phone.tsx +0 -246
  116. package/src/phone/phoneInput.test.tsx +0 -275
  117. package/src/phone/phoneInput.tsx +0 -249
  118. package/src/phone/styles.css +0 -158
  119. package/src/selfie/cameraButton.css +0 -13
  120. package/src/selfie/cameraButton.tsx +0 -35
  121. package/src/selfie/capture.css +0 -57
  122. package/src/selfie/capture.tsx +0 -232
  123. package/src/selfie/errorModal.tsx +0 -218
  124. package/src/selfie/errorModalContent.css +0 -33
  125. package/src/selfie/errorModalContent.tsx +0 -44
  126. package/src/selfie/faceOutline.css +0 -5
  127. package/src/selfie/faceOutline.tsx +0 -22
  128. package/src/selfie/loadingBorder.css +0 -12
  129. package/src/selfie/loadingBorder.tsx +0 -77
  130. package/src/selfie/manualCaptureButton.css +0 -13
  131. package/src/selfie/manualCaptureButton.tsx +0 -35
  132. package/src/selfie/noMoreAttemptsModal.tsx +0 -44
  133. package/src/selfie/notification.css +0 -9
  134. package/src/selfie/notification.tsx +0 -36
  135. package/src/selfie/retryErrorModal.tsx +0 -56
  136. package/src/selfie/selfie.test.tsx +0 -458
  137. package/src/selfie/selfie.tsx +0 -83
  138. package/src/selfie/selfieTutorial.json +0 -2626
  139. package/src/selfie/styles.css +0 -1
  140. package/src/selfie/tutorial.test.tsx +0 -200
  141. package/src/selfie/tutorial.tsx +0 -43
  142. package/src/setup.ts +0 -33
  143. package/src/shared/baseTutorial/baseTutorial.css +0 -21
  144. package/src/shared/baseTutorial/baseTutorial.test.tsx +0 -184
  145. package/src/shared/baseTutorial/baseTutorial.tsx +0 -55
  146. package/src/shared/baseTutorial/replaceBaseTutorial.test.ts +0 -267
  147. package/src/shared/baseTutorial/replaceBaseTutorial.ts +0 -68
  148. package/src/shared/button/button.css +0 -55
  149. package/src/shared/button/button.test.tsx +0 -101
  150. package/src/shared/button/button.tsx +0 -47
  151. package/src/shared/componentRoot/incodeComponent.tsx +0 -12
  152. package/src/shared/countries/countries.test.ts +0 -75
  153. package/src/shared/countries/countries.ts +0 -139
  154. package/src/shared/countries/index.ts +0 -6
  155. package/src/shared/icons/chevronDown.tsx +0 -22
  156. package/src/shared/icons/index.ts +0 -2
  157. package/src/shared/icons/successIcon.css +0 -5
  158. package/src/shared/icons/successIcon.test.tsx +0 -40
  159. package/src/shared/icons/successIcon.tsx +0 -26
  160. package/src/shared/loader/loadingIcon.css +0 -28
  161. package/src/shared/loader/loadingIcon.tsx +0 -67
  162. package/src/shared/lottie/lottie.tsx +0 -108
  163. package/src/shared/otpInput/otpInput.css +0 -85
  164. package/src/shared/otpInput/otpInput.test.tsx +0 -356
  165. package/src/shared/otpInput/otpInput.tsx +0 -241
  166. package/src/shared/page/incode-logo.svg +0 -3
  167. package/src/shared/page/page.css +0 -47
  168. package/src/shared/page/page.test.tsx +0 -97
  169. package/src/shared/page/page.tsx +0 -91
  170. package/src/shared/page/pageUiConfig.test.ts +0 -112
  171. package/src/shared/page/pageUiConfig.ts +0 -64
  172. package/src/shared/page/verifiedByIncode.css +0 -5
  173. package/src/shared/page/verifiedByIncode.tsx +0 -75
  174. package/src/shared/spacer/spacer.css +0 -149
  175. package/src/shared/spacer/spacer.test.tsx +0 -143
  176. package/src/shared/spacer/spacer.tsx +0 -88
  177. package/src/shared/spinner/index.ts +0 -2
  178. package/src/shared/spinner/spinner.css +0 -28
  179. package/src/shared/spinner/spinner.test.tsx +0 -82
  180. package/src/shared/spinner/spinner.tsx +0 -65
  181. package/src/shared/title/title.css +0 -7
  182. package/src/shared/title/title.tsx +0 -12
  183. package/src/shared/uiConfig/uiConfig.ts +0 -36
  184. package/src/shared/webComponent/incodeModule.ts +0 -29
  185. package/src/shared/webComponent/registerIncodeElement.ts +0 -15
  186. package/src/styles/__mocks__/fetchTheme.ts +0 -19
  187. package/src/styles/applyTheme.ts +0 -37
  188. package/src/styles/cn.test.tsx +0 -57
  189. package/src/styles/cn.tsx +0 -21
  190. package/src/styles/core.css +0 -12
  191. package/src/styles/fetchTheme.test.ts +0 -390
  192. package/src/styles/fetchTheme.ts +0 -88
  193. package/src/styles/generatePalette.ts +0 -111
  194. package/src/styles/reset.css +0 -65
  195. package/src/styles/resolveCssVariableToHex.ts +0 -28
  196. package/src/styles/tailwind.css +0 -291
  197. package/src/styles/themeTypes.ts +0 -18
  198. package/src/styles/tokens/colors.css +0 -190
  199. package/src/styles/tokens/components.css +0 -174
  200. package/src/styles/tokens/index.css +0 -4
  201. package/src/styles/tokens/primitives.css +0 -129
  202. package/src/styles/tokens/semantic.css +0 -51
  203. package/src/svg.d.ts +0 -4
  204. package/src/types/assets.d.ts +0 -1
  205. package/src/types/custom-elements.d.ts +0 -104
  206. package/tsconfig.json +0 -22
  207. package/vite.config.ts +0 -260
  208. package/vitest.config.ts +0 -40
  209. package/vitest.setup.ts +0 -16
package/dev/index.html DELETED
@@ -1,366 +0,0 @@
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>