building Griddle example as well as basic example of Bootstrap to Tra…

…cksuit changes

package.json

@@ -20,8 +20,10 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.9.0",
+    "griddle-react": "0.5.1",
     "object-assign": "4.0.1",
     "react": "15.0.1",
+    "react-bootstrap": "0.29.3",
     "react-dom": "15.0.1",
     "react-redux": "4.4.5",
     "react-router": "2.3.0",

src/app/api/users.js

@@ -0,0 +1,187 @@
+module.exports = {
+  users:
+    [
+      {
+        "id": 0,
+        "name": "Max Rockatansky",
+        "link": "https://en.wikipedia.org/wiki/Mad_Max",
+        "trade": "demolitions",
+        "avatar": "http://4.bp.blogspot.com/-0rcQbbQfxxM/UUp8mdA2voI/AAAAAAAAgA4/TUXvwp32LQo/s1600/mad_max+thumb+Tom+E.jpg"
+      },
+      {
+        "id": 1,
+        "name": "Mickey Knox",
+        "link": "https://en.wikipedia.org/wiki/Natural_Born_Killers",
+        "trade": "philosophy",
+        "avatar": "http://pre12.deviantart.net/824a/th/pre/i/2012/111/e/b/mickey_knox___natural_born_killers_by_tuyido-d4x4tgb.jpg"
+      },
+      {
+        "id": 2,
+        "name": "Bill S Preston Esq.",
+        "link": "https://en.wikipedia.org/wiki/Bill_%26_Ted%27s_Excellent_Adventure",
+        "trade": "musician",
+        "avatar": "http://cdn1.sciencefiction.com/wp-content/uploads/2013/07/352178-bills_large.jpg"
+      },
+      {
+        "id": 3,
+        "name": "Charly Baltimore",
+        "link": "https://en.wikipedia.org/wiki/The_Long_Kiss_Goodnight",
+        "trade": "demolitions",
+        "avatar": "https://qph.is.quoracdn.net/main-qimg-e8b2af4838554486277043e30684ed85?convert_to_webp=true"
+      },
+      {
+        "id": 4,
+        "name": "Emmit Brown",
+        "link": "https://en.wikipedia.org/wiki/Back_to_the_Future",
+        "trade": "theoretical science",
+        "avatar": "http://orig11.deviantart.net/9b59/f/2014/214/a/9/doc_emmett_brown_by_expofever-d7tg73m.jpg"
+      },
+      {
+        "id": 5,
+        "name": "Ellen Aim",
+        "link": "https://en.wikipedia.org/wiki/Streets_of_Fire",
+        "trade": "musician",
+        "avatar": "http://i.kinja-img.com/gawker-media/image/upload/s--dgxHvOTA--/18jv9qnevn0x9jpg.jpg"
+      },
+      {
+        "id": 6,
+        "name": "Jack Torrence",
+        "link": "https://en.wikipedia.org/wiki/The_Shining_(film)",
+        "trade": "writer",
+        "avatar": "https://s-media-cache-ak0.pinimg.com/736x/e9/d0/bc/e9d0bcf3fcb54c58228e1b6fc12d5e7c.jpg"
+      },
+      {
+        "id": 7,
+        "name": "Ellen Ripley",
+        "link": "https://en.wikipedia.org/wiki/Ellen_Ripley",
+        "trade": "survivalist",
+        "avatar": "http://hardinthecity.files.wordpress.com/2011/12/ripley-560-thumb-560xauto-28506.jpg"
+      },
+      {
+        "id": 8,
+        "name": "Brian Slade",
+        "link": "https://en.wikipedia.org/wiki/Velvet_Goldmine",
+        "trade": "musician",
+        "avatar": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRUorIHXjg1fHXhLPOBEgY1X8UGTKdoiI8I5VagS4aLVYZaesrC"
+      },
+      {
+        "id": 9,
+        "name": "Amber Waves",
+        "link": "https://en.wikipedia.org/wiki/Boogie_Nights",
+        "trade": "actor",
+        "avatar": "http://4.bp.blogspot.com/-5680-D8p0YU/ThYR8hkXKtI/AAAAAAAAABg/KGDNdcipnbQ/s1600/BN+Moore.jpg"
+      },
+      {
+        "id": 10,
+        "name": "William Cutting",
+        "link": "https://en.wikipedia.org/wiki/Gangs_of_New_York",
+        "trade": "community organizer",
+        "avatar": "http://pre03.deviantart.net/a761/th/pre/i/2013/241/f/c/bill_the_butcher_by_krisskringle-d6k6kkb.jpg"
+      },
+      {
+        "id": 11,
+        "name": "Tobias Funke",
+        "link": "https://en.wikipedia.org/wiki/Arrested_Development_(TV_series)",
+        "trade": "actor",
+        "avatar": "http://cheapbossattack.files.wordpress.com/2012/09/3363489663_186273ae5a.jpg"
+      },
+      {
+        "id": 12,
+        "name": "Robin Scherbatsky",
+        "link": "https://en.wikipedia.org/wiki/How_I_Met_Your_Mother",
+        "trade": "reporter",
+        "avatar": "http://2.bp.blogspot.com/-elAylodLbqM/UoXVqkRv3qI/AAAAAAAAMHA/XPYYJFcNEf0/s1600/Robin-how-i-met-your-mother-31111428-1024-768.png"
+      },
+      {
+        "id": 13,
+        "name": "Del Preston",
+        "link": "https://en.wikipedia.org/wiki/Wayne%27s_World_2",
+        "trade": "events organizer",
+        "avatar": "https://i.ytimg.com/vi/ReT3s0siI_Q/maxresdefault.jpg"
+      },
+      {
+        "id": 14,
+        "name": "Kate Austin",
+        "link": "https://en.wikipedia.org/wiki/Lost_(TV_series)",
+        "trade": "survivalist",
+        "avatar": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcScChAJwG9QiaOHoHBFahWNLzQofHFfcHmxKlNu0VQBgGrZiO-r7Q"
+      },
+      {
+        "id": 15,
+        "name": "Spencer Shay",
+        "link": "https://en.wikipedia.org/wiki/ICarly",
+        "trade": "artist",
+        "avatar": "http://vignette1.wikia.nocookie.net/icarly/images/a/a6/786px-SPENCER_BANJO.jpg/revision/latest?cb=20111231235019"
+      },
+      {
+        "id": 16,
+        "name": "Rex Manning",
+        "link": "https://en.wikipedia.org/wiki/Empire_Records",
+        "trade": "musician",
+        "avatar": "http://www.cinemablend.com/images/news/36820/_1365434404.gif"
+      },
+      {
+        "id": 17,
+        "name": "Bob Ross",
+        "link": "https://en.wikipedia.org/wiki/Bob_Ross",
+        "trade": "artist",
+        "avatar": "http://media.boingboing.net/wp-content/uploads/2015/10/lovable.jpg"
+      },
+      {
+        "id": 18,
+        "name": "Cliff Spab",
+        "link": "https://en.wikipedia.org/wiki/S.F.W.",
+        "trade": "philosophy",
+        "avatar": "https://s3.amazonaws.com/movieswithfriends-dev/stills/29444movie0.thumb.jpg"
+      },
+      {
+        "id": 19,
+        "name": "Stringer Bell",
+        "link": "https://en.wikipedia.org/wiki/Stringer_Bell",
+        "trade": "community organizer",
+        "avatar": "http://media.philly.com/images/Screen+shot+2013-09-19+at+10.23.40+AM1.png"
+      },
+      {
+        "id": 20,
+        "name": "Walter White",
+        "link": "https://en.wikipedia.org/wiki/Walter_White_(Breaking_Bad)",
+        "trade": "chemist",
+        "avatar": "http://cdn.pcwallart.com/images/walter-white-wallpaper-3.jpg"
+      },
+      {
+        "id": 21,
+        "name": "Oscar T. Grouch",
+        "link": "https://en.wikipedia.org/wiki/Oscar_the_Grouch",
+        "trade": "philosopher",
+        "avatar": "http://1.bp.blogspot.com/-5vWEYGj31LQ/Ua-aol5_IsI/AAAAAAAAHlY/mh1cL3ghpSE/s1600/oscar+the+grouch.jpeg"
+      },
+      {
+        "id": 22,
+        "name": "Jareth the Goblin King",
+        "link": "https://en.wikipedia.org/wiki/Jareth",
+        "trade": "community organizer",
+        "avatar": "https://s-media-cache-ak0.pinimg.com/736x/3d/03/bb/3d03bb7eb054f2018e671a2f9ce65036.jpg"
+      },
+      {
+        "id": 23,
+        "name": "Prince Adam",
+        "link": "https://en.wikipedia.org/wiki/He-Man",
+        "trade": "community organizer",
+        "avatar": "http://3.bp.blogspot.com/-Is3cAdofXB4/T_G3MCKhTjI/AAAAAAAAAEE/qyJpBQY0WSw/s1600/adam.jpg"
+      },
+      {
+        "id": 24,
+        "name": "Kylo Ren",
+        "link": "https://en.wikipedia.org/wiki/Kylo_Ren",
+        "trade": "demolitions",
+        "avatar": "http://i.dailymail.co.uk/i/pix/2016/02/06/20/30F2B8FA00000578-3435292-image-a-59_1454790981532.jpg"
+      },
+      {
+        "id": 25,
+        "name": "Jordan Belfort",
+        "link": "https://en.wikipedia.org/wiki/The_Wolf_of_Wall_Street_(2013_film)",
+        "trade": "philosopher",
+        "avatar": "http://cdn1-www.comingsoon.net/assets/uploads/1970/01/file_587854_lemmon-clip-wolf-wall-street-01262014-211911.jpg"
+      }
+    ]
+};

