@developer_tribe/react-builder 1.2.22 → 1.2.23

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 (100) hide show
  1. package/dist/attribute-analyser/style/native/useExtractImageStyle.d.ts +2 -2
  2. package/dist/build-components/Image/ImageProps.generated.d.ts +2 -4
  3. package/dist/build-components/NavigationBarColor/NavigationBarColor.d.ts +5 -0
  4. package/dist/build-components/NavigationBarColor/NavigationBarColorProps.generated.d.ts +54 -0
  5. package/dist/build-components/OnboardImage/OnboardImageProps.generated.d.ts +1 -3
  6. package/dist/build-components/Separator/Separator.d.ts +5 -0
  7. package/dist/build-components/Separator/SeparatorProps.generated.d.ts +21 -0
  8. package/dist/build-components/StatusBarColor/StatusBarColor.d.ts +5 -0
  9. package/dist/build-components/StatusBarColor/StatusBarColorProps.generated.d.ts +54 -0
  10. package/dist/build-components/index.d.ts +4 -1
  11. package/dist/build-components/patterns.generated.d.ts +2105 -1253
  12. package/dist/components/AttributesEditorPanel.d.ts +1 -1
  13. package/dist/components/BuilderProvider.d.ts +1 -1
  14. package/dist/index.cjs.js +4 -4
  15. package/dist/index.cjs.js.map +1 -1
  16. package/dist/index.esm.js +4 -4
  17. package/dist/index.esm.js.map +1 -1
  18. package/dist/index.web.cjs.js +6 -6
  19. package/dist/index.web.cjs.js.map +1 -1
  20. package/dist/index.web.esm.js +4 -4
  21. package/dist/index.web.esm.js.map +1 -1
  22. package/dist/store.d.ts +4 -0
  23. package/dist/styles.css +1 -1
  24. package/dist/utils/attributeStyle.d.ts +9 -0
  25. package/dist/utils/extractImageStyle.d.ts +1 -1
  26. package/dist/utils/extractViewStyle/extractViewStyleNative.d.ts +1 -1
  27. package/package.json +2 -2
  28. package/src/DeviceMockFrame.tsx +8 -2
  29. package/src/assets/meta.json +1 -1
  30. package/src/assets/samples/paywall-1.json +39 -34
  31. package/src/assets/samples/paywall-2.json +39 -20
  32. package/src/assets/samples/paywall-app-delete-offer.json +40 -21
  33. package/src/assets/samples/paywall-app-open-offer.json +40 -21
  34. package/src/assets/samples/paywall-back-offer.json +40 -21
  35. package/src/assets/samples/paywall-notification-offer.json +40 -21
  36. package/src/assets/samples/vpn-onboard-1.json +84 -39
  37. package/src/assets/samples/vpn-onboard-2.json +85 -40
  38. package/src/assets/samples/vpn-onboard-3.json +84 -39
  39. package/src/assets/samples/vpn-onboard-4.json +84 -39
  40. package/src/assets/samples/vpn-onboard-5.json +102 -55
  41. package/src/assets/samples/vpn-onboard-6.json +87 -38
  42. package/src/attribute-analyser/style/native/useExtractImageStyle.ts +24 -22
  43. package/src/attribute-analyser/style/native/useExtractTextStyle.ts +9 -4
  44. package/src/attribute-analyser/style/native/useExtractViewStyle.ts +19 -7
  45. package/src/attributes-editor/useAttributesEditorModel.ts +23 -17
  46. package/src/build-components/BackgroundImage/pattern.json +9 -7
  47. package/src/build-components/CarouselDots/CarouselDots.tsx +12 -11
  48. package/src/build-components/CarouselProvider/CarouselProvider.tsx +3 -1
  49. package/src/build-components/Image/ImageProps.generated.ts +2 -4
  50. package/src/build-components/Image/pattern.json +12 -25
  51. package/src/build-components/NavigationBarColor/NavigationBarColor.tsx +39 -0
  52. package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts +71 -0
  53. package/src/build-components/NavigationBarColor/pattern.json +34 -0
  54. package/src/build-components/OnboardButtons/OnboardButtons.tsx +8 -10
  55. package/src/build-components/OnboardDot/OnboardDot.tsx +12 -10
  56. package/src/build-components/OnboardImage/OnboardImage.tsx +1 -1
  57. package/src/build-components/OnboardImage/OnboardImageProps.generated.ts +1 -3
  58. package/src/build-components/OnboardProvider/OnboardProvider.tsx +3 -1
  59. package/src/build-components/RenderNode.generated.tsx +15 -0
  60. package/src/build-components/Separator/Separator.tsx +41 -0
  61. package/src/build-components/Separator/SeparatorProps.generated.ts +26 -0
  62. package/src/build-components/Separator/pattern.json +59 -0
  63. package/src/build-components/StatusBarColor/StatusBarColor.tsx +39 -0
  64. package/src/build-components/StatusBarColor/StatusBarColorProps.generated.ts +71 -0
  65. package/src/build-components/StatusBarColor/pattern.json +34 -0
  66. package/src/build-components/Text/pattern.json +45 -38
  67. package/src/build-components/index.ts +15 -0
  68. package/src/build-components/patterns.generated.ts +2149 -1272
  69. package/src/build-components/useNode.ts +24 -25
  70. package/src/components/AttributesEditorPanel.tsx +4 -5
  71. package/src/components/Builder.tsx +1 -2
  72. package/src/components/BuilderProvider.tsx +40 -3
  73. package/src/components/JsonTextEditor.tsx +2 -2
  74. package/src/components/LoadingComponent.tsx +1 -1
  75. package/src/components/RenderErrorBoundary.tsx +1 -3
  76. package/src/migrations/migrations/1.1.2_extract_component_attributes_from_style.ts +3 -3
  77. package/src/modals/BenefitPresetsModal.tsx +1 -1
  78. package/src/modals/ProductPresetsModal.tsx +1 -1
  79. package/src/pages/DebugJsonPage.tsx +7 -4
  80. package/src/pages/ProjectDebug.tsx +1 -1
  81. package/src/pages/ProjectPage.tsx +31 -32
  82. package/src/pages/ProjectValidationPage.tsx +2 -2
  83. package/src/store.ts +13 -0
  84. package/src/styles/layout/_builder.scss +6 -0
  85. package/src/utils/__special_exceptions.ts +5 -5
  86. package/src/utils/analyseNode.ts +2 -2
  87. package/src/utils/analyseNodeByPatterns.ts +10 -9
  88. package/src/utils/analyseNodeStructural.ts +1 -1
  89. package/src/utils/attributeStyle.ts +26 -0
  90. package/src/utils/extractImageStyle.ts +17 -13
  91. package/src/utils/extractTextStyle/extractTextStyle.ts +7 -7
  92. package/src/utils/extractTextStyle/extractTextStyleNative.ts +10 -10
  93. package/src/utils/extractViewStyle/extractViewStyle.ts +8 -11
  94. package/src/utils/extractViewStyle/extractViewStyleNative.ts +19 -19
  95. package/src/utils/loadFontFamily.ts +14 -19
  96. package/src/utils/logRenderStore.ts +5 -4
  97. package/src/utils/nodeTree.ts +1 -1
  98. package/src/utils/patterns.ts +26 -31
  99. package/src/utils/repairNodeKeys.ts +5 -7
  100. package/src/utils/wrapNodeInMain.ts +3 -3
