@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-5.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": [
@@ -112,7 +137,7 @@
112
137
  "description": "Sayfa başlığı. (#1)",
113
138
  "title": "OnboardTitle 1",
114
139
  "styles": {
115
- "color": "#080A17"
140
+ "color": "THEME_COLORS.ONBOARD_TITLE"
116
141
  }
117
142
  },
118
143
  "children": "onboard.title.one-page"
@@ -123,7 +148,7 @@
123
148
  "description": "Sayfa alt başlığı. (#1)",
124
149
  "title": "OnboardSubtitle 1",
125
150
  "styles": {
126
- "color": "#272737"
151
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE"
127
152
  }
128
153
  },
129
154
  "children": "onboard.subtitle.one-page"
@@ -155,7 +180,7 @@
155
180
  "description": "Sayfa başlığı. (#2)",
156
181
  "title": "OnboardTitle 2",
157
182
  "styles": {
158
- "color": "#080A17"
183
+ "color": "THEME_COLORS.ONBOARD_TITLE"
159
184
  }
160
185
  },
161
186
  "children": "onboard.title.two-page"
@@ -166,7 +191,7 @@
166
191
  "description": "Sayfa alt başlığı. (#2)",
167
192
  "title": "OnboardSubtitle 2",
168
193
  "styles": {
169
- "color": "#272737"
194
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE"
170
195
  }
171
196
  },
172
197
  "children": "onboard.subtitle.two-page"
@@ -197,7 +222,7 @@
197
222
  "description": "Sayfa başlığı. (#3)",
198
223
  "title": "OnboardTitle 3",
199
224
  "styles": {
200
- "color": "#080A17"
225
+ "color": "THEME_COLORS.ONBOARD_TITLE"
201
226
  }
202
227
  },
203
228
  "children": "onboard.title.three-page"
@@ -208,7 +233,7 @@
208
233
  "description": "Sayfa alt başlığı. (#3)",
209
234
  "title": "OnboardSubtitle 3",
210
235
  "styles": {
211
- "color": "#272737"
236
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE"
212
237
  }
213
238
  },
214
239
  "children": "onboard.subtitle.three-page"
@@ -239,7 +264,7 @@
239
264
  "description": "Sayfa başlığı. (#4)",
240
265
  "title": "OnboardTitle 4",
241
266
  "styles": {
242
- "color": "#080A17"
267
+ "color": "THEME_COLORS.ONBOARD_TITLE"
243
268
  }
244
269
  },
245
270
  "children": "onboard.title.five-page"
@@ -250,7 +275,7 @@
250
275
  "description": "Sayfa alt başlığı. (#4)",
251
276
  "title": "OnboardSubtitle 4",
252
277
  "styles": {
253
- "color": "#272737"
278
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE"
254
279
  }
255
280
  },
256
281
  "children": "onboard.subtitle.five-page"
@@ -281,7 +306,7 @@
281
306
  "description": "Sayfa başlığı. (#5)",
282
307
  "title": "OnboardTitle 5",
283
308
  "styles": {
284
- "color": "#080A17"
309
+ "color": "THEME_COLORS.ONBOARD_TITLE"
285
310
  }
286
311
  },
287
312
  "children": "onboard.title.six-page"
@@ -292,7 +317,7 @@
292
317
  "description": "Sayfa alt başlığı. (#5)",
293
318
  "title": "OnboardSubtitle 5",
294
319
  "styles": {
295
- "color": "#272737"
320
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE"
296
321
  }
297
322
  },
298
323
  "children": "onboard.subtitle.six-page"
@@ -323,7 +348,7 @@
323
348
  "description": "Sayfa başlığı. (#6)",
324
349
  "title": "OnboardTitle 6",
325
350
  "styles": {
326
- "color": "#080A17"
351
+ "color": "THEME_COLORS.ONBOARD_TITLE"
327
352
  }
328
353
  },
329
354
  "children": "onboard.title.four-page"
@@ -334,7 +359,7 @@
334
359
  "description": "Sayfa alt başlığı. (#6)",
335
360
  "title": "OnboardSubtitle 6",
336
361
  "styles": {
337
- "color": "#272737"
362
+ "color": "THEME_COLORS.ONBOARD_SUBTITLE"
338
363
  }
339
364
  },
340
365
  "children": "onboard.subtitle.four-page"
@@ -348,7 +373,10 @@
348
373
  ],
