@developer_tribe/react-builder 1.2.7 → 1.2.9

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

@@ -4,6 +4,12 @@ import type { NodeData } from '../../types/Node';
 
 export type TypeOptionType = 'Permission' | 'Navigate';
 export type PermissionOptionType = 'att' | 'notification' | 'rating' | 'GDPR';
+export type AnimationOptionType =
+  | 'simple-animation'
+  | 'line-animation'
+  | 'blur'
+  | 'blur-animation'
+  | 'blur-line-animation';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -19,12 +25,6 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type AnimationOptionType =
-  | 'simple-animation'
-  | 'line-animation'
-  | 'blur'
-  | 'blur-animation'
-  | 'blur-line-animation';
 
 export interface EventObjectGenerated {
   type?: TypeOptionType;
@@ -33,48 +33,53 @@ export interface EventObjectGenerated {
   targetIndex?: number;
 }
 
+export interface OnboardButtonStyleGenerated {
+  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 OnboardButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: 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;
-    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;
+    flex?: number;
     events?: EventObjectGenerated[];
   };
 }

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

@@ -44,13 +44,6 @@
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
     "styles": {
-      "labelKey": {
-        "label": "Label Key",
-        "description": "Localization key for the button text.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 1
-      },
       "button_text_color": {
         "label": "Button Text Color",
         "description": "Text color of the button.",
@@ -78,6 +71,15 @@
         "category": "style",
         "specialCategory": null,
         "sort": 5
+      }
+    },
+    "attributes": {
+      "labelKey": {
+        "label": "Label Key",
+        "description": "Localization key for the button text.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
       },
       "flex": {
         "label": "Flex",

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useId, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
@@ -6,7 +6,7 @@ import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
@@ -26,19 +26,31 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     }
   }, [ctx.selectedIndex]);
 
+  const attributes = node.attributes as any;
+  const styleBag = attributes?.style as Record<string, unknown> | undefined as
+    | Record<string, unknown>
+    | undefined;
   const direction =
-    node.attributes?.buttons_direction === 'column' ? 'column' : 'row';
+    (attributes?.buttons_direction ?? (styleBag as any)?.buttons_direction) ===
+    'column'
+      ? 'column'
+      : 'row';
   const seperatorColor =
-    node.attributes?.seperatorColor ?? seperatorColorDefault;
+    attributes?.seperatorColor ??
+    (styleBag as any)?.seperatorColor ??
+    seperatorColorDefault;
+  const buttonsClassName =
+    direction === 'column'
+      ? 'onboard__buttons onboard__buttons--column'
+      : 'onboard__buttons onboard__buttons--row';
 
-  const renderChildren = () => {
-    if (Array.isArray(node.children)) {
-      return (node.children as Node[]).map((child, idx) => (
-        <RenderNode key={idx} node={child} />
-      ));
+  const children = useMemo(() => {
+    const raw = node.children as unknown;
+    if (Array.isArray(raw)) {
+      return raw as Node[];
     }
-    return <RenderNode node={node.children as Node} />;
-  };
+    return [raw as Node];
+  }, [node.children]);
 
   const viewStyle = useExtractViewStyle(node);
 
@@ -47,8 +59,9 @@ 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 = attributes?.condition ?? (styleBag as any)?.condition;
+  const conditionVariable =
+    attributes?.conditionVariable ?? (styleBag as any)?.conditionVariable;
   const shouldHide =
     condition === 'carousel-index' &&
     typeof conditionVariable === 'number' &&
@@ -66,25 +79,12 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     >
       <div
         className="onboard__separator"
-        style={{
-          height: 1,
-          backgroundColor: seperatorColor,
-          width: '100%',
-        }}
+        style={seperatorColor ? { backgroundColor: seperatorColor } : undefined}
       />
-      <div
-        className="onboard__buttons"
-        style={{
-          display: 'flex',
-          flexDirection: direction as any,
-          height: 40,
-          gap: 12,
-          alignItems: 'center',
-          justifyContent: 'center',
-          margin: '12px 24px',
-        }}
-      >
-        {renderChildren()}
+      <div className={buttonsClassName}>
+        {children.map((child, idx) => (
+          <RenderNode key={(child as any)?.key ?? idx} node={child} />
+        ))}
       </div>
     </div>
   );

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

