openproject-primer_view_components 0.70.5 → 0.72.0

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

data/previews/primer/open_project/filterable_tree_view_preview.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label FilterableTreeView
+    class FilterableTreeViewPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param expanded [Boolean] toggle
+      def playground(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Default
+      #
+      # @snapshot interactive
+      # @param expanded [Boolean] toggle
+      def default(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Form input
+      #
+      # @param expanded [Boolean] toggle
+      def form_input(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Custom segmented control
+      #
+      # @snapshot interactive
+      #
+      # ---------------------------
+      # ## Custom filter modes
+      #
+      # In addition to the default filter modes of `'all'` and `'selected'`, `FilterableTreeView` supports
+      # adding custom filter modes. Adding a filter mode will cause its label to appear in the `SegmentedControl` in the
+      # toolbar, and will be passed as the third argument to the filter function (see below).
+      #
+      # Here's how to add a custom filter mode in addition to the default ones:
+      #
+      # ```erb
+      # <%= render(Primer::OpenProject::FilterableTreeView.new) do |tree_view| %>
+      #   <%# remove this line to prevent adding the default modes %>
+      #   <% tree_view.with_default_filter_modes %>
+      #   <% tree_view.with_filter_mode(name: "Custom", system_arguments)
+      # <% end %>
+      # ```
+      #
+      # ### Customizing the filter function
+      #
+      # The filter function can be customized by setting the value of the `filterFn` property to a function with the
+      # following signature:
+      #
+      # ```typescript
+      # export type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null
+      # ```
+      #
+      # This function will be called once for each node in the tree every time filter controls change (i.e. when the
+      # filter mode or query string are altered). The function is called with the following arguments:
+      #
+      # |Argument    |Description                                                      |
+      # |:-----------|:----------------------------------------------------------------|
+      # |`node`      |The HTML node element, i.e. the element with `role=treeitem` set.|
+      # |`query`     |The query string.                                                |
+      # |`filterMode`|The filter mode, either `'all'` or `'selected'`.                 |
+      #
+      # The component expects the filter function to return specific values depending on the type of match:
+      #
+      # 1. No match - return `null`
+      # 2. Match but no highlights (eg. when the query string is empty) - return an empty array
+      # 3. Match with highlights - return a non-empty array of `Range` objects
+      #
+      # Example:
+      #
+      # ```javascript
+      # const filterableTreeView = document.querySelector('filterable-tree-view')
+      # filterableTreeView.filterFn = (node, query, filterMode) => {
+      #   // custom filter implementation here
+      # }
+      # ```
+      #
+      def custom_segmented_control(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Custom no results text
+      def custom_no_results_text(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Custom checkbox text
+      def custom_checkbox_text(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
+    end
+  end
+end