Upgrade eslint-config-airbnb and make it pass

.eslintrc.js

@@ -74,6 +74,7 @@ module.exports = {
     'jsx-a11y/accessible-emoji': ignore,
     'jsx-a11y/href-no-hash': ignore,
     'jsx-a11y/label-has-for': ignore,
+    'jsx-a11y/click-events-have-key-events': warn,
     'jsx-a11y/anchor-is-valid': [warn, { aspects: ['invalidHref'] }],
     'react/no-unescaped-entities': ignore,
   },

addons/comments/src/manager/components/CommentItem/index.js

@@ -42,7 +42,7 @@ export default class CommentItem extends Component {
   }
 
   render() {
-    const comment = this.props.comment;
+    const { comment } = this.props;
     let commentStyle = style.commentItem;
     if (comment.loading) {
       commentStyle = style.commentItemloading;

addons/comments/src/manager/containers/CommentsPanel/dataStore.js

@@ -32,7 +32,7 @@ export default class DataStore {
       };
     }
 
-    const comments = item.comments;
+    const { comments } = item;
     let invalidated = false;
 
     // invalid caches created 60 minutes ago.

addons/comments/src/manager/containers/CommentsPanel/index.js

@@ -9,7 +9,6 @@ export default class Container extends Component {
     super(props, ...args);
     this.state = {
       user: null,
-      users: [],
       comments: [],
       loading: true,
     };

addons/info/src/components/Node.js

@@ -31,7 +31,7 @@ function getData(element) {
   }
 
   data.children = element.props.children;
-  const type = element.type;
+  const { type } = element;
 
   if (typeof type === 'string') {
     data.name = type;

addons/info/src/components/PropTable.js

@@ -28,7 +28,7 @@ const renderDocgenPropType = propType => {
     return 'unknown';
   }
 
-  const name = propType.name;
+  const { name } = propType;
 
   switch (name) {
     case 'arrayOf':

addons/info/src/components/PropVal.js

@@ -76,7 +76,7 @@ function previewObject(val, maxPropObjectKeys) {
 
 export default function PropVal(props) {
   const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
-  let val = props.val;
+  let { val } = props;
   let braceWrap = true;
   let content = null;
 

addons/info/src/components/Props.js

@@ -11,7 +11,7 @@ const stylesheet = {
 export default function Props(props) {
   const { maxPropsIntoLine, maxPropArrayLength, maxPropObjectKeys, maxPropStringLength } = props;
   const nodeProps = props.node.props;
-  const defaultProps = props.node.type.defaultProps;
+  const { defaultProps } = props.node.type;
   if (!nodeProps || typeof nodeProps !== 'object') {
     return <span />;
   }

addons/info/src/components/Story.js

@@ -12,7 +12,7 @@ import Node from './Node';
 import { Pre } from './markdown';
 
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
-const STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES;
+const { STORYBOOK_REACT_CLASSES } = global;
 
 const stylesheet = {
   link: {

addons/info/src/index.test.js

@@ -35,7 +35,7 @@ describe('addon Info', () => {
         obj={{ a: 'a', b: 'b' }}
         array={[1, 2, 3]}
         number={7}
-        string={'seven'}
+        string="seven"
         bool
       />
     </div>

addons/knobs/src/KnobManager.js

@@ -17,7 +17,7 @@ export default class KnobManager {
   knob(name, options) {
     this._mayCallChannel();
 
-    const knobStore = this.knobStore;
+    const { knobStore } = this;
     const existingKnob = knobStore.get(name);
     // We need to return the value set by the knob editor via this.
     // But, if the user changes the code for the defaultValue we should set

addons/knobs/src/components/PropForm.js

@@ -31,7 +31,7 @@ export default class propForm extends React.Component {
   }
 
   render() {
-    const knobs = this.props.knobs;
+    const { knobs } = this.props;
 
     return (
       <form style={stylesheet.propForm}>

addons/storyshots/src/index.js

@@ -16,7 +16,7 @@ global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
 const babel = require('babel-core');
 
-const pkg = readPkgUp.sync().pkg;
+const { pkg } = readPkgUp.sync();
 
 const hasDependency = name =>
   (pkg.devDependencies && pkg.devDependencies[name]) ||

app/react-native/src/manager/components/PreviewHelp.js

@@ -30,9 +30,9 @@ const PreviewHelp = () => (
     <h1>Welcome to storybook</h1>
     <p>This is a UI component dev environment for your app.</p>
     <p>
-      We've added some basic stories inside the <span style={styles.code}>
-        storybook/stories
-      </span>{' '}
+      We've added some basic stories inside the {
+        <span style={styles.code}>storybook/stories</span>
+      }{' '}
       directory. A story is a single state of one or more UI components. You can have as many
       stories as you want. Basically a story is like a visual test case.
     </p>

app/react-native/src/manager/provider.js

@@ -16,7 +16,7 @@ export default class ReactProvider extends Provider {
       this.channel = undefined;
     }
 
-    const secured = options.secured;
+    const { secured } = options;
     const websocketType = secured ? 'wss' : 'ws';
     let url = `${websocketType}://${domain}`;
     if (options.manualId) {

app/react-native/src/preview/index.js

@@ -69,7 +69,7 @@ export default class Preview {
         const port = params.port !== false ? `:${params.port || 7007}` : '';
 
         const query = params.query || '';
-        const secured = params.secured;
+        const { secured } = params;
         const websocketType = secured ? 'wss' : 'ws';
         const httpType = secured ? 'https' : 'http';
 

app/react-native/src/server/middleware.js

@@ -30,7 +30,7 @@ export default function({ projectDir, configDir, ...options }) {
   const config = loadConfig(environment, currentWebpackConfig, projectDir, configDir);
 
   // remove the leading '/'
-  let publicPath = config.output.publicPath;
+  let { publicPath } = config.output;
   if (publicPath[0] === '/') {
     publicPath = publicPath.slice(1);
   }

app/react/src/client/index.js

@@ -4,13 +4,7 @@ import deprecate from 'util-deprecate';
 import { action as deprecatedAction } from '@storybook/addon-actions';
 import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
 
-import * as previewApi from './preview';
-
-export const storiesOf = previewApi.storiesOf;
-export const setAddon = previewApi.setAddon;
-export const addDecorator = previewApi.addDecorator;
-export const configure = previewApi.configure;
-export const getStorybook = previewApi.getStorybook;
+export * from './preview';
 
 export const action = deprecate(
   deprecatedAction,

app/react/src/client/manager/provider.js

@@ -1,5 +1,4 @@
-/* global location */
-
+import { location } from 'global';
 import qs from 'qs';
 import React from 'react';
 import { Provider } from '@storybook/ui';

app/react/src/client/preview/reducer.js

@@ -29,7 +29,7 @@ export default function reducer(state = {}, action) {
       const { storyKindList } = action;
       if (!newState.selectedKind && storyKindList.length > 0) {
         newState.selectedKind = storyKindList[0].kind;
-        newState.selectedStory = storyKindList[0].stories[0];
+        [newState.selectedStory] = storyKindList[0].stories;
       }
       return newState;
     }

app/react/src/server/config/WatchMissingNodeModulesPlugin.js

@@ -19,7 +19,7 @@ function WatchMissingNodeModulesPlugin(nodeModulesPath) {
 WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
   compiler.plugin('emit', (compilation, callback) => {
     const missingDeps = compilation.missingDependencies;
-    const nodeModulesPath = this.nodeModulesPath;
+    const { nodeModulesPath } = this;
 
     // If any missing files are expected to appear in node_modules...
     if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {

app/react/src/server/middleware.js

@@ -22,7 +22,7 @@ export default function(configDir) {
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'
-  let publicPath = config.output.publicPath;
+  let { publicPath } = config.output;
   if (publicPath[0] === '/') {
     publicPath = publicPath.slice(1);
   }

app/vue/src/client/index.js

@@ -4,13 +4,7 @@
 // import { action as deprecatedAction } from '@storybook/addon-actions';
 // import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
 
-import * as previewApi from './preview';
-
-export const storiesOf = previewApi.storiesOf;
-export const setAddon = previewApi.setAddon;
-export const addDecorator = previewApi.addDecorator;
-export const configure = previewApi.configure;
-export const getStorybook = previewApi.getStorybook;
+export * from './preview';
 
 // export const action = deprecate(
 //   deprecatedAction,

app/vue/src/client/manager/provider.js

@@ -1,5 +1,4 @@
-/* global location */
-
+import { location } from 'global';
 import qs from 'qs';
 import React from 'react';
 import { Provider } from '@storybook/ui';

app/vue/src/client/preview/reducer.js

@@ -29,7 +29,7 @@ export default function reducer(state = {}, action) {
       const { storyKindList } = action;
       if (!newState.selectedKind && storyKindList.length > 0) {
         newState.selectedKind = storyKindList[0].kind;
-        newState.selectedStory = storyKindList[0].stories[0];
+        [newState.selectedStory] = storyKindList[0].stories;
       }
       return newState;
     }

app/vue/src/server/config/WatchMissingNodeModulesPlugin.js

@@ -19,7 +19,7 @@ function WatchMissingNodeModulesPlugin(nodeModulesPath) {
 WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
   compiler.plugin('emit', (compilation, callback) => {
     const missingDeps = compilation.missingDependencies;
-    const nodeModulesPath = this.nodeModulesPath;
+    const { nodeModulesPath } = this;
 
     // If any missing files are expected to appear in node_modules...
     if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {

app/vue/src/server/middleware.js

@@ -22,7 +22,7 @@ export default function(configDir) {
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'
-  let publicPath = config.output.publicPath;
+  let { publicPath } = config.output;
   if (publicPath[0] === '/') {
     publicPath = publicPath.slice(1);
   }

docs/gatsby-browser.js

@@ -1,6 +1,4 @@
-const global = require('global');
-
-const document = global.document;
+const { document } = require('global');
 
 exports.onRouteUpdate = location => {
   if (location.hash) {

docs/loaders/markdown-loader/index.js

@@ -48,7 +48,7 @@ module.exports = function markdownLoader(content) {
 
   const query = loaderUtils.parseQuery(this.query);
   const linkPrefix = query.config.linkPrefix || '';
-  const shouldPrefix = query.shouldPrefix;
+  const { shouldPrefix } = query;
 
   const meta = frontMatter(content);
   const body = md(linkPrefix, shouldPrefix).render(meta.body);

docs/stories/implementations.js

@@ -39,15 +39,15 @@ export default {
       sections={docsData.sections}
       selectedItem={docsData.selectedItem}
       categories={docsData.categories}
-      selectedCatId={'cat-2'}
+      selectedCatId="cat-2"
     />
   ),
   'Docs.docs-container': (
     <DocsContainer
       sections={docsData.sections}
       selectedItem={docsData.selectedItem}
       categories={docsData.categories}
-      selectedCatId={'cat-2'}
+      selectedCatId="cat-2"
     />
   ),
   'Docs.docs-content': (

examples/cra-kitchen-sink/src/stories/index.stories.js

@@ -57,7 +57,7 @@ storiesOf('Button', module)
   ))
   .add('with notes', () => (
     // deprecated usage
-    <WithNotes notes={'A very simple button'}>
+    <WithNotes notes="A very simple button">
       <Button>
         {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
         Check my notes in the notes panel

lib/cli/bin/generate.js

@@ -6,10 +6,10 @@ const chalk = require('chalk');
 const detect = require('../lib/detect');
 const hasYarn = require('../lib/has_yarn');
 const types = require('../lib/project_types');
-const commandLog = require('../lib/helpers').commandLog;
-const codeLog = require('../lib/helpers').codeLog;
-const paddedLog = require('../lib/helpers').paddedLog;
-const installDeps = require('../lib/helpers').installDeps;
+const { commandLog } = require('../lib/helpers');
+const { codeLog } = require('../lib/helpers');
+const { paddedLog } = require('../lib/helpers');
+const { installDeps } = require('../lib/helpers');
 
 const logger = console;
 

lib/cli/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.js

@@ -1,9 +1,9 @@
 const helpers = require('../../lib/helpers');
 const latestVersion = require('latest-version');
-const spawn = require('child-process-promise').spawn;
+const { spawn } = require('child-process-promise');
 const path = require('path');
 
-const packageNames = require('@storybook/codemod').packageNames;
+const { packageNames } = require('@storybook/codemod');
 
 function updatePackage(devDependencies, oldName, newName) {
   if (devDependencies[oldName]) {

lib/codemod/src/transforms/update-addon-info.js

@@ -57,7 +57,7 @@ export default function transformer(file, api) {
    * @returns {CallExpression} the new withInfo function
    */
   const withInfo = addWithInfoExpression => {
-    const node = addWithInfoExpression.node;
+    const { node } = addWithInfoExpression;
     const args = node.arguments;
 
     // if optional description string is not supplied, the story component becomes second arg

lib/ui/src/modules/ui/components/down_panel/index.js

@@ -14,7 +14,7 @@ class DownPanel extends Component {
       this.props.onPanelSelect(name);
     };
 
-    let title = panel.title;
+    let { title } = panel;
     if (typeof title === 'function') {
       title = title();
     }

lib/ui/src/modules/ui/components/down_panel/index.test.js

@@ -20,7 +20,7 @@ describe('manager.ui.components.down_panel.index', () => {
     const onPanelSelect = () => 'onPanelSelect';
 
     const wrapper = shallow(
-      <DownPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel={'test2'} />
+      <DownPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel="test2" />
     );
 
     expect(wrapper.find('#test1').parent()).toHaveStyle('display', 'none');
@@ -38,7 +38,7 @@ describe('manager.ui.components.down_panel.index', () => {
     const onPanelSelect = jest.fn();
     const preventDefault = jest.fn();
     const wrapper = shallow(
-      <DownPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel={'test1'} />
+      <DownPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel="test1" />
     );
     wrapper.find('a').simulate('click', { preventDefault });
 

lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js

@@ -45,8 +45,8 @@ describe('manager.ui.components.left_panel.stories', () => {
       const wrap = shallow(
         <Stories
           storiesHierarchy={createHierarchy([])}
-          selectedKind={''}
-          selectedStory={''}
+          selectedKind=""
+          selectedStory=""
           selectedHierarchy={[]}
         />
       );

package.json

@@ -54,7 +54,7 @@
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "eslint": "^4.10.0",
-    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.4.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jest": "^21.0.0",

scripts/logo.js

@@ -59,7 +59,7 @@ const result = coloured.split('').map((char, index) => {
   return colorPrefix + (isSpace ? '⠀' : char);
 });
 
-const exec = require('child_process').exec;
+const { exec } = require('child_process');
 
 exec(`printf "%b" "${result.join('')}\\033[0m"`, {}).stdout.pipe(process.stdout);
 

scripts/prepare.js

@@ -18,7 +18,7 @@ const args = [
 ].join(' ');
 
 const command = `${babel} ${args}`;
-const code = shell.exec(command, { silent: true }).code;
+const { code } = shell.exec(command, { silent: true });
 
 if (code !== 0) {
   log.error(`FAILED: ${chalk.bold(`${packageJson.name}@${packageJson.version}`)}`);