Ember-cli: Update stories to module format

examples/ember-cli/.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/ember';
+import { load, addParameters, addDecorator } from '@storybook/ember';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -9,11 +9,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../stories/index.stories');
-
-  const req = require.context('../stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);

examples/ember-cli/stories/addon-a11y.stories.js

@@ -1,15 +1,22 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { checkA11y } from '@storybook/addon-a11y';
 
-storiesOf('Addon|a11y', module)
-  .addDecorator(checkA11y)
-  .addParameters({ options: { selectedPanel: '@storybook/a11y/panel' } })
-  .add('Default', () => hbs`<button></button>`)
-  .add('Label', () => hbs`<button>Testing the a11y addon</button>`)
-  .add('Disabled', () => hbs`<button disabled>Testing the a11y addon</button>`)
-  .add(
-    'Invalid contrast',
-    () =>
-      hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`
-  );
+export default {
+  title: 'Addon|a11y',
+  decorators: [checkA11y],
+
+  parameters: {
+    options: { selectedPanel: '@storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => hbs`<button></button>`;
+export const Label = () => hbs`<button>Testing the a11y addon</button>`;
+export const Disabled = () => hbs`<button disabled>Testing the a11y addon</button>`;
+
+export const invalidContrast = () =>
+  hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`;
+
+invalidContrast.story = {
+  name: 'Invalid contrast',
+};

examples/ember-cli/stories/addon-actions.stories.js

@@ -1,16 +1,19 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('Addon|Actions', module)
-  .addParameters({
+export default {
+  title: 'Addon|Actions',
+
+  parameters: {
     options: {
       selectedPanel: 'storybook/actions/panel',
     },
-  })
-  .add('button', () => ({
-    template: hbs`<button {{action onClick}}>Click Me</button>`,
-    context: {
-      onClick: action('clicked'),
-    },
-  }));
+  },
+};
+
+export const button = () => ({
+  template: hbs`<button {{action onClick}}>Click Me</button>`,
+  context: {
+    onClick: action('clicked'),
+  },
+});

examples/ember-cli/stories/addon-backgrounds.stories.js

@@ -1,16 +1,28 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => ({
-    template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
-  }))
-  .add('story 2', () => ({
-    template: hbs`<button>This one too!</button>`,
-  }));
+  },
+};
+
+export const story1 = () => ({
+  template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
+});
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => ({
+  template: hbs`<button>This one too!</button>`,
+});
+
+story2.story = {
+  name: 'story 2',
+};

examples/ember-cli/stories/addon-centered.stories.js

@@ -1,12 +1,15 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import Centered from '@storybook/addon-centered/ember';
 
-storiesOf('Addon|Centered', module)
-  .addParameters({
+export default {
+  title: 'Addon|Centered',
+  decorators: [Centered],
+
+  parameters: {
     component: Centered,
-  })
-  .addDecorator(Centered)
-  .add('button', () => ({
-    template: hbs`<button>A Button</button>`,
-  }));
+  },
+};
+
+export const button = () => ({
+  template: hbs`<button>A Button</button>`,
+});

examples/ember-cli/stories/addon-knobs.stories.js

@@ -1,13 +1,18 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { withKnobs, text, color, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .addParameters({ options: { selectedPanel: 'storybookjs/knobs/panel' } })
-  .add('with text', () => ({
-    template: hbs`
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+
+  parameters: {
+    options: { selectedPanel: 'storybookjs/knobs/panel' },
+  },
+};
+
+export const withText = () => ({
+  template: hbs`
       {{welcome-banner
         style=(if hidden "display: none")
         backgroundColor=backgroundColor
@@ -18,13 +23,17 @@ storiesOf('Addon|Knobs', module)
         click=(action onClick)
       }}
     `,
-    context: {
-      hidden: boolean('hidden', false),
-      backgroundColor: color('backgroundColor', '#FDF4E7'),
-      titleColor: color('titleColor', '#DF4D37'),
-      subTitleColor: color('subTitleColor', '#B8854F'),
-      title: text('title', 'Welcome to storybook'),
-      subtitle: text('subtitle', 'This environment is completely editable'),
-      onClick: action('clicked'),
-    },
-  }));
+  context: {
+    hidden: boolean('hidden', false),
+    backgroundColor: color('backgroundColor', '#FDF4E7'),
+    titleColor: color('titleColor', '#DF4D37'),
+    subTitleColor: color('subTitleColor', '#B8854F'),
+    title: text('title', 'Welcome to storybook'),
+    subtitle: text('subtitle', 'This environment is completely editable'),
+    onClick: action('clicked'),
+  },
+});
+
+withText.story = {
+  name: 'with text',
+};

examples/ember-cli/stories/addon-links.stories.js

@@ -1,10 +1,17 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Addon|Links', module).add('Go to welcome', () => ({
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcome = () => ({
   template: hbs`<button {{action onClick}}>This button brings you to welcome</button>`,
   context: {
     onClick: linkTo('Welcome'),
   },
-}));
+});
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};

examples/ember-cli/stories/addon-notes.stories.js

@@ -1,26 +1,32 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
-
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      template: hbs`<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>`,
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      template: hbs`<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>`,
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
-
-      <em>It's not all that important to be honest, but..</em>
-
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+
+export default {
+  title: 'Addon|Notes',
+};
+
+export const simpleNote = () => ({
+  template: hbs`<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>`,
+});
+
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
+
+export const noteWithHtml = () => ({
+  template: hbs`<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>`,
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};

examples/ember-cli/stories/index.stories.js

@@ -1,10 +1,15 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 
-storiesOf('Welcome', module)
-  .addParameters({ options: { showPanel: false } })
-  .add('basic', () => ({
-    template: hbs`
+export default {
+  title: 'Welcome',
+
+  parameters: {
+    options: { showPanel: false },
+  },
+};
+
+export const basic = () => ({
+  template: hbs`
         {{welcome-page}}
       `,
-  }));
+});

examples/ember-cli/stories/welcome-banner.stories.js

@@ -1,8 +1,11 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('welcome-banner', module).add('basic', () => ({
+export default {
+  title: 'welcome-banner',
+};
+
+export const basic = () => ({
   template: hbs`
       {{welcome-banner
         backgroundColor=backgroundColor
@@ -21,4 +24,4 @@ storiesOf('welcome-banner', module).add('basic', () => ({
     subtitle: 'This environment is completely editable',
     onClick: action('clicked'),
   },
-}));
+});