openproject-primer_view_components 0.70.5 → 0.72.0

data/app/lib/primer/forms/dsl/text_field_input.rb

@@ -41,6 +41,8 @@ module Primer
           add_input_data(:target, "primer-text-field.inputElement #{system_arguments.dig(:data, :target) || ''}")
           add_input_classes("FormControl-inset") if inset?
           add_input_classes("FormControl-monospace") if monospace?
+
+          yield(self) if block_given?
         end
 
         alias show_clear_button? show_clear_button

data/app/views/primer/view_components/tree_view_items/async_alpha.html_fragment.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::TreeView::SubTree.new(path: ["primer"], node_variant: :div)) do |tree| %>
+<%= render(Primer::Alpha::TreeView::SubTree.new(path: ["primer"], node_variant: :div)) do |tree| %>
   <% tree.with_sub_tree(label: "alpha") do |sub_tree| %>
     <% sub_tree.with_leading_visual_icons do |icons| %>
       <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>

data/app/views/primer/view_components/tree_view_items/index.html_fragment.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::TreeView::SubTree.new(path: path, select_variant: select_variant, node_variant: :div)) do |tree| %>
+<%= render(Primer::Alpha::TreeView::SubTree.new(path: path, select_variant: select_variant, node_variant: :div)) do |tree| %>
   <% next if params[:empty] == "true" %>
   <% entries.each do |label, type| %>
     <% case type %>

data/config/locales/en.yml

@@ -0,0 +1,20 @@
+en:
+  button_back: "Back"
+  button_cancel: "Cancel"
+  button_close: "Close"
+  button_delete: "Delete"
+  button_delete_permanently: "Delete permanently"
+  button_filter: "Filter"
+  button_save: "Save"
+
+  filterable_tree_view:
+    filter_mode:
+      all: "All"
+      label: "Filter mode"
+      selected: "Selected"
+    include_sub_items: "Include sub-items"
+    no_results_text: "No results"
+
+  label_title: "Title"
+  label_loading: "Loading..."
+  label_more: "More"

data/lib/primer/view_components/version.rb

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

data/previews/primer/{open_project → alpha}/file_tree_view_preview/default.html.erb

@@ -1,5 +1,5 @@
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::FileTreeView.new) do |tree_view| %>
+  <%= render(Primer::Alpha::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") %>
 

data/previews/primer/{open_project → alpha}/file_tree_view_preview/playground.html.erb

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

data/previews/primer/{open_project → alpha}/file_tree_view_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     # @label FileTreeView
     class FileTreeViewPreview < ViewComponent::Preview
       # @label Default

data/previews/primer/{open_project → alpha}/skeleton_box_preview.rb

@@ -1,19 +1,19 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     # @label SkeletonBox
     class SkeletonBoxPreview < ViewComponent::Preview
       # @label Default
       def default
-        render(Primer::OpenProject::SkeletonBox.new(width: "64px", height: "64px"))
+        render(Primer::Alpha::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))
+        render(Primer::Alpha::SkeletonBox.new(width: width, height: height))
       end
     end
   end

data/previews/primer/{open_project → alpha}/tree_view_preview/async_alpha.html.erb

@@ -1,5 +1,5 @@
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+  <%= render(Primer::Alpha::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) %>

data/previews/primer/{open_project → alpha}/tree_view_preview/buttons.html.erb

@@ -1,10 +1,10 @@
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::TreeView.new(node_variant: :button)) do |tree_view| %>
-    <% tree_view.with_sub_tree(label: "Secrets", expanded: expanded, onclick: "alert('Shhhh')") do |sub_tree| %>
-      <% sub_tree.with_leaf(label: "Life and the universe", onclick: "alert(42)") %>
-      <% sub_tree.with_leaf(label: "Secret ingredient", onclick: "alert('Love')") %>
+  <%= render(Primer::Alpha::TreeView.new(node_variant: :button)) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "Secrets", expanded: expanded, onclick: "alert('Shhhh')", disabled: disabled) do |sub_tree| %>
+      <% sub_tree.with_leaf(label: "Life and the universe", onclick: "alert(42)", disabled: disabled) %>
+      <% sub_tree.with_leaf(label: "Secret ingredient", onclick: "alert('Love')", disabled: disabled) %>
     <% end %>
 
