View Source PhxLiveStorybook.Entry (phx_live_storybook v0.2.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 modules under your content path, and implement their required behaviour.
usage
Usage
component
Component
Implement your component as such.
Confer to PhxLiveStorybook.Variation
documentation for variations.
defmodule MyAppWeb.Storybook.MyComponent do
use PhxLiveStorybook.Entry, :component
# required
def component, do: MyAppWeb.MyComponent
# 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 variations, do: []
end
live-component
Live Component
Very similar components, excepted the function/0
callback no longer required.
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 variations, do: []
end
page
Page
A page is basically a LiveComponent
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.
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
Convenience helper for using the functions above.