openproject-primer_view_components 0.69.1 → 0.69.2

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/auto_complete_form.rb

@@ -9,7 +9,7 @@ class AutoCompleteForm < ApplicationForm
       name: :fruit,
       label: "Fruit",
       caption: "Please enter your favorite fruit",
-      src: Primer::UrlHelpers.autocomplete_index_path,
+      src: Primer::UrlHelpers.primer_view_components.autocomplete_index_path,
       validation_message: "Something went wrong"
     )
 

data/app/forms/immediate_validation_form.rb

@@ -8,14 +8,14 @@ class ImmediateValidationForm < ApplicationForm
       name: :has_error,
       label: "Will have error",
       caption: "Every time this checks with the server, it returns an error",
-      auto_check_src: @view_context.example_check_error_path
+      auto_check_src: @view_context.primer_view_components.example_check_error_path
     )
 
     validation_form.text_field(
       name: :no_error,
       label: "Will not error",
       caption: "Will not have an error when it checks the server",
-      auto_check_src: @view_context.example_check_ok_path,
+      auto_check_src: @view_context.primer_view_components.example_check_ok_path,
       validation_message: "This message will go away once you type something"
     )
 
@@ -23,7 +23,7 @@ class ImmediateValidationForm < ApplicationForm
       name: :random_error,
       label: "Random error or success",
       caption: "Server checks will randomly respond with errors or success",
-      auto_check_src: @view_context.example_check_random_path
+      auto_check_src: @view_context.primer_view_components.example_check_random_path
     )
   end
 end

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

@@ -20,7 +20,7 @@ module Primer
           @leading_visual = system_arguments.delete(:leading_visual)
           @trailing_visual = system_arguments.delete(:trailing_visual)
           @leading_spinner = !!system_arguments.delete(:leading_spinner)
-          @clear_button_id = system_arguments.delete(:clear_button_id)
+          @clear_button_id = system_arguments.delete(:clear_button_id) || SecureRandom.uuid
           @inset = system_arguments.delete(:inset)
           @monospace = system_arguments.delete(:monospace)
           @auto_check_src = system_arguments.delete(:auto_check_src)

data/app/views/primer/view_components/action_menu/deferred.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::Alpha::ActionMenu::List.new(menu_id: "deferred")) do |list| %>
+  <% list.with_item(label: "Copy link", value: "", autofocus: true) %>
+  <% list.with_item(label: "Quote reply", value: "") %>
+  <% list.with_item(label: "Reference in new issue", value: "") %>
+  <% list.with_item(
+    label: "Show dialog",
+    tag: :button,
+    # this dialog is rendered by demo/app/views/action_menu/deferred.html.erb
+    content_arguments: { "data-show-dialog-id": "my-dialog" },
+    value: "",
+    scheme: :danger
+  ) %>
+<% end %>

data/app/views/primer/view_components/action_menu/deferred_preload.html.erb

@@ -0,0 +1,5 @@
+<%= render(Primer::Alpha::ActionMenu::List.new(menu_id: "deferred-preload")) do |list| %>
+  <% list.with_item(label: "Copy link", value: "", autofocus: true) %>
+  <% list.with_item(label: "Quote reply", value: "") %>
+  <% list.with_item(label: "Reference in new issue", value: "") %>
+<% end %>

data/app/views/primer/view_components/action_menu/form_action.html.erb

@@ -0,0 +1,2 @@
+You selected <%= @value.inspect %><br>
+Other params sent to server: <%= @other_params.inspect %>

data/app/views/primer/view_components/action_menu/landing.html.erb

@@ -0,0 +1,3 @@
+<div class="action-menu-landing-page">
+  Hello world!
+</div>

data/app/views/primer/view_components/auto_check/_error_message.html.erb

@@ -0,0 +1 @@
+The name <code><%= input_value %></code> is already taken.

data/app/views/primer/view_components/auto_check/_success_message.html.erb

@@ -0,0 +1 @@
+The name <code><%= input_value %></code> is available.

data/app/views/primer/view_components/auto_check/_warning_message.html.erb

@@ -0,0 +1,4 @@
+The name <strong><%= input_value %></strong> is available.
+<div class="color-fg-muted">
+  The name can only contain ASCII letters, digits, and the characters <code>.</code>, <code>-</code> and <code>_</code>.
+</div>

data/app/views/primer/view_components/auto_complete_test/index.html.erb

@@ -0,0 +1,15 @@
+<%# erblint:counter DeprecatedComponentsCounter 2 %>
+<% @fruit_list.each do |fruit| %>
+  <% if params['version'] == "alpha" %>
+    <%= render(Primer::Alpha::AutoComplete::Item.new(value: fruit)) { fruit } %>
+  <% else %>
+    <%= render(Primer::Beta::AutoComplete::Item.new(value: fruit)) do |component| %>
+      <% if @visual_type == "leading" %>
+        <% component.with_leading_visual_icon(icon: :"mark-github") %>
+      <% elsif @visual_type == "trailing" %>
+        <% component.with_trailing_visual_icon(icon: :"mark-github") %>
+      <% end %>
+      <%= fruit %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/primer/view_components/auto_complete_test/no_results.html.erb

