How to use @storybook/preact - 10 common examples

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

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

import { configure } from '@storybook/preact'

// automatically import all files ending in *.stories.js
const req = require.context('../src', true, /.stories.js$/)
function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

/** @jsx h */
import { load, addParameters } from '@storybook/preact';

addParameters({
  options: {
    hierarchySeparator: /\/|\./,
    hierarchyRootSeparator: /\|/,
  },
});

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

initial="AB"
      alt="an avatar"
      src={faker.internet.avatar()}
    />
  ))
  .add('away', () => (
    
  ))

storiesOf('Components|Avatar/size', module)
  .addDecorator(Centered)
  .add('xs', () => (
    
  ))
  .add('sm', () => (

Primary: "primary",
  Light: "light",
  Dark: "dark",
  Info: "info",
  Warning: "warning",
  Danger: "danger"
};

const SIZES = {
  Default: null,
  Small: "small",
  Medium: "medium",
  Large: "large"
};

storiesOf("Forms", module)
  .addDecorator(withKnobs)
  .addDecorator(story =&gt; <form> ev.preventDefault()}&gt;{story()}</form>)
  .add("Textarea", () =&gt; (
    
      
        <textarea readonly="{boolean(&quot;Read-only&quot;," disabled="{boolean(&quot;Disabled&quot;," size="{select(&quot;Size&quot;," color="{select(&quot;Color&quot;," placeholder="Lorem ipsum etc.">      &lt;/Control&gt;
    &lt;/Field&gt;</textarea>

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

storiesOf('Elements|Button', module)
  .addDecorator(Centered)
  .add('Default', () =&gt; <button>default button</button>)
  .add('link', () =&gt; <button>link button</button>)
  .add('loading', () =&gt; <button loading="">loading button</button>)
  .add('active', () =&gt; <button>active button</button>)
  .add('disabled', () =&gt; <button disabled="">disabled button</button>)

storiesOf('Elements|Button/kind', module)
  .addDecorator(Centered)
  .add('primary', () =&gt; <button kind="primary">primary button</button>)
  .add('success', () =&gt; <button kind="success">success button</button>)
  .add('error', () =&gt; <button kind="error">error button</button>)

storiesOf('Elements|Button/shape', module)
  .addDecorator(Centered)
  .add('square', () =&gt; (
    <button kind="primary" shape="square">
      <i class="icon icon-menu">
    </i></button><i class="icon icon-menu">
  ))
  .add('circle', () =&gt; (
    <button kind="primary" shape="circle">
      <i class="icon icon-menu">
    </i></button></i>

/** @jsx h */
import { h } from 'preact'
import { storiesOf } from '@storybook/preact'
import Centered from '@storybook/addon-centered/preact'
import { withColumn } from '../../../.storybook/withWrapper'
import Bar from './'

storiesOf('Components|Bar', module)
  .addDecorator(withColumn(6))
  .addDecorator(Centered)
  .add('items', () => (
    
      
        50%

import Button from '../Button'
import Card from '../Card'

storiesOf('Components|Popover', module)
  .addDecorator(Centered)
  .add('Default', () => (
    popover}>
      
        card header
        card body
        card footer
      
    
  ))

storiesOf('Components|Popover/position', module)
  .addDecorator(Centered)
  .add('top', () => (
    top popover}
    >
      
        card header
        card body
        card footer
      
    
  ))
  .add('right', () => (

/** @jsx h */
import { h } from 'preact'
import Centered from '@storybook/addon-centered/preact'
import { withColumn } from '../../../.storybook/withWrapper'
import { storiesOf } from '@storybook/preact'
import Table from './'

storiesOf('Elements|Table', module)
  .addDecorator(withColumn([12, 12, 8, 8, 6]))
  .addDecorator(Centered)
  .add('Default', () => (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Genre</th>
          <th>Release date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>The Shawshank Redemption</td>
          <td>Crime, Drama</td>
          <td>14 October 1994</td></tr></tbody></table>

/** @jsx h */
import { h } from 'preact'
import Centered from '@storybook/addon-centered/preact'
import { withColumn } from '../../../.storybook/withWrapper'
import { storiesOf } from '@storybook/preact'
import Toast from './'
import Button from '../Button'

storiesOf('Components|Toast', module)
  .addDecorator(withColumn([12, 6]))
  .addDecorator(Centered)
  .add('Default', () => (
    
      Default Toast <button class="float-right" clear="">
    
  ))

storiesOf('Components|Toast/kind', module)
  .addDecorator(withColumn([12, 6]))
  .addDecorator(Centered)
  .add('Success', () =&gt; (
    
      Toast success </button><button class="float-right" clear="">
    
  ))</button>