Addon-docs: Support CSF3 play function

As a user, I’d like to see stories that use play functions to achieve interactions the same on the Docs page as how it appears on the Storybook Canvas.

Storybook CSF3 adds a play function for scripted interaction with components after a story has rendered. This currently does not work in the docs tab. We need to make it work:

• For iframe stories
• For inline stories

There are a few different issues to deal with around dueling play functions and dueling focus.

Dueling play functions

Two play functions can’t run at the same time: their events will clobber one another, especially if they require focus, e.g. keyboard events.

One way to deal with this is to run play functions sequentially. This can be problematic for long-running play functions.

Another way to deal with it is to not run play functions on the Docs page at all, and have UI by which the user can run a play function.

Dueling focus

A related issue is dueling Focus. Even if a play function finishes instantaneously, if story A shows element A focused, and story B shows element B focused, then at most one of those stories can show correctly on the Docs page.

The sequential approach above won’t fix this. Only the play function UI, would work for this.

Proposal

Since the play function UI works for all cases, that’s a relatively simple solution.

Alternative

A more complex solution would be to make it configurable with a parameter, e.g.

parameters: {
  docs: {
    playFunction: true,
  }
}

And then sequentially play all stories with playFunction true. This way the CSF author has control and can set playFunction to false for long-running stories.

┆Issue is synchronized with this Asana task by Unito

[ndelangen]

const queries = within(container)

❤️

[shilman]

@bodograumann nope, unfortunately not. 7.0 🤞