@@ -2,6 +2,12 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ButtonTypeOptionType =
+  | 'previous_button'
+  | 'next_button'
+  | 'skip_button';
+export type ButtonsDirectionOptionType = 'row' | 'column';
+export type ConditionOptionType = 'carousel-index';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,50 +23,48 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ButtonTypeOptionType =
-  | 'previous_button'
-  | 'next_button'
-  | 'skip_button';
-export type ButtonsDirectionOptionType = 'row' | 'column';
-export type ConditionOptionType = 'carousel-index';
+
+export interface OnboardButtonsStyleGenerated {
+  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 OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: 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;
-    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;

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

@@ -30,6 +30,15 @@
     "label": "Onboard Buttons",
     "description": "Wrapper for onboarding button set.",
     "styles": {
+      "seperatorColor": {
+        "label": "Seperator Color",
+        "description": "Color of the divider line.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      }
+    },
+    "attributes": {
       "buttonType": {
         "label": "Button Type",
         "description": "Which onboard button to show.",
@@ -58,13 +67,6 @@
         "specialCategory": null,
         "sort": 4
       },
-      "seperatorColor": {
-        "label": "Seperator Color",
-        "description": "Color of the divider line.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 5
-      },
       "condition": {
         "label": "Condition",
         "description": "Built-in condition to check.",

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

@@ -3,7 +3,7 @@ import type { OnboardDotComponentProps } from './OnboardDotProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -19,7 +19,9 @@ 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 attrs = node.attributes;
+  const styleBag = attrs?.style;
+  const dotType = attrs?.dotType || 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
@@ -35,8 +37,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 = attrs?.inactive_dot_opacity ?? 0.3;
+  const activeDotColor = attrs?.active_dot_color;
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
     [activeDotColor, appConfig.theme, projectColors],
@@ -56,7 +58,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const expandingDotWidthRaw = node.attributes?.expanding_dot_width;
+  const expandingDotWidthRaw = attrs?.expanding_dot_width;
   const expandingDotWidthOverride = useMemo(() => {
     const parsed = parseSize(expandingDotWidthRaw);
     if (parsed === undefined) return undefined;

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

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type PositionOptionType = 'relative' | 'absolute';
 export type DotTypeOptionType =
   | 'expanding_dot'
   | 'normal_dot'
@@ -10,48 +9,70 @@ export type DotTypeOptionType =
   | 'sliding_border'
   | 'sliding_dot'
   | 'liquid_like';
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface OnboardDotStyleGenerated {
+  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 OnboardDotPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
+    style?: 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;
-    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;
+    flexDirection?: never;
+    alignItems?: never;
+    justifyContent?: never;
   };
 }
 

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

@@ -3,8 +3,8 @@ import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { parseSize } from '../../size-matters';
-import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -104,7 +104,9 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
-  const text = t(node?.attributes?.textLocalizationKey);
+  const attrs = node?.attributes;
+  const styleBag = attrs?.style;
+  const text = t(attrs?.textLocalizationKey);
   const textStyle = useExtractTextStyle(node);
   const viewStyle = useExtractViewStyle(node);
 
@@ -113,7 +115,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 +143,22 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     >
       {!!text &&
         (() => {
-          const firstText = t(node?.attributes?.linkedWordFirstLocalizationKey);
-          const secondText = t(
-            node?.attributes?.linkedWordSecondLocalizationKey,
-          );
+          const firstText = t(attrs?.linkedWordFirstLocalizationKey);
+          const secondText = t(attrs?.linkedWordSecondLocalizationKey);
           const { segments, matchCount } = buildSegments(text, [
             {
               value: firstText,
-              color: node?.attributes?.linkedWordFirstColor,
-              page: (node?.attributes as any)?.linkedWordFirstPage,
+              color: attrs?.linkedWordFirstColor,
+              page: (attrs as any)?.linkedWordFirstPage,
             },
             {
               value: secondText,
-              color: node?.attributes?.linkedWordSecondColor,
-              page: (node?.attributes as any)?.linkedWordSecondPage,
+              color: attrs?.linkedWordSecondColor,
+              page: (attrs as any)?.linkedWordSecondPage,
             },
           ]);
 
-          const textColor = node?.attributes?.color;
+          const textColor = styleBag?.color;
 
           const handleClick = (page?: string) => {
             if (!page) return;
@@ -183,25 +183,21 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
               </p>
               {matchCount === 0 && (
                 <div>
-                  {node?.attributes?.linkedWordFirstLocalizationKey && (
+                  {attrs?.linkedWordFirstLocalizationKey && (
                     <span
-                      style={linkStyle(node?.attributes?.linkedWordFirstColor)}
+                      style={linkStyle(attrs?.linkedWordFirstColor)}
                       onClick={() =>
-                        handleClick(
-                          (node?.attributes as any)?.linkedWordFirstPage,
-                        )
+                        handleClick((attrs as any)?.linkedWordFirstPage)
                       }
                     >
                       {firstText}
                     </span>
                   )}
-                  {node?.attributes?.linkedWordSecondLocalizationKey && (
+                  {attrs?.linkedWordSecondLocalizationKey && (
                     <span
-                      style={linkStyle(node?.attributes?.linkedWordSecondColor)}
+                      style={linkStyle(attrs?.linkedWordSecondColor)}
                       onClick={() =>
-                        handleClick(
-                          (node?.attributes as any)?.linkedWordSecondPage,
-                        )
+                        handleClick((attrs as any)?.linkedWordSecondPage)
                       }
                     >
                       {secondText}