Feature/add tests

README.md

@@ -1,2 +1,183 @@
 # Mobile First Navigation Monorepo
-A navigational router with an emphasis on being Mobile and Human friendly 📱
+
+
+A navigational router with an emphasis on being Mobile and Developer friendly 📱
+
+## Packages
+
+### Mobile First Router
+
+#### demo
+
+Coming soon...
+
+#### install
+
+`npm i @aloompa/mobile-first-router`
+
+#### configuration
+
+##### Standard
+
+```Routes.jsx
+import Home from './routes/Home';
+import Modal from './routes/Modal';
+import Page2 from './routes/Page2';
+import Page2b from './routes/Page2b';
+import Page3 from './routes/Page3';
+import { createRoutes } from '@aloompa/mobile-first-router';
+import { TopNav } from '@aloompa/mobile-first-components';
+
+export const routeConfig = {
+  initialRoute: 'Home',
+  routes: {
+    Home: {
+      route: Home,
+      getTitle: () => 'Home'
+    },
+    Page2: {
+      route: Page2,
+      getTitle:  () => 'Page 2'
+    },
+    Page2b: {
+      route: Page2b,
+      getTitle:  () => 'Page 2b'
+    },
+    Page3: {
+      route: Page3,
+      getTitle:  () => 'Page 3'
+    },
+    Modal: {
+      route: Modal,
+      getTitle: () => 'Modal Page',
+      mode: 'modal'
+    }
+  },
+  renderTopNav: TopNav
+};
+
+const Routes = createRoutes(routeConfig);
+
+export default Routes;
+```
+
+##### With Tabs
+
+```Routes.jsx
+import * as React from 'react';
+import Home from './routes/Home';
+import Modal from './routes/Modal';
+import Page2 from './routes/Page2';
+import Page2b from './routes/Page2b';
+import Page3 from './routes/Page3';
+import { createRoutes } from '@aloompa/mobile-first-router';
+import { TabButton, TopNav } from '@aloompa/mobile-first-components';
+
+export const routeConfig = {
+  initialActiveTab: 1,
+  initialRoute: 'Home',
+  tabs: [
+    {
+      button: (isSelected: boolean, onPress: Function) => (
+        <TabButton
+          selected={isSelected}
+          onPress={onPress}
+          iconUnselectedColor={'#ccc'}
+          iconHeight={18}
+          iconWidth={20}
+          iconSelectedColor={'#FF00FF'}
+          title={'Browse'}
+          iconUrl={
+            'https://aloompa-assets.imgix.net/TestFolder/reservations-tab-icon-browse.svg'
+          }
+        />
+      ),
+      initial: 'Home'
+    },
+    {
+      button: (isSelected: boolean, onPress: Function) => (
+        <TabButton
+          selected={isSelected}
+          onPress={onPress}
+          iconUnselectedColor={'#ccc'}
+          iconHeight={18}
+          iconWidth={22}
+          iconSelectedColor={'#FF00FF'}
+          title={'Home 2'}
+          iconUrl={
+            'https://aloompa-assets.imgix.net/TestFolder/reservations-tab-icon-tickets.svg'
+          }
+        />
+      ),
+      initial: 'Page2'
+    },
+    {
+      button: (isSelected: boolean, onPress: Function) => (
+        <TabButton
+          selected={isSelected}
+          onPress={onPress}
+          iconUnselectedColor={'#ccc'}
+          iconHeight={22}
+          iconWidth={22}
+          iconSelectedColor={'#FF00FF'}
+          title={'Page 3'}
+          iconUrl={
+            'https://aloompa-assets.imgix.net/TestFolder/reservations-tab-icon-account.svg'
+          }
+        />
+      ),
+      initial: 'Page3'
+    }
+  ],
+  routes: {
+    Home: {
+      route: Home,
+      getTitle: () => 'Home'
+    },
+    Page2: {
+      route: Page2,
+      getTitle:  () => 'Page 2'
+    },
+    Page2b: {
+      route: Page2b,
+      getTitle:  () => 'Page 2b'
+    },
+    Page3: {
+      route: Page3,
+      getTitle:  () => 'Page 3'
+    },
+    Modal: {
+      route: Modal,
+      getTitle: () => 'Modal Page',
+      mode: 'modal'
+    }
+  },
+  renderTopNav: TopNav
+};
+
+const Routes = createRoutes(routeConfig);
+
+export default Routes; 
+```
+
+```App.jsx
+import * as React from 'react';
+
+import Routes from './Routes';
+
+const App = () => <Routes />;
+
+export default App;
+```
+
+### Mobile First Components
+
+#### install
+
+`npm i @aloompa/mobile-first-components`
+
+### Mobile First Storybook
+
+#### live storybook demo and documentation
+
+Coming soon...

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  verbose: true,
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  transform: {
+    '\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest/preprocessor.js'
+  },
+  testRegex: '__tests__/.*\\.(ts|tsx)$',
+  collectCoverage: false,
+  projects: ['<rootDir>/packages/*/src']
+};

package.json

@@ -7,8 +7,8 @@
     "storybook": "npm run storybook --prefix ./packages/mobile-first-storybook",
     "build": "lerna run build && lerna bootstrap",
     "test": "lerna run test",
-    "example": "npm run start --prefix ./packages/mobile-first-router",
-    "clean": "rm -rf node_modules && rm -rf packages/*/node_modules && rm -rf packages/*/package-lock.json && rm -rf packages/*/yarn.lock && rm -f yarn.lock && rm -f package-lock.json && yarn && yarn build"
+    "example": "npm run start --prefix ./packages/mobile-first-navigation-example",
+    "clean": "rm -rf node_modules && rm -rf packages/*/node_modules && rm -rf packages/*/package-lock.json && rm -rf packages/*/yarn.lock && rm -f yarn.lock && rm -f package-lock.json"
   },
   "devDependencies": {
     "lerna": "^3.13.1",

packages/mobile-first-navigation-example/README.md

@@ -0,0 +1,11 @@
+# `mobile-first-navigation-example`
+
+> TODO: description
+
+## Usage
+
+```
+const mobileFirstNavigationExample = require('mobile-first-navigation-example');
+
+// TODO: DEMONSTRATE API
+```

packages/mobile-first-navigation-example/__tests__/mobile-first-navigation-example.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const mobileFirstNavigationExample = require('..');
+
+describe('mobile-first-navigation-example', () => {
+  it('needs tests');
+});