initial commit

Author: grgur

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015-native-modules", "react"],
+  "plugins": ["transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,3 @@
+[*.js]
+indent_style=space
+indent_size=2

.eslintrc

@@ -0,0 +1,28 @@
+extends: 
+  eslint-config-airbnb
+
+parser: 
+  babel-eslint
+
+settings:
+  ecmascript: 6
+
+ecmaFeatures: 
+  jsx: true
+  modules: true
+  destructuring: true
+  classes: true
+  forOf: true
+  blockBindings: true
+  arrowFunctions: true 
+
+env:
+  browser: true
+
+rules:
+  indent: 2
+  func-style: 0
+  func-names: 0
+  comma-dangle: 0
+  no-console: 0
+  no-param-reassign: 0

.gitignore

@@ -0,0 +1,8 @@
+.DS_STORE
+node_modules
+static
+.module-cache
+*.log*
+coverage
+__nogit
+.idea

README.md

@@ -0,0 +1,33 @@
+# React Router Dynamic Route Loading w/ Webpack 2 Chunks
+
+Webpack 2 automatically splits routes in chunks (small bundles) and loads them on demand. 
+
+## Contains
+
+- [x] [Webpack 2](https://webpack.github.io)
+- [x] [React 0.15](https://facebook.github.io/react/)
+- [x] [Babel 6.5](https://babeljs.io/)
+
+##System Requirements
+Before installing the dependencies, make sure your system has the correct Node and Npm versions, otherwise you will get errors.
+
+- Node 5.x.x
+- Npm 3.x.x
+
+## Setup
+
+```
+$ npm install
+```
+
+## Running
+
+```
+$ npm start
+```
+
+## Build
+
+```
+$ npm run build
+```

build.js

@@ -0,0 +1,24 @@
+/* eslint no-var: 0 */
+var exec = require('child_process').exec;
+
+var cmdLine = './node_modules/.bin/webpack --progress';
+var environ = (!process.argv[2].indexOf('development')) ? 'development' : 'production';
+var command;
+
+if (process.platform === 'win32') {
+  cmdLine = 'set NODE_ENV=' + environ + '&& ' + cmdLine;
+} else {
+  cmdLine = 'NODE_ENV=' + environ + ' ' + cmdLine;
+}
+
+command = exec(cmdLine);
+
+command.stdout.on('data', function(data) {
+  process.stdout.write(data);
+});
+command.stderr.on('data', function(data) {
+  process.stderr.write(data);
+});
+command.on('error', function(err) {
+  process.stderr.write(err);
+});

client/_variables.scss

@@ -0,0 +1,7 @@
+$light: #e6e6e6;
+$dark: #4d4d4d;
+$white: #ffffff;
+$grey: #7d7d7d;
+$red: #ec3d2b;
+$blue: #113d92;
+$lightBlue: #258ce7;

client/actions/index.js

@@ -0,0 +1,33 @@
+export const ADD_TRANSACTION = 'ADD_TRANSACTION';
+export const DELETE_TRANSACTION = 'DELETE_TRANSACTION';
+export const GET_TRANSACTION_GRID_FIELDS = 'GET_TRANSACTION_GRID_FIELDS';
+export const REQUEST_SUM = 'REQUEST_SUM';
+
+function createTransaction(transaction) {
+  return {
+    type: ADD_TRANSACTION,
+    transaction
+  };
+}
+
+export function deleteTransaction(id) {
+  return {
+    type: ADD_TRANSACTION,
+    id
+  };
+}
+
+export function requestSum(data) {
+  return {
+    type: REQUEST_SUM,
+    data
+  };
+}
+
+export function addTransaction(transaction) {
+  return (dispatch, getState) => {
+    const addedResult = dispatch(createTransaction(transaction));
+    dispatch(requestSum(getState().transactions.transactions));
+    return addedResult;
+  };
+}

client/actions/navigation.js

@@ -0,0 +1,26 @@
+import { menuSections } from 'data/menu.json';
+
+export const RECEIVE_MENU_SECTIONS = 'RECEIVE_MENU_SECTIONS';
+export const TOGGLE_MENU = 'TOGGLE_MENU';
+export const SELECT_MENU_SECTION = 'SELECT_MENU_SECTION';
+
+export function toggleMenu() {
+  return (dispatch, getState) => dispatch({
+    type: TOGGLE_MENU,
+    menuVisible: !getState().navigation.menu.menuVisible
+  });
+}
+
+export function loadMenuData() {
+  return dispatch => dispatch({
+    type: RECEIVE_MENU_SECTIONS,
+    menuSections
+  });
+}
+
+export function selectMenuSection(menuSection) {
+  return dispatch => dispatch({
+    type: SELECT_MENU_SECTION,
+    menuSection
+  });
+}

client/components/Header/header.scss

@@ -0,0 +1,33 @@
+@import "client/variables";
+
+.header-container {
+  background-color: $grey;
+  padding: 10px;
+  user-select: none;
+  -webkit-user-select: none;
+
+  .header-title {
+    color: $white;
+    margin: 0;
+    font-size: 1.4em;
+  }
+
+  &.header-white {
+    background-color: $white;
+    .header-title {
+      color: $dark;
+    }
+  }
+  &.header-red {
+    background-color: $red;
+  }
+  &.header-dark {
+    background-color: $dark;
+  }
+  &.header-grey {
+    background-color: $grey;
+  }
+  &.header-blue {
+    background-color: $blue;
+  }
+}

client/components/Header/index.js

@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import './header.scss';
+
+const { string } = PropTypes;
+
+const Header = ({ title, className }) => {
+  const styles = `header-container ${className}`;
+
+  return (
+    <header className={styles}>
+      <h1 className="header-title">{title}</h1>
+    </header>
+  );
+};
+
+Header.propTypes = {
+  className: string,
+  title: string
+};
+
+export default Header;

client/components/List/List.js

@@ -0,0 +1,86 @@
+import React, { Component, PropTypes } from 'react';
+import ListItem from './ListItem';
+import './list.scss';
+
+const { number, node, array, bool, string } = PropTypes;
+
+class List extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { expanded: [] };
+  }
+
+  onSelectItem(index) {
+    const { collapsible, singleExpand } = this.props;
+
+    if (!collapsible) {
+      return false;
+    }
+
+    let { expanded } = this.state;
+    const expandedIndex = expanded.indexOf(index);
+
+    if (expandedIndex > -1) {
+      // collapse expanded item
+      expanded = [
+        ...expanded.slice(0, expandedIndex),
+        ...expanded.slice(expandedIndex + 1)
+      ];
+    } else if (singleExpand) {
+      expanded = [index];
+    } else {
+      expanded = [...expanded, index];
+    }
+
+    this.setState({ expanded });
+  }
+
+  showListItems() {
+    const me = this;
+    const { items, collapsible } = me.props;
+    const { expanded } = me.state;
+    const onSelectItem = me.onSelectItem.bind(me);
+
+    return items.map((item, idx) => {
+      const itemExpanded = !!(expanded.indexOf(idx) > -1);
+      return (<ListItem
+        {...item}
+        onSelectItem={onSelectItem}
+        collapsible={collapsible}
+        expanded={itemExpanded}
+        key={idx}
+        index={idx}
+      />);
+    });
+  }
+
+  render() {
+    const { columns, children, className } = this.props;
+    return (
+      <div className={`list columns-${columns} ${className}`}>
+        { this.showListItems() }
+        { children }
+      </div>
+    );
+  }
+}
+
+List.propTypes = {
+  columns: number,
+  children: node,
+  items: array,
+  collapsible: bool,
+  className: string,
+  singleExpand: bool
+};
+
+List.defaultProps = {
+  columns: 1,
+  className: '',
+  items: [],
+  collapsible: false,
+  singleExpand: true
+};
+
+export default List;