V0.1.3

.flowconfig

@@ -10,7 +10,17 @@
 [include]
 
 [libs]
-/flow/*.flow.js
+./flow/app.js.flow
+./app/components/App/App.js.flow
+./app/components/App/AppBar.js.flow
+./app/components/Layout/AppCard.js.flow
+./app/components/Layout/Header.js.flow
+./app/components/Layout/Home.js.flow
+./app/components/Layout/Init.js.flow
+./app/components/Layout/Layout.js.flow
+./app/components/Layout/Open.js.flow
+./app/components/Layout/Router.js.flow
+./app/components/Terminal/Console.js.flow
 
 [options]
 emoji=true
@@ -36,7 +46,5 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
-unsafe.enable_getters_and_setters=true
-
 [version]
 ^0.69.0

app/App.js

@@ -5,7 +5,7 @@ import {Provider} from 'react-redux';
 import React from 'react';
 import {persistStore} from 'redux-persist';
 
-import Router from './components/Layout/Router';
+import Layout from './components/Layout/Layout';
 import store from './redux/store';
 
 const Loading = () => (
@@ -15,7 +15,7 @@ const Loading = () => (
 const App = () => (
   <Provider store={store}>
     <PersistGate loading={<Loading />} persistor={persistStore(store)}>
-      <Router />
+      <Layout />
     </PersistGate>
   </Provider>
 );

app/components/App/App.js

@@ -1,77 +1,13 @@
-import {Column, Row} from 'reactors-flex';
-import {Dimensions, Text, View} from 'reactors';
-import AppBar from 'material-ui/AppBar';
-import DropDownIcon from 'material-ui/svg-icons/navigation/arrow-drop-down';
-import Icon from 'reactors-icons';
-import IconButton from 'material-ui/IconButton';
-import IconMenu from 'material-ui/IconMenu';
-import MenuItem from 'material-ui/MenuItem';
-import NavigationBack from 'material-ui/svg-icons/navigation/arrow-back';
-import path from 'path';
-import RaisedButton from 'material-ui/RaisedButton';
+// @flow
 import React from 'react';
-import Router from 'reactors-router';
-import Packager from '../Packager/Home';
-import ReactNative from '../ReactNative/Home';
-import Android from '../Android/Home';
-import IOS from '../IOS/Home';
-import Expo from '../Expo/Home';
-import NativeModules from '../NativeModules/Home';
 
-import Commands from './Commands';
-import Init from '../Command/Init';
+import AppBar from './AppBar';
+import Page from '../Layout/Page';
 
-const App = ({app}) => (
-  <section>
-    <AppBar
-      title={path.basename(app.path)}
-      iconElementLeft={(
-        <IconButton>
-          <NavigationBack />
-        </IconButton>
-      )}
-      onLeftIconButtonClick={() => Router.get('main').go('index')}
-      iconElementRight={(
-        <IconMenu
-          iconButtonElement={(
-            <IconButton><DropDownIcon /></IconButton>
-          )}
-          onItemClick={(event, child) => Router.get(app.path).go(child.props.primaryText)}
-        >
-          <MenuItem primaryText="Packager" />
-          <MenuItem primaryText="React Native" />
-          <MenuItem primaryText="Android" />
-          <MenuItem primaryText="iOS" />
-          <MenuItem primaryText="Expo" />
-          <MenuItem primaryText="Native modules" />
-        </IconMenu>
-      )}
-    />
-    <Router
-      name={app.path}
-      width={Dimensions.get('window').width}
-      height={Dimensions.get('window').height - 80}
-    >
-      <Router.Route name="Packager">
-        <Packager app={app} />
-      </Router.Route>
-      <Router.Route name="React Native">
-        <ReactNative app={app} />
-      </Router.Route>
-      <Router.Route name="Android">
-        <Android app={app} />
-      </Router.Route>
-      <Router.Route name="iOS">
-        <IOS app={app} />
-      </Router.Route>
-      <Router.Route name="Expo">
-        <Expo app={app} />
-      </Router.Route>
-      <Router.Route name="Native modules">
-        <NativeModules app={app} />
-      </Router.Route>
-    </Router>
-  </section>
+const App = ({app}: $AppProps) => (
+  <Page>
+    <AppBar app={app} />
+  </Page>
 );
 
 export default App;

app/components/App/App.js.flow

@@ -0,0 +1,8 @@
+// @flow
+
+declare type $AppOwnProps = {|
+  +app: $App,
+|};
+
+declare type $AppProps =
+  & $AppOwnProps;

app/components/App/App2.js

@@ -0,0 +1,77 @@
+import {Column, Row} from 'reactors-flex';
+import {Dimensions, Text, View} from 'reactors';
+import AppBar from 'material-ui/AppBar';
+import DropDownIcon from 'material-ui/svg-icons/navigation/arrow-drop-down';
+import Icon from 'reactors-icons';
+import IconButton from 'material-ui/IconButton';
+import IconMenu from 'material-ui/IconMenu';
+import MenuItem from 'material-ui/MenuItem';
+import NavigationBack from 'material-ui/svg-icons/navigation/arrow-back';
+import path from 'path';
+import RaisedButton from 'material-ui/RaisedButton';
+import React from 'react';
+import Router from 'reactors-router';
+import Packager from '../Packager/Home';
+import ReactNative from '../ReactNative/Home';
+import Android from '../Android/Home';
+import IOS from '../IOS/Home';
+import Expo from '../Expo/Home';
+import NativeModules from '../NativeModules/Home';
+
+import Commands from './Commands';
+import Init from '../Command/Init';
+
+const App = ({app}) => (
+  <section>
+    <AppBar
+      title={path.basename(app.path)}
+      iconElementLeft={(
+        <IconButton>
+          <NavigationBack />
+        </IconButton>
+      )}
+      onLeftIconButtonClick={() => Router.get('main').go('index')}
+      iconElementRight={(
+        <IconMenu
+          iconButtonElement={(
+            <IconButton><DropDownIcon /></IconButton>
+          )}
+          onItemClick={(event, child) => Router.get(app.path).go(child.props.primaryText)}
+        >
+          <MenuItem primaryText="Packager" />
+          <MenuItem primaryText="React Native" />
+          <MenuItem primaryText="Android" />
+          <MenuItem primaryText="iOS" />
+          <MenuItem primaryText="Expo" />
+          <MenuItem primaryText="Native modules" />
+        </IconMenu>
+      )}
+    />
+    <Router
+      name={app.path}
+      width={Dimensions.get('window').width}
+      height={Dimensions.get('window').height - 80}
+    >
+      <Router.Route name="Packager">
+        <Packager app={app} />
+      </Router.Route>
+      <Router.Route name="React Native">
+        <ReactNative app={app} />
+      </Router.Route>
+      <Router.Route name="Android">
+        <Android app={app} />
+      </Router.Route>
+      <Router.Route name="iOS">
+        <IOS app={app} />
+      </Router.Route>
+      <Router.Route name="Expo">
+        <Expo app={app} />
+      </Router.Route>
+      <Router.Route name="Native modules">
+        <NativeModules app={app} />
+      </Router.Route>
+    </Router>
+  </section>
+);
+
+export default App;

app/components/App/AppBar.js

@@ -0,0 +1,40 @@
+// @flow
+import DropDownIcon from 'material-ui/svg-icons/navigation/arrow-drop-down';
+import IconButton from 'material-ui/IconButton';
+import IconMenu from 'material-ui/IconMenu';
+import MaterialUIAppBar from 'material-ui/AppBar';
+import MenuItem from 'material-ui/MenuItem';
+import NavigationBack from 'material-ui/svg-icons/navigation/arrow-back';
+import path from 'path';
+import React from 'react';
+
+import {switchRoute} from '../../redux/actions/routerActions';
+
+const AppBar = ({app}: $AppBarProps) => (
+  <MaterialUIAppBar
+    title={path.basename(app.path)}
+    iconElementLeft={(
+      <IconButton>
+        <NavigationBack />
+      </IconButton>
+    )}
+    onLeftIconButtonClick={() => switchRoute(0)}
+    iconElementRight={(
+      <IconMenu
+        iconButtonElement={(
+          <IconButton><DropDownIcon /></IconButton>
+        )}
+        onItemClick={(event, child) => console.log(child.props.primaryText)}
+      >
+        <MenuItem primaryText="Packager" />
+        <MenuItem primaryText="React Native" />
+        <MenuItem primaryText="Android" />
+        <MenuItem primaryText="iOS" />
+        <MenuItem primaryText="Expo" />
+        <MenuItem primaryText="Native modules" />
+      </IconMenu>
+    )}
+  />
+);
+
+export default AppBar;

app/components/App/AppBar.js.flow

@@ -0,0 +1,8 @@
+// @flow
+
+declare type $AppBarOwnProps = {|
+  +app: $App,
+|};
+
+declare type $AppBarProps =
+  & $AppBarOwnProps;