diff --git a/lib/cli/generators/EMBER/template/stories/Button.stories.js b/lib/cli/generators/EMBER/template/stories/Button.stories.js new file mode 100644 index 000000000000..a8ff3f08f6b2 --- /dev/null +++ b/lib/cli/generators/EMBER/template/stories/Button.stories.js @@ -0,0 +1,27 @@ +/* eslint-disable import/extensions */ +import hbs from 'htmlbars-inline-precompile'; +import { action } from '@storybook/addon-actions'; + +export default { + title: 'Button', +}; + +export const text = () => ({ + template: hbs``, + context: { + onClick: action('clicked'), + }, +}); + +export const emoji = () => ({ + template: hbs` + + `, + context: { + onClick: action('clicked'), + }, +}); diff --git a/lib/cli/generators/EMBER/template/stories/Welcome.stories.js b/lib/cli/generators/EMBER/template/stories/Welcome.stories.js new file mode 100644 index 000000000000..b7db119a3800 --- /dev/null +++ b/lib/cli/generators/EMBER/template/stories/Welcome.stories.js @@ -0,0 +1,24 @@ +/* eslint-disable import/extensions */ +import hbs from 'htmlbars-inline-precompile'; +import { action } from '@storybook/addon-actions'; +import { linkTo } from '@storybook/addon-links'; + +export default { + title: 'Welcome', +}; + +export const toStorybook = () => ({ + template: hbs` +
+

Welcome to Storybook!

+ +
+ `, + context: { + onClick: linkTo('Button'), + }, +}); + +toStorybook.story = { + name: 'to Storybook', +}; diff --git a/lib/cli/generators/EMBER/template/stories/index.stories.js b/lib/cli/generators/EMBER/template/stories/index.stories.js deleted file mode 100644 index 43301ea40396..000000000000 --- a/lib/cli/generators/EMBER/template/stories/index.stories.js +++ /dev/null @@ -1,37 +0,0 @@ -/* eslint-disable import/extensions */ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { action } from '@storybook/addon-actions'; -import { linkTo } from '@storybook/addon-links'; - -storiesOf('Welcome', module).add('to Storybook', () => ({ - template: hbs` -
-

Welcome to Storybook!

- -
- `, - context: { - onClick: linkTo('Button'), - }, -})); - -storiesOf('Button', module) - .add('with text', () => ({ - template: hbs``, - context: { - onClick: action('clicked'), - }, - })) - .add('with some emoji', () => ({ - template: hbs` - - `, - context: { - onClick: action('clicked'), - }, - })); diff --git a/lib/cli/generators/MARKO/template/.storybook/config.js b/lib/cli/generators/MARKO/template/.storybook/config.js index 2499d892cc4e..e23f6fc67e62 100644 --- a/lib/cli/generators/MARKO/template/.storybook/config.js +++ b/lib/cli/generators/MARKO/template/.storybook/config.js @@ -1,9 +1,4 @@ -import { configure } from '@storybook/marko'; +import { load } from '@storybook/marko'; // 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); diff --git a/lib/cli/generators/MARKO/template/stories/index.stories.js b/lib/cli/generators/MARKO/template/stories/index.stories.js index dd453126524f..2c64c94fab21 100644 --- a/lib/cli/generators/MARKO/template/stories/index.stories.js +++ b/lib/cli/generators/MARKO/template/stories/index.stories.js @@ -1,4 +1,7 @@ -import { storiesOf } from '@storybook/marko'; import Welcome from './components/welcome/index.marko'; -storiesOf('Welcome', module).add('welcome', () => ({ component: Welcome })); +export default { + title: 'Welcome', +}; + +export const welcome = () => ({ component: Welcome }); diff --git a/lib/cli/generators/MITHRIL/template/.storybook/config.js b/lib/cli/generators/MITHRIL/template/.storybook/config.js index 9fda40690338..1c2d056e116f 100644 --- a/lib/cli/generators/MITHRIL/template/.storybook/config.js +++ b/lib/cli/generators/MITHRIL/template/.storybook/config.js @@ -1,9 +1,4 @@ -import { configure } from '@storybook/mithril'; +import { load } from '@storybook/mithril'; // 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); diff --git a/lib/cli/generators/MITHRIL/template/stories/Button.stories.js b/lib/cli/generators/MITHRIL/template/stories/Button.stories.js new file mode 100644 index 000000000000..f425932490d3 --- /dev/null +++ b/lib/cli/generators/MITHRIL/template/stories/Button.stories.js @@ -0,0 +1,20 @@ +import m from 'mithril'; +import { action } from '@storybook/addon-actions'; +import Button from './Button'; + +export default { + title: 'Button', +}; + +export const text = () => ({ + view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'), +}); + +export const emoji = () => ({ + view: () => + m( + Button, + { onclick: action('clicked') }, + m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯') + ), +}); diff --git a/lib/cli/generators/MITHRIL/template/stories/Welcome.stories.js b/lib/cli/generators/MITHRIL/template/stories/Welcome.stories.js new file mode 100644 index 000000000000..3de233b222b4 --- /dev/null +++ b/lib/cli/generators/MITHRIL/template/stories/Welcome.stories.js @@ -0,0 +1,15 @@ +import m from 'mithril'; +import { linkTo } from '@storybook/addon-links'; +import Welcome from './Welcome'; + +export default { + title: 'Welcome', +}; + +export const toStorybook = () => ({ + view: () => m(Welcome, { showApp: linkTo('Button') }), +}); + +toStorybook.story = { + name: 'to Storybook', +}; diff --git a/lib/cli/generators/MITHRIL/template/stories/index.stories.js b/lib/cli/generators/MITHRIL/template/stories/index.stories.js deleted file mode 100644 index b74304a3b135..000000000000 --- a/lib/cli/generators/MITHRIL/template/stories/index.stories.js +++ /dev/null @@ -1,25 +0,0 @@ -import m from 'mithril'; - -import { storiesOf } from '@storybook/mithril'; -import { action } from '@storybook/addon-actions'; -import { linkTo } from '@storybook/addon-links'; - -import Button from './Button'; -import Welcome from './Welcome'; - -storiesOf('Welcome', module).add('to Storybook', () => ({ - view: () => m(Welcome, { showApp: linkTo('Button') }), -})); - -storiesOf('Button', module) - .add('with text', () => ({ - view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'), - })) - .add('with some emoji', () => ({ - view: () => - m( - Button, - { onclick: action('clicked') }, - m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯') - ), - })); diff --git a/lib/cli/generators/RAX/template/.storybook/config.js b/lib/cli/generators/RAX/template/.storybook/config.js index 9218bd96f55f..76f3810c1a01 100644 --- a/lib/cli/generators/RAX/template/.storybook/config.js +++ b/lib/cli/generators/RAX/template/.storybook/config.js @@ -1,4 +1,4 @@ -import { configure, addParameters } from '@storybook/rax'; +import { load, addParameters } from '@storybook/rax'; addParameters({ options: { @@ -15,13 +15,5 @@ addParameters({ }, }); -function loadStories() { - // put welcome screen at the top of the list so it's the first one displayed - // require('../src/stories/index.stories'); - - // automatically import all story js files that end with *.stories.js - const req = require.context('../stories', true, /\.stories\.js$/); - req.keys().forEach(filename => req(filename)); -} - -configure(loadStories, module); +// automatically import all story js files that end with *.stories.js +load(require.context('../stories', true, /\.stories\.js$/), module); diff --git a/lib/cli/generators/RAX/template/stories/Button.stories.js b/lib/cli/generators/RAX/template/stories/Button.stories.js new file mode 100644 index 000000000000..e5f8290c7a3c --- /dev/null +++ b/lib/cli/generators/RAX/template/stories/Button.stories.js @@ -0,0 +1,19 @@ +import { createElement } from 'rax'; +import { action } from '@storybook/addon-actions'; + +import Button from 'rax-button'; +import Text from 'rax-text'; + +export default { + title: 'Button', +}; + +export const text = () => ; + +export const emoji = () => ( + +); diff --git a/lib/cli/generators/RAX/template/stories/Welcome.stories.js b/lib/cli/generators/RAX/template/stories/Welcome.stories.js new file mode 100644 index 000000000000..2f50a78ee5f3 --- /dev/null +++ b/lib/cli/generators/RAX/template/stories/Welcome.stories.js @@ -0,0 +1,14 @@ +import { createElement } from 'rax'; +import { linkTo } from '@storybook/addon-links'; + +import Welcome from './Welcome'; + +export default { + title: 'Welcome', +}; + +export const toStorybook = () => ; + +toStorybook.story = { + name: 'to Storybook', +}; diff --git a/lib/cli/generators/RAX/template/stories/index.stories.js b/lib/cli/generators/RAX/template/stories/index.stories.js deleted file mode 100644 index d01105698436..000000000000 --- a/lib/cli/generators/RAX/template/stories/index.stories.js +++ /dev/null @@ -1,23 +0,0 @@ -import { createElement } from 'rax'; -import { storiesOf } from '@storybook/rax'; -import { action } from '@storybook/addon-actions'; -import { linkTo } from '@storybook/addon-links'; - -import Button from 'rax-button'; -import Text from 'rax-text'; - -import Welcome from './Welcome'; - -storiesOf('Welcome', module).add('to Storybook', () => ( - -)); - -storiesOf('Button', module) - .add('with text', () => ) - .add('with some emoji', () => ( - - )); diff --git a/lib/cli/generators/RIOT/template/.storybook/config.js b/lib/cli/generators/RIOT/template/.storybook/config.js index d0b40b70cc69..7b3495417dbf 100644 --- a/lib/cli/generators/RIOT/template/.storybook/config.js +++ b/lib/cli/generators/RIOT/template/.storybook/config.js @@ -1,9 +1,4 @@ -import { configure } from '@storybook/riot'; +import { load } from '@storybook/riot'; // 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); diff --git a/lib/cli/generators/RIOT/template/stories/Button.stories.js b/lib/cli/generators/RIOT/template/stories/Button.stories.js new file mode 100644 index 000000000000..6b63839bdec5 --- /dev/null +++ b/lib/cli/generators/RIOT/template/stories/Button.stories.js @@ -0,0 +1,22 @@ +import { mount } from '@storybook/riot'; + +/* eslint-disable-next-line import/no-webpack-loader-syntax */ +import MyButtonRaw from 'raw-loader!./MyButton.tag'; +import './MyButton.tag'; + +export default { + title: 'Button', +}; + +export const text = () => ({ + tags: ['Hello Button'], +}); + +export const scenario = () => ({ + tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }], + template: 'With scenario', +}); + +export const emoji = () => ({ + tags: ['😀 😎 👍 💯'], +}); diff --git a/lib/cli/generators/RIOT/template/stories/Welcome.stories.js b/lib/cli/generators/RIOT/template/stories/Welcome.stories.js new file mode 100644 index 000000000000..aa73a8905141 --- /dev/null +++ b/lib/cli/generators/RIOT/template/stories/Welcome.stories.js @@ -0,0 +1,14 @@ +import { mount } from '@storybook/riot'; +import { linkTo } from '@storybook/addon-links'; + +import './Welcome.tag'; + +export default { + title: 'Welcome', +}; + +export const toStorybook = () => mount('welcome', { showApp: () => linkTo('Button') }); + +toStorybook.story = { + name: 'to Storybook', +}; diff --git a/lib/cli/generators/RIOT/template/stories/index.stories.js b/lib/cli/generators/RIOT/template/stories/index.stories.js deleted file mode 100644 index ffc636bfab05..000000000000 --- a/lib/cli/generators/RIOT/template/stories/index.stories.js +++ /dev/null @@ -1,23 +0,0 @@ -import { mount, storiesOf } from '@storybook/riot'; -import { linkTo } from '@storybook/addon-links'; - -/* eslint-disable-next-line import/no-webpack-loader-syntax */ -import MyButtonRaw from 'raw-loader!./MyButton.tag'; -import './MyButton.tag'; -import './Welcome.tag'; - -storiesOf('Welcome', module).add('to Storybook', () => - mount('welcome', { showApp: () => linkTo('Button') }) -); - -storiesOf('Button', module) - .add('with text', () => ({ - tags: ['Hello Button'], - })) - .add('with scenario', () => ({ - tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }], - template: 'With scenario', - })) - .add('with some emoji', () => ({ - tags: ['😀 😎 👍 💯'], - })); diff --git a/lib/cli/generators/SVELTE/template/.storybook/config.js b/lib/cli/generators/SVELTE/template/.storybook/config.js index 5ece32aff07c..fad03e420962 100644 --- a/lib/cli/generators/SVELTE/template/.storybook/config.js +++ b/lib/cli/generators/SVELTE/template/.storybook/config.js @@ -1,9 +1,4 @@ -import { configure } from '@storybook/svelte'; +import { load } from '@storybook/svelte'; // 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); diff --git a/lib/cli/generators/SVELTE/template/stories/index.stories.js b/lib/cli/generators/SVELTE/template/stories/index.stories.js index bc67bffb248d..f3b01a4ce26a 100644 --- a/lib/cli/generators/SVELTE/template/stories/index.stories.js +++ b/lib/cli/generators/SVELTE/template/stories/index.stories.js @@ -1,18 +1,21 @@ -import { storiesOf } from '@storybook/svelte'; import { action } from '@storybook/addon-actions'; import Button from './button.svelte'; -storiesOf('Button', module) - .add('with text', () => ({ - Component: Button, - props: { text: 'Hello Button' }, - on: { click: action('clicked') }, - })) - .add('with some emoji', () => ({ - Component: Button, - props: { - text: '😀 😎 👍 💯', - }, - on: { click: action('clicked') }, - })); +export default { + title: 'Button', +}; + +export const text = () => ({ + Component: Button, + props: { text: 'Hello Button' }, + on: { click: action('clicked') }, +}); + +export const emoji = () => ({ + Component: Button, + props: { + text: '😀 😎 👍 💯', + }, + on: { click: action('clicked') }, +});