Chore: Rework tests, linting and publishing (#100)

* Add eslint to package
* Fix linting warnings
* Add jest as test runner
* move lib/ to src/
* add webpack config for building dist and dev
* Add release script back
* Add babel-core dev dependency
* Add cross-env for windows support
* Chore: add building of bundle to preversion

Author: danez

.babelrc

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

.eslintignore

@@ -0,0 +1 @@
+/webpack.*

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "react/prefer-es6-class": 0,
+    "react/prefer-stateless-function": 0
+  }
+}

.gitignore

@@ -3,3 +3,4 @@
 build/
 node_modules/
 npm-debug.log
+lib/

.npmignore

@@ -4,13 +4,9 @@ node_js:
   - "4"
   - "5"
   - stable
-
-before_script:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
 branches:
   only:
     - master
-email:
-  on_failure: change
-  on_success: never
+script:
+  - npm run lint
+  - npm test

.travis.yml

@@ -17,8 +17,10 @@
     "build",
     "examples",
     "lib",
+    "src",
     "node_modules",
     "specs",
-    "package.json"
+    "package.json",
+    "webpack.*"
   ]
-}
+}

bower.json

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Tab, Tabs, TabList, TabPanel } from '../../lib/main';
+import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
 
 const App = React.createClass({
   render() {
@@ -83,7 +83,7 @@ const App = React.createClass({
         </Tabs>
       </div>
     );
-  }
+  },
 });
 
-ReactDOM.render(<App/>, document.getElementById('example'));
+ReactDOM.render(<App />, document.getElementById('example'));

examples/basic/app.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Tab, Tabs, TabList, TabPanel } from '../../lib/main';
+import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
 
 const App = React.createClass({
   getInitialState() {
     return {
       showA: true,
       showB: true,
-      showC: true
+      showC: true,
     };
   },
 
@@ -19,35 +19,35 @@ const App = React.createClass({
 
   render() {
     return (
-      <div style={{padding: 50}}>
+      <div style={{ padding: 50 }}>
         <p>
           <label>
-            <input type="checkbox" checked={this.state.showA} name="showA" onChange={this.handleCheckClicked}/>
+            <input type="checkbox" checked={this.state.showA} name="showA" onChange={this.handleCheckClicked} />
             Show A
-          </label><br/>
+          </label><br />
           <label>
-            <input type="checkbox" checked={this.state.showB} name="showB" onChange={this.handleCheckClicked}/>
+            <input type="checkbox" checked={this.state.showB} name="showB" onChange={this.handleCheckClicked} />
             Show B
-          </label><br/>
+          </label><br />
           <label>
-            <input type="checkbox" checked={this.state.showC} name="showC" onChange={this.handleCheckClicked}/>
+            <input type="checkbox" checked={this.state.showC} name="showC" onChange={this.handleCheckClicked} />
             Show C
-          </label><br/>
+          </label><br />
         </p>
         <Tabs>
           <TabList>
-            { this.state.showA && <Tab>Tab A</Tab> }
-            { this.state.showB && <Tab>Tab B</Tab> }
-            { this.state.showC && <Tab>Tab C</Tab> }
+            {this.state.showA && <Tab>Tab A</Tab>}
+            {this.state.showB && <Tab>Tab B</Tab>}
+            {this.state.showC && <Tab>Tab C</Tab>}
           </TabList>
-          { this.state.showA && <TabPanel>This is tab A</TabPanel> }
-          { this.state.showB && <TabPanel>This is tab B</TabPanel> }
-          { this.state.showC && <TabPanel>This is tab C</TabPanel> }
+          {this.state.showA && <TabPanel>This is tab A</TabPanel>}
+          {this.state.showB && <TabPanel>This is tab B</TabPanel>}
+          {this.state.showC && <TabPanel>This is tab C</TabPanel>}
         </Tabs>
       </div>
     );
-  }
+  },
 });
 
-ReactDOM.render(<App/>, document.getElementById('example'));
+ReactDOM.render(<App />, document.getElementById('example'));
 

examples/conditional/app.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Modal from 'react-modal';
-import { Tab, Tabs, TabList, TabPanel } from '../../lib/main';
+import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
 
 Modal.setAppElement(document.getElementById('example'));
 Modal.injectCSS();
@@ -12,17 +12,17 @@ const App = React.createClass({
       isModalOpen: false,
       selectedIndex: -1,
       tabs: [
-        {label: 'Foo', content: 'This is foo'},
-        {label: 'Bar', content: 'This is bar'},
-        {label: 'Baz', content: 'This is baz'},
-        {label: 'Zap', content: 'This is zap'}
-      ]
+        { label: 'Foo', content: 'This is foo' },
+        { label: 'Bar', content: 'This is bar' },
+        { label: 'Baz', content: 'This is baz' },
+        { label: 'Zap', content: 'This is zap' },
+      ],
     };
   },
 
   render() {
     return (
-      <div style={{padding: 50}}>
+      <div style={{ padding: 50 }}>
         <p>
           <button onClick={this.openModal}>+ Add</button>
         </p>
@@ -43,13 +43,13 @@ const App = React.createClass({
         <Modal
           isOpen={this.state.isModalOpen}
           onRequestClose={this.closeModal}
-          style={{width: 400, height: 350, margin: '0 auto'}}
+          style={{ width: 400, height: 350, margin: '0 auto' }}
         >
           <h2>Add a Tab</h2>
-          <label htmlFor="label">Label:</label><br/>
-          <input id="label" type="text" ref="label"/><br/><br/>
-          <label htmlFor="content">Content:</label><br/>
-          <textarea id="content" ref="content" rows="10" cols="50"></textarea><br/><br/>
+          <label htmlFor="label">Label:</label><br />
+          <input id="label" type="text" ref="label" /><br /><br />
+          <label htmlFor="content">Content:</label><br />
+          <textarea id="content" ref="content" rows="10" cols="50"></textarea><br /><br />
           <button onClick={this.addTab}>OK</button>{' '}
           <button onClick={this.closeModal}>Cancel</button>
         </Modal>
@@ -59,13 +59,13 @@ const App = React.createClass({
 
   openModal() {
     this.setState({
-      isModalOpen: true
+      isModalOpen: true,
     });
   },
 
   closeModal() {
     this.setState({
-      isModalOpen: false
+      isModalOpen: false,
     });
   },
 
@@ -75,18 +75,18 @@ const App = React.createClass({
 
     this.state.tabs.push({
       label: label,
-      content: content
+      content: content,
     });
     this.setState({
-      selectedIndex: this.state.tabs.length - 1
+      selectedIndex: this.state.tabs.length - 1,
     });
     this.closeModal();
   },
 
   removeTab(index) {
     this.state.tabs.splice(index, 1);
     this.forceUpdate();
-  }
+  },
 });
 
-ReactDOM.render(<App/>, document.getElementById('example'));
+ReactDOM.render(<App />, document.getElementById('example'));