-    <% tree_view.with_leaf(label: "What do you give a sick bird?", onclick: "alert('Tweetment')") %>
+    <% tree_view.with_leaf(label: "What do you give a sick bird?", onclick: "alert('Tweetment')", disabled: disabled) %>
   <% end %>
 </div>

data/previews/primer/{open_project → alpha}/tree_view_preview/default.html.erb

@@ -1,6 +1,6 @@
 <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| %>
+  <%= render(Primer::Alpha::TreeView.new) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "src", expanded: expanded, disabled: disabled, 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) %>
@@ -8,16 +8,16 @@
 
       <% sub_tree.with_trailing_visual_icon(icon: :"diff-modified") %>
 
-      <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant) do |item| %>
+      <% sub_tree.with_leaf(label: "button.rb", disabled: disabled, 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| %>
+      <% sub_tree.with_leaf(label: "icon_button.rb", current: true, disabled: disabled, 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| %>
+    <% tree_view.with_leaf(label: "action_menu.rb", disabled: disabled, select_variant: select_variant) do |item| %>
       <% item.with_leading_visual_icon(icon: :file) %>
     <% end %>
   <% end %>

data/previews/primer/{open_project → alpha}/tree_view_preview/empty.html.erb

@@ -1,5 +1,5 @@
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+  <%= render(Primer::Alpha::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) %>

data/previews/primer/alpha/tree_view_preview/form_input.html.erb

@@ -0,0 +1,14 @@
+<%= form_with(url: primer_view_components.generic_form_submission_path(format: :json)) do |f| %>
+  <%= render(Primer::Alpha::Stack.new) do %>
+    <%= render(Primer::Alpha::TreeView.new(form_arguments: { builder: f, name: "folder_structure" })) do |tree| %>
+      <% tree.with_sub_tree(label: "src", expanded: expanded, select_variant: :multiple, value: 0) do |sub_tree| %>
+        <% sub_tree.with_leaf(label: "button.rb", select_variant: :multiple, value: 1) %>
+        <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: :multiple, value: 2) %>
+      <% end %>
+
+      <% tree.with_leaf(label: "action_menu.rb", select_variant: :multiple, value: 3) %>
+    <% end %>
+
+    <%= render(Primer::Alpha::SubmitButton.new(name: :submit, label: "Submit")) %>
+  <% end %>
+<% end %>

data/previews/primer/{open_project → alpha}/tree_view_preview/leaf_node_playground.html.erb

@@ -1,5 +1,5 @@
-<%= render(Primer::OpenProject::TreeView.new) do |tree| %>
-  <% tree.with_leaf(label: label, select_variant: select_variant) do |node| %>
+<%= render(Primer::Alpha::TreeView.new) do |tree| %>
+  <% tree.with_leaf(label: label, select_variant: select_variant, disabled: disabled) do |node| %>
     <% if leading_visual_icon && leading_visual_icon != :none %>
       <% node.with_leading_visual_icon(icon: leading_visual_icon) %>
     <% end %>

data/previews/primer/{open_project → alpha}/tree_view_preview/links.html.erb

@@ -1,16 +1,16 @@
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::TreeView.new(node_variant: :anchor)) do |tree_view| %>
-    <% tree_view.with_sub_tree(label: "Cloud Services", href: "https://en.wikipedia.org/wiki/Cloud_computing", target: "blank", expanded: expanded) do |sub_tree| %>
-      <% sub_tree.with_leaf(label: "OpenProject", href: "https://www.openproject.org", target: "blank") do |node| %>
+  <%= render(Primer::Alpha::TreeView.new(node_variant: :anchor)) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "Cloud Services", href: "https://en.wikipedia.org/wiki/Cloud_computing", target: "blank", expanded: expanded, disabled: disabled) do |sub_tree| %>
+      <% sub_tree.with_leaf(label: "OpenProject", href: "https://www.openproject.org", target: "blank", disabled: disabled) do |node| %>
         <% node.with_trailing_visual_icon(icon: :"link-external") %>
       <% end %>
 
-      <% sub_tree.with_leaf(label: "Hetzner", href: "https://www.hetzner.com", target: "blank") do |node| %>
+      <% sub_tree.with_leaf(label: "Hetzner", href: "https://www.hetzner.com", target: "blank", disabled: disabled) do |node| %>
         <% node.with_trailing_visual_icon(icon: :"link-external") %>
       <% end %>
     <% end %>
 
