storygleam

Storybook integration for gleam

This package contains everything you need to build stories without touching javascript

Types

Arg

pub type Arg {
  StringArg(name: String, value: String)
  IntArg(name: String, value: Int)
}

Constructors

```
StringArg(name: String, value: String)
```
```
IntArg(name: String, value: Int)
```

The Meta record contains information about the component. It needs a unique ID, a title, a list of arguments and the name of the function to be called. The arguments need to be in the same order as defined in the render_fn

pub type Meta {
  Meta(
    id: String,
    title: String,
    args: List(Arg),
    render_fn: String,
  )
  LustreMeta(
    id: String,
    title: String,
    args: List(Arg),
    component_name: String,
  )
}

Constructors

Meta(
  id: String,
  title: String,
  args: List(Arg),
  render_fn: String,
)

LustreMeta(
  id: String,
  title: String,
  args: List(Arg),
  component_name: String,
)

Story

</>

A Story has a name that describes what it’s trying to showcase and a list of argument values.

pub type Story {
  Story(name: String, args: List(Arg))
}

Constructors

```
Story(name: String, args: List(Arg))
```

StoryCollection

</>

A StoryCollection contains information on how to render a component and a list of Stories that define values for different attributes. The module_path begins with the package name so the gleam import path app/ui/components/header.gleam translates to my-package/app/ui/components/header

pub type StoryCollection {
  StoryCollection(
    meta: Meta,
    stories: List(Story),
    module_path: String,
  )
}

Constructors

StoryCollection(
  meta: Meta,
  stories: List(Story),
  module_path: String,
)

Values

run

</>

pub fn run(stories: List(StoryCollection)) -> Nil

run is the main entry point for storygleam. It should be the only entry in your test main function.

You can then run the following commands:

gleam test init Bootstrap package.json as well as other files required by storybook
gleam test build-stories Generates the typescript code for the defined stories
gleam test watch-stories Recompiles the stories as well as the source code on change

Usually you will not run these commands directly as they are called from the build scripts in package.json