@@ -0,0 +1,16 @@
+<% if @fruit_list.length > 0 %>
+  <% @fruit_list.each do |fruit| %>
+    <%= render(Primer::Beta::AutoComplete::Item.new(value: fruit)) do |component| %>
+    <% if @visual_type == "leading" %>
+        <% component.with_leading_visual_icon(icon: :"mark-github") %>
+    <% elsif @visual_type == "trailing" %>
+        <% component.with_trailing_visual_icon(icon: :"mark-github") %>
+    <% end %>
+    <%= fruit %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= render(Primer::Beta::AutoComplete::NoResultItem.new) do %>
+    No results!
+  <% end %>
+<% end %>

data/app/views/primer/view_components/form_handler/form_action.html.erb

@@ -0,0 +1 @@
+Params sent to server: <%= @form_params.inspect %>

data/app/views/primer/view_components/include_fragment/deferred.html.erb

@@ -0,0 +1,3 @@
+<div>
+  Hello world!
+</div>

data/app/views/primer/view_components/nav_list_items/index.html.erb

@@ -0,0 +1,3 @@
+<% @data.each do |item_arguments| %>
+  <%= render(Primer::Beta::NavList::Item.new(list: @list, **item_arguments)) %>
+<% end %>

data/app/views/primer/view_components/select_panel_items/index.html.erb

@@ -0,0 +1,15 @@
+<% unless results.empty? %>
+  <%= render(Primer::Alpha::SelectPanel::ItemList.new(
+    select_variant: (params[:select_variant] || :multiple).to_sym,
+    aria: {
+      label: "options",
+    },
+    )) do |list| %>
+    <% results.each do |result| %>
+      <% list.with_item(content_arguments: { data: { value: result[:value] } }, active: result[:selected] || false) do |item| %>
+        <% item.with_description { result[:description] } %>
+        <%= result[:title] %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%= render(Primer::OpenProject::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::OpenProject::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/lib/primer/view_components/engine.rb

@@ -27,6 +27,10 @@ module Primer
       config.primer_view_components.validate_class_names = !Rails.env.production?
       config.primer_view_components.raise_on_invalid_aria = false
 
+      initializer "primer_view_components.mime_types" do
+        Mime::Type.register "text/fragment+html", :html_fragment
+      end
+
       initializer "primer_view_components.assets" do |app|
         app.config.assets.precompile += %w[primer_view_components] if app.config.respond_to?(:assets)
       end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 69
-      PATCH = 1
+      PATCH = 2
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+<%= form_with(url: primer_view_components.action_menu_form_action_path(format: route_format)) do |f| %>
   <% content = -> (base) do %>
     <% base.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
     <% base.with_item(label: "Recursive", data: { value: "recursive" }) %>

data/previews/primer/alpha/action_menu_preview/single_select_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+<%= form_with(url: primer_view_components.action_menu_form_action_path(format: route_format)) do |f| %>
   <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
     <% menu.with_show_button { "Strategy" } %>
     <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>

data/previews/primer/alpha/action_menu_preview/single_select_form_items.html.erb

@@ -1,7 +1,7 @@
 <% contents = -> (menu) do %>
   <% menu.with_item(
     label: "Repository",
-    href: action_menu_form_action_path(format: route_format),
+    href: primer_view_components.action_menu_form_action_path(format: route_format),
     form_arguments: {
       method: :post,
       inputs: [{
@@ -15,7 +15,7 @@
   ) %>
   <% menu.with_item(
     label: "Date",
-    href: action_menu_form_action_path(format: route_format),
+    href: primer_view_components.action_menu_form_action_path(format: route_format),
     form_arguments: {
       method: :post,
       inputs: [{

data/previews/primer/alpha/action_menu_preview/with_actions.html.erb

@@ -10,11 +10,11 @@
   <% component.with_show_button { "Trigger" } %>
   <% contents = -> (base) do %>
     <% base.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
-    <% base.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }, disabled: disable_items) %>
+    <% base.with_item(label: "Navigate", tag: :a, content_arguments: { href: primer_view_components.action_menu_landing_path }, disabled: disable_items) %>
     <% base.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
     <% base.with_item(
       label: "Submit form",
-      href: action_menu_form_action_path(format: route_format),
+      href: primer_view_components.action_menu_form_action_path(format: route_format),
       form_arguments: {
         name: "foo", value: "bar", method: :post
       },

data/previews/primer/alpha/action_menu_preview/with_deferred_content.html.erb

@@ -1,10 +1,10 @@
 <% if nest_in_sub_menu %>
   <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
     <% menu.with_show_button { "Menu with deferred content" } %>
-    <% menu.with_sub_menu_item(label: "Sub-menu", menu_id: "deferred", src: action_menu_deferred_path) %>
+    <% menu.with_sub_menu_item(label: "Sub-menu", menu_id: "deferred", src: primer_view_components.action_menu_deferred_path) %>
   <% end %>
 <% else %>
-  <%= render(Primer::Alpha::ActionMenu.new(menu_id: "deferred", src: action_menu_deferred_path)) do |menu| %>
+  <%= render(Primer::Alpha::ActionMenu.new(menu_id: "deferred", src: primer_view_components.action_menu_deferred_path)) do |menu| %>
     <% menu.with_show_button { "Menu with deferred content" } %>
   <% end %>
 <% end %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -310,7 +310,7 @@ module Primer
       # @label With deferred preloaded content
       #
       def with_deferred_preloaded_content
-        render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-preload", preload: true, src: UrlHelpers.action_menu_deferred_preload_path)) do |menu|
+        render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-preload", preload: true, src: UrlHelpers.primer_view_components.action_menu_deferred_preload_path)) do |menu|
           menu.with_show_button { "Menu with deferred and preloaded content" }
         end
       end