Merge pull request #7501 from storybookjs/7499-module-format-vue

CLI: update `sb init` to module format for Vue

lib/cli/generators/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
       'import/no-unresolved': ignore,
       'import/no-extraneous-dependencies': ignore,
       'global-require': ignore,
+      'react/react-in-jsx-scope': ignore,
     },
   },
 };

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

@@ -1,4 +1,4 @@
-/* eslint-disable react/react-in-jsx-scope, react/prop-types, jsx-a11y/anchor-is-valid */
+/* eslint-disable react/prop-types, jsx-a11y/anchor-is-valid */
 import { createElement } from 'rax';
 import View from 'rax-view';
 import Text from 'rax-text';

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import { createElement } from 'rax';
 import { storiesOf } from '@storybook/rax';
 import { action } from '@storybook/addon-actions';

lib/cli/generators/SFC_VUE/template/.storybook/config.js

@@ -1,9 +1,4 @@
-import { configure } from '@storybook/vue';
+import { load } from '@storybook/vue';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../src/stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);

lib/cli/generators/SFC_VUE/template/src/stories/Button.stories.js

@@ -0,0 +1,29 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton.vue';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Hello Button</my-button>',
+  methods: { action: action('clicked') },
+});
+
+export const jsx = () => ({
+  components: { MyButton },
+  render() {
+    return <my-button onClick={this.action}>With JSX</my-button>;
+  },
+  methods: { action: linkTo('clicked') },
+});
+
+export const emoji = () => ({
+  components: { MyButton },
+  template:
+    '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
+  methods: { action: action('clicked') },
+});

lib/cli/generators/SFC_VUE/template/src/stories/Welcome.stories.js

@@ -0,0 +1,17 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome.vue';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  methods: { action: linkTo('Button') },
+});
+
+toStorybook.story = {
+  name: 'to Storybook',
+};

lib/cli/generators/SFC_VUE/template/src/stories/index.stories.js

@@ -1,34 +0,0 @@
-/* eslint-disable react/react-in-jsx-scope */
-
-import { storiesOf } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import MyButton from './MyButton.vue';
-import Welcome from './Welcome.vue';
-
-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: action('clicked') },
-  }))
-  .add('with JSX', () => ({
-    components: { MyButton },
-    render() {
-      return <my-button onClick={this.action}>With JSX</my-button>;
-    },
-    methods: { action: linkTo('clicked') },
-  }))
-  .add('with some emoji', () => ({
-    components: { MyButton },
-    template:
-      '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
-    methods: { action: action('clicked') },
-  }));

lib/cli/generators/VUE/template/.storybook/config.js

@@ -1,9 +1,4 @@
-import { configure } from '@storybook/vue';
+import { load } from '@storybook/vue';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);

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

@@ -0,0 +1,28 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Hello Button</my-button>',
+  methods: { action: action('clicked') },
+});
+
+export const jsx = () => ({
+  components: { MyButton },
+  render(h) {
+    return <my-button onClick={this.action}>With JSX</my-button>;
+  },
+  methods: { action: linkTo('clicked') },
+});
+
+export const emoji = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
+  methods: { action: action('clicked') },
+});

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

@@ -0,0 +1,17 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  methods: { action: linkTo('Button') },
+});
+
+toStorybook.story = {
+  name: 'to Storybook',
+};

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

@@ -1,33 +0,0 @@
-/* eslint-disable react/react-in-jsx-scope */
-
-import { storiesOf } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-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('Button', module)
-  .add('with text', () => ({
-    components: { MyButton },
-    template: '<my-button @click="action">Hello Button</my-button>',
-    methods: { action: action('clicked') },
-  }))
-  .add('with JSX', () => ({
-    components: { MyButton },
-    render(h) {
-      return <my-button onClick={this.action}>With JSX</my-button>;
-    },
-    methods: { action: linkTo('clicked') },
-  }))
-  .add('with some emoji', () => ({
-    components: { MyButton },
-    template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
-    methods: { action: action('clicked') },
-  }));