Electric Storybook Example

This repo implements a defbook which can be used with Electric code to create Storybook stories.

See storybook.clj for implementation.

The macro takes in the format

(defbook ...StoryName... [...optional arg bindings...]
  ...electric code...)

and converts it to an exported JS object containing a render function which will mount the Electric program as a Storybook test.

Additionally, it supports Storybook parameters, args, and argTypes through metadata.

NOTE: This currently depends on a yet unmerged fix to Storybook which prevents non-^:export defs from being seen by Webpack (and thus seen by Storybook as stories): shadow-cljs/pull/1143

Steps

1. Copy the defbook macro (utils.storybook NS in storybook.clj & storybook.cljs) somewhere
2. Copy the .storybook directory
3. Add the dependencies from package.json
4. Use the defbook macro in a .books NS. (Specified by .storybook/main.ts; story/stories conflicts with Storybook's default CSF indexer.)
5. Start Dev REPL and run (user/main) (This starts Shadow-CLJS :books watch process and Electric server.)
6. Start Shadow-CLJS with npm run storybook

See books.cljs for example macro usage