How to use @storybook/svelte - 10 common examples

import { configure } from '@storybook/svelte'

// automatically import all files ending in *.stories.js
configure(
  require.context('../stories', true, /\.stories\.js$/),
  module,
)

import { configure } from '@storybook/svelte';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

import { storiesOf } from '@storybook/svelte';
import { withKnobs, text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import WelcomePage from '../build/components/WelcomePage/WelcomePage.svelte';

storiesOf('WelcomePage', module)
  .addDecorator(withKnobs)
  .add('with text', () => {
    const name = text('name', 'user');
    return {
      Component: WelcomePage,
      data: {
        name,
        date: new Date()
      },
      on: {
        click: action('clicked')
      }
    }
  })

import { storiesOf } from '@storybook/svelte';

import ButtonView from './views/ButtonView.svelte';

storiesOf('Addon|Notes', module)
  .add(
    'Simple note',
    () => ({
      Component: ButtonView,
    }),
    { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' }
  )
  .add(
    'Note with HTML',
    () => ({
      Component: ButtonView,
      data: {
        text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
      },
    }),
    {

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

import { storiesOf } from '@storybook/svelte'
import TextfieldCollab from './views/atoms/TextfieldCollabView.svelte'

storiesOf('TextfieldCollab', module).add('Default', () => ({
  Component: TextfieldCollab,
  props: {
    placeholder: 'Nome',
  },
}))

import { storiesOf } from '@storybook/svelte';
import { action } from '@storybook/addon-actions';

import ButtonView from './views/ButtonView.svelte';
import Button from '../components/Button.svelte';

storiesOf('Addon|Actions', module)
  .add('Action on view method', () => ({
    Component: ButtonView,
    on: {
      click: action('I am logging in the actions tab'),
    },
  }))
  .add('Action on component method', () => ({
    Component: Button,
    data: {
      text: 'Custom text',
    },
    on: {
      click: action('I am logging in the actions tab too'),
    },
  }));

import { storiesOf } from '@storybook/svelte'
import CloseCollab from './views/atom/CloseCollabView.svelte'

storiesOf('CloseCollab', module).add('default', () => ({
  Component: CloseCollab,
}))

import { storiesOf } from '@storybook/svelte';
import Centered from '@storybook/addon-centered/svelte';
import { action } from '@storybook/addon-actions';

import Button from '../components/Button.svelte';

storiesOf('Addon|Centered', module)
  .addDecorator(Centered)
  .add('rounded', () => ({
    Component: Button,
    props: {
      rounded: true,
      text: "Look, I'm centered!",
    },
  }))
  .add('with action', () => ({
    Component: Button,
    on: {
      click: action(`Tell me it ain't so! Centered and with actions! Thanks @ekhaled :)`),
    },
  }));

import { configure, addParameters, addDecorator } from '@storybook/svelte';
import { withA11y } from '@storybook/addon-a11y';

addDecorator(withA11y);
addParameters({
  options: {
    hierarchyRootSeparator: /\|/,
  },
});

configure(require.context('../src/stories', true, /\.stories\.js$/), module);