openproject-primer_view_components 0.71.0 → 0.72.0

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

data/previews/primer/{open_project → alpha}/tree_view_preview/default.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", 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) %>
@@ -12,7 +12,7 @@
         <% item.with_leading_visual_icon(icon: :file) %>
       <% end %>
 
-      <% sub_tree.with_leaf(label: "icon_button.rb", disabled: disabled, 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 %>

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,4 +1,4 @@
-<%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+<%= 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) %>

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

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

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,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     # @label TreeView
     class TreeViewPreview < ViewComponent::Preview
       # @label Default
@@ -14,8 +14,8 @@ module Primer
       def default(
         expanded: false,
         disabled: 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),
@@ -32,8 +32,8 @@ module Primer
       # @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),
@@ -101,7 +101,7 @@ module Primer
         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: {
@@ -139,7 +139,7 @@ module Primer
       # @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
@@ -151,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)
@@ -171,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/stress_test.html.erb

@@ -0,0 +1,28 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
+  <% (1..500).each do %>
+    <% 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 %>
+<% end %>