openproject-primer_view_components 0.64.1 → 0.66.0

data/app/components/primer/primer.js

@@ -33,3 +33,7 @@ import './open_project/danger_dialog_form_helper';
 import './open_project/collapsible';
 import './open_project/border_box/collapsible_header';
 import './open_project/collapsible_section';
+import './open_project/tree_view/tree_view';
+import './open_project/tree_view/tree_view_icon_pair_element';
+import './open_project/tree_view/tree_view_sub_tree_node_element';
+import './open_project/tree_view/tree_view_include_fragment_element';

data/app/components/primer/primer.pcss

@@ -51,3 +51,5 @@
 @import "./open_project/side_panel/section.pcss";
 @import "./open_project/border_box/collapsible_header.pcss";
 @import "./open_project/collapsible_section.pcss";
+@import "./open_project/skeleton_box.pcss";
+@import "./open_project/tree_view.pcss";

data/app/components/primer/primer.ts

@@ -33,3 +33,7 @@ import './open_project/danger_dialog_form_helper'
 import './open_project/collapsible'
 import './open_project/border_box/collapsible_header'
 import './open_project/collapsible_section'
+import './open_project/tree_view/tree_view'
+import './open_project/tree_view/tree_view_icon_pair_element'
+import './open_project/tree_view/tree_view_sub_tree_node_element'
+import './open_project/tree_view/tree_view_include_fragment_element'

data/app/components/primer/shared_events.d.ts

@@ -3,9 +3,24 @@ export type ItemActivatedEvent = {
     checked: boolean;
     value: string | null;
 };
+export type TreeViewNodeType = 'leaf' | 'sub-tree';
+export type TreeViewCheckedValue = 'true' | 'false' | 'mixed';
+export type TreeViewNodeInfo = {
+    node: Element;
+    type: TreeViewNodeType;
+    path: string[];
+    checkedValue: TreeViewCheckedValue;
+    previousCheckedValue: TreeViewCheckedValue;
+};
 declare global {
     interface HTMLElementEventMap {
         itemActivated: CustomEvent<ItemActivatedEvent>;
         beforeItemActivated: CustomEvent<ItemActivatedEvent>;
+        treeViewNodeActivated: CustomEvent<TreeViewNodeInfo>;
+        treeViewBeforeNodeActivated: CustomEvent<TreeViewNodeInfo>;
+        treeViewNodeExpanded: CustomEvent<TreeViewNodeInfo>;
+        treeViewNodeCollapsed: CustomEvent<TreeViewNodeInfo>;
+        treeViewNodeChecked: CustomEvent<TreeViewNodeInfo[]>;
+        treeViewBeforeNodeChecked: CustomEvent<TreeViewNodeInfo[]>;
     }
 }

data/app/components/primer/shared_events.ts

@@ -4,9 +4,28 @@ export type ItemActivatedEvent = {
   value: string | null
 }
 
+export type TreeViewNodeType = 'leaf' | 'sub-tree'
+export type TreeViewCheckedValue = 'true' | 'false' | 'mixed'
+
+export type TreeViewNodeInfo = {
+  node: Element
+  type: TreeViewNodeType
+  path: string[]
+  checkedValue: TreeViewCheckedValue
+  previousCheckedValue: TreeViewCheckedValue
+}
+
 declare global {
   interface HTMLElementEventMap {
     itemActivated: CustomEvent<ItemActivatedEvent>
     beforeItemActivated: CustomEvent<ItemActivatedEvent>
+
+    treeViewNodeActivated: CustomEvent<TreeViewNodeInfo>
+    treeViewBeforeNodeActivated: CustomEvent<TreeViewNodeInfo>
+    treeViewNodeExpanded: CustomEvent<TreeViewNodeInfo>
+    treeViewNodeCollapsed: CustomEvent<TreeViewNodeInfo>
+
+    treeViewNodeChecked: CustomEvent<TreeViewNodeInfo[]>
+    treeViewBeforeNodeChecked: CustomEvent<TreeViewNodeInfo[]>
   }
 }

data/app/lib/primer/forms/acts_as_component.rb

@@ -8,7 +8,7 @@ module Primer
     module ActsAsComponent
       # :nodoc:
       module InstanceMethods
-        delegate :render, :content_tag, :output_buffer, to: :@view_context
+        delegate :render, :content_tag, :output_buffer, :capture, to: :@view_context
 
         def render_in(view_context, &block)
           @view_context = view_context
@@ -16,17 +16,6 @@ module Primer
           perform_render(&block)
         end
 
