impaktapps-ui-builder 0.0.382457 → 1.0.0

package/app/(tabs)/index.tsx

@@ -0,0 +1,1134 @@
+
+import React, { useEffect } from "react";
+import { View, Text, Button, KeyboardAvoidingView, Platform, StyleSheet, ScrollView } from "react-native";
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import { DndProvider } from "react-dnd";
+import { ConfigProvider, enUS } from "@/utils/configProvider";
+import { HTML5Backend } from "react-dnd-html5-backend";
+// import { useParams } from "react-router-dom";
+import "react-native-get-random-values";
+import { CanvasPanel } from "@/page/App/module/CanvasPanel";
+import { useInitBuilderApp } from "@/hooks/useInitApp";
+import { WidgetType } from "@codemirror/view";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { Unsubscribe } from "redux";
+import { startAppListening } from "@/store";
+import { setupComponentsListeners } from "@/redux/currentApp/components/componentsListener";
+import { setupActionListeners } from "@/redux/currentApp/action/actionListener";
+import { setupExecutionListeners } from "@/redux/currentApp/executionTree/executionListener";
+import { setupConfigListeners } from "@/redux/config/configListener";
+import 'regenerator-runtime/runtime';
+import { ImpaktProps } from "@/lib";
+
+const configData = {
+  appInfo: {},
+  actions: [],
+  components: {
+    root: {
+      h: 0,
+      w: 0,
+      x: -1,
+      y: -1,
+      z: 0,
+      minH: 0,
+      minW: 0,
+      mode: "page",
+      type: "DOT_PANEL",
+      props: {
+        pageSortedKey: ["page1"],
+        currentPageIndex: 0,
+      },
+      version: 0,
+      showName: "root",
+      namePrefix: "",
+      parentNode: "",
+      displayName: "root",
+      childrenNode: ["page1"],
+      containerType: "EDITOR_DOT_PANEL",
+    },
+    page1: {
+      h: 0,
+      w: 0,
+      x: -1,
+      y: -1,
+      z: 0,
+      minH: 0,
+      minW: 0,
+      type: "PAGE_NODE",
+      props: {
+        mode: "page",
+        layout: "default",
+        templateName: "layout2",
+      },
+      version: 0,
+      showName: "page",
+      parentNode: "root",
+      displayName: "page1",
+      childrenNode: ["bodySection1"],
+      containerType: "EDITOR_PAGE_SQUARE",
+    },
+    bodySection1: {
+      h: 0,
+      w: 0,
+      x: -1,
+      y: -1,
+      z: 0,
+      minH: 0,
+      minW: 0,
+      type: "SECTION_NODE",
+      props: {
+        style: {
+          padding: {
+            mode: "all",
+            size: "24",
+          },
+        },
+        viewSortedKey: ["bodySection1-bodySectionContainer1"],
+        defaultViewKey: "sub-page1",
+        currentViewIndex: 0,
+        sectionViewConfigs: [
+          {
+            id: "9ac3c766-3320-4f0f-a119-cd57b621127b",
+            key: "sub-page1",
+            path: "sub-page1",
+            viewDisplayName: "bodySection1-bodySectionContainer1",
+          },
+        ],
+      },
+      version: 0,
+      showName: "bodySection",
+      parentNode: "page1",
+      displayName: "bodySection1",
+      childrenNode: ["bodySection1-bodySectionContainer1"],
+      containerType: "EDITOR_LAYOUT_SQUARE",
+    },
+    "bodySection1-bodySectionContainer1": {
+      h: 0,
+      w: 0,
+      x: -1,
+      y: -1,
+      z: 0,
+      minH: 0,
+      minW: 0,
+      type: "CONTAINER_NODE",
+      props: {},
+      version: 0,
+      showName: "bodySection1-bodySectionContainer1",
+      parentNode: "bodySection1",
+      displayName: "bodySection1-bodySectionContainer1",
+      childrenNode: ["LabelNative1", "LabelNative2"],
+      containerType: "EDITOR_DOT_PANEL",
+    },
+    LabelNative1: {
+      showName: "LabelNative",
+      label: "Raghav11111",
+      "type": "LABEL_NATIVE_WIDGET",
+      "widgetType": "LABEL_NATIVE_WIDGET",
+      displayName: "LabelNative1",
+      containerType: "EDITOR_SCALE_SQUARE",
+      parentNode: "bodySection1-bodySectionContainer1",
+      childrenNode: [],
+      props: { label: "RaghavRaghav231434" },
+    },
+    LabelNative2: {
+      showName: "LabelNative",
+      label: "Raghav2777",
+      "type": "LABEL_NATIVE_WIDGET",
+      "widgetType": "LABEL_NATIVE_WIDGET",
+      displayName: "LabelNative1",
+      containerType: "EDITOR_SCALE_SQUARE",
+      parentNode: "bodySection1-bodySectionContainer1",
+      childrenNode: [],
+      props: { label: "Raghav2" },
+    }
+  },
+  style: {},
+  resource: [],
+};
+
+export const loginFinal5 = {
+  "action": [
+    {
+      "actionType": "restapi",
+      "displayName": "restapi1",
+      "resourceID": "f090edd8-9040-4f27-ad80-6a402613b330",
+      "actionID": "aa9b9004-3351-458a-9052-2ee48febc2a7",
+      "content": {
+        "resourceName": "authenticate",
+        "urlParams": [],
+        "headers": [],
+        "cookies": [],
+        "authentication": "none",
+        "baseUrl": "http://52.183.132.161/walletBackend/auth/authenticate?ruleId=main_rule&groupId=com&artifactId=wallet&version=1.0.0",
+        "authContent": {},
+        "certs": {
+          "caCert": "",
+          "clientKey": "",
+          "clientCert": "",
+          "mode": "verify-full"
+        },
+        "method": "POST",
+        "bodyType": "form-data",
+        "body": [
+          {
+            "key": "message_type",
+            "type": "String",
+            "value": "Authenticate"
+          },
+          {
+            "key": "pin",
+            "type": "Number",
+            "value": "{{+InputNativeWidget2.value}}"
+          },
+          {
+            "key": "phone_number",
+            "type": "String",
+            "value": "{{phone_number.value}}"
+          }
+        ],
+        "successEvent": [
+          {
+            "actionType": "showNotification",
+            "id": "events-cf61f0f2-eb89-4dc9-9d46-82f75f36be45",
+            "eventType": "success",
+            "title": "api success",
+            "notificationType": "success"
+          }
+        ],
+        "$dynamicAttrPaths": [],
+        "failedEvent": [
+          {
+            "actionType": "showNotification",
+            "id": "events-8bd249be-f6df-41dd-be31-5db7868a0f11",
+            "eventType": "fail",
+            "title": "api failed",
+            "notificationType": "error"
+          }
+        ]
+      },
+      "isVirtualResource": false,
+      "transformer": {
+        "rawData": "",
+        "enable": false
+      },
+      "triggerMode": "manually",
+      "config": {
+        "public": false,
+        "advancedConfig": {
+          "runtime": "none",
+          "pages": [],
+          "delayWhenLoaded": "",
+          "displayLoadingPage": false,
+          "isPeriodically": false,
+          "periodInterval": ""
+        },
+        "mockConfig": {
+          "enabled": false,
+          "enableForReleasedApp": false,
+          "mockData": ""
+        }
+      }
+    }
+  ],
+  "components": {
+    "root": {
+      "version": 0,
+      "displayName": "root",
+      "parentNode": "",
+      "showName": "root",
+      "childrenNode": [
+        "page1"
+      ],
+      "namePrefix": "impakt",
+      "type": "DOT_PANEL",
+      "containerType": "EDITOR_DOT_PANEL",
+      "h": 0,
+      "w": 0,
+      "minH": 0,
+      "minW": 0,
+      "x": -1,
+      "y": -1,
+      "z": 0,
+      "props": {
+        "currentPageIndex": 0,
+        "pageSortedKey": [
+          "page1"
+        ],
+        "$dynamicAttrPaths": []
+      }
+    },
+    "page1": {
+      "version": 0,
+      "displayName": "page1",
+      "parentNode": "root",
+      "showName": "page",
+      "childrenNode": [
+        "bodySection1"
+      ],
+      "type": "PAGE_NODE",
+      "containerType": "EDITOR_PAGE_SQUARE",
+      "h": 0,
+      "w": 0,
+      "minH": 0,
+      "minW": 0,
+      "x": -1,
+      "y": -1,
+      "z": 0,
+      "props": {
+        "layout": "default",
+        "mode": "page",
+        "templateName": "layout2"
+      }
+    },
+    "bodySection1": {
+      "version": 0,
+      "displayName": "bodySection1",
+      "parentNode": "page1",
+      "showName": "bodySection",
+      "childrenNode": [
+        "bodySection1-bodySectionContainer1"
+      ],
+      "type": "SECTION_NODE",
+      "containerType": "EDITOR_LAYOUT_SQUARE",
+      "h": 0,
+      "w": 0,
+      "minH": 0,
+      "minW": 0,
+      "x": -1,
+      "y": -1,
+      "z": 0,
+      "props": {
+        "currentViewIndex": 0,
+        "defaultViewKey": "sub-page1",
+        "sectionViewConfigs": [
+          {
+            "id": "9ac3c766-3320-4f0f-a119-cd57b621127b",
+            "key": "sub-page1",
+            "path": "sub-page1",
+            "viewDisplayName": "bodySection1-bodySectionContainer1"
+          }
+        ],
+        "style": {
+          "padding": {
+            "mode": "all",
+            "size": "24"
+          }
+        },
+        "viewSortedKey": [
+          "bodySection1-bodySectionContainer1"
+        ]
+      }
+    },
+    "bodySection1-bodySectionContainer1": {
+      "h": 0,
+      "w": 0,
+      "x": -1,
+      "y": -1,
+      "z": 0,
+      "minH": 0,
+      "minW": 0,
+      "type": "CONTAINER_NODE",
+      "props": {},
+      "version": 0,
+      "showName": "bodySection1-bodySectionContainer1",
+      "parentNode": "bodySection1",
+      "displayName": "bodySection1-bodySectionContainer1",
+      "childrenNode": [
+        "NativeContainer1"
+      ],
+      "containerType": "EDITOR_DOT_PANEL"
+    },
+    "LabelNative1": {
+      "showName": "LabelNative",
+      "type": "LABEL_NATIVE_WIDGET",
+      "displayName": "LabelNative1",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative1",
+      "childrenNode": [],
+      "props": {
+        "label": "Welcome Back",
+        "size": "displayMedium",
+        "align": "left",
+        "$dynamicAttrPaths": [
+          "label"
+        ],
+        "trueClasses": [
+          {
+            "title": "marginLeftExtraLargeMobile",
+            "value": "marginLeftExtraLargeMobile"
+          }
+        ]
+      }
+    },
+    "NativeContainer1": {
+      "showName": "NativeContainer",
+      "type": "NATIVE_CONTAINER_WIDGET",
+      "displayName": "NativeContainer1",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "bodySection1-bodySectionContainer1",
+      "childrenNode": [
+        "ViewNative1",
+        "ViewNative2"
+      ],
+      "props": {
+        "direction": "column",
+        "justify": "flex-start",
+        "align": "stretch",
+        "padding": 0,
+        "rowGap": 0,
+        "columnGap": 0,
+        "isEditMode": false,
+        "label": "Custom View",
+        "$dynamicAttrPaths": []
+      }
+    },
+    "ViewNative1": {
+      "showName": "ViewNative",
+      "type": "NATIVECANVAS",
+      "containerType": "EDITOR_DOT_PANEL",
+      "parentNode": "NativeContainer1",
+      "childrenNode": [
+        "ImageNative1",
+        "LabelNative1",
+        "LabelNative2",
+        "LabelNative3",
+        "phone_number",
+        "LabelNative4",
+        "InputNativeWidget2",
+        "LabelNative5"
+      ],
+      "displayName": "ViewNative1",
+      "props": {
+        "flex": 3
+      },
+      "version": 0
+    },
+    "ViewNative2": {
+      "showName": "ViewNative",
+      "type": "NATIVECANVAS",
+      "containerType": "EDITOR_DOT_PANEL",
+      "parentNode": "NativeContainer1",
+      "childrenNode": [
+        "NativeContainer2",
+        "ButtonWidgetNative1"
+      ],
+      "displayName": "ViewNative2",
+      "props": {},
+      "version": 0
+    },
+    "ImageNative1": {
+      "showName": "ImageNative",
+      "type": "IMAGE_NATIVE_WIDGET",
+      "displayName": "ImageNative1",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative1",
+      "childrenNode": [],
+      "props": {
+        "imageUrl": "https://static-cdn.jtvnw.net/jtv_user_pictures/b4cabdb0-b761-4b6c-a90c-d5a380ecbe40-profile_banner-480.jpeg",
+        "classes": [
+          {}
+        ],
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "heightFixed140Mobile",
+            "value": "heightFixed140Mobile"
+          },
+          {
+            "title": "marginAutoMobile",
+            "value": "marginAutoMobile"
+          },
+          {
+            "title": "widthFullMobile",
+            "value": "widthFullMobile"
+          }
+        ]
+      }
+    },
+    "LabelNative2": {
+      "showName": "LabelNative",
+      "type": "LABEL_NATIVE_WIDGET",
+      "displayName": "LabelNative2",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative1",
+      "childrenNode": [],
+      "props": {
+        "label": "Enter your details to get sign into your account.",
+        "size": "titleMedium",
+        "align": "left",
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "marginLeftExtraLargeMobile",
+            "value": "marginLeftExtraLargeMobile"
+          }
+        ]
+      }
+    },
+    "LabelNative3": {
+      "showName": "LabelNative",
+      "type": "LABEL_NATIVE_WIDGET",
+      "displayName": "LabelNative3",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative1",
+      "childrenNode": [],
+      "props": {
+        "label": "Enter your phone number",
+        "size": "bodyMedium",
+        "align": "left",
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "marginLeftExtraLargeMobile",
+            "value": "marginLeftExtraLargeMobile"
+          },
+          {
+            "title": "fontBold800",
+            "value": "fontBold800"
+          },
+          {
+            "title": "marginTopExtraLargeMobile",
+            "value": "marginTopExtraLargeMobile"
+          }
+        ]
+      }
+    },
+    "LabelNative4": {
+      "showName": "LabelNative",
+      "type": "LABEL_NATIVE_WIDGET",
+      "displayName": "LabelNative4",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative1",
+      "childrenNode": [],
+      "props": {
+        "label": "Enter your Pin",
+        "size": "bodyMedium",
+        "align": "left",
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "marginLeftExtraLargeMobile",
+            "value": "marginLeftExtraLargeMobile"
+          },
+          {
+            "title": "fontBold800",
+            "value": "fontBold800"
+          },
+          {
+            "title": "marginTopExtraLargeMobile",
+            "value": "marginTopExtraLargeMobile"
+          }
+        ]
+      }
+    },
+    "InputNativeWidget2": {
+      "showName": "InputNativeWidget",
+      "type": "INPUT_NATIVE_WIDGET",
+      "displayName": "InputNativeWidget2",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative1",
+      "childrenNode": [],
+      "props": {
+        "value": "",
+        "defaultValue": "",
+        "label": "",
+        "styles": {},
+        "margin": "normal",
+        "variant": "outlined",
+        "type": "text",
+        "color": "success",
+        "size": "small",
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "width80PercentageMobile",
+            "value": "width80PercentageMobile"
+          },
+          {
+            "title": "marginLeftExtraLargeMobile",
+            "value": "marginLeftExtraLargeMobile"
+          }
+        ]
+      }
+    },
+    "LabelNative5": {
+      "showName": "LabelNative",
+      "type": "LABEL_NATIVE_WIDGET",
+      "displayName": "LabelNative5",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative1",
+      "childrenNode": [],
+      "props": {
+        "label": "Forgot Pin?",
+        "size": "labelSmall",
+        "align": "left",
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "marginLeftExtraLargeMobile",
+            "value": "marginLeftExtraLargeMobile"
+          }
+        ],
+        "colorScheme": "red"
+      }
+    },
+    "NativeContainer2": {
+      "showName": "NativeContainer",
+      "type": "NATIVE_CONTAINER_WIDGET",
+      "displayName": "NativeContainer2",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative2",
+      "childrenNode": [
+        "ViewNative3",
+        "ViewNative4"
+      ],
+      "props": {
+        "direction": "row",
+        "justify": "flex-start",
+        "align": "stretch",
+        "padding": 0,
+        "rowGap": 0,
+        "columnGap": 0,
+        "isEditMode": false,
+        "label": "Custom View",
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "marginTopExtraLargeMobile",
+            "value": "marginTopExtraLargeMobile"
+          }
+        ]
+      }
+    },
+    "ViewNative3": {
+      "showName": "ViewNative",
+      "type": "NATIVECANVAS",
+      "containerType": "EDITOR_DOT_PANEL",
+      "parentNode": "NativeContainer2",
+      "childrenNode": [
+        "LabelNative6"
+      ],
+      "displayName": "ViewNative3",
+      "props": {},
+      "version": 0
+    },
+    "ViewNative4": {
+      "showName": "ViewNative",
+      "type": "NATIVECANVAS",
+      "containerType": "EDITOR_DOT_PANEL",
+      "parentNode": "NativeContainer2",
+      "childrenNode": [
+        "LabelNative7"
+      ],
+      "displayName": "ViewNative4",
+      "props": {},
+      "version": 0
+    },
+    "LabelNative6": {
+      "showName": "LabelNative",
+      "type": "LABEL_NATIVE_WIDGET",
+      "displayName": "LabelNative6",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative3",
+      "childrenNode": [],
+      "props": {
+        "label": "Don't have an account",
+        "size": "bodyMedium",
+        "align": "right",
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "marginTopExtraLargePlusMobile",
+            "value": "marginTopExtraLargePlusMobile"
+          }
+        ]
+      }
+    },
+    "LabelNative7": {
+      "showName": "LabelNative",
+      "type": "LABEL_NATIVE_WIDGET",
+      "displayName": "LabelNative7",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative4",
+      "childrenNode": [],
+      "props": {
+        "label": "Request New?",
+        "size": "bodyMedium",
+        "align": "left",
+        "$dynamicAttrPaths": [],
+        "colorScheme": "red",
+        "trueClasses": [
+          {
+            "title": "marginTopExtraLargePlusMobile",
+            "value": "marginTopExtraLargePlusMobile"
+          }
+        ]
+      }
+    },
+    "ButtonWidgetNative1": {
+      "showName": "ButtonWidgetNative",
+      "type": "BUTTON_NATIVE_WIDGET",
+      "displayName": "ButtonWidgetNative1",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative2",
+      "childrenNode": [],
+      "props": {
+        "text": "Login",
+        "variant": "contained",
+        "hidden": false,
+        "$dynamicAttrPaths": [
+
+        ],
+        "trueClasses": [
+          {
+            "title": "width90PercentageMobile",
+            "value": "width90PercentageMobile"
+          },
+          {
+            "title": "marginAutoMobile",
+            "value": "marginAutoMobile"
+          },
+          {
+            "title": "marginBottomExtraLargeMobile",
+            "value": "marginBottomExtraLargeMobile"
+          }
+        ],
+        "events": [
+          {
+            "actionType": "datasource",
+            "eventType": "click",
+            "queryID": "restapi1"
+          }
+        ]
+      }
+    },
+    "phone_number": {
+      "showName": "InputNativeWidget",
+      "type": "INPUT_NATIVE_WIDGET",
+      "displayName": "phone_number",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "ViewNative1",
+      "childrenNode": [],
+      "props": {
+        "value": "",
+        "defaultValue": "",
+        "label": "",
+        "styles": {},
+        "margin": "normal",
+        "variant": "outlined",
+        "type": "text",
+        "color": "success",
+        "size": "small",
+        "$dynamicAttrPaths": [],
+        "trueClasses": [
+          {
+            "title": "width80PercentageMobile",
+            "value": "width80PercentageMobile"
+          },
+          {
+            "title": "marginLeftExtraLargeMobile",
+            "value": "marginLeftExtraLargeMobile"
+          }
+        ]
+      }
+    }
+  },
+};
+
+const label = {
+  "components": {
+    "root": {
+      "namePrefix": "",
+      "version": 0,
+      "displayName": "root",
+      "parentNode": "",
+      "showName": "root",
+      "childrenNode": [
+        "page1"
+      ],
+      "type": "DOT_PANEL",
+      "containerType": "EDITOR_DOT_PANEL",
+      "h": 0,
+      "w": 0,
+      "minH": 0,
+      "minW": 0,
+      "x": -1,
+      "y": -1,
+      "z": 0,
+      "props": {
+        "currentPageIndex": 0,
+        "pageSortedKey": [
+          "page1"
+        ]
+      },
+      "components": {
+        "root": {
+          "namePrefix": "",
+          "version": 0,
+          "displayName": "root",
+          "parentNode": "",
+          "showName": "root",
+          "childrenNode": [
+            "page1"
+          ],
+          "type": "DOT_PANEL",
+          "containerType": "EDITOR_DOT_PANEL",
+          "h": 0,
+          "w": 0,
+          "minH": 0,
+          "minW": 0,
+          "x": -1,
+          "y": -1,
+          "z": 0,
+          "props": {
+            "currentPageIndex": 0,
+            "pageSortedKey": [
+              "page1"
+            ]
+          }
+        },
+        "page1": {
+          "version": 0,
+          "displayName": "page1",
+          "parentNode": "root",
+          "showName": "page",
+          "childrenNode": [
+            "bodySection1"
+          ],
+          "type": "PAGE_NODE",
+          "containerType": "EDITOR_PAGE_SQUARE",
+          "props": {}
+        },
+        "bodySection1": {
+          "version": 0,
+          "displayName": "bodySection1",
+          "parentNode": "page1",
+          "showName": "bodySection",
+          "childrenNode": [
+            "bodySection1-bodySectionContainer1"
+          ],
+          "type": "SECTION_NODE",
+          "containerType": "EDITOR_LAYOUT_SQUARE",
+          "h": 0,
+          "w": 0,
+          "minH": 0,
+          "minW": 0,
+          "x": -1,
+          "y": -1,
+          "z": 0,
+          "props": {
+            "currentViewIndex": 0,
+            "defaultViewKey": "sub-page1",
+            "sectionViewConfigs": [
+              {
+                "id": "9ac3c766-3320-4f0f-a119-cd57b621127b",
+                "key": "sub-page1",
+                "path": "sub-page1",
+                "viewDisplayName": "bodySection1-bodySectionContainer1"
+              }
+            ],
+            "style": {
+              "padding": {
+                "mode": "all",
+                "size": "24"
+              }
+            },
+            "viewSortedKey": [
+              "bodySection1-bodySectionContainer1"
+            ]
+          }
+        },
+        "bodySection1-bodySectionContainer1": {
+          "version": 0,
+          "displayName": "bodySection1-bodySectionContainer1",
+          "parentNode": "bodySection1",
+          "showName": "bodySection1-bodySectionContainer1",
+          "childrenNode": [
+            "input"
+          ],
+          "type": "CONTAINER_NODE",
+          "containerType": "EDITOR_DOT_PANEL",
+          "h": 0,
+          "w": 0,
+          "minH": 0,
+          "minW": 0,
+          "x": -1,
+          "y": -1,
+          "z": 0,
+          "props": {}
+        },
+        "input": {
+          "showName": "input",
+          "type": "INPUT_WIDGET",
+          "displayName": "input1",
+          "containerType": "EDITOR_SCALE_SQUARE",
+          "parentNode": "bodySection1-bodySectionContainer1",
+          "childrenNode": [],
+          "props": {
+            "value": "",
+            "defaultValue": "",
+            "label": "input",
+            "styles": {},
+            "margin": "normal",
+            "variant": "outlined",
+            "type": "text",
+            "color": "success",
+            "size": "small",
+            "$dynamicAttrPaths": []
+          }
+        }
+      }
+    },
+    "page1": {
+      "version": 0,
+      "displayName": "page1",
+      "parentNode": "root",
+      "showName": "page",
+      "childrenNode": [
+        "bodySection1"
+      ],
+      "type": "PAGE_NODE",
+      "containerType": "EDITOR_PAGE_SQUARE",
+      "props": {}
+    },
+    "bodySection1": {
+      "version": 0,
+      "displayName": "bodySection1",
+      "parentNode": "page1",
+      "showName": "bodySection",
+      "childrenNode": [
+        "bodySection1-bodySectionContainer1"
+      ],
+      "type": "SECTION_NODE",
+      "containerType": "EDITOR_LAYOUT_SQUARE",
+      "h": 0,
+      "w": 0,
+      "minH": 0,
+      "minW": 0,
+      "x": -1,
+      "y": -1,
+      "z": 0,
+      "props": {
+        "currentViewIndex": 0,
+        "defaultViewKey": "sub-page1",
+        "sectionViewConfigs": [
+          {
+            "id": "9ac3c766-3320-4f0f-a119-cd57b621127b",
+            "key": "sub-page1",
+            "path": "sub-page1",
+            "viewDisplayName": "bodySection1-bodySectionContainer1"
+          }
+        ],
+        "style": {
+          "padding": {
+            "mode": "all",
+            "size": "24"
+          }
+        },
+        "viewSortedKey": [
+          "bodySection1-bodySectionContainer1"
+        ]
+      }
+    },
+    "bodySection1-bodySectionContainer1": {
+      "version": 0,
+      "displayName": "bodySection1-bodySectionContainer1",
+      "parentNode": "bodySection1",
+      "showName": "bodySection1-bodySectionContainer1",
+      "childrenNode": [
+        "LabelNative1"
+      ],
+      "type": "CONTAINER_NODE",
+      "containerType": "EDITOR_DOT_PANEL",
+      "h": 0,
+      "w": 0,
+      "minH": 0,
+      "minW": 0,
+      "x": -1,
+      "y": -1,
+      "z": 0,
+      "props": {}
+    },
+    "LabelNative1": {
+      "showName": "LabelNative",
+      "type": "LABEL_NATIVE_WIDGET",
+      "displayName": "LabelNative1",
+      "containerType": "EDITOR_SCALE_SQUARE",
+      "parentNode": "bodySection1-bodySectionContainer1",
+      "childrenNode": [],
+      "props": {
+        "label": "hello world",
+        "size": "headlineSmall",
+        "align": "left",
+        "$dynamicAttrPaths": [],
+        "colorScheme": "orange"
+      }
+    }
+  }
+}
+
+
+
+const mobileConfig: ImpaktProps = {
+  model: loginFinal5,
+  getResource: async () => ({
+    baseUrl: "http://localhost:8081/api/execution/execute",
+    urlParams: [
+      {
+        key: "groupId",
+        value: "com",
+      },
+      {
+        key: "artifactId",
+        value: "test_demo",
+      },
+      {
+        key: "version",
+        value: "0.0.2",
+      },
+    ],
+    body: {},
+  }),
+  getRules: async () => [
+
+  ],
+  getPages: async () => [
+    { $refText: "login", $ref: "login" },
+    { $refText: "userInfoSave", $ref: "login" },
+    { $refText: "initialUserRegister", $ref: "login" },
+    { $refText: "otpVerification", $ref: "login" },
+    { $refText: "userPinSet", $ref: "login" },
+    { $refText: "created", $ref: "login" },
+    { $refText: "walletMainPage", $ref: "login" },
+    { $refText: "transSuccessWallet", $ref: "login" },
+    { $refText: "sendMoney", $ref: "login" },
+    { $refText: "addMoney", $ref: "login" },
+    { $refText: "transfailed", $ref: "login" },
+    { $refText: "moneySentSuccess", $ref: "login" },
+    { $refText: "walletPin", $ref: "login" },
+    { $refText: "addMoneyCreditCard", $ref: "login" },
+    { $refText: "cardTransOTP", $ref: "login" },
+    { $refText: "moneySentSuccessFinal", $ref: "login" }
+  ],
+  onModelUpdatefunction: (model: any): void => {
+    // setModel1(model);
+  },
+  onModelSave: async function (): Promise<void> {
+  },
+  getStyles: async (): Promise<any> => {
+    return {
+      classes: {}
+    };
+  },
+  mode: "edit",
+  onModelUpdate: function (model: any): void {
+    throw new Error("Function not implemented.");
+  },
+  setStyles: function (style: any): void {
+    throw new Error("Function not implemented.");
+  }
+}
+
+
+
+const App = () => {
+  useEffect(() => {
+    const subscriptions: Unsubscribe[] = [
+      setupComponentsListeners(startAppListening),
+      setupActionListeners(startAppListening),
+      setupConfigListeners(startAppListening),
+      setupExecutionListeners(startAppListening),
+    ];
+    return () => subscriptions.forEach((unsubscribe) => unsubscribe());
+  }, []);
+  // useEffect(() => {
+  //   const run = async () => {
+  //     try {
+  //       const fileUri = FileSystem.documentDirectory + 'userCode.js';
+
+  //       // const code = `return 5 + 5;`;
+  //     //   const code = `
+  //     //   const a = 10;
+  //     //   const b = 20;
+  //     //   const multiply = (x, y) => x * y;
+  //     //   console.log("resilt");
+  //     //   return multiply(a, b) + Math.pow(a, 2);
+  
+  //     // `;
+  //     const code = `
+  //       let total = 0;
+  //       for (let i = 1; i <= 5; i++) {
+  //         total += i * 2;
+  //       }
+  //       return total;
+  //     `;
+  //       await FileSystem.writeAsStringAsync(fileUri, code);
+  //       console.log('Code saved at:', fileUri);
+
+  //       const readCode = await FileSystem.readAsStringAsync(fileUri);
+  //       console.log('Read code from file:', readCode);
+
+  //       const result = new Function(readCode)();
+  //       console.log('Executed result:', result);
+  //     } catch (error) {
+  //       console.error('Error in file handling:', error);
+  //     }
+  //   };
+
+  //   run();
+  // }, []);
+  const { loadingState } = useInitBuilderApp("edit", mobileConfig);
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: '#4c69a5',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+
+  });
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{ flex: 1 }}
+      >
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={{ flex: 1 }}
+        // behavior="padding"
+        >
+          {/* <ScrollView
+          style={{flex: 1}}
+          // contentContainerStyle={styles.contentContainer} // (Optional) Aligns content
+        > */}
+
+
+          {loadingState ? (
+            <Text>Loading</Text>
+          ) : (
+            <DndProvider backend={HTML5Backend}>
+              <ConfigProvider locale={enUS}>
+
+                {/* <KeyboardAwareScrollView
+                style={{ backgroundColor: '#4c69a5' }}
+                resetScrollToCoords={{ x: 0, y: 0 }}
+                // contentContainerStyle={styles.container}
+                scrollEnabled={false}
+                contentContainerStyle={styles.container}
+              > */}
+                <CanvasPanel />
+                {/* </KeyboardAwareScrollView> */}
+              </ConfigProvider>
+            </DndProvider>
+
+          )}
+
+
+          {/* </ScrollView> */}
+        </KeyboardAvoidingView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default App;