@developer_tribe/react-builder 1.2.12 → 1.2.13

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 (38) hide show
  1. package/dist/build-components/PaywallBackground/PaywallBackgroundProps.generated.d.ts +3 -0
  2. package/dist/build-components/patterns.generated.d.ts +5289 -1965
  3. package/dist/components/BottomBar.d.ts +3 -1
  4. package/dist/index.cjs.js +4 -4
  5. package/dist/index.cjs.js.map +1 -1
  6. package/dist/index.esm.js +4 -4
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.web.cjs.js +5 -5
  9. package/dist/index.web.cjs.js.map +1 -1
  10. package/dist/index.web.d.ts +1 -0
  11. package/dist/index.web.esm.js +5 -5
  12. package/dist/index.web.esm.js.map +1 -1
  13. package/dist/pages/DebugJsonPage.d.ts +17 -0
  14. package/dist/pages/projectPageUtils.d.ts +7 -0
  15. package/dist/styles.css +1 -1
  16. package/dist/utils/logRenderStore.d.ts +6 -0
  17. package/package.json +2 -1
  18. package/scripts/prebuild/utils/validateAllComponentsOrThrow.js +28 -11
  19. package/src/AttributesEditor.tsx +1 -0
  20. package/src/assets/meta.json +1 -1
  21. package/src/assets/samples/paywall-1.json +159 -150
  22. package/src/assets/samples/simple-1.json +3 -3
  23. package/src/build-components/BackgroundImage/BackgroundImage.tsx +1 -1
  24. package/src/build-components/BackgroundImage/pattern.json +12 -0
  25. package/src/build-components/PaywallBackground/PaywallBackground.tsx +3 -33
  26. package/src/build-components/PaywallBackground/PaywallBackgroundProps.generated.ts +3 -0
  27. package/src/build-components/PaywallBackground/pattern.json +15 -5
  28. package/src/build-components/Text/pattern.json +39 -38
  29. package/src/build-components/patterns.generated.ts +5289 -1951
  30. package/src/components/BottomBar.tsx +21 -60
  31. package/src/index.web.ts +1 -0
  32. package/src/pages/DebugJsonPage.tsx +135 -0
  33. package/src/pages/ProjectPage.tsx +17 -5
  34. package/src/pages/projectPageUtils.ts +14 -0
  35. package/src/pages/tabs/SideTool.tsx +8 -23
  36. package/src/styles/modals/_localication-modal.scss +6 -0
  37. package/src/utils/logRenderStore.ts +128 -0
  38. package/src/utils/patterns.ts +26 -3
package/src/assets/samples/paywall-1.json CHANGED
@@ -32,109 +32,187 @@
32
32
  "alignItems": "stretch",
33
33
  "justifyContent": "flex-start",
34
34
  "position": "relative",
35
- "paddingTop": 56,
36
- "paddingHorizontal": 16,
37
- "paddingBottom": 16,
38
- "gap": 12,
39
35
  "backgroundColor": "#F5F7FA"
40
36
  },
41
37
  "scrollable": true
42
38
  },
