Polymer-cli: update stories to module format

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

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

examples/polymer-cli/src/stories/addon-actions.stories.js

@@ -1,17 +1,28 @@
-import { storiesOf } from '@storybook/polymer';
 import { action } from '@storybook/addon-actions';
 import { document } from 'global';
 
 import '../simple-button.html';
 
-storiesOf('Addon|Actions', module)
-  .add('Action only', () => {
-    const el = document.createElement('simple-button');
-    el.addEventListener('click', action('log1'));
-    return el;
-  })
-  .add('Action and method', () => {
-    const el = document.createElement('simple-button');
-    el.addEventListener('click', e => action('log2')(e.target));
-    return el;
-  });
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () => {
+  const el = document.createElement('simple-button');
+  el.addEventListener('click', action('log1'));
+  return el;
+};
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const actionAndMethod = () => {
+  const el = document.createElement('simple-button');
+  el.addEventListener('click', e => action('log2')(e.target));
+  return el;
+};
+
+actionAndMethod.story = {
+  name: 'Action and method',
+};

examples/polymer-cli/src/stories/addon-backgrounds.stories.js

@@ -1,10 +1,16 @@
-import { storiesOf } from '@storybook/polymer';
+export default {
+  title: 'Addon|Backgrounds',
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('button with text', () => '<button>Click me</button>');
+  },
+};
+
+export const buttonWithText = () => '<button>Click me</button>';
+
+buttonWithText.story = {
+  name: 'button with text',
+};

examples/polymer-cli/src/stories/addon-links.stories.js

@@ -1,12 +1,19 @@
-import { storiesOf } from '@storybook/polymer';
 import { linkTo } from '@storybook/addon-links';
 import { document } from 'global';
 
 import '../simple-button.html';
 
-storiesOf('Addon|Links', module).add('With Create Element', () => {
+export default {
+  title: 'Addon|Links',
+};
+
+export const withCreateElement = () => {
   const el = document.createElement('simple-button');
   el.title = 'Go to welcome';
   el.handleClick = linkTo('Welcome');
   return el;
-});
+};
+
+withCreateElement.story = {
+  name: 'With Create Element',
+};

examples/polymer-cli/src/stories/addon-notes.stories.js

@@ -1,20 +1,28 @@
-import { storiesOf } from '@storybook/polymer';
+export default {
+  title: 'Addon|Notes',
+};
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () =>
-      '<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', () => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>', {
+export const simpleNote = () =>
+  '<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 = () => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>';
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
     notes: `
-      <h2>My notes on emojies</h2>
+        <h2>My notes on emojies</h2>
 
-      <em>It's not all that important to be honest, but..</em>
+        <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! 😇
-    `,
-  });
+        Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+      `,
+  },
+};

examples/polymer-cli/src/stories/components/app.stories.js

@@ -0,0 +1,11 @@
+import '../../polymer-playground-app.html';
+
+export default {
+  title: 'App',
+};
+
+export const fullApp = () =>
+  '<polymer-playground-app title="Storybook for Polymer"></polymer-playground-app>';
+fullApp.story = {
+  name: 'full app',
+};

examples/polymer-cli/src/stories/components/button.stories.js

@@ -0,0 +1,8 @@
+import '../../playground-button.html';
+
+export default {
+  title: 'Button',
+};
+
+export const rounded = () => '<playground-button></playground-button>';
+export const square = () => '<playground-button is-square></playground-button>';

examples/polymer-cli/src/stories/components/welcome.stories.js

@@ -0,0 +1,14 @@
+import { linkTo } from '@storybook/addon-links';
+import { document } from 'global';
+
+import '../storybook-welcome-to-polymer.html';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Welcome = () => {
+  const el = document.createElement('storybook-welcome-to-polymer');
+  el.goToButton = linkTo('Button');
+  return el;
+};

examples/polymer-cli/src/stories/core.stories.js

@@ -1,18 +1,26 @@
-import { storiesOf, addParameters } from '@storybook/polymer';
+import { addParameters } from '@storybook/polymer';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
 const storyParameter = 'storyParameter';
 
 addParameters({ globalParameter });
 
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add(
-    'passed to story',
-    ({ parameters: { fileName, ...parameters } }) =>
-      `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
-    {
-      storyParameter,
-    }
-  );
+export default {
+  title: 'Core|Parameters',
+
+  parameters: {
+    chapterParameter,
+  },
+};
+
+export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+  `<div>Parameters are ${JSON.stringify(parameters)}</div>`;
+
+passedToStory.story = {
+  name: 'passed to story',
+
+  parameters: {
+    storyParameter,
+  },
+};

examples/polymer-cli/src/stories/custom-decorators.stories.js

@@ -1,14 +1,23 @@
-import { storiesOf } from '@storybook/polymer';
 import { document } from 'global';
 
-storiesOf('Custom|Decorator', module)
-  .addDecorator(storyFn => {
-    const el = storyFn();
-    el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
-    return el;
-  })
-  .add('example decoration', () => {
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', 'An example title');
-    return el;
-  });
+export default {
+  title: 'Custom|Decorator',
+
+  decorators: [
+    storyFn => {
+      const el = storyFn();
+      el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
+      return el;
+    },
+  ],
+};
+
+export const exampleDecoration = () => {
+  const el = document.createElement('playground-button');
+  el.setAttribute('title', 'An example title');
+  return el;
+};
+
+exampleDecoration.story = {
+  name: 'example decoration',
+};