Riot-kitchen-sink: update stories to module format

2025-04-06 07:21:16 +08:00 · 2019-06-28 00:21:36 +08:00 · 2019-06-28 00:21:36 +08:00 · 9677427fee
commit 9677427fee
parent 0af4aac906
10 changed files with 266 additions and 201 deletions
--- a/examples/riot-kitchen-sink/.storybook/config.js
+++ b/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);
--- a/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/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', () =>
-    mount('my-button', {
-      handleClick: action('button-click'),
-      content: 'Click me to log the action',
-    })
-  )
-  .add('Multiple actions', () =>
-    mount('my-button', {
-      handleDblClick: action('button-double-click'),
-      content: 'Double Click me to log the action',
-    })
-  );
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () =>
+  mount('my-button', {
+    handleClick: action('button-click'),
+    content: 'Click me to log the action',
+  });
+
+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',
+};
--- a/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/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', () => {
-    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', () => {
-    const content = 'This one too!';
+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>`,
-    };
-  });
+  return {
+    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
+    template: `<my-button>${content}</my-button>`,
+  };
+};
+
+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',
+};
--- a/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/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,49 +11,53 @@ import {
  button,
 } from '@storybook/addon-knobs';

-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    const content = `I am ${name} and I'm ${age} years old.`;
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+};

-    return {
-      tags: [`<div>${content}</div>`],
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
-    const price = number('Price', 2.25);
+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.`;

-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+  return {
+    tags: [`<div>${content}</div>`],
+  };
+};

-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+export const allKnobs = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);

-    button('Arbitrary action', action('You clicked it!'));
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);

-    return {
-      tags: [
-        `
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  button('Arbitrary action', action('You clicked it!'));
+
+  return {
+    tags: [
+      `
          <WhatIGot><div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
            <h1>My name is ${name},</h1>
            <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
@ -66,15 +69,24 @@ storiesOf('Addon|Knobs', module)
            <p>${salutation}</p>
          </div></WhatIGot>
        `,
-      ],
-    };
-  })
-  .add('XSS safety', () => ({
-    tags: [
-      `
+    ],
+  };
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
+
+export const xssSafety = () => ({
+  tags: [
+    `
      <div>
        ${text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >')}
      </div>
    `,
-    ],
-  }));
+  ],
+});
+
+xssSafety.story = {
+  name: 'XSS safety',
+};
--- a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
+++ b/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',
+};
--- a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
@ -1,27 +1,31 @@
-import { storiesOf } from '@storybook/riot';
+export default {
+  title: 'Addon|Notes',
+};

-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      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',
-    () => ({
-      tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+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>',
+  ],
+});

-      <em>It's not all that important to be honest, but..</em>
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};

-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+export const noteWithHtml = () => ({
+  tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
+});
+
+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! 😇
+  `,
+  },
+};
--- a/examples/riot-kitchen-sink/src/stories/core.stories.js
+++ b/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',
+};
--- a/examples/riot-kitchen-sink/src/stories/index.js
+++ b/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>',
-  }));
--- a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
+++ b/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>',
+});
--- a/examples/riot-kitchen-sink/src/stories/story-code.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
@ -1,73 +1,83 @@
-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',
-    () =>
-      tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
-      mount('test', { value: 'with a parameter' })
-  )
+export default {
+  title: 'Story|How to create a story',
+};

-  .add('built as string', () => ({ tags: ['<test><div>simple test</div></test>'] }))
+export const builtWithTag = () =>
+  tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
+  mount('test', { value: 'with a parameter' });

-  .add('built from raw import', () => simpleTestCompiled)
+builtWithTag.story = {
+  name: 'built with tag',
+};

-  .add(
-    'built from tags and template',
-    () => ({
-      tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
-      template:
-        '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-    }),
+export const builtAsString = () => ({ tags: ['<test><div>simple test</div></test>'] });
+
+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)',
+  },
+};
+
+export const tagsTemplateAndTagConstructorAtOnce = () => ({
+  tags: [
    {
-      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', () => ({
-    tags: [
-      {
-        content:
-          "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
-        boundAs: 'mustBeUniquePlease',
-      },
-    ],
-    template:
-      '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-    tagConstructor: function tagConstructor() {
-      this.hacked = true;
+      content:
+        "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
+      boundAs: 'mustBeUniquePlease',
    },
-  }))
+  ],
+  template:
+    '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+  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',
+};