43
39
  "children": [
44
40
  {
45
- "type": "BackgroundImage",
41
+ "type": "PaywallBackground",
46
42
  "attributes": {
47
43
  "src": "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80",
48
44
  "resizeMode": "cover"
49
45
  },
50
46
  "children": null
51
47
  },
52
- {
53
- "type": "PaywallCloseButton",
54
- "attributes": {
55
- "style": {
56
- "position": "absolute",
57
- "top": 24,
58
- "left": 16,
59
- "width": 32,
60
- "height": 32,
61
- "borderRadius": 16,
62
- "backgroundColor": "#FFFFFF",
63
- "color": "#000",
64
- "zIndex": 10
65
- }
66
- },
67
- "children": null
68
- },
69
48
  {
70
49
  "type": "View",
71
50
  "attributes": {
72
51
  "style": {
73
- "flexDirection": "column",
74
- "gap": 0,
75
- "marginTop": "16%"
52
+ "paddingTop": 56,
53
+ "paddingHorizontal": 16,
54
+ "paddingBottom": 16,
55
+ "gap": 12
76
56
  }
77
57
  },
78
58
  "children": [
59
+ {
60
+ "type": "PaywallCloseButton",
61
+ "attributes": {
62
+ "style": {
63
+ "position": "absolute",
64
+ "top": 24,
65
+ "left": 16,
66
+ "width": 32,
67
+ "height": 32,
68
+ "borderRadius": 16,
69
+ "backgroundColor": "#FFFFFF",
70
+ "color": "#000",
71
+ "zIndex": 10
72
+ }
73
+ },
74
+ "children": null
75
+ },
79
76
  {
80
77
  "type": "View",
81
78
  "attributes": {
82
79
  "style": {
83
- "flexDirection": "row",
84
- "alignItems": "center",
85
- "gap": 8,
86
- "paddingVertical": 8,
87
- "paddingHorizontal": 12
80
+ "flexDirection": "column",
81
+ "gap": 0,
82
+ "marginTop": "16%"
88
83
  }
89
84
  },
90
85
  "children": [
91
86
  {
92
- "type": "BIcon",
87
+ "type": "View",
93
88
  "attributes": {
94
- "iconType": "check",
95
- "strokeWidth": 3,
96
89
  "style": {
97
- "color": "#22c55e",
98
- "fontSize": "16",
99
- "flex": 0
90
+ "flexDirection": "row",
91
+ "alignItems": "center",
92
+ "gap": 8,
93
+ "paddingVertical": 8,
94
+ "paddingHorizontal": 12
100
95
  }
101
96
  },
102
- "children": null
97
+ "children": [
98
+ {
99
+ "type": "BIcon",
100
+ "attributes": {
101
+ "iconType": "check",
102
+ "strokeWidth": 3,
103
+ "style": {
104
+ "color": "#22c55e",
105
+ "fontSize": "16",
106
+ "flex": 0
107
+ }
108
+ },
109
+ "children": null
110
+ },
111
+ {
112
+ "type": "text",
113
+ "attributes": {
114
+ "style": {
115
+ "flex": 1,
116
+ "color": "#FFFFFF",
117
+ "fontWeight": "700"
118
+ }
119
+ },
120
+ "children": "@benefit1 — Unlimited access"
121
+ }
122
+ ]
103
123
  },
104
124
  {
105
- "type": "text",
125
+ "type": "View",
106
126
  "attributes": {
107
127
  "style": {
108
- "flex": 1,
109
- "color": "#FFFFFF",
110
- "fontWeight": "700"
128
+ "flexDirection": "row",
129
+ "alignItems": "center",
130
+ "gap": 8,
131
+ "paddingVertical": 8,
132
+ "paddingHorizontal": 12
111
133
  }
112
134
  },
113
- "children": "@benefit1 — Unlimited access"
135
+ "children": [
136
+ {
137
+ "type": "BIcon",
138
+ "attributes": {
139
+ "iconType": "check",
140
+ "strokeWidth": 3,
141
+ "style": {
142
+ "color": "#22c55e",
143
+ "fontSize": "16",
144
+ "flex": 0
145
+ }
146
+ },
147
+ "children": null
148
+ },
149
+ {
150
+ "type": "text",
151
+ "attributes": {
152
+ "style": {
153
+ "flex": 1,
154
+ "color": "#FFFFFF",
155
+ "fontWeight": "700"
156
+ }
157
+ },
158
+ "children": "@benefit2 — 7-day free trial"
159
+ }
160
+ ]
161
+ },
162
+ {
163
+ "type": "View",
164
+ "attributes": {
165
+ "style": {
166
+ "flexDirection": "row",
167
+ "alignItems": "center",
168
+ "gap": 8,
169
+ "paddingVertical": 8,
170
+ "paddingHorizontal": 12
171
+ }
172
+ },
173
+ "children": [
174
+ {
175
+ "type": "BIcon",
176
+ "attributes": {
177
+ "iconType": "check",
178
+ "strokeWidth": 3,
179
+ "style": {
180
+ "color": "#22c55e",
181
+ "fontSize": "16",
182
+ "flex": 0
183
+ }
184
+ },
185
+ "children": null
186
+ },
187
+ {
188
+ "type": "text",
189
+ "attributes": {
190
+ "style": {
191
+ "flex": 1,
192
+ "color": "#FFFFFF",
193
+ "fontWeight": "700"
194
+ }
195
+ },
196
+ "children": "@benefit3 — Cancel anytime"
197
+ }
198
+ ]
114
199
  }
115
200
  ]
116
201
  },
117
202
  {
118
- "type": "View",
203
+ "type": "PaywallOptions",
119
204
  "attributes": {
120
205
  "style": {
121
- "flexDirection": "row",
122
- "alignItems": "center",
123
- "gap": 8,
124
- "paddingVertical": 8,
125
- "paddingHorizontal": 12
206
+ "borderRadius": 12,
207
+ "backgroundColor": "#FFFFFF"
126
208
  }
127
209
  },
128
210
  "children": [
129
211
  {
130
- "type": "BIcon",
212
+ "type": "RadioButton",
131
213
  "attributes": {
132
- "iconType": "check",
133
- "strokeWidth": 3,
134
214
  "style": {
135
- "color": "#22c55e",
136
- "fontSize": "16",
137
- "flex": 0
215
+ "flex": 1
138
216
  }
139
217
  },
140
218
  "children": null
@@ -143,125 +221,56 @@
143
221
  "type": "text",
144
222
  "attributes": {
145
223
  "style": {
146
- "flex": 1,
147
- "color": "#FFFFFF",
148
- "fontWeight": "700"
224
+ "flex": 4,
225
+ "color": "#000"
149
226
  }
150
227
  },
151
- "children": "@benefit2 — 7-day free trial"
152
- }
153
- ]
154
- },
155
- {
156
- "type": "View",
157
- "attributes": {
158
- "style": {
159
- "flexDirection": "row",
160
- "alignItems": "center",
161
- "gap": 8,
162
- "paddingVertical": 8,
163
- "paddingHorizontal": 12
164
- }
165
- },
166
- "children": [
228
+ "children": "@productDescription — Unlock all premium features for a month."
229
+ },
167
230
  {
168
- "type": "BIcon",
231
+ "type": "text",
169
232
  "attributes": {
170
- "iconType": "check",
171
- "strokeWidth": 3,
172
233
  "style": {
173
- "color": "#22c55e",
174
- "fontSize": "16",
175
- "flex": 0
234
+ "flex": 1,
235
+ "textAlign": "right",
236
+ "color": "#000"
176
237
  }
177
238
  },
178
- "children": null
239
+ "children": "@localizedPrice"
179
240
  },
180
241
  {
181
- "type": "text",
242
+ "type": "BIcon",
182
243
  "attributes": {
244
+ "iconType": "chevron-right",
245
+ "size": 16,
183
246
  "style": {
184
- "flex": 1,
185
- "color": "#FFFFFF",
186
- "fontWeight": "700"
247
+ "marginRight": 4,
248
+ "flex": 0,
249
+ "width": 32,
250
+ "color": "#000"
187
251
  }
188
252
  },
189
- "children": "@benefit3 — Cancel anytime"
253
+ "children": null
190
254
  }
191
255
  ]
192
- }
193
- ]
194
- },
195
- {
196
- "type": "PaywallOptions",
197
- "attributes": {
198
- "style": {
199
- "borderRadius": 12,
200
- "backgroundColor": "#FFFFFF"
201
- }
202
- },
203
- "children": [
204
- {
205
- "type": "RadioButton",
206
- "attributes": {
207
- "style": {
208
- "flex": 1
209
- }
210
- },
211
- "children": null
212
- },
213
- {
214
- "type": "text",
215
- "attributes": {
216
- "style": {
217
- "flex": 4,
218
- "color": "#000"
219
- }
220
- },
221
- "children": "@productDescription — Unlock all premium features for a month."
222
256
  },
223
257
  {
224
- "type": "text",
258
+ "type": "View",
225
259
  "attributes": {
226
260
  "style": {
227
261
  "flex": 1,
228
- "textAlign": "right",
229
- "color": "#000"
262
+ "flexDirection": "column",
263
+ "justifyContent": "flex-end",
264
+ "alignItems": "stretch",
265
+ "paddingBottom": "50px"
230
266
  }
231
267
  },
232
- "children": "@localizedPrice"
233
- },
234
- {
235
- "type": "BIcon",
236
- "attributes": {
237
- "iconType": "chevron-right",
238
- "size": 16,
239
- "style": {
240
- "marginRight": 4,
241
- "flex": 0,
242
- "width": 32,
243
- "color": "#000"
268
+ "children": [
269
+ {
270
+ "type": "PaywallSubscribeButton",
271
+ "children": "Subscribe"
244
272
  }
245
- },
246
- "children": null
247
- }
248
- ]
249
- },
250
- {
251
- "type": "View",
252
- "attributes": {
253
- "style": {
254
- "flex": 1,
255
- "flexDirection": "column",
256
- "justifyContent": "flex-end",
257
- "alignItems": "stretch",
258
- "paddingBottom": "50px"
259
- }
260
- },
261
- "children": [
262
- {
263
- "type": "PaywallSubscribeButton",
264
- "children": "Subscribe"
273
+ ]
265
274
  }
266
275
  ]
267
276
  }
package/src/assets/samples/simple-1.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "defaultLanguage": "en"
19
19
  },
