storygleam#

storygleam is an interface for using storybook in your gleam projects.

Instead of integrating through @external functions, it uses code generation and @storybook/vite-html to leave the bundling up to storybook.

If you want a full tutorial, you can read my blog post announcing storygleam.

Prerequisites#

To use storygleam, your project must support the javascript target. If you are developing a full stack application, this can still be done by splitting your frontend into a separate package. For now, JS package management is depending on pnpm but this should become configurable in the future.

Installation#

First, add storygleam as a dev dependency to your project

gleam add --dev storygleam@1

Then, modify the test entrypoint in the test directory to bootstrap the story files and build stories:

import storygleam

pub fn main() {
  storygleam.run(
    [
      storygleam.StoryCollection(
        meta: storygleam.Meta(
          "Example/Header",
          args: [storygleam.StringArg("name", "Dominik")],
          render_fn: "example_component",
          id: "example_header",
        ),
        stories: [storygleam.Story("NoArgs", [])],
        module_path: "example/example",
      ),
    ],
    storygleam.default_preview(),
  )
}

Usage#

To start storybook, you need to run the following commands:

gleam test init # only needed once
pnpm install # whenever you update dependencies in package.json
pnpm dev # to watch for code & story changes

Further documentation can be found at https://hexdocs.pm/storygleam.

Development#

gleam test  # Run the tests

When developing, you can use the example project to test your changes