Merge pull request #39 from Rulox/develop

Develop

.babelrc

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

.eslintrc

@@ -1,9 +1,9 @@
 {
-  "extends": "eslint-config-airbnb",
-  "env": {
-    "browser": true
-  },
+  "extends": "airbnb",
+  parser: "babel-eslint",
   "rules": {
+    "react/prop-types": [2],
+    "no-unused-vars": 0,
     "react/no-multi-comp": 0,
     "import/default": 0,
     "import/no-duplicates": 0,
@@ -19,16 +19,16 @@
     "react/jsx-filename-extension": 0,
     "arrow-body-style": 0,
     "react/jsx-space-before-closing": 0,
+    "no-undef": 0, # Should look into this one #
     "eol-last": 0,
     "max-len": ["error", 120],
     "react/forbid-prop-types": 0,
     "object-curly-spacing": 0
   },
   "plugins": [ "react" ],
-  "settings": {
-    "import/parser": "babel-eslint",
+  "settings": {  
     "import/resolve": {
       "moduleDirectory": ["node_modules", "src"]
     }
   }
-}
+}

.gitignore

@@ -1,7 +1,8 @@
 .idea
 node_modules
 npm-debug.log
+.webpack.config.js.swp
+.eslintcache
 
-# Dest assets folders
-public/css
-public/js
+# Build folder
+dist/

.stylelintrc

@@ -1,19 +1,7 @@
 {
   "rules": {
-    "block-no-empty": null,
-    "color-no-invalid-hex": true,
-    "comment-empty-line-before": [ "always", {
-      "ignore": ["stylelint-commands", "between-comments"],
-    } ],
-    "declaration-colon-space-after": "always",
-    "indentation": ["tab", {
-      "except": ["value"]
-    }],
     "max-empty-lines": 2,
-    "rule-nested-empty-line-before": [ "always", {
-      "except": ["first-nested"],
-      "ignore": ["after-comment"],
-    } ],
-    "unit-whitelist": ["em", "rem", "%", "s"]
+    "max-line-length": 90,
+    "max-nesting-depth": 3,
   }
 }

.travis.yml

@@ -10,5 +10,4 @@ before_install:
   npm install
   npm --version
 script:
-  - npm run js-lint -s
-  - npm run sass-lint -s
+  - npm run lint

README.md

@@ -8,6 +8,9 @@ This base project allows you to have a basic React App folder structure followin
 It contain some basic components that you can use. All the components are not (or minimally) stylized. The main objective
 of this project is to have a basic structure, that is the reason we are not doing complex styles and/or adding many libs.
 
+Also, each component is a JSX file and a .scss file that is associated to the component. This means, all the 
+components for this project should be modular, to make it easy its usage between different apps.
+
 ## Tools
 
 Using these package, you will be able to start a new fresh React project with the basic folder and file structures.
@@ -17,17 +20,19 @@ web server in your machine that automatically updates the code and the styles wh
 
 ## Features
 
-* ES6 to JS Transpile
-* SASS to CSS
-* React Router	
+* Webpack
+* ES6
+* SASS
+* React Router
 * Auto watcher for JS and SCSS files
 * Atomic design project structure
-* Launch server that updates itself every time we change a file with browsersync
+* Launch server with hot-reload using webpack
 * JS Lint ( extending airbnb eslint styles )
 * Styleint
 
 ## TODO List
 * Tests
+* Upgrade to Webpack 2.^ once stable
 
 ## Requirements
 * nodejs v5.*
@@ -45,11 +50,6 @@ Clone this repo (Be sure you delete the .git file, or move the files to your own
 git clone -b master --single-branch --depth 1 [email protected]:Rulox/react-atomic-structure.git
 ```
 
-##### Install Gulp globally
-```bash
-npm install -g gulp
-```
-
 ##### Install npm dependencies
 ```bash
 npm install
@@ -59,13 +59,12 @@ npm install
 ```bash
 npm run start
 ```
-A browser window should open, if not, open it manually and go to http://localhost:3000/ (or any other URL+PORT that your terminal says). You can start working right now in the code, and all the changes will be visible in the browser just opened.
+A browser webpack server should be ready on  http://localhost:8080/ (or any other URL+PORT that your terminal says). You can start working right now in the code, and all the changes will be visible in the browser just opened.
 
 ## Predefined components
 But first, [What is Atomic Design?](http://bradfrost.com/blog/post/atomic-web-design/)
 
-These components are just an idea on how to develop your application following the Atomic Design. Feel free to upgrade/delete
-them in order to do your own app!
+These components are just an idea on how to develop your application following the Atomic Design. Feel free to upgrade/delete them in order to do your own app!
 
 #### Atoms (stateless component)
 * Anchor
@@ -94,9 +93,7 @@ them in order to do your own app!
 To create a new component, just create a new folder in the atoms/molecules/organisms/templates folder with the
 name of your component.
 
-Create now the React component in the js file. Also create your .scss file and remember to import it in the _style.scss
-of the parent folder (For example, if you're creating a new atom called Checkbox, you should have `atoms/Checkbox/_style.scss`. So in
-the main style file for atoms `atoms/_style.scss` just import your new scss file so it can be imported.
+Create now the React component in the jsx file. Also create your .scss file and remember to import it in the component jsx file using `require`.
 
 ## NPM Scripts
 This project comes with the following scripts to help you.
@@ -105,33 +102,18 @@ This project comes with the following scripts to help you.
 npm run start
 ```
 1. Create CSS and JS bundles from Sass and JS.
-2. Launch a browsersync web server and open default browser.
+2. Launch a web server.
 3. Launch watchers on JS/CSS files.
 
 ```bash
-npm run build-dev
-```
-1. Build CSS and JS from sources but does not start browsersync server.
-
-```bash
-npm run build-prod
+npm run build
 ```
-1. Build CSS and JS minified and ready for production but does not start browsersync server.
+1. Build CSS and JS files. With this command, the js will be minified, the bundle version will be used in the html.
 
 ```bash
-npm run start-server
-```
-1. Run the server serving the `/public` folder using browsersync.
-
-```bash
-npm run js-lint
+npm run lint
 ```
 1. Launch JS Lint checker.
 
-```bash
-npm run sass-lint
-```
-1. Launch SASS Lint checker. 
-
 ## Contributions
 Feel free to create a pull request or create an issue to add features or fix bugs.

app/components/atoms/Base/_style.scss → app/_style.scss

@@ -1,4 +1,6 @@
+/* General Styles */
+
 html, body, ul, li {
   margin: 0;
   padding: 0;
-}
+}

app/app.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+
+// 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>
+);
+
+if (typeof window !== 'undefined') {
+  ReactDOM.render(<App />, document.getElementById('app'));
+}

app/components/atoms/Anchor/Anchor.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+require('./_style.scss');
+
+const Anchor = props => (
+  <a className="a__anchor">{props.text}</a>
+);
+
+Anchor.propTypes = {
+  text: React.PropTypes.string.isRequired,
+};
+
+export default Anchor;