@developer_tribe/react-builder 1.2.18 → 1.2.20

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 (62) hide show
  1. package/dist/build-components/OnboardDot/OnboardDotProps.generated.d.ts +2 -1
  2. package/dist/build-components/patterns.generated.d.ts +23 -8
  3. package/dist/index.cjs.js +3 -3
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +1 -1
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.web.cjs.js +4 -4
  8. package/dist/index.web.cjs.js.map +1 -1
  9. package/dist/index.web.esm.js +3 -3
  10. package/dist/index.web.esm.js.map +1 -1
  11. package/dist/pages/ProjectDebug.d.ts +9 -1
  12. package/dist/pages/ProjectMigrationPage.d.ts +3 -1
  13. package/dist/pages/ProjectValidationPage.d.ts +3 -2
  14. package/dist/styles.css +1 -1
  15. package/dist/utils/applyJsonTransform.d.ts +13 -0
  16. package/dist/utils/repairNodeKeys.d.ts +11 -0
  17. package/dist/utils/safeJsonStringify.d.ts +1 -0
  18. package/dist/utils/wrapNodeInMain.d.ts +2 -0
  19. package/package.json +1 -1
  20. package/src/RenderPage.tsx +17 -46
  21. package/src/assets/meta.json +1 -1
  22. package/src/assets/samples/carousel-sample.json +51 -51
  23. package/src/assets/samples/paywall-1.json +77 -77
  24. package/src/assets/samples/paywall-2.json +76 -76
  25. package/src/assets/samples/simple-1.json +13 -13
  26. package/src/assets/samples/simple-2.json +97 -97
  27. package/src/assets/samples/unmigrated-builder-1.1.1.json +25 -25
  28. package/src/assets/samples/unmigrated-builder1.json +1 -1
  29. package/src/assets/samples/unvalidated-builder1.json +15 -15
  30. package/src/assets/samples/unvalidated-crash1.json +4 -4
  31. package/src/assets/samples/vpn-onboard-1.json +100 -78
  32. package/src/assets/samples/vpn-onboard-2.json +97 -75
  33. package/src/assets/samples/vpn-onboard-3.json +103 -79
  34. package/src/assets/samples/vpn-onboard-4.json +103 -79
  35. package/src/assets/samples/vpn-onboard-5.json +139 -108
  36. package/src/assets/samples/vpn-onboard-6.json +100 -81
  37. package/src/build-components/CarouselDots/CarouselDots.tsx +112 -12
  38. package/src/build-components/OnboardDot/OnboardDot.tsx +74 -40
  39. package/src/build-components/OnboardDot/OnboardDotProps.generated.ts +2 -1
  40. package/src/build-components/OnboardDot/pattern.json +28 -10
  41. package/src/build-components/PaywallProvider/PaywallProvider.tsx +2 -3
  42. package/src/build-components/Text/Text.tsx +4 -9
  43. package/src/build-components/patterns.generated.ts +23 -8
  44. package/src/build-components/useNode.ts +20 -4
  45. package/src/components/AttributesEditorPanel.tsx +13 -1
  46. package/src/components/Builder.tsx +19 -5
  47. package/src/components/EditorHeader.tsx +16 -6
  48. package/src/components/JsonTextEditor.tsx +41 -0
  49. package/src/pages/DebugJsonPage.tsx +104 -4
  50. package/src/pages/ProjectDebug.tsx +66 -28
  51. package/src/pages/ProjectMigrationPage.tsx +15 -0
  52. package/src/pages/ProjectPage.tsx +160 -23
  53. package/src/pages/ProjectValidationPage.tsx +64 -1
  54. package/src/styles/layout/_project-validation.scss +29 -0
  55. package/src/styles/utilities/_carousel.scss +0 -32
  56. package/src/utils/__special_exceptions.ts +9 -3
  57. package/src/utils/analyseNodeByPatterns.ts +16 -6
  58. package/src/utils/applyJsonTransform.ts +19 -0
  59. package/src/utils/novaToJson.ts +7 -3
  60. package/src/utils/repairNodeKeys.ts +90 -0
  61. package/src/utils/safeJsonStringify.ts +18 -0
  62. package/src/utils/wrapNodeInMain.ts +67 -0
