eslint, removed webpack and added gulp with babel task

.babelrc

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

.eslintignore

@@ -1 +1,4 @@
 node_modules
+stories
+dist
+*.js

.eslintrc

@@ -14,28 +14,8 @@
     },
     "sourceType": "module"
   },
-  "extends": "airbnb",
+  "extends": "vizzuality",
   "rules": {
-    "no-console": ["error", {
-      "allow": ["warn", "error", "info"]
-    }],
-    "comma-dangle": ["error", {
-      "arrays": "only-multiline",
-      "objects": "only-multiline",
-      "imports": "never",
-      "exports": "never",
-      "functions": "ignore",
-    }],
-    "no-restricted-properties": ["error", {
-      "object": "arguments",
-      "property": "callee",
-      "message": "arguments.callee is deprecated",
-    }, {
-      "property": "__defineGetter__",
-      "message": "Please use Object.defineProperty instead.",
-    }, {
-      "property": "__defineSetter__",
-      "message": "Please use Object.defineProperty instead.",
-    }],
+    "jsx-a11y/no-static-element-interactions": 0
   }
 }

.npmignore

@@ -0,0 +1,5 @@
+.eslintrc*
+.editorconfig
+.storybook
+components
+stories

components/Globe/index.jsx

@@ -1,10 +1,9 @@
-import './style.scss';
-
 import React from 'react';
 import * as THREE from 'three';
 import orbitControl from 'three-orbit-controls';
 import earthImage from './images/earth-clouds.jpg';
 import earthBumpImage from './images/earth-bump.jpg';
+import './style.scss';
 
 const Control = orbitControl(THREE);
 

components/Modal/index.jsx

@@ -1,6 +1,5 @@
-import './style.scss';
-
 import React, { Component } from 'react';
+import './style.scss';
 
 class Modal extends Component {
 
@@ -13,50 +12,50 @@ class Modal extends Component {
   }
 
   componentWillMount() {
-    this._setConfig();
+    this.setConfig();
   }
 
   componentDidMount() {
     if (this.props.visibility) {
       // disables scroll window when modal is visible
       document.querySelector('body').style.overflow = 'hidden';
 
-      this._setEventListeners();
+      this.setEventListeners();
     }
   }
 
   componentDidUpdate(prevProps, nextProps) {
-    if (!nextProps.visibility) this._removeEventListeners();
+    if (!nextProps.visibility) this.removeEventListeners();
   }
 
-  _setConfig() {
+  onKeyDown(event) {
+    // 27 => ESC key
+    if (event.keyCode !== 27) return;
+
+    this.closeModal();
+  }
+
+  setConfig() {
     // needs to be initialiazed and have a global scope inside the component
     // because of adding/removing event
-    const onKeyDown= (e) => {
-      this._onKeyDown(e);
+    const onKeyDown = (e) => {
+      this.onKeyDown(e);
     };
 
     this.config = {
       onKeyDown
     };
   }
 
-  _setEventListeners() {
+  setEventListeners() {
     document.addEventListener('keydown', this.config.onKeyDown);
   }
 
-  _removeEventListeners() {
+  removeEventListeners() {
     document.removeEventListener('keydown', this.config.onKeyDown);
   }
 
-  _onKeyDown(event) {
-    // 27 => ESC key
-    if (event.keyCode !== 27) return;
-
-    this._closeModal();
-  }
-
-  _closeModal() {
+  closeModal() {
     // enables scroll window when modal is invisible
     document.querySelector('body').style.overflow = null;
 
@@ -70,15 +69,15 @@ class Modal extends Component {
           {this.props.veil &&
             <div
               className={this.props.cssClasses.veil}
-              onClick={() => this._closeModal()}
+              onClick={() => this.closeModal()}
             />}
 
           <div className={this.props.cssClasses.container}>
             <header className={this.props.cssClasses.header}>
               {this.props.closeable &&
                 <div
-                className={this.props.cssClasses.btnClose}
-                onClick={() => this._closeModal()}
+                  className={this.props.cssClasses.btnClose}
+                  onClick={() => this.closeModal()}
                 />}
             </header>
             <section className={this.props.cssClasses.content}>
@@ -87,8 +86,8 @@ class Modal extends Component {
             {this.props.hasFooter &&
               <footer className={this.props.cssClasses.footer}>
                 <button
-                  className='btn-accept'
-                  onClick={() => this._closeModal()}
+                  className="btn-accept"
+                  onClick={() => this.closeModal()}
                 >
                   Accept
                 </button>

components/Spinner/index.jsx

@@ -1,5 +1,5 @@
-import './style.scss';
 import React from 'react';
+import './style.scss';
 
 function Spinner(props) {
   return (

gulpfile.js

@@ -0,0 +1,13 @@
+const gulp = require('gulp');
+
+const config = {
+  copy: {
+    src: './components/**/*.{scss,jpg,png}',
+    dest: './dist'
+  }
+};
+
+gulp.task('copy', function() {
+  gulp.src(config.copy.src, { buffer: false })
+    .pipe(gulp.dest(config.copy.dest));
+});

package.json

@@ -1,13 +1,13 @@
 {
   "name": "vizz-components",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "A collection of components to use in Vizzuality's project",
   "main": "dist/index.js",
   "scripts": {
-    "test": "eslint ./components && jscs ./components",
-    "server": "start-storybook -p 9000",
-    "build": "NODE_ENV=production webpack --progress --colors",
-    "postinstall": "npm run build"
+    "test": "eslint --ext .js --ext .jsx .",
+    "start": "start-storybook -p 9000",
+    "build": "gulp copy && babel ./components --out-dir ./dist",
+    "prepublish": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -20,33 +20,20 @@
   },
   "homepage": "https://github.com/Vizzuality/vizz-components#readme",
   "dependencies": {
-    "autoprefixer": "^6.5.3",
-    "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.8",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-es2016": "^6.16.0",
-    "babel-preset-react": "^6.16.0",
-    "css-loader": "^0.26.0",
-    "file-loader": "^0.9.0",
-    "node-sass": "^3.13.0",
-    "postcss-loader": "^1.1.1",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
-    "resolve-url-loader": "^1.6.0",
-    "sass-loader": "^4.0.2",
-    "style-loader": "^0.13.1",
     "three": "^0.82.1",
-    "three-orbit-controls": "^82.1.0",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.13.3"
+    "three-orbit-controls": "^82.1.0"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
-    "eslint": "^3.11.1",
-    "eslint-config-airbnb": "^13.0.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.6.0",
-    "jscs": "^3.0.7"
+    "autoprefixer": "^6.5.3",
+    "babel-cli": "^6.23.0",
+    "babel-preset-latest": "^6.22.0",
+    "babel-preset-react": "^6.16.0",
+    "eslint": "^3.15.0",
+    "eslint-config-vizzuality": "^1.0.3",
+    "gulp": "^3.9.1",
+    "node-sass": "^3.13.0"
   }
 }