349
374
  "attributes": {
350
375
  "description": "Onboarding ana yapısı. (#1)",
351
- "title": "Onboard 1"
376
+ "title": "Onboard 1",
377
+ "styles": {
378
+ "flex": 1
379
+ }
352
380
  }
353
381
  },
354
382
  {
@@ -357,10 +385,22 @@
357
385
  "dotType": "expanding_dot",
358
386
  "dot_thickness": 20,
359
387
  "inactive_dot_opacity": 0.3,
360
- "inactive_dot_color": "#F7F7F9",
361
- "active_dot_color": "#007AFF",
388
+ "inactive_dot_color": "STATIC_COLORS.ONBOARD_DOT_INACTIVE",
389
+ "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
390
+ "styles": {
391
+ "paddingVertical": 12
392
+ }
393
+ }
394
+ },
395
+ {
396
+ "type": "Separator",
397
+ "attributes": {
398
+ "title": "Separator",
399
+ "description": "Horizontal separator line",
362
400
  "styles": {
363
- "flex": 2
401
+ "width": "100%",
402
+ "height": 2,
403
+ "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
364
404
  }
365
405
  }
366
406
  },
@@ -373,8 +413,9 @@
373
413
  "description": "Sayfa buton grubu. (#1)",
374
414
  "title": "OnboardButtons 1",
375
415
  "styles": {
376
- "flex": 2,
377
- "justifyContent": "flex-end"
416
+ "height": 40,
417
+ "marginVertical": 12,
418
+ "flexShrink": 0
378
419
  }
379
420
  },
