@developer_tribe/react-builder 1.2.22 → 1.2.23

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 (100) hide show
  1. package/dist/attribute-analyser/style/native/useExtractImageStyle.d.ts +2 -2
  2. package/dist/build-components/Image/ImageProps.generated.d.ts +2 -4
  3. package/dist/build-components/NavigationBarColor/NavigationBarColor.d.ts +5 -0
  4. package/dist/build-components/NavigationBarColor/NavigationBarColorProps.generated.d.ts +54 -0
  5. package/dist/build-components/OnboardImage/OnboardImageProps.generated.d.ts +1 -3
  6. package/dist/build-components/Separator/Separator.d.ts +5 -0
  7. package/dist/build-components/Separator/SeparatorProps.generated.d.ts +21 -0
  8. package/dist/build-components/StatusBarColor/StatusBarColor.d.ts +5 -0
  9. package/dist/build-components/StatusBarColor/StatusBarColorProps.generated.d.ts +54 -0
  10. package/dist/build-components/index.d.ts +4 -1
  11. package/dist/build-components/patterns.generated.d.ts +2105 -1253
  12. package/dist/components/AttributesEditorPanel.d.ts +1 -1
  13. package/dist/components/BuilderProvider.d.ts +1 -1
  14. package/dist/index.cjs.js +4 -4
  15. package/dist/index.cjs.js.map +1 -1
  16. package/dist/index.esm.js +4 -4
  17. package/dist/index.esm.js.map +1 -1
  18. package/dist/index.web.cjs.js +6 -6
  19. package/dist/index.web.cjs.js.map +1 -1
  20. package/dist/index.web.esm.js +4 -4
  21. package/dist/index.web.esm.js.map +1 -1
  22. package/dist/store.d.ts +4 -0
  23. package/dist/styles.css +1 -1
  24. package/dist/utils/attributeStyle.d.ts +9 -0
  25. package/dist/utils/extractImageStyle.d.ts +1 -1
  26. package/dist/utils/extractViewStyle/extractViewStyleNative.d.ts +1 -1
  27. package/package.json +2 -2
  28. package/src/DeviceMockFrame.tsx +8 -2
  29. package/src/assets/meta.json +1 -1
  30. package/src/assets/samples/paywall-1.json +39 -34
  31. package/src/assets/samples/paywall-2.json +39 -20
  32. package/src/assets/samples/paywall-app-delete-offer.json +40 -21
  33. package/src/assets/samples/paywall-app-open-offer.json +40 -21
  34. package/src/assets/samples/paywall-back-offer.json +40 -21
  35. package/src/assets/samples/paywall-notification-offer.json +40 -21
  36. package/src/assets/samples/vpn-onboard-1.json +84 -39
  37. package/src/assets/samples/vpn-onboard-2.json +85 -40
  38. package/src/assets/samples/vpn-onboard-3.json +84 -39
  39. package/src/assets/samples/vpn-onboard-4.json +84 -39
  40. package/src/assets/samples/vpn-onboard-5.json +102 -55
  41. package/src/assets/samples/vpn-onboard-6.json +87 -38
  42. package/src/attribute-analyser/style/native/useExtractImageStyle.ts +24 -22
  43. package/src/attribute-analyser/style/native/useExtractTextStyle.ts +9 -4
  44. package/src/attribute-analyser/style/native/useExtractViewStyle.ts +19 -7
  45. package/src/attributes-editor/useAttributesEditorModel.ts +23 -17
  46. package/src/build-components/BackgroundImage/pattern.json +9 -7
  47. package/src/build-components/CarouselDots/CarouselDots.tsx +12 -11
  48. package/src/build-components/CarouselProvider/CarouselProvider.tsx +3 -1
  49. package/src/build-components/Image/ImageProps.generated.ts +2 -4
  50. package/src/build-components/Image/pattern.json +12 -25
  51. package/src/build-components/NavigationBarColor/NavigationBarColor.tsx +39 -0
  52. package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts +71 -0
  53. package/src/build-components/NavigationBarColor/pattern.json +34 -0
  54. package/src/build-components/OnboardButtons/OnboardButtons.tsx +8 -10
  55. package/src/build-components/OnboardDot/OnboardDot.tsx +12 -10
  56. package/src/build-components/OnboardImage/OnboardImage.tsx +1 -1
  57. package/src/build-components/OnboardImage/OnboardImageProps.generated.ts +1 -3
  58. package/src/build-components/OnboardProvider/OnboardProvider.tsx +3 -1
  59. package/src/build-components/RenderNode.generated.tsx +15 -0
  60. package/src/build-components/Separator/Separator.tsx +41 -0
  61. package/src/build-components/Separator/SeparatorProps.generated.ts +26 -0
  62. package/src/build-components/Separator/pattern.json +59 -0
  63. package/src/build-components/StatusBarColor/StatusBarColor.tsx +39 -0
  64. package/src/build-components/StatusBarColor/StatusBarColorProps.generated.ts +71 -0
  65. package/src/build-components/StatusBarColor/pattern.json +34 -0
  66. package/src/build-components/Text/pattern.json +45 -38
  67. package/src/build-components/index.ts +15 -0
  68. package/src/build-components/patterns.generated.ts +2149 -1272
  69. package/src/build-components/useNode.ts +24 -25
  70. package/src/components/AttributesEditorPanel.tsx +4 -5
  71. package/src/components/Builder.tsx +1 -2
  72. package/src/components/BuilderProvider.tsx +40 -3
  73. package/src/components/JsonTextEditor.tsx +2 -2
  74. package/src/components/LoadingComponent.tsx +1 -1
  75. package/src/components/RenderErrorBoundary.tsx +1 -3
  76. package/src/migrations/migrations/1.1.2_extract_component_attributes_from_style.ts +3 -3
  77. package/src/modals/BenefitPresetsModal.tsx +1 -1
  78. package/src/modals/ProductPresetsModal.tsx +1 -1
  79. package/src/pages/DebugJsonPage.tsx +7 -4
  80. package/src/pages/ProjectDebug.tsx +1 -1
  81. package/src/pages/ProjectPage.tsx +31 -32
  82. package/src/pages/ProjectValidationPage.tsx +2 -2
  83. package/src/store.ts +13 -0
  84. package/src/styles/layout/_builder.scss +6 -0
  85. package/src/utils/__special_exceptions.ts +5 -5
  86. package/src/utils/analyseNode.ts +2 -2
  87. package/src/utils/analyseNodeByPatterns.ts +10 -9
  88. package/src/utils/analyseNodeStructural.ts +1 -1
  89. package/src/utils/attributeStyle.ts +26 -0
  90. package/src/utils/extractImageStyle.ts +17 -13
  91. package/src/utils/extractTextStyle/extractTextStyle.ts +7 -7
  92. package/src/utils/extractTextStyle/extractTextStyleNative.ts +10 -10
  93. package/src/utils/extractViewStyle/extractViewStyle.ts +8 -11
  94. package/src/utils/extractViewStyle/extractViewStyleNative.ts +19 -19
  95. package/src/utils/loadFontFamily.ts +14 -19
  96. package/src/utils/logRenderStore.ts +5 -4
  97. package/src/utils/nodeTree.ts +1 -1
  98. package/src/utils/patterns.ts +26 -31
  99. package/src/utils/repairNodeKeys.ts +5 -7
  100. package/src/utils/wrapNodeInMain.ts +3 -3
@@ -1,10 +1,10 @@
1
1
  import type { NodeData } from '../../../types/Node';
2
- import type { ImagePropsGenerated } from '../../../build-components/Image/ImageProps.generated';
2
+ import type { ImagePropsGenerated, ResizeModeOptionType } from '../../../build-components/Image/ImageProps.generated';
3
3
  export declare function useExtractImageStyle<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>): {
4
4
  style: {
5
5
  [x: string]: unknown;
6
6
  };
7
7
  other: {
8
- resizeMode: "cover" | "contain" | "stretch" | "center" | undefined;
8
+ resizeMode: ResizeModeOptionType | undefined;
9
9
  };
10
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';