@@ -20,80 +20,80 @@
20
20
  "data": {
21
21
  "type": "view",
22
22
  "attributes": {
23
- "style": {
23
+ "scrollable": true,
24
+ "description": "view element 1 in sample.",
25
+ "title": "view 1",
26
+ "styles": {
24
27
  "flexDirection": "column",
25
28
  "alignItems": "stretch",
26
29
  "justifyContent": "flex-start",
27
30
  "gap": 16,
28
31
  "padding": 16,
29
32
  "backgroundColor": "#F3F4F6"
30
- },
31
- "scrollable": true,
32
- "description": "view element 1 in sample.",
33
- "title": "view 1"
33
+ }
34
34
  },
35
35
  "children": [
36
36
  {
37
37
  "type": "view",
38
38
  "attributes": {
39
- "style": {
39
+ "description": "view element 2 in sample.",
40
+ "title": "view 2",
41
+ "styles": {
40
42
  "flexDirection": "row",
41
43
  "alignItems": "center",
42
44
  "justifyContent": "space-between",
43
45
  "padding": 12,
44
46
  "backgroundColor": "#111827",
45
47
  "borderRadius": 12
46
- },
47
- "description": "view element 2 in sample.",
48
- "title": "view 2"
48
+ }
49
49
  },
50
50
  "children": [
51
51
  {
52
52
  "type": "text",
53
53
  "children": "Dashboard",
54
54
  "attributes": {
55
- "style": {
55
+ "description": "text element 1 in sample.",
56
+ "title": "text 1",
57
+ "styles": {
56
58
  "color": "#FFFFFF",
57
59
  "fontSize": 20,
58
60
  "fontWeight": "600"
59
- },
60
- "description": "text element 1 in sample.",
61
- "title": "text 1"
61
+ }
62
62
  }
63
63
  },
64
64
  {
65
65
  "type": "view",
66
66
  "attributes": {
67
- "style": {
67
+ "description": "view element 3 in sample.",
68
+ "title": "view 3",
69
+ "styles": {
68
70
  "flexDirection": "row",
69
71
  "gap": 8
70
- },
71
- "description": "view element 3 in sample.",
72
- "title": "view 3"
72
+ }
73
73
  },
74
74
  "children": [
75
75
  {
76
76
  "type": "text",
77
77
  "children": "Help",
78
78
  "attributes": {
79
- "style": {
79
+ "description": "text element 2 in sample.",
80
+ "title": "text 2",
81
+ "styles": {
80
82
  "color": "#D1D5DB",
81
83
  "fontSize": 14
82
- },
83
- "description": "text element 2 in sample.",
84
- "title": "text 2"
84
+ }
85
85
  }
86
86
  },
87
87
  {
88
88
  "type": "text",
89
89
  "children": "Profile",
90
90
  "attributes": {
91
- "style": {
91
+ "description": "text element 3 in sample.",
92
+ "title": "text 3",
93
+ "styles": {
92
94
  "color": "#D1D5DB",
93
95
  "fontSize": 14
94
- },
95
- "description": "text element 3 in sample.",
96
- "title": "text 3"
96
+ }
97
97
  }
98
98
  }
99
99
  ]
@@ -105,53 +105,53 @@
105
105
  "attributes": {
106
106
  "src": "https://picsum.photos/720/320",
107
107
  "resizeMode": "cover",
108
- "style": {
108
+ "description": "image element 1 in sample.",
109
+ "title": "image 1",
110
+ "styles": {
109
111
  "width": 358,
110
112
  "height": 160,
111
113
  "borderRadius": 12
112
- },
113
- "description": "image element 1 in sample.",
114
- "title": "image 1"
114
+ }
115
115
  },
116
116
  "children": null
117
117
  },
118
118
  {
119
119
  "type": "view",
120
120
  "attributes": {
121
- "style": {
121
+ "description": "view element 4 in sample.",
122
+ "title": "view 4",
123
+ "styles": {
122
124
  "flexDirection": "column",
123
125
  "gap": 8,
124
126
  "padding": 12,
125
127
  "backgroundColor": "#FFFFFF",
126
128
  "borderRadius": 12
127
- },
128
- "description": "view element 4 in sample.",
129
- "title": "view 4"
129
+ }
130
130
  },
131
131
  "children": [
132
132
  {
133
133
  "type": "text",
134
134
  "children": "Welcome back!",
135
135
  "attributes": {
136
- "style": {
136
+ "description": "text element 4 in sample.",
137
+ "title": "text 4",
138
+ "styles": {
137
139
  "color": "#111827",
138
140
  "fontSize": 18,
139
141
  "fontWeight": "600"
140
- },
141
- "description": "text element 4 in sample.",
142
- "title": "text 4"
142
+ }
143
143
  }
144
144
  },
145
145
  {
146
146
  "type": "text",
147
147
  "children": "Here's what's new today.",
148
148
  "attributes": {
149
- "style": {
149
+ "description": "text element 5 in sample.",
150
+ "title": "text 5",
151
+ "styles": {
150
152
  "color": "#6B7280",
151
153
  "fontSize": 14
152
- },
153
- "description": "text element 5 in sample.",
154
- "title": "text 5"
154
+ }
155
155
  }
156
156
  }
157
157
  ]
@@ -159,53 +159,53 @@
159
159
  {
160
160
  "type": "view",
161
161
  "attributes": {
162
- "style": {
162
+ "description": "view element 5 in sample.",
163
+ "title": "view 5",
164
+ "styles": {
163
165
  "flexDirection": "column",
164
166
  "gap": 12
165
- },
166
- "description": "view element 5 in sample.",
167
- "title": "view 5"
167
+ }
168
168
  },
169
169
  "children": [
170
170
  {
171
171
  "type": "view",
172
172
  "attributes": {
173
- "style": {
173
+ "description": "view element 6 in sample.",
174
+ "title": "view 6",
175
+ "styles": {
174
176
  "flexDirection": "row",
175
177
  "alignItems": "center",
176
178
  "justifyContent": "space-between",
177
179
  "padding": 12,
178
180
  "backgroundColor": "#FFFFFF",
179
181
  "borderRadius": 8
180
- },
181
- "description": "view element 6 in sample.",
182
- "title": "view 6"
182
+ }
183
183
  },
184
184
  "children": [
185
185
  {
186
186
  "type": "text",
187
187
  "children": "Task 1",
188
188
  "attributes": {
189
- "style": {
189
+ "description": "text element 6 in sample.",
190
+ "title": "text 6",
191
+ "styles": {
190
192
  "color": "#111827",
191
193
  "fontSize": 16,
192
194
  "fontWeight": "500"
193
- },
194
- "description": "text element 6 in sample.",
195
- "title": "text 6"
195
+ }
196
196
  }
197
197
  },
198
198
  {
199
199
  "type": "text",
200
200
  "children": "Due today",
201
201
  "attributes": {
202
- "style": {
202
+ "description": "text element 7 in sample.",
203
+ "title": "text 7",
204
+ "styles": {
203
205
  "color": "#059669",
204
206
  "fontSize": 12,
205
207
  "fontWeight": "600"
206
- },
207
- "description": "text element 7 in sample.",
208
- "title": "text 7"
208
+ }
209
209
  }
210
210
  }
211
211
  ]
@@ -213,42 +213,42 @@
213
213
  {
214
214
  "type": "view",
215
215
  "attributes": {
216
- "style": {
216
+ "description": "view element 7 in sample.",
217
+ "title": "view 7",
218
+ "styles": {
217
219
  "flexDirection": "row",
218
220
  "alignItems": "center",
219
221
  "justifyContent": "space-between",
220
222
  "padding": 12,
221
223
  "backgroundColor": "#FFFFFF",
222
224
  "borderRadius": 8
223
- },
224
- "description": "view element 7 in sample.",
225
- "title": "view 7"
225
+ }
226
226
  },
227
227
  "children": [
228
228
  {
229
229
  "type": "text",
230
230
  "children": "Task 2",
231
231
  "attributes": {
232
- "style": {
232
+ "description": "text element 8 in sample.",
233
+ "title": "text 8",
234
+ "styles": {
233
235
  "color": "#111827",
234
236
  "fontSize": 16,
235
237
  "fontWeight": "500"
236
- },
237
- "description": "text element 8 in sample.",
238
- "title": "text 8"
238
+ }
239
239
  }
240
240
  },
241
241
  {
242
242
  "type": "text",
243
243
  "children": "2 days left",
244
244
  "attributes": {
245
- "style": {
245
+ "description": "text element 9 in sample.",
246
+ "title": "text 9",
247
+ "styles": {
246
248
  "color": "#D97706",
247
249
  "fontSize": 12,
248
250
  "fontWeight": "600"
249
- },
250
- "description": "text element 9 in sample.",
251
- "title": "text 9"
251
+ }
252
252
  }
253
253
  }
254
254
  ]
@@ -256,42 +256,42 @@
256
256
  {
257
257
  "type": "view",
258
258
  "attributes": {
259
- "style": {
259
+ "description": "view element 8 in sample.",
260
+ "title": "view 8",
261
+ "styles": {
260
262
  "flexDirection": "row",
261
263
  "alignItems": "center",
262
264
  "justifyContent": "space-between",
263
265
  "padding": 12,
264
266
  "backgroundColor": "#FFFFFF",
265
267
  "borderRadius": 8
266
- },
267
- "description": "view element 8 in sample.",
268
- "title": "view 8"
268
+ }
269
269
  },
270
270
  "children": [
271
271
  {
272
272
  "type": "text",
273
273
  "children": "Task 3",
274
274
  "attributes": {
275
- "style": {
275
+ "description": "text element 10 in sample.",
276
+ "title": "text 10",
277
+ "styles": {
276
278
  "color": "#111827",
277
279
  "fontSize": 16,
278
280
  "fontWeight": "500"
279
- },
280
- "description": "text element 10 in sample.",
281
- "title": "text 10"
281
+ }
282
282
  }
283
283
  },
284
284
  {
285
285
  "type": "text",
286
286
  "children": "Completed",
287
287
  "attributes": {
288
- "style": {
288
+ "description": "text element 11 in sample.",
289
+ "title": "text 11",
290
+ "styles": {
289
291
  "color": "#6B7280",
290
292
  "fontSize": 12,
291
293
  "fontWeight": "600"
292
- },
293
- "description": "text element 11 in sample.",
294
- "title": "text 11"
294
+ }
295
295
  }
296
296
  }
297
297
  ]
@@ -301,52 +301,52 @@
301
301
  {
302
302
  "type": "view",
303
303
  "attributes": {
304
- "style": {
304
+ "description": "view element 9 in sample.",
305
+ "title": "view 9",
306
+ "styles": {
305
307
  "flexDirection": "row",
306
308
  "alignItems": "center",
307
309
  "justifyContent": "space-around",
308
310
  "padding": 12,
309
311
  "backgroundColor": "#111827",
310
312
  "borderRadius": 12
311
- },
312
- "description": "view element 9 in sample.",
313
- "title": "view 9"
313
+ }
314
314
  },
315
315
  "children": [
316
316
  {
317
317
  "type": "text",
318
318
  "children": "Home",
319
319
  "attributes": {
320
- "style": {
320
+ "description": "text element 12 in sample.",
321
+ "title": "text 12",
322
+ "styles": {
321
323
  "color": "#FFFFFF",
322
324
  "fontSize": 14
323
- },
324
- "description": "text element 12 in sample.",
325
- "title": "text 12"
325
+ }
326
326
  }
327
327
  },
328
328
  {
329
329
  "type": "text",
330
330
  "children": "Search",
331
331
  "attributes": {
332
- "style": {
332
+ "description": "text element 13 in sample.",
333
+ "title": "text 13",
334
+ "styles": {
333
335
  "color": "#9CA3AF",
334
336
  "fontSize": 14
335
- },
336
- "description": "text element 13 in sample.",
337
- "title": "text 13"
337
+ }
338
338
  }
339
339
  },
340
340
  {
341
341
  "type": "text",
342
342
  "children": "Settings",
343
343
  "attributes": {
344
- "style": {
344
+ "description": "text element 14 in sample.",
345
+ "title": "text 14",
346
+ "styles": {
345
347
  "color": "#9CA3AF",
346
348
  "fontSize": 14
347
- },
348
- "description": "text element 14 in sample.",
349
- "title": "text 14"
349
+ }
350
350
  }
351
351
  }
352
352
  ]
@@ -9,71 +9,71 @@
9
9
  "type": "view",
10
10
  "attributes": {
11
11
  "scrollable": true,
12
- "style": {
12
+ "description": "view element 1 in sample.",
13
+ "title": "view 1",
14
+ "styles": {
13
15
  "flexDirection": "column",
14
16
  "alignItems": "center",
15
17
  "justifyContent": "center",
16
18
  "gap": 12,
17
19
  "padding": 24,
18
20
  "backgroundColor": "#F5F7FA"
19
- },
20
- "description": "view element 1 in sample.",
21
- "title": "view 1"
21
+ }
22
22
  },
23
23
  "children": [
24
24
  {
25
25
  "type": "text",
26
26
  "attributes": {
27
- "style": {
27
+ "description": "text element 1 in sample.",
28
+ "title": "text 1",
29
+ "styles": {
28
30
  "fontSize": 22,
29
31
  "fontWeight": "700",
30
32
  "color": "#111827",
31
33
  "textAlign": "center"
32
- },
33
- "description": "text element 1 in sample.",
34
- "title": "text 1"
34
+ }
35
35
  },
36
36
  "children": "Intentionally unmigrated sample (for combined 1.1.2)"
37
37
  },
38
38
  {
39
39
  "type": "text",
40
40
  "attributes": {
41
- "style": {
41
+ "description": "text element 2 in sample.",
42
+ "title": "text 2",
43
+ "styles": {
42
44
  "fontSize": 14,
43
45
  "color": "#6B7280",
44
46
  "textAlign": "center",
45
47
  "paddingHorizontal": 8
46
- },
47
- "description": "text element 2 in sample.",
48
- "title": "text 2"
48
+ }
49
49
  },
50
- "children": "This project has version 1.1.1 so the Migration page should appear. Click \u201cMigrate now\u201d to move component props and non-style flags out of attributes.style (combined 1.1.2)."
50
+ "children": "This project has version 1.1.1 so the Migration page should appear. Click “Migrate now to move component props and non-style flags out of attributes.style (combined 1.1.2)."
51
51
  },
52
52
  {
53
53
  "type": "view",
54
54
  "attributes": {
55
- "style": {
55
+ "description": "view element 2 in sample.",
56
+ "title": "view 2",
57
+ "styles": {
56
58
  "flexDirection": "row",
57
59
  "alignItems": "center",
58
60
  "justifyContent": "center",
59
61
  "gap": 12,
60
62
  "marginTop": 16
61
- },
62
- "description": "view element 2 in sample.",
63
- "title": "view 2"
63
+ }
64
64
  },
65
65
  "children": [
66
66
  {
67
67
  "type": "BIcon",
68
68
  "attributes": {
69
- "style": {
69
+ "description": "BIcon element 1 in sample.",
70
+ "title": "BIcon 1",
71
+ "styles": {
70
72
  "iconType": "check",
71
73
  "strokeWidth": 3,
72
74
  "color": "#22c55e",
73
75
  "fontSize": "18"
74
- },
75
- "description": "BIcon element 1 in sample.",
76
- "title": "BIcon 1"
76
+ }
77
77
  },
78
78
  "children": null
79
79
  },
@@ -83,12 +83,12 @@
83
83
  "src": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
84
84
  "width": 48,
85
85
  "height": 48,
86
- "style": {
86
+ "description": "image element 1 in sample.",
87
+ "title": "image 1",
88
+ "styles": {
87
89
  "resizeMode": "contain",
88
90
  "borderRadius": 12
89
- },
90
- "description": "image element 1 in sample.",
91
- "title": "image 1"
91
+ }
92
92
  },
93
93
  "children": null
94
94
  }
@@ -41,7 +41,7 @@
41
41
  "description": "text element 2 in sample.",
42
42
  "title": "text 2"
43
43
  },
44
- "children": "This project has version 1.0.0 so the Migration page should appear. Click \u201cMigrate now\u201d to normalize legacy flat style keys into attributes.style and move misplaced props out of style (combined 1.1.2)."
44
+ "children": "This project has version 1.0.0 so the Migration page should appear. Click “Migrate now to normalize legacy flat style keys into attributes.style and move misplaced props out of style (combined 1.1.2)."
45
45
  }
46
46
  ]
47
47
  }
@@ -8,47 +8,47 @@
8
8
  "data": {
9
9
  "type": "view",
10
10
  "attributes": {
11
- "style": {
11
+ "foo": 1,
12
+ "scrollable": true,
13
+ "description": "view element 1 in sample.",
14
+ "title": "view 1",
15
+ "styles": {
12
16
  "flexDirection": "column",
13
17
  "alignItems": "center",
14
18
  "justifyContent": "center",
15
19
  "gap": 12,
16
20
  "padding": 24,
17
21
  "backgroundColor": "#F5F7FA"
18
- },
19
- "foo": 1,
20
- "scrollable": true,
21
- "description": "view element 1 in sample.",
22
- "title": "view 1"
22
+ }
23
23
  },
24
24
  "children": [
25
25
  {
26
26
  "type": "text",
27
27
  "attributes": {
28
- "style": {
28
+ "description": "text element 1 in sample.",
29
+ "title": "text 1",
30
+ "styles": {
29
31
  "fontSize": 22,
30
32
  "fontWeight": "700",
31
33
  "color": "#111827",
32
34
  "textAlign": "center"
33
- },
34
- "description": "text element 1 in sample.",
35
- "title": "text 1"
35
+ }
36
36
  },
37
37
  "children": "Intentionally unvalidated sample"
38
38
  },
39
39
  {
40
40
  "type": "text",
41
41
  "attributes": {
42
- "style": {
42
+ "description": "text element 2 in sample.",
43
+ "title": "text 2",
44
+ "styles": {
43
45
  "fontSize": 14,
44
46
  "color": "#6B7280",
45
47
  "textAlign": "center",
46
48
  "paddingHorizontal": 8
47
- },
48
- "description": "text element 2 in sample.",
49
- "title": "text 2"
49
+ }
50
50
  },
51
- "children": "This project should fail validation (unknown attribute: foo). In the UI, choose \u201cContinue without validation\u201d to load it anyway."
51
+ "children": "This project should fail validation (unknown attribute: foo). In the UI, choose “Continue without validation to load it anyway."
52
52
  }
53
53
  ]
54
54
  }
@@ -9,12 +9,12 @@
9
9
  "type": "OnboardFooter",
10
10
  "attributes": {
11
11
  "textLocalizationKey": 123,
12
- "style": {
12
+ "description": "OnboardFooter element 1 in sample.",
13
+ "title": "OnboardFooter 1",
14
+ "styles": {
13
15
  "paddingHorizontal": 24,
14
16
  "paddingVertical": 16
15
- },
16
- "description": "OnboardFooter element 1 in sample.",
17
- "title": "OnboardFooter 1"
17
+ }
18
18
  },
19
19
  "children": null
20
20
  }