Feature/develop (#32)

* - changes to have working on local system, local visual code

* - more development

* cleanup

.eslintcache

@@ -1 +1 @@
-[{"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/index.tsx":"1","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/App.tsx":"2","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/Home.tsx":"3","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/RandomPic.tsx":"4","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/ActionComp.tsx":"5","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/About.tsx":"6","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/Comp5.tsx":"7"},{"size":622,"mtime":1610531812000,"results":"8","hashOfConfig":"9"},{"size":4555,"mtime":1610531812000,"results":"10","hashOfConfig":"9"},{"size":1293,"mtime":1610531812000,"results":"11","hashOfConfig":"9"},{"size":1474,"mtime":1610531812000,"results":"12","hashOfConfig":"9"},{"size":992,"mtime":1610531812000,"results":"13","hashOfConfig":"9"},{"size":816,"mtime":1610531812000,"results":"14","hashOfConfig":"9"},{"size":544,"mtime":1610531812000,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"p39cuj",{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/index.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/App.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/Home.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/RandomPic.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/ActionComp.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/About.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/Comp5.tsx",[]]
+[{"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/index.tsx":"1","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/App.tsx":"2","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/Home.tsx":"3","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/RandomPic.tsx":"4","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/ActionComp.tsx":"5","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/About.tsx":"6","/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/Comp5.tsx":"7"},{"size":645,"mtime":1610851148000,"results":"8","hashOfConfig":"9"},{"size":4555,"mtime":1610871304558,"results":"10","hashOfConfig":"9"},{"size":1293,"mtime":1610871304558,"results":"11","hashOfConfig":"9"},{"size":1474,"mtime":1610871304558,"results":"12","hashOfConfig":"9"},{"size":992,"mtime":1610871304558,"results":"13","hashOfConfig":"9"},{"size":816,"mtime":1610871304558,"results":"14","hashOfConfig":"9"},{"size":544,"mtime":1610871304558,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"p39cuj",{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/index.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/App.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/Home.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/RandomPic.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/ActionComp.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/About.tsx",[],"/home/saurabh-xyz/code/applerxyz/rn-config-tyler/src/components/Comp5.tsx",[]]

app.json

@@ -0,0 +1,24 @@
+{
+    "expo": {
+      "name": "rn-config-tyler",
+      "slug": "rn-config-tyler",
+      "platforms": ["ios", "android", "web"],
+      "version": "1.0.0",
+      "orientation": "portrait",
+      "scheme": "myapp",
+      "splash": {
+        "resizeMode": "contain",
+        "backgroundColor": "#ffffff"
+      },
+      "updates": {
+        "fallbackToCacheTimeout": 0
+      },
+      "assetBundlePatterns": ["**/*"],
+      "ios": {
+        "bundleIdentifier": "com.starterapp.mobile",
+        "supportsTablet": true
+      },
+      "web": {}
+    }
+  }
+

applications/app-one-config.ts

@@ -1,5 +1,129 @@
 import { rowStyle, styles } from "./common";
 
+
+
+export const routes = {};
+
+routes.routeOne = {
+  0: {
+    0: {
+      // layout: null // evict the earlier 1st column, other way is to hide it
+      layout: {
+        colConfig: {
+          // colSize: 0, // *** change the colSize
+
+          style: { display: "none" } // *** hide the 1st column
+        }
+      }
+    },
+    1: {
+      layout: {
+        colConfig: {
+          colSize: 8 // *** change the colSize
+        },
+
+        1: {
+          // *** below we are adding a new row(this will replace current layout config values), and this will have 2 columns
+          0: {
+            // col no
+            colSize: 10,
+            idx: "RandomPic",
+            label: "comp5 >> changed at runtime 1"
+          },
+          1: {
+            // col no
+            colSize: 10,
+            idx: "RandomPic",
+            label: "comp5 >> changed at runtime 2"
+          }
+        }
+      }
+    }
+  }
+};
+
+routes.routeTwo = {
+  0: {
+    0: {
+      // layout: null // evict the earlier 1st column, other way is to hide it
+      layout: {
+        colConfig: {
+          // colSize: 0, // *** change the colSize
+          style: { display: "block" } // *** hide the 1st column
+        }
+      }
+    },
+    1: {
+      layout: {
+        colConfig: {
+          colSize: 3 // *** change the colSize
+        },
+
+        1: {
+          // *** below we are adding a new row(this will replace current layout config values), and this will have 2 columns
+          0: {
+            // col no
+            colSize: 10,
+            idx: "About",
+            label: "comp5 >> changed at runtime 1"
+          },
+          1: {
+            // col no
+            colSize: 10,
+            idx: "About",
+            label: "comp5 >> changed at runtime 2"
+          }
+        }
+      }
+    }
+  }
+};
+
+// *************************************************
+//  "../applications/app-one/screen-one";
+// *************************************************
+// bind events to
+//  logic that binds
+
+export const events = {
+  /// <label>
+  home: {
+    //<label>-<element-id> : <handler>
+    "home-btn-one": {
+
+    },
+    //<label>-<element-id>
+    "home-btn-two": {
+
+    }
+  },
+
+  actioncomp: {
+    // <label>
+    "actioncomp-btn-two": {
+
+    },
+    "actioncomp-btn-one": {
+
+    }
+  }
+};
+
+// *************************************************
+//  Helper Util
+// *************************************************
+// bind events based on the layout config
+export const getEvents = (events, elId, setLayoutConfig, setAppState) => {
+  const elEvents = {};
+  Object.keys(events[elId]).map((eventName) => {
+    // console.log({ [eventName]: events[elId][eventName] });
+    elEvents[eventName] = () =>
+      events[elId][eventName](setLayoutConfig, setAppState);
+  });
+  // console.log(elEvents);
+  return elEvents;
+};
+
 // components section
 const schema = {
   type: "object",

applications/app-one/screen-one.ts

@@ -9,20 +9,148 @@ const schema = {
   }
 };
 
-export const nextState = {};
-nextState.one = {
-  "body-content": {
-    ui: "Comp5",
-    props: { label: "body-content" },
-    children: {}
+export const routes = {};
+
+routes.routeOne = {
+  0: {
+    0: {
+      // layout: null // evict the earlier 1st column, other way is to hide it
+      layout: {
+        colConfig: {
+          // colSize: 0, // *** change the colSize
+
+          style: { display: "none" } // *** hide the 1st column
+        }
+      }
+    },
+    1: {
+      layout: {
+        colConfig: {
+          colSize: 8 // *** change the colSize
+        },
+
+        1: {
+          // *** below we are adding a new row(this will replace current layout config values), and this will have 2 columns
+          0: {
+            // col no
+            colSize: 10,
+            idx: "RandomPic",
+            label: "comp5 >> changed at runtime 1"
+          },
+          1: {
+            // col no
+            colSize: 10,
+            idx: "RandomPic",
+            label: "comp5 >> changed at runtime 2"
+          }
+        }
+      }
+    }
+  }
+};
+
+routes.routeTwo = {
+  0: {
+    0: {
+      // layout: null // evict the earlier 1st column, other way is to hide it
+      layout: {
+        colConfig: {
+          // colSize: 0, // *** change the colSize
+          style: { display: "block" } // *** hide the 1st column
+        }
+      }
+    },
+    1: {
+      layout: {
+        colConfig: {
+          colSize: 3 // *** change the colSize
+        },
+
+        1: {
+          // *** below we are adding a new row(this will replace current layout config values), and this will have 2 columns
+          0: {
+            // col no
+            colSize: 10,
+            idx: "About",
+            label: "comp5 >> changed at runtime 1"
+          },
+          1: {
+            // col no
+            colSize: 10,
+            idx: "About",
+            label: "comp5 >> changed at runtime 2"
+          }
+        }
+      }
+    }
+  }
+};
+
+// *************************************************
+//  "../applications/app-one/screen-one";
+// *************************************************
+// bind events to
+//  logic that binds
+
+export const events = {
+  /// <label>
+  home: {
+    //<label>-<element-id> : <handler>
+    "home-btn-one": {
+      // <event> :: <handler>
+      onPress: (setLayoutConfig, setAppState) => {
+        setLayoutConfig(routes["routeOne"]);
+      }
+    },
+    //<label>-<element-id>
+    "home-btn-two": {
+      // <event> :: <handler>
+      onPress: (setLayoutConfig, setAppState) => {
+        setLayoutConfig(routes["routeTwo"]);
+      }
+    }
   },
-  "body-footer": {
-    ui: "Comp5",
-    props: { label: "body-footer" },
-    children: {}
+
+  actioncomp: {
+    // <label>
+    "actioncomp-btn-two": {
+      // <event> :: <handler>
+      onPress: (setLayoutConfig, setAppState) => {
+        setLayoutConfig(routes["routeTwo"]);
+      }
+    },
+    "actioncomp-btn-one": {
+      onPress: (setLayoutConfig, setAppState) => {
+        setAppState({
+          about: {
+            ui: "About",
+            props: { label: "about" },
+            children: "<Text>I am 2nd Child</Text>" // FIXME:: from events file, passing in children part which is JSX
+          }
+        });
+      }
+    }
   }
 };
 
+// *************************************************
+//  Helper Util
+// *************************************************
+// bind events based on the layout config
+export const getEvents = (events, elId, setLayoutConfig, setAppState) => {
+  const elEvents = {};
+  Object.keys(events[elId]).map((eventName) => {
+    // console.log({ [eventName]: events[elId][eventName] });
+    elEvents[eventName] = () =>
+      events[elId][eventName](setLayoutConfig, setAppState);
+  });
+  // console.log(elEvents);
+  return elEvents;
+};
+
+// *************************************************
+//  Layout config
+// *************************************************
 export const screenOne = {
   links: {
     "/": {
@@ -68,7 +196,8 @@ export const screenOne = {
               colSize: 1,
               idx: "Home",
               label: "home",
-              colStyle: { borderWidth: 4 }
+              colStyle: { borderWidth: 4 },
+              events
             }
           },
           1: {