-        # This is necessary to restore the functionality changed by https://github.com/rails/rails/pull/47194.
-        # I would love to remove this at some point, perhaps if we ever decide to replace
-        # ActsAsComponent with view component.
-        def capture(*args, &block)
-          old_buffer = @view_context.output_buffer
-          @view_context.output_buffer = ActionView::OutputBuffer.new
-          @view_context.capture(*args, &block)
-        ensure
-          @view_context.output_buffer = old_buffer
-        end
-
         # :nocov:
         def perform_render(&_block)
           raise NotImplementedError, "subclasses must implement ##{__method__}."

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 64
-      PATCH = 1
+      MINOR = 66
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/open_project/file_tree_view_preview/default.html.erb

@@ -0,0 +1,16 @@
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::FileTreeView.new) do |tree_view| %>
+    <% tree_view.with_directory(label: "src", expanded: expanded, select_variant: select_variant) do |dir| %>
+      <% dir.with_trailing_visual_icon(icon: :"diff-modified") %>
+
+      <% dir.with_file(label: "button.rb", select_variant: select_variant) %>
+      <% dir.with_file(label: "icon_button.rb", current: true, select_variant: select_variant) %>
+
+      <% dir.with_directory(label: "tree_view", select_variant: select_variant) do |subdir| %>
+        <% subdir.with_file(label: "sub_tree.rb", select_variant: select_variant) %>
+      <% end %>
+    <% end %>
+
+    <% tree_view.with_file(label: "action_menu.rb", select_variant: select_variant) %>
+  <% end %>
+</div>

data/previews/primer/open_project/file_tree_view_preview/playground.html.erb

@@ -0,0 +1,4 @@
+<% data = TreeViewItemsController::TREE %>
+<%= render(Primer::OpenProject::FileTreeView.new) do |tree| %>
+  <% populate.call(tree, data, { select_variant: select_variant, expanded: expanded }) %>
+<% end %>

data/previews/primer/open_project/file_tree_view_preview.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label FileTreeView
+    class FileTreeViewPreview < ViewComponent::Preview
+      # @label Default
+      #
+      # @snapshot interactive
+      # @param expanded [Boolean] toggle
+      # @param select_variant [Symbol] select [multiple, none]
+      def default(expanded: false, select_variant: :none)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded),
+          select_variant: select_variant.to_sym
+        })
+      end
+
+      # @label Playground
+      #
+      # @param expanded [Boolean] toggle
+      # @param select_variant [Symbol] select [multiple, none]
+      def playground(expanded: false, select_variant: :none)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded),
+          select_variant: select_variant.to_sym,
+          populate: -> (*args) { populate(*args) }
+        })
+      end
+
+      private
+
+      def coerce_bool(value)
+        case value
+        when true, false
+          value
+        when "true"
+          true
+        when "false"
+          false
+        else
+          false
+        end
+      end
+
+      def populate(node, data, node_arguments)
+        return unless data
+
+        entries = (
+          data.fetch("children", {}).keys.map { |label, idx| [label, :directory] } +
+          data.fetch("files", []).map { |label| [label, :file] }
+        )
+
+        entries.sort_by!(&:first)
+
+        entries.each do |label, kind, idx|
+          case kind
+          when :directory
+            node.with_directory(label: label, **node_arguments) do |sub_tree|
+              populate(sub_tree, data["children"][label], node_arguments)
+            end
+          when :file
+            node.with_file(label: label, **node_arguments)
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/open_project/page_header_preview/create_action.html.erb

@@ -13,8 +13,7 @@
       "Filter"
     end
 
-    component.with_action_button(scheme: :primary) do |button|
-      button.with_leading_visual_icon(icon: :plus)
+    component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
       "User"
     end
   end

data/previews/primer/open_project/skeleton_box_preview.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label SkeletonBox
+    class SkeletonBoxPreview < ViewComponent::Preview
+      # @label Default
+      def default
+        render(Primer::OpenProject::SkeletonBox.new(width: "64px", height: "64px"))
+      end
+
+      # @label Playground
+      # @param width text
+      # @param height text
+      def playground(width: "64px", height: "64px")
+        render(Primer::OpenProject::SkeletonBox.new(width: width, height: height))
+      end
+    end
+  end
+end

data/previews/primer/open_project/sub_header_preview/action_menu_buttons.html.erb

@@ -1,15 +1,12 @@
 <%= render(Primer::OpenProject::SubHeader.new) do |component| %>
   <% component.with_filter_input(name: "filter", label: "Filter") %>
 
