Riot-kitchen-sink: update stories to module format

examples/riot-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/riot';
+import { load, addParameters, addDecorator } from '@storybook/riot';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,11 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../src/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/riot-kitchen-sink/src/stories/addon-actions.stories.js

@@ -1,19 +1,29 @@
-import { mount, storiesOf, compileNow } from '@storybook/riot';
+import { mount, compileNow } from '@storybook/riot';
 import { action } from '@storybook/addon-actions';
 import ButtonRaw from './Button.txt';
 
 compileNow(ButtonRaw);
 
-storiesOf('Addon|Actions', module)
-  .add('Action only', () =>
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () =>
   mount('my-button', {
     handleClick: action('button-click'),
     content: 'Click me to log the action',
-    })
-  )
-  .add('Multiple actions', () =>
+  });
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const multipleActions = () =>
   mount('my-button', {
     handleDblClick: action('button-double-click'),
     content: 'Double Click me to log the action',
-    })
-  );
+  });
+
+multipleActions.story = {
+  name: 'Multiple actions',
+};

examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js

@@ -1,26 +1,37 @@
-import { storiesOf } from '@storybook/riot';
 import ButtonRaw from './Button.txt';
 
-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', () => {
+  },
+};
+
+export const story1 = () => {
   const content = 'You should be able to switch backgrounds for this story';
 
   return {
     tags: [{ boundAs: 'my-button', content: ButtonRaw }],
     template: `<my-button>${content}</my-button>`,
   };
-  })
-  .add('story 2', () => {
+};
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => {
   const content = 'This one too!';
 
   return {
     tags: [{ boundAs: 'my-button', content: ButtonRaw }],
     template: `<my-button>${content}</my-button>`,
   };
-  });
+};
+
+story2.story = {
+  name: 'story 2',
+};

examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/riot';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -12,9 +11,12 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+};
+
+export const Simple = () => {
   const name = text('Name', 'John Doe');
   const age = number('Age', 44);
   const content = `I am ${name} and I'm ${age} years old.`;
@@ -22,8 +24,9 @@ storiesOf('Addon|Knobs', module)
   return {
     tags: [`<div>${content}</div>`],
   };
-  })
-  .add('All knobs', () => {
+};
+
+export const allKnobs = () => {
   const name = text('Name', 'Jane');
   const stock = number('Stock', 20, {
     range: true,
@@ -68,8 +71,13 @@ storiesOf('Addon|Knobs', module)
         `,
     ],
   };
-  })
-  .add('XSS safety', () => ({
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
+
+export const xssSafety = () => ({
   tags: [
     `
       <div>
@@ -77,4 +85,8 @@ storiesOf('Addon|Knobs', module)
       </div>
     `,
   ],
-  }));
+});
+
+xssSafety.story = {
+  name: 'XSS safety',
+};

examples/riot-kitchen-sink/src/stories/addon-links.stories.js

@@ -1,14 +1,21 @@
-import { mount, storiesOf, compileNow } from '@storybook/riot';
+import { mount, compileNow } from '@storybook/riot';
 import { linkTo } from '@storybook/addon-links';
 import ButtonRaw from './Button.txt';
 
 compileNow(ButtonRaw);
 
-storiesOf('Addon|Links', module).add('Go to welcome', () =>
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcome = () =>
   mount('my-button', {
     rounded: true,
     content: 'This button links to Welcome',
     value: 'with a parameter',
     handleClick: linkTo('Welcome', 'Welcome'),
-  })
-);
+  });
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};

examples/riot-kitchen-sink/src/stories/addon-notes.stories.js

@@ -1,21 +1,25 @@
-import { storiesOf } from '@storybook/riot';
+export default {
+  title: 'Addon|Notes',
+};
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
+export const simpleNote = () => ({
   tags: [
     '<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',
-    () => ({
+});
+
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
+
+export const noteWithHtml = () => ({
   tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
-    }),
-    {
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
     notes: `
     <h2>My notes on emojies</h2>
 
@@ -23,5 +27,5 @@ storiesOf('Addon|Notes', module)
 
     Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
   `,
-    }
-  );
+  },
+};

examples/riot-kitchen-sink/src/stories/core.stories.js

@@ -1,4 +1,4 @@
-import { tag, mount, storiesOf, addParameters } from '@storybook/riot';
+import { tag, mount, addParameters } from '@storybook/riot';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -8,8 +8,16 @@ tag('parameters', '<div>Parameters are {JSON.stringify (this.opts)}</div>', '',
 
 addParameters({ globalParameter });
 
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add('passed to story', ({ parameters: { fileName, ...parameters } }) =>
-    mount('parameters', { ...parameters, storyParameter })
-  );
+export default {
+  title: 'Core|Parameters',
+  parameters: {
+    chapterParameter,
+  },
+};
+
+export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+  mount('parameters', { ...parameters, storyParameter });
+
+passedToStory.story = {
+  name: 'passed to story',
+};

examples/riot-kitchen-sink/src/stories/index.js

@@ -1,22 +0,0 @@
-import { mount, storiesOf } from '@storybook/riot';
-import { linkTo } from '@storybook/addon-links';
-import ButtonRaw from './Button.txt';
-import './Welcome.tag';
-import '../App.tag';
-
-storiesOf('Welcome', module).add('Welcome', () =>
-  mount('welcome', { goToButton: linkTo('Button') })
-);
-
-storiesOf('App', module).add('App', () => mount('app', {}));
-
-storiesOf('Button', module)
-  // Works if riot.component is called in the config.js in .storybook
-  .add('rounded', () => ({
-    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-    template: '<my-button rounded={true}>A Button with rounded edges</my-button>',
-  }))
-  .add('square', () => ({
-    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-    template: '<my-button rounded={false}>A Button with square edges</my-button>',
-  }));

examples/riot-kitchen-sink/src/stories/nested-tags.stories.js

@@ -0,0 +1,32 @@
+import { tag, mount, asCompiledCode } from '@storybook/riot';
+import SimpleTestRaw from './SimpleTest.txt';
+import './AnotherTest.tag';
+
+const simpleTestCompiled = asCompiledCode(SimpleTestRaw);
+
+export default {
+  title: 'Story|Nest tags',
+};
+
+export const threeTags = () => ({
+  tags: [
+    '<WebPage><PageHeader>Simple title</PageHeader><PageBody>Simple Content</PageBody></WebPage>',
+    '<PageHeader><h1><yield/></h1></PageHeader>',
+    '<PageBody><div style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"><yield/></div></PageBody>',
+  ],
+});
+
+threeTags.story = {
+  name: 'Three tags',
+};
+
+export const Matriochka = () => ({
+  tags: [
+    '<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
+    '<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
+    '<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
+    '<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
+    '<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
+  ],
+  template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
+});

examples/riot-kitchen-sink/src/stories/story-code.stories.js

@@ -1,35 +1,48 @@
-import { tag, mount, storiesOf, asCompiledCode } from '@storybook/riot';
+import { tag, mount, asCompiledCode } from '@storybook/riot';
 import SimpleTestRaw from './SimpleTest.txt';
 import './AnotherTest.tag';
 
 const simpleTestCompiled = asCompiledCode(SimpleTestRaw);
 
-storiesOf('Story|How to create a story', module)
-  .add(
-    'built with tag',
-    () =>
+export default {
+  title: 'Story|How to create a story',
+};
+
+export const builtWithTag = () =>
   tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
-      mount('test', { value: 'with a parameter' })
-  )
+  mount('test', { value: 'with a parameter' });
 
-  .add('built as string', () => ({ tags: ['<test><div>simple test</div></test>'] }))
+builtWithTag.story = {
+  name: 'built with tag',
+};
 
-  .add('built from raw import', () => simpleTestCompiled)
+export const builtAsString = () => ({ tags: ['<test><div>simple test</div></test>'] });
 
-  .add(
-    'built from tags and template',
-    () => ({
+builtAsString.story = {
+  name: 'built as string',
+};
+
+export const builtFromRawImport = () => simpleTestCompiled;
+
+builtFromRawImport.story = {
+  name: 'built from raw import',
+};
+
+export const builtFromTagsAndTemplate = () => ({
   tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
   template:
     '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-    }),
-    {
+});
+
+builtFromTagsAndTemplate.story = {
+  name: 'built from tags and template',
+  parameters: {
     notes:
       'WARN : the tag file root element must have exactly the same name (or else you will see nothing)',
-    }
-  )
+  },
+};
 
-  .add('tags, template and tagConstructor at once', () => ({
+export const tagsTemplateAndTagConstructorAtOnce = () => ({
   tags: [
     {
       content:
@@ -42,32 +55,29 @@ storiesOf('Story|How to create a story', module)
   tagConstructor: function tagConstructor() {
     this.hacked = true;
   },
-  }))
+});
 
-  .add('built from the precompilation', () => mount('anothertest', {}), {
+tagsTemplateAndTagConstructorAtOnce.story = {
+  name: 'tags, template and tagConstructor at once',
+};
+
+export const builtFromThePrecompilation = () => mount('anothertest', {});
+
+builtFromThePrecompilation.story = {
+  name: 'built from the precompilation',
+  parameters: {
     notes: 'WARN, only works in lower case, never upper case with precompiled templates',
-  })
+  },
+};
 
-  .add('the mount instruction is not necessary', () => ({ tagName: 'anothertest', opts: {} }))
+export const theMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
 
-  .add('the opts value is not necessary', () => ({ tagName: 'anothertest' }));
+theMountInstructionIsNotNecessary.story = {
+  name: 'the mount instruction is not necessary',
+};
 
-storiesOf('Story|Nest tags', module)
-  .add('Three tags', () => ({
-    tags: [
-      '<WebPage><PageHeader>Simple title</PageHeader><PageBody>Simple Content</PageBody></WebPage>',
-      '<PageHeader><h1><yield/></h1></PageHeader>',
-      '<PageBody><div style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"><yield/></div></PageBody>',
-    ],
-  }))
+export const theOptsValueIsNotNecessary = () => ({ tagName: 'anothertest' });
 
-  .add('Matriochka', () => ({
-    tags: [
-      '<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
-      '<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
-      '<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
-      '<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
-      '<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
-    ],
-    template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
-  }));
+theOptsValueIsNotNecessary.story = {
+  name: 'the opts value is not necessary',
+};