@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-3.json CHANGED
@@ -85,308 +85,307 @@
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": "OnboardTitle",
98
- "attributes": {
99
- "color": "#12131A",
100
- "textAlign": "center",
101
- "marginTop": 40
102
- },
103
- "children": "onboard.title.one-page2"
104
- },
105
- {
106
- "type": "OnboardImage",
107
- "attributes": {
108
- "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/c68cca84580d6920c883c220e57346c0.jpg",
109
- "height": 350,
110
- "resizeMode": "contain"
111
- },
112
- "children": null
113
- },
114
- {
115
- "type": "OnboardSubtitle",
116
- "attributes": {
117
- "color": "#44454D",
118
- "fontSize": 16,
119
- "textAlign": "center"
120
- },
121
- "children": "onboard.subtitle.one-page2"
122
- }
123
- ]
124
- },
125
- {
126
- "type": "OnboardItem",
127
- "key": "app_onboard-page2",
128
- "children": [
129
- {
130
- "type": "OnboardTitle",
131
- "attributes": {
132
- "color": "#12131A",
133
- "textAlign": "center",
134
- "marginTop": 40
135
- },
136
- "children": "onboard.title.two-page2"
137
- },
138
- {
139
- "type": "OnboardSubtitle",
140
- "attributes": {
141
- "color": "#44454D",
142
- "fontSize": 16,
143
- "textAlign": "center"
144
- },
145
- "children": "onboard.subtitle.two-page"
146
- }
147
- ]
97
+ "type": "OnboardTitle",
98
+ "attributes": {
99
+ "color": "#12131A",
100
+ "textAlign": "center",
101
+ "marginTop": 40
102
+ },
103
+ "children": "onboard.title.one-page2"
148
104
  },
149
105
  {
150
- "type": "OnboardItem",
151
- "key": "app_onboard-page3",
152
- "children": [
153
- {
154
- "type": "OnboardTitle",
155
- "attributes": {
156
- "color": "#12131A",
157
- "textAlign": "center",
158
- "marginTop": 40
159
- },
160
- "children": "onboard.title.three-page2"
161
- },
162
- {
163
- "type": "OnboardSubtitle",
164
- "attributes": {
165
- "color": "#44454D",
166
- "fontSize": 16,
167
- "textAlign": "center"
168
- },
169
- "children": "onboard.subtitle.three-page2"
170
- }
171
- ]
106
+ "type": "OnboardImage",
107
+ "attributes": {
108
+ "src": "https://textcall-dev.s3.amazonaws.com/onboard/high/c68cca84580d6920c883c220e57346c0.jpg",
109
+ "height": 350,
110
+ "resizeMode": "contain"
111
+ }
172
112
  },
173
113
  {
174
- "type": "OnboardItem",
175
- "key": "app_onboard-page4",
176
- "children": [
177
- {
178
- "type": "OnboardTitle",
179
- "attributes": {
180
- "color": "#12131A",
181
- "textAlign": "center",
182
- "marginTop": 40
183
- },
184
- "children": "onboard.title.four-page2"
185
- },
186
- {
187
- "type": "OnboardSubtitle",
188
- "attributes": {
189
- "color": "#44454D",
190
- "fontSize": 16,
191
- "textAlign": "center"
192
- },
193
- "children": "onboard.subtitle.four-page2"
194
- }
195
- ]
114
+ "type": "OnboardSubtitle",
115
+ "attributes": {
116
+ "color": "#44454D",
117
+ "fontSize": 16,
118
+ "textAlign": "center"
119
+ },
120
+ "children": "onboard.subtitle.one-page2"
196
121
  }
197
122
  ]
198
123
  },