src/app/components/navigation.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+
+//Router
+//import { Link } from 'react-router';
+
+//Bootstrap Components
+import { Navbar, Nav, MenuItem } from 'react-bootstrap';
+
+
+
+class Navigation extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return(
+      <Navbar>
+        <Nav >
+            <MenuItem href="/" >
+              Home
+            </MenuItem>
+            <MenuItem href="/buttons" >
+              Buttons
+            </MenuItem>
+            <MenuItem href="/progress-bar" >
+              Progress Bar
+            </MenuItem>
+            <MenuItem href="/text-fields" >
+              Text Fields
+            </MenuItem>
+            <MenuItem href="/linked-items" >
+              Linked Items
+            </MenuItem>
+            <MenuItem href="/alerts" >
+              Alerts
+            </MenuItem>
+            <MenuItem href="/charts" >
+              Charts
+            </MenuItem>
+          </Nav>
+      </Navbar>
+    );
+  }
+}
+
+export default Navigation;

src/app/index.js

@@ -1,11 +1,31 @@
 import React from 'react';
-import {render} from 'react-dom';
+import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import {Router, browserHistory} from 'react-router';
+import {Router, Route, browserHistory} from 'react-router';
+
 import Main from './main';
 
+//Pages
+import Home from './pages/Home';
+import AppButtons from './pages/AppButtons';
+import AppProgressBar from './pages/AppProgressBar';
+import AppTextFields from './pages/AppTextFields';
+import AppLinkedItems from './pages/AppLinkedItems';
+import AppAlerts from './pages/AppAlerts';
+import AppGriddle from './pages/AppGriddle';
+
+
 // Render the main app react component into the app div.
