View Source PhxLiveStorybook.Entry (phx_live_storybook v0.3.0)

An entry designates any kind of content in your storybook. For now only following kinds of entries are supported: component, :live_component, and :page.

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

Entries must be created as .exs files.

usage

Usage

component

Component

Implement your component as such. Confer to:

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

  # required
  def function, do: &MyAppWeb.MyComponent.my_component/1

  def name, do: "Another name for my component"
  def description, do: "My component description"
  def icon, do: "fa fa-icon"

  def attributes, do: []
  def stories, do: []
end

live-component

Live Component

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

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

  # required
  def component, do: MyAppWeb.MyLiveComponent

  def name, do: "Another name for my component"
  def description, do: "My live component description"
  def icon, do: "fa fa-icon"

  def attributes, do: []
  def stories, do: []
end

page

Page

A page is a fairly simple entry 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.Entry, :page

  def name, do: "Another name for my page"
  def description, do: "My page description"
  def icon, do: "fa fa-icon"

  def navigation do
    [
      {:tab_id, "Tab Name", "tab-icon"},
      {:tab_id, "Tab Name", "tab-icon"}
    ]
  end

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

Link to this section Summary

Functions

Convenience helper for using the functions above.

Link to this section Functions

Link to this macro

__using__(which)

View Source (macro)

Convenience helper for using the functions above.