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

@@ -5,33 +5,33 @@ export const vueHandler = (channel, knobStore) => getStory => context => ({
 
   methods: {
     onKnobChange(change) {
-        const { name, value } = change;
-        // Update the related knob and it's value.
-        const knobOptions = knobStore.get(name);
-        knobOptions.value = value;
-        this.$forceUpdate();
+      const { name, value } = change;
+      // Update the related knob and it's value.
+      const knobOptions = knobStore.get(name);
+      knobOptions.value = value;
+      this.$forceUpdate();
     },
 
     onKnobReset() {
-        knobStore.reset();
-        this.setPaneKnobs(false);
-        this.$forceUpdate();
+      knobStore.reset();
+      this.setPaneKnobs(false);
+      this.$forceUpdate();
     },
 
     setPaneKnobs(timestamp = +new Date()) {
-        channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });  
+      channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });
     },
   },
-  
+
   created() {
     channel.on('addon:knobs:reset', this.onKnobReset);
     channel.on('addon:knobs:knobChange', this.onKnobChange);
     knobStore.subscribe(this.setPaneKnobs);
   },
 
-  beforeDestroy(){
+  beforeDestroy() {
     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

@@ -30,8 +30,11 @@ export default class ClientApi {
       throw new Error('Invalid or missing kind provided for stories, should be a string');
     }
 
-    if(!m) {
-      console.warn(`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`);
+    if (!m) {
+      // 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) {
@@ -56,9 +59,9 @@ export default class ClientApi {
 
     const createWrapperComponent = Target => ({
       functional: true,
-      render (h, c) {
+      render(h, c) {
         return h(Target, c.data, c.children);
-      }
+      },
     });
 
     api.add = (storyName, getStory) => {
@@ -68,7 +71,7 @@ export default class ClientApi {
 
       if (this._storyStore.hasStory(kind, storyName)) {
         throw new Error(`Story of "${kind}" named "${storyName}" already exists`);
-      } 
+      }
 
       // Wrap the getStory function with each decorator. The first
       // decorator will wrap the story function. The second will
@@ -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/globals.js

@@ -1,4 +1,4 @@
 /* globals window */
 
 window.STORYBOOK_REACT_CLASSES = {};
-window.STORYBOOK_ENV = 'vue';
+window.STORYBOOK_ENV = 'vue';

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'),
-      }
+      },
     },
   };
 

app/vue/src/server/iframe.html.js

@@ -31,19 +31,19 @@ const urlsFromAssets = assets => {
       if (typeof asset === 'string') {
         urls[getExtensionForFilename(asset)].push(asset);
       } else {
-      if (!Array.isArray(asset)) {
-        asset = [asset];
-      }
-      asset
-        .filter(assetUrl => {
-          const extension = getExtensionForFilename(assetUrl);
-          const isMap = extension === 'map';
-          const isSupportedExtension = Boolean(urls[extension]);
-          return isSupportedExtension && !isMap;
-        })
-        .forEach(assetUrl => {
-          urls[getExtensionForFilename(assetUrl)].push(assetUrl);
-        });
+        if (!Array.isArray(asset)) {
+          asset = [asset];
+        }
+        asset
+          .filter(assetUrl => {
+            const extension = getExtensionForFilename(assetUrl);
+            const isMap = extension === 'map';
+            const isSupportedExtension = Boolean(urls[extension]);
+            return isSupportedExtension && !isMap;
+          })
+          .forEach(assetUrl => {
+            urls[getExtensionForFilename(assetUrl)].push(assetUrl);
+          });
       }
     });
 

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

@@ -1,7 +1,7 @@
 export default {
   name: 'my-button',
 
-  data () {
+  data() {
     return {
       buttonStyles: {
         border: '1px solid #eee',
@@ -10,9 +10,9 @@ export default {
         cursor: 'pointer',
         fontSize: 15,
         padding: '3px 10px',
-        margin: 10
-      }
-    }
+        margin: 10,
+      },
+    };
   },
 
   template: `
@@ -22,8 +22,8 @@ export default {
   `,
 
   methods: {
-    onClick () {
-      this.$emit('click')
-    }
-  }
-}
+    onClick() {
+      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,28 +7,28 @@ export default {
   props: {
     showApp: {
       type: Function,
-      default: log
-    }
+      default: log,
+    },
   },
 
-  data () {
+  data() {
     return {
       main: {
         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: `
@@ -112,9 +113,9 @@ export default {
   `,
 
   methods: {
-    onClick (event) {
-      event.preventDefault()
-      this.showApp()
-    }
-  }
-}
+    onClick(event) {
+      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', () => ({
-    components: { Welcome },
-    template: '<welcome :showApp="action" />',
-    methods: { action: linkTo('Button') }
-  }))
+storiesOf('Welcome', module).add('to Storybook', () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  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') },
+  }));