primer_view_components 0.43.5 → 0.44.0

data/app/controllers/primer/view_components/tree_view_items.json

@@ -0,0 +1,293 @@
+{
+  "children": {
+    "primer": {
+      "children": {
+        "alpha": {
+          "children": {
+            "action_bar": {
+              "children": {},
+              "files": [
+                "divider.rb",
+                "item.rb"
+              ]
+            },
+            "action_list": {
+              "children": {},
+              "files": [
+                "divider.rb",
+                "form_wrapper.rb",
+                "heading.rb",
+                "item.rb"
+              ]
+            },
+            "action_menu": {
+              "children": {},
+              "files": [
+                "action_menu_element.ts",
+                "group.rb",
+                "heading.rb",
+                "list.rb",
+                "list_wrapper.rb"
+              ]
+            },
+            "auto_complete": {
+              "children": {},
+              "files": [
+                "item.rb"
+              ]
+            },
+            "dialog": {
+              "children": {},
+              "files": [
+                "body.rb",
+                "footer.rb",
+                "header.rb"
+              ]
+            },
+            "dropdown": {
+              "children": {},
+              "files": [
+                "menu.rb",
+                "menu.ts"
+              ]
+            },
+            "file_tree_view": {
+              "children": {},
+              "files": [
+                "directory_item.rb",
+                "file_item.rb"
+              ]
+            },
+            "nav_list": {
+              "children": {},
+              "files": [
+                "divider.rb",
+                "group.rb",
+                "heading.rb",
+                "item.rb"
+              ]
+            },
+            "navigation": {
+              "children": {},
+              "files": [
+                "tab.rb"
+              ]
+            },
+            "overlay": {
+              "children": {},
+              "files": [
+                "body.rb",
+                "footer.rb",
+                "header.rb"
+              ]
+            },
+            "segmented_control": {
+              "children": {},
+              "files": [
+                "item.rb"
+              ]
+            },
+            "tree_view": {
+              "children": {},
+              "files": [
+                "icon.rb",
+                "icon_pair.rb",
+                "item.rb",
+                "leaf_item.rb",
+                "spinner_loader.rb",
+                "sub_tree.rb",
+                "sub_tree_container.rb",
+                "sub_tree_item.rb",
+                "tree_view_icon_pair_element.ts",
+                "tree_view_sub_tree_item_element.ts",
+                "visual.rb"
+              ]
+            }
+          },
+          "files": [
+            "action_bar.pcss",
+            "action_bar.rb",
+            "action_bar_element.ts",
+            "action_list.pcss",
+            "action_list.rb",
+            "action_list.ts",
+            "action_menu.rb",
+            "auto_complete.pcss",
+            "auto_complete.rb",
+            "banner.pcss",
+            "banner.rb",
+            "button_marketing.pcss",
+            "button_marketing.rb",
+            "check_box.rb",
+            "check_box_group.rb",
+            "dialog.pcss",
+            "dialog.rb",
+            "dropdown.pcss",
+            "dropdown.rb",
+            "dropdown.ts",
+            "file_tree_view.rb",
+            "form_button.rb",
+            "form_control.rb",
+            "hellip_button.rb",
+            "hidden_text_expander.rb",
+            "image.rb",
+            "layout.pcss",
+            "layout.rb",
+            "menu.pcss",
+            "menu.rb",
+            "modal_dialog.ts",
+            "multi_input.rb",
+            "nav_list.rb",
+            "octicon_symbols.rb",
+            "overlay.pcss",
+            "overlay.rb",
+            "radio_button.rb",
+            "radio_button_group.rb",
+            "segmented_control.pcss",
+            "segmented_control.rb",
+            "segmented_control.ts",
+            "select.rb",
+            "select_panel.pcss",
+            "select_panel.rb",
+            "select_panel_element.ts",
+            "stack.pcss",
+            "stack.rb",
+            "stack_item.pcss",
+            "stack_item.rb",
+            "submit_button.rb",
+            "tab_container.rb",
+            "tab_container.ts",
+            "tab_nav.pcss",
+            "tab_nav.rb",
+            "tab_panels.rb",
+            "text_area.rb",
+            "text_field.pcss",
+            "text_field.rb",
+            "toggle_switch.pcss",
+            "toggle_switch.rb",
+            "toggle_switch.ts",
+            "tool_tip.ts",
+            "tooltip.rb",
+            "tree_view.pcss",
+            "tree_view.rb",
+            "underline_nav.pcss",
+            "underline_nav.rb",
+            "underline_panels.rb",
+            "x_banner.ts"
+          ]
+        },
+        "beta": {
+          "children": {
+            "auto_complete": {
+              "children": {},
+              "files": [
+                "auto_complete.ts",
+                "item.rb",
+                "no_result_item.rb"
+              ]
+            },
+            "border_box": {
+              "children": {},
+              "files": [
+                "header.rb"
+              ]
+            },
+            "nav_list": {
+              "children": {},
+              "files": [
+                "divider.rb",
+                "group.rb",
+                "heading.rb",
+                "item.rb"
+              ]
+            }
+          },
+          "files": [
+            "auto_complete.rb",
+            "avatar.pcss",
+            "avatar.rb",
+            "avatar_stack.pcss",
+            "avatar_stack.rb",
+            "base_button.rb",
+            "blankslate.pcss",
+            "blankslate.rb",
+            "border_box.pcss",
+            "border_box.rb",
+            "breadcrumbs.pcss",
+            "breadcrumbs.rb",
+            "button.pcss",
+            "button.rb",
+            "button_group.pcss",
+            "button_group.rb",
+            "clipboard_copy.rb",
+            "clipboard_copy.ts",
+            "clipboard_copy_button.rb",
+            "close_button.rb",
+            "counter.pcss",
+            "counter.rb",
+            "details.rb",
+            "details_toggle_element.ts",
+            "flash.pcss",
+            "flash.rb",
+            "heading.rb",
+            "icon_button.rb",
+            "label.pcss",
+            "label.rb",
+            "link.pcss",
+            "link.rb",
+            "markdown.rb",
+            "nav_list.rb",
+            "nav_list.ts",
+            "nav_list_group_element.ts",
+            "octicon.rb",
+            "popover.pcss",
+            "popover.rb",
+            "progress_bar.pcss",
+            "progress_bar.rb",
+            "relative_time.rb",
+            "relative_time.ts",
+            "spinner.rb",
+            "state.pcss",
+            "state.rb",
+            "subhead.pcss",
+            "subhead.rb",
+            "text.rb",
+            "timeline_item.pcss",
+            "timeline_item.rb",
+            "truncate.pcss",
+            "truncate.rb"
+          ]
+        },
+        "navigation": {
+          "children": {},
+          "files": [
+            "tab_component.rb"
+          ]
+        }
+      },
+      "files": [
+        "anchored_position.ts",
+        "base_component.rb",
+        "blankslate_component.rb",
+        "box.rb",
+        "button_component.rb",
+        "component.rb",
+        "conditional_wrapper.rb",
+        "content.rb",
+        "dialog_helper.ts",
+        "focus_group.ts",
+        "icon_button.rb",
+        "layout_component.rb",
+        "primer.pcss",
+        "primer.ts",
+        "responsive_arg.rb",
+        "scrollable_region.ts",
+        "shared_events.ts",
+        "tooltip.rb",
+        "truncate.pcss",
+        "truncate.rb",
+        "utils.ts"
+      ]
+    }
+  }
+}

