How to use the @storybook/preact.storiesOf function in @storybook/preact

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>

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

storiesOf('Elements|Code', module)
  .addDecorator(withColumn([12, 8, 6]))
  .addDecorator(Centered)
  .add('Default', () =&gt; <code lang="HTML">&lt;div&gt;foo&lt;/div&gt;</code>)

Quickly maximize timely deliverables for real-time schemas. Dramatically
        maintain clicks-and-mortar.
      <p></p>
      <p>
        Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk
        and cheese danish fontina smelly cheese who moved my cheese cow.
      </p>
    
    
      <button>Share</button>
      <button>Close</button>
    
  
))

storiesOf('Components|Modal/size', module)
  .add('sm', () =&gt; (
    
      
        Modal title
      
      
        <p>
          Caerphilly swiss fromage frais. Brie cheese and wine fromage frais
          chalk and cheese danish fontina smelly cheese who moved my cheese cow.
        </p>
      
      
        <button>Share</button>
        <button>Close</button>

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

import Panel from '../../components/Panel'
import Button from '../../components/Button'
import Tabs from '../../components/Tabs'
import Avatar from '../../components/Avatar'
import Tile from '../../components/Tile'
import faker from 'faker'

storiesOf('Recipes|Profile', module)
  .addDecorator(withColumn([12, 8, 6, 6, 4]))
  .addDecorator(Centered)
  .add('Default', () => (
    
      
        
        {faker.name.findName()}
        
          {faker.name.jobTitle()}
        
      
      
        
          
            <a href="#">Profile</a>