@developer_tribe/react-builder 1.2.8 → 1.2.9

package/src/assets/meta.json

@@ -0,0 +1,4 @@
+{
+  "supportedProjectVersion": "1.1.2",
+  "reactBuilderVersion": "1.2.8"
+}

package/src/assets/samples/carousel-sample.json

@@ -1,6 +1,6 @@
 {
   "name": "carousel-sample",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "other",
   "appConfig": {
     "theme": "light"

package/src/assets/samples/getSamples.ts

@@ -6,6 +6,7 @@ import unvalidatedBuilder1 from './unvalidated-builder1.json';
 import unvalidatedCrash1 from './unvalidated-crash1.json';
 import unvalidatedCrashComponent1 from './unvalidated-crashcomponent1.json';
 import unmigratedBuilder1 from './unmigrated-builder1.json';
+import unmigratedBuilder1_1_1 from './unmigrated-builder-1.1.1.json';
 import paywall1 from './paywall-1.json';
 import vpnOnboard1 from './vpn-onboard-1.json';
 import vpnOnboard2 from './vpn-onboard-2.json';
@@ -40,6 +41,7 @@ export function getSamples(): Project[] {
     normalizeSample(unvalidatedCrash1),
     normalizeSample(unvalidatedCrashComponent1),
     normalizeSample(unmigratedBuilder1),
+    normalizeSample(unmigratedBuilder1_1_1),
     normalizeSample(paywall1),
     ...onboardSamples,
   ];

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

@@ -1,6 +1,6 @@
 {
   "name": "Simple Paywall",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "paywall",
   "appConfig": {
     "theme": "light",
@@ -28,7 +28,6 @@
         "type": "PaywallProvider",
         "attributes": {
           "style": {
-            "scrollable": true,
             "flexDirection": "column",
             "alignItems": "stretch",
             "justifyContent": "flex-start",
@@ -38,7 +37,8 @@
             "paddingBottom": 16,
             "gap": 12,
             "backgroundColor": "#F5F7FA"
-          }
+          },
+          "scrollable": true
         },
         "children": [
           {
@@ -54,12 +54,13 @@
             "attributes": {
               "style": {
                 "position": "absolute",
-                "top": 16,
+                "top": 24,
                 "left": 16,
                 "width": 32,
                 "height": 32,
                 "borderRadius": 16,
                 "backgroundColor": "#FFFFFF",
+                "color": "#000",
                 "zIndex": 10
               }
             },
@@ -213,7 +214,8 @@
                 "type": "text",
                 "attributes": {
                   "style": {
-                    "flex": 4
+                    "flex": 4,
+                    "color": "#000"
                   }
                 },
                 "children": "@productDescription — Unlock all premium features for a month."
@@ -223,7 +225,8 @@
                 "attributes": {
                   "style": {
                     "flex": 1,
-                    "textAlign": "right"
+                    "textAlign": "right",
+                    "color": "#000"
                   }
                 },
                 "children": "@localizedPrice"
@@ -236,7 +239,8 @@
                   "style": {
                     "marginRight": 4,
                     "flex": 0,
-                    "width": 32
+                    "width": 32,
+                    "color": "#000"
                   }
                 },
                 "children": null

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

@@ -1,6 +1,6 @@
 {
   "name": "hello-world",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "other",
   "appConfig": {
     "theme": "light",
@@ -21,14 +21,14 @@
     "type": "view",
     "attributes": {
       "style": {
-        "scrollable": true,
         "flexDirection": "column",
         "alignItems": "center",
         "justifyContent": "center",
         "gap": 12,
         "padding": 16,
         "backgroundColor": "#F5F7FA"
-      }
+      },
+      "scrollable": true
     },
     "children": [
       {

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

@@ -1,6 +1,6 @@
 {
   "name": "hello-world-2-advanced",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "other",
   "appConfig": {
     "theme": "light",
@@ -21,14 +21,14 @@
     "type": "view",
     "attributes": {
       "style": {
-        "scrollable": true,
         "flexDirection": "column",
         "alignItems": "stretch",
         "justifyContent": "flex-start",
         "gap": 16,
         "padding": 16,
         "backgroundColor": "#F3F4F6"
-      }
+      },
+      "scrollable": true
     },
     "children": [
       {

package/src/assets/samples/unmigrated-builder-1.1.1.json

@@ -0,0 +1,87 @@
+{
+  "name": "unmigrated-builder-1.1.1",
+  "version": "1.1.1",
+  "type": "other",
+  "appConfig": {
+    "theme": "light"
+  },
+  "data": {
+    "type": "view",
+    "attributes": {
+      "scrollable": true,
+      "style": {
+        "flexDirection": "column",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "gap": 12,
+        "padding": 24,
+        "backgroundColor": "#F5F7FA"
+      }
+    },
+    "children": [
+      {
+        "type": "text",
+        "attributes": {
+          "style": {
+            "fontSize": 22,
+            "fontWeight": "700",
+            "color": "#111827",
+            "textAlign": "center"
+          }
+        },
+        "children": "Intentionally unmigrated sample (for combined 1.1.2)"
+      },
+      {
+        "type": "text",
+        "attributes": {
+          "style": {
+            "fontSize": 14,
+            "color": "#6B7280",
+            "textAlign": "center",
+            "paddingHorizontal": 8
+          }
+        },
+        "children": "This project has version 1.1.1 so the Migration page should appear. Click “Migrate now” to move component props and non-style flags out of attributes.style (combined 1.1.2)."
+      },
+      {
+        "type": "view",
+        "attributes": {
+          "style": {
+            "flexDirection": "row",
+            "alignItems": "center",
+            "justifyContent": "center",
+            "gap": 12,
+            "marginTop": 16
+          }
+        },
+        "children": [
+          {
+            "type": "BIcon",
+            "attributes": {
+              "style": {
+                "iconType": "check",
+                "strokeWidth": 3,
+                "color": "#22c55e",
+                "fontSize": "18"
+              }
+            },
+            "children": null
+          },
+          {
+            "type": "image",
+            "attributes": {
+              "src": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
+              "width": 48,
+              "height": 48,
+              "style": {
+                "resizeMode": "contain",
+                "borderRadius": 12
+              }
+            },
+            "children": null
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/assets/samples/unmigrated-builder1.json

@@ -35,7 +35,7 @@
           "textAlign": "center",
           "paddingHorizontal": 8
         },
-        "children": "This project has version 1.0.0 so the Migration page should appear. Click “Migrate now” to normalize legacy flat style keys into attributes.style (1.1.0)."
+        "children": "This project has version 1.0.0 so the Migration page should appear. Click “Migrate now” to normalize legacy flat style keys into attributes.style and move misplaced props out of style (combined 1.1.2)."
       }
     ]
   }

package/src/assets/samples/unvalidated-builder1.json

@@ -1,6 +1,6 @@
 {
   "name": "unvalidated-builder1",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "other",
   "appConfig": {
     "theme": "light"
@@ -9,7 +9,6 @@
     "type": "view",
     "attributes": {
       "style": {
-        "scrollable": true,
         "flexDirection": "column",
         "alignItems": "center",
         "justifyContent": "center",
@@ -17,7 +16,8 @@
         "padding": 24,
         "backgroundColor": "#F5F7FA"
       },
-      "foo": 1
+      "foo": 1,
+      "scrollable": true
     },
     "children": [
       {

package/src/assets/samples/unvalidated-crash1.json

@@ -1,6 +1,6 @@
 {
   "name": "unvalidated-crash1",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "other",
   "appConfig": {
     "theme": "light"

package/src/assets/samples/unvalidated-crashcomponent1.json

@@ -1,6 +1,6 @@
 {
   "name": "unvalidated-crashcomponent1",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "other",
   "appConfig": {
     "theme": "light"

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

@@ -1,6 +1,6 @@
 {
   "name": "vpn-onboard-1",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "onboard",
   "appConfig": {
     "theme": "dark",

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

@@ -1,6 +1,6 @@
 {
   "name": "vpn-onboard-2",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "onboard",
   "appConfig": {
     "theme": "light",

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

@@ -1,6 +1,6 @@
 {
   "name": "vpn-onboard-3",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "onboard",
   "appConfig": {
     "theme": "light",

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

@@ -1,6 +1,6 @@
 {
   "name": "vpn-onboard-4",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "onboard",
   "appConfig": {
     "theme": "dark",

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

@@ -1,6 +1,6 @@
 {
   "name": "vpn-onboard-5",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "onboard",
   "appConfig": {
     "theme": "light",

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

@@ -1,6 +1,6 @@
 {
   "name": "vpn-onboard-6",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "onboard",
   "appConfig": {
     "theme": "dark",

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

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import type { NodeData } from '../../../types/Node';
+import type { ImagePropsGenerated } from '../../../build-components/Image/ImageProps.generated';
+import { useBuilderParams } from '../../../components/BuilderProvider';
+import { extractImageStyleNative } from '../../../utils/extractImageStyle';
+import { defaultAppConfig } from '../../../types/PreviewConfig';
+
+export function useExtractImageStyle<
+  T extends ImagePropsGenerated['attributes'],
+>(node: NodeData<T>) {
+  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
+  const theme = appConfig?.theme ?? defaultAppConfig.theme;
+  const projectColors = builderProjectColors;
+
+  return useMemo(() => {
+    // extractImageStyleNative includes `resizeMode` in the returned object, but in RN
+    // resizeMode is typically passed as an Image prop. We normalize to `{ style, other }`.
+    const styleWithResizeMode = extractImageStyleNative(node, {
+      theme,
+      projectColors,
+    });
+    const { resizeMode: resizeModeFromStyle, ...style } =
+      (styleWithResizeMode as unknown as Record<string, unknown>) ?? {};
+
+    const attrs = node.attributes as unknown as Record<string, unknown>;
+    const styleBag =
+      (attrs?.style as Record<string, unknown> | undefined) ?? undefined;
+    const { style: _style, ...rest } = attrs ?? {};
+    void _style;
+
+    return {
+      style,
+      other: {
+        ...rest,
+        // In RN, resizeMode is commonly an Image prop (not style). We expose it as "other".
+        resizeMode: (resizeModeFromStyle ??
+          (styleBag?.resizeMode as unknown)) as
+          | 'cover'
+          | 'contain'
+          | 'stretch'
+          | 'center'
+          | undefined,
+      },
+    };
+  }, [node, theme, projectColors]);
+}

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

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+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';
+
+export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
+  node: NodeData<T>,
+) {
+  const {
+    appConfig: builderAppConfig,
+    projectColors: builderProjectColors,
+    fonts: builderFonts,
+  } = useBuilderParams();
+
+  const appConfig = builderAppConfig ?? defaultAppConfig;
+  const projectColors = builderProjectColors;
+  const fonts = builderFonts;
+
+  return useMemo(
+    () => {
+      const style = extractTextStyleNative(node, {
+        appConfig,
+        projectColors,
+        fonts,
+      });
+
+      const attrs = node.attributes as unknown as Record<string, unknown>;
+      const styleBag =
+        (attrs?.style as Record<string, unknown> | undefined) ?? undefined;
+      const { style: _style, ...rest } = attrs ?? {};
+      void _style;
+
+      return {
+        style,
+        other: {
+          ...rest,
+          // These are "behavior" flags stored under style in the schema.
+          adjustsFontSizeToFit: styleBag?.adjustsFontSizeToFit as
+            | boolean
+            | undefined,
+          showEllipsis: styleBag?.showEllipsis as boolean | undefined,
+        },
+      };
+    },
+    // fonts is intentionally included: extractTextStyleNative resolves weights via font definitions.
+    [node, appConfig, projectColors, fonts],
+  );
+}

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

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+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';
+
+export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+) {
+  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 as unknown as Record<string, unknown>;
+    const styleBag =
+      (attrs?.style as Record<string, unknown> | undefined) ?? undefined;
+    const { style: _style, ...rest } = attrs ?? {};
+    void _style;
+
+    return {
+      style,
+      other: {
+        ...rest,
+        scrollable: styleBag?.scrollable as boolean | undefined,
+      },
+    };
+  }, [node, theme, projectColors]);
+}

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

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
+import type { NodeData } from '../../../types/Node';
+import type { ImagePropsGenerated } from '../../../build-components/Image/ImageProps.generated';
+import { useBuilderParams } from '../../../components/BuilderProvider';
+import { extractImageStyle } from '../../../utils/extractImageStyle';
+import { defaultAppConfig } from '../../../types/PreviewConfig';
+
+export function useExtractImageStyle<
+  T extends ImagePropsGenerated['attributes'],
+>(node: NodeData<T>): CSSProperties {
+  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
+  const theme = appConfig?.theme ?? defaultAppConfig.theme;
+  const projectColors = builderProjectColors;
+
+  return useMemo(
+    () => extractImageStyle(node, { theme, projectColors }),
+    [node, theme, projectColors],
+  );
+}

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

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
+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 { extractTextStyle } from '../../../utils/extractTextStyle';
+
+export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
+  node: NodeData<T>,
+): CSSProperties {
+  const {
+    appConfig: builderAppConfig,
+    projectColors: builderProjectColors,
+    fonts: builderFonts,
+  } = useBuilderParams();
+
+  const appConfig = builderAppConfig ?? defaultAppConfig;
+  const projectColors = builderProjectColors;
+  const fonts = builderFonts;
+
+  return useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors, fonts }),
+    // fonts is intentionally included: extractTextStyle resolves weights via font definitions.
+    [node, appConfig, projectColors, fonts],
+  );
+}

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

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
+import type { NodeData } from '../../../types/Node';
+import type { ViewPropsGenerated } from '../../../build-components/View/ViewProps.generated';
+import { useBuilderParams } from '../../../components/BuilderProvider';
+import { extractViewStyle } from '../../../utils/extractViewStyle';
+import { defaultAppConfig } from '../../../types/PreviewConfig';
+
+export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+): CSSProperties {
+  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
+  const theme = appConfig?.theme ?? defaultAppConfig.theme;
+  const projectColors = builderProjectColors;
+
+  return useMemo(
+    () => extractViewStyle(node, { theme, projectColors }),
+    [node, theme, projectColors],
+  );
+}