20
20
  "data": {
21
- "type": "view",
21
+ "type": "View",
22
22
  "attributes": {
23
23
  "style": {
24
24
  "flexDirection": "column",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "children": [
34
34
  {
35
- "type": "text",
35
+ "type": "Text",
36
36
  "children": "Hello, world!",
37
37
  "attributes": {
38
38
  "style": {
@@ -43,7 +43,7 @@
43
43
  }
44
44
  },
45
45
  {
46
- "type": "text",
46
+ "type": "Text",
47
47
  "children": "Welcome to react-native-builder",
48
48
  "attributes": {
49
49
  "style": {
package/src/build-components/BackgroundImage/BackgroundImage.tsx CHANGED
@@ -62,7 +62,7 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
62
62
  mergedStyle,
63
63
  isSelected ? SELECTED_OUTLINE_STYLE : undefined,
64
64
  );
65
-
65
+ console.log('style', style);
66
66
  return (
67
67
  <div
68
68
  attribute-name={attributeName}
package/src/build-components/BackgroundImage/pattern.json CHANGED
@@ -7,6 +7,18 @@
7
7
  "attributes": {
8
8
  "src": "string",
9
9
  "resizeMode": ["cover", "contain", "stretch", "center"]
10
+ },
11
+ "defaults": {
12
+ "resizeMode": "cover",
13
+ "style": {
14
+ "width": "100%",
15
+ "height": "100%",
16
+ "position": "absolute",
17
+ "top": 0,
18
+ "left": 0,
19
+ "right": 0,
20
+ "bottom": 0
21
+ }
10
22
  }
11
23
  },
12
24
  "meta": {
package/src/build-components/PaywallBackground/PaywallBackground.tsx CHANGED
@@ -1,41 +1,11 @@
1
- import React, { useId, useMemo } from 'react';
1
+ import React from 'react';
2
2
  import type { PaywallBackgroundComponentProps } from './PaywallBackgroundProps.generated';
3
- import useNode from '../useNode';
4
- import { useBuilderParams } from '../../components/BuilderProvider';
5
- import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
3
+ import BackgroundImage from '../BackgroundImage/BackgroundImage';
6
4
  import { useLogRender } from '../../utils/useLogRender';
7
- import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
8
- import { useMergedStyle } from '../../utils/useMergedStyle';
9
5
 
10
6
  function PaywallBackground({ node }: PaywallBackgroundComponentProps) {
11
7
  useLogRender('PaywallBackground');
12
- node = useNode(node);
13
-
14
- const generatedId = useId();
15
- const attributeName = node.type ?? 'PaywallBackground';
16
- const attributeKey = node.key ?? generatedId;
17
-
18
- const { previewMode, selectedKey } = useBuilderParams();
19
-
20
- const baseStyle = useExtractViewStyle(node);
21
-
22
- const isSelected = isNodeSelected({
23
- previewMode: !!previewMode,
24
- current: selectedKey ? { key: selectedKey } : undefined,
25
- node,
26
- });
27
- const style = useMergedStyle(
28
- baseStyle,
29
- isSelected ? SELECTED_OUTLINE_STYLE : undefined,
30
- );
31
-
32
- return (
33
- <div
34
- attribute-name={attributeName}
35
- attribute-key={attributeKey}
36
- style={style}
37
- />
38
- );
8
+ return <BackgroundImage node={node} />;
39
9
  }
40
10
 
41
11
  export default React.memo(PaywallBackground);
package/src/build-components/PaywallBackground/PaywallBackgroundProps.generated.ts CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  import type { NodeData } from '../../types/Node';
4
4
 
5
+ export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
5
6
  export type FlexDirectionOptionType = 'row' | 'column';
6
7
  export type AlignItemsOptionType =
7
8
  | 'flex-start'
@@ -58,6 +59,8 @@ export interface PaywallBackgroundPropsGenerated {
58
59
  child: string;
59
60
  attributes: {
60
61
  style?: PaywallBackgroundStyleGenerated;
62
+ src?: string;
63
+ resizeMode?: ResizeModeOptionType;
61
64
  scrollable?: boolean;
62
65
  };
63
66
  }
package/src/build-components/PaywallBackground/pattern.json CHANGED
@@ -3,13 +3,23 @@
3
3
  "pattern": {
4
4
  "type": "PaywallBackground",
5
5
  "children": "never",
6
- "extends": "View",
7
- "attributes": {}
6
+ "extends": "BackgroundImage",
7
+ "attributes": {},
8
+ "defaults": {
9
+ "resizeMode": "cover",
10
+ "style": {
11
+ "width": "100%",
12
+ "height": "100%",
13
+ "position": "absolute",
14
+ "top": 0,
15
+ "left": 0,
16
+ "right": 0,
17
+ "bottom": 0
18
+ }
19
+ }
8
20
  },
9
21
  "meta": {
10
- "desiredParent": [
11
- ">PaywallProvider"
12
- ],
22
+ "desiredParent": [">PaywallProvider"],
13
23
  "label": "Paywall Background",
14
24
  "description": "Paywall Background component.",
15
25
  "styles": {}
package/src/build-components/Text/pattern.json CHANGED
@@ -20,45 +20,46 @@
20
20
  "desiredParent": ["all"],
21
21
  "label": "Text",
22
22
  "description": "Displays simple text.",
23
- "styles": {
24
- "color": {
25
- "label": "Color",
26
- "description": "Text color.",
27
- "category": "style",
28
- "specialCategory": null,
29
- "sort": 1
30
- },
31
- "fontSize": {
32
- "label": "Font Size",
33
- "description": "Text size.",
34
- "category": "style",
35
- "specialCategory": null,
36
- "sort": 2,
37
- "preferedScale": "s"
38
- },
39
- "fontFamily": {
40
- "label": "Font Family",
41
- "description": "Font family used for the text.",
42
- "category": "style",
43
- "specialCategory": null,
44
- "sort": 3
45
- },
46
- "fontWeight": {
47
- "label": "Font Weight",
48
- "description": "Text weight.",
49
- "category": "style",
50
- "specialCategory": null,
51
- "sort": 4
52
- },
53
- "textAlign": {
54
- "label": "Text Align",
55
- "description": "Text alignment.",
56
- "category": "style",
57
- "specialCategory": null,
58
- "sort": 5
59
- }
60
- },
23
+
61
24
  "attributes": {
25
+ "styles": {
26
+ "color": {
27
+ "label": "Color",
28
+ "description": "Text color.",
29
+ "category": "style",
30
+ "specialCategory": null,
31
+ "sort": 1
32
+ },
33
+ "fontSize": {
34
+ "label": "Font Size",
35
+ "description": "Text size.",
36
+ "category": "style",
37
+ "specialCategory": null,
38
+ "sort": 2,
39
+ "preferedScale": "s"
40
+ },
41
+ "fontFamily": {
42
+ "label": "Font Family",
43
+ "description": "Font family used for the text.",
44
+ "category": "style",
45
+ "specialCategory": null,
46
+ "sort": 3
47
+ },
48
+ "fontWeight": {
49
+ "label": "Font Weight",
50
+ "description": "Text weight.",
51
+ "category": "style",
52
+ "specialCategory": null,
53
+ "sort": 4
54
+ },
55
+ "textAlign": {
56
+ "label": "Text Align",
57
+ "description": "Text alignment.",
58
+ "category": "style",
59
+ "specialCategory": null,
60
+ "sort": 5
61
+ }
62
+ },
62
63
  "adjustsFontSizeToFit": {
63
64
  "label": "Adjust Font Size To Fit",
64
65
  "description": "Automatically reduces font size to fit the available space.",