package/src/assets/samples/vpn-onboard-2.json CHANGED
@@ -66,9 +66,34 @@
66
66
  "attributes": {
67
67
  "useSafeAreaView": true,
68
68
  "description": "Ekranın ana kapsayıcısı. (#1)",
69
- "title": "Main 1"
69
+ "title": "Main 1",
70
+ "styles": {
71
+ "paddingBottom": 16
72
+ }
70
73
  },
71
74
  "children": [
75
+ {
76
+ "type": "StatusBarColor",
77
+ "attributes": {
78
+ "title": "Status Bar Color",
79
+ "description": "Status bar background color.",
80
+ "styles": {
81
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
82
+ }
83
+ },
84
+ "children": null
85
+ },
86
+ {
87
+ "type": "NavigationBarColor",
88
+ "attributes": {
89
+ "title": "Navigation Bar Color",
90
+ "description": "Navigation bar background color.",
91
+ "styles": {
92
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
93
+ }
94
+ },
95
+ "children": null
96
+ },
72
97
  {
73
98
  "type": "OnboardProvider",
74
99
  "children": [
@@ -85,7 +110,7 @@
85
110
  "description": "Sayfa başlığı. (#1)",
86
111
  "title": "OnboardTitle 1",
87
112
  "styles": {
88
- "color": "#12131A",
113
+ "color": "THEME_COLORS.ONBOARD_TITLE",
89
114
  "textAlign": "center",
90
115
  "marginTop": 40
91
116
  }
@@ -108,7 +133,7 @@
108
133
  "description": "Sayfa alt başlığı. (#1)",
109
134
  "title": "OnboardSubtitle 1",
110
135
  "styles": {
111
- "color": "#44454D",
136
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE",
112
137
  "fontSize": 16,
113
138
  "textAlign": "center"
114
139
  }
@@ -131,7 +156,7 @@
131
156
  "description": "Sayfa başlığı. (#2)",
132
157
  "title": "OnboardTitle 2",
133
158
  "styles": {
134
- "color": "#12131A",
159
+ "color": "THEME_COLORS.ONBOARD_TITLE",
135
160
  "textAlign": "center",
136
161
  "marginTop": 40
137
162
  }
@@ -154,7 +179,7 @@
154
179
  "description": "Sayfa alt başlığı. (#2)",
155
180
  "title": "OnboardSubtitle 2",
156
181
  "styles": {
157
- "color": "#44454D",
182
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE",
158
183
  "fontSize": 16,
159
184
  "textAlign": "center"
160
185
  }
@@ -177,7 +202,7 @@
177
202
  "description": "Sayfa başlığı. (#3)",
178
203
  "title": "OnboardTitle 3",
179
204
  "styles": {
180
- "color": "#12131A",
205
+ "color": "THEME_COLORS.ONBOARD_TITLE",
181
206
  "textAlign": "center",
182
207
  "marginTop": 40
183
208
  }
@@ -200,7 +225,7 @@
200
225
  "description": "Sayfa alt başlığı. (#3)",
201
226
  "title": "OnboardSubtitle 3",
202
227
  "styles": {
203
- "color": "#44454D",
228
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE",
204
229
  "fontSize": 16,
205
230
  "textAlign": "center"
206
231
  }
@@ -223,7 +248,7 @@
223
248
  "description": "Sayfa başlığı. (#4)",
224
249
  "title": "OnboardTitle 4",
225
250
  "styles": {
226
- "color": "#12131A",
251
+ "color": "THEME_COLORS.ONBOARD_TITLE",
227
252
  "textAlign": "center",
228
253
  "marginTop": 40
229
254
  }
@@ -246,7 +271,7 @@
246
271
  "description": "Sayfa alt başlığı. (#4)",
247
272
  "title": "OnboardSubtitle 4",
248
273
  "styles": {
249
- "color": "#44454D",
274
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE",
250
275
  "fontSize": 16,
251
276
  "textAlign": "center"
252
277
  }
@@ -262,7 +287,10 @@
262
287
  ],
263
288
  "attributes": {
264
289
  "description": "Onboarding ana yapısı. (#1)",
265
- "title": "Onboard 1"
290
+ "title": "Onboard 1",
291
+ "styles": {
292
+ "flex": 1
293
+ }
266
294
  }
267
295
  },
268
296
  {
@@ -271,10 +299,22 @@
271
299
  "dotType": "expanding_dot",
272
300
  "dot_thickness": 20,
273
301
  "inactive_dot_opacity": 0.3,
274
- "inactive_dot_color": "#F7F7F9",
275
- "active_dot_color": "#007AFF",
302
+ "inactive_dot_color": "STATIC_COLORS.ONBOARD_DOT_INACTIVE",
303
+ "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
304
+ "styles": {
305
+ "paddingVertical": 12
306
+ }
307
+ }
308
+ },
309
+ {
310
+ "type": "Separator",
311
+ "attributes": {
312
+ "title": "Separator",
313
+ "description": "Horizontal separator line",
276
314
  "styles": {
277
- "flex": 2
315
+ "width": "100%",
316
+ "height": 2,
317
+ "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
278
318
  }
279
319
  }
280
320
  },
