Storybook for Ink (React for the Terminal)

[expelledboy]

Hello 👋

I am attempting to get a MVP storybook like experience for developing components using the ink framework.

I thought I had something working, but it would seem I just had a temporary state, where my calling repo somehow imported modules using the same react instance.

However, now I am getting

~/repos/expelledboy/ink-showcase on  master! ⌚ 13:04:35
$ npx ~/repos/expelledboy/ink-storybook
No config file found at storybook/config.ts, using defaults.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

  ERROR  Cannot read properties of null (reading 'useState')

Ideally I would like to be able to develop a story in my component repo, eg ink-showcase and from that repo call npx @expelleboy/ink-storybook and it should detect the .story.tsx files for the components, and then render that into the storybook app UI component that exists in @expelleboy/ink-storybook.

For the life of me I can not rap my head around what I must do to get this to work. I have tried:

• Building a static list of stories, and then spawn a node process running ink-storybook main
• Using tsx (in various different import orders relative to React imports)
• Using the developer API of tsx with namespaced dynamic imports
• Using esbuild (getting compile issues, with wasm based deps)
• Setting the globalThis.React

I have worked an entire weekend (and then some) and I have finally given up.

If anyone could provide me some insight I would very much appreciate it!

Here is the repo: https://github.com/expelledboy/ink-storybook

[valentinpalkovic]

@ndelangen I think you have substantial experience to make ink work in Storybook. Maybe you have one or two helpful tips.