@developer_tribe/react-builder 1.2.22 → 1.2.24

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 (106) hide show
  1. package/dist/attribute-analyser/style/native/useExtractImageStyle.d.ts +6 -6
  2. package/dist/attribute-analyser/style/native/useExtractTextStyle.d.ts +6 -4
  3. package/dist/attribute-analyser/style/native/useExtractViewStyle.d.ts +5 -3
  4. package/dist/build-components/Image/ImageProps.generated.d.ts +2 -4
  5. package/dist/build-components/NavigationBarColor/NavigationBarColor.d.ts +5 -0
  6. package/dist/build-components/NavigationBarColor/NavigationBarColorProps.generated.d.ts +54 -0
  7. package/dist/build-components/OnboardImage/OnboardImageProps.generated.d.ts +1 -3
  8. package/dist/build-components/Separator/Separator.d.ts +5 -0
  9. package/dist/build-components/Separator/SeparatorProps.generated.d.ts +21 -0
  10. package/dist/build-components/StatusBarColor/StatusBarColor.d.ts +5 -0
  11. package/dist/build-components/StatusBarColor/StatusBarColorProps.generated.d.ts +54 -0
  12. package/dist/build-components/index.d.ts +4 -1
  13. package/dist/build-components/patterns.generated.d.ts +2111 -1251
  14. package/dist/components/AttributesEditorPanel.d.ts +1 -1
  15. package/dist/components/BuilderProvider.d.ts +1 -1
  16. package/dist/index.cjs.js +4 -4
  17. package/dist/index.cjs.js.map +1 -1
  18. package/dist/index.d.ts +2 -0
  19. package/dist/index.esm.js +4 -4
  20. package/dist/index.esm.js.map +1 -1
  21. package/dist/index.web.cjs.js +6 -6
  22. package/dist/index.web.cjs.js.map +1 -1
  23. package/dist/index.web.esm.js +4 -4
  24. package/dist/index.web.esm.js.map +1 -1
  25. package/dist/store.d.ts +4 -0
  26. package/dist/styles.css +1 -1
  27. package/dist/utils/attributeStyle.d.ts +21 -0
  28. package/dist/utils/extractImageStyle.d.ts +1 -1
  29. package/dist/utils/extractViewStyle/extractViewStyleNative.d.ts +1 -1
  30. package/package.json +7 -2
  31. package/src/DeviceMockFrame.tsx +8 -2
  32. package/src/assets/meta.json +1 -1
  33. package/src/assets/samples/paywall-1.json +44 -39
  34. package/src/assets/samples/paywall-2.json +44 -25
  35. package/src/assets/samples/paywall-app-delete-offer.json +40 -21
  36. package/src/assets/samples/paywall-app-open-offer.json +40 -21
  37. package/src/assets/samples/paywall-back-offer.json +40 -21
  38. package/src/assets/samples/paywall-notification-offer.json +40 -21
  39. package/src/assets/samples/vpn-onboard-1.json +84 -39
  40. package/src/assets/samples/vpn-onboard-2.json +85 -40
  41. package/src/assets/samples/vpn-onboard-3.json +84 -39
  42. package/src/assets/samples/vpn-onboard-4.json +84 -39
  43. package/src/assets/samples/vpn-onboard-5.json +102 -55
  44. package/src/assets/samples/vpn-onboard-6.json +87 -38
  45. package/src/attribute-analyser/style/native/useExtractImageStyle.ts +31 -25
  46. package/src/attribute-analyser/style/native/useExtractTextStyle.ts +26 -11
  47. package/src/attribute-analyser/style/native/useExtractViewStyle.ts +21 -11
  48. package/src/attributes-editor/useAttributesEditorModel.ts +23 -17
  49. package/src/build-components/BackgroundImage/pattern.json +9 -7
  50. package/src/build-components/CarouselDots/CarouselDots.tsx +12 -11
  51. package/src/build-components/CarouselProvider/CarouselProvider.tsx +3 -1
  52. package/src/build-components/Image/ImageProps.generated.ts +2 -4
  53. package/src/build-components/Image/pattern.json +15 -25
  54. package/src/build-components/NavigationBarColor/NavigationBarColor.tsx +39 -0
  55. package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts +71 -0
  56. package/src/build-components/NavigationBarColor/pattern.json +34 -0
  57. package/src/build-components/OnboardButton/OnboardButton.tsx +19 -5
  58. package/src/build-components/OnboardButtons/OnboardButtons.tsx +8 -10
  59. package/src/build-components/OnboardDot/OnboardDot.tsx +12 -10
  60. package/src/build-components/OnboardFooter/OnboardFooter.tsx +15 -4
  61. package/src/build-components/OnboardImage/OnboardImage.tsx +1 -1
  62. package/src/build-components/OnboardImage/OnboardImageProps.generated.ts +1 -3
  63. package/src/build-components/OnboardProvider/OnboardProvider.tsx +3 -1
  64. package/src/build-components/RenderNode.generated.tsx +15 -0
  65. package/src/build-components/Separator/Separator.tsx +41 -0
  66. package/src/build-components/Separator/SeparatorProps.generated.ts +26 -0
  67. package/src/build-components/Separator/pattern.json +59 -0
  68. package/src/build-components/StatusBarColor/StatusBarColor.tsx +39 -0
  69. package/src/build-components/StatusBarColor/StatusBarColorProps.generated.ts +71 -0
  70. package/src/build-components/StatusBarColor/pattern.json +34 -0
  71. package/src/build-components/Text/pattern.json +45 -38
  72. package/src/build-components/index.ts +15 -0
  73. package/src/build-components/patterns.generated.ts +2153 -1272
  74. package/src/build-components/useNode.ts +24 -25
  75. package/src/components/AttributesEditorPanel.tsx +4 -5
  76. package/src/components/Builder.tsx +1 -2
  77. package/src/components/BuilderProvider.tsx +43 -6
  78. package/src/components/JsonTextEditor.tsx +2 -2
  79. package/src/components/LoadingComponent.tsx +1 -1
  80. package/src/components/RenderErrorBoundary.tsx +1 -3
  81. package/src/index.ts +3 -0
  82. package/src/migrations/migrations/1.1.2_extract_component_attributes_from_style.ts +3 -3
  83. package/src/modals/BenefitPresetsModal.tsx +1 -1
  84. package/src/modals/ProductPresetsModal.tsx +1 -1
  85. package/src/pages/DebugJsonPage.tsx +7 -4
  86. package/src/pages/ProjectDebug.tsx +1 -1
  87. package/src/pages/ProjectPage.tsx +31 -32
  88. package/src/pages/ProjectValidationPage.tsx +2 -2
  89. package/src/store.ts +13 -0
  90. package/src/styles/layout/_builder.scss +6 -0
  91. package/src/utils/__special_exceptions.ts +5 -5
  92. package/src/utils/analyseNode.ts +2 -2
  93. package/src/utils/analyseNodeByPatterns.ts +10 -9
  94. package/src/utils/analyseNodeStructural.ts +1 -1
  95. package/src/utils/attributeStyle.ts +104 -0
  96. package/src/utils/extractImageStyle.ts +17 -13
  97. package/src/utils/extractTextStyle/extractTextStyle.ts +7 -7
  98. package/src/utils/extractTextStyle/extractTextStyleNative.ts +10 -10
  99. package/src/utils/extractViewStyle/extractViewStyle.ts +8 -11
  100. package/src/utils/extractViewStyle/extractViewStyleNative.ts +19 -19
  101. package/src/utils/loadFontFamily.ts +14 -19
  102. package/src/utils/logRenderStore.ts +5 -4
  103. package/src/utils/nodeTree.ts +1 -1
  104. package/src/utils/patterns.ts +26 -31
  105. package/src/utils/repairNodeKeys.ts +5 -7
  106. package/src/utils/wrapNodeInMain.ts +3 -3
