A story designates any kind of content in your storybook. For now only following kinds of stories are supported: component, :live_component, and :page.

In order to populate your storybook, just create story scripts under your content path, and implement their required behaviour.

Stories must be created as story.exs files.

In dev environment, stories are lazily compiled when reached from the UI.

usage

Usage

component

Component

Implement your component as such. Confer to:

• PhxLiveStorybook.Variation documentation for variations.
• PhxLiveStorybook.Attr documentation for attributes.

# storybook/my_component.exs
defmodule MyAppWeb.Storybook.MyComponent do
  use PhxLiveStorybook.Story, :component

  # required
  def function, do: &MyAppWeb.MyComponent.my_component/1
  def description, do: "My component description"

  def attributes, do: []
  def slots, do: []
  def variations, do: []
end

live-component

Live Component

Very similar to components, except that you need to define a component/0 function instead of function/0.

# storybook/my_live_component.exs
defmodule MyAppWeb.Storybook.MyLiveComponent do
  use PhxLiveStorybook.Story, :live_component

  # required
  def component, do: MyAppWeb.MyLiveComponent
  def description, do: "My live component description"
  def attributes, do: []
  def slots, do: []
  def variations, do: []
end

ℹ️ Learn more on components in the components guide.

page

Page

A page is a fairly simple story that can be used to write whatever content you want. We use it to provide some UI guidelines.

You should implement the render function and an optional navigation function, if you want a tab based sub-navigation. Current tab is passed as :tab in render/1 assigns.

# storybook/my_page.exs
defmodule MyAppWeb.Storybook.MyPage do
  use PhxLiveStorybook.Story, :page

  def description, do: "My page description"

  def navigation do
    [
      {:tab_one, "Tab One", "tab-icon"},
      {:tab_two, "Tab Two", "tab-icon"}
    ]
  end

  def render(assigns) do
    ~H"<div>Your HEEX template</div>"
  end
end