thefrontside / thefrontside/interactors

Add interactor support to interactive storybook stories

Open
#165 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.