Storybook Actions - what exactly are they calling?

Question

I am somewhat new to React, and I am trying to do a card swiping mechanism.

I am using this library:

https://www.npmjs.com/package/react-swipe-card

I essentially have a demo Component created:

import React, { Component } from 'react'
import Cards, { Card } from 'react-swipe-card';
import { action } from '@storybook/addon-actions';
import addons, { mockChannel } from '@storybook/addons';

addons.setChannel(mockChannel());

const data = ['Alexandre', 'Thomas', 'Lucien']

const Wrapper = () => {
  return (
      <Cards onEnd={action('end')} className='master-root'>
        {data.map(item => 
          <Card
          key={item}
          onSwipeRight={action('swipe left')}
          onSwipeLeft={action('swipe left')}
          >
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

export default Wrapper;

However I am not quite familiar with Storybooks - I've been reading up on it and it doesn't quite make sense to me.

For example, after all of the cards have been gone through, I'd like to shuffle them and display them again.

Right now, the only "action" that is executed is "end", whatever that does:

onEnd={action('end')

What is this action end calling exactly? How would I repopulate the cards again on end?

Sorry if this is a basic question, I honestly wouldn't have asked it if I hadn't tried to figure out Storybooks for a couple days first.

Answer 1

Ok, as Jack would've said let's go by parts. First of all:

I would like an explanation of how storybook actions work

storybook-actions is an addon to Storybook's platform. Actions provide you with a mechanism that logs user interactions and data as it flows through your components in the Storybook's UI. action() is actually a high-order function wich returns another function similar to console.log(), the only difference here is that besides logging the user's activity and perform other operations, the name of the action (end, swipe-left, ...) will also be rendered on your storybook's action panel.

The event handler functions that action() creates are useful for as a substitute for actual event handler functions that you would pass to your components. Other times, you actually need the event handling behavior to run. For example, you have a controlled form field that maintains its own state and you want to see what happens as the state changes

See this article about actions for more information

Second:

A perfect answer would explain how to make the cards repeat after a user finished going through a stack

This actually doesn't have anything to do with actions or even with storybook, this logic is implemented by react-swipe-card package, and here I admit my incompetence, I even tried to go through the source, but is just so messy that is almost impossible to understand exactly what's going on, the logic that you are looking for is just a carousel, that checks if the next element is null or undefined and case true just start all over. Or if the previous element is null or undefined and case true go to the last element. I advise you to find other library most reliable like react-swipeable-views