Are actions supported?

[sbrow]

First of all, awesome work! Very cool making Storybook work with blade components. 😄

I was wondering if actions were currently supported, I think I'm on the right track, but I'm not sure if my config is broken or if it's the app.

I've been able to get this far:

{{-- resources/views/stories/button.blade.php --}}
@storybook([
    'name' => 'Button',
    'args' => [ ],
    'argTypes' => [
        'onClick' => [
            'action' => 'click',
        ],
    ]
])
<button onclick="{{ $onClick ?? '' }}('click')">Click Me</button>

But when I click the button, I get the following error:

In case it's needed, here is my config/blast.php file

`blast.php`

```php env('STORYBOOK_SERVER_HOST', env('APP_URL')) . '/storybook_preview', // See https://storybook.js.org/docs/react/configure/theming for available options 'storybook_theme' => [], // set the background color of the storybook canvas area 'canvas_bg_color' => '', // Blast will attempt to autoload assets from a mix-manifest if the assets arrays are empty. This option allows you to disable that functionality 'autoload_assets' => false, 'assets' => [ 'css' => [ 'assets/css/argon.mine209.css', 'css/app.css', 'assets/css/custom.css', ], 'js' => [ 'js/manifest.js', 'js/vendor.js', 'js/app.js' ], ], // See https://storybook.js.org/addons/@etchteam/storybook-addon-status/ 'storybook_statuses' => [ 'deprecated' => [ 'background' => '#e02929', 'color' => '#ffffff', 'description' => 'This component is deprecated and should no longer be used', ], 'wip' => [ 'background' => '#f59506', 'color' => '#ffffff', 'description' => 'This component is a work in progress', ], 'readyForQA' => [ 'background' => '#34aae5', 'color' => '#ffffff', 'description' => 'This component is complete and ready to qa', ], 'stable' => [ 'background' => '#1bbb3f', 'color' => '#ffffff', 'description' => 'This component is stable and released', ], ], 'storybook_global_types' => [], // set a global custom order for stories in the Storybook UI // More info - https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories 'storybook_sort_order' => [], 'build_timeout' => 300, 'vendor_path' => 'vendor/area17/blast', 'components' => [ 'docs-page' => \A17\Blast\Components\DocsPages\DocsPage::class, ], ]; ```

Keep up the good work!

[sbrow]

After further investigation, I believe the actionHandler() script is broken.

$onClick from my code above generates the following javascript

function actionHandler() {
    var channel = _storybook_addons__WEBPACK_IMPORTED_MODULE_4__.addons.getChannel();
    var id = uuid_browser_v4__WEBPACK_IMPORTED_MODULE_1___default()();
    var minDepth = 5; // anything less is really just storybook internals

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    var normalizedArgs = args.length > 1 ? args : args[0];
    var actionDisplayToEmit = {
      id: id,
      count: 0,
      data: {
        name: name,
        args: normalizedArgs
      },
      options: Object.assign({}, actionOptions, {
        depth: minDepth + (actionOptions.depth || 3),
        allowFunction: actionOptions.allowFunction || false
      })
    };
    channel.emit(_constants__WEBPACK_IMPORTED_MODULE_2__.EVENT_ID, actionDisplayToEmit);
  }

Many of those methods do not exist. e.g. _storybook_addons__WEBPACK_IMPORTED_MODULE_4__.addons.getChannel();

However __STORYBOOK_ADDONS.getChannel() does exist. So maybe this code just needs to be updated?

[RobertByrnes]

@sbrow Actions is supported via the essentials addon. What is the filename where this came from? I can find 2 instances of this function in vendor/area17/blast/node_modules/@storybook/addon-actions - meaning that you are into code from the addon rather than area17/blast. I am also finding this addon broken, however, I am not getting any errors in the console. If you look in area17/blast/stories/button.stories.json you will see the object is being created correctly to be passed into the addon event handlers. I'm still digging, but my current thinking regarding my issue is that the event is not propagating through to the event handler.

[RobertByrnes]

@sbrow Well I am keen to use this feature so I've managed to get action event handlers working but not the full argType version. Will put in a PR tomorrow - see https://storybook.js.org/docs/react/essentials/actions - Action Event Handlers