@developer_tribe/react-builder 1.0.7 → 1.0.9

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

@@ -1,6 +1,6 @@
 {
   "name": "carousel-sample",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "other",
   "appConfig": {
     "theme": "light"
@@ -20,7 +20,6 @@
             "type": "carouselItem",
             "attributes": {
               "style": {
-                "flex": "0 0 100%",
                 "minWidth": 0
               }
             },
@@ -28,23 +27,59 @@
               "type": "view",
               "attributes": {
                 "style": {
-                  "padding": "20px",
-                  "backgroundColor": "#f5f5f5",
-                  "borderRadius": "8px",
-                  "textAlign": "center"
+                  "padding": "22px",
+                  "borderRadius": 18,
+                  "backgroundImage": "linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #ecfeff 100%)",
+                  "boxShadow": "0 10px 30px rgba(15, 23, 42, 0.10)",
+                  "gap": 14,
+                  "height": "100%",
+                  "justifyContent": "center"
                 }
               },
-              "children": {
-                "type": "text",
-                "children": "Welcome to our app!"
-              }
+              "children": [
+                {
+                  "type": "image",
+                  "attributes": {
+                    "src": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
+                    "resizeMode": "cover",
+                    "style": {
+                      "width": "100%",
+                      "height": 230,
+                      "borderRadius": 14
+                    }
+                  }
+                },
+                {
+                  "type": "text",
+                  "attributes": {
+                    "style": {
+                      "fontSize": 28,
+                      "fontWeight": "700",
+                      "textAlign": "center",
+                      "color": "#0f172a"
+                    }
+                  },
+                  "children": "Welcome aboard"
+                },
+                {
+                  "type": "text",
+                  "attributes": {
+                    "style": {
+                      "fontSize": 16,
+                      "textAlign": "center",
+                      "color": "#334155",
+                      "paddingHorizontal": 8
+                    }
+                  },
+                  "children": "Swipe through a beautiful, validated carousel sample with images."
+                }
+              ]
             }
           },
           {
             "type": "carouselItem",
             "attributes": {
               "style": {
-                "flex": "0 0 100%",
                 "minWidth": 0
               }
             },
@@ -52,23 +87,59 @@
               "type": "view",
               "attributes": {
                 "style": {
-                  "padding": "20px",
-                  "backgroundColor": "#e8f5e9",
-                  "borderRadius": "8px",
-                  "textAlign": "center"
+                  "padding": "22px",
+                  "borderRadius": 18,
+                  "backgroundImage": "linear-gradient(135deg, #f0fdf4 0%, #ffffff 55%, #eff6ff 100%)",
+                  "boxShadow": "0 10px 30px rgba(15, 23, 42, 0.10)",
+                  "gap": 14,
+                  "height": "100%",
+                  "justifyContent": "center"
                 }
               },
-              "children": {
-                "type": "text",
-                "children": "Discover amazing features"
-              }
+              "children": [
+                {
+                  "type": "image",
+                  "attributes": {
+                    "src": "https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=80",
+                    "resizeMode": "cover",
+                    "style": {
+                      "width": "100%",
+                      "height": 230,
+                      "borderRadius": 14
+                    }
+                  }
+                },
+                {
+                  "type": "text",
+                  "attributes": {
+                    "style": {
+                      "fontSize": 28,
+                      "fontWeight": "700",
+                      "textAlign": "center",
+                      "color": "#0f172a"
+                    }
+                  },
+                  "children": "Discover features"
+                },
+                {
+                  "type": "text",
+                  "attributes": {
+                    "style": {
+                      "fontSize": 16,
+                      "textAlign": "center",
+                      "color": "#334155",
+                      "paddingHorizontal": 8
+                    }
+                  },
+                  "children": "Dots + buttons are included, and slide sizing comes from the carousel CSS."
+                }
+              ]
             }
           },
           {
             "type": "carouselItem",
             "attributes": {
               "style": {
-                "flex": "0 0 100%",
                 "minWidth": 0
               }
             },
@@ -76,16 +147,53 @@
               "type": "view",
               "attributes": {
                 "style": {
-                  "padding": "20px",
-                  "backgroundColor": "#e3f2fd",
-                  "borderRadius": "8px",
-                  "textAlign": "center"
+                  "padding": "22px",
+                  "borderRadius": 18,
+                  "backgroundImage": "linear-gradient(135deg, #fff7ed 0%, #ffffff 55%, #f5f3ff 100%)",
+                  "boxShadow": "0 10px 30px rgba(15, 23, 42, 0.10)",
+                  "gap": 14,
+                  "height": "100%",
+                  "justifyContent": "center"
                 }
               },
-              "children": {
-                "type": "text",
-                "children": "Get started now!"
-              }
+              "children": [
+                {
+                  "type": "image",
+                  "attributes": {
+                    "src": "https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1200&q=80",
+                    "resizeMode": "cover",
+                    "style": {
+                      "width": "100%",
+                      "height": 230,
+                      "borderRadius": 14
+                    }
+                  }
+                },
+                {
+                  "type": "text",
+                  "attributes": {
+                    "style": {
+                      "fontSize": 28,
+                      "fontWeight": "700",
+                      "textAlign": "center",
+                      "color": "#0f172a"
+                    }
+                  },
+                  "children": "Get started"
+                },
+                {
+                  "type": "text",
+                  "attributes": {
+                    "style": {
+                      "fontSize": 16,
+                      "textAlign": "center",
+                      "color": "#334155",
+                      "paddingHorizontal": 8
+                    }
+                  },
+                  "children": "This sample stays within validation rules (no string flex shorthand)."
+                }
+              ]
             }
           }
         ]
