@developer_tribe/react-builder 1.2.19 → 1.2.21

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.18"
+  "reactBuilderVersion": "1.2.20"
 }

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

@@ -6,245 +6,327 @@
     "theme": "light"
   },
   "data": {
-    "type": "carouselProvider",
-    "children": [
-      {
-        "type": "carousel",
-        "attributes": {
-          "loop": true,
-          "align": "center",
-          "dragFree": true,
-          "description": "carousel element 1 in sample.",
-          "title": "carousel 1"
-        },
-        "children": [
-          {
-            "type": "carouselItem",
-            "attributes": {
-              "style": {
-                "minWidth": 0
+    "type": "Main",
+    "isMain": true,
+    "attributes": {
+      "styles": {
+        "backgroundColor": "#f8fafc",
+        "minHeight": "100vh",
+        "padding": "24px"
+      }
+    },
+    "children": {
+      "type": "carouselProvider",
+      "children": [
+        {
+          "type": "carousel",
+          "attributes": {
+            "loop": true,
+            "align": "center",
+            "dragFree": true,
+            "description": "carousel element 1 in sample.",
+            "title": "carousel 1"
+          },
+          "children": [
+            {
+              "type": "carouselItem",
+              "attributes": {
+                "description": "carouselItem element 1 in sample.",
+                "title": "carouselItem 1",
+                "styles": {
+                  "minWidth": 0
+                }
+              },
+              "children": {
+                "type": "view",
+                "attributes": {
+                  "description": "view element 1 in sample.",
+                  "title": "view 1",
+                  "styles": {
+                    "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%"
+                  }
+                },
+                "children": [
+                  {
+                    "type": "image",
+                    "attributes": {
+                      "src": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
+                      "resizeMode": "cover",
+                      "styles": {
+                        "width": "auto",
+                        "maxWidth": "100%",
+                        "borderRadius": 14
+                      }
+                    },
+                    "key": "image-49ojfyhl4d7"
+                  },
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "description": "text element 1 in sample.",
+                      "title": "text 1",
+                      "styles": {
+                        "fontSize": 28,
+                        "fontWeight": "700",
+                        "textAlign": "center",
+                        "color": "#0f172a"
+                      }
+                    },
+                    "children": "Welcome aboard",
+                    "key": "text-3ougfj4mxnh"
+                  },
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "description": "text element 2 in sample.",
+                      "title": "text 2",
+                      "styles": {
+                        "fontSize": 16,
+                        "textAlign": "center",
+                        "color": "#334155",
+                        "paddingHorizontal": 8
+                      }
+                    },
+                    "children": "Swipe through a beautiful, validated carousel sample with images.",
+                    "key": "text-2dol8grshke"
+                  }
+                ],
+                "key": "view-a8hfkdvfy7"
               },
-              "description": "carouselItem element 1 in sample.",
-              "title": "carouselItem 1"
+              "key": "carouselItem-5bw9x33s7ie"
             },
-            "children": {
-              "type": "view",
+            {
+              "type": "carouselItem",
               "attributes": {
-                "style": {
-                  "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"
-                },
-                "description": "view element 1 in sample.",
-                "title": "view 1"
+                "description": "carouselItem element 2 in sample.",
+                "title": "carouselItem 2",
+                "styles": {
+                  "minWidth": 0
+                }
               },
-              "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
-                    }
+              "children": {
+                "type": "view",
+                "attributes": {
+                  "description": "view element 2 in sample.",
+                  "title": "view 2",
+                  "styles": {
+                    "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%"
                   }
                 },
-                {
-                  "type": "text",
-                  "attributes": {
-                    "style": {
-                      "fontSize": 28,
-                      "fontWeight": "700",
-                      "textAlign": "center",
-                      "color": "#0f172a"
+                "children": [
+                  {
+                    "type": "image",
+                    "attributes": {
+                      "src": "https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=80",
+                      "resizeMode": "cover",
+                      "styles": {
+                        "width": "auto",
+                        "maxWidth": "100%",
+                        "borderRadius": 14
+                      }
                     },
-                    "description": "text element 1 in sample.",
-                    "title": "text 1"
+                    "key": "image-riwntk91k9"
                   },
-                  "children": "Welcome aboard"
-                },
-                {
-                  "type": "text",
-                  "attributes": {
-                    "style": {
-                      "fontSize": 16,
-                      "textAlign": "center",
-                      "color": "#334155",
-                      "paddingHorizontal": 8
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "description": "text element 3 in sample.",
+                      "title": "text 3",
+                      "styles": {
+                        "fontSize": 28,
+                        "fontWeight": "700",
+                        "textAlign": "center",
+                        "color": "#0f172a"
+                      }
                     },
-                    "description": "text element 2 in sample.",
-                    "title": "text 2"
+                    "children": "Discover features",
+                    "key": "text-hmuk6f7ml4v"
                   },
-                  "children": "Swipe through a beautiful, validated carousel sample with images."
-                }
-              ]
-            }
-          },
-          {
-            "type": "carouselItem",
-            "attributes": {
-              "style": {
-                "minWidth": 0
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "description": "text element 4 in sample.",
+                      "title": "text 4",
+                      "styles": {
+                        "fontSize": 16,
+                        "textAlign": "center",
+                        "color": "#334155",
+                        "paddingHorizontal": 8
+                      }
+                    },
+                    "children": "Dots + buttons are included, and slide sizing comes from the carousel CSS.",
+                    "key": "text-dnhhoqiiri"
+                  }
+                ],
+                "key": "view-9hyw3wys30w"
               },
-              "description": "carouselItem element 2 in sample.",
-              "title": "carouselItem 2"
+              "key": "carouselItem-lyq2hr0qh8h"
             },
-            "children": {
-              "type": "view",
+            {
+              "type": "carouselItem",
               "attributes": {
-                "style": {
-                  "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"
-                },
-                "description": "view element 2 in sample.",
-                "title": "view 2"
+                "description": "carouselItem element 3 in sample.",
+                "title": "carouselItem 3",
+                "styles": {
+                  "minWidth": 0
+                }
               },
-              "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
-                    }
+              "children": {
+                "type": "view",
+                "attributes": {
+                  "description": "view element 3 in sample.",
+                  "title": "view 3",
+                  "styles": {
+                    "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%"
                   }
                 },
-                {
-                  "type": "text",
-                  "attributes": {
-                    "style": {
-                      "fontSize": 28,
-                      "fontWeight": "700",
-                      "textAlign": "center",
-                      "color": "#0f172a"
+                "children": [
+                  {
+                    "type": "image",
+                    "attributes": {
+                      "src": "https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1200&q=80",
+                      "resizeMode": "cover",
+                      "styles": {
+                        "width": "auto",
+                        "maxWidth": "100%",
+                        "borderRadius": 14
+                      }
                     },
-                    "description": "text element 3 in sample.",
-                    "title": "text 3"
+                    "key": "image-j9ru3r8g7km"
                   },
-                  "children": "Discover features"
-                },
-                {
-                  "type": "text",
-                  "attributes": {
-                    "style": {
-                      "fontSize": 16,
-                      "textAlign": "center",
-                      "color": "#334155",
-                      "paddingHorizontal": 8
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "description": "text element 5 in sample.",
+                      "title": "text 5",
+                      "styles": {
+                        "fontSize": 28,
+                        "fontWeight": "700",
+                        "textAlign": "center",
+                        "color": "#0f172a"
+                      }
                     },
-                    "description": "text element 4 in sample.",
-                    "title": "text 4"
+                    "children": "Get started",
+                    "key": "text-01u3fwwtkd8p"
                   },
-                  "children": "Dots + buttons are included, and slide sizing comes from the carousel CSS."
-                }
-              ]
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "description": "text element 6 in sample.",
+                      "title": "text 6",
+                      "styles": {
+                        "fontSize": 16,
+                        "textAlign": "center",
+                        "color": "#334155",
+                        "paddingHorizontal": 8
+                      }
+                    },
+                    "children": "This sample stays within validation rules (no string flex shorthand).",
+                    "key": "text-w8rwg9y1hj"
+                  }
+                ],
+                "key": "view-tsjfbzn8kdj"
+              },
+              "key": "carouselItem-6r53yswjyee"
+            }
+          ],
+          "key": "carousel-2qa4gn0ms32"
+        },
+        {
+          "type": "view",
+          "attributes": {
+            "title": "Carousel Controls",
+            "description": "carousel controls view element in sample.",
+            "styles": {
+              "flex": 1,
+              "gap": 24,
+              "alignItems": "center",
+              "paddingTop": 32
             }
           },
-          {
-            "type": "carouselItem",
-            "attributes": {
-              "style": {
-                "minWidth": 0
+          "children": [
+            {
+              "type": "carouselDots",
+              "attributes": {
+                "dotType": "expanding_dot"
               },
-              "description": "carouselItem element 3 in sample.",
-              "title": "carouselItem 3"
+              "key": "carouselDots-r5ji67uoxxg"
             },
-            "children": {
+            {
               "type": "view",
               "attributes": {
-                "style": {
-                  "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%",
+                "title": "Nav Buttons",
+                "description": "navigation buttons wrapper",
+                "styles": {
+                  "flexDirection": "row",
+                  "gap": 12,
+                  "alignItems": "center",
                   "justifyContent": "center"
-                },
-                "description": "view element 3 in sample.",
-                "title": "view 3"
+                }
               },
               "children": [
                 {
-                  "type": "image",
+                  "type": "carouselButtons",
                   "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
+                    "buttonType": ["previous_button"],
+                    "styles": {
+                      "backgroundColor": "#6366f1",
+                      "borderRadius": 12,
+                      "padding": "12px 24px",
+                      "minWidth": 100
                     }
-                  }
-                },
-                {
-                  "type": "text",
-                  "attributes": {
-                    "style": {
-                      "fontSize": 28,
-                      "fontWeight": "700",
-                      "textAlign": "center",
-                      "color": "#0f172a"
-                    },
-                    "description": "text element 5 in sample.",
-                    "title": "text 5"
                   },
-                  "children": "Get started"
+                  "key": "carouselButtons-prev"
                 },
                 {
-                  "type": "text",
+                  "type": "carouselButtons",
                   "attributes": {
-                    "style": {
-                      "fontSize": 16,
-                      "textAlign": "center",
-                      "color": "#334155",
-                      "paddingHorizontal": 8
-                    },
-                    "description": "text element 6 in sample.",
-                    "title": "text 6"
+                    "buttonType": ["next_button"],
+                    "styles": {
+                      "backgroundColor": "#8b5cf6",
+                      "borderRadius": 12,
+                      "padding": "12px 24px",
+                      "minWidth": 100
+                    }
                   },
-                  "children": "This sample stays within validation rules (no string flex shorthand)."
+                  "key": "carouselButtons-next"
                 }
-              ]
+              ],
+              "key": "view-nav-buttons"
             }
-          }
-        ]
-      },
-      {
-        "type": "carouselDots",
-        "attributes": {
-          "dotType": "expanding_dot"
-        }
-      },
-      {
-        "type": "carouselButtons",
-        "attributes": {
-          "buttonType": [
-            "previous_button",
-            "next_button",
-            "skip_button"
           ],
-          "skipNumber": 3
+          "key": "view-controls-wrapper"
         }
-      }
-    ],
-    "attributes": {
-      "description": "carouselProvider element 1 in sample.",
-      "title": "carouselProvider 1"
-    }
+      ],
+      "attributes": {
+        "description": "carouselProvider element 1 in sample.",
+        "title": "carouselProvider 1",
+        "styles": {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 24,
+          "padding": "32px",
+          "boxShadow": "0 4px 20px rgba(0, 0, 0, 0.08)",
+          "maxWidth": "600px",
+          "margin": "0 auto"
+        }
+      },
+      "key": "carouselProvider-152n4dkqvam"
+    },
+    "key": "Main-u1cavjag9sr"
   }
 }