@@ -287,8 +327,9 @@
287
327
  "description": "Sayfa buton grubu. (#1)",
288
328
  "title": "OnboardButtons 1",
289
329
  "styles": {
290
- "flex": 2,
291
- "justifyContent": "flex-end"
330
+ "height": 40,
331
+ "marginVertical": 12,
332
+ "flexShrink": 0
292
333
  }
293
334
  },
294
335
  "children": [
@@ -296,10 +337,10 @@
296
337
  "type": "OnboardButton",
297
338
  "attributes": {
298
339
  "labelKey": "onboard.skip.one-page",
299
- "button_text_color": "#81838F",
340
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
300
341
  "animation": "line-animation",
301
- "animation_color": "#FFFFFF",
302
- "button_background_color": "#ffffff00",
342
+ "animation_color": "STATIC_COLORS.WHITE",
343
+ "button_background_color": "STATIC_COLORS.TRANSPARENT",
303
344
  "events": [
304
345
  {
305
346
  "type": "Navigate",
@@ -316,9 +357,9 @@
316
357
  "type": "OnboardButton",
317
358
  "attributes": {
318
359
  "labelKey": "onboard.next.one-page",
319
- "button_text_color": "#FFFFFF",
360
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
320
361
  "animation": "simple-animation",
321
- "button_background_color": "#0066FF",
362
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
322
363
  "events": [
323
364
  {
324
365
  "type": "Navigate",
@@ -342,8 +383,9 @@
342
383
  "description": "Sayfa buton grubu. (#2)",
343
384
  "title": "OnboardButtons 2",
344
385
  "styles": {
345
- "flex": 2,
346
- "justifyContent": "flex-end"
386
+ "height": 40,
387
+ "marginVertical": 12,
388
+ "flexShrink": 0
347
389
  }
348
390
  },
349
391
  "children": [
@@ -351,8 +393,8 @@
351
393
  "type": "OnboardButton",
352
394
  "attributes": {
353
395
  "labelKey": "onboard.skip.two-page",
354
- "button_text_color": "#81838F",
355
- "button_background_color": "#ffffff00",
396
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
397
+ "button_background_color": "STATIC_COLORS.TRANSPARENT",
356
398
  "events": [
357
399
  {
358
400
  "type": "Permission",
@@ -373,8 +415,8 @@
373
415
  "type": "OnboardButton",
374
416
  "attributes": {
375
417
  "labelKey": "onboard.next.two-page",
376
- "button_text_color": "#FFFFFF",
377
- "button_background_color": "#0066FF",
418
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
419
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
378
420
  "events": [
379
421
  {
380
422
  "type": "Permission",
@@ -402,8 +444,9 @@
402
444
  "description": "Sayfa buton grubu. (#3)",
403
445
  "title": "OnboardButtons 3",
404
446
  "styles": {
405
- "flex": 2,
406
- "justifyContent": "flex-end"
447
+ "height": 40,
448
+ "marginVertical": 12,
449
+ "flexShrink": 0
407
450
  }
408
451
  },
409
452
  "children": [
@@ -411,8 +454,8 @@
411
454
  "type": "OnboardButton",
412
455
  "attributes": {
413
456
  "labelKey": "onboard.skip.three-page",
414
- "button_text_color": "#81838F",
415
- "button_background_color": "#ffffff00",
457
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
458
+ "button_background_color": "STATIC_COLORS.TRANSPARENT",
416
459
  "events": [
417
460
  {
418
461
  "type": "Navigate",
@@ -429,8 +472,8 @@
429
472
  "type": "OnboardButton",
430
473
  "attributes": {
431
474
  "labelKey": "onboard.next.three-page",
432
- "button_text_color": "#FFFFFF",
433
- "button_background_color": "#0066FF",
475
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
476
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
434
477
  "events": [
435
478
  {
436
479
  "type": "Permission",
@@ -458,8 +501,9 @@
458
501
  "description": "Sayfa buton grubu. (#4)",
459
502
  "title": "OnboardButtons 4",
460
503
  "styles": {
461
- "flex": 2,
462
- "justifyContent": "flex-end"
504
+ "height": 40,
505
+ "marginVertical": 12,
506
+ "flexShrink": 0
463
507
  }
464
508
  },
465
509
  "children": [
@@ -467,8 +511,8 @@
467
511
  "type": "OnboardButton",
468
512
  "attributes": {
469
513
  "labelKey": "onboard.allow.four-page",
470
- "button_text_color": "#FFFFFF",
471
- "button_background_color": "#0066FF",
514
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
515
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
472
516
  "events": [
473
517
  {
474
518
  "type": "Permission",
@@ -492,7 +536,8 @@
492
536
  "title": "Onboard Footer Wrap",
493
537
  "description": "Wrapper for OnboardFooter component",
494
538
  "styles": {
495
- "flex": 2
539
+ "marginHorizontal": 25,
540
+ "flexShrink": 0
496
541
  }
497
542
  },
498
543
  "children": [
@@ -501,14 +546,14 @@
501
546
  "attributes": {
502
547
  "textLocalizationKey": "view.onboarding.footer.description",
503
548
  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
504
- "linkedWordFirstColor": "#1778F2",
549
+ "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
505
550
  "linkedWordFirstPage": "privacy",
506
551
  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
507
- "linkedWordSecondColor": "#1778F2",
552
+ "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
508
553
  "linkedWordSecondPage": "terms",
509
554
  "styles": {
510
555
  "gap": 8,
511
- "color": "#A2A4B1"
556
+ "color": "THEME_COLORS.FOOTER_TEXT"
512
557
  }
513
558
  }
514
559
  }
package/src/assets/samples/vpn-onboard-3.json CHANGED
@@ -82,9 +82,34 @@
82
82
  "attributes": {
83
83
  "useSafeAreaView": true,
84
84
  "description": "Ekranın ana kapsayıcısı. (#1)",
85
- "title": "Main 1"
85
+ "title": "Main 1",
86
+ "styles": {
87
+ "paddingBottom": 16
88
+ }
86
89
  },
87
90
  "children": [
91
+ {
92
+ "type": "StatusBarColor",
93
+ "attributes": {
94
+ "title": "Status Bar Color",
95
+ "description": "Status bar background color.",
96
+ "styles": {
97
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
98
+ }
99
+ },
100
+ "children": null
101
+ },
102
+ {
103
+ "type": "NavigationBarColor",
104
+ "attributes": {
105
+ "title": "Navigation Bar Color",
106
+ "description": "Navigation bar background color.",
107
+ "styles": {
108
+ "backgroundColor": "THEME_COLORS.BACKGROUND"
109
+ }
110
+ },
111
+ "children": null
112
+ },
88
113
  {
89
114
  "type": "OnboardProvider",
90
115
  "children": [
@@ -101,7 +126,7 @@
101
126
  "description": "Sayfa başlığı. (#1)",
102
127
  "title": "OnboardTitle 1",
103
128
  "styles": {
104
- "color": "#12131A",
129
+ "color": "THEME_COLORS.ONBOARD_TITLE",
105
130
  "textAlign": "center",
106
131
  "marginTop": 40
107
132
  }
@@ -124,7 +149,7 @@
124
149
  "description": "Sayfa alt başlığı. (#1)",
125
150
  "title": "OnboardSubtitle 1",
126
151
  "styles": {
127
- "color": "#44454D",
152
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE",
128
153
  "fontSize": 16,
129
154
  "textAlign": "center"
130
155
  }
@@ -147,7 +172,7 @@
147
172
  "description": "Sayfa başlığı. (#2)",
148
173
  "title": "OnboardTitle 2",
149
174
  "styles": {
150
- "color": "#12131A",
175
+ "color": "THEME_COLORS.ONBOARD_TITLE",
151
176
  "textAlign": "center",
152
177
  "marginTop": 40
153
178
  }
@@ -160,7 +185,7 @@
160
185
  "description": "Sayfa alt başlığı. (#2)",
161
186
  "title": "OnboardSubtitle 2",
162
187
  "styles": {
163
- "color": "#44454D",
188
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE",
164
189
  "fontSize": 16,
165
190
  "textAlign": "center"
166
191
  }
@@ -183,7 +208,7 @@
183
208
  "description": "Sayfa başlığı. (#3)",
184
209
  "title": "OnboardTitle 3",
185
210
  "styles": {
186
- "color": "#12131A",
211
+ "color": "THEME_COLORS.ONBOARD_TITLE",
187
212
  "textAlign": "center",
188
213
  "marginTop": 40
189
214
  }
@@ -196,7 +221,7 @@
196
221
  "description": "Sayfa alt başlığı. (#3)",
197
222
  "title": "OnboardSubtitle 3",
198
223
  "styles": {
199
- "color": "#44454D",
224
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE",
200
225
  "fontSize": 16,
201
226
  "textAlign": "center"
202
227
  }
@@ -219,7 +244,7 @@
219
244
  "description": "Sayfa başlığı. (#4)",
220
245
  "title": "OnboardTitle 4",
221
246
  "styles": {
222
- "color": "#12131A",
247
+ "color": "THEME_COLORS.ONBOARD_TITLE",
223
248
  "textAlign": "center",
224
249
  "marginTop": 40
225
250
  }
@@ -232,7 +257,7 @@
232
257
  "description": "Sayfa alt başlığı. (#4)",
233
258
  "title": "OnboardSubtitle 4",
234
259
  "styles": {
235
- "color": "#44454D",
260
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE",
236
261
  "fontSize": 16,
237
262
  "textAlign": "center"
238
263
  }
@@ -248,7 +273,10 @@
248
273
  ],
249
274
  "attributes": {
250
275
  "description": "Onboarding ana yapısı. (#1)",
251
- "title": "Onboard 1"
276
+ "title": "Onboard 1",
277
+ "styles": {
278
+ "flex": 1
279
+ }
252
280
  }
253
281
  },
254
282
  {
@@ -257,10 +285,22 @@
257
285
  "dotType": "expanding_dot",
258
286
  "dot_thickness": 20,
259
287
  "inactive_dot_opacity": 0.3,
260
- "inactive_dot_color": "#F7F7F9",
261
- "active_dot_color": "#007AFF",
288
+ "inactive_dot_color": "STATIC_COLORS.ONBOARD_DOT_INACTIVE",
289
+ "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
290
+ "styles": {
291
+ "paddingVertical": 12
292
+ }
293
+ }
294
+ },
295
+ {
296
+ "type": "Separator",
297
+ "attributes": {
298
+ "title": "Separator",
299
+ "description": "Horizontal separator line",
262
300
  "styles": {
263
- "flex": 2
301
+ "width": "100%",
302
+ "height": 2,
303
+ "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
264
304
  }
265
305
  }
266
306
  },
@@ -273,8 +313,9 @@
273
313
  "description": "Sayfa buton grubu. (#1)",
274
314
  "title": "OnboardButtons 1",
275
315
  "styles": {
276
- "flex": 2,
277
- "justifyContent": "flex-end"
316
+ "height": 40,
317
+ "marginVertical": 12,
318
+ "flexShrink": 0
278
319
  }
279
320
  },
280
321
  "children": [
@@ -282,8 +323,8 @@
282
323
  "type": "OnboardButton",
283
324
  "attributes": {
284
325
  "labelKey": "onboard.skip.one-page",
285
- "button_text_color": "#81838F",
286
- "button_background_color": "#ffffff00",
326
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
327
+ "button_background_color": "STATIC_COLORS.TRANSPARENT",
287
328
  "events": [
288
329
  {
289
330
  "type": "Navigate",
@@ -300,8 +341,8 @@
300
341
  "type": "OnboardButton",
301
342
  "attributes": {
302
343
  "labelKey": "onboard.next.one-page",
303
- "button_text_color": "#FFFFFF",
304
- "button_background_color": "#0066FF",
344
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
345
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
305
346
  "events": [
306
347
  {
307
348
  "type": "Navigate",
@@ -325,8 +366,9 @@
325
366
  "description": "Sayfa buton grubu. (#2)",
326
367
  "title": "OnboardButtons 2",
327
368
  "styles": {
328
- "flex": 2,
329
- "justifyContent": "flex-end"
369
+ "height": 40,
370
+ "marginVertical": 12,
371
+ "flexShrink": 0
330
372
  }
331
373
  },
332
374
  "children": [
@@ -334,8 +376,8 @@
334
376
  "type": "OnboardButton",
335
377
  "attributes": {
336
378
  "labelKey": "onboard.skip.two-page",
337
- "button_text_color": "#81838F",
338
- "button_background_color": "#ffffff00",
379
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
380
+ "button_background_color": "STATIC_COLORS.TRANSPARENT",
339
381
  "events": [
340
382
  {
341
383
  "type": "Permission",
@@ -356,8 +398,8 @@
356
398
  "type": "OnboardButton",
357
399
  "attributes": {
358
400
  "labelKey": "onboard.next.two-page",
359
- "button_text_color": "#FFFFFF",
360
- "button_background_color": "#0066FF",
401
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
402
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
361
403
  "events": [
362
404
  {
363
405
  "type": "Permission",
@@ -385,8 +427,9 @@
385
427
  "description": "Sayfa buton grubu. (#3)",
386
428
  "title": "OnboardButtons 3",
387
429
  "styles": {
388
- "flex": 2,
389
- "justifyContent": "flex-end"
430
+ "height": 40,
431
+ "marginVertical": 12,
432
+ "flexShrink": 0
390
433
  }
391
434
  },
392
435
  "children": [
@@ -394,8 +437,8 @@
394
437
  "type": "OnboardButton",
395
438
  "attributes": {
396
439
  "labelKey": "onboard.skip.three-page",
397
- "button_text_color": "#81838F",
398
- "button_background_color": "#ffffff00",
440
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
441
+ "button_background_color": "STATIC_COLORS.TRANSPARENT",
399
442
  "events": [
400
443
  {
401
444
  "type": "Navigate",
@@ -412,8 +455,8 @@
412
455
  "type": "OnboardButton",
413
456
  "attributes": {
414
457
  "labelKey": "onboard.next.three-page",
415
- "button_text_color": "#FFFFFF",
416
- "button_background_color": "#0066FF",
458
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
459
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
417
460
  "events": [
418
461
  {
419
462
  "type": "Permission",
@@ -441,8 +484,9 @@
441
484
  "description": "Sayfa buton grubu. (#4)",
442
485
  "title": "OnboardButtons 4",
443
486
  "styles": {
444
- "flex": 2,
445
- "justifyContent": "flex-end"
487
+ "height": 40,
488
+ "marginVertical": 12,
489
+ "flexShrink": 0
446
490
  }
447
491
  },
448
492
  "children": [
@@ -450,8 +494,8 @@
450
494
  "type": "OnboardButton",
451
495
  "attributes": {
452
496
  "labelKey": "onboard.allow.four-page",
453
- "button_text_color": "#FFFFFF",
454
- "button_background_color": "#0066FF",
497
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
498
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
455
499
  "events": [
456
500
  {
457
501
  "type": "Permission",
@@ -475,7 +519,8 @@
475
519
  "title": "Onboard Footer Wrap",
476
520
  "description": "Wrapper for OnboardFooter component",
477
521
  "styles": {
478
- "flex": 2
522
+ "marginHorizontal": 25,
523
+ "flexShrink": 0
479
524
  }
480
525
  },
481
526
  "children": [
@@ -484,14 +529,14 @@
484
529
  "attributes": {
485
530
  "textLocalizationKey": "view.onboarding.footer.description",
486
531
  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
487
- "linkedWordFirstColor": "#81838F",
532
+ "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
488
533
  "linkedWordFirstPage": "privacy",
489
534
  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
490
- "linkedWordSecondColor": "#81838F",
535
+ "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
491
536
  "linkedWordSecondPage": "terms",
492
537
  "styles": {
493
538
  "gap": 8,
494
- "color": "#81838F"
539
+ "color": "THEME_COLORS.FOOTER_TEXT"
495
540
  }
496
541
  }
497
542
  }