-  <% component.with_action_component do %>
-    <%= render Primer::Alpha::ActionMenu.new(menu_id: "menu-1") do |menu|
-      menu.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu")
-      menu.with_item(label: "Subitem 1") do |item|
-        item.with_leading_visual_icon(icon: :paste)
-      end
-      menu.with_item(label: "Subitem 2") do |item|
-        item.with_leading_visual_icon(icon: :log)
-      end
-    end %>
+  <% component.with_action_menu(leading_icon: :plus, trailing_icon: :"triangle-down", label: "Create", button_arguments: { scheme: :primary, "aria-label": "Menu"}) do |menu| %>
+    <%= menu.with_item(label: "Subitem 1") do |item|
+          item.with_leading_visual_icon(icon: :paste)
+        end
+        menu.with_item(label: "Subitem 2") do |item|
+          item.with_leading_visual_icon(icon: :log)
+        end %>
   <% end %>
 <% end %>

data/previews/primer/open_project/sub_header_preview/button_group.html.erb

@@ -1,11 +1,17 @@
 <%= render(Primer::OpenProject::SubHeader.new) do |component| %>
   <% component.with_filter_input(name: "filter", label: "Filter") %>
 
-  <% component.with_action_component do %>
-    <%= render(Primer::Beta::ButtonGroup.new) do |group|
-      group.with_button { "Button 1" }
-      group.with_button { "Button 2" }
-      group.with_button { "Button 3" }
-    end %>
-  <% end %>
+  <% component.with_action_button_group do |group|
+    group.with_button(icon: :note, "aria-label": "Button 1")
+    group.with_button(icon: :rows, "aria-label": "Button 2")
+    group.with_button(icon: "sort-desc", "aria-label": "Button 3")
+  end %>
+
+  <% component.with_action_button(icon_only: true, leading_icon: :star, label: "Star") do
+    "Star"
+  end %>
+
+  <% component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
+    "Create"
+  end %>
 <% end %>

data/previews/primer/open_project/sub_header_preview/custom_filter_button.html.erb

@@ -3,6 +3,6 @@
   <% component.with_filter_component do %>
     <!-- Render any custom filter component that you want -->
     <!-- Note, that you can pass an ID for the bottom pane if you need to access that area for further filter actions-->
-    <%= render(Primer::Beta::IconButton.new(icon: "filter", "aria-label": "Filter")) %>
+    <%= render(Primer::Beta::IconButton.new(icon: "filter-remove", "aria-label": "Filter")) %>
   <% end %>
 <% end %>

data/previews/primer/open_project/sub_header_preview/dialog_buttons.html.erb

@@ -1,12 +1,13 @@
 <%= render(Primer::OpenProject::SubHeader.new) do |component| %>
   <% component.with_filter_input(name: "filter", label: "Filter") %>
 
-  <% component.with_action_component do %>
-    <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: "Dialog")) do |d| %>
-      <% d.with_show_button { "Show Dialog" } %>
-      <% d.with_body do %>
-        Hello world!
-      <% end %>
-    <% end %>
-  <% end %>
+  <% component.with_text { "Only async dialogs are supported in the SubHeader!" } %>
+
+  <% component.with_action_button(leading_icon: :alert,
+                                  label: "Open Dialog",
+                                  #tag: :a,
+                                  #href: "show_dialog_path",
+                                  data: { controller: "async-dialog" }) do
+    "Open Dialog"
+  end %>
 <% end %>

data/previews/primer/open_project/sub_header_preview.rb

@@ -35,9 +35,8 @@ module Primer
 
           component.with_text { text } unless text.nil?
 
-          component.with_action_button(scheme: :primary) do |button|
-              button.with_leading_visual_icon(icon: :plus)
-              "Create"
+          component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
+            "Create"
           end if show_action_button
         end
       end
@@ -51,8 +50,7 @@ module Primer
             "Filter"
           end
 
-          component.with_action_button(scheme: :primary)  do |button|
-            button.with_leading_visual_icon(icon: :plus)
+          component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
             "Create"
           end
         end
@@ -64,6 +62,9 @@ module Primer
       end
 
       # @label With Dialog
+      # Only async dialogs are supported in the SubHeader.
+      # Since we duplicate the buttons for mobile purposes,
+      # the dialog would otherwise be duplicated (with the same ID) as well
       def dialog_buttons
         render_with_template(locals: {})
       end
