initial commit

Author: hipertracker

.gitignore

@@ -0,0 +1,3 @@
+.idea
+node_modules
+.DS_Store

Brocfile.js

@@ -0,0 +1,79 @@
+var rimraf = require('rimraf');
+
+var mergeTrees = require('broccoli-merge-trees');
+var Funnel = require('broccoli-funnel');
+
+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', {
+    include: [
+        new RegExp(/css\/.+\.min\.css$/),
+        new RegExp(/css\/.+\.map$/),
+        new RegExp(/fonts/)
+    ],
+    destDir: 'vendor/bootstrap'
+});
+vendorFiles = mergeTrees([bootstrapFiles]);
+
+var cssFiles = compileSass(['src'], 'styles/app.scss', 'styles/app.css');
+
+var jsFiles = new Funnel('src', {
+    exclude: [new RegExp(/__tests__/)],
+    include: [new RegExp(/\.js$/)]
+});
+jsFiles = esTranspiler(jsFiles, {experimental: true});
+jsFiles = browserify(jsFiles, {
+    entries: ['./index'],
+    outputFile: 'index.js'
+});
+
+var env = require('broccoli-env').getEnv();
+
+if (env === 'production') {
+    jsFiles = uglifyJavaScript(jsFiles);
+    jsFiles = gzipFiles(jsFiles, {
+        extensions: ['js', 'css'],
+        keepUncompressed: true
+    });
+}
+
+rimraf.sync('./dist');
+module.exports = mergeTrees([staticFiles, vendorFiles, jsFiles, cssFiles], {overwrite: false});
+

README.md

@@ -1,4 +1,22 @@
-react-es7
-=========
+Install
 
-Example of using ReactJS + Reflux + ES6/ES7 + Jest (testing)
+```
+npm install
+```
+
+Usage:
+
+```bash
+npm run-script dev
+```
+
+Open `http://localhost:4200`
+
+or
+
+```
+$ npm run-script pro
+$ http-server dist/
+```
+
+Open: `http://localhost:8080`

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "react-es7",
+  "version": "0.0.1",
+  "description": "Example of simple ReactJS using Reflux and ES6 (+ experimental ES7) features",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest",
+    "bundle": "broccoli build dist",
+    "serve": "broccoli serve"
+  },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/6to5-jest",
+    "testFileExtensions": [
+      "es6",
+      "js"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "es6",
+      "jsx"
+    ]
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "6to5": "^1.15.0",
+    "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",
+    "broccoli-filter": "^0.1.10",
+    "broccoli-funnel": "^0.1.6",
+    "broccoli-gzip": "^0.2.0",
+    "broccoli-merge-trees": "^0.2.1",
+    "broccoli-sass": "^0.3.3",
+    "broccoli-uglify-js": "^0.1.3",
+    "broccoli-uglify-sourcemap": "^0.2.1",
+    "browserify": "^8.0.1",
+    "http-server": "^0.7.4",
+    "jest-cli": "^0.2.1"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.1",
+    "lodash": "^2.4.1",
+    "react": "*",
+    "react-bootstrap": "^0.13.0",
+    "reflux": "*",
+    "requirejs": "^2.1.15",
+    "rimraf": "^2.2.8"
+  }
+}

src/__tests__/sum-test.js

@@ -0,0 +1,9 @@
+jest.dontMock('../sum'); // of jest.autoMockOff();
+
+var sum = require('../sum')['default'];
+
+describe('sum', function () {
+    it('adds 1 + 2 to equal 3', function () {
+        expect(sum(1, 2)).toBe(3);
+    });
+});

src/app/actions/LinksActions.js

