@developer_tribe/react-builder 1.2.7 → 1.2.9

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -19,50 +19,54 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface OnboardFooterStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface OnboardFooterPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
+    style?: OnboardFooterStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
     textLocalizationKey?: string;
     linkedWordFirstLocalizationKey?: string;
     linkedWordFirstColor?: string;

package/src/build-components/OnboardFooter/pattern.json

@@ -26,6 +26,22 @@
     "label": "Onboard Footer",
     "description": "Footer text with optional links.",
     "styles": {
+      "linkedWordFirstColor": {
+        "label": "Linked Word First Color",
+        "description": "Color of the first linked word.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "linkedWordSecondColor": {
+        "label": "Linked Word Second Color",
+        "description": "Color of the second linked word.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 6
+      }
+    },
+    "attributes": {
       "textLocalizationKey": {
         "label": "Text Localization Key",
         "description": "Localization key for the footer text.",
@@ -40,13 +56,6 @@
         "specialCategory": null,
         "sort": 2
       },
-      "linkedWordFirstColor": {
-        "label": "Linked Word First Color",
-        "description": "Color of the first linked word.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 3
-      },
       "linkedWordFirstPage": {
         "label": "Linked Word First Page",
         "description": "Page opened by the first link.",
@@ -61,13 +70,6 @@
         "specialCategory": null,
         "sort": 5
       },
-      "linkedWordSecondColor": {
-        "label": "Linked Word Second Color",
-        "description": "Color of the second linked word.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 6
-      },
       "linkedWordSecondPage": {
         "label": "Linked Word Second Page",
         "description": "Page opened by the second link.",

package/src/build-components/OnboardImage/OnboardImage.tsx

@@ -5,7 +5,7 @@ import type { ImageComponentProps } from '../Image/ImageProps.generated';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
   useLogRender('OnboardImage');
@@ -15,16 +15,17 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const [lottie, setLottie] = useState<string | null>(null);
   const viewStyle = useExtractViewStyle(node);
+  const attrs = node.attributes;
 
   useEffect(() => {
-    if (node.attributes?.lottie) {
-      fetch(node.attributes?.lottie)
+    if (attrs?.lottie) {
+      fetch(attrs?.lottie)
         .then((res) => res.json())
         .then((data) => setLottie(data));
     }
-  }, [node.attributes?.lottie]);
+  }, [attrs?.lottie]);
 
-  if (node.attributes?.video_url) {
+  if (attrs?.video_url) {
     return (
       <video
         attribute-name={attributeName}
@@ -32,13 +33,13 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
         autoPlay
         muted
         loop
-        src={node.attributes?.video_url}
+        src={attrs?.video_url}
         style={viewStyle}
       />
     );
   }
 
-  if (node.attributes?.lottie) {
+  if (attrs?.lottie) {
     if (lottie) {
       return (
         <div

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -19,45 +19,51 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface OnboardImageStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface OnboardImagePropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: OnboardImageStyleGenerated;
     src?: string;
     width?: string;
     height?: string;
     resizeMode?: ResizeModeOptionType;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
     video_url?: string;
     lottie?: string;
   };

package/src/build-components/OnboardImage/pattern.json

@@ -17,7 +17,8 @@
     ],
     "label": "Onboard Image",
     "description": "Onboarding hero image with media.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "video_url": {
         "label": "Video Url",
         "description": "URL for the onboarding video.",

package/src/build-components/OnboardItem/OnboardItem.tsx

@@ -3,7 +3,7 @@ import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import RenderNode from '../RenderNode.generated';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
   useLogRender('OnboardItem');

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type DisplayOptionType = 'flex' | 'block';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,46 +18,52 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type DisplayOptionType = 'flex' | 'block';
+
+export interface OnboardItemStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
 
 export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: OnboardItemStyleGenerated;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
+    display?: DisplayOptionType;
     gap?: string;
-    padding?: string;
+    flexDirection?: FlexDirectionOptionType;
     paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
-    display?: DisplayOptionType;
   };
 }
 

package/src/build-components/OnboardItem/pattern.json

@@ -31,7 +31,8 @@
     ],
     "label": "Onboard Item",
     "description": "Single onboarding screen section.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "display": {
         "label": "Display",
         "description": "Controls layout display mode.",

package/src/build-components/OnboardProvider/OnboardProvider.tsx

@@ -12,7 +12,7 @@ import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ThemeOptionType = 'light' | 'dark' | 'all';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,46 +18,50 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ThemeOptionType = 'light' | 'dark' | 'all';
+
+export interface OnboardProviderStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
 
 export interface OnboardProviderPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: OnboardProviderStyleGenerated;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: never;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
     theme?: ThemeOptionType;
+    borderRadius?: never;
   };
 }
 

package/src/build-components/OnboardProvider/pattern.json

@@ -25,7 +25,8 @@
     ],
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "theme": {
         "label": "Theme",
         "description": "Controls which app theme(s) this onboarding is intended for.",

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -19,50 +19,54 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface OnboardSubtitleStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface OnboardSubtitlePropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
+    style?: OnboardSubtitleStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
   };
 }
 

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -19,50 +19,54 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface OnboardTitleStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface OnboardTitlePropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
+    style?: OnboardTitleStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
   };
 }