@developer_tribe/react-builder 0.1.0 → 0.1.2

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

@@ -0,0 +1,108 @@
+{
+  "name": "carousel-sample",
+  "version": "1.0.0",
+  "previewConfig": {
+    "theme": "light",
+    "screenSize": { "width": 375, "height": 812 }
+  },
+  "data": {
+    "type": "carouselProvider",
+    "children": [
+      {
+        "type": "carousel",
+        "attributes": {
+          "loop": true,
+          "align": "center",
+          "dragFree": true
+        },
+        "children": [
+          {
+            "type": "carouselItem",
+            "attributes": {
+              "style": {
+                "flex": "0 0 100%",
+                "minWidth": 0
+              }
+            },
+            "children": {
+              "type": "view",
+              "attributes": {
+                "style": {
+                  "padding": "20px",
+                  "backgroundColor": "#f5f5f5",
+                  "borderRadius": "8px",
+                  "textAlign": "center"
+                }
+              },
+              "children": {
+                "type": "text",
+                "children": "Welcome to our app!"
+              }
+            }
+          },
+          {
+            "type": "carouselItem",
+            "attributes": {
+              "style": {
+                "flex": "0 0 100%",
+                "minWidth": 0
+              }
+            },
+            "children": {
+              "type": "view",
+              "attributes": {
+                "style": {
+                  "padding": "20px",
+                  "backgroundColor": "#e8f5e9",
+                  "borderRadius": "8px",
+                  "textAlign": "center"
+                }
+              },
+              "children": {
+                "type": "text",
+                "children": "Discover amazing features"
+              }
+            }
+          },
+          {
+            "type": "carouselItem",
+            "attributes": {
+              "style": {
+                "flex": "0 0 100%",
+                "minWidth": 0
+              }
+            },
+            "children": {
+              "type": "view",
+              "attributes": {
+                "style": {
+                  "padding": "20px",
+                  "backgroundColor": "#e3f2fd",
+                  "borderRadius": "8px",
+                  "textAlign": "center"
+                }
+              },
+              "children": {
+                "type": "text",
+                "children": "Get started now!"
+              }
+            }
+          }
+        ]
+      },
+      {
+        "type": "carouselDots",
+        "attributes": {
+          "dotType": "expanding_dot"
+        }
+      },
+      {
+        "type": "carouselButtons",
+        "attributes": {
+          "buttonType": ["previous_button", "next_button", "skip_button"],
+          "skipNumber": 3
+        }
+      }
+    ]
+  }
+}

package/src/assets/samples/getSamples.ts

@@ -0,0 +1,28 @@
+import { Project, ProjectBase } from '../../types/Project';
+import simple1 from './simple-1.json';
+import simple2 from './simple-2.json';
+import carouselSample from './carousel-sample.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 { novaToJson } from '../../utils/novaToJson';
+
+export function getSamples(): Project[] {
+  const legacySamples = [
+    { ...vpnOnboard1 } as ProjectBase<unknown>,
+    { ...vpnOnboard2 } as ProjectBase<unknown>,
+    { ...vpnOnboard3 } as ProjectBase<unknown>,
+    { ...vpnOnboard4 } as ProjectBase<unknown>,
+  ];
+  legacySamples.forEach((sample) => {
+    sample.data = novaToJson(sample);
+  });
+
+  return [
+    simple1 as Project,
+    simple2 as Project,
+    carouselSample as Project,
+    ...legacySamples,
+  ];
+}

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

