File size: 3,639 Bytes
24d78ad |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
defmodule Storybook.MyPage do
# See https://hexdocs.pm/phoenix_storybook/PhoenixStorybook.Story.html for full story
# documentation.
use PhoenixStorybook.Story, :page
def doc, do: "Your very first steps into using Phoenix Storybook"
# Declare an optional tab-based navigation in your page:
def navigation do
[
{:welcome, "Welcome", {:fa, "hand-wave", :thin}},
{:components, "Components", {:fa, "toolbox", :thin}},
{:sandboxing, "Sandboxing", {:fa, "box-check", :thin}},
{:icons, "Icons", {:fa, "icons", :thin}}
]
end
# This is a dummy fonction that you should replace with your own HEEx content.
def render(assigns = %{tab: :welcome}) do
~H"""
<div class="psb-welcome-page">
<p>
We generated your storybook with an example of a page and a component.
Explore the generated <code class="psb-inline">*.story.exs</code>
files in your <code class="inline">/storybook</code>
directory. When you're ready to add your own, just drop your new story & index files into the same directory and refresh your storybook.
</p>
<p>
Here are a few docs you might be interested in:
</p>
<.description_list items={[
{"Create a new Story", doc_link("Story")},
{"Display components using Variations", doc_link("Stories.Variation")},
{"Group components using VariationGroups", doc_link("Stories.VariationGroup")},
{"Organize the sidebar with Index files", doc_link("Index")}
]} />
<p>
This should be enough to get you started, but you can use the tabs in the upper-right corner of this page to <strong>check out advanced usage guides</strong>.
</p>
</div>
"""
end
def render(assigns = %{tab: guide}) when guide in ~w(components sandboxing icons)a do
assigns =
assign(assigns,
guide: guide,
guide_content: PhoenixStorybook.Guides.markup("#{guide}.md")
)
~H"""
<p class="md:psb-text-lg psb-leading-relaxed psb-text-slate-400 psb-w-full psb-text-left psb-mb-4 psb-mt-2 psb-italic">
<a
class="hover:text-indigo-700"
href={"https://hexdocs.pm/phoenix_storybook/#{@guide}.html"}
target="_blank"
>
This and other guides are also available on HexDocs.
</a>
</p>
<div class="psb-welcome-page psb-border-t psb-border-gray-200 psb-pt-4">
<%= Phoenix.HTML.raw(@guide_content) %>
</div>
"""
end
defp description_list(assigns) do
~H"""
<div class="psb-w-full md:psb-px-8">
<div class="md:psb-border-t psb-border-gray-200 psb-px-4 psb-py-5 sm:psb-p-0 md:psb-my-6 psb-w-full">
<dl class="sm:psb-divide-y sm:psb-divide-gray-200">
<%= for {dt, link} <- @items do %>
<div class="psb-py-4 sm:psb-grid sm:psb-grid-cols-3 sm:psb-gap-4 sm:psb-py-5 sm:psb-px-6 psb-max-w-full">
<dt class="psb-text-base psb-font-medium psb-text-indigo-700">
<%= dt %>
</dt>
<dd class="psb-mt-1 psb-text-base psb-text-slate-400 sm:psb-col-span-2 sm:psb-mt-0 psb-group psb-cursor-pointer psb-max-w-full">
<a
class="group-hover:psb-text-indigo-700 psb-max-w-full psb-inline-block psb-truncate"
href={link}
target="_blank"
>
<%= link %>
</a>
</dd>
</div>
<% end %>
</dl>
</div>
</div>
"""
end
defp doc_link(page) do
"https://hexdocs.pm/phoenix_storybook/PhoenixStorybook.#{page}.html"
end
end
|