Skip to content

Latest commit

 

History

History
28 lines (19 loc) · 1.49 KB

README.md

File metadata and controls

28 lines (19 loc) · 1.49 KB
Raw

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