@@ -99,7 +207,11 @@
       {
         "type": "carouselButtons",
         "attributes": {
-          "buttonType": ["previous_button", "next_button", "skip_button"],
+          "buttonType": [
+            "previous_button",
+            "next_button",
+            "skip_button"
+          ],
           "skipNumber": 3
         }
       }

package/src/assets/samples/getSamples.ts

@@ -2,6 +2,10 @@ import { Project } from '../../types/Project';
 import simple1 from './simple-1.json';
 import simple2 from './simple-2.json';
 import carouselSample from './carousel-sample.json';
+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 paywall1 from './paywall-1.json';
 import vpnOnboard1 from './vpn-onboard-1.json';
 import vpnOnboard2 from './vpn-onboard-2.json';
@@ -32,6 +36,10 @@ export function getSamples(): Project[] {
     normalizeSample(simple1),
     normalizeSample(simple2),
     normalizeSample(carouselSample),
+    normalizeSample(unvalidatedBuilder1),
+    normalizeSample(unvalidatedCrash1),
+    normalizeSample(unvalidatedCrashComponent1),
+    normalizeSample(unmigratedBuilder1),
     normalizeSample(paywall1),
     ...onboardSamples,
   ];
@@ -42,6 +50,7 @@ export function getBasicSamples(): Project[] {
     normalizeSample(simple1),
     normalizeSample(simple2),
     normalizeSample(carouselSample),
+    normalizeSample(unvalidatedBuilder1),
   ];
 }
 

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

