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

default_preview

</>

pub fn default_preview() -> storybook.Preview

run

</>

pub fn run(
  stories: List(StoryCollection),
  preview: storybook.Preview,
) -> 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

If you don’t require preview configuration, you can use storygleam.default_preview() as the second parameter.