-render(
-  <Main />, 
-  document.getElementById('app')
-);
+ReactDOM.render((
+    <Router history={browserHistory}>
+      <Route component={Main}>
+        <Route path="/" component={Home} />
+        <Route path="/buttons" component={AppButtons} />
+        <Route path="/progress-bar" component={AppProgressBar} />
+        <Route path="/text-fields" component={AppTextFields} />
+        <Route path="/linked-items" component={AppLinkedItems} />
+        <Route path="/alerts" component={AppAlerts} />
+        <Route path="/charts" component={AppGriddle} />
+      </Route>
+    </Router>
+), document.getElementById('app'));

src/app/main.js

@@ -4,24 +4,36 @@
  */
 
 import React from 'react';
+import ReactDom from 'react-dom';
 
-const styles = {
-  containerDiv: {
-    width: '100%'
-  },
-};
+//Bootstrap Components
+import {Grid, Row, Col} from 'react-bootstrap';
+
+//Components
+import Navigation from './components/navigation';
 
 class Main extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
   render() {
     return (
-      <div style={styles.containerDiv}>
+      <Grid fluid>
         <center>
+          <Navigation />
           <img src="images/react.png" />
-          <h1>Hello!</h1>
+          <h1>This is a React App to start building ReactSuit.  Yay!</h1>
+
+          <Grid className="background__MainWrapper">
+            {this.props.children}
+          </Grid>
+
         </center>
-      </div>
+      </Grid>
     );
   }
 }
+Main.propTypes = { children: React.PropTypes.node };
 
-export default Main;
+export default Main;

src/app/pages/AppAlerts.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+//Bootstrap Components
+import { Panel, Alert, Glyphicon} from 'react-bootstrap';
+
+class AppAlerts extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Alerts</h2>
+        <Panel>
+          <Alert bsStyle="danger">
+            <Glyphicon glyph="exclamation-sign" />
+            <strong>Holy guacamole!</strong> Enter a valid email address.
+          </Alert>
+        </Panel>
+      </div>
+    );
+  }
+}
+
+export default AppAlerts;