@developer_tribe/react-builder 1.2.23 → 1.2.24

package/dist/utils/attributeStyle.d.ts

@@ -7,3 +7,15 @@ import type { NodeDefaultAttribute } from '../types/Node';
 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>;
+/**
+ * All attribute keys that represent visual style properties.
+ * Used to separate style keys from non-style (behavioral/content) keys.
+ *
+ * Keep in sync with ViewStyleGenerated, TextStyleGenerated, and ImageStyleGenerated.
+ */
+declare const STYLE_ATTR_KEYS_LIST: readonly ["style", "styles", "flexDirection", "flexWrap", "alignItems", "justifyContent", "gap", "padding", "paddingHorizontal", "paddingVertical", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginHorizontal", "marginVertical", "marginTop", "marginBottom", "marginLeft", "marginRight", "backgroundColor", "borderRadius", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "flex", "position", "top", "bottom", "left", "right", "zIndex", "color", "fontSize", "fontFamily", "fontWeight", "textAlign", "resizeMode"];
+/** Type-level union of all style attribute keys. Use with `Omit<T, StyleAttrKey>`. */
+export type StyleAttrKey = (typeof STYLE_ATTR_KEYS_LIST)[number];
+/** Strips all visual-style keys from an attributes record, returning only non-style keys. */
+export declare function stripStyleKeys(attrs: Record<string, unknown>): Record<string, unknown>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.23",
+  "version": "1.2.24",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,
@@ -73,6 +73,7 @@
     "lottie-react": "^2.4.1",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
+    "react-native": "^0.83.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.52.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -90,12 +91,16 @@
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17",
+    "react-native": ">=0.70",
     "react-router-dom": ">=6.0.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
     },
+    "react-native": {
+      "optional": true
+    },
     "react-router-dom": {
       "optional": true
     }

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.22"
+  "reactBuilderVersion": "1.2.23"
 }

package/src/assets/samples/paywall-1.json