380
421
  "children": [
@@ -382,8 +423,8 @@
382
423
  "type": "OnboardButton",
383
424
  "attributes": {
384
425
  "labelKey": "onboard.skip.one-page",
385
- "button_text_color": "#0450E2",
386
- "button_background_color": "#E9EBF9",
426
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
427
+ "button_background_color": "THEME_COLORS.LINE",
387
428
  "events": [
388
429
  {
389
430
  "type": "Navigate",
@@ -400,8 +441,8 @@
400
441
  "type": "OnboardButton",
401
442
  "attributes": {
402
443
  "labelKey": "onboard.next.one-page",
403
- "button_text_color": "#ffffff",
404
- "button_background_color": "#0450E2",
444
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
445
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
405
446
  "events": [
406
447
  {
407
448
  "type": "Navigate",
@@ -425,8 +466,9 @@
425
466
  "description": "Sayfa buton grubu. (#2)",
426
467
  "title": "OnboardButtons 2",
427
468
  "styles": {
428
- "flex": 2,
429
- "justifyContent": "flex-end"
469
+ "height": 40,
470
+ "marginVertical": 12,
471
+ "flexShrink": 0
430
472
  }
431
473
  },
432
474
  "children": [
@@ -434,8 +476,8 @@
434
476
  "type": "OnboardButton",
435
477
  "attributes": {
436
478
  "labelKey": "onboard.skip.two-page",
437
- "button_text_color": "#0450E2",
438
- "button_background_color": "#E9EBF9",
479
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
480
+ "button_background_color": "THEME_COLORS.LINE",
439
481
  "events": [
440
482
  {
441
483
  "type": "Navigate",
@@ -452,8 +494,8 @@
452
494
  "type": "OnboardButton",
453
495
  "attributes": {
454
496
  "labelKey": "onboard.next.two-page",
455
- "button_text_color": "#ffffff",
456
- "button_background_color": "#0450E2",
497
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
498
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
457
499
  "events": [
458
500
  {
459
501
  "type": "Navigate",
@@ -477,8 +519,9 @@
477
519
  "description": "Sayfa buton grubu. (#3)",
478
520
  "title": "OnboardButtons 3",
479
521
  "styles": {
480
- "flex": 2,
481
- "justifyContent": "flex-end"
522
+ "height": 40,
523
+ "marginVertical": 12,
524
+ "flexShrink": 0
482
525
  }
483
526
  },
484
527
  "children": [
@@ -486,8 +529,8 @@
486
529
  "type": "OnboardButton",
487
530
  "attributes": {
488
531
  "labelKey": "onboard.skip.three-page",
489
- "button_text_color": "#0450E2",
490
- "button_background_color": "#E9EBF9",
532
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
533
+ "button_background_color": "THEME_COLORS.LINE",
491
534
  "events": [
492
535
  {
493
536
  "type": "Navigate",
@@ -504,8 +547,8 @@
504
547
  "type": "OnboardButton",
505
548
  "attributes": {
506
549
  "labelKey": "onboard.next.three-page",
507
- "button_text_color": "#ffffff",
508
- "button_background_color": "#0450E2",
550
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
551
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
509
552
  "events": [
510
553
  {
511
554
  "type": "Navigate",
@@ -529,8 +572,9 @@
529
572
  "description": "Sayfa buton grubu. (#4)",
530
573
  "title": "OnboardButtons 4",
531
574
  "styles": {
532
- "flex": 2,
533
- "justifyContent": "flex-end"
575
+ "height": 40,
576
+ "marginVertical": 12,
577
+ "flexShrink": 0
534
578
  }
535
579
  },
536
580
  "children": [
@@ -538,8 +582,8 @@
538
582
  "type": "OnboardButton",
539
583
  "attributes": {
540
584
  "labelKey": "onboard.skip.five-page",
541
- "button_text_color": "#0450E2",
542
- "button_background_color": "#E9EBF9",
585
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
586
+ "button_background_color": "THEME_COLORS.LINE",
543
587
  "events": [
544
588
  {
545
589
  "type": "Navigate",
@@ -556,8 +600,8 @@
556
600
  "type": "OnboardButton",
557
601
  "attributes": {
558
602
  "labelKey": "onboard.next.five-page",
559
- "button_text_color": "#ffffff",
560
- "button_background_color": "#0450E2",
603
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
604
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
561
605
  "events": [
562
606
  {
563
607
  "type": "Permission",
@@ -585,8 +629,9 @@
585
629
  "description": "Sayfa buton grubu. (#5)",
586
630
  "title": "OnboardButtons 5",
587
631
  "styles": {
588
- "flex": 2,
589
- "justifyContent": "flex-end"
632
+ "height": 40,
633
+ "marginVertical": 12,
634
+ "flexShrink": 0
590
635
  }
591
636
  },
592
637
  "children": [
@@ -594,8 +639,8 @@
594
639
  "type": "OnboardButton",
595
640
  "attributes": {
596
641
  "labelKey": "onboard.skip.five-page",
597
- "button_text_color": "#0450E2",
598
- "button_background_color": "#E9EBF9",
642
+ "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
643
+ "button_background_color": "THEME_COLORS.LINE",
599
644
  "events": [
600
645
  {
601
646
  "type": "Navigate",
@@ -612,8 +657,8 @@
612
657
  "type": "OnboardButton",
613
658
  "attributes": {
614
659
  "labelKey": "onboard.next.five-page",
615
- "button_text_color": "#ffffff",
616
- "button_background_color": "#0450E2",
660
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
661
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
617
662
  "events": [
618
663
  {
619
664
  "type": "Permission",
@@ -641,8 +686,9 @@
641
686
  "description": "Sayfa buton grubu. (#6)",
642
687
  "title": "OnboardButtons 6",
643
688
  "styles": {
644
- "flex": 2,
645
- "justifyContent": "flex-end"
689
+ "height": 40,
690
+ "marginVertical": 12,
691
+ "flexShrink": 0
646
692
  }
647
693
  },
648
694
  "children": [
@@ -650,8 +696,8 @@
650
696
  "type": "OnboardButton",
651
697
  "attributes": {
652
698
  "labelKey": "onboard.allow.four-page",
653
- "button_text_color": "#ffffff",
654
- "button_background_color": "#0450E2",
699
+ "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
700
+ "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
655
701
  "events": [
656
702
  {
657
703
  "type": "Permission",
@@ -675,7 +721,8 @@
675
721
  "title": "Onboard Footer Wrap",
676
722
  "description": "Wrapper for OnboardFooter component",
677
723
  "styles": {
678
- "flex": 2
724
+ "marginHorizontal": 25,
725
+ "flexShrink": 0
679
726
  }
680
727
  },
681
728
  "children": [
@@ -684,14 +731,14 @@
684
731
  "attributes": {
685
732
  "textLocalizationKey": "view.onboarding.footer.description",
686
733
  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
687
- "linkedWordFirstColor": "#0450E2",
734
+ "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
688
735
  "linkedWordFirstPage": "privacy",
689
736
  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
690
- "linkedWordSecondColor": "#0450E2",
737
+ "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
691
738
  "linkedWordSecondPage": "terms",
692
739
  "styles": {
693
740
  "gap": 8,
694
- "color": "#A2A4B1"
741
+ "color": "THEME_COLORS.FOOTER_TEXT"
695
742
  }
696
743
  }
697
744
  }