Initial commit

Author: andris-silis

.gitignore

@@ -0,0 +1,4 @@
+bower_components
+node_modules
+
+www/compiled

Gulpfile.es6.js

@@ -0,0 +1,72 @@
+
+import gulp from 'gulp';
+import gutil from 'gulp-util';
+import livereload from 'gulp-livereload';
+import filter from 'gulp-filter';
+import react from 'gulp-react';
+import webpack from 'gulp-webpack';
+import webpackConfig from './webpack-config';
+
+import sourcemaps from 'gulp-sourcemaps';
+
+
+var outputDestination = './www/compiled';
+var jsOutputDestination = `${outputDestination}/js`;
+var cssOutputDestination = `${outputDestination}/css`;
+
+var cssFile = 'main.css';
+
+
+gulp.task('build-js', () => {
+  gulp
+    .src('src/js/app.jsx')
+    .pipe(webpack(webpackConfig()))
+    .on('error', gutil.log)
+    .pipe(gulp.dest(jsOutputDestination));
+});
+
+
+gulp.task(
+  'build',
+  [
+    'build-js'
+  ],
+  () => {
+    if (process.env.NODE_ENV === 'production' && !process.env.NO_MINIFY) {
+      gulp.start('minify-public', function () {
+        return gutil.log('Build done');
+      });
+    } else {
+      return gutil.log('Build done');
+    }
+  }
+);
+
+
+gulp.task('build-prod', () => {
+  process.env.NODE_ENV = 'production';
+  gulp.start('build');
+});
+
+
+gulp.task('watch', () => {
+  livereload.listen();
+
+  var webpackConfigObj = webpackConfig();
+  webpackConfigObj.watch = true;
+  gulp
+    .src('src/js/app.jsx')
+    .pipe(webpack(webpackConfigObj))
+    .on('error', gutil.log)
+    .pipe(gulp.dest(jsOutputDestination));
+
+  gulp
+    .watch(`${outputDestination}/**`)
+    .on('change', livereload.changed);
+
+});
+
+
+
+
+gulp.task('default', () => {});

Gulpfile.js

@@ -0,0 +1,2 @@
+require('babel/register');
+module.exports = require('./Gulpfile.es6');

README.md

@@ -0,0 +1,36 @@
+Test assignment
+
+
+## Installation:
+ Clone this repository
+
+ Change into repository root directory
+
+
+ `npm install && npm run build`
+
+
+## Run:
+  Open `www/index.html` in browser
+
+
+## Development:
+JS source code is inside directory `src/` with an entry point `src/js/application/bootstrap.js`
+
+JS code is built using Webpack as CommonJS builder and Gulp as a command runner. Code is separated into vendors and app bundles for faster rebuild when developing.
+
+
+## Build the JS code
+  `npm build`
+
+
+### For development - starts a LiveReload server and rebuilds files on change:
+  `npm run build && npm run watch`
+
+### Production build - minifies the end result:
+  `npm run build-prod`
+
+  Built CSS and JS is placed in `www/compiled` directory.
+
+
+

dev-server.js

@@ -0,0 +1,19 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack-config.js');
+
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true
+}).listen(
+  3000,
+  'localhost',
+  (err, result) => {
+    if (err) {
+      console.log(err);
+    }
+
+    console.log('Listening at localhost:3000');
+  }
+);

karma.conf.es6.js

@@ -0,0 +1,103 @@
+export default function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+    // list of files / patterns to load in the browser
+    files: [
+      'src/js/**/__tests__/*.js'
+    ],
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    preprocessors: {
+      'src/js/**/__tests__/*.js': ['webpack']
+    },
+
+
+    webpack: {
+      progress: false,
+      stats: false,
+      debug: false,
+      quiet: true,
+      cache: true,
+      'module': {
+        loaders: [
+          {
+            test: /\.js$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader?experimental'
+          },
+          {
+            test: /\.jsx$/,
+            loaders: [
+              //'react-hot',
+              'babel-loader?experimental'
+            ],
+            exclude: /node_modules/
+          }
+        ],
+        noParse: []
+      },
+      resolve: {
+        alias: {
+          underscore: 'lodash'
+        }
+      }
+    },
+
+
+    webpackMiddleware: {
+      stats: {
+        colors: true
+      },
+      noInfo: true,
+      quiet: true,
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['mocha'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: [
+        'Chrome',
+//        'Firefox',
+//        'PhantomJS',
+//        'Safari'
+    ],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false
+  });
+};