@@ -146,7 +146,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Metin öğesi. (#1)",
                           "title": "text 1",
@@ -190,7 +190,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Metin öğesi. (#2)",
                           "title": "text 2",
@@ -234,7 +234,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Metin öğesi. (#3)",
                           "title": "text 3",
@@ -273,7 +273,7 @@
                     "children": null
                   },
                   {
-                    "type": "text",
+                    "type": "Text",
                     "attributes": {
                       "description": "Metin öğesi. (#4)",
                       "title": "Product Desc(s)",
@@ -284,7 +284,7 @@
                     "children": "@productDescription — Unlock all premium features for a month."
                   },
                   {
-                    "type": "text",
+                    "type": "Text",
                     "attributes": {
                       "description": "Metin öğesi. (#5)",
                       "title": "Product Price(s)",

package/src/assets/samples/paywall-2.json

@@ -144,7 +144,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Text item.",
                           "title": "text 1",
@@ -188,7 +188,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Text item.",
                           "title": "text 2",
@@ -232,7 +232,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Text item.",
                           "title": "text 3",
@@ -271,7 +271,7 @@
                     "children": null
                   },
                   {
-                    "type": "text",
+                    "type": "Text",
                     "attributes": {
                       "description": "Product description.",
                       "title": "Product Desc(s)",
@@ -282,7 +282,7 @@
                     "children": "@productDescription — Unlock all premium features for a month."
                   },
                   {
-                    "type": "text",
+                    "type": "Text",
                     "attributes": {
                       "description": "Product price.",
                       "title": "Product Price(s)",

package/src/attribute-analyser/style/native/useExtractImageStyle.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import type { ImageStyle } from 'react-native';
 import type { NodeData } from '../../../types/Node';
 import type {
   ImagePropsGenerated,
@@ -7,11 +8,21 @@ import type {
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractImageStyleNative } from '../../../utils/extractImageStyle';
 import { defaultAppConfig } from '../../../types/PreviewConfig';
-import { getStyleBag } from '../../../utils/attributeStyle';
+import {
+  getStyleBag,
+  toAttributeRecord,
+  stripStyleKeys,
+  type StyleAttrKey,
+} from '../../../utils/attributeStyle';
 
 export function useExtractImageStyle<
   T extends ImagePropsGenerated['attributes'],
->(node: NodeData<T>) {
+>(
+  node: NodeData<T>,
+): {
+  style: ImageStyle;
+  other: Omit<T, StyleAttrKey> & { resizeMode?: ResizeModeOptionType };
+} {
   const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
   const theme = appConfig?.theme ?? defaultAppConfig.theme;
   const projectColors = builderProjectColors;
@@ -23,26 +34,19 @@ export function useExtractImageStyle<
       extractImageStyleNative(node, { theme, projectColors });
 
     const attrs = node.attributes;
-
-    // Prefer the typed resizeMode from attributes, fall back to extracted style value.
+    const stripped = stripStyleKeys(toAttributeRecord(attrs));
     const imgStylesBag = getStyleBag(attrs);
+
+    // Prefer the typed resizeMode from style bag, fall back to extracted style value.
     const resizeMode = ((imgStylesBag?.resizeMode as string | undefined) ??
       resizeModeFromStyle) as ResizeModeOptionType | undefined;
 
-    // Forward all non-style attributes; style bag is already consumed above.
-    //Optimzation trade off by readability: fromEntries+filter avoids generic-to-Record double assertion.
-    const forwardedAttrs = Object.fromEntries(
-      Object.entries(attrs ?? {}).filter(
-        ([key]) => key !== 'style' && key !== 'styles',
-      ),
-    );
-
     return {
-      style,
+      style: style as ImageStyle,
       other: {
-        ...forwardedAttrs,
+        ...stripped,
         resizeMode,
-      },
+      } as Omit<T, StyleAttrKey> & { resizeMode?: ResizeModeOptionType },
     };
   }, [node, theme, projectColors]);
 }

package/src/attribute-analyser/style/native/useExtractTextStyle.ts

@@ -1,14 +1,26 @@
 import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
 import type { NodeData } from '../../../types/Node';
 import type { TextPropsGenerated } from '../../../build-components/Text/TextProps.generated';
 import { defaultAppConfig } from '../../../types/PreviewConfig';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractTextStyleNative } from '../../../utils/extractTextStyle';
-import { getStyleBag } from '../../../utils/attributeStyle';
+import {
+  getStyleBag,
+  toAttributeRecord,
+  stripStyleKeys,
+  type StyleAttrKey,
+} from '../../../utils/attributeStyle';
 
 export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
-) {
+): {
+  style: TextStyle;
+  other: Omit<T, StyleAttrKey> & {
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+  };
+} {
   const {
     appConfig: builderAppConfig,
     projectColors: builderProjectColors,
@@ -27,25 +39,23 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
         fonts,
       });
 
-      const attrs = node.attributes ?? {};
+      const attrs = node.attributes;
+      const stripped = stripStyleKeys(toAttributeRecord(attrs));
       const styleBag = getStyleBag(attrs);
-      const {
-        style: _style,
-        styles: _styles,
-        ...rest
-      } = attrs as Record<string, unknown>;
-      void _style;
-      void _styles;
 
       return {
-        style,
+        style: style as TextStyle,
         other: {
-          ...rest,
-          // These are "behavior" flags stored under style in the schema.
-          adjustsFontSizeToFit: styleBag?.adjustsFontSizeToFit as
+          ...stripped,
+          // These are "behavior" flags that may reside in the style bag.
+          adjustsFontSizeToFit: (stripped.adjustsFontSizeToFit ??
+            styleBag?.adjustsFontSizeToFit) as boolean | undefined,
+          showEllipsis: (stripped.showEllipsis ?? styleBag?.showEllipsis) as
             | boolean
             | undefined,
-          showEllipsis: styleBag?.showEllipsis as boolean | undefined,
+        } as Omit<T, StyleAttrKey> & {
+          adjustsFontSizeToFit?: boolean;
+          showEllipsis?: boolean;
         },
       };
     },

package/src/attribute-analyser/style/native/useExtractViewStyle.ts

@@ -1,44 +1,42 @@
 import { useMemo } from 'react';
+import type { ViewStyle } from 'react-native';
 import type { NodeData } from '../../../types/Node';
 import type { ViewPropsGenerated } from '../../../build-components/View/ViewProps.generated';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractViewStyleNative } from '../../../utils/extractViewStyle';
 import { defaultAppConfig } from '../../../types/PreviewConfig';
-import { getStyleBag, toAttributeRecord } from '../../../utils/attributeStyle';
+import {
+  getStyleBag,
+  toAttributeRecord,
+  stripStyleKeys,
+  type StyleAttrKey,
+} from '../../../utils/attributeStyle';
 
 export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
-) {
+): {
+  style: ViewStyle;
+  other: Omit<T, StyleAttrKey> & { scrollable?: boolean };
+} {
   const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
   const theme = appConfig?.theme ?? defaultAppConfig.theme;
   const projectColors = builderProjectColors;
 
   return useMemo(() => {
     const style = extractViewStyleNative(node, { theme, projectColors });
-
     const attrs = node.attributes;
-
-    // Forward all non-style attributes; style bag is already consumed by extractViewStyleNative.
-    //Optimzation trade off by readability: fromEntries+filter avoids generic-to-Record double assertion.
-    const forwardedAttrs = Object.fromEntries(
-      Object.entries(attrs ?? {}).filter(
-        ([key]) => key !== 'style' && key !== 'styles',
-      ),
-    );
-
-    // scrollable may reside inside the styles bag at runtime (not on ViewStyleGenerated).
-    const attrRecord = toAttributeRecord(attrs);
+    const stripped = stripStyleKeys(toAttributeRecord(attrs));
     const styleBag = getStyleBag(attrs);
-    const scrollable = (attrRecord.scrollable ?? styleBag?.scrollable) as
-      | boolean
-      | undefined;
 
     return {
-      style,
+      style: style as ViewStyle,
       other: {
-        ...forwardedAttrs,
-        scrollable,
-      },
+        ...stripped,
+        // scrollable may reside inside the styles bag at runtime.
+        scrollable: (stripped.scrollable ?? styleBag?.scrollable) as
+          | boolean
+          | undefined,
+      } as Omit<T, StyleAttrKey> & { scrollable?: boolean },
     };
   }, [node, theme, projectColors]);
 }

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

