# storygleam

[![Package Version](https://img.shields.io/hexpm/v/storygleam)](https://hex.pm/packages/storygleam)
[![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://hexdocs.pm/storygleam/)

storygleam is an interface for using [storybook](https://storybook.js.org/) 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
```sh
gleam add --dev storygleam@1
```

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

```gleam
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:
```sh
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

```sh
gleam test  # Run the tests
```

When developing, you can use the [example project](./example) to test your changes