primer_view_components 0.43.5 → 0.44.0

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/alpha/tree_view_preview/leaf_node_playground.html.erb

@@ -0,0 +1,15 @@
+<%= 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 %>
+
+    <% 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/alpha/tree_view_preview/links.html.erb

@@ -0,0 +1,17 @@
+<div style="max-width: 400px">
+  <%= 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", 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", disabled: disabled) do |node| %>
+      <% node.with_trailing_visual_icon(icon: :"link-external") %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,36 @@
+<% subject_id = SecureRandom.hex %>
+
+<div style="max-width: 400px">
+  <%= 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) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+
+      <% sub_tree.with_loading_spinner(src: primer_view_components.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/alpha/tree_view_preview/loading_skeleton.html.erb

@@ -0,0 +1,12 @@
+<div style="max-width: 400px">
+  <%= 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) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+
+      <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_path(loader: "skeleton", fail: simulate_failure, empty: simulate_empty)) %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,12 @@
+<div style="max-width: 400px">
+  <%= 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) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+
+      <% sub_tree.with_loading_spinner(src: primer_view_components.tree_view_items_path(loader: "spinner", fail: simulate_failure, empty: simulate_empty)) %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,4 @@
+<% data = Primer::ViewComponents::TreeViewItemsController::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/alpha/tree_view_preview.rb

@@ -0,0 +1,208 @@
+# frozen_string_literal: true
+
+module Primer
+  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, mixed_descendants]
+      def default(
+        expanded: false,
+        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
+        })
+      end
+
+      # @label Playground
+      #
+      # @param expanded [Boolean] toggle
+      # @param select_variant [Symbol] select [multiple, none]
+      # @param select_strategy [Symbol] select [self, descendants, mixed_descendants]
+      def playground(
+        expanded: 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),
+          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 Async alpha
+      #
+      # @param action_menu_expanded [Boolean] toggle
+      def async_alpha(action_menu_expanded: false)
+        render_with_template(locals: {
+          action_menu_expanded: coerce_bool(action_menu_expanded)
+        })
+      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]
+      # @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::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,
+          disabled: disabled
+        })
+      end
+
+      # @label Links
+      #
+      # @param expanded [Boolean] toggle
+      # @param disabled [Boolean] toggle
+      def links(expanded: false, disabled: false)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded),
+          disabled: coerce_bool(disabled)
+        })
+      end
+
+      # @label Buttons
+      #
+      # @param expanded [Boolean] toggle
+      # @param disabled [Boolean] toggle
+      def buttons(expanded: false, disabled: false)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded),
+          disabled: coerce_bool(disabled)
+        })
+      end
+
+      # @label Auto expansion
+      #
+      def auto_expansion
+        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
+              level2.with_sub_tree(label: "Level 3", expanded: true) do |level3|
+                level3.with_leaf(label: "Level 4")
+              end
+            end
+          end
+        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)
+        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