@developer_tribe/react-builder 1.0.6 → 1.0.8

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