@developer_tribe/react-builder 1.1.0 → 1.2.0

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

@@ -1,6 +1,7 @@
 {
   "name": "carousel-sample",
-  "version": "1.0.0",
+  "version": "1.1.0",
+  "type": "other",
   "appConfig": {
     "theme": "light"
   },
@@ -19,7 +20,6 @@
             "type": "carouselItem",
             "attributes": {
               "style": {
-                "flex": "0 0 100%",
                 "minWidth": 0
               }
             },
@@ -27,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
               }
             },
@@ -51,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
               }
             },
@@ -75,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)."
+                }
+              ]
             }
           }
         ]
@@ -98,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

@@ -1,88 +1,70 @@
-import { Project, ProjectBase } from '../../types/Project';
+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';
 import vpnOnboard3 from './vpn-onboard-3.json';
 import vpnOnboard4 from './vpn-onboard-4.json';
 import vpnOnboard5 from './vpn-onboard-5.json';
 import vpnOnboard6 from './vpn-onboard-6.json';
-import { novaToJson } from '../../utils/novaToJson';
 import { defaultAppConfig } from '../../types/PreviewConfig';
 
+function normalizeSample(sample: any): Project {
+  return {
+    ...sample,
+    appConfig: { ...defaultAppConfig, ...(sample as any).appConfig },
+  } as Project;
+}
+
 export function getSamples(): Project[] {
-  const legacySamples = [
-    {
-      ...vpnOnboard1,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard1.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard2,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard2.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard3,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard3.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard4,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard4.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard5,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard5.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard6,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard6.appConfig },
-    } as ProjectBase<unknown>,
-  ];
-  legacySamples.forEach((sample) => {
-    sample.data = novaToJson(sample);
-  });
+  const onboardSamples = [
+    vpnOnboard1,
+    vpnOnboard2,
+    vpnOnboard3,
+    vpnOnboard4,
+    vpnOnboard5,
+    vpnOnboard6,
+  ].map(normalizeSample);
 
   return [
-    simple1 as Project,
-    simple2 as Project,
-    carouselSample as Project,
-    ...legacySamples,
+    normalizeSample(simple1),
+    normalizeSample(simple2),
+    normalizeSample(carouselSample),
+    normalizeSample(unvalidatedBuilder1),
+    normalizeSample(unvalidatedCrash1),
+    normalizeSample(unvalidatedCrashComponent1),
+    normalizeSample(unmigratedBuilder1),
+    normalizeSample(paywall1),
+    ...onboardSamples,
   ];
 }
 
 export function getBasicSamples(): Project[] {
-  return [simple1 as Project, simple2 as Project, carouselSample as Project];
+  return [
+    normalizeSample(simple1),
+    normalizeSample(simple2),
+    normalizeSample(carouselSample),
+    normalizeSample(unvalidatedBuilder1),
+  ];
 }
 
 export function getOnboardSamples(): Project[] {
-  const legacySamples = [
-    {
-      ...vpnOnboard1,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard1.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard2,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard2.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard3,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard3.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard4,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard4.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard5,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard5.appConfig },
-    } as ProjectBase<unknown>,
-    {
-      ...vpnOnboard6,
-      appConfig: { ...defaultAppConfig, ...vpnOnboard6.appConfig },
-    } as ProjectBase<unknown>,
-  ];
-  legacySamples.forEach((sample) => {
-    sample.data = novaToJson(sample);
-  });
-  return legacySamples;
+  return [
+    vpnOnboard1,
+    vpnOnboard2,
+    vpnOnboard3,
+    vpnOnboard4,
+    vpnOnboard5,
+    vpnOnboard6,
+  ].map(normalizeSample);
+}
+
+export function getPaywallSamples(): Project[] {
+  return [normalizeSample(paywall1)];
 }

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

