@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.
- package/dist/build-components/OnboardDot/OnboardDotProps.generated.d.ts +2 -1
- package/dist/build-components/patterns.generated.d.ts +23 -8
- package/dist/index.cjs.js +3 -3
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.web.cjs.js +4 -4
- package/dist/index.web.cjs.js.map +1 -1
- package/dist/index.web.esm.js +3 -3
- package/dist/index.web.esm.js.map +1 -1
- package/dist/pages/ProjectDebug.d.ts +9 -1
- package/dist/pages/ProjectMigrationPage.d.ts +3 -1
- package/dist/pages/ProjectValidationPage.d.ts +3 -2
- package/dist/styles.css +1 -1
- package/dist/utils/applyJsonTransform.d.ts +13 -0
- package/dist/utils/repairNodeKeys.d.ts +11 -0
- package/dist/utils/safeJsonStringify.d.ts +1 -0
- package/dist/utils/wrapNodeInMain.d.ts +2 -0
- package/package.json +1 -1
- package/src/RenderPage.tsx +17 -46
- package/src/assets/meta.json +1 -1
- package/src/assets/samples/carousel-sample.json +51 -51
- package/src/assets/samples/paywall-1.json +77 -77
- package/src/assets/samples/paywall-2.json +76 -76
- package/src/assets/samples/simple-1.json +13 -13
- package/src/assets/samples/simple-2.json +97 -97
- package/src/assets/samples/unmigrated-builder-1.1.1.json +25 -25
- package/src/assets/samples/unmigrated-builder1.json +1 -1
- package/src/assets/samples/unvalidated-builder1.json +15 -15
- package/src/assets/samples/unvalidated-crash1.json +4 -4
- package/src/assets/samples/vpn-onboard-1.json +100 -78
- package/src/assets/samples/vpn-onboard-2.json +97 -75
- package/src/assets/samples/vpn-onboard-3.json +103 -79
- package/src/assets/samples/vpn-onboard-4.json +103 -79
- package/src/assets/samples/vpn-onboard-5.json +139 -108
- package/src/assets/samples/vpn-onboard-6.json +100 -81
- package/src/build-components/CarouselDots/CarouselDots.tsx +112 -12
- package/src/build-components/OnboardDot/OnboardDot.tsx +74 -40
- package/src/build-components/OnboardDot/OnboardDotProps.generated.ts +2 -1
- package/src/build-components/OnboardDot/pattern.json +28 -10
- package/src/build-components/PaywallProvider/PaywallProvider.tsx +2 -3
- package/src/build-components/Text/Text.tsx +4 -9
- package/src/build-components/patterns.generated.ts +23 -8
- package/src/build-components/useNode.ts +20 -4
- package/src/components/AttributesEditorPanel.tsx +13 -1
- package/src/components/Builder.tsx +19 -5
- package/src/components/EditorHeader.tsx +16 -6
- package/src/components/JsonTextEditor.tsx +41 -0
- package/src/pages/DebugJsonPage.tsx +104 -4
- package/src/pages/ProjectDebug.tsx +66 -28
- package/src/pages/ProjectMigrationPage.tsx +15 -0
- package/src/pages/ProjectPage.tsx +160 -23
- package/src/pages/ProjectValidationPage.tsx +64 -1
- package/src/styles/layout/_project-validation.scss +29 -0
- package/src/styles/utilities/_carousel.scss +0 -32
- package/src/utils/__special_exceptions.ts +9 -3
- package/src/utils/analyseNodeByPatterns.ts +16 -6
- package/src/utils/applyJsonTransform.ts +19 -0
- package/src/utils/novaToJson.ts +7 -3
- package/src/utils/repairNodeKeys.ts +90 -0
- package/src/utils/safeJsonStringify.ts +18 -0
- package/src/utils/wrapNodeInMain.ts +67 -0
|
@@ -29,17 +29,17 @@
|
|
|
29
29
|
{
|
|
30
30
|
"type": "PaywallProvider",
|
|
31
31
|
"attributes": {
|
|
32
|
-
"
|
|
32
|
+
"scrollable": true,
|
|
33
|
+
"delay": 5000,
|
|
34
|
+
"description": "Paywall provider container.",
|
|
35
|
+
"title": "Main Paywall",
|
|
36
|
+
"styles": {
|
|
33
37
|
"flexDirection": "column",
|
|
34
38
|
"alignItems": "stretch",
|
|
35
39
|
"justifyContent": "flex-start",
|
|
36
40
|
"position": "relative",
|
|
37
41
|
"backgroundColor": "#EEF2FF"
|
|
38
|
-
}
|
|
39
|
-
"scrollable": true,
|
|
40
|
-
"delay": 5000,
|
|
41
|
-
"description": "Paywall provider container.",
|
|
42
|
-
"title": "Main Paywall"
|
|
42
|
+
}
|
|
43
43
|
},
|
|
44
44
|
"children": [
|
|
45
45
|
{
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
{
|
|
56
56
|
"type": "View",
|
|
57
57
|
"attributes": {
|
|
58
|
-
"
|
|
58
|
+
"styles": {
|
|
59
59
|
"paddingTop": 56,
|
|
60
60
|
"paddingHorizontal": 16,
|
|
61
61
|
"paddingBottom": 16,
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
{
|
|
68
68
|
"type": "PaywallCloseButton",
|
|
69
69
|
"attributes": {
|
|
70
|
-
"
|
|
70
|
+
"styles": {
|
|
71
71
|
"width": 32,
|
|
72
72
|
"height": 32,
|
|
73
73
|
"borderRadius": 16,
|
|
@@ -83,27 +83,27 @@
|
|
|
83
83
|
{
|
|
84
84
|
"type": "View",
|
|
85
85
|
"attributes": {
|
|
86
|
-
"
|
|
86
|
+
"description": "Benefits container.",
|
|
87
|
+
"title": "Benefits",
|
|
88
|
+
"styles": {
|
|
87
89
|
"flexDirection": "column",
|
|
88
90
|
"gap": 4,
|
|
89
91
|
"marginTop": "12%"
|
|
90
|
-
}
|
|
91
|
-
"description": "Benefits container.",
|
|
92
|
-
"title": "Benefits"
|
|
92
|
+
}
|
|
93
93
|
},
|
|
94
94
|
"children": [
|
|
95
95
|
{
|
|
96
96
|
"type": "View",
|
|
97
97
|
"attributes": {
|
|
98
|
-
"
|
|
98
|
+
"description": "Benefit container #1.",
|
|
99
|
+
"title": "Benefit #1",
|
|
100
|
+
"styles": {
|
|
99
101
|
"flexDirection": "row",
|
|
100
102
|
"alignItems": "center",
|
|
101
103
|
"gap": 8,
|
|
102
104
|
"paddingVertical": 8,
|
|
103
105
|
"paddingHorizontal": 12
|
|
104
|
-
}
|
|
105
|
-
"description": "Benefit container #1.",
|
|
106
|
-
"title": "Benefit #1"
|
|
106
|
+
}
|
|
107
107
|
},
|
|
108
108
|
"children": [
|
|
109
109
|
{
|
|
@@ -111,26 +111,26 @@
|
|
|
111
111
|
"attributes": {
|
|
112
112
|
"iconType": "check",
|
|
113
113
|
"strokeWidth": 3,
|
|
114
|
-
"
|
|
114
|
+
"description": "Icon item.",
|
|
115
|
+
"title": "BIcon 1",
|
|
116
|
+
"styles": {
|
|
115
117
|
"color": "#22c55e",
|
|
116
118
|
"fontSize": "16",
|
|
117
119
|
"flex": 0
|
|
118
|
-
}
|
|
119
|
-
"description": "Icon item.",
|
|
120
|
-
"title": "BIcon 1"
|
|
120
|
+
}
|
|
121
121
|
},
|
|
122
122
|
"children": null
|
|
123
123
|
},
|
|
124
124
|
{
|
|
125
125
|
"type": "text",
|
|
126
126
|
"attributes": {
|
|
127
|
-
"
|
|
127
|
+
"description": "Text item.",
|
|
128
|
+
"title": "text 1",
|
|
129
|
+
"styles": {
|
|
128
130
|
"flex": 1,
|
|
129
131
|
"color": "#FFFFFF",
|
|
130
132
|
"fontWeight": "700"
|
|
131
|
-
}
|
|
132
|
-
"description": "Text item.",
|
|
133
|
-
"title": "text 1"
|
|
133
|
+
}
|
|
134
134
|
},
|
|
135
135
|
"children": "@benefit1 — Unlimited access"
|
|
136
136
|
}
|
|
@@ -139,15 +139,15 @@
|
|
|
139
139
|
{
|
|
140
140
|
"type": "View",
|
|
141
141
|
"attributes": {
|
|
142
|
-
"
|
|
142
|
+
"description": "Benefit container #2.",
|
|
143
|
+
"title": "Benefit #2",
|
|
144
|
+
"styles": {
|
|
143
145
|
"flexDirection": "row",
|
|
144
146
|
"alignItems": "center",
|
|
145
147
|
"gap": 8,
|
|
146
148
|
"paddingVertical": 8,
|
|
147
149
|
"paddingHorizontal": 12
|
|
148
|
-
}
|
|
149
|
-
"description": "Benefit container #2.",
|
|
150
|
-
"title": "Benefit #2"
|
|
150
|
+
}
|
|
151
151
|
},
|
|
152
152
|
"children": [
|
|
153
153
|
{
|
|
@@ -155,26 +155,26 @@
|
|
|
155
155
|
"attributes": {
|
|
156
156
|
"iconType": "check",
|
|
157
157
|
"strokeWidth": 3,
|
|
158
|
-
"
|
|
158
|
+
"description": "Icon item.",
|
|
159
|
+
"title": "BIcon 2",
|
|
160
|
+
"styles": {
|
|
159
161
|
"color": "#22c55e",
|
|
160
162
|
"fontSize": "16",
|
|
161
163
|
"flex": 0
|
|
162
|
-
}
|
|
163
|
-
"description": "Icon item.",
|
|
164
|
-
"title": "BIcon 2"
|
|
164
|
+
}
|
|
165
165
|
},
|
|
166
166
|
"children": null
|
|
167
167
|
},
|
|
168
168
|
{
|
|
169
169
|
"type": "text",
|
|
170
170
|
"attributes": {
|
|
171
|
-
"
|
|
171
|
+
"description": "Text item.",
|
|
172
|
+
"title": "text 2",
|
|
173
|
+
"styles": {
|
|
172
174
|
"flex": 1,
|
|
173
175
|
"color": "#FFFFFF",
|
|
174
176
|
"fontWeight": "700"
|
|
175
|
-
}
|
|
176
|
-
"description": "Text item.",
|
|
177
|
-
"title": "text 2"
|
|
177
|
+
}
|
|
178
178
|
},
|
|
179
179
|
"children": "@benefit2 — 7-day free trial"
|
|
180
180
|
}
|
|
@@ -183,15 +183,15 @@
|
|
|
183
183
|
{
|
|
184
184
|
"type": "View",
|
|
185
185
|
"attributes": {
|
|
186
|
-
"
|
|
186
|
+
"description": "Benefit container #3.",
|
|
187
|
+
"title": "Benefit #3",
|
|
188
|
+
"styles": {
|
|
187
189
|
"flexDirection": "row",
|
|
188
190
|
"alignItems": "center",
|
|
189
191
|
"gap": 8,
|
|
190
192
|
"paddingVertical": 8,
|
|
191
193
|
"paddingHorizontal": 12
|
|
192
|
-
}
|
|
193
|
-
"description": "Benefit container #3.",
|
|
194
|
-
"title": "Benefit #3"
|
|
194
|
+
}
|
|
195
195
|
},
|
|
196
196
|
"children": [
|
|
197
197
|
{
|
|
@@ -199,26 +199,26 @@
|
|
|
199
199
|
"attributes": {
|
|
200
200
|
"iconType": "check",
|
|
201
201
|
"strokeWidth": 3,
|
|
202
|
-
"
|
|
202
|
+
"description": "Icon item.",
|
|
203
|
+
"title": "BIcon 3",
|
|
204
|
+
"styles": {
|
|
203
205
|
"color": "#22c55e",
|
|
204
206
|
"fontSize": "16",
|
|
205
207
|
"flex": 0
|
|
206
|
-
}
|
|
207
|
-
"description": "Icon item.",
|
|
208
|
-
"title": "BIcon 3"
|
|
208
|
+
}
|
|
209
209
|
},
|
|
210
210
|
"children": null
|
|
211
211
|
},
|
|
212
212
|
{
|
|
213
213
|
"type": "text",
|
|
214
214
|
"attributes": {
|
|
215
|
-
"
|
|
215
|
+
"description": "Text item.",
|
|
216
|
+
"title": "text 3",
|
|
217
|
+
"styles": {
|
|
216
218
|
"flex": 1,
|
|
217
219
|
"color": "#FFFFFF",
|
|
218
220
|
"fontWeight": "700"
|
|
219
|
-
}
|
|
220
|
-
"description": "Text item.",
|
|
221
|
-
"title": "text 3"
|
|
221
|
+
}
|
|
222
222
|
},
|
|
223
223
|
"children": "@benefit3 — Cancel anytime"
|
|
224
224
|
}
|
|
@@ -229,47 +229,47 @@
|
|
|
229
229
|
{
|
|
230
230
|
"type": "PaywallOptions",
|
|
231
231
|
"attributes": {
|
|
232
|
-
"
|
|
232
|
+
"description": "Subscription options area.",
|
|
233
|
+
"title": "Option(s)",
|
|
234
|
+
"styles": {
|
|
233
235
|
"borderRadius": 12,
|
|
234
236
|
"backgroundColor": "#FFFFFF"
|
|
235
|
-
}
|
|
236
|
-
"description": "Subscription options area.",
|
|
237
|
-
"title": "Option(s)"
|
|
237
|
+
}
|
|
238
238
|
},
|
|
239
239
|
"children": [
|
|
240
240
|
{
|
|
241
241
|
"type": "RadioButton",
|
|
242
242
|
"attributes": {
|
|
243
|
-
"style": {
|
|
244
|
-
"flex": 1
|
|
245
|
-
},
|
|
246
243
|
"description": "Radio item.",
|
|
247
|
-
"title": "Product Radio(s)"
|
|
244
|
+
"title": "Product Radio(s)",
|
|
245
|
+
"styles": {
|
|
246
|
+
"flex": 1
|
|
247
|
+
}
|
|
248
248
|
},
|
|
249
249
|
"children": null
|
|
250
250
|
},
|
|
251
251
|
{
|
|
252
252
|
"type": "text",
|
|
253
253
|
"attributes": {
|
|
254
|
-
"
|
|
254
|
+
"description": "Product description.",
|
|
255
|
+
"title": "Product Desc(s)",
|
|
256
|
+
"styles": {
|
|
255
257
|
"flex": 4,
|
|
256
258
|
"color": "#000"
|
|
257
|
-
}
|
|
258
|
-
"description": "Product description.",
|
|
259
|
-
"title": "Product Desc(s)"
|
|
259
|
+
}
|
|
260
260
|
},
|
|
261
261
|
"children": "@productDescription — Unlock all premium features for a month."
|
|
262
262
|
},
|
|
263
263
|
{
|
|
264
264
|
"type": "text",
|
|
265
265
|
"attributes": {
|
|
266
|
-
"
|
|
266
|
+
"description": "Product price.",
|
|
267
|
+
"title": "Product Price(s)",
|
|
268
|
+
"styles": {
|
|
267
269
|
"flex": 1,
|
|
268
270
|
"textAlign": "right",
|
|
269
271
|
"color": "#000"
|
|
270
|
-
}
|
|
271
|
-
"description": "Product price.",
|
|
272
|
-
"title": "Product Price(s)"
|
|
272
|
+
}
|
|
273
273
|
},
|
|
274
274
|
"children": "@localizedPrice"
|
|
275
275
|
},
|
|
@@ -278,14 +278,14 @@
|
|
|
278
278
|
"attributes": {
|
|
279
279
|
"iconType": "chevron-right",
|
|
280
280
|
"size": 16,
|
|
281
|
-
"
|
|
281
|
+
"description": "Chevron icon.",
|
|
282
|
+
"title": "Product BIcon(s)",
|
|
283
|
+
"styles": {
|
|
282
284
|
"marginRight": 4,
|
|
283
285
|
"flex": 0,
|
|
284
286
|
"width": 32,
|
|
285
287
|
"color": "#000"
|
|
286
|
-
}
|
|
287
|
-
"description": "Chevron icon.",
|
|
288
|
-
"title": "Product BIcon(s)"
|
|
288
|
+
}
|
|
289
289
|
},
|
|
290
290
|
"children": null
|
|
291
291
|
}
|
|
@@ -295,29 +295,29 @@
|
|
|
295
295
|
"type": "CountDown",
|
|
296
296
|
"attributes": {
|
|
297
297
|
"count": 10000,
|
|
298
|
-
"
|
|
298
|
+
"description": "Countdown timer (10 seconds).",
|
|
299
|
+
"title": "Countdown",
|
|
300
|
+
"styles": {
|
|
299
301
|
"color": "#FF0000",
|
|
300
302
|
"fontWeight": "700",
|
|
301
303
|
"fontSize": 40,
|
|
302
304
|
"textAlign": "center"
|
|
303
|
-
}
|
|
304
|
-
"description": "Countdown timer (10 seconds).",
|
|
305
|
-
"title": "Countdown"
|
|
305
|
+
}
|
|
306
306
|
},
|
|
307
307
|
"children": null
|
|
308
308
|
},
|
|
309
309
|
{
|
|
310
310
|
"type": "View",
|
|
311
311
|
"attributes": {
|
|
312
|
-
"
|
|
312
|
+
"description": "Subscribe button container.",
|
|
313
|
+
"title": "Subs Container",
|
|
314
|
+
"styles": {
|
|
313
315
|
"flex": 1,
|
|
314
316
|
"flexDirection": "column",
|
|
315
317
|
"justifyContent": "flex-end",
|
|
316
318
|
"alignItems": "stretch",
|
|
317
319
|
"paddingBottom": "50px"
|
|
318
|
-
}
|
|
319
|
-
"description": "Subscribe button container.",
|
|
320
|
-
"title": "Subs Container"
|
|
320
|
+
}
|
|
321
321
|
},
|
|
322
322
|
"children": [
|
|
323
323
|
{
|
|
@@ -20,43 +20,43 @@
|
|
|
20
20
|
"data": {
|
|
21
21
|
"type": "View",
|
|
22
22
|
"attributes": {
|
|
23
|
-
"
|
|
23
|
+
"scrollable": true,
|
|
24
|
+
"description": "View element 1 in sample.",
|
|
25
|
+
"title": "View 1",
|
|
26
|
+
"styles": {
|
|
24
27
|
"flexDirection": "column",
|
|
25
28
|
"alignItems": "center",
|
|
26
29
|
"justifyContent": "center",
|
|
27
30
|
"gap": 12,
|
|
28
31
|
"padding": 16,
|
|
29
32
|
"backgroundColor": "#F5F7FA"
|
|
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": "Text",
|
|
38
38
|
"children": "Hello, world!",
|
|
39
39
|
"attributes": {
|
|
40
|
-
"
|
|
40
|
+
"description": "Text element 1 in sample.",
|
|
41
|
+
"title": "Text 1",
|
|
42
|
+
"styles": {
|
|
41
43
|
"color": "#111827",
|
|
42
44
|
"fontSize": 24,
|
|
43
45
|
"fontWeight": "600"
|
|
44
|
-
}
|
|
45
|
-
"description": "Text element 1 in sample.",
|
|
46
|
-
"title": "Text 1"
|
|
46
|
+
}
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
50
|
"type": "Text",
|
|
51
51
|
"children": "Welcome to react-native-builder",
|
|
52
52
|
"attributes": {
|
|
53
|
-
"
|
|
53
|
+
"description": "Text element 2 in sample.",
|
|
54
|
+
"title": "Text 2",
|
|
55
|
+
"styles": {
|
|
54
56
|
"color": "#6B7280",
|
|
55
57
|
"fontSize": 14,
|
|
56
58
|
"fontWeight": "400"
|
|
57
|
-
}
|
|
58
|
-
"description": "Text element 2 in sample.",
|
|
59
|
-
"title": "Text 2"
|
|
59
|
+
}
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
]
|