@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
package/src/assets/samples/carousel-sample.json CHANGED
@@ -21,16 +21,18 @@
21
21
  {
22
22
  "type": "carouselItem",
23
23
  "attributes": {
24
- "style": {
25
- "minWidth": 0
26
- },
27
24
  "description": "carouselItem element 1 in sample.",
28
- "title": "carouselItem 1"
25
+ "title": "carouselItem 1",
26
+ "styles": {
27
+ "minWidth": 0
28
+ }
29
29
  },
30
30
  "children": {
31
31
  "type": "view",
32
32
  "attributes": {
33
- "style": {
33
+ "description": "view element 1 in sample.",
34
+ "title": "view 1",
35
+ "styles": {
34
36
  "padding": "22px",
35
37
  "borderRadius": 18,
36
38
  "backgroundImage": "linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #ecfeff 100%)",
@@ -38,9 +40,7 @@
38
40
  "gap": 14,
39
41
  "height": "100%",
40
42
  "justifyContent": "center"
41
- },
42
- "description": "view element 1 in sample.",
43
- "title": "view 1"
43
+ }
44
44
  },
45
45
  "children": [
46
46
  {
@@ -48,7 +48,7 @@
48
48
  "attributes": {
49
49
  "src": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
50
50
  "resizeMode": "cover",
51
- "style": {
51
+ "styles": {
52
52
  "width": "100%",
53
53
  "height": 230,
54
54
  "borderRadius": 14
@@ -58,28 +58,28 @@
58
58
  {
59
59
  "type": "text",
60
60
  "attributes": {
61
- "style": {
61
+ "description": "text element 1 in sample.",
62
+ "title": "text 1",
63
+ "styles": {
62
64
  "fontSize": 28,
63
65
  "fontWeight": "700",
64
66
  "textAlign": "center",
65
67
  "color": "#0f172a"
66
- },
67
- "description": "text element 1 in sample.",
68
- "title": "text 1"
68
+ }
69
69
  },
70
70
  "children": "Welcome aboard"
71
71
  },
72
72
  {
73
73
  "type": "text",
74
74
  "attributes": {
75
- "style": {
75
+ "description": "text element 2 in sample.",
76
+ "title": "text 2",
77
+ "styles": {
76
78
  "fontSize": 16,
77
79
  "textAlign": "center",
78
80
  "color": "#334155",
79
81
  "paddingHorizontal": 8
80
- },
81
- "description": "text element 2 in sample.",
82
- "title": "text 2"
82
+ }
83
83
  },
84
84
  "children": "Swipe through a beautiful, validated carousel sample with images."
85
85
  }
@@ -89,16 +89,18 @@
89
89
  {
90
90
  "type": "carouselItem",
91
91
  "attributes": {
92
- "style": {
93
- "minWidth": 0
94
- },
95
92
  "description": "carouselItem element 2 in sample.",
96
- "title": "carouselItem 2"
93
+ "title": "carouselItem 2",
94
+ "styles": {
95
+ "minWidth": 0
96
+ }
97
97
  },
98
98
  "children": {
99
99
  "type": "view",
100
100
  "attributes": {
101
- "style": {
101
+ "description": "view element 2 in sample.",
102
+ "title": "view 2",
103
+ "styles": {
102
104
  "padding": "22px",
103
105
  "borderRadius": 18,
104
106
  "backgroundImage": "linear-gradient(135deg, #f0fdf4 0%, #ffffff 55%, #eff6ff 100%)",
@@ -106,9 +108,7 @@
106
108
  "gap": 14,
107
109
  "height": "100%",
108
110
  "justifyContent": "center"
109
- },
110
- "description": "view element 2 in sample.",
111
- "title": "view 2"
111
+ }
112
112
  },
113
113
  "children": [
114
114
  {
@@ -116,7 +116,7 @@
116
116
  "attributes": {
117
117
  "src": "https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=80",
118
118
  "resizeMode": "cover",
119
- "style": {
119
+ "styles": {
120
120
  "width": "100%",
121
121
  "height": 230,
122
122
  "borderRadius": 14
@@ -126,28 +126,28 @@
126
126
  {
127
127
  "type": "text",
128
128
  "attributes": {
129
- "style": {
129
+ "description": "text element 3 in sample.",
130
+ "title": "text 3",
131
+ "styles": {
130
132
  "fontSize": 28,
131
133
  "fontWeight": "700",
132
134
  "textAlign": "center",
133
135
  "color": "#0f172a"
134
- },
135
- "description": "text element 3 in sample.",
136
- "title": "text 3"
136
+ }
137
137
  },
138
138
  "children": "Discover features"
139
139
  },
140
140
  {
141
141
  "type": "text",
142
142
  "attributes": {
143
- "style": {
143
+ "description": "text element 4 in sample.",
144
+ "title": "text 4",
145
+ "styles": {
144
146
  "fontSize": 16,
145
147
  "textAlign": "center",
146
148
  "color": "#334155",
147
149
  "paddingHorizontal": 8
148
- },
149
- "description": "text element 4 in sample.",
150
- "title": "text 4"
150
+ }
151
151
  },
152
152
  "children": "Dots + buttons are included, and slide sizing comes from the carousel CSS."
153
153
  }
@@ -157,16 +157,18 @@
157
157
  {
158
158
  "type": "carouselItem",
159
159
  "attributes": {
160
- "style": {
161
- "minWidth": 0
162
- },
163
160
  "description": "carouselItem element 3 in sample.",
164
- "title": "carouselItem 3"
161
+ "title": "carouselItem 3",
162
+ "styles": {
163
+ "minWidth": 0
164
+ }
165
165
  },
166
166
  "children": {
167
167
  "type": "view",
168
168
  "attributes": {
169
- "style": {
169
+ "description": "view element 3 in sample.",
170
+ "title": "view 3",
171
+ "styles": {
170
172
  "padding": "22px",
171
173
  "borderRadius": 18,
172
174
  "backgroundImage": "linear-gradient(135deg, #fff7ed 0%, #ffffff 55%, #f5f3ff 100%)",
@@ -174,9 +176,7 @@
174
176
  "gap": 14,
175
177
  "height": "100%",
176
178
  "justifyContent": "center"
177
- },
178
- "description": "view element 3 in sample.",
179
- "title": "view 3"
179
+ }
180
180
  },
181
181
  "children": [
182
182
  {
@@ -184,7 +184,7 @@
184
184
  "attributes": {
185
185
  "src": "https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1200&q=80",
186
186
  "resizeMode": "cover",
187
- "style": {
187
+ "styles": {
188
188
  "width": "100%",
189
189
  "height": 230,
190
190
  "borderRadius": 14
@@ -194,28 +194,28 @@
194
194
  {
195
195
  "type": "text",
196
196
  "attributes": {
197
- "style": {
197
+ "description": "text element 5 in sample.",
198
+ "title": "text 5",
199
+ "styles": {
198
200
  "fontSize": 28,
199
201
  "fontWeight": "700",
200
202
  "textAlign": "center",
201
203
  "color": "#0f172a"
202
- },
203
- "description": "text element 5 in sample.",
204
- "title": "text 5"
204
+ }
205
205
  },
206
206
  "children": "Get started"
207
207
  },
208
208
  {
209
209
  "type": "text",
210
210
  "attributes": {
211
- "style": {
211
+ "description": "text element 6 in sample.",
212
+ "title": "text 6",
213
+ "styles": {
212
214
  "fontSize": 16,
213
215
  "textAlign": "center",
214
216
  "color": "#334155",
215
217
  "paddingHorizontal": 8
216
- },
217
- "description": "text element 6 in sample.",
218
- "title": "text 6"
218
+ }
219
219
  },
220
220
  "children": "This sample stays within validation rules (no string flex shorthand)."
221
221
  }
package/src/assets/samples/paywall-1.json CHANGED
@@ -22,23 +22,23 @@
22
22
  "isMain": true,
23
23
  "attributes": {
24
24
  "useSafeAreaView": true,
25
- "description": "Ekran\u0131n ana kapsay\u0131c\u0131s\u0131. (#1)",
25
+ "description": "Ekranın ana kapsayıcısı. (#1)",
26
26
  "title": "Main"
27
27
  },
28
28
  "children": [
29
29
  {
30
30
  "type": "PaywallProvider",
31
31
  "attributes": {
32
- "style": {
32
+ "scrollable": true,
33
+ "description": "Paywall ana sağlayıcısı. (#1)",
34
+ "title": "Main Paywall",
35
+ "styles": {
33
36
  "flexDirection": "column",
34
37
  "alignItems": "stretch",
35
38
  "justifyContent": "flex-start",
36
39
  "position": "relative",
37
40
  "backgroundColor": "#F5F7FA"
38
- },
39
- "scrollable": true,
40
- "description": "Paywall ana sa\u011flay\u0131c\u0131s\u0131. (#1)",
41
- "title": "Main Paywall"
41
+ }
42
42
  },
43
43
  "children": [
44
44
  {
@@ -47,7 +47,7 @@
47
47
  "attributes": {
48
48
  "src": "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80",
49
49
  "resizeMode": "cover",
50
- "description": "Paywall arka plan\u0131. (#1)",
50
+ "description": "Paywall arka planı. (#1)",
51
51
  "title": "Paywall Background"
52
52
  },
53
53
  "children": null
@@ -56,7 +56,7 @@
56
56
  "type": "View",
57
57
  "title": "Paywall Inner",
58
58
  "attributes": {
59
- "style": {
59
+ "styles": {
60
60
  "paddingTop": 56,
61
61
  "paddingHorizontal": 16,
62
62
  "paddingBottom": 16,
@@ -68,7 +68,7 @@
68
68
  {
69
69
  "type": "PaywallCloseButton",
70
70
  "attributes": {
71
- "style": {
71
+ "styles": {
72
72
  "width": 32,
73
73
  "height": 32,
74
74
  "borderRadius": 16,
@@ -84,27 +84,27 @@
84
84
  {
85
85
  "type": "View",
86
86
  "attributes": {
87
- "style": {
87
+ "description": "Düzen ve yerleşim konteyneri. (#2)",
88
+ "title": "Benefits",
89
+ "styles": {
88
90
  "flexDirection": "column",
89
91
  "gap": 0,
90
92
  "marginTop": "16%"
91
- },
92
- "description": "D\u00fczen ve yerle\u015fim konteyneri. (#2)",
93
- "title": "Benefits"
93
+ }
94
94
  },
95
95
  "children": [
96
96
  {
97
97
  "type": "View",
98
98
  "attributes": {
99
- "style": {
99
+ "description": "Düzen ve yerleşim konteyneri. (#3)",
100
+ "title": "Benefit #1",
101
+ "styles": {
100
102
  "flexDirection": "row",
101
103
  "alignItems": "center",
102
104
  "gap": 8,
103
105
  "paddingVertical": 8,
104
106
  "paddingHorizontal": 12
105
- },
106
- "description": "D\u00fczen ve yerle\u015fim konteyneri. (#3)",
107
- "title": "Benefit #1"
107
+ }
108
108
  },
109
109
  "children": [
110
110
  {
@@ -112,43 +112,43 @@
112
112
  "attributes": {
113
113
  "iconType": "check",
114
114
  "strokeWidth": 3,
115
- "style": {
115
+ "description": "İkon öğesi. (#1)",
116
+ "title": "BIcon 1",
117
+ "styles": {
116
118
  "color": "#22c55e",
117
119
  "fontSize": "16",
118
120
  "flex": 0
119
- },
120
- "description": "\u0130kon \u00f6\u011fesi. (#1)",
121
- "title": "BIcon 1"
121
+ }
122
122
  },
123
123
  "children": null
124
124
  },
125
125
  {
126
126
  "type": "text",
127
127
  "attributes": {
128
- "style": {
128
+ "description": "Metin öğesi. (#1)",
129
+ "title": "text 1",
130
+ "styles": {
129
131
  "flex": 1,
130
132
  "color": "#FFFFFF",
131
133
  "fontWeight": "700"
132
- },
133
- "description": "Metin \u00f6\u011fesi. (#1)",
134
- "title": "text 1"
134
+ }
135
135
  },
136
- "children": "@benefit1 \u2014 Unlimited access"
136
+ "children": "@benefit1 — Unlimited access"
137
137
  }
138
138
  ]
139
139
  },
140
140
  {
141
141
  "type": "View",
142
142
  "attributes": {
143
- "style": {
143
+ "description": "Düzen ve yerleşim konteyneri. (#4)",
144
+ "title": "Benefit #2",
145
+ "styles": {
144
146
  "flexDirection": "row",
145
147
  "alignItems": "center",
146
148
  "gap": 8,
147
149
  "paddingVertical": 8,
148
150
  "paddingHorizontal": 12
149
- },
150
- "description": "D\u00fczen ve yerle\u015fim konteyneri. (#4)",
151
- "title": "Benefit #2"
151
+ }
152
152
  },
153
153
  "children": [
154
154
  {
@@ -156,43 +156,43 @@
156
156
  "attributes": {
157
157
  "iconType": "check",
158
158
  "strokeWidth": 3,
159
- "style": {
159
+ "description": "İkon öğesi. (#2)",
160
+ "title": "BIcon 2",
161
+ "styles": {
160
162
  "color": "#22c55e",
161
163
  "fontSize": "16",
162
164
  "flex": 0
163
- },
164
- "description": "\u0130kon \u00f6\u011fesi. (#2)",
165
- "title": "BIcon 2"
165
+ }
166
166
  },
167
167
  "children": null
168
168
  },
169
169
  {
170
170
  "type": "text",
171
171
  "attributes": {
172
- "style": {
172
+ "description": "Metin öğesi. (#2)",
173
+ "title": "text 2",
174
+ "styles": {
173
175
  "flex": 1,
174
176
  "color": "#FFFFFF",
175
177
  "fontWeight": "700"
176
- },
177
- "description": "Metin \u00f6\u011fesi. (#2)",
178
- "title": "text 2"
178
+ }
179
179
  },
180
- "children": "@benefit2 \u2014 7-day free trial"
180
+ "children": "@benefit2 — 7-day free trial"
181
181
  }
182
182
  ]
183
183
  },
184
184
  {
185
185
  "type": "View",
186
186
  "attributes": {
187
- "style": {
187
+ "description": "Düzen ve yerleşim konteyneri. (#5)",
188
+ "title": "Benefit #3",
189
+ "styles": {
188
190
  "flexDirection": "row",
189
191
  "alignItems": "center",
190
192
  "gap": 8,
191
193
  "paddingVertical": 8,
192
194
  "paddingHorizontal": 12
193
- },
194
- "description": "D\u00fczen ve yerle\u015fim konteyneri. (#5)",
195
- "title": "Benefit #3"
195
+ }
196
196
  },
197
197
  "children": [
198
198
  {
@@ -200,28 +200,28 @@
200
200
  "attributes": {
201
201
  "iconType": "check",
202
202
  "strokeWidth": 3,
203
- "style": {
203
+ "description": "İkon öğesi. (#3)",
204
+ "title": "BIcon 3",
205
+ "styles": {
204
206
  "color": "#22c55e",
205
207
  "fontSize": "16",
206
208
  "flex": 0
207
- },
208
- "description": "\u0130kon \u00f6\u011fesi. (#3)",
209
- "title": "BIcon 3"
209
+ }
210
210
  },
211
211
  "children": null
212
212
  },
213
213
  {
214
214
  "type": "text",
215
215
  "attributes": {
216
- "style": {
216
+ "description": "Metin öğesi. (#3)",
217
+ "title": "text 3",
218
+ "styles": {
217
219
  "flex": 1,
218
220
  "color": "#FFFFFF",
219
221
  "fontWeight": "700"
220
- },
221
- "description": "Metin \u00f6\u011fesi. (#3)",
222
- "title": "text 3"
222
+ }
223
223
  },
224
- "children": "@benefit3 \u2014 Cancel anytime"
224
+ "children": "@benefit3 — Cancel anytime"
225
225
  }
226
226
  ]
227
227
  }
@@ -230,47 +230,47 @@
230
230
  {
231
231
  "type": "PaywallOptions",
232
232
  "attributes": {
233
- "style": {
233
+ "description": "Abonelik seçenekleri alanı. (#1)",
234
+ "title": "Option(s)",
235
+ "styles": {
234
236
  "borderRadius": 12,
235
237
  "backgroundColor": "#FFFFFF"
236
- },
237
- "description": "Abonelik se\u00e7enekleri alan\u0131. (#1)",
238
- "title": "Option(s)"
238
+ }
239
239
  },
240
240
  "children": [
241
241
  {
242
242
  "type": "RadioButton",
243
243
  "attributes": {
244
- "style": {
244
+ "description": "Seçim satırı öğesi. (#1)",
245
+ "title": "Product Radio(s)",
246
+ "styles": {
245
247
  "flex": 1
246
- },
247
- "description": "Se\u00e7im sat\u0131r\u0131 \u00f6\u011fesi. (#1)",
248
- "title": "Product Radio(s)"
248
+ }
249
249
  },
250
250
  "children": null
251
251
  },
252
252
  {
253
253
  "type": "text",
254
254
  "attributes": {
255
- "style": {
255
+ "description": "Metin öğesi. (#4)",
256
+ "title": "Product Desc(s)",
257
+ "styles": {
256
258
  "flex": 4,
257
259
  "color": "#000"
258
- },
259
- "description": "Metin \u00f6\u011fesi. (#4)",
260
- "title": "Product Desc(s)"
260
+ }
261
261
  },
262
- "children": "@productDescription \u2014 Unlock all premium features for a month."
262
+ "children": "@productDescription — Unlock all premium features for a month."
263
263
  },
264
264
  {
265
265
  "type": "text",
266
266
  "attributes": {
267
- "style": {
267
+ "description": "Metin öğesi. (#5)",
268
+ "title": "Product Price(s)",
269
+ "styles": {
268
270
  "flex": 1,
269
271
  "textAlign": "right",
270
272
  "color": "#000"
271
- },
272
- "description": "Metin \u00f6\u011fesi. (#5)",
273
- "title": "Product Price(s)"
273
+ }
274
274
  },
275
275
  "children": "@localizedPrice"
276
276
  },
@@ -279,14 +279,14 @@
279
279
  "attributes": {
280
280
  "iconType": "chevron-right",
281
281
  "size": 16,
282
- "style": {
282
+ "description": "İkon öğesi. (#4)",
283
+ "title": "Product BIcon(s)",
284
+ "styles": {
283
285
  "marginRight": 4,
284
286
  "flex": 0,
285
287
  "width": 32,
286
288
  "color": "#000"
287
- },
288
- "description": "\u0130kon \u00f6\u011fesi. (#4)",
289
- "title": "Product BIcon(s)"
289
+ }
290
290
  },
291
291
  "children": null
292
292
  }
@@ -295,15 +295,15 @@
295
295
  {
296
296
  "type": "View",
297
297
  "attributes": {
298
- "style": {
298
+ "description": "Subscription butonu kapsayıcısı. (#1)",
299
+ "title": "Subs Container",
300
+ "styles": {
299
301
  "flex": 1,
300
302
  "flexDirection": "column",
301
303
  "justifyContent": "flex-end",
302
304
  "alignItems": "stretch",
303
305
  "paddingBottom": "50px"
304
- },
305
- "description": "Subscription butonu kapsay\u0131c\u0131s\u0131. (#1)",
306
- "title": "Subs Container"
306
+ }
307
307
  },
308
308
  "children": [
309
309
  {