@@ -1,13 +1,19 @@
 {
   "name": "Simple Paywall",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "paywall",
   "appConfig": {
     "theme": "light",
     "isRtl": false,
     "screenStyle": {
-      "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },
-      "dark": { "backgroundColor": "#12131A", "color": "#E9EBF9" }
+      "light": {
+        "backgroundColor": "#FDFDFD",
+        "color": "#161827"
+      },
+      "dark": {
+        "backgroundColor": "#12131A",
+        "color": "#E9EBF9"
+      }
     },
     "defaultLanguage": "en"
   },
@@ -21,16 +27,18 @@
       {
         "type": "PaywallProvider",
         "attributes": {
-          "scrollable": true,
-          "flexDirection": "column",
-          "alignItems": "stretch",
-          "justifyContent": "flex-start",
-          "position": "relative",
-          "paddingTop": 56,
-          "paddingHorizontal": 16,
-          "paddingBottom": 16,
-          "gap": 12,
-          "backgroundColor": "#F5F7FA"
+          "style": {
+            "scrollable": true,
+            "flexDirection": "column",
+            "alignItems": "stretch",
+            "justifyContent": "flex-start",
+            "position": "relative",
+            "paddingTop": 56,
+            "paddingHorizontal": 16,
+            "paddingBottom": 16,
+            "gap": 12,
+            "backgroundColor": "#F5F7FA"
+          }
         },
         "children": [
           {
@@ -44,52 +52,62 @@
           {
             "type": "PaywallCloseButton",
             "attributes": {
-              "position": "absolute",
-              "top": 16,
-              "left": 16,
-              "width": 32,
-              "height": 32,
-              "borderRadius": 16,
-              "backgroundColor": "#FFFFFF",
-              "zIndex": 10
+              "style": {
+                "position": "absolute",
+                "top": 16,
+                "left": 16,
+                "width": 32,
+                "height": 32,
+                "borderRadius": 16,
+                "backgroundColor": "#FFFFFF",
+                "zIndex": 10
+              }
             },
             "children": null
           },
           {
             "type": "View",
             "attributes": {
-              "flexDirection": "column",
-              "gap": 0,
-              "marginTop": "16%"
+              "style": {
+                "flexDirection": "column",
+                "gap": 0,
+                "marginTop": "16%"
+              }
             },
             "children": [
               {
                 "type": "View",
                 "attributes": {
-                  "flexDirection": "row",
-                  "alignItems": "center",
-                  "gap": 8,
-                  "paddingVertical": 8,
-                  "paddingHorizontal": 12
+                  "style": {
+                    "flexDirection": "row",
+                    "alignItems": "center",
+                    "gap": 8,
+                    "paddingVertical": 8,
+                    "paddingHorizontal": 12
+                  }
                 },
                 "children": [
                   {
                     "type": "BIcon",
                     "attributes": {
                       "iconType": "check",
-                      "color": "#22c55e",
                       "strokeWidth": 3,
-                      "fontSize": "16",
-                      "flex": 0
+                      "style": {
+                        "color": "#22c55e",
+                        "fontSize": "16",
+                        "flex": 0
+                      }
                     },
                     "children": null
                   },
                   {
                     "type": "text",
                     "attributes": {
-                      "flex": 1,
-                      "color": "#FFFFFF",
-                      "fontWeight": "700"
+                      "style": {
+                        "flex": 1,
+                        "color": "#FFFFFF",
+                        "fontWeight": "700"
+                      }
                     },
                     "children": "@benefit1 — Unlimited access"
                   }
@@ -98,30 +116,36 @@
               {
                 "type": "View",
                 "attributes": {
-                  "flexDirection": "row",
-                  "alignItems": "center",
-                  "gap": 8,
-                  "paddingVertical": 8,
-                  "paddingHorizontal": 12
+                  "style": {
+                    "flexDirection": "row",
+                    "alignItems": "center",
+                    "gap": 8,
+                    "paddingVertical": 8,
+                    "paddingHorizontal": 12
+                  }
                 },
                 "children": [
                   {
                     "type": "BIcon",
                     "attributes": {
                       "iconType": "check",
-                      "color": "#22c55e",
                       "strokeWidth": 3,
-                      "fontSize": "16",
-                      "flex": 0
+                      "style": {
+                        "color": "#22c55e",
+                        "fontSize": "16",
+                        "flex": 0
+                      }
                     },
                     "children": null
                   },
                   {
                     "type": "text",
                     "attributes": {
-                      "flex": 1,
-                      "color": "#FFFFFF",
-                      "fontWeight": "700"
+                      "style": {
+                        "flex": 1,
+                        "color": "#FFFFFF",
+                        "fontWeight": "700"
+                      }
                     },
                     "children": "@benefit2 — 7-day free trial"
                   }
@@ -130,30 +154,36 @@
               {
                 "type": "View",
                 "attributes": {
-                  "flexDirection": "row",
-                  "alignItems": "center",
-                  "gap": 8,
-                  "paddingVertical": 8,
-                  "paddingHorizontal": 12
+                  "style": {
+                    "flexDirection": "row",
+                    "alignItems": "center",
+                    "gap": 8,
+                    "paddingVertical": 8,
+                    "paddingHorizontal": 12
+                  }
                 },
                 "children": [
                   {
                     "type": "BIcon",
                     "attributes": {
                       "iconType": "check",
-                      "color": "#22c55e",
                       "strokeWidth": 3,
-                      "fontSize": "16",
-                      "flex": 0
+                      "style": {
+                        "color": "#22c55e",
+                        "fontSize": "16",
+                        "flex": 0
+                      }
                     },
                     "children": null
                   },
                   {
                     "type": "text",
                     "attributes": {
-                      "flex": 1,
-                      "color": "#FFFFFF",
-                      "fontWeight": "700"
+                      "style": {
+                        "flex": 1,
+                        "color": "#FFFFFF",
+                        "fontWeight": "700"
+                      }
                     },
                     "children": "@benefit3 — Cancel anytime"
                   }
@@ -164,24 +194,38 @@
           {
             "type": "PaywallOptions",
             "attributes": {
-              "borderRadius": 12,
-              "backgroundColor": "#FFFFFF"
+              "style": {
+                "borderRadius": 12,
+                "backgroundColor": "#FFFFFF"
+              }
             },
             "children": [
               {
                 "type": "RadioButton",
-                "attributes": { "flex": 1 },
+                "attributes": {
+                  "style": {
+                    "flex": 1
+                  }
+                },
                 "children": null
               },
-
               {
                 "type": "text",
-                "attributes": { "flex": 4 },
+                "attributes": {
+                  "style": {
+                    "flex": 4
+                  }
+                },
                 "children": "@productDescription — Unlock all premium features for a month."
               },
               {
                 "type": "text",
-                "attributes": { "flex": 1, "textAlign": "right" },
+                "attributes": {
+                  "style": {
+                    "flex": 1,
+                    "textAlign": "right"
+                  }
+                },
                 "children": "@localizedPrice"
               },
               {
@@ -189,9 +233,11 @@
                 "attributes": {
                   "iconType": "chevron-right",
                   "size": 16,
-                  "marginRight": 4,
-                  "flex": 0,
-                  "width": 32
+                  "style": {
+                    "marginRight": 4,
+                    "flex": 0,
+                    "width": 32
+                  }
                 },
                 "children": null
               }
@@ -200,11 +246,13 @@
           {
             "type": "View",
             "attributes": {
-              "flex": 1,
-              "flexDirection": "column",
-              "justifyContent": "flex-end",
-              "alignItems": "stretch",
-              "paddingBottom": "50px"
+              "style": {
+                "flex": 1,
+                "flexDirection": "column",
+                "justifyContent": "flex-end",
+                "alignItems": "stretch",
+                "paddingBottom": "50px"
+              }
             },
             "children": [
               {

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

@@ -1,44 +1,56 @@
 {
   "name": "hello-world",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "other",
   "appConfig": {
     "theme": "light",
     "isRtl": false,
     "screenStyle": {
-      "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },
-      "dark": { "backgroundColor": "#12131A", "color": "#E9EBF9" }
+      "light": {
+        "backgroundColor": "#FDFDFD",
+        "color": "#161827"
+      },
+      "dark": {
+        "backgroundColor": "#12131A",
+        "color": "#E9EBF9"
+      }
     },
     "defaultLanguage": "en"
   },
   "data": {
     "type": "view",
     "attributes": {
-      "scrollable": true,
-      "flexDirection": "column",
-      "alignItems": "center",
-      "justifyContent": "center",
-      "gap": 12,
-      "padding": 16,
-      "backgroundColor": "#F5F7FA"
+      "style": {
+        "scrollable": true,
+        "flexDirection": "column",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "gap": 12,
+        "padding": 16,
+        "backgroundColor": "#F5F7FA"
+      }
     },
     "children": [
       {
         "type": "text",
         "children": "Hello, world!",
         "attributes": {
-          "color": "#111827",
-          "fontSize": 24,
-          "fontWeight": "600"
+          "style": {
+            "color": "#111827",
+            "fontSize": 24,
+            "fontWeight": "600"
+          }
         }
       },
       {
         "type": "text",
         "children": "Welcome to react-native-builder",
         "attributes": {
-          "color": "#6B7280",
-          "fontSize": 14,
-          "fontWeight": "400"
+          "style": {
+            "color": "#6B7280",
+            "fontSize": 14,
+            "fontWeight": "400"
+          }
         }
       }
     ]