-    <% tree_view.with_leaf(label: "GitHub", href: "https://github.com", target: "blank") do |node| %>
+    <% tree_view.with_leaf(label: "GitHub", href: "https://github.com", target: "blank", disabled: disabled) do |node| %>
       <% node.with_trailing_visual_icon(icon: :"link-external") %>
     <% end %>
   <% end %>

data/previews/primer/{open_project → alpha}/tree_view_preview/loading_failure.html.erb

@@ -1,7 +1,7 @@
 <% subject_id = SecureRandom.hex %>
 
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::TreeView.new(data: { interaction_subject: subject_id })) do |tree_view| %>
+  <%= render(Primer::Alpha::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) %>

data/previews/primer/{open_project → alpha}/tree_view_preview/loading_skeleton.html.erb

@@ -1,5 +1,5 @@
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+  <%= render(Primer::Alpha::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) %>

data/previews/primer/{open_project → alpha}/tree_view_preview/loading_spinner.html.erb

@@ -1,5 +1,5 @@
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+  <%= render(Primer::Alpha::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) %>

data/previews/primer/{open_project → alpha}/tree_view_preview/playground.html.erb

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

data/previews/primer/{open_project → alpha}/tree_view_preview.rb

@@ -1,22 +1,25 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     # @label TreeView
     class TreeViewPreview < ViewComponent::Preview
       # @label Default
       #
       # @snapshot interactive
       # @param expanded [Boolean] toggle
+      # @param disabled [Boolean] toggle
       # @param select_variant [Symbol] select [multiple, none]
-      # @param select_strategy [Symbol] select [self, descendants]
+      # @param select_strategy [Symbol] select [self, descendants, mixed_descendants]
       def default(
         expanded: false,
-        select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT,
-        select_strategy: Primer::OpenProject::TreeView::SubTreeNode::DEFAULT_SELECT_STRATEGY
+        disabled: false,
+        select_variant: Primer::Alpha::TreeView::Node::DEFAULT_SELECT_VARIANT,
+        select_strategy: Primer::Alpha::TreeView::SubTreeNode::DEFAULT_SELECT_STRATEGY
       )
         render_with_template(locals: {
           expanded: coerce_bool(expanded),
+          disabled: coerce_bool(disabled),
           select_variant: select_variant.to_sym,
           select_strategy: select_strategy.to_sym
         })
@@ -26,11 +29,11 @@ module Primer
       #
       # @param expanded [Boolean] toggle
       # @param select_variant [Symbol] select [multiple, none]
-      # @param select_strategy [Symbol] select [self, descendants]
+      # @param select_strategy [Symbol] select [self, descendants, mixed_descendants]
       def playground(
         expanded: false,
-        select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT,
-        select_strategy: Primer::OpenProject::TreeView::SubTreeNode::DEFAULT_SELECT_STRATEGY
+        select_variant: Primer::Alpha::TreeView::Node::DEFAULT_SELECT_VARIANT,
+        select_strategy: Primer::Alpha::TreeView::SubTreeNode::DEFAULT_SELECT_STRATEGY
       )
         render_with_template(locals: {
           expanded: coerce_bool(expanded),
@@ -92,44 +95,51 @@ module Primer
       # @param leading_action_icon [Symbol] octicon
       # @param trailing_visual_icon [Symbol] octicon
       # @param select_variant [Symbol] select [multiple, none]
+      # @param disabled [Boolean] toggle
       def leaf_node_playground(
         label: "Leaf node",
         leading_visual_icon: nil,
         leading_action_icon: nil,
         trailing_visual_icon: nil,
-        select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT
+        select_variant: Primer::Alpha::TreeView::Node::DEFAULT_SELECT_VARIANT,
+        disabled: false
       )
         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
+          select_variant: select_variant.to_sym,
+          disabled: disabled
         })
       end
 
       # @label Links
       #
       # @param expanded [Boolean] toggle
-      def links(expanded: false)
+      # @param disabled [Boolean] toggle
+      def links(expanded: false, disabled: false)
         render_with_template(locals: {
-          expanded: coerce_bool(expanded)
+          expanded: coerce_bool(expanded),
+          disabled: coerce_bool(disabled)
         })
       end
 
       # @label Buttons
       #
       # @param expanded [Boolean] toggle
-      def buttons(expanded: false)
+      # @param disabled [Boolean] toggle
+      def buttons(expanded: false, disabled: false)
         render_with_template(locals: {
-          expanded: coerce_bool(expanded)
+          expanded: coerce_bool(expanded),
+          disabled: coerce_bool(disabled)
         })
       end
 
       # @label Auto expansion
       #
       def auto_expansion
