title: ReactJS Swiping Cards
body: <p>Forked and following this tut:
  <a href="https://github.com/alexandre-garrec/react-swipe-card/tree/master/src" rel="nofollow noreferrer">https://github.com/alexandre-garrec/react-swipe-card/tree/master/src</a></p>
  
  <p>But how did he get his actions? Also I want to refactor this for ES6 but I don't get what's in <code>import { storiesOf, action } from '@kadira/storybook';</code> please help.</p>
  
  <p>The tutorial looks simple as follows:</p>
  
  <pre><code>import Cards, { Card } from 'react-swipe-card'
  
  
  const data = ['Alexandre', 'Thomas', 'Lucien']
  
  const Wrapper = () =&gt; {
    return (
        &lt;Cards onEnd={action('end')} className='master-root'&gt;
          {data.map(item =&gt; 
            &lt;Card 
              onSwipeLeft={action('swipe left')} 
              onSwipeRight={action('swipe right')}&gt;
              &lt;h2&gt;{item}&lt;/h2&gt;
            &lt;/Card&gt;
          )}
        &lt;/Cards&gt;
    )
  }
  </code></pre>
  
  <p>But some things are unanswered like: <code>={action('end')}</code> - What are these <code>actions</code>? It appears they come from here: <code>react-swipe-card/.storybook/config.js</code> - but this file itself references: <code>require('../stories/index.js');</code> and in index.js <a href="https://github.com/alexandre-garrec/react-swipe-card/blob/master/stories/index.js" rel="nofollow noreferrer">https://github.com/alexandre-garrec/react-swipe-card/blob/master/stories/index.js</a> it again refrences: <code>import { storiesOf, action } from '@kadira/storybook';</code> ...so slightly confusing. Can anyone make this work with ES6? I think I just need to know how to make <code>action</code> work or create a similar action with similar functionality.</p>