diff --git a/.eslintignore b/.eslintignore
index 14b53bfd478..8d61408b0c8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,8 +6,6 @@ addons/**/example/**
app/**/demo/**
docs/public
-vue
-
*.bundle.js
*.js.map
diff --git a/addons/knobs/src/vue/index.js b/addons/knobs/src/vue/index.js
index 1c76ff5fcb7..ae99e44f1c1 100644
--- a/addons/knobs/src/vue/index.js
+++ b/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);
- }
-});
\ No newline at end of file
+ },
+});
diff --git a/addons/knobs/src/vue/index.test.js b/addons/knobs/src/vue/index.test.js
index a43e1f4b9a7..f52a00bedaf 100644
--- a/addons/knobs/src/vue/index.test.js
+++ b/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));
diff --git a/app/vue/src/client/index.js b/app/vue/src/client/index.js
index f9a446eea86..fd6a316d095 100644
--- a/app/vue/src/client/index.js
+++ b/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';
diff --git a/app/vue/src/client/preview/client_api.js b/app/vue/src/client/preview/client_api.js
index 1e154b19b1a..32b10bef8a2 100644
--- a/app/vue/src/client/preview/client_api.js
+++ b/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
);
diff --git a/app/vue/src/client/preview/client_api.test.js b/app/vue/src/client/preview/client_api.test.js
index 6a258f97487..c59eaf5969c 100644
--- a/app/vue/src/client/preview/client_api.test.js
+++ b/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: `${kind}-${story}-${fn().template}
` }));
+ localApi.addDecorator((fn, { kind, story }) => ({
+ template: `${kind}-${story}-${fn().template}
`,
+ }));
localApi.add('storyName', () => ({ template: 'hello
' }));
diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
index e344cd3d7a1..665dba747d5 100644
--- a/app/vue/src/client/preview/render.js
+++ b/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: '' })" or "() => ({ components: MyComp, template: '' })" 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)]);
},
});
}
diff --git a/app/vue/src/server/config/globals.js b/app/vue/src/server/config/globals.js
index b0c52db0629..061e9c46525 100644
--- a/app/vue/src/server/config/globals.js
+++ b/app/vue/src/server/config/globals.js
@@ -1,4 +1,4 @@
/* globals window */
window.STORYBOOK_REACT_CLASSES = {};
-window.STORYBOOK_ENV = 'vue';
\ No newline at end of file
+window.STORYBOOK_ENV = 'vue';
diff --git a/app/vue/src/server/config/webpack.config.js b/app/vue/src/server/config/webpack.config.js
index 9feea346942..10d1a6c9c1b 100644
--- a/app/vue/src/server/config/webpack.config.js
+++ b/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,
diff --git a/app/vue/src/server/config/webpack.config.prod.js b/app/vue/src/server/config/webpack.config.prod.js
index 3df8cd74287..1260b9de6dc 100644
--- a/app/vue/src/server/config/webpack.config.prod.js
+++ b/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'),
- }
+ },
},
};
diff --git a/app/vue/src/server/iframe.html.js b/app/vue/src/server/iframe.html.js
index 8900b6c6f90..bfcc2db58ee 100644
--- a/app/vue/src/server/iframe.html.js
+++ b/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);
+ });
}
});
diff --git a/lib/cli/generators/VUE/template/stories/MyButton.js b/lib/cli/generators/VUE/template/stories/MyButton.js
index 785d4c29e53..7ed4b85378d 100644
--- a/lib/cli/generators/VUE/template/stories/MyButton.js
+++ b/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');
+ },
+ },
+};
diff --git a/lib/cli/generators/VUE/template/stories/Welcome.js b/lib/cli/generators/VUE/template/stories/Welcome.js
index 040c367a04e..42b614121bd 100644
--- a/lib/cli/generators/VUE/template/stories/Welcome.js
+++ b/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();
+ },
+ },
+};
diff --git a/lib/cli/generators/VUE/template/stories/index.js b/lib/cli/generators/VUE/template/stories/index.js
index 9c64f3751f1..b6f10120c7d 100644
--- a/lib/cli/generators/VUE/template/stories/index.js
+++ b/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: '',
- methods: { action: linkTo('Button') }
- }))
+storiesOf('Welcome', module).add('to Storybook', () => ({
+ components: { Welcome },
+ template: '',
+ methods: { action: linkTo('Button') },
+}));
storiesOf('Button', module)
.add('with text', () => ({
components: { MyButton },
template: 'Hello Button',
- methods: { action: linkTo('clicked') }
+ methods: { action: linkTo('clicked') },
}))
.add('with some emoji', () => ({
components: { MyButton },
template: '😀 😎 👍 💯',
- methods: { action: linkTo('clicked') }
- }))
+ methods: { action: linkTo('clicked') },
+ }));