@@ -11,6 +11,9 @@
       "style": {
         "resizeMode": ["cover", "contain", "stretch", "center"]
       }
+    },
+    "defaults": {
+      "resizeMode": "contain"
     }
   },
   "meta": {

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/OnboardFooter/OnboardFooter.tsx

@@ -9,6 +9,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { defaultAppConfig } from '../../types/PreviewConfig';
 import { parseColor } from '../../utils/parseColor';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -107,26 +108,36 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const attrs = node?.attributes;
+  const attrRecord = toAttributeRecord(attrs);
+  const styleBag = getStyleBag(attrs);
   const text = t(attrs?.textLocalizationKey);
   const textStyle = useExtractTextStyle(node, true);
   const viewStyle = useExtractViewStyle(node);
 
+  // Read linked-word colors from both top-level attributes and the styles bag.
+  // The editor saves them inside `styles` (meta category === 'style'),
+  // but legacy JSON may have them at the top level.
+  const rawFirstColor = (attrRecord.linkedWordFirstColor ??
+    styleBag?.linkedWordFirstColor) as string | undefined;
+  const rawSecondColor = (attrRecord.linkedWordSecondColor ??
+    styleBag?.linkedWordSecondColor) as string | undefined;
+
   // Parse colors for linked words
   const parsedFirstColor = useMemo(
     () =>
-      parseColor(attrs?.linkedWordFirstColor, {
+      parseColor(rawFirstColor, {
         projectColors,
         theme,
       }),
-    [attrs?.linkedWordFirstColor, projectColors, theme],
+    [rawFirstColor, projectColors, theme],
   );
   const parsedSecondColor = useMemo(
     () =>
-      parseColor(attrs?.linkedWordSecondColor, {
+      parseColor(rawSecondColor, {
         projectColors,
         theme,
       }),
-    [attrs?.linkedWordSecondColor, projectColors, theme],
+    [rawSecondColor, projectColors, theme],
   );
 
   const mergedTextStyle = useMergedStyle(textStyle, {

package/src/build-components/patterns.generated.ts

@@ -4205,6 +4205,7 @@ export const patterns = [
         description: 'description',
         src: 'string',
       },
+      defaults: { resizeMode: 'contain' },
     },
     meta: {
       desiredParent: ['all'],
@@ -4527,6 +4528,7 @@ export const patterns = [
       },
     },
     defaults: {
+      resizeMode: 'contain',
       style: {
         flexDirection: 'column',
         position: 'relative',
@@ -7589,6 +7591,7 @@ export const patterns = [
         video_url: 'string',
         lottie: 'string',
       },
+      defaults: { resizeMode: 'contain' },
     },
     meta: {
       desiredParent: ['>OnboardProvider', '>OnboardItem', '!=Onboard'],
@@ -7925,6 +7928,7 @@ export const patterns = [
       },
     },
     defaults: {
+      resizeMode: 'contain',
       style: {
         flexDirection: 'column',
         position: 'relative',

package/src/components/BuilderProvider.tsx

@@ -43,7 +43,7 @@ type BuilderProviderProps = {
   children: React.ReactNode;
 };
 
-const BuilderContext = createContext<BuilderProviderParams | undefined>(
+const builderContext = createContext<BuilderProviderParams | undefined>(
   undefined,
 );
 
@@ -91,7 +91,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
   );
 
   return (
-    <BuilderContext.Provider value={value}>{children}</BuilderContext.Provider>
+    <builderContext.Provider value={value}>{children}</builderContext.Provider>
   );
 }
 
@@ -119,10 +119,10 @@ const defaultProjectColors: Readonly<ProjectColors> = {
       FOOTER_TEXT: '#81838F',
     },
     dark: {
-      TEXT: '#161827',
-      BACKGROUND: '#F4F5FF',
+      TEXT: '#E9EBF9',
+      BACKGROUND: '#080A17',
       ICON: '#0450E2',
-      LINE: '#E9EBF9',
+      LINE: '#161827',
       ONBOARD_TITLE: '#FDFDFD',
       ONBOARD_SUBTITLE: '#C7C7C7',
       BUTTON_SECONDARY_TEXT: '#A9AAAC',
@@ -133,7 +133,7 @@ const defaultProjectColors: Readonly<ProjectColors> = {
 
 export function useBuilderParams(): Readonly<BuilderProviderParams> {
   return (
-    useContext(BuilderContext) ?? {
+    useContext(builderContext) ?? {
       products: [],
       benefits: {},
       platform: 'web',

package/src/index.ts

@@ -91,3 +91,6 @@ export {
 } from './assets/samples/getSamples';
 export { getDefaultProject } from './utils/getDefaultProject';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
+
+export { parseColor } from './utils/parseColor';
+export type { ParseColorOptions } from './utils/parseColor';

package/src/utils/attributeStyle.ts

@@ -24,3 +24,81 @@ export function toAttributeRecord(
 function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
+
+// ---------------------------------------------------------------------------
+// Style-key filtering – separates visual style keys from non-style attributes
+// ---------------------------------------------------------------------------
+
+/**
+ * All attribute keys that represent visual style properties.
+ * Used to separate style keys from non-style (behavioral/content) keys.
+ *
+ * Keep in sync with ViewStyleGenerated, TextStyleGenerated, and ImageStyleGenerated.
+ */
+const STYLE_ATTR_KEYS_LIST = [
+  // Style bag containers
+  'style',
+  'styles',
+  // Layout
+  'flexDirection',
+  'flexWrap',
+  'alignItems',
+  'justifyContent',
+  'gap',
+  // Padding
+  'padding',
+  'paddingHorizontal',
+  'paddingVertical',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  // Margin
+  'margin',
+  'marginHorizontal',
+  'marginVertical',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  // Background & border
+  'backgroundColor',
+  'borderRadius',
+  // Sizing
+  'width',
+  'minWidth',
+  'maxWidth',
+  'height',
+  'minHeight',
+  'maxHeight',
+  // Flex & position
+  'flex',
+  'position',
+  'top',
+  'bottom',
+  'left',
+  'right',
+  'zIndex',
+  // Text
+  'color',
+  'fontSize',
+  'fontFamily',
+  'fontWeight',
+  'textAlign',
+  // Image
+  'resizeMode',
+] as const;
+
+/** Type-level union of all style attribute keys. Use with `Omit<T, StyleAttrKey>`. */
+export type StyleAttrKey = (typeof STYLE_ATTR_KEYS_LIST)[number];
+
+const STYLE_ATTR_KEYS: ReadonlySet<string> = new Set(STYLE_ATTR_KEYS_LIST);
+
+/** Strips all visual-style keys from an attributes record, returning only non-style keys. */
+export function stripStyleKeys(
+  attrs: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => !STYLE_ATTR_KEYS.has(key)),
+  );
+}