@developer_tribe/react-builder 0.1.32 → 1.0.2
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/DeviceMockFrame.d.ts +2 -17
- package/dist/RenderPage.d.ts +4 -11
- package/dist/attributes-editor/Field.d.ts +16 -0
- package/dist/attributes-editor/FieldInfoTooltip.d.ts +7 -0
- package/dist/attributes-editor/LayoutPreviewPicker.d.ts +12 -0
- package/dist/attributes-editor/SpecialCategorySection.d.ts +19 -0
- package/dist/attributes-editor/types.d.ts +14 -0
- package/dist/background.jpg +0 -0
- package/dist/build-components/Button/Button.d.ts +1 -1
- package/dist/build-components/Button/ButtonProps.generated.d.ts +26 -1
- package/dist/build-components/Carousel/CarouselProps.generated.d.ts +27 -1
- package/dist/build-components/CarouselButtons/CarouselButtonsProps.generated.d.ts +25 -0
- package/dist/build-components/CarouselDots/CarouselDotsProps.generated.d.ts +25 -0
- package/dist/build-components/CarouselItem/CarouselItemProps.generated.d.ts +27 -1
- package/dist/build-components/CarouselProvider/CarouselProviderProps.generated.d.ts +27 -1
- package/dist/build-components/Image/ImageProps.generated.d.ts +25 -3
- package/dist/build-components/Onboard/OnboardProps.generated.d.ts +27 -1
- package/dist/build-components/OnboardButton/OnboardButtonProps.generated.d.ts +25 -0
- package/dist/build-components/OnboardButtons/OnboardButtonsProps.generated.d.ts +25 -0
- package/dist/build-components/OnboardDot/OnboardDot.d.ts +1 -1
- package/dist/build-components/OnboardDot/OnboardDotProps.generated.d.ts +22 -0
- package/dist/build-components/OnboardFooter/OnboardFooterProps.generated.d.ts +4 -5
- package/dist/build-components/OnboardImage/OnboardImageProps.generated.d.ts +25 -3
- package/dist/build-components/OnboardItem/OnboardItemProps.generated.d.ts +24 -3
- package/dist/build-components/OnboardProvider/OnboardProviderProps.generated.d.ts +25 -4
- package/dist/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.d.ts +4 -5
- package/dist/build-components/OnboardTitle/OnboardTitleProps.generated.d.ts +4 -5
- package/dist/build-components/Text/TextProps.generated.d.ts +4 -5
- package/dist/build-components/View/ViewProps.generated.d.ts +3 -4
- package/dist/build-components/index.d.ts +1 -0
- package/dist/build-components/patterns.generated.d.ts +4855 -132
- package/dist/components/AttributesEditorPanel.d.ts +9 -0
- package/dist/components/Breadcrumb.d.ts +15 -0
- package/dist/components/Builder.d.ts +9 -0
- package/dist/components/Checkbox.d.ts +17 -0
- package/dist/components/DeviceButton.d.ts +8 -0
- package/dist/components/DeviceNavigationBar.d.ts +10 -0
- package/dist/components/DeviceStatusBar.d.ts +9 -0
- package/dist/components/EditorHeader.d.ts +10 -0
- package/dist/index.cjs.js +6 -5
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +8 -4
- package/dist/index.esm.js +6 -5
- package/dist/index.esm.js.map +1 -0
- package/dist/mockOS/components/MockLaunchScreenComponent.d.ts +6 -0
- package/dist/mockOS/components/MockOSRouter.d.ts +8 -0
- package/dist/mockOS/components/PermissionModal.d.ts +9 -0
- package/dist/mockOS/context/MockOSContext.d.ts +36 -0
- package/dist/mockOS/hooks/useMockNavigation.d.ts +3 -0
- package/dist/mockOS/hooks/useMockPermission.d.ts +3 -0
- package/dist/mockOS/index.d.ts +9 -0
- package/dist/mockOS/managers/mockPermissionManager.d.ts +10 -0
- package/dist/mockOS/managers/navigationManager.d.ts +17 -0
- package/dist/modals/AddComponentModal.d.ts +8 -0
- package/dist/modals/ColorModal.d.ts +9 -0
- package/dist/modals/DeviceSelectorModal.d.ts +9 -0
- package/dist/modals/LocalicationModal.d.ts +8 -0
- package/dist/modals/Modal.d.ts +12 -0
- package/dist/modals/index.d.ts +5 -0
- package/dist/pages/ProjectPage.d.ts +11 -0
- package/dist/pages/tabs/BuilderTab.d.ts +9 -0
- package/dist/pages/tabs/DebugTab.d.ts +7 -0
- package/dist/pages/tabs/PreviewTab.d.ts +3 -0
- package/dist/store.d.ts +15 -18
- package/dist/styles.css +1 -1
- package/dist/types/PreviewConfig.d.ts +6 -3
- package/dist/types/Project.d.ts +12 -2
- package/dist/utils/copyNode.d.ts +2 -0
- package/dist/utils/logger.d.ts +11 -0
- package/dist/utils/patterns.d.ts +24 -0
- package/dist/utils/useLogRender.d.ts +1 -0
- package/package.json +17 -9
- package/scripts/prebuild/utils/createBuildComponentsIndex.js +15 -1
- package/scripts/prebuild/utils/createGeneratedProps.js +11 -3
- package/scripts/prebuild/utils/validateAllComponentsOrThrow.js +45 -6
- package/scripts/prebuild/utils/validatePatternJson.js +13 -5
- package/src/AttributesEditor.tsx +434 -311
- package/src/DeviceMockFrame.tsx +42 -67
- package/src/RenderPage.tsx +8 -44
- package/src/assets/images/android.svg +43 -0
- package/src/assets/images/apple.svg +16 -0
- package/src/assets/images/background.jpg +0 -0
- package/src/assets/samples/carousel-sample.json +2 -3
- package/src/assets/samples/getSamples.ts +49 -12
- package/src/assets/samples/simple-1.json +1 -2
- package/src/assets/samples/simple-2.json +1 -2
- package/src/assets/samples/vpn-onboard-1.json +1 -2
- package/src/assets/samples/vpn-onboard-2.json +1 -2
- package/src/assets/samples/vpn-onboard-3.json +1 -2
- package/src/assets/samples/vpn-onboard-4.json +1 -2
- package/src/assets/samples/vpn-onboard-5.json +1 -2
- package/src/assets/samples/vpn-onboard-6.json +1 -2
- package/src/attributes-editor/Field.tsx +662 -0
- package/src/attributes-editor/FieldInfoTooltip.tsx +49 -0
- package/src/attributes-editor/LayoutPreviewPicker.tsx +199 -0
- package/src/attributes-editor/SpecialCategorySection.tsx +284 -0
- package/src/attributes-editor/types.ts +30 -0
- package/src/build-components/Button/Button.tsx +12 -2
- package/src/build-components/Button/ButtonProps.generated.ts +37 -1
- package/src/build-components/Button/pattern.json +31 -2
- package/src/build-components/Carousel/Carousel.tsx +17 -2
- package/src/build-components/Carousel/CarouselProps.generated.ts +39 -1
- package/src/build-components/Carousel/pattern.json +10 -0
- package/src/build-components/CarouselButtons/CarouselButtons.tsx +8 -2
- package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts +36 -0
- package/src/build-components/CarouselButtons/pattern.json +22 -0
- package/src/build-components/CarouselDots/CarouselDots.tsx +42 -8
- package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts +36 -0
- package/src/build-components/CarouselDots/pattern.json +15 -0
- package/src/build-components/CarouselItem/CarouselItem.tsx +7 -2
- package/src/build-components/CarouselItem/CarouselItemProps.generated.ts +39 -1
- package/src/build-components/CarouselItem/pattern.json +7 -0
- package/src/build-components/CarouselProvider/CarouselProvider.tsx +10 -2
- package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts +39 -1
- package/src/build-components/CarouselProvider/pattern.json +7 -0
- package/src/build-components/Image/Image.tsx +10 -2
- package/src/build-components/Image/ImageProps.generated.ts +36 -3
- package/src/build-components/Image/pattern.json +46 -3
- package/src/build-components/Onboard/Onboard.tsx +8 -1
- package/src/build-components/Onboard/OnboardProps.generated.ts +39 -1
- package/src/build-components/Onboard/pattern.json +11 -0
- package/src/build-components/OnboardButton/OnboardButton.tsx +53 -9
- package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts +36 -0
- package/src/build-components/OnboardButton/pattern.json +71 -5
- package/src/build-components/OnboardButtons/OnboardButtons.tsx +27 -17
- package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts +36 -0
- package/src/build-components/OnboardButtons/pattern.json +70 -4
- package/src/build-components/OnboardDot/OnboardDot.tsx +106 -4
- package/src/build-components/OnboardDot/OnboardDotProps.generated.ts +22 -0
- package/src/build-components/OnboardDot/pattern.json +54 -1
- package/src/build-components/OnboardFooter/OnboardFooter.tsx +14 -6
- package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts +4 -5
- package/src/build-components/OnboardFooter/pattern.json +58 -2
- package/src/build-components/OnboardImage/OnboardImage.tsx +29 -5
- package/src/build-components/OnboardImage/OnboardImageProps.generated.ts +36 -3
- package/src/build-components/OnboardImage/pattern.json +21 -0
- package/src/build-components/OnboardItem/OnboardItem.tsx +8 -1
- package/src/build-components/OnboardItem/OnboardItemProps.generated.ts +35 -3
- package/src/build-components/OnboardItem/pattern.json +38 -2
- package/src/build-components/OnboardProvider/OnboardProvider.tsx +22 -8
- package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts +37 -4
- package/src/build-components/OnboardProvider/pattern.json +51 -4
- package/src/build-components/OnboardSubtitle/OnboardSubtitle.tsx +2 -0
- package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts +4 -5
- package/src/build-components/OnboardSubtitle/pattern.json +6 -0
- package/src/build-components/OnboardTitle/OnboardTitle.tsx +2 -0
- package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts +4 -5
- package/src/build-components/OnboardTitle/pattern.json +6 -0
- package/src/build-components/Text/Text.tsx +12 -6
- package/src/build-components/Text/TextProps.generated.ts +4 -5
- package/src/build-components/Text/pattern.json +38 -2
- package/src/build-components/View/View.tsx +11 -6
- package/src/build-components/View/ViewProps.generated.ts +3 -4
- package/src/build-components/View/pattern.json +227 -19
- package/src/build-components/index.ts +22 -0
- package/src/build-components/patterns.generated.ts +4905 -139
- package/src/components/AttributesEditorPanel.tsx +58 -0
- package/src/components/Breadcrumb.tsx +80 -0
- package/src/components/Builder.tsx +375 -0
- package/src/components/Checkbox.tsx +81 -0
- package/src/components/DeviceButton.tsx +39 -0
- package/src/components/DeviceNavigationBar.tsx +201 -0
- package/src/components/DeviceStatusBar.tsx +85 -0
- package/src/components/EditorHeader.tsx +138 -0
- package/src/index.ts +8 -4
- package/src/mockOS/components/MockLaunchScreenComponent.tsx +43 -0
- package/src/mockOS/components/MockOSRouter.tsx +115 -0
- package/src/mockOS/components/PermissionModal.tsx +270 -0
- package/src/mockOS/context/MockOSContext.tsx +179 -0
- package/src/mockOS/hooks/useMockNavigation.ts +11 -0
- package/src/mockOS/hooks/useMockPermission.ts +11 -0
- package/src/mockOS/index.ts +26 -0
- package/src/mockOS/managers/mockPermissionManager.ts +54 -0
- package/src/mockOS/managers/navigationManager.ts +91 -0
- package/src/modals/AddComponentModal.tsx +313 -0
- package/src/modals/ColorModal.tsx +268 -0
- package/src/modals/DeviceSelectorModal.tsx +57 -0
- package/src/modals/LocalicationModal.tsx +54 -0
- package/src/modals/Modal.tsx +57 -0
- package/src/modals/index.ts +5 -0
- package/src/pages/ProjectPage.tsx +150 -0
- package/src/pages/tabs/BuilderTab.tsx +33 -0
- package/src/pages/tabs/DebugTab.tsx +64 -0
- package/src/pages/tabs/PreviewTab.tsx +206 -0
- package/src/size-matters/index.ts +25 -5
- package/src/store.ts +56 -38
- package/src/styles/base/_global.scss +253 -0
- package/src/styles/components/_attributes-editor.scss +261 -0
- package/src/styles/components/_editor-shell.scss +189 -0
- package/src/styles/components/_mockos-router.scss +140 -0
- package/src/styles/components/_ui-components.scss +183 -0
- package/src/styles/foundation/_colors.scss +8 -0
- package/src/styles/foundation/_mixins.scss +22 -0
- package/src/styles/{_reset.scss → foundation/_reset.scss} +5 -2
- package/src/styles/foundation/_sizes.scss +37 -0
- package/src/styles/foundation/_typography.scss +4 -0
- package/src/styles/foundation/_variables.scss +3 -0
- package/src/styles/index.scss +22 -129
- package/src/styles/layout/_builder.scss +68 -0
- package/src/styles/layout/_pages.scss +3 -0
- package/src/styles/modals/_add-component.scss +122 -0
- package/src/styles/modals/_color-modal.scss +130 -0
- package/src/styles/modals/_device-selector.scss +18 -0
- package/src/styles/modals/_localication-modal.scss +68 -0
- package/src/styles/modals/_modal-shell.scss +46 -0
- package/src/styles/utilities/_carousel.scss +125 -0
- package/src/types/PreviewConfig.ts +14 -5
- package/src/types/Project.ts +15 -2
- package/src/types/images.d.ts +8 -0
- package/src/utils/copyNode.ts +7 -0
- package/src/utils/extractTextStyle.ts +8 -4
- package/src/utils/extractViewStyle.ts +51 -7
- package/src/utils/getDevices.ts +1 -0
- package/src/utils/logger.ts +76 -0
- package/src/utils/patterns.ts +33 -0
- package/src/utils/useLogRender.ts +13 -0
- package/dist/build-components/OnboardDot/OnboardExpandingDotProps.generated.d.ts +0 -10
- package/src/build-components/OnboardDot/OnboardExpandingDotProps.generated.ts +0 -20
|
@@ -120,7 +120,13 @@ async function validatePatternJson(componentDir, componentName) {
|
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
// Helpers for validating custom types
|
|
123
|
-
const isPrimitive = t =>
|
|
123
|
+
const isPrimitive = t =>
|
|
124
|
+
t === 'string' ||
|
|
125
|
+
t === 'number' ||
|
|
126
|
+
t === 'boolean' ||
|
|
127
|
+
t === 'color' ||
|
|
128
|
+
t === 'size';
|
|
129
|
+
const isNeverType = t => t === 'never';
|
|
124
130
|
const hasCustomTypes = typeof data.types === 'object' && data.types != null;
|
|
125
131
|
const isCustomType = t =>
|
|
126
132
|
hasCustomTypes &&
|
|
@@ -140,14 +146,25 @@ async function validatePatternJson(componentDir, componentName) {
|
|
|
140
146
|
return isCustomType(t);
|
|
141
147
|
};
|
|
142
148
|
|
|
149
|
+
const isPlainObject = value =>
|
|
150
|
+
typeof value === 'object' && value != null && !Array.isArray(value);
|
|
151
|
+
|
|
152
|
+
const buildDefaultsBlock = source => ({
|
|
153
|
+
...(isPlainObject(source?.pattern?.defaults)
|
|
154
|
+
? source.pattern.defaults
|
|
155
|
+
: {}),
|
|
156
|
+
...(isPlainObject(source?.defaults) ? source.defaults : {}),
|
|
157
|
+
});
|
|
158
|
+
|
|
143
159
|
// Validate attributes accept primitive, enum array, or custom type refs (including X[])
|
|
144
160
|
for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
|
|
145
161
|
const ok =
|
|
146
|
-
(typeof attrType === 'string' &&
|
|
162
|
+
(typeof attrType === 'string' &&
|
|
163
|
+
(isNeverType(attrType) || isValidTypeRef(attrType))) ||
|
|
147
164
|
isEnumArray(attrType);
|
|
148
165
|
if (!ok) {
|
|
149
166
|
return fail(
|
|
150
|
-
`[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | string[] | CustomType | CustomType[]`
|
|
167
|
+
`[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | 'never' | string[] | CustomType | CustomType[]`
|
|
151
168
|
);
|
|
152
169
|
}
|
|
153
170
|
}
|
|
@@ -167,7 +184,7 @@ async function validatePatternJson(componentDir, componentName) {
|
|
|
167
184
|
isEnumArray(fieldType);
|
|
168
185
|
if (!fieldOk) {
|
|
169
186
|
return fail(
|
|
170
|
-
`[${componentName}] pattern.json -> 'types.${typeName}.${fieldName}' must be 'string' | 'number' | 'boolean' | string[] | CustomType | CustomType[]`
|
|
187
|
+
`[${componentName}] pattern.json -> 'types.${typeName}.${fieldName}' must be 'string' | 'number' | 'boolean' | 'color' | string[] | CustomType | CustomType[]`
|
|
171
188
|
);
|
|
172
189
|
}
|
|
173
190
|
}
|
|
@@ -271,14 +288,27 @@ async function validatePatternJson(componentDir, componentName) {
|
|
|
271
288
|
|
|
272
289
|
const mergedTypes = { ...(parentData.types || {}), ...(data.types || {}) };
|
|
273
290
|
const mergedDefaults = {
|
|
274
|
-
...(parentData
|
|
275
|
-
...(data
|
|
291
|
+
...buildDefaultsBlock(parentData),
|
|
292
|
+
...buildDefaultsBlock(data),
|
|
276
293
|
};
|
|
277
294
|
const mergedAllowUnknown =
|
|
278
295
|
typeof data.allowUnknownAttributes === 'boolean'
|
|
279
296
|
? data.allowUnknownAttributes
|
|
280
297
|
: parentData.allowUnknownAttributes;
|
|
281
298
|
|
|
299
|
+
const mergedMetaAttributes = {
|
|
300
|
+
...(parentData?.meta?.attributes || {}),
|
|
301
|
+
...(data?.meta?.attributes || {}),
|
|
302
|
+
};
|
|
303
|
+
const mergedMeta =
|
|
304
|
+
parentData.meta || data.meta
|
|
305
|
+
? {
|
|
306
|
+
...(parentData.meta || {}),
|
|
307
|
+
...(data.meta || {}),
|
|
308
|
+
attributes: mergedMetaAttributes,
|
|
309
|
+
}
|
|
310
|
+
: undefined;
|
|
311
|
+
|
|
282
312
|
const mergedPattern = {
|
|
283
313
|
...parentData.pattern,
|
|
284
314
|
...data.pattern,
|
|
@@ -294,10 +324,19 @@ async function validatePatternJson(componentDir, componentName) {
|
|
|
294
324
|
allowUnknownAttributes: mergedAllowUnknown,
|
|
295
325
|
types: mergedTypes,
|
|
296
326
|
defaults: mergedDefaults,
|
|
327
|
+
meta: mergedMeta,
|
|
297
328
|
pattern: mergedPattern,
|
|
298
329
|
};
|
|
299
330
|
}
|
|
300
331
|
|
|
332
|
+
const resolvedDefaults = buildDefaultsBlock(data);
|
|
333
|
+
if (Object.keys(resolvedDefaults).length > 0) {
|
|
334
|
+
data = {
|
|
335
|
+
...data,
|
|
336
|
+
defaults: resolvedDefaults,
|
|
337
|
+
};
|
|
338
|
+
}
|
|
339
|
+
|
|
301
340
|
return data;
|
|
302
341
|
}
|
|
303
342
|
|
|
@@ -60,15 +60,23 @@ export async function validatePatternJson(componentDir, componentName) {
|
|
|
60
60
|
);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
+
const isPrimitiveType = value =>
|
|
64
|
+
value === 'string' ||
|
|
65
|
+
value === 'number' ||
|
|
66
|
+
value === 'boolean' ||
|
|
67
|
+
value === 'color' ||
|
|
68
|
+
value === 'size';
|
|
69
|
+
|
|
63
70
|
for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
|
|
64
71
|
const isValidType =
|
|
65
|
-
typeof attrType === 'string' &&
|
|
66
|
-
(attrType === 'string'
|
|
67
|
-
|
|
68
|
-
|
|
72
|
+
(typeof attrType === 'string' && isPrimitiveType(attrType)) ||
|
|
73
|
+
(typeof attrType === 'string' &&
|
|
74
|
+
attrType.endsWith('[]') &&
|
|
75
|
+
isPrimitiveType(attrType.slice(0, -2))) ||
|
|
76
|
+
(Array.isArray(attrType) && attrType.every(v => typeof v === 'string'));
|
|
69
77
|
if (!isValidType) {
|
|
70
78
|
return fail(
|
|
71
|
-
`[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | string[]`
|
|
79
|
+
`[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | string[]`
|
|
72
80
|
);
|
|
73
81
|
}
|
|
74
82
|
}
|