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

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