Added react-router and Semantic-UI

Author: hipertracker

.gitignore

@@ -1,4 +1,5 @@
 .idea
 node_modules
 .DS_Store
-tmp
+tmp
+bower_components

Brocfile.js

@@ -8,49 +8,36 @@ var compileSass = require('broccoli-sass');
 var esTranspiler = require('broccoli-6to5-transpiler');
 
 var fastBrowserify = require('broccoli-fast-browserify');
-var browserify = require('broccoli-browserify');
 
-//var uglifyJavaScript = require('broccoli-uglify-js');
 var uglifyJavaScript = require('broccoli-uglify-sourcemap');
 
 var gzipFiles = require('broccoli-gzip');
 
-
 var staticFiles = new Funnel('src', {
     files: ['index.html']
 });
 
-//var jqueryFiles = new Funnel('node_modules/jquery/dist/cdn', {
-//    include: [
-//        new RegExp(/\.min\.(js|map)$/),
-//    ],
-//    destDir: 'vendor/jquery'
-//});
-//var semantiUiFiles = new Funnel('node_modules/semantic-ui/dist', {
-//    exclude: [new RegExp(/components/)],
-//    include: [
-//        new RegExp(/\.min\.(js|css)$/),
-//        new RegExp(/themes/)
-//    ],
-//    destDir: 'vendor/semantic-ui'
-//});
-//var fontAwesomeFiles = new Funnel('node_modules/font-awesome', {
-//    include: [
-//        new RegExp(/min\.css$/),
-//        new RegExp(/fonts/)
-//    ],
-//    destDir: 'vendor/font-awesome'
-//});
-
-var bootstrapFiles = new Funnel('node_modules/bootstrap/dist', {
+var jqueryFiles = new Funnel('bower_components/jquery/dist', {
     include: [
-        new RegExp(/css\/.+\.min\.css$/),
-        new RegExp(/css\/.+\.map$/),
+        new RegExp(/\.min\.(js|map)$/),
+    ],
+    destDir: 'vendor/jquery'
+});
+var semanticUIFiles = new Funnel('bower_components/semantic-ui/dist', {
+    include: [
+        new RegExp(/\.min\.(js|css)$/),
+        new RegExp(/themes/)
+    ],
+    destDir: 'vendor/semantic-ui'
+});
+var fontAwesomeFiles = new Funnel('bower_components/font-awesome', {
+    include: [
+        new RegExp(/min\.css$/),
         new RegExp(/fonts/)
     ],
-    destDir: 'vendor/bootstrap'
+    destDir: 'vendor/font-awesome'
 });
-vendorFiles = mergeTrees([bootstrapFiles]);
+vendorFiles = mergeTrees([jqueryFiles, semanticUIFiles, fontAwesomeFiles]);
 
 var cssFiles = compileSass(['src'], 'styles/app.scss', 'styles/app.css');
 
@@ -59,11 +46,19 @@ var jsFiles = new Funnel('src', {
     include: [new RegExp(/\.js$/)]
 });
 jsFiles = esTranspiler(jsFiles, {experimental: true});
-jsFiles = browserify(jsFiles, {
-    entries: ['./index'],
-    outputFile: 'index.js'
+//jsFiles = browserify(jsFiles, {
+//    entries: ['./index'],
+//    outputFile: 'index.js'
+//});
+jsFiles = fastBrowserify(jsFiles, {
+    bundles: {
+        'index.js': {
+            entryPoints: ['**/index.js']
+        }
+    }
 });
 
+
 var env = require('broccoli-env').getEnv();
 
 if (env === 'production') {

bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-es7",
+  "version": "0.0.3",
+  "homepage": "https://github.com/hipertracker/react-es7",
+  "authors": [
+    "Jaroslaw Zabiello <[email protected]>"
+  ],
+  "description": "Example of using React + Reflux + ES6 with experimental ES7 syntax + Jest",
+  "main": "src/index.js",
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-es7",
-  "version": "0.0.2",
-  "description": "Example of using React + Reflux + ES6 with experimental ES7 syntax + Jest.",
+  "version": "0.0.3",
+  "description": "Example of using React + Reflux + ES6 with experimental ES7 syntax + Jest",
   "main": "src/index.js",
   "scripts": {
     "test": "jest",
@@ -28,7 +28,6 @@
     "6to5-jest": "git://github.com/hipertracker/6to5-jest",
     "broccoli": "^0.13.3",
     "broccoli-6to5-transpiler": "^0.1.1",
-    "broccoli-browserify": "^0.1.0",
     "broccoli-cli": "0.0.1",
     "broccoli-env": "0.0.1",
     "broccoli-fast-browserify": "^0.2.3",
@@ -44,10 +43,9 @@
     "jest-cli": "^0.2.1"
   },
   "dependencies": {
-    "bootstrap": "^3.3.1",
     "lodash": "^2.4.1",
     "react": "*",
-    "react-bootstrap": "^0.13.0",
+    "react-router": "^0.11.6",
     "reflux": "*",
     "rimraf": "^2.2.8"
   }

src/app/components/About.js

@@ -0,0 +1,13 @@
+let React = require('react');
+
+let About = React.createClass({
+    render() {
+        return (
+            <section>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula eros, sollicitudin nec libero non, cursus fringilla lectus. Aliquam volutpat velit feugiat pellentesque lobortis. Pellentesque pulvinar ornare ligula, sit amet imperdiet nibh tincidunt et. Suspendisse suscipit dolor vel turpis viverra ullamcorper. Fusce in enim elementum, hendrerit enim ut, pretium ipsum. Sed malesuada justo nec augue sodales, eu luctus dolor vulputate. Nunc ut consequat ipsum. Nam tempor fermentum risus at dictum. Sed et diam metus. Donec ac nisi suscipit, tristique enim sit amet, hendrerit ante. Pellentesque nec augue malesuada, ultrices dolor a, placerat ex. Pellentesque imperdiet feugiat nunc.
+            </section>
+        )
+    }
+});
+
+export default About;

src/app/components/App.js

@@ -1,14 +1,18 @@
 let React = require('react');
-import UsefulLinks from './UsefulLinks';
 
-var App = React.createClass({
+let RouteHandler = require('react-router').RouteHandler;
+
+import Menu from './Menu';
+
+let App = React.createClass({
     render() {
         let styles = {
-            margin: 20
+            margin: 10
         };
         return (
             <section style={styles}>
-                <UsefulLinks title="Useful Links"/>
+                <Menu/>
+                <RouteHandler/>
             </section>
         )
     }

src/app/components/Home.js

@@ -0,0 +1,15 @@
+let React = require('react');
+
+import UsefulLinks from './UsefulLinks';
+
+let Home = React.createClass({
+    render() {
+        return (
+            <section>
+                <UsefulLinks title="Useful Links"/>
+            </section>
+        )
+    }
+});
+
+export default Home;

src/app/components/Menu.js

@@ -0,0 +1,22 @@
+let React = require('react');
+
+let Link = require('react-router').Link;
+
+let Menu = React.createClass({
+    render() {
+        return (
+            <div className="ui menu">
+                <Link to="home" className="orange item">
+                    <i className="home icon"></i>
+                    Home
+                </Link>
+                <Link to="about" className="orange item">
+                    <i className="bomb icon"></i>
+                    About
+                </Link>
+            </div>
+        )
+    }
+});
+
+export default Menu;

src/app/components/UsefulLinks.js

@@ -12,12 +12,6 @@ let UsefulLinks = React.createClass({
     propTypes: {
         title: T.string.isRequired
     },
-    getDefaultProps() {
-        return {
-            title: 'Useful Links',
-            style: {backgroundColor: 'white'}
-        };
-    },
     getInitialState() {
         return {
             links: []
@@ -35,7 +29,7 @@ let UsefulLinks = React.createClass({
         }
         let styles = {
             item: {
-                paddingLeft: '10px'
+                paddingLeft: 30
             }
         };
         let style = m(styles.item, this.props.style);
@@ -44,10 +38,10 @@ let UsefulLinks = React.createClass({
                 <a href={item.url} target="_blank">{item.title}</a>
             </li>);
         return (
-            <section>
+            <div class="ui grid">
                 <h4>{this.props.title}</h4>
                 <ul style={style}>{items}</ul>
-            </section>
+            </div>
         );
     }
 });

src/app/lib/tools.js

@@ -2,13 +2,20 @@ let React = require('react');
 let _ = require('lodash');
 
 // mounting a React component to a selector id location
-export function mount(component, location) {
+export function mount(component, location, argv = {}) {
     if (!location) {
         location = document.body;
     } else {
         location = document.getElementById(location);
     }
-    React.render(React.createFactory(component)(), location);
+    console.log('@argv', argv);
+    console.log('@1', component);
+    if (!React.isValidElement(component)) {
+        console.log('@2', component);
+        component = React.createFactory(component);
+        console.log('@3', component);
+    }
+    React.render(component(argv), location);
 };
 
 // merging properties, used in React component for aggregating styles