checks added

.babelrc

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "transform-react-jsx"
+  ],
+  "presets": ["es2015"]
+}

.eslintrc

@@ -0,0 +1,92 @@
+{
+    "ecmaFeatures": {
+        "jsx": true,
+        "modules": true
+    },
+    "env": {
+        "es6": true,
+        "node": true
+    },
+
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "array-bracket-spacing": [
+            2,
+            "always"
+        ],
+        "comma-dangle": [
+            2,
+            "never"
+        ],
+        "eol-last": 2,
+        "indent": [
+            2,
+            2,
+            {
+                "SwitchCase": 1
+            }
+        ],
+        "jsx-quotes": [
+            2,
+            "prefer-double"
+        ],
+        "no-multiple-empty-lines": 2,
+        "no-unused-vars": 2,
+        "no-var": 2,
+        "object-curly-spacing": [
+            2,
+            "always"
+        ],
+        "quotes": [
+            2,
+            "single",
+            "avoid-escape"
+        ],
+        "react/forbid-prop-types": 1,
+        "react/jsx-boolean-value": 1,
+        "react/jsx-closing-bracket-location": 1,
+        "react/jsx-curly-spacing": 1,
+        "react/jsx-indent-props": 1,        
+        "react/jsx-no-bind": 1,
+        "react/jsx-no-duplicate-props": 1,
+        "react/jsx-no-literals": 1,
+        "react/jsx-no-undef": 1,        
+        "react/jsx-sort-prop-types": 1,
+        "react/jsx-sort-props": 1,
+        "react/jsx-uses-react": 1,
+        "react/jsx-uses-vars": 1,
+        "react/no-danger": 1,
+        "react/no-did-mount-set-state": 1,
+        "react/no-did-update-set-state": 1,
+        "react/no-direct-mutation-state": 1,
+        "react/no-multi-comp": 1,        
+        "react/no-unknown-property": 1,
+        "react/prefer-es6-class": 1,
+        "react/prop-types": [1,
+            {"ignore":["children"]}
+        ],
+        "react/react-in-jsx-scope": 1,
+        "react/require-extension": 1,
+        "react/self-closing-comp": 1,
+        "react/sort-comp": 1,
+        "react/wrap-multilines": 1,
+        "semi": [
+            2,
+            "always"
+        ],
+        "space-before-blocks": [
+            2,
+            "always"
+        ],
+        "space-before-function-paren": [
+            2,
+            {
+                "anonymous": "always",
+                "named": "never"
+            }
+        ],
+        "strict": 0
+    }
+}

.gitignore

@@ -25,3 +25,6 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+#generated folder
+lib

example/App.jsx → examples/App.jsx

@@ -2,9 +2,7 @@ import React from 'react';
 import TestSlider from './TestSlider.jsx';
 
 export default class App extends React.Component {
-
-    render() {
-        return (<TestSlider/>);
-    }
-
-}
+  render() {
+    return (<TestSlider/>);
+  };
+}

examples/TestSlider.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PageSlider from '../src/react-page-slider.jsx';
+
+class TestSlider extends React.Component {
+
+  constructor() {
+    super();
+    this.state={ 'sliderActivated' : false };
+    this._closeClick = this._closeClick.bind(this);
+    this._handleClick = this._handleClick.bind(this);    
+  }
+
+  _closeClick(e) {
+    e.preventDefault();
+    this.setState({ 'sliderActivated' : false });
+  }
+
+  _handleClick(e) {
+    e.preventDefault();
+    this.setState({ 'sliderActivated' : true });
+  }
+
+  render() {
+    const text = this.state.sliderActivated ? 'Activated' : 'not Activated';
+
+    const centered = {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    };
+
+    return (      
+      <div>        
+        <div>
+            <h1>{`Page Slider ${text}`}</h1>
+            <button onClick={this._handleClick}>
+                {'Click to activate Slider.'}
+            </button>
+        </div>
+        <PageSlider close={this._closeClick} show={this.state.sliderActivated}>
+            <div style={centered}>{'This is overlay div'}</div>
+        </PageSlider>
+      </div>
+    );
+  }
+};
+
+export default TestSlider;

examples/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.jsx';
+(() => {
+  const app = document.createElement('div');
+
+  document.body.appendChild(app);
+
+  document.body.style.margin = '0px';
+  document.body.style.padding = '0px';
+
+  ReactDOM.render(<App />, app);
+})();

modules/react-page-slider.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+class PageSlider extends React.Component {
+
+  render() {
+    const overlayStyle = {
+      minWidth: '100%',
+      minHeight: '100%',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      marginTop: '150%',
+      position: 'fixed',
+      background: '#000',
+      boxShadow: '0px 0px 0px 0px rgba(0,0,0,0.6)',
+      zIndex: '2',
+      WebkitTransition: 'all .8s ease-in-out',
+      MozTransition: 'all .8s ease-in-out',
+      OTransition: 'all .8s ease-in-out',
+      transition: 'all .8s ease-in-out',
+      top:0
+    };
+
+    const topcornerStyle = {
+      position:'absolute',
+      top:10,
+      right:10
+    };
+
+    const slideUp = {
+      marginTop: '0%',
+      backgroundColor: '#009cde'
+    };
+
+    const style = this.props.show ? Object.assign({},overlayStyle,slideUp) : overlayStyle;
+
+    return (
+      <div style={style}>
+        <a href="#" onClick={this.props.close} style={topcornerStyle}>
+          {'Close'}
+        </a>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+PageSlider.propTypes = {
+  close: PropTypes.function,
+  show: PropTypes.boolean
+};
+
+export default PageSlider;

package.json

@@ -5,7 +5,9 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "babel ./modules -d lib",
+    "test": "npm run lint",
+    "lint": " eslint --ignore-path .gitignore modules/* examples/*"
   },
   "repository": {
     "type": "git",
@@ -24,12 +26,15 @@
   "homepage": "https://github.com/chunkiat82/react-page-slider",
   "devDependencies": {
     "animate.css": "^3.4.0",
-    "babel": "^6.0.15",
-    "babel-core": "^6.1.2",
+    "babel": "~6.0.15",
+    "babel-core": "~6.1.2",
+    "babel-eslint": "^4.1.5",
     "babel-loader": "^6.1.0",
+    "babel-plugin-transform-react-jsx": "^6.0.18",
     "babel-preset-es2015": "^6.1.2",
     "babel-preset-react": "^6.1.2",
-    "babelify": "^7.2.0",
+    "eslint": "^1.9.0",
+    "eslint-plugin-react": "^3.8.0",
     "html-webpack-plugin": "^1.6.2",
     "path": "^0.12.7",
     "react": "^0.14.2",

webpack.config.js

@@ -3,7 +3,7 @@ var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-    entry: "./example/index.jsx",
+    entry: "./examples/index.jsx",
     output: {
         path: path.resolve(__dirname, 'build'),
         publicPath: "/",
@@ -25,4 +25,4 @@ module.exports = {
     },
     devtool: 'source-map',
     plugins: [new HtmlWebpackPlugin()]
-};
+};