199
124
  {
200
- "type": "OnboardDot",
201
- "attributes": {
202
- "dotType": "expanding_dot"
203
- },
204
- "children": null
205
- },
206
- {
207
- "type": "OnboardButtons",
208
- "attributes": {
209
- "buttons_direction": "row",
210
- "condition": "carousel-index",
211
- "conditionVariable": 0
212
- },
125
+ "type": "OnboardItem",
126
+ "key": "app_onboard-page2",
213
127
  "children": [
214
128
  {
215
- "type": "OnboardButton",
129
+ "type": "OnboardTitle",
216
130
  "attributes": {
217
- "labelKey": "onboard.skip.one-page",
218
- "button_text_color": "#81838F",
219
- "button_background_color": "#ffffff00",
220
- "flex": 1,
221
- "events": [
222
- {
223
- "type": "Navigate",
224
- "targetIndex": 3
225
- }
226
- ]
131
+ "color": "#12131A",
132
+ "textAlign": "center",
133
+ "marginTop": 40
227
134
  },
228
- "children": null
135
+ "children": "onboard.title.two-page2"
229
136
  },
230
137
  {
231
- "type": "OnboardButton",
138
+ "type": "OnboardSubtitle",
232
139
  "attributes": {
233
- "labelKey": "onboard.next.one-page",
234
- "button_text_color": "#FFFFFF",
235
- "button_background_color": "#0066FF",
236
- "flex": 1,
237
- "events": [
238
- {
239
- "type": "Navigate",
240
- "targetIndex": 1
241
- }
242
- ]
140
+ "color": "#44454D",
141
+ "fontSize": 16,
142
+ "textAlign": "center"
243
143
  },
244
- "children": null
144
+ "children": "onboard.subtitle.two-page"
245
145
  }
246
146
  ]
247
147
  },
248
148
  {
249
- "type": "OnboardButtons",
250
- "attributes": {
251
- "buttons_direction": "row",
252
- "condition": "carousel-index",
253
- "conditionVariable": 1
254
- },
149
+ "type": "OnboardItem",
150
+ "key": "app_onboard-page3",
255
151
  "children": [
256
152
  {
257
- "type": "OnboardButton",
153
+ "type": "OnboardTitle",
258
154
  "attributes": {
259
- "labelKey": "onboard.skip.two-page",
260
- "button_text_color": "#81838F",
261
- "button_background_color": "#ffffff00",
262
- "flex": 1,
263
- "events": [
264
- {
265
- "type": "Permission",
266
- "permission": "att"
267
- },
268
- {
269
- "type": "Navigate",
270
- "targetIndex": 3
271
- }
272
- ]
155
+ "color": "#12131A",
156
+ "textAlign": "center",
157
+ "marginTop": 40
273
158
  },
274
- "children": null
159
+ "children": "onboard.title.three-page2"
275
160
  },
276
161
  {
277
- "type": "OnboardButton",
162
+ "type": "OnboardSubtitle",
278
163
  "attributes": {
279
- "labelKey": "onboard.next.two-page",
280
- "button_text_color": "#FFFFFF",
281
- "button_background_color": "#0066FF",
282
- "flex": 1,
283
- "events": [
284
- {
285
- "type": "Permission",
286
- "permission": "att"
287
- },
288
- {
289
- "type": "Navigate",
290
- "targetIndex": 2
291
- }
292
- ]
164
+ "color": "#44454D",
165
+ "fontSize": 16,
166
+ "textAlign": "center"
293
167
  },
294
- "children": null
168
+ "children": "onboard.subtitle.three-page2"
295
169
  }
296
170
  ]
297
171
  },
