@developer_tribe/react-builder 1.2.30 → 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/dist/utils/useMergedStyle.d.ts

@@ -1,2 +1,2 @@
 import type { CSSProperties } from 'react';
-export declare function useMergedStyle(base?: CSSProperties, override?: CSSProperties): CSSProperties;
+export declare function useMergedStyle(...args: (CSSProperties | undefined | null | false)[]): CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.30",
+  "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.29"
+  "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,
@@ -304,8 +280,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -314,7 +288,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -322,8 +298,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -332,7 +306,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -357,8 +333,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Permission",
@@ -371,7 +345,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -379,8 +355,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -393,7 +367,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -418,8 +394,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -428,7 +402,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -436,8 +412,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -450,7 +424,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -475,8 +451,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -488,7 +462,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }

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

@@ -2,30 +2,6 @@
   "name": "vpn-onboard-2",
   "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": " العربية",
-        "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,
@@ -304,10 +280,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
                   "animation": "line-animation",
                   "animation_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -316,7 +290,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -324,9 +300,7 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
                   "animation": "simple-animation",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -335,7 +309,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -360,8 +336,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Permission",
@@ -374,7 +348,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -382,8 +358,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -396,7 +370,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -421,8 +397,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -431,7 +405,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
+                    "backgroundColor": "STATIC_COLORS.TRANSPARENT"
                   }
                 }
               },
@@ -439,8 +415,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -453,7 +427,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }
@@ -478,8 +454,6 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "STATIC_COLORS.WHITE",
-                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -491,7 +465,9 @@
                     }
                   ],
                   "styles": {
-                    "flex": 1
+                    "flex": 1,
+                    "color": "STATIC_COLORS.WHITE",
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND"
                   }
                 }
               }