package/src/assets/samples/getSamples.ts

@@ -9,6 +9,10 @@ import unmigratedBuilder1 from './unmigrated-builder1.json';
 import unmigratedBuilder1_1_1 from './unmigrated-builder-1.1.1.json';
 import paywall1 from './paywall-1.json';
 import paywall2 from './paywall-2.json';
+import paywallBackOffer from './paywall-back-offer.json';
+import paywallNotificationOffer from './paywall-notification-offer.json';
+import paywallAppOpenOffer from './paywall-app-open-offer.json';
+import paywallAppDeleteOffer from './paywall-app-delete-offer.json';
 import vpnOnboard1 from './vpn-onboard-1.json';
 import vpnOnboard2 from './vpn-onboard-2.json';
 import vpnOnboard3 from './vpn-onboard-3.json';
@@ -45,6 +49,10 @@ export function getSamples(): Project[] {
     normalizeSample(unmigratedBuilder1_1_1),
     normalizeSample(paywall1),
     normalizeSample(paywall2),
+    normalizeSample(paywallBackOffer),
+    normalizeSample(paywallNotificationOffer),
+    normalizeSample(paywallAppOpenOffer),
+    normalizeSample(paywallAppDeleteOffer),
     ...onboardSamples,
   ];
 }
@@ -70,5 +78,12 @@ export function getOnboardSamples(): Project[] {
 }
 
 export function getPaywallSamples(): Project[] {
-  return [normalizeSample(paywall1), normalizeSample(paywall2)];
+  return [
+    normalizeSample(paywall1),
+    normalizeSample(paywall2),
+    normalizeSample(paywallBackOffer),
+    normalizeSample(paywallNotificationOffer),
+    normalizeSample(paywallAppOpenOffer),
+    normalizeSample(paywallAppDeleteOffer),
+  ];
 }