@developer_tribe/react-builder 1.2.6 → 1.2.8

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -33,49 +33,53 @@ export interface EventObjectGenerated {
   targetIndex?: number;
 }
 
+export interface OnboardButtonStyleGenerated {
+  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;
+  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;
+  labelKey?: string;
+  button_text_color?: string;
+  animation?: AnimationOptionType;
+  animation_color?: string;
+  button_background_color?: string;
+  events?: EventObjectGenerated[];
+}
+
 export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    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;
-    labelKey?: string;
-    button_text_color?: string;
-    animation?: AnimationOptionType;
-    animation_color?: string;
-    button_background_color?: string;
-    events?: EventObjectGenerated[];
+    style?: OnboardButtonStyleGenerated;
   };
 }
 

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

@@ -27,9 +27,9 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   }, [ctx.selectedIndex]);
 
   const direction =
-    node.attributes?.buttons_direction === 'column' ? 'column' : 'row';
+    node.attributes?.style?.buttons_direction === 'column' ? 'column' : 'row';
   const seperatorColor =
-    node.attributes?.seperatorColor ?? seperatorColorDefault;
+    node.attributes?.style?.seperatorColor ?? seperatorColorDefault;
 
   const renderChildren = () => {
     if (Array.isArray(node.children)) {
@@ -47,8 +47,8 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   const generatedId = useId();
 
   // New condition logic: hide when condition is carousel-index and does not match
-  const condition = (node.attributes as any)?.condition;
-  const conditionVariable = (node.attributes as any)?.conditionVariable;
+  const condition = (node.attributes?.style as any)?.condition;
+  const conditionVariable = (node.attributes?.style as any)?.conditionVariable;
   const shouldHide =
     condition === 'carousel-index' &&
     typeof conditionVariable === 'number' &&

package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts

@@ -24,50 +24,54 @@ export type ButtonTypeOptionType =
 export type ButtonsDirectionOptionType = 'row' | 'column';
 export type ConditionOptionType = 'carousel-index';
 
+export interface OnboardButtonsStyleGenerated {
+  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;
+  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;
+  buttonType?: ButtonTypeOptionType;
+  skipNumber?: number;
+  buttons_direction?: ButtonsDirectionOptionType;
+  forIndex?: number;
+  seperatorColor?: string;
+  condition?: ConditionOptionType;
+  conditionVariable?: number;
+}
+
 export interface OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    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;
-    buttonType?: ButtonTypeOptionType;
-    skipNumber?: number;
-    buttons_direction?: ButtonsDirectionOptionType;
-    forIndex?: number;
-    seperatorColor?: string;
-    condition?: ConditionOptionType;
-    conditionVariable?: number;
+    style?: OnboardButtonsStyleGenerated;
   };
 }
 

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

@@ -19,7 +19,8 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const generatedId = useId();
   const attributeName = node.type ?? 'OnboardDot';
   const attributeKey = node.key ?? generatedId;
-  const dotType = node.attributes?.dotType || 'normal_dot';
+  const styleBag = node.attributes?.style;
+  const dotType = styleBag?.dotType || 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
@@ -35,8 +36,8 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const inactiveDotColor = isDark
     ? GHOST_DOT_DARK_COLOR
     : GHOST_DOT_LIGHT_COLOR;
-  const inactiveDotOpacity = node.attributes?.inactive_dot_opacity ?? 0.3;
-  const activeDotColor = node.attributes?.active_dot_color;
+  const inactiveDotOpacity = styleBag?.inactive_dot_opacity ?? 0.3;
+  const activeDotColor = styleBag?.active_dot_color;
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
     [activeDotColor, appConfig.theme, projectColors],
@@ -56,7 +57,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const expandingDotWidthRaw = node.attributes?.expanding_dot_width;
+  const expandingDotWidthRaw = styleBag?.expanding_dot_width;
   const expandingDotWidthOverride = useMemo(() => {
     const parsed = parseSize(expandingDotWidthRaw);
     if (parsed === undefined) return undefined;

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -11,47 +11,51 @@ export type DotTypeOptionType =
   | 'sliding_dot'
   | 'liquid_like';
 
+export interface OnboardDotStyleGenerated {
+  scrollable?: boolean;
+  flexDirection?: never;
+  alignItems?: never;
+  justifyContent?: never;
+  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;
+  dotType?: DotTypeOptionType;
+  inactive_dot_opacity?: number;
+  expanding_dot_width?: string;
+  active_dot_color?: string;
+}
+
 export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    scrollable?: boolean;
-    flexDirection?: never;
-    alignItems?: never;
-    justifyContent?: never;
-    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;
-    dotType?: DotTypeOptionType;
-    inactive_dot_opacity?: number;
-    expanding_dot_width?: string;
-    active_dot_color?: string;
+    style?: OnboardDotStyleGenerated;
   };
 }
 

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