data/app/controllers/primer/view_components/tree_view_items_controller.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+require "json"
+
+
+module Primer
+  module ViewComponents
+    # :nodoc:
+    # :nocov:
+    class TreeViewItemsController < ApplicationController
+      TREE = JSON.parse(File.read(File.join(__dir__, "tree_view_items.json"))).freeze
+
+      def index
+        # delay a bit so loading spinners, etc can be seen
+        sleep 1
+
+        if params[:fail] == "true"
+          head :internal_server_error and return
+        end
+
+        path = JSON.parse(params[:path])
+        node = path.inject(TREE) do |current, segment|
+          current["children"][segment]
+        end
+
+        entries = (
+          node["children"].keys.map { |label| [label, :directory] } +
+          node["files"].map { |label| [label, :file] }
+        )
+
+        entries.sort_by!(&:first)
+
+        render(
+          locals: {
+            entries: entries,
+            path: path,
+            loader: (params[:loader] || :spinner).to_sym,
+            select_variant: (params[:select_variant] || :none).to_sym
+          }
+        )
+      end
+
+      def async_alpha
+        # delay a bit so loading spinners, etc can be seen
+        sleep 1
+
+        render(
+          locals: {
+            action_menu_expanded: params[:action_menu_expanded] == "true"
+          }
+        )
+      end
+    end
+  end
+end

data/app/forms/check_box_with_nested_form.rb

@@ -1,18 +1,18 @@
 # frozen_string_literal: true
 
 # :nodoc:
-class CustomCitiesForm < ApplicationForm
-  form do |custom_cities_form|
-    custom_cities_form.text_field(
-      name: :custom_cities,
-      label: "Custom cities",
-      description: "A space-separated list of cities"
-    )
+class CheckBoxWithNestedForm < ApplicationForm
+  # :nodoc:
+  class CustomCitiesForm < ApplicationForm
+    form do |custom_cities_form|
+      custom_cities_form.text_field(
+        name: :custom_cities,
+        label: "Custom cities",
+        description: "A space-separated list of cities"
+      )
+    end
   end