@@ -78,6 +79,25 @@ module Primer
         render_with_template(locals: {})
       end
 
+      # @label With SegmentedControl
+      def segmented_control
+        render(Primer::OpenProject::SubHeader.new) do |component|
+          component.with_filter_button do |button|
+            button.with_trailing_visual_counter(count: "15")
+            "Filter"
+          end
+
+          component.with_segmented_control("aria-label": "Segmented control") do |control|
+            control.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
+            control.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
+          end
+
+          component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
+            "Create"
+          end
+        end
+      end
+
       # @label With a custom area below
       def bottom_pane
         render_with_template(locals: {})
@@ -90,8 +110,7 @@ module Primer
 
           component.with_text { "Hello world!" }
 
-          component.with_action_button(scheme: :primary)  do |button|
-            button.with_leading_visual_icon(icon: :plus)
+          component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
             "Create"
           end
         end

data/previews/primer/open_project/tree_view_preview/default.html.erb

@@ -0,0 +1,24 @@
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, select_strategy: select_strategy) do |sub_tree| %>
+      <% sub_tree.with_leading_visual_icons(label: "Foobar") do |icons| %>
+        <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+
+      <% sub_tree.with_trailing_visual_icon(icon: :"diff-modified") %>
+
+      <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant) do |item| %>
+        <% item.with_leading_visual_icon(icon: :file) %>
+      <% end %>
+
+      <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant) do |item| %>
+        <% item.with_leading_visual_icon(icon: :file) %>
+      <% end %>
+    <% end %>
+
+    <% tree_view.with_leaf(label: "action_menu.rb", select_variant: select_variant) do |item| %>
+      <% item.with_leading_visual_icon(icon: :file) %>
+    <% end %>
+  <% end %>
+</div>

data/previews/primer/open_project/tree_view_preview/empty.html.erb

@@ -0,0 +1,10 @@
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "src") do |sub_tree| %>
+      <% sub_tree.with_leading_visual_icons do |icons| %>
+        <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/previews/primer/open_project/tree_view_preview/leaf_node_playground.html.erb

@@ -0,0 +1,15 @@
+<%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+  <% tree.with_leaf(label: label, select_variant: select_variant) do |node| %>
+    <% if leading_visual_icon && leading_visual_icon != :none %>
+      <% node.with_leading_visual_icon(icon: leading_visual_icon) %>
+    <% end %>
+
+    <% if trailing_visual_icon && trailing_visual_icon != :none %>
+      <% node.with_trailing_visual_icon(icon: trailing_visual_icon) %>
+    <% end %>
+
+    <% if leading_action_icon && leading_action_icon != :none %>
+      <% node.with_leading_action_button(icon: leading_action_icon, aria: { label: "Leading action icon" }) %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/tree_view_preview/loading_failure.html.erb

@@ -0,0 +1,36 @@
+<% subject_id = SecureRandom.hex %>
+
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::TreeView.new(data: { interaction_subject: subject_id })) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "primer") do |sub_tree| %>
+      <% sub_tree.with_leading_visual_icons do |icons| %>
+        <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+
+      <% sub_tree.with_loading_spinner(src: tree_view_items_path(loader: "spinner", fail: true)) %>
+    <% end %>
+  <% end %>
+</div>
+
+<script>
+  function ready(fn) {
+    if (document.readyState !== 'loading') {
+      fn()
+    } else {
+      document.addEventListener('DOMContentLoaded', fn)
+    }
+  }
+
+  ready(() => {
+    const subject = document.querySelector("[data-interaction-subject='<%= subject_id %>']")
+    if (!subject) return
+
+    const includeFragment = subject.querySelector('tree-view-include-fragment')
+    if (!includeFragment) return
+
+    includeFragment.addEventListener('loadend', (event) => {
+      subject.setAttribute('data-ready', 'true')
+    })
+  })
+</script>

data/previews/primer/open_project/tree_view_preview/loading_skeleton.html.erb

@@ -0,0 +1,12 @@
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "primer") do |sub_tree| %>
+      <% sub_tree.with_leading_visual_icons do |icons| %>
+        <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+
+      <% sub_tree.with_loading_skeleton(src: tree_view_items_path(loader: "skeleton", fail: simulate_failure, empty: simulate_empty)) %>
+    <% end %>
+  <% end %>
+</div>

data/previews/primer/open_project/tree_view_preview/loading_spinner.html.erb