@@ -0,0 +1,46 @@
+{
+  "name": "hello-world",
+  "version": "1.0.0",
+  "previewConfig": {
+    "theme": "light",
+    "screenSize": { "width": 375, "height": 812 },
+    "isRtl": false,
+    "screenStyle": {
+      "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"
+    },
+    "children": [
+      {
+        "type": "text",
+        "children": "Hello, world!",
+        "attributes": {
+          "color": "#111827",
+          "fontSize": 24,
+          "fontWeight": "600"
+        }
+      },
+      {
+        "type": "text",
+        "children": "Welcome to react-native-builder",
+        "attributes": {
+          "color": "#6B7280",
+          "fontSize": 14,
+          "fontWeight": "400"
+        }
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,233 @@
+{
+  "name": "hello-world-2-advanced",
+  "version": "1.0.0",
+  "previewConfig": {
+    "theme": "light",
+    "screenSize": { "width": 390, "height": 844 },
+    "isRtl": false,
+    "screenStyle": {
+      "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },
+      "dark": { "backgroundColor": "#12131A", "color": "#E9EBF9" }
+    },
+    "defaultLanguage": "en"
+  },
+  "data": {
+    "type": "view",
+    "attributes": {
+      "scrollable": true,
+      "flexDirection": "column",
+      "alignItems": "stretch",
+      "justifyContent": "flex-start",
+      "gap": 16,
+      "padding": 16,
+      "backgroundColor": "#F3F4F6"
+    },
+    "children": [
+      {
+        "type": "view",
+        "attributes": {
+          "flexDirection": "row",
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "padding": 12,
+          "backgroundColor": "#111827",
+          "borderRadius": 12
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Dashboard",
+            "attributes": {
+              "color": "#FFFFFF",
+              "fontSize": 20,
+              "fontWeight": "600"
+            }
+          },
+          {
+            "type": "view",
+            "attributes": { "flexDirection": "row", "gap": 8 },
+            "children": [
+              {
+                "type": "text",
+                "children": "Help",
+                "attributes": { "color": "#D1D5DB", "fontSize": 14 }
+              },
+              {
+                "type": "text",
+                "children": "Profile",
+                "attributes": { "color": "#D1D5DB", "fontSize": 14 }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "image",
+        "attributes": {
+          "src": "https://picsum.photos/720/320",
+          "width": 358,
+          "height": 160,
+          "borderRadius": 12,
+          "resizeMode": "cover"
+        },
+        "children": null
+      },
+      {
+        "type": "view",
+        "attributes": {
+          "flexDirection": "column",
+          "gap": 8,
+          "padding": 12,
+          "backgroundColor": "#FFFFFF",
+          "borderRadius": 12
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Welcome back!",
+            "attributes": {
+              "color": "#111827",
+              "fontSize": 18,
+              "fontWeight": "600"
+            }
+          },
+          {
+            "type": "text",
+            "children": "Here's what's new today.",
+            "attributes": { "color": "#6B7280", "fontSize": 14 }
+          }
+        ]
+      },
+      {
+        "type": "view",
+        "attributes": {
+          "flexDirection": "column",
+          "gap": 12
+        },
+        "children": [
+          {
+            "type": "view",
+            "attributes": {
+              "flexDirection": "row",
+              "alignItems": "center",
+              "justifyContent": "space-between",
+              "padding": 12,
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": 8
+            },
+            "children": [
+              {
+                "type": "text",
+                "children": "Task 1",
+                "attributes": {
+                  "color": "#111827",
+                  "fontSize": 16,
+                  "fontWeight": "500"
+                }
+              },
+              {
+                "type": "text",
+                "children": "Due today",
+                "attributes": {
+                  "color": "#059669",
+                  "fontSize": 12,
+                  "fontWeight": "600"
+                }
+              }
+            ]
+          },
+          {
+            "type": "view",
+            "attributes": {
+              "flexDirection": "row",
+              "alignItems": "center",
+              "justifyContent": "space-between",
+              "padding": 12,
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": 8
+            },
+            "children": [
+              {
+                "type": "text",
+                "children": "Task 2",
+                "attributes": {
+                  "color": "#111827",
+                  "fontSize": 16,
+                  "fontWeight": "500"
+                }
+              },
+              {
+                "type": "text",
+                "children": "2 days left",
+                "attributes": {
+                  "color": "#D97706",
+                  "fontSize": 12,
+                  "fontWeight": "600"
+                }
+              }
+            ]
+          },
+          {
+            "type": "view",
+            "attributes": {
+              "flexDirection": "row",
+              "alignItems": "center",
+              "justifyContent": "space-between",
+              "padding": 12,
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": 8
+            },
+            "children": [
+              {
+                "type": "text",
+                "children": "Task 3",
+                "attributes": {
+                  "color": "#111827",
+                  "fontSize": 16,
+                  "fontWeight": "500"
+                }
+              },
+              {
+                "type": "text",
+                "children": "Completed",
+                "attributes": {
+                  "color": "#6B7280",
+                  "fontSize": 12,
+                  "fontWeight": "600"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "view",
+        "attributes": {
+          "flexDirection": "row",
+          "alignItems": "center",
+          "justifyContent": "space-around",
+          "padding": 12,
+          "backgroundColor": "#111827",
+          "borderRadius": 12
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Home",
+            "attributes": { "color": "#FFFFFF", "fontSize": 14 }
+          },
+          {
+            "type": "text",
+            "children": "Search",
+            "attributes": { "color": "#9CA3AF", "fontSize": 14 }
+          },
+          {
+            "type": "text",
+            "children": "Settings",
+            "attributes": { "color": "#9CA3AF", "fontSize": 14 }
+          }
+        ]
+      }
+    ]
+  }
+}