@developer_tribe/react-builder 1.2.23 → 1.2.25

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -217,6 +217,10 @@ export function useAttributesEditorModel({
   const componentTitle = componentMeta?.label ?? data?.type ?? 'Component';
   const componentDescription = componentMeta?.description;
 
+  const hasTitleField = patternForType?.pattern?.title === 'title';
+  const hasDescriptionField =
+    patternForType?.pattern?.description === 'description';
+
   const entries = useMemo(() => {
     return buildAttributesEditorEntries(schema, attributeMeta).filter(
       ({ type }) => (typeof type === 'string' ? type !== 'never' : true),
@@ -477,6 +481,8 @@ export function useAttributesEditorModel({
     mockableFeatureKeys,
     activeMockableFeature,
     setActiveMockableFeature,
+    hasTitleField,
+    hasDescriptionField,
     hasStringChildren,
     childrenValue,
   };

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -66,8 +66,6 @@ export interface BIconPropsGenerated {
   child: string;
   attributes: {
     style?: BIconStyleGenerated;
-    title?: string;
-    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;

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

@@ -2,18 +2,20 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "BIcon",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "Text",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "iconType": "iconType",
       "size": "number",
       "strokeWidth": "number"
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "BIcon",
     "description": "Renders an icon from the icon set.",
     "styles": {},

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -62,8 +62,6 @@ export interface BackgroundImagePropsGenerated {
   attributes: {
     style?: BackgroundImageStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     src?: string;
     resizeMode?: ResizeModeOptionType;
   };

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

@@ -2,13 +2,18 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "BackgroundImage",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "src": "string",
-      "resizeMode": ["cover", "contain", "stretch", "center"]
+      "resizeMode": [
+        "cover",
+        "contain",
+        "stretch",
+        "center"
+      ]
     },
     "defaults": {
       "resizeMode": "cover",
@@ -24,7 +29,10 @@
     }
   },
   "meta": {
-    "desiredParent": ["all", "background"],
+    "desiredParent": [
+      "all",
+      "background"
+    ],
     "label": "Background Image",
     "description": "Background image.",
     "styles": {

package/src/build-components/Button/ButtonProps.generated.ts

@@ -76,8 +76,6 @@ export interface ButtonPropsGenerated {
   attributes: {
     style?: ButtonStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
   };
 }
 

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "Button",
+    "title": "title",
+    "description": "description",
     "children": "string",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "style": {
         "color": "color",
         "fontSize": "size",
@@ -27,7 +27,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Button",
     "description": "Simple action button.",
     "styles": {

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -62,8 +62,6 @@ export interface CarouselPropsGenerated {
   attributes: {
     style?: CarouselStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     loop?: boolean;
     dragFree?: boolean;
     align?: AlignOptionType;

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

@@ -1,19 +1,25 @@
 {
   "schemaVersion": 2,
   "pattern": {
-    "extends": "View",
     "type": "Carousel",
+    "title": "title",
+    "description": "description",
+    "extends": "View",
     "children": "node",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "loop": "boolean",
       "dragFree": "boolean",
-      "align": ["start", "center", "end"]
+      "align": [
+        "start",
+        "center",
+        "end"
+      ]
     }
   },
   "meta": {
-    "desiredParent": ["=CarouselProvider"],
+    "desiredParent": [
+      "=CarouselProvider"
+    ],
     "label": "Carousel",
     "description": "Container for carousel items.",
     "styles": {}

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -65,8 +65,6 @@ export interface CarouselButtonsPropsGenerated {
   attributes: {
     style?: CarouselButtonsStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
   };

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

@@ -2,17 +2,24 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselButtons",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
-      "buttonType": ["previous_button", "next_button", "skip_button"],
+      "buttonType": [
+        "previous_button",
+        "next_button",
+        "skip_button"
+      ],
       "skipNumber": "number"
     }
   },
   "meta": {
-    "desiredParent": [">OnboardProvider", ">CarouselProvider"],
+    "desiredParent": [
+      ">OnboardProvider",
+      ">CarouselProvider"
+    ],
     "label": "Carousel Buttons",
     "description": "Renders built-in carousel buttons.",
     "styles": {},

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -68,8 +68,6 @@ export interface CarouselDotsPropsGenerated {
   attributes: {
     style?: CarouselDotsStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     dotType?: DotTypeOptionType;
   };
 }

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselDots",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "dotType": [
         "expanding_dot",
         "normal_dot",
@@ -18,7 +18,9 @@
     }
   },
   "meta": {
-    "desiredParent": [">CarouselProvider"],
+    "desiredParent": [
+      ">CarouselProvider"
+    ],
     "label": "Carousel Dots",
     "description": "Renders page indicator dots.",
     "styles": {

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -61,8 +61,6 @@ export interface CarouselItemPropsGenerated {
   attributes: {
     style?: CarouselItemStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
   };
 }
 

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

@@ -2,15 +2,15 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselItem",
+    "title": "title",
+    "description": "description",
     "children": "node",
-    "extends": "View",
-    "attributes": {
-      "title": "title",
-      "description": "description"
-    }
+    "extends": "View"
   },
   "meta": {
-    "desiredParent": ["=Carousel"],
+    "desiredParent": [
+      "=Carousel"
+    ],
     "label": "Carousel Item",
     "description": "Single slide inside a carousel.",
     "styles": {}

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -61,8 +61,6 @@ export interface CarouselProviderPropsGenerated {
   attributes: {
     style?: CarouselProviderStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
   };
 }
 

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

@@ -3,12 +3,10 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "CarouselProvider",
+    "title": "title",
+    "description": "description",
     "children": "node",
     "extends": "View",
-    "attributes": {
-      "title": "title",
-      "description": "description"
-    },
     "defaults": {
       "style": {
         "width": "100%",
@@ -17,7 +15,10 @@
     }
   },
   "meta": {
-    "desiredParent": ["root", ">View"],
+    "desiredParent": [
+      "root",
+      ">View"
+    ],
     "label": "Carousel Provider",
     "description": "Provides carousel context to its children.",
     "attributes": {}

package/src/build-components/CountDown/CountDownProps.generated.ts

@@ -67,8 +67,6 @@ export interface CountDownPropsGenerated {
   attributes: {
     style?: CountDownStyleGenerated;
     count?: number;
-    title?: string;
-    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;

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

@@ -2,12 +2,15 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CountDown",
+    "title": "title",
+    "description": "description",
     "children": "never",
-    "extends": "Counter",
-    "attributes": {}
+    "extends": "Counter"
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Count Down",
     "description": "Displays a countdown timer.",
     "attributes": {

package/src/build-components/Counter/CounterProps.generated.ts

@@ -66,8 +66,6 @@ export interface CounterPropsGenerated {
   child: string;
   attributes: {
     style?: CounterStyleGenerated;
-    title?: string;
-    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;

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

@@ -2,6 +2,8 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "Counter",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "Text",
     "attributes": {
@@ -9,7 +11,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Counter",
     "description": "Displays a numeric counter.",
     "attributes": {

package/src/build-components/Image/ImageProps.generated.ts

@@ -63,8 +63,6 @@ export interface ImagePropsGenerated {
   attributes: {
     style?: ImageStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     src?: string;
   };
 }

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

@@ -2,15 +2,20 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "Image",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "src": "string",
       "style": {
         "resizeMode": ["cover", "contain", "stretch", "center"]
       }
+    },
+    "defaults": {
+      "style": {
+        "resizeMode": "contain"
+      }
     }
   },
   "meta": {

package/src/build-components/Main/MainProps.generated.ts

@@ -61,8 +61,6 @@ export interface MainPropsGenerated {
   attributes: {
     style?: MainStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     useSafeAreaView?: boolean;
   };
 }

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "Main",
+    "title": "title",
+    "description": "description",
     "children": "node",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "useSafeAreaView": "boolean"
     }
   },
@@ -20,7 +20,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["root"],
+    "desiredParent": [
+      "root"
+    ],
     "label": "Main",
     "description": "Top-level screen wrapper (safe area, base layout).",
     "hideAllAttributes": true,

package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts

@@ -61,8 +61,6 @@ export interface NavigationBarColorPropsGenerated {
   attributes: {
     style?: NavigationBarColorStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
   };
 }
 

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

@@ -2,18 +2,20 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "NavigationBarColor",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "style": {
         "backgroundColor": "color"
       }
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Navigation Bar Color",
     "description": "Sets the OS navigation bar background color.",
     "styles": {

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -61,8 +61,6 @@ export interface OnboardPropsGenerated {
   attributes: {
     style?: OnboardStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
   };
 }
 

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

@@ -2,16 +2,18 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "Onboard",
+    "title": "title",
+    "description": "description",
     "children": "node",
-    "extends": "View",
-    "attributes": {
-      "title": "title",
-      "description": "description"
-    }
+    "extends": "View"
   },
   "meta": {
-    "desiredParent": ["=OnboardProvider"],
-    "desiredChildren": ["=OnboardItem"],
+    "desiredParent": [
+      "=OnboardProvider"
+    ],
+    "desiredChildren": [
+      "=OnboardItem"
+    ],
     "label": "Onboard",
     "description": "Wraps the onboarding flow.",
     "styles": {}

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

@@ -10,13 +10,16 @@ import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
+import { parseColor } from '../../utils/parseColor';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { appConfig } = useBuilderParams();
+  const { appConfig, projectColors } = useBuilderParams();
+  const theme = appConfig?.theme;
 
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
@@ -25,14 +28,25 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const attributeKey = node.key ?? generatedId;
 
   const attrs = node.attributes;
-  const styleBag = attrs?.style;
+  const attrRecord = toAttributeRecord(attrs);
+  const styleBag = getStyleBag(attrs);
   const labelRaw = attrs?.labelKey ?? '';
   const localize = useLocalize({ appConfig });
   const label = localize(labelRaw);
 
-  const flex = styleBag?.flex ?? 1;
-  const textColor = attrs?.button_text_color ?? '#FFFFFF';
-  const backgroundColor = attrs?.button_background_color ?? '#0066FF';
+  const flex = (attrRecord.flex ?? styleBag?.flex ?? 1) as number;
+
+  // The editor saves color attrs inside `styles` (meta category === 'style'),
+  // but legacy JSON may have them at the top level.
+  const rawTextColor = (attrRecord.button_text_color ??
+    styleBag?.button_text_color) as string | undefined;
+  const rawBgColor = (attrRecord.button_background_color ??
+    styleBag?.button_background_color) as string | undefined;
+
+  const textColor =
+    parseColor(rawTextColor, { projectColors, theme }) ?? '#FFFFFF';
+  const backgroundColor =
+    parseColor(rawBgColor, { projectColors, theme }) ?? '#0066FF';
   const viewStyle = useExtractViewStyle(node);
 
   const handleClick = () => {

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

@@ -76,8 +76,6 @@ export interface OnboardButtonPropsGenerated {
   attributes: {
     style?: OnboardButtonStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     labelKey?: string;
     button_text_color?: string;
     animation?: AnimationOptionType;

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "OnboardButton",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "labelKey": "string",
       "button_text_color": "color",
       "animation": [
@@ -30,14 +30,25 @@
   },
   "types": {
     "EventObject": {
-      "type": ["Permission", "Navigate"],
-      "permission": ["att", "notification", "rating", "GDPR", "null"],
+      "type": [
+        "Permission",
+        "Navigate"
+      ],
+      "permission": [
+        "att",
+        "notification",
+        "rating",
+        "GDPR",
+        "null"
+      ],
       "navigate_to": "string",
       "targetIndex": "number"
     }
   },
   "meta": {
-    "desiredParent": ["=OnboardButtons"],
+    "desiredParent": [
+      "=OnboardButtons"
+    ],
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
     "styles": {

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

@@ -67,8 +67,6 @@ export interface OnboardButtonsPropsGenerated {
   attributes: {
     style?: OnboardButtonsStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
     buttons_direction?: ButtonsDirectionOptionType;