thefrontside / thefrontside/interactors
Add interactor support to interactive storybook stories
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 36
- Forks
- 2
- Avg merge
- 4m
- Merged PRs (30d)
- 2
Description
Interactors are a perfect fit for interactive stories, and fit nicely into the storybook ecosystem. We should provide a good experience for writing interactive stories using Storybook and debugging them using the @storybook/interactions addon.
Since we can add wrappers using the addActionWrapper API, we should be able to wrap all interactions so they can hook into the storybook instrumenter. But there are some issues. The instrumenter does not expose a public API to track any function, it is very geared towards wrapping testing-library. Furthermore when we try to do this by hooking into internal APIs, there are some issue with the storybook API, where it becomes frozen after stepping through the stories a few times.
I've set up a branch of Storybook here where we can see interactors in action within the storybook repo. This is useful for development. To set this up, grab the fork and then follow the setup instructions for storybook here. Finally when everything is set up, run:
cd examples/react-ts
yarn storybook
This will open up storybook, open up the "Demo" -> "Account Form" -> "Verification Success" story, which uses interactors.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Storybook interactors branch and follow Storybook's contribution setup instructions. Run cd examples/react-ts && yarn storybook, then inspect the Demo → Account Form → Verification Success story and the existing addActionWrapper integration. Done means interactive stories work with Storybook and can be debugged through the @storybook/interactions addon without relying on frozen internal APIs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- storybook, typescript
- Domain
- developer-experience, testing-qa
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100