@developer_tribe/react-builder 1.2.31 → 1.2.32

package/dist/utils/attributeStyle.d.ts

@@ -1,9 +1,9 @@
 /**
  * Shared utilities for attribute/style bag access.
- * schemaVersion=2 uses `attributes.styles`, legacy uses `attributes.style`.
+ * schemaVersion=2 uses `attributes.styles` exclusively.
  */
 import type { NodeDefaultAttribute } from '../types/Node';
-/** Returns styles or style bag from attributes (schemaVersion=2 uses styles, legacy uses style). */
+/** Returns styles bag from attributes (schemaVersion=2 uses `styles` only). Throws if legacy `style` is found. */
 export declare function getStyleBag(attributes: NodeDefaultAttribute | undefined): Record<string, unknown> | undefined;
 /** Safe indexed access to attributes. Use for reading style/direct props. */
 export declare function toAttributeRecord(attributes: unknown): Record<string, unknown>;

package/dist/utils/patterns.d.ts

@@ -53,11 +53,11 @@ type Pattern = {
 export type BuilderPlatform = 'web' | 'native';
 /**
  * Keys that conceptually behave like component props (behavior/flags) rather than
- * style properties. These should NOT be normalized into `attributes.style`.
+ * style properties. These should NOT be normalized into `attributes.styles`.
  */
 export declare const NON_STYLE_ATTRIBUTE_KEYS: Set<string>;
 /**
- * schemaVersion=2 stores style-like keys inside `attributes.style`.
+ * schemaVersion=2 stores style-like keys inside `attributes.styles`.
  *
  * We treat View+Text schema keys as style-like by default, but explicitly exclude
  * known non-style props (behavior flags).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.31",
+  "version": "1.2.32",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -142,11 +142,11 @@ export async function createGeneratedProps(
     return `    ${key}?: ${tsType};`;
   });
 
-  // In schema v2, the source of truth for "style bag" fields is `pattern.attributes.style`.
+  // In schema v2, the source of truth for "style bag" fields is `pattern.attributes.styles`.
   // `meta.styles` is UI metadata (and can include non-style fields like "scrollable" or "condition"),
-  // so we must NOT treat its keys as belonging to `attributes.style`.
-  const nestedStyleSchema = isPlainObject(attributes?.style)
-    ? attributes.style
+  // so we must NOT treat its keys as belonging to `attributes.styles`.
+  const nestedStyleSchema = isPlainObject(attributes?.styles)
+    ? attributes.styles
     : {};
   const styleKeys = Object.keys(nestedStyleSchema);
   const styleInterfaceName = `${componentName}StyleGenerated`;
@@ -173,17 +173,17 @@ export async function createGeneratedProps(
         `\n}\n`
       : '';
 
-  // In schema v2 we always allow a nested `style` object.
+  // In schema v2 we always allow a nested `styles` object.
   // If pattern.json declares meta.styles keys, we expose them for autocomplete while keeping flexibility via an index signature.
   const styleLine =
     styleKeys.length > 0
-      ? `    style?: ${styleInterfaceName};`
-      : `    style?: Record<string, unknown>;`;
+      ? `    styles?: ${styleInterfaceName};`
+      : `    styles?: Record<string, unknown>;`;
 
-  // Avoid emitting `attributes.style?: string;` when `pattern.attributes.style` is the nested style schema object.
+  // Avoid emitting `attributes.styles?: string;` when `pattern.attributes.styles` is the nested style schema object.
   const attributeLinesWithoutNestedStyle =
     styleKeys.length > 0
-      ? attributeLines.filter(line => !line.trim().startsWith('style?:'))
+      ? attributeLines.filter(line => !line.trim().startsWith('styles?:'))
       : attributeLines;
 
   const childTsType =

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -203,17 +203,17 @@ async function validatePatternJson(componentDir, componentName) {
 
   // Validate attributes accept primitive, enum array, or custom type refs (including X[])
   for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
-    if (attrName === 'style') {
+    if (attrName === 'styles') {
       if (!isPlainObject(attrType)) {
         return fail(
-          `[${componentName}] pattern.json -> 'pattern.attributes.style' must be an object`
+          `[${componentName}] pattern.json -> 'pattern.attributes.styles' must be an object`
         );
       }
       for (const [styleKey, styleType] of Object.entries(attrType)) {
         const res = validateAttrType(
           styleKey,
           styleType,
-          'pattern.attributes.style'
+          'pattern.attributes.styles'
         );
         if (res) return res;
       }
@@ -335,15 +335,15 @@ async function validatePatternJson(componentDir, componentName) {
     const parentAttributes = parentData?.pattern?.attributes || {};
     const childAttributes = data?.pattern?.attributes || {};
     const mergedAttributes = { ...parentAttributes, ...childAttributes };
-    // Deep-merge nested schema `attributes.style` when present (so parent style keys propagate).
-    const parentStyle = isPlainObject(parentAttributes?.style)
-      ? parentAttributes.style
+    // Deep-merge nested schema `attributes.styles` when present (so parent style keys propagate).
+    const parentStyle = isPlainObject(parentAttributes?.styles)
+      ? parentAttributes.styles
       : null;
-    const childStyle = isPlainObject(childAttributes?.style)
-      ? childAttributes.style
+    const childStyle = isPlainObject(childAttributes?.styles)
+      ? childAttributes.styles
       : null;
     if (parentStyle || childStyle) {
-      mergedAttributes.style = {
+      mergedAttributes.styles = {
         ...(parentStyle || {}),
         ...(childStyle || {}),
       };

package/src/RenderPage.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { DeviceMockFrame } from './DeviceMockFrame';
 import { Node } from './types/Node';
 import { RenderNode } from './build-components';
@@ -10,6 +10,8 @@ import {
 } from './components/BuilderProvider';
 import { RenderErrorBoundary } from './components/RenderErrorBoundary';
 import { usePreviewSelection } from './hooks/usePreviewSelection';
+import { defaultLocalization } from './types/PreviewConfig';
+import { defaultProjectColors } from './utils/projectColors';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
   dark: { backgroundColor: string; color: string; seperatorColor?: string };
@@ -67,6 +69,7 @@ export function RenderPage({
     setCurrent: s.setCurrent,
   }));
   const previewRootRef = useRef<HTMLDivElement | null>(null);
+  const hasAlertedRef = useRef(false);
   const showEmptyState = isNullish(data);
 
   usePreviewSelection({
@@ -78,6 +81,44 @@ export function RenderPage({
     forceRender,
   });
 
+  // Alert once per page when default localization or project colors are used
+  useEffect(() => {
+    if (hasAlertedRef.current) return;
+
+    const locKeys = overrideLocalization
+      ? Object.keys(overrideLocalization)
+      : [];
+    const pcKeys = overrideProjectColors
+      ? [
+          ...Object.keys(overrideProjectColors.STATIC_COLORS ?? {}),
+          ...Object.keys(overrideProjectColors.THEME_COLORS ?? {}),
+        ]
+      : [];
+
+    const isDefaultLocalization =
+      !overrideLocalization ||
+      locKeys.length === 0 ||
+      JSON.stringify(overrideLocalization) ===
+        JSON.stringify(defaultLocalization);
+
+    const isDefaultProjectColors =
+      !overrideProjectColors ||
+      JSON.stringify(overrideProjectColors) ===
+        JSON.stringify(defaultProjectColors);
+
+    if (isDefaultLocalization || isDefaultProjectColors) {
+      const parts: string[] = [];
+      if (isDefaultLocalization) parts.push('localization');
+      if (isDefaultProjectColors) parts.push('projectColors');
+
+      hasAlertedRef.current = true;
+      alert(
+        `[RenderPage] ⚠️ Using default ${parts.join(' & ')}. ` +
+          'Provide overrides via the store or params to avoid fallback values.',
+      );
+    }
+  }, [overrideLocalization, overrideProjectColors]);
+
   return (
     <RenderErrorBoundary subtitle="caught by RenderPage">
       <BuilderProvider

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.30"
+  "reactBuilderVersion": "1.2.31"
 }

package/src/assets/samples/vpn-onboard-1.json

@@ -2,30 +2,6 @@
   "name": "vpn-onboard-1",
   "version": "1.1.2",
   "type": "onboard",
-  "appConfig": {
-    "localication": {
-      "ar": {
-        "onboard.title.one-page": "أمّن اتصالك",
-        "onboard.title.two-page": "وصول إلى المحتوى حول العالم",
-        "onboard.title.three-page": "سرعة واعتمادية",
-        "onboard.title.four-page": "إشعارات وحماية دائمة",
-        "onboard.subtitle.one-page": "قم بتشفير حركة المرور وحماية خصوصيتك على شبكات Wi‑Fi العامة.",
-        "onboard.subtitle.two-page": "اتصل بخوادم عالية السرعة في بلدان متعددة بضغطة واحدة.",
-        "onboard.subtitle.three-page": "يتصل التطبيق تلقائياً بأفضل خادم لسرعة وثبات أعلى.",
-        "onboard.subtitle.four-page": "فعّل الإشعارات لمعرفة حالة الاتصال والحصول على نصائح الأمان.",
-        "onboard.next.one-page": "التالي",
-        "onboard.next.two-page": "التالي",
-        "onboard.next.three-page": "التالي",
-        "onboard.skip.one-page": "تخطي",
-        "onboard.skip.two-page": "تخطي",
-        "onboard.skip.three-page": "تخطي",
-        "onboard.allow.four-page": "السماح",
-        "view.onboarding.footer.description": "بالمتابعة، فإنك توافق على",
-        "view.onboarding.btnPrivacy": "سياسة الخصوصية",
-        "view.onboarding.btnTerms": "شروط الخدمة"
-      }
-    }
-  },
   "data": {
     "type": "Main",
     "isMain": true,

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

@@ -63,7 +63,7 @@ export interface BIconStyleGenerated {
 export interface BIconPropsGenerated {
   child: string;
   attributes: {
-    style?: BIconStyleGenerated;
+    styles?: BIconStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     translateCounter?: number;

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

@@ -13,7 +13,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "BIcon",
     "description": "Renders an icon from the icon set.",
     "styles": {},
@@ -44,7 +46,7 @@
   "defaults": {
     "iconType": "activity",
     "strokeWidth": 1.5,
-    "style": {
+    "styles": {
       "fontSize": "16"
     }
   }

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

@@ -20,7 +20,7 @@ export function BackgroundImage({ node }: BackgroundImageComponentProps) {
   const baseStyle = useExtractViewStyle(node);
   const backgroundStyle = useMemo(() => {
     const attrs = node.attributes;
-    const styleBag = attrs?.style;
+    const styleBag = attrs?.styles;
     const style: React.CSSProperties = {
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',

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

@@ -60,7 +60,7 @@ export interface BackgroundImageStyleGenerated {
 export interface BackgroundImagePropsGenerated {
   child: string;
   attributes: {
-    style?: BackgroundImageStyleGenerated;
+    styles?: BackgroundImageStyleGenerated;
     scrollable?: boolean;
     src?: string;
     resizeMode?: ResizeModeOptionType;

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

@@ -8,11 +8,16 @@
     "extends": "View",
     "attributes": {
       "src": "string",
-      "resizeMode": ["cover", "contain", "stretch", "center"]
+      "resizeMode": [
+        "cover",
+        "contain",
+        "stretch",
+        "center"
+      ]
     },
     "defaults": {
       "resizeMode": "cover",
-      "style": {
+      "styles": {
         "width": "100%",
         "height": "100%",
         "position": "absolute",
@@ -24,7 +29,10 @@
     }
   },
   "meta": {
-    "desiredParent": ["all", "background"],
+    "desiredParent": [
+      "all",
+      "background"
+    ],
     "label": "Background Image",
     "description": "Background image.",
     "styles": {

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

@@ -33,7 +33,7 @@ export function Button({ node }: ButtonComponentProps) {
     combinedTextStyle.textAlign,
   ]);
   const buttonDefaults = useMemo(() => {
-    const styleBag = node?.attributes?.style;
+    const styleBag = node?.attributes?.styles;
     const hasExplicitBackground =
       styleBag?.backgroundColor !== undefined &&
       styleBag?.backgroundColor !== null &&
@@ -45,7 +45,7 @@ export function Button({ node }: ButtonComponentProps) {
         ? undefined
         : { backgroundColor: 'transparent' }),
     } as React.CSSProperties;
-  }, [node?.attributes?.style]);
+  }, [node?.attributes?.styles]);
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,

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

@@ -74,7 +74,7 @@ export interface ButtonStyleGenerated {
 export interface ButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: ButtonStyleGenerated;
+    styles?: ButtonStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -7,7 +7,7 @@
     "children": "string",
     "extends": "View",
     "attributes": {
-      "style": {
+      "styles": {
         "color": "color",
         "fontSize": "size",
         "fontWeight": [
@@ -27,7 +27,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Button",
     "description": "Simple action button.",
     "styles": {
@@ -55,7 +57,7 @@
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "display": "flex",
       "alignItems": "center",
       "justifyContent": "center",

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

@@ -60,7 +60,7 @@ export interface CarouselStyleGenerated {
 export interface CarouselPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselStyleGenerated;
+    styles?: CarouselStyleGenerated;
     scrollable?: boolean;
     loop?: boolean;
     dragFree?: boolean;

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

@@ -9,17 +9,23 @@
     "attributes": {
       "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": {}
   },
   "defaults": {
-    "style": {
+    "styles": {
       "flexDirection": "row"
     }
   }

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

@@ -63,7 +63,7 @@ export interface CarouselButtonsStyleGenerated {
 export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselButtonsStyleGenerated;
+    styles?: CarouselButtonsStyleGenerated;
     scrollable?: boolean;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;

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

@@ -66,7 +66,7 @@ export interface CarouselDotsStyleGenerated {
 export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselDotsStyleGenerated;
+    styles?: CarouselDotsStyleGenerated;
     scrollable?: boolean;
     dotType?: DotTypeOptionType;
     dot_thickness?: string;

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

@@ -59,7 +59,7 @@ export interface CarouselItemStyleGenerated {
 export interface CarouselItemPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselItemStyleGenerated;
+    styles?: CarouselItemStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -59,7 +59,7 @@ export interface CarouselProviderStyleGenerated {
 export interface CarouselProviderPropsGenerated {
   child: string;
   attributes: {
-    style?: CarouselProviderStyleGenerated;
+    styles?: CarouselProviderStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -8,14 +8,17 @@
     "children": "node",
     "extends": "View",
     "defaults": {
-      "style": {
+      "styles": {
         "width": "100%",
         "height": "100%"
       }
     }
   },
   "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

@@ -64,7 +64,7 @@ export interface CountDownStyleGenerated {
 export interface CountDownPropsGenerated {
   child: string;
   attributes: {
-    style?: CountDownStyleGenerated;
+    styles?: CountDownStyleGenerated;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     translateCounter?: number;

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

@@ -8,14 +8,16 @@
     "extends": "Text",
     "attributes": {
       "count": "number",
-      "style": {
+      "styles": {
         "width": "never",
         "textAlign": "never"
       }
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Count Down",
     "description": "Displays a countdown timer.",
     "attributes": {

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

@@ -61,7 +61,7 @@ export interface ImageStyleGenerated {
 export interface ImagePropsGenerated {
   child: string;
   attributes: {
-    style?: ImageStyleGenerated;
+    styles?: ImageStyleGenerated;
     scrollable?: boolean;
     src?: string;
   };

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

@@ -8,18 +8,25 @@
     "extends": "View",
     "attributes": {
       "src": "string",
-      "style": {
-        "resizeMode": ["cover", "contain", "stretch", "center"]
+      "styles": {
+        "resizeMode": [
+          "cover",
+          "contain",
+          "stretch",
+          "center"
+        ]
       }
     },
     "defaults": {
-      "style": {
+      "styles": {
         "resizeMode": "contain"
       }
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Image",
     "description": "Shows an image or graphic.",
     "styles": {

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

@@ -59,7 +59,7 @@ export interface MainStyleGenerated {
 export interface MainPropsGenerated {
   child: string;
   attributes: {
-    style?: MainStyleGenerated;
+    styles?: MainStyleGenerated;
     scrollable?: boolean;
     useSafeAreaView?: boolean;
   };

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

@@ -12,7 +12,7 @@
   },
   "defaults": {
     "useSafeAreaView": true,
-    "style": {
+    "styles": {
       "width": "100%",
       "height": "100%",
       "flex": 1,
@@ -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

@@ -59,7 +59,7 @@ export interface NavigationBarColorStyleGenerated {
 export interface NavigationBarColorPropsGenerated {
   child: string;
   attributes: {
-    style?: NavigationBarColorStyleGenerated;
+    styles?: NavigationBarColorStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -7,13 +7,15 @@
     "children": "never",
     "extends": "View",
     "attributes": {
-      "style": {
+      "styles": {
         "backgroundColor": "color"
       }
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Navigation Bar Color",
     "description": "Sets the OS navigation bar background color.",
     "styles": {
@@ -27,7 +29,7 @@
     }
   },
   "defaults": {
-    "style": {
+    "styles": {
       "backgroundColor": "THEME_COLORS.BACKGROUND"
     }
   }

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

@@ -59,7 +59,7 @@ export interface OnboardStyleGenerated {
 export interface OnboardPropsGenerated {
   child: string;
   attributes: {
-    style?: OnboardStyleGenerated;
+    styles?: OnboardStyleGenerated;
     scrollable?: boolean;
   };
 }

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

@@ -8,14 +8,18 @@
     "extends": "View"
   },
   "meta": {
-    "desiredParent": ["=OnboardProvider"],
-    "desiredChildren": ["=OnboardItem"],
+    "desiredParent": [
+      "=OnboardProvider"
+    ],
+    "desiredChildren": [
+      "=OnboardItem"
+    ],
     "label": "Onboard",
     "description": "Wraps the onboarding flow.",
     "styles": {}
   },
   "defaults": {
-    "style": {
+    "styles": {
       "flexDirection": "row"
     }
   }