@@ -104,7 +104,8 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
-  const text = t(node?.attributes?.textLocalizationKey);
+  const styleBag = node?.attributes?.style;
+  const text = t(styleBag?.textLocalizationKey);
   const textStyle = useExtractTextStyle(node);
   const viewStyle = useExtractViewStyle(node);
 
@@ -113,7 +114,7 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     cursor: color ? 'pointer' : undefined,
   });
 
-  const paddingHorizontal = parseSize(node?.attributes?.paddingHorizontal);
+  const paddingHorizontal = parseSize(styleBag?.paddingHorizontal);
   const layoutStyle = useMemo<React.CSSProperties>(
     () => ({
       paddingLeft: paddingHorizontal,
@@ -141,24 +142,22 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     >
       {!!text &&
         (() => {
-          const firstText = t(node?.attributes?.linkedWordFirstLocalizationKey);
-          const secondText = t(
-            node?.attributes?.linkedWordSecondLocalizationKey,
-          );
+          const firstText = t(styleBag?.linkedWordFirstLocalizationKey);
+          const secondText = t(styleBag?.linkedWordSecondLocalizationKey);
           const { segments, matchCount } = buildSegments(text, [
             {
               value: firstText,
-              color: node?.attributes?.linkedWordFirstColor,
-              page: (node?.attributes as any)?.linkedWordFirstPage,
+              color: styleBag?.linkedWordFirstColor,
+              page: (styleBag as any)?.linkedWordFirstPage,
             },
             {
               value: secondText,
-              color: node?.attributes?.linkedWordSecondColor,
-              page: (node?.attributes as any)?.linkedWordSecondPage,
+              color: styleBag?.linkedWordSecondColor,
+              page: (styleBag as any)?.linkedWordSecondPage,
             },
           ]);
 
-          const textColor = node?.attributes?.color;
+          const textColor = styleBag?.color;
 
           const handleClick = (page?: string) => {
             if (!page) return;
@@ -183,25 +182,21 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
               </p>
               {matchCount === 0 && (
                 <div>
-                  {node?.attributes?.linkedWordFirstLocalizationKey && (
+                  {styleBag?.linkedWordFirstLocalizationKey && (
                     <span
-                      style={linkStyle(node?.attributes?.linkedWordFirstColor)}
+                      style={linkStyle(styleBag?.linkedWordFirstColor)}
                       onClick={() =>
-                        handleClick(
-                          (node?.attributes as any)?.linkedWordFirstPage,
-                        )
+                        handleClick((styleBag as any)?.linkedWordFirstPage)
                       }
                     >
                       {firstText}
                     </span>
                   )}
-                  {node?.attributes?.linkedWordSecondLocalizationKey && (
+                  {styleBag?.linkedWordSecondLocalizationKey && (
                     <span
-                      style={linkStyle(node?.attributes?.linkedWordSecondColor)}
+                      style={linkStyle(styleBag?.linkedWordSecondColor)}
                       onClick={() =>
-                        handleClick(
-                          (node?.attributes as any)?.linkedWordSecondPage,
-                        )
+                        handleClick((styleBag as any)?.linkedWordSecondPage)
                       }
                     >
                       {secondText}

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

@@ -19,57 +19,61 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface OnboardFooterStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  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;
+  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;
+  textLocalizationKey?: string;
+  linkedWordFirstLocalizationKey?: string;
+  linkedWordFirstColor?: string;
+  linkedWordFirstPage?: string;
+  linkedWordSecondLocalizationKey?: string;
+  linkedWordSecondColor?: string;
+  linkedWordSecondPage?: string;
+}
+
 export interface OnboardFooterPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
-    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;
-    linkedWordFirstPage?: string;
-    linkedWordSecondLocalizationKey?: string;
-    linkedWordSecondColor?: string;
-    linkedWordSecondPage?: string;
+    style?: OnboardFooterStyleGenerated;
   };
 }
 

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

@@ -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 styleBag = node.attributes?.style;
 
   useEffect(() => {
-    if (node.attributes?.lottie) {
-      fetch(node.attributes?.lottie)
+    if (styleBag?.lottie) {
+      fetch(styleBag?.lottie)
         .then((res) => res.json())
         .then((data) => setLottie(data));
     }
-  }, [node.attributes?.lottie]);
+  }, [styleBag?.lottie]);
 
-  if (node.attributes?.video_url) {
+  if (styleBag?.video_url) {
     return (
       <video
         attribute-name={attributeName}
@@ -32,13 +33,13 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
         autoPlay
         muted
         loop
-        src={node.attributes?.video_url}
+        src={styleBag?.video_url}
         style={viewStyle}
       />
     );
   }
 
-  if (node.attributes?.lottie) {
+  if (styleBag?.lottie) {
     if (lottie) {
       return (
         <div

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

@@ -19,47 +19,51 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface OnboardImageStyleGenerated {
+  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;
+  marginHorizontal?: 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;
+}
+
 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;
   };
 }