Merge branch 'dev' into dev

.github/ISSUE_TEMPLATE.md

@@ -1,6 +1,6 @@
 # React Boilerplate
 
-Before opening a new issue, please take a moment to review our [**community guidelines**](https://github.com/react-boilerplate/react-boilerplate/blob/master/.github/CONTRIBUTING.md) to make the contribution process easy and effective for everyone involved.
+Before opening a new issue, please take a moment to review our [**community guidelines**](https://github.com/react-boilerplate/react-boilerplate/blob/master/CONTRIBUTING.md) to make the contribution process easy and effective for everyone involved.
 
 Please direct redux-saga related questions to stack overflow:
 http://stackoverflow.com/questions/tagged/redux-saga
@@ -13,8 +13,8 @@ https://github.com/react-boilerplate/react-boilerplate/issues?q=is%3Aissue+is%3A
 
 ## Issue Type
 
-- [ ] Bug (https://github.com/react-boilerplate/react-boilerplate/blob/master/.github/CONTRIBUTING.md#bug-reports)
-- [ ] Feature (https://github.com/react-boilerplate/react-boilerplate/blob/master/.github/CONTRIBUTING.md#feature-requests)
+- [ ] Bug (https://github.com/react-boilerplate/react-boilerplate/blob/master/CONTRIBUTING.md#bug-reports)
+- [ ] Feature (https://github.com/react-boilerplate/react-boilerplate/blob/master/CONTRIBUTING.md#feature-requests)
 
 ## Description
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 ## React Boilerplate
 
-Thank you for contributing! Please take a moment to review our [**contributing guidelines**](https://github.com/react-boilerplate/react-boilerplate/blob/master/.github/CONTRIBUTING.md)
+Thank you for contributing! Please take a moment to review our [**contributing guidelines**](https://github.com/react-boilerplate/react-boilerplate/blob/master/CONTRIBUTING.md)
 to make the process easy and effective for everyone involved.
 
 **Please open an issue** before embarking on any significant pull request, especially those that
@@ -9,7 +9,7 @@ on something that might not end up being merged into the project.
 
 Before opening a pull request, please ensure:
 
-- [ ] You have followed our [**contributing guidelines**](https://github.com/react-boilerplate/react-boilerplate/blob/master/.github/CONTRIBUTING.md)
+- [ ] You have followed our [**contributing guidelines**](https://github.com/react-boilerplate/react-boilerplate/blob/master/CONTRIBUTING.md)
 - [ ] double-check your branch is based on `dev` and targets `dev` 
 - [ ] Pull request has tests (we are going for 100% coverage!)
 - [ ] Code is well-commented, linted and follows project conventions
@@ -20,4 +20,4 @@ Before opening a pull request, please ensure:
 Be kind to code reviewers, please try to keep pull requests as small and focused as possible :)
 
 **IMPORTANT**: By submitting a patch, you agree to allow the project
-owners to license your work under the terms of the [MIT License](https://github.com/react-boilerplate/react-boilerplate/blob/master/LICENSE.md).
+owners to license your work under the terms of the [MIT License](https://github.com/react-boilerplate/react-boilerplate/blob/master/LICENSE.md).

README.md

@@ -46,7 +46,7 @@
 <br />
 
 <div align="center">
-  <sub>Created by <a href="https://twitter.com/mxstbr">Max Stoiber</a> and maintained with ❤️ by an amazing <a href="https://github.com/orgs/react-boilerplate/teams/core">team of developers</a>.</sub>
+  <sub>Created by <a href="https://twitter.com/mxstbr">Max Stoiber</a> and maintained with ❤️ by an amazing <a href="https://github.com/orgs/react-boilerplate/people">team of developers</a>.</sub>
 </div>
 
 ## Features
@@ -116,6 +116,7 @@ Now you're ready to rumble!
 - [Styling](docs/css): How to work with the CSS tooling
 - [Your app](docs/js): Supercharging your app with Routing, Redux, simple
   asynchronicity helpers, etc.
+- [**Troubleshooting**](docs/general/gotchas.md): Solutions to common problems faced by developers.
 
 ## Supporters
 

app/app.js

@@ -12,10 +12,12 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { applyRouterMiddleware, Router, browserHistory } from 'react-router';
+import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
+import Router from 'react-router/lib/Router';
+import browserHistory from 'react-router/lib/browserHistory';
 import { syncHistoryWithStore } from 'react-router-redux';
 import FontFaceObserver from 'fontfaceobserver';
-import { useScroll } from 'react-router-scroll';
+import useScroll from 'react-router-scroll/lib/useScroll';
 import 'sanitize.css/sanitize.css';
 
 // Import selector for `syncHistoryWithStore`
@@ -26,7 +28,18 @@ import LanguageProvider from 'containers/LanguageProvider';
 
 // Load the favicon, the manifest.json file and the .htaccess file
 /* eslint-disable import/no-webpack-loader-syntax */
-import '!file-loader?name=[name].[ext]!./favicon.ico';
+import '!file-loader?name=[name].[ext]!./images/favicon.ico';
+import '!file-loader?name=[name].[ext]!./images/icon-72x72.png';
+import '!file-loader?name=[name].[ext]!./images/icon-96x96.png';
+import '!file-loader?name=[name].[ext]!./images/icon-120x120.png';
+import '!file-loader?name=[name].[ext]!./images/icon-128x128.png';
+import '!file-loader?name=[name].[ext]!./images/icon-144x144.png';
+import '!file-loader?name=[name].[ext]!./images/icon-152x152.png';
+import '!file-loader?name=[name].[ext]!./images/icon-167x167.png';
+import '!file-loader?name=[name].[ext]!./images/icon-180x180.png';
+import '!file-loader?name=[name].[ext]!./images/icon-192x192.png';
+import '!file-loader?name=[name].[ext]!./images/icon-384x384.png';
+import '!file-loader?name=[name].[ext]!./images/icon-512x512.png';
 import '!file-loader?name=[name].[ext]!./manifest.json';
 import 'file-loader?name=[name].[ext]!./.htaccess'; // eslint-disable-line import/extensions
 /* eslint-enable import/no-webpack-loader-syntax */

app/components/Button/index.js

@@ -6,7 +6,8 @@
  * otherwise it'll render a link with an onclick
  */
 
-import React, { PropTypes, Children } from 'react';
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
 
 import A from './A';
 import StyledButton from './StyledButton';

app/components/Header/A.js

@@ -1,8 +1,6 @@
-import styled from 'styled-components';
-
 import NormalA from 'components/A';
 
-const A = styled(NormalA)`
+const A = NormalA.extend`
   padding: 2em 0;
 `;
 

app/components/Header/HeaderLink.js

@@ -1,4 +1,4 @@
-import { Link } from 'react-router';
+import Link from 'react-router/lib/Link';
 import styled from 'styled-components';
 
 export default styled(Link)`
@@ -17,7 +17,7 @@ export default styled(Link)`
   font-size: 16px;
   border: 2px solid #41ADDD;
   color: #41ADDD;
-  
+
   &:active {
     background: #41ADDD;
     color: #FFF;

app/components/Img/index.js

@@ -5,7 +5,8 @@
  * Renders an image, enforcing the usage of the alt="" tag
  */
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 function Img(props) {
   return (

app/components/IssueIcon/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 function IssueIcon(props) {
   return (
@@ -13,7 +14,7 @@ function IssueIcon(props) {
 }
 
 IssueIcon.propTypes = {
-  className: React.PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default IssueIcon;

app/components/List/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Ul from './Ul';
 import Wrapper from './Wrapper';
@@ -27,8 +28,8 @@ function List(props) {
 }
 
 List.propTypes = {
-  component: React.PropTypes.func.isRequired,
-  items: React.PropTypes.array,
+  component: PropTypes.func.isRequired,
+  items: PropTypes.array,
 };
 
 export default List;

app/components/List/tests/index.test.js

@@ -1,26 +1,30 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import ListItem from 'components/ListItem';
 import List from '../index';
 
 describe('<List />', () => {
   it('should render the component if no items are passed', () => {
-    const renderedComponent = render(
+    const renderedComponent = shallow(
       <List component={ListItem} />
     );
     expect(renderedComponent.find(ListItem)).toBeDefined();
   });
 
-  it('should render the items', () => {
+  it('should pass all items props to rendered component', () => {
     const items = [
       { id: 1, name: 'Hello' },
       { id: 2, name: 'World' },
     ];
-    const item = ({ name }) => <div>{name}</div>; // eslint-disable-line react/prop-types
-    const renderedComponent = render(
-      <List items={items} component={item} />
+
+    const component = ({ item }) => <ListItem>{item.name}</ListItem>; // eslint-disable-line react/prop-types
+
+    const renderedComponent = shallow(
+      <List items={items} component={component} />
     );
-    expect(renderedComponent.find(items)).toBeDefined();
+    expect(renderedComponent.find(component)).toHaveLength(2);
+    expect(renderedComponent.find(component).at(0).prop('item')).toBe(items[0]);
+    expect(renderedComponent.find(component).at(1).prop('item')).toBe(items[1]);
   });
 });

app/components/ListItem/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Item from './Item';
 import Wrapper from './Wrapper';
@@ -14,7 +15,7 @@ function ListItem(props) {
 }
 
 ListItem.propTypes = {
-  item: React.PropTypes.any,
+  item: PropTypes.any,
 };
 
 export default ListItem;

app/components/LoadingIndicator/Circle.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styled, { keyframes } from 'styled-components';
 
 const circleFadeDelay = keyframes`

app/components/ProgressBar/Percent.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 
-export default styled.div`
+const ProgressBarPercent = styled.div`
   height: 2px;
   background: #29D;
   transition: all 300ms ease;
 `;
+
+export default ProgressBarPercent;

app/components/ProgressBar/ProgressBar.js

@@ -4,27 +4,17 @@
  *
 */
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Wrapper from './Wrapper';
 import Percent from './Percent';
 
 class ProgressBar extends React.Component {
 
-  static defaultProps = {
-    percent: -1,
-    autoIncrement: true,
-    intervalTime: 75,
+  state = {
+    percent: this.props.percent,
   };
 
-  constructor(props) {
-    super(props);
-    this.handleProps = this.handleProps.bind(this);
-    this.increment = this.increment.bind(this);
-    this.state = {
-      percent: props.percent,
-    };
-  }
-
   componentDidMount() {
     this.handleProps(this.props);
   }
@@ -56,7 +46,7 @@ class ProgressBar extends React.Component {
     }
   }
 
-  increment() {
+  increment = () => {
     /**
      * Increment the percent randomly.
      * Only used when autoIncrement is set to true.
@@ -69,7 +59,7 @@ class ProgressBar extends React.Component {
     });
   }
 
-  handleProps(props) {
+  handleProps = (props) => {
     /**
      * Increment progress bar if auto increment is set to true
      * and progress percent is less than 99.
@@ -122,4 +112,10 @@ ProgressBar.propTypes = {
   percent: PropTypes.number.isRequired,
 };
 
+ProgressBar.defaultProps = {
+  percent: -1,
+  autoIncrement: true,
+  intervalTime: 75,
+};
+
 export default ProgressBar;

app/components/ProgressBar/Wrapper.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export default styled.div`
+const ProgressBarWrapper = styled.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -10,3 +10,5 @@ export default styled.div`
   transition: all 500ms ease-in-out;
   z-index: ${(props) => props.hidden ? '-10' : '9999'};
 `;
+
+export default ProgressBarWrapper;

app/components/ProgressBar/index.js

@@ -1,34 +1,38 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ProgressBar from './ProgressBar';
 
 function withProgressBar(WrappedComponent) {
   class AppWithProgressBar extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = {
-        progress: -1,
-        loadedRoutes: props.location && [props.location.pathname],
-      };
-      this.updateProgress = this.updateProgress.bind(this);
-    }
+
+    state = {
+      progress: -1,
+      loadedRoutes: this.props.location && [this.props.location.pathname],
+    };
 
     componentWillMount() {
-      // Store a reference to the listener.
-      /* istanbul ignore next */
-      this.unsubscribeHistory = this.props.router && this.props.router.listenBefore((location) => {
-        // Do not show progress bar for already loaded routes.
-        if (this.state.loadedRoutes.indexOf(location.pathname) === -1) {
-          this.updateProgress(0);
-        }
-      });
+      if (this.props.router) {
+        // Bind listener to the current instance of component
+        /* istanbul ignore next */
+        this.props.router.listenBefore = this.props.router.listenBefore.bind(this);
+
+        // Store a reference to the listener.
+        /* istanbul ignore next */
+        this.unsubscribeHistory = this.props.router.listenBefore((location) => {
+          // Do not show progress bar for already loaded routes.
+          if (this.state.loadedRoutes.indexOf(location.pathname) === -1) {
+            this.updateProgress(0);
+          }
+        });
+      }
     }
 
-    componentWillUpdate(newProps, newState) {
+    componentWillReceiveProps(newProps) {
       const { loadedRoutes, progress } = this.state;
       const { pathname } = newProps.location;
 
       // Complete progress when route changes. But prevent state update while re-rendering.
-      if (loadedRoutes.indexOf(pathname) === -1 && progress !== -1 && newState.progress < 100) {
+      if (loadedRoutes.indexOf(pathname) === -1 && progress !== -1 && progress < 100) {
         this.updateProgress(100);
         this.setState({
           loadedRoutes: loadedRoutes.concat([pathname]),
@@ -41,7 +45,7 @@ function withProgressBar(WrappedComponent) {
       this.unsubscribeHistory = undefined;
     }
 
-    updateProgress(progress) {
+    updateProgress = (progress) => {
       this.setState({ progress });
     }
 
@@ -56,8 +60,8 @@ function withProgressBar(WrappedComponent) {
   }
 
   AppWithProgressBar.propTypes = {
-    location: React.PropTypes.object,
-    router: React.PropTypes.object,
+    location: PropTypes.object,
+    router: PropTypes.object,
   };
 
   return AppWithProgressBar;