Update demo

Author: Minh Tran

.babelrc

@@ -1,4 +1,20 @@
 {
   "stage": 0,
-  "optional": []
-}
+  "optional": [],
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [
+            {
+              "transform": "react-transform-hmr",
+              "imports": ["react"],
+              "locals": ["module"]
+            }
+          ]
+        }
+      }
+    }
+  }
+}

.bowerrc

@@ -1,3 +1,3 @@
 {
-  "directory": "example/app/bower_components"
+  "directory": "example/app/assets/bower_components"
 }

.eslintrc

@@ -27,7 +27,7 @@
     "quotes": [2, "single", "avoid-escape"],
     "semi": 2,
     "no-underscore-dangle": 0,
-    "no-unused-vars": [2, {"args": "all"}],
+    "no-unused-vars": 2,
     "camelcase": [2, {"properties": "never"}],
     "new-cap": 0,
     "accessor-pairs": 0,

dist/progress-bar.css

@@ -1,98 +1,38 @@
 import 'babel-core/polyfill';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Header from './components/Header.js';
-import Footer from './components/Footer.js';
-import ProgressBar from 'react-progress-bar-plus';
+import {createHistory, useBasename} from 'history';
+import Router from 'react-router';
+import App from 'components/App.js';
+import {name} from '../../package.json';
 
-import './bower_components/bootstrap-customize/css/bootstrap.css';
+import 'assets/bower_components/bootstrap-customize/css/bootstrap.css';
 import 'react-progress-bar-plus/src/progress-bar.scss';
-import './assets/styles/app.scss';
-
-class App extends React.Component {
-  state = {
-    percent: -1,
-    autoIncrement: false,
-    intervalTime: 200
-  };
-
-  setPercent = (percent) => {
-    return () => {
-      this.setState({
-        percent: percent
-      });
-    };
-  };
-
-  startWithAutoIncrement = () => {
-    this.setState({
-      percent: 0,
-      autoIncrement: true,
-      intervalTime: (Math.random() * 1000)
-    });
-  };
-
-  render() {
-    return (
-      <div className='layout-page'>
-        <Header/>
-        <main className='layout-main'>
-          <div className='container'>
-            <ProgressBar percent={this.state.percent}
-              autoIncrement={this.state.autoIncrement}
-              intervalTime={this.state.intervalTime}/>
-
-            <div className='text-center'>
-              <div className='btn-group'>
-                <button className='btn btn-default'
-                  onClick={this.setPercent(0)}>
-                  Start
-                </button>
-                <button className='btn btn-default'
-                  onClick={this.setPercent(25)}>
-                  Set 25
-                </button>
-                <button className='btn btn-default'
-                  onClick={this.setPercent(50)}>
-                  Set 50
-                </button>
-                <button className='btn btn-default'
-                  onClick={this.setPercent(75)}>
-                  Set 75
-                </button>
-                <button className='btn btn-default'
-                  onClick={this.setPercent(100)}>Finish
-                </button>
-              </div>
-            </div>
-            <hr/>
-            <div className='text-center'>
-              <h4>
-                Current intervalTime: <code>{this.state.intervalTime}</code>
-              </h4>
-
-              <div className='btn-group'>
-                <button className='btn btn-default'
-                  onClick={this.startWithAutoIncrement}>
-                  Start with auto increment
-                </button>
-                <button className='btn btn-default'
-                  onClick={this.setPercent(100)}>
-                  Finish
-                </button>
-              </div>
-            </div>
-          </div>
-        </main>
-        <Footer/>
-      </div>
-    );
-  }
-}
-
-function run() {
-  ReactDOM.render(<App />, document.getElementById('app'));
-}
+import 'assets/styles/app.scss';
+
+const routes = {
+  path: '/',
+  component: App,
+  indexRoute: {
+    component: require('./components/pages/Home')
+  },
+  childRoutes: [
+    require('./routes/Example1Route')
+  ]
+};
+
+const DEV = process && process.env && process.env.NODE_ENV === 'development';
+const history = useBasename(createHistory)({
+  basename: '/' + (DEV ? '' : name)
+});
+
+const run = () => {
+  ReactDOM.render(
+    <Router routes={routes} history={history}/>,
+    document.getElementById('app')
+  );
+};
 
 if (window.addEventListener) {
   window.addEventListener('DOMContentLoaded', run);