@@ -0,0 +1,12 @@
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "primer") do |sub_tree| %>
+      <% sub_tree.with_leading_visual_icons do |icons| %>
+        <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+
+      <% sub_tree.with_loading_spinner(src: tree_view_items_path(loader: "spinner", fail: simulate_failure, empty: simulate_empty)) %>
+    <% end %>
+  <% end %>
+</div>

data/previews/primer/open_project/tree_view_preview/playground.html.erb

@@ -0,0 +1,4 @@
+<% data = TreeViewItemsController::TREE %>
+<%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+  <% populate.call(tree, data, { select_variant: select_variant, select_strategy: select_strategy, expanded: expanded }) %>
+<% end %>

data/previews/primer/open_project/tree_view_preview.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label TreeView
+    class TreeViewPreview < ViewComponent::Preview
+      # @label Default
+      #
+      # @snapshot interactive
+      # @param expanded [Boolean] toggle
+      # @param select_variant [Symbol] select [multiple, none]
+      # @param select_strategy [Symbol] select [self, descendants]
+      def default(expanded: false, select_variant: :none, select_strategy: :descendants)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded),
+          select_variant: select_variant.to_sym,
+          select_strategy: select_strategy.to_sym
+        })
+      end
+
+      # @label Playground
+      #
+      # @param expanded [Boolean] toggle
+      # @param select_variant [Symbol] select [multiple, none]
+      # @param select_strategy [Symbol] select [self, descendants]
+      def playground(expanded: false, select_variant: :none, select_strategy: :descendants)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded),
+          select_variant: select_variant.to_sym,
+          select_strategy: select_strategy.to_sym,
+          populate: -> (*args) { populate(*args) }
+        })
+      end
+
+      # @label Empty
+      #
+      # @snapshot interactive
+      def empty
+      end
+
+      # @label Loading failure
+      #
+      # @snapshot interactive
+      def loading_failure
+      end
+
+      # @label Loading spinner
+      #
+      # @snapshot interactive
+      # @param simulate_failure [Boolean] toggle
+      # @param simulate_empty [Boolean] toggle
+      def loading_spinner(simulate_failure: false, simulate_empty: false)
+        render_with_template(locals: {
+          simulate_failure: coerce_bool(simulate_failure),
+          simulate_empty: coerce_bool(simulate_empty),
+        })
+      end
+
+      # @label Loading skeleton
+      #
+      # @snapshot interactive
+      # @param simulate_failure [Boolean] toggle
+      # @param simulate_empty [Boolean] toggle
+      def loading_skeleton(simulate_failure: false, simulate_empty: false)
+        render_with_template(locals: {
+          simulate_failure: coerce_bool(simulate_failure),
+          simulate_empty: coerce_bool(simulate_empty)
+        })
+      end
+
+      # @label Leaf node playground
+      #
+      # @param label [String] text
+      # @param leading_visual_icon [Symbol] octicon
+      # @param leading_action_icon [Symbol] octicon
+      # @param trailing_visual_icon [Symbol] octicon
+      # @param select_variant [Symbol] select [multiple, none]
+      def leaf_node_playground(
+        label: "Leaf node",
+        leading_visual_icon: nil,
+        leading_action_icon: nil,
+        trailing_visual_icon: nil,
+        select_variant: :none
+      )
+        render_with_template(locals: {
+          label: label,
+          leading_visual_icon: leading_visual_icon,
+          leading_action_icon: leading_action_icon,
+          trailing_visual_icon: trailing_visual_icon,
+          select_variant: select_variant.to_sym
+        })
+      end
+
+      private
+
+      def coerce_bool(value)
+        case value
+        when true, false
+          value
+        when "true"
+          true
+        when "false"
+          false
+        else
+          false
+        end
+      end
+
+      def populate(node, data, node_arguments)
+        return unless data
+
+        entries = (
+          data.fetch("children", {}).keys.map { |label, idx| [label, :directory] } +
+          data.fetch("files", []).map { |label| [label, :file] }
+        )
+
+        entries.sort_by!(&:first)
+
+        entries.each do |label, kind, idx|
+          case kind
+          when :directory
+            node.with_sub_tree(label: label, **node_arguments) do |sub_tree|
+              sub_tree.with_leading_visual_icons do |icons|
+                icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent)
+                icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent)
+              end
+
+              populate(sub_tree, data["children"][label], node_arguments)
+            end
+          when :file
+            node.with_leaf(label: label, **node_arguments) do |leaf|
+              leaf.with_leading_visual_icon(icon: :file)
+            end
+          end
+        end
+      end
+    end
+  end
+end