@developer_tribe/react-builder 1.0.5 → 1.0.6

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 (66) hide show
  1. package/dist/build-components/index.d.ts +1 -2
  2. package/dist/build-components/patterns.generated.d.ts +56 -439
  3. package/dist/components/AttributesEditorPanel.d.ts +2 -2
  4. package/dist/components/BottomBar.d.ts +8 -0
  5. package/dist/components/Checkbox.d.ts +1 -1
  6. package/dist/components/LoadingComponent.d.ts +1 -0
  7. package/dist/components/MobilePanelToggleButton.d.ts +8 -0
  8. package/dist/hooks/useMinimumDelay.d.ts +7 -0
  9. package/dist/hooks/useMobileEditorPanels.d.ts +12 -0
  10. package/dist/hooks/useSyncProjectPageStore.d.ts +15 -0
  11. package/dist/index.cjs.js +3 -3
  12. package/dist/index.cjs.js.map +1 -1
  13. package/dist/index.esm.js +3 -3
  14. package/dist/index.esm.js.map +1 -1
  15. package/dist/index.native.cjs.js +1 -1
  16. package/dist/index.native.cjs.js.map +1 -1
  17. package/dist/index.native.esm.js +4 -4
  18. package/dist/index.native.esm.js.map +1 -1
  19. package/dist/modals/ScreenColorsModal.d.ts +8 -0
  20. package/dist/modals/index.d.ts +1 -0
  21. package/dist/pages/tabs/BuilderPanel.d.ts +2 -2
  22. package/dist/store.d.ts +6 -0
  23. package/dist/styles.css +1 -1
  24. package/dist/utils/nodeTree.d.ts +5 -0
  25. package/package.json +1 -1
  26. package/src/RenderPage.tsx +4 -1
  27. package/src/assets/samples/carousel-sample.json +99 -81
  28. package/src/assets/samples/simple-1.json +8 -2
  29. package/src/assets/samples/simple-2.json +36 -9
  30. package/src/assets/samples/vpn-onboard-1.json +27 -23
  31. package/src/assets/samples/vpn-onboard-2.json +279 -275
  32. package/src/assets/samples/vpn-onboard-3.json +247 -246
  33. package/src/assets/samples/vpn-onboard-4.json +247 -246
  34. package/src/assets/samples/vpn-onboard-5.json +375 -369
  35. package/src/assets/samples/vpn-onboard-6.json +252 -248
  36. package/src/build-components/RenderNode.generated.tsx +0 -7
  37. package/src/build-components/View/pattern.json +2 -2
  38. package/src/build-components/index.ts +0 -5
  39. package/src/build-components/patterns.generated.ts +56 -455
  40. package/src/components/AttributesEditorPanel.tsx +12 -8
  41. package/src/components/BottomBar.tsx +236 -0
  42. package/src/components/EditorHeader.tsx +11 -4
  43. package/src/components/LoadingComponent.tsx +10 -0
  44. package/src/components/MobilePanelToggleButton.tsx +39 -0
  45. package/src/hooks/useMinimumDelay.ts +20 -0
  46. package/src/hooks/useMobileEditorPanels.ts +56 -0
  47. package/src/hooks/useSyncProjectPageStore.ts +40 -0
  48. package/src/modals/ScreenColorsModal.tsx +115 -0
  49. package/src/modals/index.ts +1 -0
  50. package/src/pages/ProjectPage.tsx +53 -243
  51. package/src/pages/tabs/BuilderPanel.tsx +14 -8
  52. package/src/store.ts +10 -6
  53. package/src/styles/base/_global.scss +12 -4
  54. package/src/styles/components/_attributes-editor.scss +9 -1
  55. package/src/styles/components/_bottom-bar.scss +113 -0
  56. package/src/styles/components/_editor-shell.scss +0 -19
  57. package/src/styles/index.scss +1 -0
  58. package/src/utils/analyseNodeByPatterns.ts +15 -0
  59. package/src/utils/nodeTree.ts +99 -0
  60. package/dist/build-components/PaywallSubscriButton/PaywallSubscriButton.d.ts +0 -5
  61. package/dist/build-components/PaywallSubscriButton/PaywallSubscriButtonProps.generated.d.ts +0 -50
  62. package/dist/pages/tabs/SideTool.d.ts +0 -8
  63. package/src/build-components/PaywallSubscriButton/PaywallSubscriButton.tsx +0 -10
  64. package/src/build-components/PaywallSubscriButton/PaywallSubscriButtonProps.generated.ts +0 -77
  65. package/src/build-components/PaywallSubscriButton/pattern.json +0 -27
  66. package/src/pages/tabs/SideTool.tsx +0 -253
