CLI: update sb init to module format for Ember/Marko/Mithril/Rax/Riot/Svelte

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`<button {{action onClick}}>Hello Button</button>`,
+  context: {
+    onClick: action('clicked'),
+  },
+});
+
+export const emoji = () => ({
+  template: hbs`
+    <button {{action onClick}}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </button>
+  `,
+  context: {
+    onClick: action('clicked'),
+  },
+});

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`
+    <div>
+      <h3> Welcome to Storybook! </h3>
+      <button {{action onClick}}> Checkout the button example </button>
+    </div>
+  `,
+  context: {
+    onClick: linkTo('Button'),
+  },
+});
+
+toStorybook.story = {
+  name: 'to Storybook',
+};

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);

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 });

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);

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' }, '😀 😎 👍 💯')
+    ),
+});

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

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);

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 = () => <Button onPress={action('clicked')}>Hello Button</Button>;
+
+export const emoji = () => (
+  <Button onPress={action('clicked')}>
+    <Text role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </Text>
+  </Button>
+);

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 = () => <Welcome showApp={linkTo('Button', 'with text')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};

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);

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: ['<my-button>Hello Button</my-button>'],
+});
+
+export const scenario = () => ({
+  tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
+  template: '<MyButton>With scenario</MyButton>',
+});
+
+export const emoji = () => ({
+  tags: ['<my-button>😀 😎 👍 💯</my-button>'],
+});

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

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);

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