@@ -1,10 +1,10 @@
1
+ import type { ImageStyle } from 'react-native';
1
2
  import type { NodeData } from '../../../types/Node';
2
- import type { ImagePropsGenerated } from '../../../build-components/Image/ImageProps.generated';
3
+ import type { ImagePropsGenerated, ResizeModeOptionType } from '../../../build-components/Image/ImageProps.generated';
4
+ import { type StyleAttrKey } from '../../../utils/attributeStyle';
3
5
  export declare function useExtractImageStyle<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>): {
4
- style: {
5
- [x: string]: unknown;
6
- };
7
- other: {
8
- resizeMode: "cover" | "contain" | "stretch" | "center" | undefined;
6
+ style: ImageStyle;
7
+ other: Omit<T, StyleAttrKey> & {
8
+ resizeMode?: ResizeModeOptionType;
9
9
  };
10
10
  };
@@ -1,9 +1,11 @@
1
+ import type { TextStyle } from 'react-native';
1
2
  import type { NodeData } from '../../../types/Node';
2
3
  import type { TextPropsGenerated } from '../../../build-components/Text/TextProps.generated';
4
+ import { type StyleAttrKey } from '../../../utils/attributeStyle';
3
5
  export declare function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>): {
4
- style: Record<string, unknown>;
5
- other: {
6
- adjustsFontSizeToFit: boolean | undefined;
7
- showEllipsis: boolean | undefined;
6
+ style: TextStyle;
7
+ other: Omit<T, StyleAttrKey> & {
8
+ adjustsFontSizeToFit?: boolean;
9
+ showEllipsis?: boolean;
8
10
  };
9
11
  };
@@ -1,8 +1,10 @@
1
+ import type { ViewStyle } from 'react-native';
1
2
  import type { NodeData } from '../../../types/Node';
2
3
  import type { ViewPropsGenerated } from '../../../build-components/View/ViewProps.generated';
4
+ import { type StyleAttrKey } from '../../../utils/attributeStyle';
3
5
  export declare function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>): {
4
- style: Record<string, unknown>;
5
- other: {
6
- scrollable: boolean | undefined;
6
+ style: ViewStyle;
7
+ other: Omit<T, StyleAttrKey> & {
8
+ scrollable?: boolean;
7
9
  };
8
10
  };
@@ -1,10 +1,10 @@
1
1
  import type { NodeData } from '../../types/Node';
2
- export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
3
2
  export type FlexDirectionOptionType = 'row' | 'column';
4
3
  export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
5
4
  export type AlignItemsOptionType = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
6
5
  export type JustifyContentOptionType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
7
6
  export type PositionOptionType = 'relative' | 'absolute';
7
+ export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
8
8
  export interface ImageStyleGenerated {
9
9
  flexDirection?: FlexDirectionOptionType;
10
10
  flexWrap?: FlexWrapOptionType;
@@ -40,6 +40,7 @@ export interface ImageStyleGenerated {
40
40
  left?: string;
41
41
  right?: string;
42
42
  zIndex?: number;
43
+ resizeMode?: ResizeModeOptionType;
43
44
  }
44
45
  export interface ImagePropsGenerated {
45
46
  child: string;
@@ -49,9 +50,6 @@ export interface ImagePropsGenerated {
49
50
  title?: string;
50
51
  description?: string;
51
52
  src?: string;
52
- width?: string;
53
- height?: string;
54
- resizeMode?: ResizeModeOptionType;
55
53
  };
56
54
  }
57
55
  export interface ImageComponentProps {
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import type { NavigationBarColorComponentProps } from './NavigationBarColorProps.generated';
3
+ declare function NavigationBarColor({ node }: NavigationBarColorComponentProps): null;
4
+ declare const _default: React.MemoExoticComponent<typeof NavigationBarColor>;
5
+ export default _default;
@@ -0,0 +1,54 @@
1
+ import type { NodeData } from '../../types/Node';
2
+ export type FlexDirectionOptionType = 'row' | 'column';
3
+ export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
4
+ export type AlignItemsOptionType = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
5
+ export type JustifyContentOptionType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
6
+ export type PositionOptionType = 'relative' | 'absolute';
7
+ export interface NavigationBarColorStyleGenerated {
8
+ flexDirection?: FlexDirectionOptionType;
9
+ flexWrap?: FlexWrapOptionType;
10
+ alignItems?: AlignItemsOptionType;
11
+ justifyContent?: JustifyContentOptionType;
12
+ gap?: string;
13
+ padding?: string;
14
+ paddingHorizontal?: string;
15
+ paddingVertical?: string;
16
+ paddingTop?: string;
17
+ paddingBottom?: string;
18
+ paddingLeft?: string;
19
+ paddingRight?: string;
20
+ margin?: string;
21
+ marginHorizontal?: string;
22
+ marginVertical?: string;
23
+ marginTop?: string;
24
+ marginBottom?: string;
25
+ marginLeft?: string;
26
+ marginRight?: string;
27
+ backgroundColor?: string;
28
+ borderRadius?: string;
29
+ width?: string;
30
+ minWidth?: string;
31
+ maxWidth?: string;
32
+ height?: string;
33
+ minHeight?: string;
34
+ maxHeight?: string;
35
+ flex?: number;
36
+ position?: PositionOptionType;
37
+ top?: string;
38
+ bottom?: string;
39
+ left?: string;
40
+ right?: string;
41
+ zIndex?: number;
42
+ }
43
+ export interface NavigationBarColorPropsGenerated {
44
+ child: string;
45
+ attributes: {
46
+ style?: NavigationBarColorStyleGenerated;
47
+ scrollable?: boolean;
48
+ title?: string;
49
+ description?: string;
50
+ };
51
+ }
52
+ export interface NavigationBarColorComponentProps {
53
+ node: NodeData<NavigationBarColorPropsGenerated['attributes']>;
54
+ }
@@ -6,6 +6,7 @@ export type AlignItemsOptionType = 'flex-start' | 'center' | 'flex-end' | 'stret
6
6
  export type JustifyContentOptionType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
7
7
  export type PositionOptionType = 'relative' | 'absolute';
8
8
  export interface OnboardImageStyleGenerated {
9
+ resizeMode?: ResizeModeOptionType;
9
10
  flexDirection?: FlexDirectionOptionType;
10
11
  flexWrap?: FlexWrapOptionType;
11
12
  alignItems?: AlignItemsOptionType;
@@ -48,9 +49,6 @@ export interface OnboardImagePropsGenerated {
48
49
  title?: string;
49
50
  description?: string;
50
51
  src?: string;
51
- width?: string;
52
- height?: string;
53
- resizeMode?: ResizeModeOptionType;
54
52
  scrollable?: boolean;
55
53
  video_url?: string;
56
54
  lottie?: string;
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import type { SeparatorComponentProps } from './SeparatorProps.generated';
3
+ declare function Separator({ node }: SeparatorComponentProps): import("react/jsx-runtime").JSX.Element;
4
+ declare const _default: React.MemoExoticComponent<typeof Separator>;
5
+ export default _default;
@@ -0,0 +1,21 @@
1
+ import type { NodeData } from '../../types/Node';
2
+ export interface SeparatorStyleGenerated {
3
+ backgroundColor?: string;
4
+ width?: string;
5
+ height?: string;
6
+ marginHorizontal?: string;
7
+ marginVertical?: string;
8
+ marginTop?: string;
9
+ marginBottom?: string;
10
+ }
11
+ export interface SeparatorPropsGenerated {
12
+ child: string;
13
+ attributes: {
14
+ style?: SeparatorStyleGenerated;
15
+ title?: string;
16
+ description?: string;
17
+ };
18
+ }
19
+ export interface SeparatorComponentProps {
20
+ node: NodeData<SeparatorPropsGenerated['attributes']>;
21
+ }
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import type { StatusBarColorComponentProps } from './StatusBarColorProps.generated';
3
+ declare function StatusBarColor({ node }: StatusBarColorComponentProps): null;
4
+ declare const _default: React.MemoExoticComponent<typeof StatusBarColor>;
5
+ export default _default;
@@ -0,0 +1,54 @@
1
+ import type { NodeData } from '../../types/Node';
2
+ export type FlexDirectionOptionType = 'row' | 'column';
3
+ export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
4
+ export type AlignItemsOptionType = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
5
+ export type JustifyContentOptionType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
6
+ export type PositionOptionType = 'relative' | 'absolute';
7
+ export interface StatusBarColorStyleGenerated {
8
+ flexDirection?: FlexDirectionOptionType;
9
+ flexWrap?: FlexWrapOptionType;
10
+ alignItems?: AlignItemsOptionType;
11
+ justifyContent?: JustifyContentOptionType;
12
+ gap?: string;
13
+ padding?: string;
14
+ paddingHorizontal?: string;
15
+ paddingVertical?: string;
16
+ paddingTop?: string;
17
+ paddingBottom?: string;
18
+ paddingLeft?: string;
19
+ paddingRight?: string;
20
+ margin?: string;
21
+ marginHorizontal?: string;
22
+ marginVertical?: string;
23
+ marginTop?: string;
24
+ marginBottom?: string;
25
+ marginLeft?: string;
26
+ marginRight?: string;
27
+ backgroundColor?: string;
28
+ borderRadius?: string;
29
+ width?: string;
30
+ minWidth?: string;
31
+ maxWidth?: string;
32
+ height?: string;
33
+ minHeight?: string;
34
+ maxHeight?: string;
35
+ flex?: number;
36
+ position?: PositionOptionType;
37
+ top?: string;
38
+ bottom?: string;
39
+ left?: string;
40
+ right?: string;
41
+ zIndex?: number;
42
+ }
43
+ export interface StatusBarColorPropsGenerated {
44
+ child: string;
45
+ attributes: {
46
+ style?: StatusBarColorStyleGenerated;
47
+ scrollable?: boolean;
48
+ title?: string;
49
+ description?: string;
50
+ };
51
+ }
52
+ export interface StatusBarColorComponentProps {
53
+ node: NodeData<StatusBarColorPropsGenerated['attributes']>;
54
+ }
@@ -1,6 +1,6 @@
1
1
  export { default as RenderNode } from './RenderNode.generated';
2
2
  export { patterns } from './patterns.generated';
3
- export declare const allcomponentNames: readonly ["BIcon", "BackgroundImage", "Button", "Carousel", "CarouselButtons", "CarouselDots", "CarouselItem", "CarouselProvider", "CountDown", "Counter", "Image", "Main", "Onboard", "OnboardButton", "OnboardButtons", "OnboardDot", "OnboardFooter", "OnboardImage", "OnboardItem", "OnboardProvider", "OnboardSubtitle", "OnboardTitle", "PaywallBackground", "PaywallCloseButton", "PaywallCounter", "PaywallOptions", "PaywallProvider", "PaywallSubscribeButton", "RadioButton", "Text", "View"];
3
+ export declare const allcomponentNames: readonly ["BIcon", "BackgroundImage", "Button", "Carousel", "CarouselButtons", "CarouselDots", "CarouselItem", "CarouselProvider", "CountDown", "Counter", "Image", "Main", "NavigationBarColor", "Onboard", "OnboardButton", "OnboardButtons", "OnboardDot", "OnboardFooter", "OnboardImage", "OnboardItem", "OnboardProvider", "OnboardSubtitle", "OnboardTitle", "PaywallBackground", "PaywallCloseButton", "PaywallCounter", "PaywallOptions", "PaywallProvider", "PaywallSubscribeButton", "RadioButton", "Separator", "StatusBarColor", "Text", "View"];
4
4
  export type { BIconPropsGenerated, BIconComponentProps, } from './BIcon/BIconProps.generated';
5
5
  export type { BackgroundImagePropsGenerated, BackgroundImageComponentProps, } from './BackgroundImage/BackgroundImageProps.generated';
6
6
  export type { ButtonPropsGenerated, ButtonComponentProps, } from './Button/ButtonProps.generated';
@@ -13,6 +13,7 @@ export type { CountDownPropsGenerated, CountDownComponentProps, } from './CountD
13
13
  export type { CounterPropsGenerated, CounterComponentProps, } from './Counter/CounterProps.generated';
14
14
  export type { ImagePropsGenerated, ImageComponentProps, } from './Image/ImageProps.generated';
15
15
  export type { MainPropsGenerated, MainComponentProps, } from './Main/MainProps.generated';
16
+ export type { NavigationBarColorPropsGenerated, NavigationBarColorComponentProps, } from './NavigationBarColor/NavigationBarColorProps.generated';
16
17
  export type { OnboardPropsGenerated, OnboardComponentProps, } from './Onboard/OnboardProps.generated';
17
18
  export type { OnboardButtonPropsGenerated, OnboardButtonComponentProps, } from './OnboardButton/OnboardButtonProps.generated';
18
19
  export type { OnboardButtonsPropsGenerated, OnboardButtonsComponentProps, } from './OnboardButtons/OnboardButtonsProps.generated';
@@ -30,5 +31,7 @@ export type { PaywallOptionsPropsGenerated, PaywallOptionsComponentProps, } from
30
31
  export type { PaywallProviderPropsGenerated, PaywallProviderComponentProps, } from './PaywallProvider/PaywallProviderProps.generated';
31
32
  export type { PaywallSubscribeButtonPropsGenerated, PaywallSubscribeButtonComponentProps, } from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
32
33
  export type { RadioButtonPropsGenerated, RadioButtonComponentProps, } from './RadioButton/RadioButtonProps.generated';
34
+ export type { SeparatorPropsGenerated, SeparatorComponentProps, } from './Separator/SeparatorProps.generated';
35
+ export type { StatusBarColorPropsGenerated, StatusBarColorComponentProps, } from './StatusBarColor/StatusBarColorProps.generated';
33
36
  export type { TextPropsGenerated, TextComponentProps, } from './Text/TextProps.generated';
34
37
  export type { ViewPropsGenerated, ViewComponentProps, } from './View/ViewProps.generated';