Skip to content

Commit 47aeae5

Browse files
noozonoozo
committed
Adding green color to tree entries that have examples or playground to make it easier to track which components are covered in the catalogue
1 parent 371c576 commit 47aeae5

File tree

3 files changed

+77
-39
lines changed

3 files changed

+77
-39
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,4 @@ node_modules
3434
# Ignore Surface generated files
3535
assets/js/_hooks/
3636
assets/css/_components.css
37+
assets/css/_variants.js

‎lib/surface/catalogue/components/component_tree.ex

Lines changed: 75 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -8,68 +8,96 @@ defmodule Surface.Catalogue.Components.ComponentTree do
88
prop selected_component, :string
99
prop single_catalogue?, :boolean
1010
prop components, :map
11+
prop examples_and_playgrounds, :map
1112

1213
def render(assigns) do
1314
~F"""
1415
<aside
1516
class="section column is-narrow is-narrow-mobile is-fullheight is-hidden-mobile"
1617
style="background-color: #f5f5f5; min-width: 270px;"
1718
>
18-
{render_node(assigns, @components, @selected_component, @single_catalogue?)}
19+
{render_node(assigns, @components, @selected_component, @single_catalogue?, @examples_and_playgrounds)}
1920
</aside>
2021
"""
2122
end
2223

23-
def render_node(assigns, node, selected_component, single_catalogue?, parent_keys \\ []) do
24+
def render_node(assigns, node, selected_component, single_catalogue?, parent_keys \\ [], examples_and_playgrounds) do
2425
~F"""
2526
<ul class={"menu-list", "is-hidden": !show_nodes?(parent_keys, selected_component, single_catalogue?)}>
26-
<li :if={parent_keys == []}>
27-
<LivePatch to="/catalogue/" class={"has-text-weight-bold": !selected_component}>
28-
<span class="icon">
29-
<i class="fa fa-home" />
30-
</span>
31-
Home
32-
</LivePatch>
33-
</li>
27+
{maybe_render_home_entry(assigns, parent_keys, selected_component)}
28+
3429
{#for {key, value} <- Enum.sort(node),
3530
mod_path = parent_keys ++ [key],
3631
module = Module.concat(mod_path),
3732
component_type = component_type(module),
3833
{has_child_selected?} = {has_child_selected?(mod_path, selected_component)}}
39-
<li :if={component_type != :none}>
40-
<LivePatch
41-
to={"/catalogue/components/#{inspect(module)}"}
42-
class={"has-text-weight-bold": selected_component?(mod_path, selected_component)}
43-
>
44-
<span class="icon">
45-
<i class={component_icon(component_type)} />
46-
</span>
47-
{key}
48-
</LivePatch>
49-
</li>
50-
<li :if={value != %{} && @single_catalogue? && parent_keys == []}>
51-
<a style="cursor: default;">
52-
<span class="icon">
53-
<i class="fa fa-puzzle-piece" />
54-
</span>
55-
Components
56-
</a>
57-
{render_node(assigns, value, selected_component, single_catalogue?, mod_path)}
58-
</li>
59-
<li :if={value != %{} && (!@single_catalogue? || parent_keys != [])}>
60-
<a href="#" onclick="toggleNode(this)">
61-
<span class="icon">
62-
<i class={:far, "fa-folder-open": has_child_selected?, "fa-folder": !has_child_selected?} />
63-
</span>
64-
{key}
65-
</a>
66-
{render_node(assigns, value, selected_component, single_catalogue?, mod_path)}
67-
</li>
34+
{maybe_render_component_entry(assigns, module, mod_path, selected_component, component_type, key, examples_and_playgrounds)}
35+
36+
{maybe_render_single_catalog_components_entry(assigns, value, selected_component, single_catalogue?, parent_keys, mod_path, examples_and_playgrounds)}
37+
38+
{maybe_render_folder_entry(assigns, has_child_selected?, key, value, selected_component, single_catalogue?, parent_keys, mod_path, examples_and_playgrounds)}
6839
{/for}
6940
</ul>
7041
"""
7142
end
7243

44+
def maybe_render_home_entry(assigns, parent_keys, selected_component) do
45+
~F"""
46+
<li :if={parent_keys == []}>
47+
<LivePatch to="/catalogue/" class={"has-text-weight-bold": !selected_component}>
48+
<span class="icon">
49+
<i class="fa fa-home" />
50+
</span>
51+
Home
52+
</LivePatch>
53+
</li>
54+
"""
55+
end
56+
57+
def maybe_render_component_entry(assigns, module, mod_path, selected_component, component_type, key, examples_and_playgrounds) do
58+
~F"""
59+
<li :if={component_type != :none}>
60+
<LivePatch
61+
to={"/catalogue/components/#{inspect(module)}"}
62+
class={"has-text-weight-bold": selected_component?(mod_path, selected_component)}
63+
>
64+
<span class={:icon, "has-text-success": has_examples_or_playground?(module, examples_and_playgrounds)}>
65+
<i class={component_icon(component_type)} />
66+
</span>
67+
{key}
68+
</LivePatch>
69+
</li>
70+
"""
71+
end
72+
73+
def maybe_render_single_catalog_components_entry(assigns, value, selected_component, single_catalogue?, parent_keys, mod_path, examples_and_playgrounds) do
74+
~F"""
75+
<li :if={value != %{} && single_catalogue? && parent_keys == []}>
76+
<a style="cursor: default;">
77+
<span class="icon">
78+
<i class="fa fa-puzzle-piece" />
79+
</span>
80+
Components
81+
</a>
82+
{render_node(assigns, value, selected_component, single_catalogue?, mod_path, examples_and_playgrounds)}
83+
</li>
84+
"""
85+
end
86+
87+
def maybe_render_folder_entry(assigns, has_child_selected?, key, value, selected_component, single_catalogue?, parent_keys, mod_path, examples_and_playgrounds) do
88+
~F"""
89+
<li :if={value != %{} && (!single_catalogue? || parent_keys != [])}>
90+
<a href="#" onclick="toggleNode(this)">
91+
<span class="icon">
92+
<i class={:far, "fa-folder-open": has_child_selected?, "fa-folder": !has_child_selected?} />
93+
</span>
94+
{key}
95+
</a>
96+
{render_node(assigns, value, selected_component, single_catalogue?, mod_path, examples_and_playgrounds)}
97+
</li>
98+
"""
99+
end
100+
73101
defp component_icon(type) do
74102
case type do
75103
Surface.MacroComponent ->
@@ -111,4 +139,12 @@ defmodule Surface.Catalogue.Components.ComponentTree do
111139
has_child_selected?(parent_keys, selected_component) or
112140
(single_catalogue? and length(parent_keys) == 1)
113141
end
142+
143+
defp has_examples_or_playground?(module, examples_and_playgrounds) do
144+
case examples_and_playgrounds[module] do
145+
%{examples: [_one | _rest]} -> true
146+
%{playgrounds: [_one | _rest]} -> true
147+
_ -> false
148+
end
149+
end
114150
end

‎lib/surface/catalogue/live/page_live.ex

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ defmodule Surface.Catalogue.PageLive do
8181
components={@components}
8282
selected_component={@component_name}
8383
single_catalogue?={@single_catalogue?}
84+
examples_and_playgrounds={@examples_and_playgrounds}
8485
/>
8586
<div class="container column" style="background-color: #fff; min-height: 500px;">
8687
<div :if={!@component_module and @home_view}>

0 commit comments

Comments
 (0)