JavaScript @storybook/preact storiesOf Examples

Example #1

File: addon-centered.stories.js Project: chinmaymoharir/storybook

/** @jsx h */

import { h } from 'preact';

import { storiesOf } from '@storybook/preact';
import Centered from '@storybook/addon-centered/preact';
import Button from '../Button';

storiesOf('Addons|Centered', module)
  .addDecorator(Centered)
  .add('Button', () => <Button>A button</Button>);

Example #2

File: index.stories.js Project: chinmaymoharir/storybook

/** @jsx h */
import { h } from 'preact';

import { storiesOf } from '@storybook/preact';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import Welcome from './Welcome';
import Button from './Button';

storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));

Example #3

File: addon-actions.stories.js Project: chinmaymoharir/storybook

/** @jsx h */

import { h } from 'preact';

import { storiesOf } from '@storybook/preact';
import { action, actions } from '@storybook/addon-actions';
import Button from '../Button';

storiesOf('Addons|Actions', module)
  .add('Action only', () => <Button onclick={action('log')}>Click me to log the action</Button>)
  .add('Multiple actions', () => (
    <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
  ))
  .add('Multiple actions, object', () => (
    <Button {...actions({ onclick: 'click', ondblclick: 'double-click' })}>
      (Double) click me to log the action
    </Button>
  ))
  .add('Action and method', () => (
    <Button
      onclick={event => {
        event.preventDefault();
        action('method-log')(event.target);
      }}
    >
      Click me to log the action
    </Button>
  ));