298
172
  {
299
- "type": "OnboardButtons",
300
- "attributes": {
301
- "buttons_direction": "row",
302
- "condition": "carousel-index",
303
- "conditionVariable": 2
304
- },
173
+ "type": "OnboardItem",
174
+ "key": "app_onboard-page4",
305
175
  "children": [
306
176
  {
307
- "type": "OnboardButton",
177
+ "type": "OnboardTitle",
308
178
  "attributes": {
309
- "labelKey": "onboard.skip.three-page",
310
- "button_text_color": "#81838F",
311
- "button_background_color": "#ffffff00",
312
- "flex": 1,
313
- "events": [
314
- {
315
- "type": "Navigate",
316
- "targetIndex": 3
317
- }
318
- ]
179
+ "color": "#12131A",
180
+ "textAlign": "center",
181
+ "marginTop": 40
319
182
  },
320
- "children": null
183
+ "children": "onboard.title.four-page2"
321
184
  },
322
185
  {
323
- "type": "OnboardButton",
186
+ "type": "OnboardSubtitle",
324
187
  "attributes": {
325
- "labelKey": "onboard.next.three-page",
326
- "button_text_color": "#FFFFFF",
327
- "button_background_color": "#0066FF",
328
- "flex": 1,
329
- "events": [
330
- {
331
- "type": "Permission",
332
- "permission": "rating"
333
- },
334
- {
335
- "type": "Navigate",
336
- "targetIndex": 3
337
- }
338
- ]
188
+ "color": "#44454D",
189
+ "fontSize": 16,
190
+ "textAlign": "center"
339
191
  },
340
- "children": null
192
+ "children": "onboard.subtitle.four-page2"
341
193
  }
342
194
  ]
195
+ }
196
+ ]
197
+ },
198
+ {
199
+ "type": "OnboardDot",
200
+ "attributes": {
201
+ "dotType": "expanding_dot"
202
+ }
203
+ },
204
+ {
205
+ "type": "OnboardButtons",
206
+ "attributes": {
207
+ "buttons_direction": "row",
208
+ "condition": "carousel-index",
209
+ "conditionVariable": 0
210
+ },
211
+ "children": [
212
+ {
213
+ "type": "OnboardButton",
214
+ "attributes": {
215
+ "labelKey": "onboard.skip.one-page",
216
+ "button_text_color": "#81838F",
217
+ "button_background_color": "#ffffff00",
218
+ "flex": 1,
219
+ "events": [
220
+ {
221
+ "type": "Navigate",
222
+ "navigate_to": null,
223
+ "targetIndex": 3
224
+ }
225
+ ]
226
+ }
343
227
  },
344
228
  {
345
- "type": "OnboardButtons",
229
+ "type": "OnboardButton",
346
230
  "attributes": {
347
- "buttons_direction": "row",
348
- "condition": "carousel-index",
349
- "conditionVariable": 3
350
- },
351
- "children": [
352
- {
353
- "type": "OnboardButton",
354
- "attributes": {
355
- "labelKey": "onboard.allow.four-page",
356
- "button_text_color": "#FFFFFF",
357
- "button_background_color": "#0066FF",
358
- "flex": 1,
359
- "events": [
360
- {
361
- "type": "Permission",
362
- "permission": "notification"
363
- },
364
- {
365
- "type": "Navigate",
366
- "navigate_to": "home"
367
- }
368
- ]
231
+ "labelKey": "onboard.next.one-page",
232
+ "button_text_color": "#FFFFFF",
233
+ "button_background_color": "#0066FF",
234
+ "flex": 1,
235
+ "events": [
236
+ {
237
+ "type": "Navigate",
238
+ "navigate_to": null,
239
+ "targetIndex": 1
240
+ }
241
+ ]
242
+ }
243
+ }
244
+ ]
245
+ },
246
+ {
247
+ "type": "OnboardButtons",
248
+ "attributes": {
249
+ "buttons_direction": "row",
250
+ "condition": "carousel-index",
251
+ "conditionVariable": 1
252
+ },
253
+ "children": [
254
+ {
255
+ "type": "OnboardButton",
256
+ "attributes": {
257
+ "labelKey": "onboard.skip.two-page",
258
+ "button_text_color": "#81838F",
259
+ "button_background_color": "#ffffff00",
260
+ "flex": 1,
261
+ "events": [
262
+ {
263
+ "type": "Permission",
264
+ "permission": "att"
369
265
  },
370
- "children": null
371
- }
372
- ]
266
+ {
267
+ "type": "Navigate",
268
+ "navigate_to": null,
269
+ "targetIndex": 3
270
+ }
271
+ ]
272
+ }
273
+ },
274
+ {
275
+ "type": "OnboardButton",
276
+ "attributes": {
277
+ "labelKey": "onboard.next.two-page",
278
+ "button_text_color": "#FFFFFF",
279
+ "button_background_color": "#0066FF",
280
+ "flex": 1,
281
+ "events": [
282
+ {
283
+ "type": "Permission",
284
+ "permission": "att"
285
+ },
286
+ {
287
+ "type": "Navigate",
288
+ "navigate_to": null,
289
+ "targetIndex": 2
290
+ }
291
+ ]
292
+ }
293
+ }
294
+ ]
295
+ },
296
+ {
297
+ "type": "OnboardButtons",
298
+ "attributes": {
299
+ "buttons_direction": "row",
300
+ "condition": "carousel-index",
301
+ "conditionVariable": 2
302
+ },
303
+ "children": [
304
+ {
305
+ "type": "OnboardButton",
306
+ "attributes": {
307
+ "labelKey": "onboard.skip.three-page",
308
+ "button_text_color": "#81838F",
309
+ "button_background_color": "#ffffff00",
310
+ "flex": 1,
311
+ "events": [
312
+ {
313
+ "type": "Navigate",
314
+ "navigate_to": null,
315
+ "targetIndex": 3
316
+ }
317
+ ]
318
+ }
373
319
  },
374
320
  {
375
- "type": "OnboardFooter",
321
+ "type": "OnboardButton",
376
322
  "attributes": {
377
- "gap": 8,
378
- "textLocalizationKey": "view.onboarding.footer.description",
379
- "textColor": "#81838F",
380
- "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
381
- "linkedWordFirstColor": "#81838F",
382
- "linkedWordFirstPage": "privacy",
383
- "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
384
- "linkedWordSecondColor": "#81838F",
385
- "linkedWordSecondPage": "terms"
386
- },
387
- "children": null
323
+ "labelKey": "onboard.next.three-page",
324
+ "button_text_color": "#FFFFFF",
325
+ "button_background_color": "#0066FF",
326
+ "flex": 1,
327
+ "events": [
328
+ {
329
+ "type": "Permission",
330
+ "permission": "rating"
331
+ },
332
+ {
333
+ "type": "Navigate",
334
+ "navigate_to": null,
335
+ "targetIndex": 3
336
+ }
337
+ ]
338
+ }
388
339
  }
389
340
  ]
