📚 Documentation - 🔎 Demo - 🎓 Sample repository - 🍿 Getting started video
PhxLiveStorybook provides a storybook-like UI interface for your Phoenix LiveView 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.
PhxLiveStorybook 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.
To start using PhxLiveStorybook
in your phoenix application you will need to follow these steps:
- Add the
phx_live_storybook
dependency - Run the generator
Add the following to your mix.exs and run mix deps.get:
def deps do
[
{:phx_live_storybook, "~> 0.4.0"}
]
end
Run from the root of your application:
$> mix deps.get
$> mix phx.gen.storybook
And you are ready to go!
ℹ️ If you prefer manual setup, please read the setup guide.
Of all config settings, only the :otp_app
, and :content_path
keys are mandatory.
# lib/my_app_web/storybook.ex
defmodule MyAppWeb.Storybook do
use PhxLiveStorybook,
# OTP name of your application.
otp_app: :my_app,
# Path to your storybook stories (required).
content_path: Path.expand("../storybook", __DIR__),
# Path to your JS asset, which will be loaded just before PhxLiveStorybook's own
# JS. It's mainly intended to define your LiveView Hooks in `window.storybook.Hooks`.
# Remote path (not local file-system path) which means this file should be served
# by your own application endpoint.
js_path: "/assets/storybook.js",
# Path to your components stylesheet.
# Remote path (not local file-system path) which means this file should be served
# by your own application endpoint.
css_path: "/assets/storybook.css",
# This CSS class will be put on storybook container elements where your own styles should
# prevail. See the `guides/sandboxing.md` guide for more details.
sandbox_class: "my-app-sandbox",
# Custom storybook title. Default is "Live Storybook".
title: "My Live Storybook",
# Theme settings.
# Each theme must have a name, and an optional dropdown_class.
# When set, a dropdown is displayed in storybook header to let the user pick a theme.
# The dropdown_class is used to render the theme in the dropdown and identify which current
# theme is active.
#
# The chosen theme key will be passed as an assign to all components.
# ex: <.component theme={:colorful}/>
#
# The chosen theme class will also be added to the `.lsb-sandbox` container.
# ex: <div class="lsb-sandbox theme-colorful">...</div>
#
# If no theme has been selected or if no theme is present in the URL the first one is enabled.
themes: [
default: [name: "Default"],
colorful: [name: "Colorful", dropdown_class: "text-pink-400"]
# If you want to use custom FontAwesome icons.
font_awesome_plan: :pro, # default value is :free
font_awesome_kit_id: "foo8b41bar4625",
# Story compilation mode, can be either `:eager` or `:lazy`.
# It defaults to `:lazy` in dev environment, `:eager` in other environments.
# - When eager: all .story.exs & .index.exs files are compiled upfront.
# - When lazy: ony .index.exs files are compiled upfront and .story.exs are compile when the
# matching story is loaded in UI.
compilation_mode: :eager
]
All settings can be overridden from your config files.
# config/config.exs
config :my_app, MyAppWeb.Storybook,
content_path: "overridden/content/path"
ℹ️ Learn more on theming components in the theming guide, on icons in the icons guide.
We would love your PRs!
- Pull down phx_live_storybook to a directory next to your project (
../phx_live_storybook
). - Change your mix file to point to this directory:
{:phx_live_storybook, path: "../phx_live_storybook"},
- Run dev.storybook mix task from your project
$> mix dev.storybook
And make sure you read the CONTRIBUTING guide. That should get you running against HEAD and ready to dig into the code!
MIT License. Copyright (c) 2022