phoenix_storybook

# PhoenixStorybook

[![github](https://github.com/phenixdigital/phoenix_storybook/actions/workflows/elixir.yml/badge.svg)](https://github.com/phenixdigital/phoenix_storybook/actions/workflows/elixir.yml)
[![codecov](https://codecov.io/gh/phenixdigital/phoenix_storybook/branch/main/graph/badge.svg)](https://codecov.io/gh/phenixdigital/phoenix_storybook)
[![GitHub release](https://img.shields.io/github/v/release/phenixdigital/phoenix_storybook.svg)](https://hex.pm/packages/phoenix_storybook)

📚 [Documentation](https://hexdocs.pm/phoenix_storybook) - 🔎 [Demo](https://phoenix-storybook-demo.fly.dev/) - 🎓 [Sample app](https://github.com/phenixdigital/phoenix_storybook_sample) - 🍿 [Getting started video](https://www.youtube.com/watch?v=MTE7dLhkQ8Q) - 🦊 [ElixirCasts](https://elixircasts.io/phoenix-storybook)

---

<a href='https://ko-fi.com/C0C316P9FN' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

_I'm the sole maintainer of this project and work on it in my free time. Any tips would be appreciated!_

---

<!-- MDOC !-->

PhoenixStorybook provides a [_storybook-like_](https://storybook.js.org) UI interface for your
Phoenix components.

- Explore all your components, and showcase them with different variations.
- Browse your component's documentation, with their supported attributes.
- Learn how components behave by using an interactive playground.

![screenshot](https://raw.githubusercontent.com/phenixdigital/phoenix_storybook/main/screenshots/screenshot-01.jpg)
![screenshot](https://raw.githubusercontent.com/phenixdigital/phoenix_storybook/main/screenshots/screenshot-02.jpg)

## How does it work?

PhoenixStorybook is mounted in your application router and serves its UI at the mounting point of
your choice.

It performs automatic discovery of your storybook content under a specified folder (`:content_path`)
and then automatically generates a storybook navigation sidebar. Every module detected in your
content folder will be loaded and identified as a storybook entry.

Three kinds of stories are supported:

- `component` to describe your stateless function components or your live_components.
- `page` to write & document UI guidelines, or whatever content you want.
- `example` to show how your components can be used and mixed in real UI pages.

## Installation

The fastest way to install the storybook is with [Igniter](https://hexdocs.pm/igniter), which adds the dependency, generates the storybook files and applies the whole setup (router, layout, assets, config, formatter and mix aliases) automatically:

```bash
mix igniter.install phoenix_storybook
```

And you are ready to go!

Without Igniter, you will need to follow these steps:

1. Add the `phoenix_storybook` dependency
2. Run the generator

### 1. Add the `phoenix_storybook` dependency

Add the following to your mix.exs and run mix deps.get:

```elixir
def deps do
  [
    {:phoe