-        render(Primer::OpenProject::TreeView.new) do |tree|
+        render(Primer::Alpha::TreeView.new) do |tree|
           tree.with_sub_tree(label: "Level 1") do |level1|
             level1.with_sub_tree(label: "Level 2") do |level2|
               # marking this node as expanded should automatically expand all ancestors
@@ -141,6 +151,15 @@ module Primer
         end
       end
 
+      # @label Form input
+      #
+      # @param expanded [Boolean] toggle
+      def form_input(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
       private
 
       def coerce_bool(value)
@@ -161,7 +180,7 @@ module Primer
 
         entries = (
           data.fetch("children", {}).keys.map { |label, idx| [label, :directory] } +
-          data.fetch("files", []).map { |label| [label, :file] }
+            data.fetch("files", []).map { |label| [label, :file] }
         )
 
         entries.sort_by!(&:first)

data/previews/primer/open_project/filterable_tree_view_preview/_custom_select_js.html.erb

@@ -0,0 +1,62 @@
+<script>
+  function ready(fn) {
+    if (document.readyState !== 'loading') {
+      fn()
+    } else {
+      document.addEventListener('DOMContentLoaded', fn)
+    }
+  }
+
+  ready(() => {
+      const filterableTreeView = document.querySelector('filterable-tree-view')
+      filterableTreeView.filterFn = (node, query, filterMode) => {
+          const ranges = []
+
+          if (query.length > 0) {
+              const lowercaseQuery = query.toLowerCase()
+              const treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT)
+              let currentNode = treeWalker.nextNode()
+
+              while (currentNode) {
+                  const lowercaseNodeText = currentNode.textContent?.toLocaleLowerCase() || ''
+                  let startIndex = 0
+
+                  while (startIndex < lowercaseNodeText.length) {
+                      const index = lowercaseNodeText.indexOf(lowercaseQuery, startIndex)
+                      if (index === -1) break
+
+                      const range = new Range()
+                      range.setStart(currentNode, index)
+                      range.setEnd(currentNode, index + lowercaseQuery.length)
+                      ranges.push(range)
+
+                      startIndex = index + lowercaseQuery.length
+                  }
+
+                  currentNode = treeWalker.nextNode()
+              }
+          }
+
+          if (ranges.length === 0 && query.length > 0) {
+              return null
+          }
+
+          switch (filterMode) {
+              case 'teacher': {
+                  // Only match nodes that are teachers
+                  if (!node.dataset.path.includes('Students')) {
+                      return ranges
+                  }
+
+                  break
+              }
+
+              case 'all': {
+                  return ranges
+              }
+          }
+
+          return null
+      }
+  })
+</script>

data/previews/primer/open_project/filterable_tree_view_preview/custom_checkbox_text.html.erb

@@ -0,0 +1,26 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new(include_sub_items_check_box_arguments: { name: :include_sub_items, label: "Including pupils" })) do |tree| %>
+  <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
+    <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
+      <% ravenclaw.with_leaf(label: "Luna Lovegood") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Draco Malfoy") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Susan Bones") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Harry Potter") %>
+      <% hufflepuff.with_leaf(label: "Ronald Weasley") %>
+      <% hufflepuff.with_leaf(label: "Hermione Granger") %>
+    <% end %>
+  <% end %>
+
+  <% tree.with_leaf(label: "Albus Dumbledore") %>
+  <% tree.with_leaf(label: "Minerva McGonagall") %>
+  <% tree.with_leaf(label: "Severus Snape") %>
+  <% tree.with_leaf(label: "Rubeus Hagrid") %>
+<% end %>

data/previews/primer/open_project/filterable_tree_view_preview/custom_no_results_text.html.erb

@@ -0,0 +1,28 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new(
+  filter_input_arguments: {placeholder: "Search me!", name: "filter", label: "Filter", visually_hide_label: true},
+  no_results_node_arguments: { label: "All wizards and witches have left the building" })) do |tree| %>
+  <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
+    <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
+      <% ravenclaw.with_leaf(label: "Luna Lovegood") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Draco Malfoy") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Susan Bones") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Harry Potter") %>
+      <% hufflepuff.with_leaf(label: "Ronald Weasley") %>
+      <% hufflepuff.with_leaf(label: "Hermione Granger") %>
+    <% end %>
+  <% end %>
+
+  <% tree.with_leaf(label: "Albus Dumbledore") %>
+  <% tree.with_leaf(label: "Minerva McGonagall") %>
+  <% tree.with_leaf(label: "Severus Snape") %>
+  <% tree.with_leaf(label: "Rubeus Hagrid") %>
+<% end %>