karma.conf.js

@@ -0,0 +1,2 @@
+require('babel/register');
+module.exports = require('./karma.conf.es6');

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "tree",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "postinstall": "rm -rf node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule/node_modules/lodash ; ",
+    "build": "./node_modules/.bin/gulp build",
+    "build-prod": "./node_modules/.bin/gulp build-prod",
+    "watch": "./node_modules/.bin/gulp watch",
+    "test": "./node_modules/karma/bin/karma start --single-run"
+  },
+  "author": "Andris Silis",
+  "license": "",
+  "devDependencies": {
+    "babel-core": "^4.0.2",
+    "babel-loader": "^4.0.0",
+    "gulp": "^3.8.8",
+    "gulp-buffer": "0.0.2",
+    "gulp-declare": "^0.3.0",
+    "gulp-filter": "^1.0.2",
+    "gulp-if": "^1.2.5",
+    "gulp-livereload": "^2.1.1",
+    "gulp-minify-css": "^0.3.11",
+    "gulp-plumber": "^0.6.5",
+    "gulp-preprocess": "^1.1.1",
+    "gulp-react": "^2.0.0",
+    "gulp-rename": "^1.2.0",
+    "gulp-rev": "^2.0.1",
+    "gulp-rev-collector": "^0.1.2",
+    "gulp-sourcemaps": "^1.5.0",
+    "gulp-sym": "0.0.14",
+    "gulp-uglify": "^1.0.1",
+    "gulp-util": "^3.0.1",
+    "gulp-webpack": "^1.1.0",
+    "gulp-wrap": "^0.3.0",
+    "imports-loader": "^0.6.3",
+    "jsx-loader": "^0.12.2",
+    "null-loader": "^0.1.0",
+    "webpack": "^1.5.3",
+    "webpack-dev-server": "^1.7.0"
+  },
+  "dependencies": {
+    "babel": "^4.7.3",
+    "lodash": "^3.5.0",
+    "react": "^0.13.3",
+    "react-tools": "^0.13.0"
+  }
+}

src/js/application/ApplicationLayoutView.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default React.createClass({
+
+  render() {
+    return (
+      <div>
+        {this.props.children}
+      </div>
+    );
+  }
+});

src/js/application/bootstrap.js

@@ -0,0 +1,13 @@
+import renderApp from './renderApp';
+import React from 'react';
+
+
+var bootstrap = () => {
+  // Shortcuts for development
+  window.React = React;
+  window.Perf = React.addons.Perf;
+  renderApp();
+};
+
+
+document.addEventListener('DOMContentLoaded', bootstrap, false);

src/js/application/renderApp.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import ApplicationLayoutView from './ApplicationLayoutView.jsx';
+import TableView from '../table/TableView.jsx';
+
+
+export default function (state) {
+  React.render(
+    <ApplicationLayoutView>
+      <TableView />
+    </ApplicationLayoutView>,
+    document.querySelector('.content-wrapper')
+  );
+};

src/js/table/TableView.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import _ from 'underscore';
+
+export default React.createClass({
+  getInitialState() {
+    return {
+      tableData: []
+    };
+  },
+
+  componentWillMount() {
+    // Generate initial table data state
+    this.setState({
+      tableData: _.range(0, 10).map(rowIndex => _.range(0, 10))
+    });
+  },
+
+  onNewDataClick() {
+    var tableData = this.state.tableData.map(row => {
+      row[0] = Math.random();
+      return row;
+    });
+
+    this.setState({
+      tableData: tableData
+    });
+  },
+
+  renderCellEl(content, index) {
+    return (
+      <td key={index}>{content}</td>
+    );
+  },
+
+  renderRowEl(contentList, index) {
+    return (
+      <tr key={index}>{contentList.map(this.renderCellEl)}</tr>
+    );
+  },
+
+  render() {
+    return (
+      <div>
+        <table>
+          {this.state.tableData.map(this.renderRowEl)}
+        </table>
+        <button onClick={this.onNewDataClick}>New data plskthnxbye</button>
+      </div>
+    );
+  }
+});