@developer_tribe/react-builder 1.2.22 → 1.2.24

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

@@ -82,9 +82,34 @@
     "attributes": {
       "useSafeAreaView": true,
       "description": "Ekranın ana kapsayıcısı. (#1)",
-      "title": "Main 1"
+      "title": "Main 1",
+      "styles": {
+        "paddingBottom": 16
+      }
     },
     "children": [
+      {
+        "type": "StatusBarColor",
+        "attributes": {
+          "title": "Status Bar Color",
+          "description": "Status bar background color.",
+          "styles": {
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": null
+      },
+      {
+        "type": "NavigationBarColor",
+        "attributes": {
+          "title": "Navigation Bar Color",
+          "description": "Navigation bar background color.",
+          "styles": {
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": null
+      },
       {
         "type": "OnboardProvider",
         "children": [
@@ -101,7 +126,7 @@
                       "description": "Sayfa başlığı. (#1)",
                       "title": "OnboardTitle 1",
                       "styles": {
-                        "color": "#FDFDFD",
+                        "color": "THEME_COLORS.ONBOARD_TITLE",
                         "textAlign": "center",
                         "marginTop": 40
                       }
@@ -124,7 +149,7 @@
                       "description": "Sayfa alt başlığı. (#1)",
                       "title": "OnboardSubtitle 1",
                       "styles": {
-                        "color": "#C7C7C7",
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE",
                         "fontSize": 16,
                         "textAlign": "center"
                       }
@@ -147,7 +172,7 @@
                       "description": "Sayfa başlığı. (#2)",
                       "title": "OnboardTitle 2",
                       "styles": {
-                        "color": "#FDFDFD",
+                        "color": "THEME_COLORS.ONBOARD_TITLE",
                         "textAlign": "center",
                         "marginTop": 40
                       }
@@ -160,7 +185,7 @@
                       "description": "Sayfa alt başlığı. (#2)",
                       "title": "OnboardSubtitle 2",
                       "styles": {
-                        "color": "#C7C7C7",
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE",
                         "fontSize": 16,
                         "textAlign": "center"
                       }
@@ -183,7 +208,7 @@
                       "description": "Sayfa başlığı. (#3)",
                       "title": "OnboardTitle 3",
                       "styles": {
-                        "color": "#FDFDFD",
+                        "color": "THEME_COLORS.ONBOARD_TITLE",
                         "textAlign": "center",
                         "marginTop": 40
                       }
@@ -196,7 +221,7 @@
                       "description": "Sayfa alt başlığı. (#3)",
                       "title": "OnboardSubtitle 3",
                       "styles": {
-                        "color": "#C7C7C7",
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE",
                         "fontSize": 16,
                         "textAlign": "center"
                       }
@@ -219,7 +244,7 @@
                       "description": "Sayfa başlığı. (#4)",
                       "title": "OnboardTitle 4",
                       "styles": {
-                        "color": "#FDFDFD",
+                        "color": "THEME_COLORS.ONBOARD_TITLE",
                         "textAlign": "center",
                         "marginTop": 40
                       }
@@ -232,7 +257,7 @@
                       "description": "Sayfa alt başlığı. (#4)",
                       "title": "OnboardSubtitle 4",
                       "styles": {
-                        "color": "#C7C7C7",
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE",
                         "fontSize": 16,
                         "textAlign": "center"
                       }
@@ -248,7 +273,10 @@
             ],
             "attributes": {
               "description": "Onboarding ana yapısı. (#1)",
-              "title": "Onboard 1"
+              "title": "Onboard 1",
+              "styles": {
+                "flex": 1
+              }
             }
           },
           {
@@ -257,10 +285,22 @@
               "dotType": "expanding_dot",
               "dot_thickness": 20,
               "inactive_dot_opacity": 0.3,
-              "inactive_dot_color": "#E4E5E7",
-              "active_dot_color": "#007AFF",
+              "inactive_dot_color": "STATIC_COLORS.ONBOARD_DOT_INACTIVE",
+              "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
+              "styles": {
+                "paddingVertical": 12
+              }
+            }
+          },
+          {
+            "type": "Separator",
+            "attributes": {
+              "title": "Separator",
+              "description": "Horizontal separator line",
               "styles": {
-                "flex": 2
+                "width": "100%",
+                "height": 2,
+                "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
               }
             }
           },
@@ -273,8 +313,9 @@
               "description": "Sayfa buton grubu. (#1)",
               "title": "OnboardButtons 1",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -282,8 +323,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "#A9AAAC",
-                  "button_background_color": "#ffffff00",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -300,8 +341,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0066FF",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -325,8 +366,9 @@
               "description": "Sayfa buton grubu. (#2)",
               "title": "OnboardButtons 2",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -334,8 +376,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "#A9AAAC",
-                  "button_background_color": "#ffffff00",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Permission",
@@ -356,8 +398,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0066FF",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -385,8 +427,9 @@
               "description": "Sayfa buton grubu. (#3)",
               "title": "OnboardButtons 3",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -394,8 +437,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "#A9AAAC",
-                  "button_background_color": "#ffffff00",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.TRANSPARENT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -412,8 +455,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0066FF",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -441,8 +484,9 @@
               "description": "Sayfa buton grubu. (#4)",
               "title": "OnboardButtons 4",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -450,8 +494,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0066FF",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -475,7 +519,8 @@
               "title": "Onboard Footer Wrap",
               "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2
+                "marginHorizontal": 25,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -484,14 +529,14 @@
                 "attributes": {
                   "textLocalizationKey": "view.onboarding.footer.description",
                   "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-                  "linkedWordFirstColor": "#81838F",
+                  "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
                   "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-                  "linkedWordSecondColor": "#81838F",
+                  "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {
                     "gap": 8,
-                    "color": "#81838F"
+                    "color": "THEME_COLORS.FOOTER_TEXT"
                   }
                 }
               }