data/previews/primer/open_project/filterable_tree_view_preview/custom_segmented_control.html.erb

@@ -0,0 +1,31 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
+  <% tree.with_filter_mode(name: "teacher", label: "Teacher") %>
+  <% tree.with_filter_mode(name: "all", label: "All", selected: true) %>
+
+  <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
+    <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
+      <% ravenclaw.with_leaf(label: "Luna Lovegood") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Draco Malfoy") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Susan Bones") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Harry Potter") %>
+      <% hufflepuff.with_leaf(label: "Ronald Weasley") %>
+      <% hufflepuff.with_leaf(label: "Hermione Granger") %>
+    <% end %>
+  <% end %>
+
+  <% tree.with_leaf(label: "Albus Dumbledore") %>
+  <% tree.with_leaf(label: "Minerva McGonagall") %>
+  <% tree.with_leaf(label: "Severus Snape") %>
+  <% tree.with_leaf(label: "Rubeus Hagrid") %>
+<% end %>
+
+<%= render partial: "primer/open_project/filterable_tree_view_preview/custom_select_js", locals: { } %>

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

@@ -0,0 +1,26 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
+  <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
+    <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
+      <% ravenclaw.with_leaf(label: "Luna Lovegood") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Draco Malfoy") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Susan Bones") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Harry Potter") %>
+      <% hufflepuff.with_leaf(label: "Ronald Weasley") %>
+      <% hufflepuff.with_leaf(label: "Hermione Granger") %>
+    <% end %>
+  <% end %>
+
+  <% tree.with_leaf(label: "Albus Dumbledore") %>
+  <% tree.with_leaf(label: "Minerva McGonagall") %>
+  <% tree.with_leaf(label: "Severus Snape") %>
+  <% tree.with_leaf(label: "Rubeus Hagrid") %>
+<% end %>

data/previews/primer/open_project/filterable_tree_view_preview/form_input.html.erb

@@ -0,0 +1,32 @@
+<%= form_with(url: primer_view_components.generic_form_submission_path(format: :json)) do |f| %>
+  <%= render(Primer::Alpha::Stack.new) do %>
+    <%= render(Primer::OpenProject::FilterableTreeView.new(form_arguments: { builder: f, name: "characters" })) do |tree| %>
+      <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
+        <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
+          <% ravenclaw.with_leaf(label: "Luna Lovegood") %>
+        <% end %>
+
+        <% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
+          <% hufflepuff.with_leaf(label: "Draco Malfoy") %>
+        <% end %>
+
+        <% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
+          <% hufflepuff.with_leaf(label: "Susan Bones") %>
+        <% end %>
+
+        <% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
+          <% hufflepuff.with_leaf(label: "Harry Potter") %>
+          <% hufflepuff.with_leaf(label: "Ronald Weasley") %>
+          <% hufflepuff.with_leaf(label: "Hermione Granger") %>
+        <% end %>
+      <% end %>
+
+      <% tree.with_leaf(label: "Albus Dumbledore") %>
+      <% tree.with_leaf(label: "Minerva McGonagall") %>
+      <% tree.with_leaf(label: "Severus Snape") %>
+      <% tree.with_leaf(label: "Rubeus Hagrid") %>
+    <% end %>
+
+    <%= render(Primer::Alpha::SubmitButton.new(name: :submit, label: "Submit")) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,26 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
+  <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
+    <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
+      <% ravenclaw.with_leaf(label: "Luna Lovegood") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Draco Malfoy") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Susan Bones") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Harry Potter") %>
+      <% hufflepuff.with_leaf(label: "Ronald Weasley") %>
+      <% hufflepuff.with_leaf(label: "Hermione Granger") %>
+    <% end %>
+  <% end %>
+
+  <% tree.with_leaf(label: "Albus Dumbledore") %>
+  <% tree.with_leaf(label: "Minerva McGonagall") %>
+  <% tree.with_leaf(label: "Severus Snape") %>
+  <% tree.with_leaf(label: "Rubeus Hagrid") %>
+<% end %>