package/src/assets/samples/vpn-onboard-2.json CHANGED
@@ -69,336 +69,340 @@
69
69
  "children": [
70
70
  {
71
71
  "type": "OnboardProvider",
72
- "children": [
73
- {
74
- "type": "Onboard",
75
72
  "children": [
76
73
  {
77
- "type": "OnboardItem",
78
- "key": "app_onboard-page1",
74
+ "type": "Onboard",
79
75
  "children": [
80
76
  {
81
- "type": "OnboardTitle",
82
- "attributes": {
83
- "color": "#12131A",
84
- "textAlign": "center",
85
- "marginTop": 40
86
- },
87
- "children": "onboard.title.one-page"
77
+ "type": "OnboardItem",
78
+ "key": "app_onboard-page1",
79
+ "children": [
80
+ {
81
+ "type": "OnboardTitle",
82
+ "attributes": {
83
+ "color": "#12131A",
84
+ "textAlign": "center",
85
+ "marginTop": 40
86
+ },
87
+ "children": "onboard.title.one-page"
88
+ },
89
+ {
90
+ "type": "OnboardImage",
91
+ "attributes": {
92
+ "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/0c65cbe8e0c2e1242146e15dfd50a486.png",
93
+ "height": 350,
94
+ "resizeMode": "contain"
95
+ },
96
+ "children": null
97
+ },
98
+ {
99
+ "type": "OnboardSubtitle",
100
+ "attributes": {
101
+ "color": "#44454D",
102
+ "fontSize": 16,
103
+ "textAlign": "center"
104
+ },
105
+ "children": "onboard.subtitle.one-page"
106
+ }
107
+ ]
88
108
  },
89
109
  {
90
- "type": "OnboardImage",
91
- "attributes": {
92
- "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/0c65cbe8e0c2e1242146e15dfd50a486.png",
93
- "height": 350,
94
- "resizeMode": "contain"
95
- }
110
+ "type": "OnboardItem",
111
+ "key": "app_onboard-page2",
112
+ "children": [
113
+ {
114
+ "type": "OnboardTitle",
115
+ "attributes": {
116
+ "color": "#12131A",
117
+ "textAlign": "center",
118
+ "marginTop": 40
119
+ },
120
+ "children": "onboard.title.two-page"
121
+ },
122
+ {
123
+ "type": "OnboardImage",
124
+ "attributes": {
125
+ "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/e8bbdde825cd23bdc44a9b2b32af22dc.png",
126
+ "height": 350,
127
+ "resizeMode": "contain"
128
+ },
129
+ "children": null
130
+ },
131
+ {
132
+ "type": "OnboardSubtitle",
133
+ "attributes": {
134
+ "color": "#44454D",
135
+ "fontSize": 16,
136
+ "textAlign": "center"
137
+ },
138
+ "children": "onboard.subtitle.two-page"
139
+ }
140
+ ]
96
141
  },
97
142
  {
98
- "type": "OnboardSubtitle",
99
- "attributes": {
100
- "color": "#44454D",
101
- "fontSize": 16,
102
- "textAlign": "center"
103
- },
104
- "children": "onboard.subtitle.one-page"
143
+ "type": "OnboardItem",
144
+ "key": "app_onboard-page3",
145
+ "children": [
146
+ {
147
+ "type": "OnboardTitle",
148
+ "attributes": {
149
+ "color": "#12131A",
150
+ "textAlign": "center",
151
+ "marginTop": 40
152
+ },
153
+ "children": "onboard.title.three-page"
154
+ },
155
+ {
156
+ "type": "OnboardImage",
157
+ "attributes": {
158
+ "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/3f312b38faf844746250cd54f27f91da.png",
159
+ "height": 350,
160
+ "resizeMode": "contain"
161
+ },
162
+ "children": null
163
+ },
164
+ {
165
+ "type": "OnboardSubtitle",
166
+ "attributes": {
167
+ "color": "#44454D",
168
+ "fontSize": 16,
169
+ "textAlign": "center"
170
+ },
171
+ "children": "onboard.subtitle.three-page"
172
+ }
173
+ ]
174
+ },
175
+ {
176
+ "type": "OnboardItem",
177
+ "key": "app_onboard-page4",
178
+ "children": [
179
+ {
180
+ "type": "OnboardTitle",
181
+ "attributes": {
182
+ "color": "#12131A",
183
+ "textAlign": "center",
184
+ "marginTop": 40
185
+ },
186
+ "children": "onboard.title.four-page"
187
+ },
188
+ {
189
+ "type": "OnboardImage",
190
+ "attributes": {
191
+ "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/f4db2a32a43239c3bbbe742cb0f18b61.png",
192
+ "height": 350,
193
+ "resizeMode": "contain"
194
+ },
195
+ "children": null
196
+ },
197
+ {
198
+ "type": "OnboardSubtitle",
199
+ "attributes": {
200
+ "color": "#44454D",
201
+ "fontSize": 16,
202
+ "textAlign": "center"
203
+ },
204
+ "children": "onboard.subtitle.four-page"
205
+ }
206
+ ]
105
207
  }
106
208
  ]
107
209
  },
108
210
  {
109
- "type": "OnboardItem",
110
- "key": "app_onboard-page2",
211
+ "type": "OnboardDot",
212
+ "attributes": {
213
+ "dotType": "expanding_dot",
214
+ "expanding_dot_width": 20,
215
+ "active_dot_color": "#007AFF"
216
+ },
217
+ "children": null
218
+ },
219
+ {
220
+ "type": "OnboardButtons",
221
+ "attributes": {
222
+ "buttons_direction": "row",
223
+ "condition": "carousel-index",
224
+ "conditionVariable": 0
225
+ },
111
226
  "children": [
112
227
  {
113
- "type": "OnboardTitle",
228
+ "type": "OnboardButton",
114
229
  "attributes": {
115
- "color": "#12131A",
116
- "textAlign": "center",
117
- "marginTop": 40
230
+ "labelKey": "onboard.skip.one-page",
231
+ "button_text_color": "#81838F",
232
+ "animation": "line-animation",
233
+ "animation_color": "#FFFFFF",
234
+ "button_background_color": "#ffffff00",
235
+ "flex": 1,
236
+ "events": [
237
+ {
238
+ "type": "Navigate",
239
+ "targetIndex": 3
240
+ }
241
+ ]
118
242
  },
119
- "children": "onboard.title.two-page"
243
+ "children": null
120
244
  },
121
245
  {
122
- "type": "OnboardImage",
246
+ "type": "OnboardButton",
123
247
  "attributes": {
124
- "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/e8bbdde825cd23bdc44a9b2b32af22dc.png",
125
- "height": 350,
126
- "resizeMode": "contain"
127
- }
128
- },
129
- {
130
- "type": "OnboardSubtitle",
131
- "attributes": {
132
- "color": "#44454D",
133
- "fontSize": 16,
134
- "textAlign": "center"
248
+ "labelKey": "onboard.next.one-page",
249
+ "button_text_color": "#FFFFFF",
250
+ "animation": "simple-animation",
251
+ "button_background_color": "#0066FF",
252
+ "flex": 1,
253
+ "events": [
254
+ {
255
+ "type": "Navigate",
256
+ "targetIndex": 1
257
+ }
258
+ ]
135
259
  },
136
- "children": "onboard.subtitle.two-page"
260
+ "children": null
137
261
  }
138
262
  ]
139
263
  },
140
264
  {
141
- "type": "OnboardItem",
142
- "key": "app_onboard-page3",
265
+ "type": "OnboardButtons",
266
+ "attributes": {
267
+ "buttons_direction": "row",
268
+ "condition": "carousel-index",
269
+ "conditionVariable": 1
270
+ },
143
271
  "children": [
144
272
  {
145
- "type": "OnboardTitle",
273
+ "type": "OnboardButton",
146
274
  "attributes": {
147
- "color": "#12131A",
148
- "textAlign": "center",
149
- "marginTop": 40
275
+ "labelKey": "onboard.skip.two-page",
276
+ "button_text_color": "#81838F",
277
+ "button_background_color": "#ffffff00",
278
+ "flex": 1,
279
+ "events": [
280
+ {
281
+ "type": "Permission",
282
+ "permission": "att"
283
+ },
284
+ {
285
+ "type": "Navigate",
286
+ "targetIndex": 3
287
+ }
288
+ ]
150
289
  },
151
- "children": "onboard.title.three-page"
290
+ "children": null
152
291
  },
153
292
  {
154
- "type": "OnboardImage",
293
+ "type": "OnboardButton",
155
294
  "attributes": {
156
- "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/3f312b38faf844746250cd54f27f91da.png",
157
- "height": 350,
158
- "resizeMode": "contain"
159
- }
160
- },
161
- {
162
- "type": "OnboardSubtitle",
163
- "attributes": {
164
- "color": "#44454D",
165
- "fontSize": 16,
166
- "textAlign": "center"
295
+ "labelKey": "onboard.next.two-page",
296
+ "button_text_color": "#FFFFFF",
297
+ "button_background_color": "#0066FF",
298
+ "flex": 1,
299
+ "events": [
300
+ {
301
+ "type": "Permission",
302
+ "permission": "att"
303
+ },
304
+ {
305
+ "type": "Navigate",
306
+ "targetIndex": 2
307
+ }
308
+ ]
167
309
  },
168
- "children": "onboard.subtitle.three-page"
310
+ "children": null
169
311
  }
170
312
  ]
171
313
  },
172
314
  {
173
- "type": "OnboardItem",
174
- "key": "app_onboard-page4",
315
+ "type": "OnboardButtons",
316
+ "attributes": {
317
+ "buttons_direction": "row",
318
+ "condition": "carousel-index",
319
+ "conditionVariable": 2
320
+ },
175
321
  "children": [
176
322
  {
177
- "type": "OnboardTitle",
323
+ "type": "OnboardButton",
178
324
  "attributes": {
179
- "color": "#12131A",
180
- "textAlign": "center",
181
- "marginTop": 40
325
+ "labelKey": "onboard.skip.three-page",
326
+ "button_text_color": "#81838F",
327
+ "button_background_color": "#ffffff00",
328
+ "flex": 1,
329
+ "events": [
330
+ {
331
+ "type": "Navigate",
332
+ "targetIndex": 3
333
+ }
334
+ ]
182
335
  },
183
- "children": "onboard.title.four-page"
336
+ "children": null
184
337
  },
185
338
  {
186
- "type": "OnboardImage",
339
+ "type": "OnboardButton",
187
340
  "attributes": {
188
- "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/f4db2a32a43239c3bbbe742cb0f18b61.png",
189
- "height": 350,
190
- "resizeMode": "contain"
191
- }
192
- },
193
- {
194
- "type": "OnboardSubtitle",
195
- "attributes": {
196
- "color": "#44454D",
197
- "fontSize": 16,
198
- "textAlign": "center"
341
+ "labelKey": "onboard.next.three-page",
342
+ "button_text_color": "#FFFFFF",
343
+ "button_background_color": "#0066FF",
344
+ "flex": 1,
345
+ "events": [
346
+ {
347
+ "type": "Permission",
348
+ "permission": "rating"
349
+ },
350
+ {
351
+ "type": "Navigate",
352
+ "targetIndex": 3
353
+ }
354
+ ]
199
355
  },
200
- "children": "onboard.subtitle.four-page"
356
+ "children": null
201
357
  }
202
358
  ]
203
- }
204
- ]
205
- },
206
- {
207
- "type": "OnboardDot",
208
- "attributes": {
209
- "dotType": "expanding_dot",
210
- "expanding_dot_width": 20,
211
- "active_dot_color": "#007AFF"
212
- }
213
- },
214
- {
215
- "type": "OnboardButtons",
216
- "attributes": {
217
- "buttons_direction": "row",
218
- "condition": "carousel-index",
219
- "conditionVariable": 0
220
- },
221
- "children": [
222
- {
223
- "type": "OnboardButton",
224
- "attributes": {
225
- "labelKey": "onboard.skip.one-page",
226
- "button_text_color": "#81838F",
227
- "animation": "line-animation",
228
- "animation_color": "#FFFFFF",
229
- "button_background_color": "#ffffff00",
230
- "flex": 1,
231
- "events": [
232
- {
233
- "type": "Navigate",
234
- "navigate_to": null,
235
- "targetIndex": 3
236
- }
237
- ]
238
- }
239
359
  },
240
360
  {
241
- "type": "OnboardButton",
361
+ "type": "OnboardButtons",
242
362
  "attributes": {
243
- "labelKey": "onboard.next.one-page",
244
- "button_text_color": "#FFFFFF",
245
- "animation": "simple-animation",
246
- "button_background_color": "#0066FF",
247
- "flex": 1,
248
- "events": [
249
- {
250
- "type": "Navigate",
251
- "navigate_to": null,
252
- "targetIndex": 1
253
- }
254
- ]
255
- }
256
- }
257
- ]
258
- },
259
- {
260
- "type": "OnboardButtons",
261
- "attributes": {
262
- "buttons_direction": "row",
263
- "condition": "carousel-index",
264
- "conditionVariable": 1
265
- },
266
- "children": [
267
- {
268
- "type": "OnboardButton",
269
- "attributes": {
270
- "labelKey": "onboard.skip.two-page",
271
- "button_text_color": "#81838F",
272
- "button_background_color": "#ffffff00",
273
- "flex": 1,
274
- "events": [
275
- {
276
- "type": "Permission",
277
- "permission": "att"
278
- },
279
- {
280
- "type": "Navigate",
281
- "navigate_to": null,
282
- "targetIndex": 3
283
- }
284
- ]
285
- }
286
- },
287
- {
288
- "type": "OnboardButton",
289
- "attributes": {
290
- "labelKey": "onboard.next.two-page",
291
- "button_text_color": "#FFFFFF",
292
- "button_background_color": "#0066FF",
293
- "flex": 1,
294
- "events": [
295
- {
296
- "type": "Permission",
297
- "permission": "att"
363
+ "buttons_direction": "row",
364
+ "condition": "carousel-index",
365
+ "conditionVariable": 3
366
+ },
367
+ "children": [
368
+ {
369
+ "type": "OnboardButton",
370
+ "attributes": {
371
+ "labelKey": "onboard.allow.four-page",
372
+ "button_text_color": "#FFFFFF",
373
+ "button_background_color": "#0066FF",
374
+ "flex": 1,
375
+ "events": [
376
+ {
377
+ "type": "Permission",
378
+ "permission": "notification"
379
+ },
380
+ {
381
+ "type": "Navigate",
382
+ "navigate_to": "home"
383
+ }
384
+ ]
298
385
  },
299
- {
300
- "type": "Navigate",
301
- "navigate_to": null,
302
- "targetIndex": 2
303
- }
304
- ]
305
- }
306
- }
307
- ]
308
- },
309
- {
310
- "type": "OnboardButtons",
311
- "attributes": {
312
- "buttons_direction": "row",
313
- "condition": "carousel-index",
314
- "conditionVariable": 2
315
- },
316
- "children": [
317
- {
318
- "type": "OnboardButton",
319
- "attributes": {
320
- "labelKey": "onboard.skip.three-page",
321
- "button_text_color": "#81838F",
322
- "button_background_color": "#ffffff00",
323
- "flex": 1,
324
- "events": [
325
- {
326
- "type": "Navigate",
327
- "navigate_to": null,
328
- "targetIndex": 3
329
- }
330
- ]
331
- }
386
+ "children": null
387
+ }
388
+ ]
332
389
  },
333
390
  {
334
- "type": "OnboardButton",
391
+ "type": "OnboardFooter",
335
392
  "attributes": {
336
- "labelKey": "onboard.next.three-page",
337
- "button_text_color": "#FFFFFF",
338
- "button_background_color": "#0066FF",
339
- "flex": 1,
340
- "events": [
341
- {
342
- "type": "Permission",
343
- "permission": "rating"
344
- },
345
- {
346
- "type": "Navigate",
347
- "navigate_to": null,
348
- "targetIndex": 3
349
- }
350
- ]
351
- }
393
+ "gap": 8,
394
+ "textLocalizationKey": "view.onboarding.footer.description",
395
+ "textColor": "#A2A4B1",
396
+ "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
397
+ "linkedWordFirstColor": "#1778F2",
398
+ "linkedWordFirstPage": "privacy",
399
+ "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
400
+ "linkedWordSecondColor": "#1778F2",
401
+ "linkedWordSecondPage": "terms"
402
+ },
403
+ "children": null
352
404
  }
353
405
  ]
354
- },
355
- {
356
- "type": "OnboardButtons",
357
- "attributes": {
358
- "buttons_direction": "row",
359
- "condition": "carousel-index",
360
- "conditionVariable": 3
361
- },
362
- "children": [
363
- {
364
- "type": "OnboardButton",
365
- "attributes": {
366
- "labelKey": "onboard.allow.four-page",
367
- "button_text_color": "#FFFFFF",
368
- "button_background_color": "#0066FF",
369
- "flex": 1,
370
- "events": [
371
- {
372
- "type": "Permission",
373
- "permission": "notification"
374
- },
375
- {
376
- "type": "Navigate",
377
- "navigate_to": "home"
378
- }
379
- ]
380
- }
381
- }
382
- ]
383
- },
384
- {
385
- "type": "OnboardFooter",
386
- "attributes": {
387
- "gap": 8,
388
- "textLocalizationKey": "view.onboarding.footer.description",
389
- "textColor": "#A2A4B1",
390
- "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
391
- "linkedWordFirstColor": "#1778F2",
392
- "linkedWordFirstPage": "privacy",
393
- "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
394
- "linkedWordSecondColor": "#1778F2",
395
- "linkedWordSecondPage": "terms"
396
- }
397
- }
398
- ],
399
- "attributes": {
400
- "theme": "light"
401
- }
402
406
  }
403
407
  ]
404
408
  }