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.

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",
    ),
  ])
}

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