@@ -0,0 +1,84 @@
+let Reflux = require('reflux');
+
+let LinksActions = Reflux.createActions([
+    'loadData',
+    'loadDataSuccess'
+]);
+
+let data = [
+    {
+        url: 'http://facebook.github.io/react/',
+        title: 'React home page'
+    },
+    {
+        "url": "https://github.com/enaqx/awesome-react",
+        "title": "A collection of awesome React libraries, resources and shiny things."
+    },
+    {
+        "url": "https://reactjsnews.com/",
+        "title": "ReactJS News and tutorials from the community"
+    },
+    {
+        "url": "http://spoike.ghost.io/deconstructing-reactjss-flux/",
+        "title": "Reflux - deconstructing ReactJS's Flux"
+    },
+    {
+        "url": "https://github.com/echenley/react-news",
+        "title": "Hacker News clone written in React + Reflux + Firebase"
+    },
+    {
+        "url": "https://github.com/WRidder/react-spa",
+        "title": "Community site SPA based on ReactJS + Reflux"
+    },
+    {
+        "url": "http://react-components.com",
+        "title": "Searchable database of React components"
+    },
+    {
+        "url": "http://www.reactjsx.com/",
+        "title": "Search reusable React components"
+    },
+    {
+        "url": "http://formatjs.io/react/",
+        "title": "React mixin for internationalization"
+    },
+    {
+        "url": "http://isomorphic.net/",
+        "title": "Isomorphic JavaScript - The future of web app development"
+    },
+    {
+        "url": "https://code.tutsplus.com/courses/getting-started-with-reactjs",
+        "title": "Getting Started With React.js [screencasts]"
+    },
+    {
+        "url": "https://egghead.io/series/react-flux-architecture",
+        "title": "React: Flux Architecture [screencasts]"
+    },
+    {
+        "url": "https://www.facebook.com/groups/228321510706889/",
+        "title": "ReactJS (Facebook group)"
+    },
+    {
+        "url": "http://react-bootstrap.github.io/",
+        "title": "Bootstrap 3 in React"
+    },
+    {
+        "url": "http://react-components.com/component/react-semantify",
+        "title": "Semantic-UI in React"
+    },
+    {
+        "url": "https://github.com/sterpe/quantum-flux",
+        "title": "https://github.com/sterpe/quantum-flux"
+    },
+    {
+        "url": "http://react.rocks/",
+        "title": "Collection of examples and tutorials"
+    }
+];
+
+LinksActions.loadData.listen(function () {
+    // here is the place for external communication with servers...
+    LinksActions.loadDataSuccess.triggerAsync(data);
+});
+
+export default LinksActions;

src/app/components/App.js

@@ -0,0 +1,21 @@
+let React = require('react');
+import UsefulLinks from './UsefulLinks';
+import LinksActions from '../actions/LinksActions';
+
+var App = React.createClass({
+    componentDidMount() {
+        LinksActions.loadData();
+    },
+    render() {
+        let styles = {
+            margin: 20
+        };
+        return (
+            <section style={styles}>
+                <UsefulLinks title="Useful Links"/>
+            </section>
+        )
+    }
+});
+
+export default App;

src/app/components/UsefulLinks.js

@@ -0,0 +1,51 @@
+let React = require('react');
+let Reflux = require('reflux');
+
+import LinksStore from '../stores/LinksStore';
+import {m} from '../lib/tools';
+
+let T = React.PropTypes;
+
+let UsefulLinks = React.createClass({
+    mixins: [Reflux.listenTo(LinksStore, 'linksUpdate')],
+    propTypes: {
+        title: T.string.isRequired
+    },
+    getDefaultProps() {
+        return {
+            title: 'Useful Links',
+            style: {backgroundColor: 'white'}
+        };
+    },
+    getInitialState() {
+        return {
+            links: []
+        }
+    },
+    linksUpdate(data) {
+        this.setState({links: data.links});
+    },
+    render() {
+        if (!this.state.links.length) {
+            return <span/>;
+        }
+        let styles = {
+            item: {
+                paddingLeft: '10px'
+            }
+        };
+        let style = m(styles.item, this.props.style);
+        let items = this.state.links.map((item, key) =>
+            <li key={key}>
+                <a href={item.url} target="_blank">{item.title}</a>
+            </li>);
+        return (
+            <section>
+                <h4>{this.props.title}</h4>
+                <ul style={style}>{items}</ul>
+            </section>
+        );
+    }
+});
+
+export default UsefulLinks;

src/app/lib/tools.js

@@ -0,0 +1,20 @@
+let React = require('react');
+let _ = require('lodash');
+
+// mounting a React component to a selector id location
+export function mount(component, location) {
+    if (!location) {
+        location = document.body;
+    } else {
+        location = document.getElementById(location);
+    }
+    React.render(React.createFactory(component)(), location);
+};
+
+// merging properties, used in React component for aggregating styles
+export function m() {
+    let res = {};
+    _.each(arguments, (arg) => arg && _.merge(res, arg));
+    return res;
+};
+