npm updates: eslint-config-airbnb

Author: jorrit

.eslintignore

@@ -0,0 +1,4 @@
+es
+lib
+umd
+demo/dist

demo/src/index.js

@@ -14,7 +14,7 @@ const rows = [
   {
     name: 'Marlon Brando',
     role: <a href="https://en.wikipedia.org/wiki/Vito_Corleone">Vito Corleone</a>,
-    image: <img src="https://upload.wikimedia.org/wikipedia/en/2/21/Godfather15_flip.jpg" alt="Vito Corleone" />
+    image: <img src="https://upload.wikimedia.org/wikipedia/en/2/21/Godfather15_flip.jpg" alt="Vito Corleone" />,
   },
   {
     image: <img src="https://upload.wikimedia.org/wikipedia/en/d/df/Michaelcoreleone.jpg" alt="Al Pacino" />,
@@ -44,8 +44,8 @@ const rows = [
 ];
 const keyGetter = row => row.name;
 
-const Demo = () =>
-  (<div>
+const Demo = () => (
+  <div>
     <h1>react-hyper-responsive-table demo</h1>
     <p>The breakpoint of this demo is set to 578 pixels.</p>
     <ReactHyperResponsiveTable

package-lock.json

@@ -10,9 +10,9 @@
   "devDependencies": {
     "babel-eslint": "^8.0.1",
     "eslint": "^4.8.0",
-    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-airbnb": "^16.0.0",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
     "gh-pages": "^1.0.0",
     "match-media-mock": "^0.1.0",
@@ -48,7 +48,7 @@
     "build": "nwb build-react-component",
     "clean": "nwb clean-module && nwb clean-demo",
     "gh-pages": "gh-pages -d demo/dist",
-    "lint": "eslint src tests",
+    "lint": "eslint .",
     "start": "nwb serve-react-demo",
     "test": "nwb test-react",
     "test:coverage": "nwb test-react --coverage",

package.json

@@ -108,34 +108,41 @@ class HyperResponsiveTable extends Component {
   };
 
   render() {
-    const { tableStyling, headers, rows, keyGetter } = this.props;
+    const {
+      tableStyling,
+      headers,
+      rows,
+      keyGetter,
+    } = this.props;
     const { narrow } = this.state;
 
     const dataKeys = Object.keys(headers);
 
     if (narrow) {
-      return (<table {...getClassNameOrStyleProps(tableStyling, this.state)}>
-        {rows.map(row =>
-          (<tbody key={keyGetter(row)}>
-            {dataKeys.map(key => <tr key={key}><th scope="row">{headers[key]}</th><td>{row[key]}</td></tr>)}
-          </tbody>))
-        }
-      </table>);
+      return (
+        <table {...getClassNameOrStyleProps(tableStyling, this.state)}>
+          {rows.map(row => (
+            <tbody key={keyGetter(row)}>
+              {dataKeys.map(key => <tr key={key}><th scope="row">{headers[key]}</th><td>{row[key]}</td></tr>)}
+            </tbody>))
+          }
+        </table>);
     }
 
-    return (<table {...getClassNameOrStyleProps(tableStyling, this.state)}>
-      <thead>
-        <tr>
-          { dataKeys.map(key => <th key={key} scope="col">{headers[key]}</th>) }
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map(row =>
-          (<tr key={keyGetter(row)}>
-            {dataKeys.map(key => <td key={key}>{row[key]}</td>)}
-          </tr>))}
-      </tbody>
-    </table>);
+    return (
+      <table {...getClassNameOrStyleProps(tableStyling, this.state)}>
+        <thead>
+          <tr>
+            { dataKeys.map(key => <th key={key} scope="col">{headers[key]}</th>) }
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map(row => (
+            <tr key={keyGetter(row)}>
+              {dataKeys.map(key => <td key={key}>{row[key]}</td>)}
+            </tr>))}
+        </tbody>
+      </table>);
   }
 }
 

src/index.js

@@ -38,7 +38,12 @@ describe('Component', () => {
 
   it('low integer breakpoint should give wide styled table', () => {
     const breakpoint = 300;
-    const props = { headers, rows, keyGetter, breakpoint };
+    const props = {
+      headers,
+      rows,
+      keyGetter,
+      breakpoint,
+    };
 
     render(<Component {...props} />, node, () => {
       expect(node.querySelectorAll('table').length).toEqual(1);
@@ -50,7 +55,12 @@ describe('Component', () => {
 
   it('high integer breakpoint should give narrow styled table', () => {
     const breakpoint = 3000;
-    const props = { headers, rows, keyGetter, breakpoint };
+    const props = {
+      headers,
+      rows,
+      keyGetter,
+      breakpoint,
+    };
 
     render(<Component {...props} />, node, () => {
       expect(node.querySelectorAll('table').length).toEqual(1);
@@ -62,7 +72,12 @@ describe('Component', () => {
 
   it('low media query breakpoint should give wide styled table', () => {
     const breakpoint = 'screen and (min-width: 1000px)';
-    const props = { headers, rows, keyGetter, breakpoint };
+    const props = {
+      headers,
+      rows,
+      keyGetter,
+      breakpoint,
+    };
 
     render(<Component {...props} />, node, () => {
       expect(node.querySelectorAll('table').length).toEqual(1);
@@ -74,7 +89,12 @@ describe('Component', () => {
 
   it('tableStyling function value should give dynamic class when string is returned', () => {
     const tableStyling = opts => (opts.narrow ? 'narrow' : 'wide');
-    const props = { headers, rows, keyGetter, tableStyling };
+    const props = {
+      headers,
+      rows,
+      keyGetter,
+      tableStyling,
+    };
 
     render(<Component {...props} breakpoint={3000} />, node, () => {
       expect(node.querySelectorAll('table.narrow').length).toEqual(1);
@@ -92,7 +112,13 @@ describe('Component', () => {
   it('tableStyling object value should give style attribute', () => {
     const breakpoint = 3000;
     const tableStyling = { color: 'red' };
-    const props = { headers, rows, keyGetter, breakpoint, tableStyling };
+    const props = {
+      headers,
+      rows,
+      keyGetter,
+      breakpoint,
+      tableStyling,
+    };
 
     render(<Component {...props} />, node, () => {
       const table = node.querySelector('table');
@@ -104,7 +130,13 @@ describe('Component', () => {
   it('wide to narrow change should trigger tableStyling function call', (done) => {
     const breakpoint = 1000;
     const tableStyling = opts => (opts.narrow ? 'narrow' : 'wide');
-    const props = { headers, rows, keyGetter, breakpoint, tableStyling };
+    const props = {
+      headers,
+      rows,
+      keyGetter,
+      breakpoint,
+      tableStyling,
+    };
 
     render(<Component {...props} />, node, () => {
       const table = node.querySelector('table');
@@ -123,7 +155,13 @@ describe('Component', () => {
   it('invalid tableStyling should give no class or style attribute', () => {
     const breakpoint = 1000;
     const tableStyling = 1234;
-    const props = { headers, rows, keyGetter, breakpoint, tableStyling };
+    const props = {
+      headers,
+      rows,
+      keyGetter,
+      breakpoint,
+      tableStyling,
+    };
 
     render(<Component {...props} />, node, () => {
       const table = node.querySelector('table');