Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AddComponentTreeColorToEntriesWithExamplesOrPlayground #51

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,4 @@ node_modules
# Ignore Surface generated files
assets/js/_hooks/
assets/css/_components.css
assets/css/_variants.js
193 changes: 154 additions & 39 deletions lib/surface/catalogue/components/component_tree.ex
Original file line number Diff line number Diff line change
Expand Up @@ -8,68 +8,175 @@ defmodule Surface.Catalogue.Components.ComponentTree do
prop selected_component, :string
prop single_catalogue?, :boolean
prop components, :map
prop examples_and_playgrounds, :map

def render(assigns) do
~F"""
<aside
class="section column is-narrow is-narrow-mobile is-fullheight is-hidden-mobile"
style="background-color: #f5f5f5; min-width: 270px;"
>
{render_node(assigns, @components, @selected_component, @single_catalogue?)}
{render_node(
assigns,
@components,
@selected_component,
@single_catalogue?,
@examples_and_playgrounds
)}
</aside>
"""
end

def render_node(assigns, node, selected_component, single_catalogue?, parent_keys \\ []) do
def render_node(
assigns,
node,
selected_component,
single_catalogue?,
parent_keys \\ [],
examples_and_playgrounds
) do
~F"""
<ul class={"menu-list", "is-hidden": !show_nodes?(parent_keys, selected_component, single_catalogue?)}>
<li :if={parent_keys == []}>
<LivePatch to="/catalogue/" class={"has-text-weight-bold": !selected_component}>
<span class="icon">
<i class="fa fa-home" />
</span>
Home
</LivePatch>
</li>
{maybe_render_home_entry(assigns, parent_keys, selected_component)}

{#for {key, value} <- Enum.sort(node),
mod_path = parent_keys ++ [key],
module = Module.concat(mod_path),
component_type = component_type(module),
{has_child_selected?} = {has_child_selected?(mod_path, selected_component)}}
<li :if={component_type != :none}>
<LivePatch
to={"/catalogue/components/#{inspect(module)}"}
class={"has-text-weight-bold": selected_component?(mod_path, selected_component)}
>
<span class="icon">
<i class={component_icon(component_type)} />
</span>
{key}
</LivePatch>
</li>
<li :if={value != %{} && @single_catalogue? && parent_keys == []}>
<a style="cursor: default;">
<span class="icon">
<i class="fa fa-puzzle-piece" />
</span>
Components
</a>
{render_node(assigns, value, selected_component, single_catalogue?, mod_path)}
</li>
<li :if={value != %{} && (!@single_catalogue? || parent_keys != [])}>
<a href="#" onclick="toggleNode(this)">
<span class="icon">
<i class={:far, "fa-folder-open": has_child_selected?, "fa-folder": !has_child_selected?} />
</span>
{key}
</a>
{render_node(assigns, value, selected_component, single_catalogue?, mod_path)}
</li>
{maybe_render_component_entry(
assigns,
module,
mod_path,
selected_component,
component_type,
key,
examples_and_playgrounds
)}

{maybe_render_single_catalog_components_entry(
assigns,
value,
selected_component,
single_catalogue?,
parent_keys,
mod_path,
examples_and_playgrounds
)}

{maybe_render_folder_entry(
assigns,
has_child_selected?,
key,
value,
selected_component,
single_catalogue?,
parent_keys,
mod_path,
examples_and_playgrounds
)}
{/for}
</ul>
"""
end

def maybe_render_home_entry(assigns, parent_keys, selected_component) do
~F"""
<li :if={parent_keys == []}>
<LivePatch to="/catalogue/" class={"has-text-weight-bold": !selected_component}>
<span class="icon">
<i class="fa fa-home" />
</span>
Home
</LivePatch>
</li>
"""
end

def maybe_render_component_entry(
assigns,
module,
mod_path,
selected_component,
component_type,
key,
examples_and_playgrounds
) do
~F"""
<li :if={component_type != :none}>
<LivePatch
to={"/catalogue/components/#{inspect(module)}"}
class={"has-text-weight-bold": selected_component?(mod_path, selected_component)}
>
<span class={:icon, "has-text-success": has_examples_or_playground?(module, examples_and_playgrounds)}>
<i class={component_icon(component_type)} />
</span>
{key}
</LivePatch>
</li>
"""
end

def maybe_render_single_catalog_components_entry(
assigns,
value,
selected_component,
single_catalogue?,
parent_keys,
mod_path,
examples_and_playgrounds
) do
~F"""
<li :if={value != %{} && single_catalogue? && parent_keys == []}>
<a style="cursor: default;">
<span class="icon">
<i class="fa fa-puzzle-piece" />
</span>
Components
</a>
{render_node(
assigns,
value,
selected_component,
single_catalogue?,
mod_path,
examples_and_playgrounds
)}
</li>
"""
end

def maybe_render_folder_entry(
assigns,
has_child_selected?,
key,
value,
selected_component,
single_catalogue?,
parent_keys,
mod_path,
examples_and_playgrounds
) do
~F"""
<li :if={value != %{} && (!single_catalogue? || parent_keys != [])}>
<a href="#" onclick="toggleNode(this)">
<span class="icon">
<i class={:far, "fa-folder-open": has_child_selected?, "fa-folder": !has_child_selected?} />
</span>
{key}
</a>
{render_node(
assigns,
value,
selected_component,
single_catalogue?,
mod_path,
examples_and_playgrounds
)}
</li>
"""
end

defp component_icon(type) do
case type do
Surface.MacroComponent ->
Expand Down Expand Up @@ -111,4 +218,12 @@ defmodule Surface.Catalogue.Components.ComponentTree do
has_child_selected?(parent_keys, selected_component) or
(single_catalogue? and length(parent_keys) == 1)
end

defp has_examples_or_playground?(module, examples_and_playgrounds) do
case examples_and_playgrounds[module] do
%{examples: [_one | _rest]} -> true
%{playgrounds: [_one | _rest]} -> true
_ -> false
end
end
end
1 change: 1 addition & 0 deletions lib/surface/catalogue/live/page_live.ex
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ defmodule Surface.Catalogue.PageLive do
components={@components}
selected_component={@component_name}
single_catalogue?={@single_catalogue?}
examples_and_playgrounds={@examples_and_playgrounds}
/>
<div class="container column" style="background-color: #fff; min-height: 500px;">
<div :if={!@component_module and @home_view}>
Expand Down