@@ -0,0 +1,268 @@
+{
+  "name": "Simple Paywall",
+  "version": "1.1.0",
+  "type": "paywall",
+  "appConfig": {
+    "theme": "light",
+    "isRtl": false,
+    "screenStyle": {
+      "light": {
+        "backgroundColor": "#FDFDFD",
+        "color": "#161827"
+      },
+      "dark": {
+        "backgroundColor": "#12131A",
+        "color": "#E9EBF9"
+      }
+    },
+    "defaultLanguage": "en"
+  },
+  "data": {
+    "type": "Main",
+    "isMain": true,
+    "attributes": {
+      "useSafeAreaView": true
+    },
+    "children": [
+      {
+        "type": "PaywallProvider",
+        "attributes": {
+          "style": {
+            "scrollable": true,
+            "flexDirection": "column",
+            "alignItems": "stretch",
+            "justifyContent": "flex-start",
+            "position": "relative",
+            "paddingTop": 56,
+            "paddingHorizontal": 16,
+            "paddingBottom": 16,
+            "gap": 12,
+            "backgroundColor": "#F5F7FA"
+          }
+        },
+        "children": [
+          {
+            "type": "BackgroundImage",
+            "attributes": {
+              "src": "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80",
+              "resizeMode": "cover"
+            },
+            "children": null
+          },
+          {
+            "type": "PaywallCloseButton",
+            "attributes": {
+              "style": {
+                "position": "absolute",
+                "top": 16,
+                "left": 16,
+                "width": 32,
+                "height": 32,
+                "borderRadius": 16,
+                "backgroundColor": "#FFFFFF",
+                "zIndex": 10
+              }
+            },
+            "children": null
+          },
+          {
+            "type": "View",
+            "attributes": {
+              "style": {
+                "flexDirection": "column",
+                "gap": 0,
+                "marginTop": "16%"
+              }
+            },
+            "children": [
+              {
+                "type": "View",
+                "attributes": {
+                  "style": {
+                    "flexDirection": "row",
+                    "alignItems": "center",
+                    "gap": 8,
+                    "paddingVertical": 8,
+                    "paddingHorizontal": 12
+                  }
+                },
+                "children": [
+                  {
+                    "type": "BIcon",
+                    "attributes": {
+                      "iconType": "check",
+                      "strokeWidth": 3,
+                      "style": {
+                        "color": "#22c55e",
+                        "fontSize": "16",
+                        "flex": 0
+                      }
+                    },
+                    "children": null
+                  },
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "style": {
+                        "flex": 1,
+                        "color": "#FFFFFF",
+                        "fontWeight": "700"
+                      }
+                    },
+                    "children": "@benefit1 — Unlimited access"
+                  }
+                ]
+              },
+              {
+                "type": "View",
+                "attributes": {
+                  "style": {
+                    "flexDirection": "row",
+                    "alignItems": "center",
+                    "gap": 8,
+                    "paddingVertical": 8,
+                    "paddingHorizontal": 12
+                  }
+                },
+                "children": [
+                  {
+                    "type": "BIcon",
+                    "attributes": {
+                      "iconType": "check",
+                      "strokeWidth": 3,
+                      "style": {
+                        "color": "#22c55e",
+                        "fontSize": "16",
+                        "flex": 0
+                      }
+                    },
+                    "children": null
+                  },
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "style": {
+                        "flex": 1,
+                        "color": "#FFFFFF",
+                        "fontWeight": "700"
+                      }
+                    },
+                    "children": "@benefit2 — 7-day free trial"
+                  }
+                ]
+              },
+              {
+                "type": "View",
+                "attributes": {
+                  "style": {
+                    "flexDirection": "row",
+                    "alignItems": "center",
+                    "gap": 8,
+                    "paddingVertical": 8,
+                    "paddingHorizontal": 12
+                  }
+                },
+                "children": [
+                  {
+                    "type": "BIcon",
+                    "attributes": {
+                      "iconType": "check",
+                      "strokeWidth": 3,
+                      "style": {
+                        "color": "#22c55e",
+                        "fontSize": "16",
+                        "flex": 0
+                      }
+                    },
+                    "children": null
+                  },
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "style": {
+                        "flex": 1,
+                        "color": "#FFFFFF",
+                        "fontWeight": "700"
+                      }
+                    },
+                    "children": "@benefit3 — Cancel anytime"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "PaywallOptions",
+            "attributes": {
+              "style": {
+                "borderRadius": 12,
+                "backgroundColor": "#FFFFFF"
+              }
+            },
+            "children": [
+              {
+                "type": "RadioButton",
+                "attributes": {
+                  "style": {
+                    "flex": 1
+                  }
+                },
+                "children": null
+              },
+              {
+                "type": "text",
+                "attributes": {
+                  "style": {
+                    "flex": 4
+                  }
+                },
+                "children": "@productDescription — Unlock all premium features for a month."
+              },
+              {
+                "type": "text",
+                "attributes": {
+                  "style": {
+                    "flex": 1,
+                    "textAlign": "right"
+                  }
+                },
+                "children": "@localizedPrice"
+              },
+              {
+                "type": "BIcon",
+                "attributes": {
+                  "iconType": "chevron-right",
+                  "size": 16,
+                  "style": {
+                    "marginRight": 4,
+                    "flex": 0,
+                    "width": 32
+                  }
+                },
+                "children": null
+              }
+            ]
+          },
+          {
+            "type": "View",
+            "attributes": {
+              "style": {
+                "flex": 1,
+                "flexDirection": "column",
+                "justifyContent": "flex-end",
+                "alignItems": "stretch",
+                "paddingBottom": "50px"
+              }
+            },
+            "children": [
+              {
+                "type": "PaywallSubscribeButton",
+                "children": "Subscribe"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}