openproject-primer_view_components 0.64.0 → 0.65.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,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 64
+      MINOR = 65
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

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/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/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