-end
 
-# :nodoc:
-class CheckBoxWithNestedForm < ApplicationForm
   form do |check_form|
     check_form.check_box_group(name: :city_categories) do |check_group|
       check_group.check_box(

data/app/forms/radio_button_with_nested_form.rb

@@ -1,27 +1,27 @@
 # frozen_string_literal: true
 
 # :nodoc:
-class FriendForm < ApplicationForm
-  form do |friend_form|
-    friend_form.group(layout: :horizontal) do |name_group|
-      name_group.text_field(name: "first_name", label: "First Name")
-      name_group.text_field(name: "last_name", label: "Last Name")
+class RadioButtonWithNestedForm < ApplicationForm
+  # :nodoc:
+  class FriendForm < ApplicationForm
+    form do |friend_form|
+      friend_form.group(layout: :horizontal) do |name_group|
+        name_group.text_field(name: "first_name", label: "First Name")
+        name_group.text_field(name: "last_name", label: "Last Name")
+      end
     end
   end
-end
 
-# :nodoc:
-class FriendTextAreaForm < ApplicationForm
-  form do |friend_text_area_form|
-    friend_text_area_form.text_area(
-      name: "description",
-      label: "Describe this wonderful person in loving detail"
-    )
+  # :nodoc:
+  class FriendTextAreaForm < ApplicationForm
+    form do |friend_text_area_form|
+      friend_text_area_form.text_area(
+        name: "description",
+        label: "Describe this wonderful person in loving detail"
+      )
+    end
   end
-end
 
-# :nodoc:
-class RadioButtonWithNestedForm < ApplicationForm
   form do |radio_form|
     radio_form.radio_button_group(name: "channel") do |radio_group|
       radio_group.radio_button(value: "online", label: "Online advertisement", caption: "Facebook maybe?")

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

@@ -0,0 +1,23 @@
+<%= 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) %>
+      <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+    <% end %>
+
+    <% sub_tree.with_sub_tree(label: "action_menu", expanded: action_menu_expanded) 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_leaf(label: "group.rb") do |item| %>
+        <% item.with_leading_visual_icon(icon: :file) %>
+      <% end %>
+
+      <% sub_tree.with_leaf(label: "heading.rb") do |item| %>
+        <% item.with_leading_visual_icon(icon: :file) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,24 @@
+<%= 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 %>
+    <% when :directory %>
+      <% tree.with_sub_tree(label: label, select_variant: select_variant) 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 %>
+
+        <% if loader == :skeleton %>
+          <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_path(loader: "skeleton", select_variant: select_variant)) %>
+        <% else %>
+          <% sub_tree.with_loading_spinner(src: primer_view_components.tree_view_items_path(loader: "spinner", select_variant: select_variant)) %>
+        <% end %>
+      <% end %>
+    <% when :file %>
+      <% tree.with_leaf(label: label, select_variant: select_variant) do |item| %>
+        <% item.with_leading_visual_icon(icon: :file) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/config/routes.rb

@@ -8,7 +8,9 @@ Primer::ViewComponents::Engine.routes.draw do
   resources :nav_list_items, only: [:index]
   resources :multi, only: [:create]
   resources :select_panel_items, only: [:index]
+
   resources :tree_view_items, only: [:index]
+  get "/tree_view_items/async_alpha", to: "tree_view_items#async_alpha", as: :tree_view_items_async_alpha
 
   # generic form submission path
   post "/form_handler", to: "form_handler#form_action", as: :generic_form_submission

data/lib/primer/view_components/version.rb

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

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

@@ -0,0 +1,16 @@
+<div style="max-width: 400px">
+  <%= 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") %>
+
+      <% 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/alpha/file_tree_view_preview/playground.html.erb

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

data/previews/primer/alpha/file_tree_view_preview.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @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/alpha/skeleton_box_preview.rb

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

data/previews/primer/alpha/tree_view_preview/async_alpha.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_async_alpha_path(action_menu_expanded: action_menu_expanded)) %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,10 @@
+<div style="max-width: 400px">
+  <%= 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')", disabled: disabled) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,24 @@
+<div style="max-width: 400px">
+  <%= 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) %>
+      <% end %>
+
+      <% sub_tree.with_trailing_visual_icon(icon: :"diff-modified") %>
+
+      <% 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, 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", disabled: disabled, select_variant: select_variant) do |item| %>
+      <% item.with_leading_visual_icon(icon: :file) %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,10 @@
+<div style="max-width: 400px">
+  <%= 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) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>