341
+ },
342
+ {
343
+ "type": "OnboardButtons",
344
+ "attributes": {
345
+ "buttons_direction": "row",
346
+ "condition": "carousel-index",
347
+ "conditionVariable": 3
348
+ },
349
+ "children": [
350
+ {
351
+ "type": "OnboardButton",
352
+ "attributes": {
353
+ "labelKey": "onboard.allow.four-page",
354
+ "button_text_color": "#FFFFFF",
355
+ "button_background_color": "#0066FF",
356
+ "flex": 1,
357
+ "events": [
358
+ {
359
+ "type": "Permission",
360
+ "permission": "notification"
361
+ },
362
+ {
363
+ "type": "Navigate",
364
+ "navigate_to": "home"
365
+ }
366
+ ]
367
+ }
368
+ }
369
+ ]
370
+ },
371
+ {
372
+ "type": "OnboardFooter",
373
+ "attributes": {
374
+ "gap": 8,
375
+ "textLocalizationKey": "view.onboarding.footer.description",
376
+ "textColor": "#81838F",
377
+ "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
378
+ "linkedWordFirstColor": "#81838F",
379
+ "linkedWordFirstPage": "privacy",
380
+ "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
381
+ "linkedWordSecondColor": "#81838F",
382
+ "linkedWordSecondPage": "terms"
383
+ }
384
+ }
385
+ ],
386
+ "attributes": {
387
+ "theme": "light"
388
+ }
390
389
  }
391
390
  ]
392
391
  }