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.

Sign up for GitHub

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

AddComponentTreeColorToEntriesWithExamplesOrPlayground #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
47aeae5
Adding green color to tree entries that have examples or playground t…
noozo Dec 15, 2023
25a4e92
Formatting
noozo Dec 15, 2023
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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