Merge pull request #44 from Rulox/webpack-updates

Webpack updates

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["env", "react"]
 }

.eslintrc

@@ -1,5 +1,6 @@
 {
-  "extends": "airbnb",
+  "extends": [ "airbnb-base" ],
+  "plugins": [ "react" ],
   parser: "babel-eslint",
   "rules": {
     "react/prop-types": [2],
@@ -11,10 +12,12 @@
     "import/namespace": 0,
     "import/no-unresolved": 0,
     "import/no-named-as-default": 2,
+    "import/extensions": ["off", "never"],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "indent": [2, 2, {"SwitchCase": 1}],
     "no-console": 0,
     "no-alert": 0,
+    "no-multi-spaces": ["error", { exceptions: { "ImportDeclaration": true} }], // For import spacing
     "linebreak-style": 0,
     "react/jsx-filename-extension": 0,
     "arrow-body-style": 0,
@@ -25,7 +28,6 @@
     "react/forbid-prop-types": 0,
     "object-curly-spacing": 0
   },
-  "plugins": [ "react" ],
   "settings": {  
     "import/resolve": {
       "moduleDirectory": ["node_modules", "src"]

.gitignore

@@ -7,3 +7,4 @@ npm-debug.log
 
 # Build folder
 dist/
+build/

.travis.yml

@@ -1,13 +1,13 @@
 language: node_js
 node_js:
-  - 5
+  - 8
 sudo: false
 cache:
+  yarn: true
   directories:
   - node_modules
 before_install:
 - |
-  npm install
-  npm --version
+
 script:
   - npm run lint

README.md

@@ -32,7 +32,7 @@ web server in your machine that automatically updates the code and the styles wh
 
 ## TODO List
 * Tests
-* Upgrade to Webpack 2.^ once stable
+~~* Upgrade to Webpack 2.^ once stable
 
 ## Requirements
 * nodejs v5.*

app/app.jsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
-// Components
 import Home from './components/templates/Home/Home';
 import Main from './components/templates/Main/Main';
 import About from './components/templates/About/About';
 
 require('./_style.scss');
 
 const App = () => (
-  <Router history={browserHistory}>
-    <Route path="/" component={Main}>
-      <IndexRoute component={Home} />
-      <Route path="/about" component={About} />
-    </Route>
-  </Router>
+  <BrowserRouter>
+    <Switch>
+      <Route exact path="/" component={Main}  />
+      <Route exact path="/" component={Home}  />
+      <Route path="/about"  component={About} />
+    </Switch>
+  </BrowserRouter>
 );
 
 if (typeof window !== 'undefined') {

app/components/atoms/Button/Button.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React      from 'react';
+import PropTypes  from 'prop-types';
 
 require('./_style.scss');
 
@@ -7,7 +8,7 @@ const Button = props => (
 );
 
 Button.propTypes = {
-  text: React.PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
 };
 
 export default Button;

app/components/atoms/Input/Input.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes  from 'prop-types';
 
 require('./_style.scss');
 
@@ -7,9 +8,9 @@ const Input = props => (
 );
 
 Input.propTypes = {
-  text: React.PropTypes.string,
-  type: React.PropTypes.string,
-  placeholder: React.PropTypes.string,
+  text: PropTypes.string,
+  type: PropTypes.string,
+  placeholder: PropTypes.string,
 };
 
 export default Input;

app/components/atoms/Label/Label.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React      from 'react';
+import PropTypes  from 'prop-types';
 
 require('./_style.scss');
 
@@ -7,7 +8,7 @@ const Label = props => (
 );
 
 Label.propTypes = {
-  text: React.PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
 };
 
 export default Label;

app/components/atoms/Paragraph/Paragraph.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes  from 'prop-types';
 
 require('./_style.scss');
 
@@ -7,7 +8,7 @@ const Paragraph = props => (
 );
 
 Paragraph.propTypes = {
-  text: React.PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
 };
 
 export default Paragraph;

app/components/atoms/Title/Title.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React      from 'react';
+import PropTypes  from 'prop-types';
 
 require('./_style.scss');
 
@@ -7,7 +8,7 @@ const Title = props => (
 );
 
 Title.propTypes = {
-  text: React.PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
 };
 
 export default Title;

app/components/molecules/Content/Content.jsx

@@ -1,6 +1,8 @@
-import React from 'react';
-import Title from '../../atoms/Title/Title';
-import Paragraph from '../../atoms/Paragraph/Paragraph';
+import React      from 'react';
+import PropTypes  from 'prop-types';
+
+import Title      from '../../atoms/Title/Title';
+import Paragraph  from '../../atoms/Paragraph/Paragraph';
 
 require('./_style.scss');
 
@@ -12,8 +14,8 @@ const Content = props => (
 );
 
 Content.propTypes = {
-  title: React.PropTypes.string,
-  text: React.PropTypes.string,
+  title: PropTypes.string,
+  text: PropTypes.string,
 };
 
 export default Content;

app/components/molecules/LabeledInput/LabeledInput.jsx

@@ -1,6 +1,8 @@
-import React from 'react';
-import Label from '../../atoms/Label/Label';
-import Input from '../../atoms/Input/Input';
+import React      from 'react';
+import PropTypes  from 'prop-types';
+
+import Label      from '../../atoms/Label/Label';
+import Input      from '../../atoms/Input/Input';
 
 require('./_style.scss');
 
@@ -12,8 +14,8 @@ const LabeledInput = props => (
 );
 
 LabeledInput.propTypes = {
-  label: React.PropTypes.string.isRequired,
-  placeholder: React.PropTypes.string,
+  label: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
 };
 
 export default LabeledInput;

app/components/organisms/Article/Article.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes  from 'prop-types';
+
 import Content from '../../molecules/Content/Content';
 
 require('./_style.scss');
@@ -11,9 +13,9 @@ const Article = props => (
 );
 
 Article.propTypes = {
-  image: React.PropTypes.object,
-  title: React.PropTypes.string.isRequired,
-  content: React.PropTypes.string,
+  image: PropTypes.object,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string,
 };
 
 export default Article;

app/components/organisms/Form/Form.jsx

@@ -1,21 +1,23 @@
-import React from 'react';
+import React        from 'react';
+import PropTypes    from 'prop-types';
+
 import LabeledInput from '../../molecules/LabeledInput/LabeledInput';
-import Button from '../../atoms/Button/Button';
+import Button       from '../../atoms/Button/Button';
 
 require('./_style.scss');
 
 const Form = props => (
   <form className="o__form">
     {
-      props.fields.map((field, i) => (<LabeledInput label={field.label} placeholder={field.placeholder} key={i}/>))
+      props.fields.map((field, i) => (<LabeledInput label={field.label} placeholder={field.placeholder} key={i} />))
     }
     <Button text={props.buttonText} />
   </form>
 );
 
 Form.propTypes = {
-  fields: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-  buttonText: React.PropTypes.string.isRequired,
+  fields: PropTypes.arrayOf(PropTypes.object).isRequired,
+  buttonText: PropTypes.string.isRequired,
 };
 
 export default Form;

app/components/organisms/Nav/Nav.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 require('./_style.scss');
 
 const Nav = () =>
-(
-  <nav className="o__nav">
-    <ul>
-      <li><Link to="/">Home</Link></li>
-      <li><Link to="/about">About</Link></li>
-      <li><Link to="/another-page">Another Page</Link></li>
-    </ul>
-  </nav>
-);
+  (
+    <nav className="o__nav">
+      <ul>
+        <li><Link to="/">Home</Link></li>
+        <li><Link to="/about">About</Link></li>
+        <li><Link to="/another-page">Another Page</Link></li>
+      </ul>
+    </nav>
+  );
 
 export default Nav;

app/components/templates/Home/Home.jsx

@@ -1,7 +1,9 @@
-import React from 'react';
-import Title from '../../atoms/Title/Title';
-import Article from '../../organisms/Article/Article';
-import Form from '../../organisms/Form/Form';
+import React      from 'react';
+import PropTypes  from 'prop-types';
+
+import Title      from '../../atoms/Title/Title';
+import Article    from '../../organisms/Article/Article';
+import Form       from '../../organisms/Form/Form';
 
 require('./_style.scss');
 
@@ -30,7 +32,7 @@ const Home = props => (
 );
 
 Home.propTypes = {
-  form: React.PropTypes.array,
+  form: PropTypes.array,
 };
 
 Home.defaultProps = {

app/components/templates/Main/Main.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React      from 'react';
+import PropTypes  from 'prop-types';
 
 import Nav from '../../organisms/Nav/Nav';
 
@@ -10,7 +11,7 @@ const Main = props => (
 );
 
 Main.propTypes = {
-  children: React.PropTypes.node,
+  children: PropTypes.node,
 };
 
 export default Main;

app/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: { browsers: ['last 2 versions', 'iOS >= 8'] }
+  }
+};