📚 story #

Storybook, but in Gleam.

Note: This is still work in progress, so the package isn't released yet.

Prerequisites #

• To use story, your project must support the javascript target.
• Your project must also have lustre and lustre_dev_tools as dependencies.

Usage #

import lustre/element
import lustre/element/html
import story
import story/story_web

pub fn hello_world(name: String) {
  html.h1([], [element.text("Hello, " <> name <> "!")])
}

pub fn main() -> Nil {
  let config =
    story.config()
    |> story.add_collection(
      story.collection(
        category: "Components",
        title: "Hello",
        args: [story.str("name", "Lucy")],
        component: fn(arguments) {
          use name <- story.pstr(arguments, "name")

          hello_world(name) |> Ok
        },
        stories: [
          story.story(
            name: "default",
            description: "Default component.",
            args: [],
          ),
          story.story(name: "test", description: "Test style.", args: [
            story.str("name", "Karsten"),
          ]),
        ],
      ),
    )

  let assert Ok(Nil) = story_web.run(config)
  Nil
}

You can then run it using lustre/dev module:

gleam run -m lustre/dev start

References #

This package was inspired by Storybook and storygleam by theSuess.