Merge pull request #1715 from storybooks/eslint-vue

Enable eslint for vue-related stuff

.eslintignore

@@ -6,8 +6,6 @@ addons/**/example/**
 app/**/demo/**
 docs/public
 
-vue
-
 *.bundle.js
 *.js.map
 

addons/knobs/src/vue/index.js

@@ -33,5 +33,5 @@ export const vueHandler = (channel, knobStore) => getStory => context => ({
     channel.removeListener('addon:knobs:reset', this.onKnobReset);
     channel.removeListener('addon:knobs:knobChange', this.onKnobChange);
     knobStore.unsubscribe(this.setPaneKnobs);
-  }
+  },
 });

addons/knobs/src/vue/index.test.js

@@ -21,16 +21,16 @@ describe('Vue handler', () => {
     });
   });
 
-  it('Subscribes to the channel on creation', () => {
+  it('Subscribes to the channel on creation', () => {
     const testChannel = { emit: () => {}, on: jest.fn() };
-    const testStory = () => ({ render: (h) => h('div', ['testStory']) });
+    const testStory = () => ({ render: h => h('div', ['testStory']) });
     const testContext = {
       kind: 'Foo',
       story: 'bar baz',
     };
 
     const testStore = new KnobStore();
-    const component = new Vue(vueHandler(testChannel, testStore)(testStory)(testContext)).$mount();
+    new Vue(vueHandler(testChannel, testStore)(testStory)(testContext)).$mount();
 
     expect(testChannel.on).toHaveBeenCalledTimes(2);
     expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:reset', expect.any(Function));

app/vue/src/client/index.js

@@ -1,4 +1,4 @@
-import deprecate from 'util-deprecate';
+// import deprecate from 'util-deprecate';
 
 // NOTE export these to keep backwards compatibility
 // import { action as deprecatedAction } from '@storybook/addon-actions';

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

@@ -31,7 +31,10 @@ export default class ClientApi {
     }
 
     if (!m) {
-      console.warn(`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`);
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`
+      );
     }
 
     if (m && m.hot) {
@@ -58,7 +61,7 @@ export default class ClientApi {
       functional: true,
       render(h, c) {
         return h(Target, c.data, c.children);
-      }
+      },
     });
 
     api.add = (storyName, getStory) => {
@@ -81,7 +84,7 @@ export default class ClientApi {
           const decoratedStory = decorator(story, context);
           decoratedStory.components = decoratedStory.components || {};
           decoratedStory.components.story = createWrapperComponent(story());
-          return decoratedStory
+          return decoratedStory;
         },
         getStory
       );

app/vue/src/client/preview/client_api.test.js

@@ -181,7 +181,9 @@ describe('preview.client_api', () => {
       const storyStore = new StoryStore();
       const api = new ClientAPI({ storyStore });
       const localApi = api.storiesOf('none');
-      localApi.addDecorator((fn, { kind, story }) => ({ template: `<div>${kind}-${story}-${fn().template}</div>` }));
+      localApi.addDecorator((fn, { kind, story }) => ({
+        template: `<div>${kind}-${story}-${fn().template}</div>`,
+      }));
 
       localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
 

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

@@ -1,13 +1,9 @@
+import { stripIndents } from 'common-tags';
 import Vue from 'vue';
+
 import ErrorDisplay from './ErrorDisplay.vue';
 import NoPreview from './NoPreview.vue';
 
-import { window } from 'global';
-import { stripIndents } from 'common-tags';
-
-// check whether we're running on node/browser
-const isBrowser = typeof window !== 'undefined';
-
 const logger = console;
 let previousKind = '';
 let previousStory = '';
@@ -20,9 +16,10 @@ function renderErrorDisplay(error) {
   err = new Vue({
     el: '#error-display',
     render(h) {
-      return h('div', { attrs: { id: 'error-display' } }, error
-        ? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } }) ]
-        : []
+      return h(
+        'div',
+        { attrs: { id: 'error-display' } },
+        error ? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } })] : []
       );
     },
   });
@@ -53,7 +50,7 @@ function renderRoot(options) {
 }
 
 export function renderMain(data, storyStore) {
-  if (storyStore.size() === 0) return null;
+  if (storyStore.size() === 0) return;
 
   const { selectedKind, selectedStory } = data;
 
@@ -87,13 +84,13 @@ export function renderMain(data, storyStore) {
         Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
       `,
     };
-    return renderError(error);
+    renderError(error);
   }
 
   renderRoot({
     el: '#root',
     render(h) {
-      return h('div', { attrs: { id: 'root' } }, [h(component)]);
+      return h('div', { attrs: { id: 'root' } }, [h(component)]);
     },
   });
 }

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

@@ -52,10 +52,10 @@ export default function() {
       // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
       modules: ['node_modules'].concat(nodePaths),
       alias: {
-        'vue$': require.resolve('vue/dist/vue.esm.js'),
-        'react$': require.resolve('react'),
+        vue$: require.resolve('vue/dist/vue.esm.js'),
+        react$: require.resolve('react'),
         'react-dom$': require.resolve('react-dom'),
-      }
+      },
     },
     performance: {
       hints: false,

app/vue/src/server/config/webpack.config.prod.js

@@ -60,10 +60,10 @@ export default function() {
       // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
       modules: ['node_modules'].concat(nodePaths),
       alias: {
-        'vue$': require.resolve('vue/dist/vue.esm.js'),
-        'react$': require.resolve('react'),
+        vue$: require.resolve('vue/dist/vue.esm.js'),
+        react$: require.resolve('react'),
         'react-dom$': require.resolve('react-dom'),
-      }
+      },
     },
   };
 

lib/cli/generators/VUE/template/stories/MyButton.js

@@ -10,9 +10,9 @@ export default {
         cursor: 'pointer',
         fontSize: 15,
         padding: '3px 10px',
-        margin: 10
-      }
-    }
+        margin: 10,
+      },
+    };
   },
 
   template: `
@@ -23,7 +23,7 @@ export default {
 
   methods: {
     onClick() {
-      this.$emit('click')
-    }
-  }
-}
+      this.$emit('click');
+    },
+  },
+};

lib/cli/generators/VUE/template/stories/Welcome.js

@@ -1,4 +1,5 @@
-const log = () => console.log('Welcome to storybook!')
+// eslint-disable-next-line no-console
+const log = () => console.log('Welcome to storybook!');
 
 export default {
   name: 'welcome',
@@ -6,8 +7,8 @@ export default {
   props: {
     showApp: {
       type: Function,
-      default: log
-    }
+      default: log,
+    },
   },
 
   data() {
@@ -16,18 +17,18 @@ export default {
         margin: 15,
         maxWidth: 600,
         lineHeight: 1.4,
-        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif'
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
       },
 
       logo: {
-        width: 200
+        width: 200,
       },
 
       link: {
         color: '#1474f3',
         textDecoration: 'none',
         borderBottom: '1px solid #1474f3',
-        paddingBottom: 2
+        paddingBottom: 2,
       },
 
       code: {
@@ -37,13 +38,13 @@ export default {
         border: '1px solid #eae9e9',
         borderRadius: 4,
         backgroundColor: '#f3f2f2',
-        color: '#3a3a3a'
+        color: '#3a3a3a',
       },
 
       note: {
-        opacity: 0.5
-      }
-    }
+        opacity: 0.5,
+      },
+    };
   },
 
   template: `
@@ -113,8 +114,8 @@ export default {
 
   methods: {
     onClick(event) {
-      event.preventDefault()
-      this.showApp()
-    }
-  }
-}
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};

lib/cli/generators/VUE/template/stories/index.js

@@ -1,25 +1,23 @@
-import { storiesOf } from '@storybook/vue'
-import { action } from '@storybook/addon-actions'
-import { linkTo } from '@storybook/addon-links'
+import { storiesOf } from '@storybook/vue';
+import { linkTo } from '@storybook/addon-links';
 
-import MyButton from './MyButton'
-import Welcome from './Welcome'
+import MyButton from './MyButton';
+import Welcome from './Welcome';
 
-storiesOf('Welcome', module)
-  .add('to Storybook', () => ({
+storiesOf('Welcome', module).add('to Storybook', () => ({
   components: { Welcome },
   template: '<welcome :showApp="action" />',
-    methods: { action: linkTo('Button') }
-  }))
+  methods: { action: linkTo('Button') },
+}));
 
 storiesOf('Button', module)
   .add('with text', () => ({
     components: { MyButton },
     template: '<my-button @click="action">Hello Button</my-button>',
-    methods: { action: linkTo('clicked') }
+    methods: { action: linkTo('clicked') },
   }))
   .add('with some emoji', () => ({
     components: { MyButton },
     template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
-    methods: { action: linkTo('clicked') }
-  }))
+    methods: { action: linkTo('clicked') },
+  }));