Storybook: display registered action handlers for active story

[tkryskiewicz]

Is your feature request related to a problem? Please describe.
For some components, I'm creating a default story with actions that are always available:
~jsx
storiesOf("Component, module)
.add("default", () => (
onExitMouseEnter={action("Exit Mouse Enter")}
onExitMouseLeave={action("Exit Mouse Leave")}
onExitClick={action("Exit Click")}
/>
));
~
and then specialised stories for possible actions:
~jsx
.add("dismissal", () => (
dismissible={boolean("Dismissible?", true)}
onDismissMouseEnter={action("Dismiss Mouse Enter")}
onDismissMouseLeave={action("Dismiss Mouse Leave")}
onDismissClick={action("Dismiss Click")}
/>
));
~
but without additional description or some guessing, there's no way to tell what actions are available.

Describe the solution you'd like
Would be great to have a list of all registered action handlers displayed in action logger panel, like:
~
Registered handlers:
Dismiss Mouse Enter
Dismiss Mouse Leave
Dismiss Click
~

Describe alternatives you've considered
Open to suggestions.

Are you able to assist bring the feature to reality?
Yes, I can... with some guidance.

Additional context
None.

[tmeasday]

Hi @tkryskiewicz - I'm not quite sure what you are thinking here, but I'm not sure that is technically possible.

Can you explain a little more about the use case you are trying to serve here, perhaps we can come up with something? Are you thinking about documenting the component?

[tkryskiewicz]

Hi @tmeasday,

I think we can simplify things quite a bit here. Let's say we have a story for Component with a Click action handler registered.

<Component
  onClick={action("Click")}
/>

When we open this story, without additional description or addons like Storysource, we have no idea that we should be able to click and execute this handler (there's nothing in the UI that tells that).

It would be great to see a list of action handler names (in Action Logger panel), that were registered during story (re)rendering. In our case it would be:

Registered handlers:
- Click

The overall goal is to inform the user on what he's able to do within that story.

Hope I made myself clear this time ;)

[shilman]

@tkryskiewicz Nice idea! I'm also not sure whether it's possible, but it would be cool/useful if we could make it happen!

[tkryskiewicz]

Thanks @shilman!

Looks like this should be possible, would require to:

• add an event for action handler registration
• emit such event when calling action()
• handle that event in ActionLogger container (add to list)
• present a list of registered handlers in ActionLogger component
• clear list when switching story

Solution seems simple, but there are a couple of problems I've encountered:

• when opening actions root from examples a lot of handlers get registered
• sometimes some helper actions seem to be registered that aren't obvious
• performance when rendering a lot of stories and other edge cases

Simple PoC:
https://github.com/tkryskiewicz/storybook/commit/a184d4d47274486fe96461be80f52090197fced6

[tmeasday]

The problem is you don't have to call action inside the story function. I guess you could make it a requirement to use this feature.

[tkryskiewicz]

True. Right now I see this feature more as opt-in.

Given that you can emit an event from basically anywhere, other ways to register handlers should also be doable. One problem is, that if you create them with actions(), then clearing list during story re-rendering doesn't apply. The other one is that only a few might be applicable to the active story.

Also the naming is left up to the user. It's not a problem to register 2 handlers with same name (intentionally or not).

Will look into those things.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[tkryskiewicz]

Hi,

Finally had some time to work on this - https://github.com/storybooks/storybook/compare/next...tkryskiewicz:display-registered-action-handlers?expand=1.

Would see this feature looking something like this (with better styling, maybe being collapsible, etc.):

When using actions(...):

Sometimes action() is called like onClick={() => action('Boolean')(false)}, added * to distinguish them:

List is cleared when changing stories.

Things left to do:

• on initial load, handlers from multiple stories are registered, not sure if there's currently a way to fix this
• handle addons panel orientation toggle
• visuals

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Pretty neat! I think this will be a useful option -- any plans to push it forward? @tkryskiewicz

[tkryskiewicz]

hey @shilman,
Definitely yes! Been quite busy lately. Will find some time in the upcoming days to work on styling.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[tkryskiewicz]

Sorry. Can't really find time to finish this. Once I'm free, I'll get back to this. :)