playbook_ui 13.9.0.pre.alpha.PLAY962SingleSelect1261 → 13.9.0.pre.alpha.play845allkitsbytypes1262

data/lib/playbook/pb_doc_helper.rb

@@ -26,42 +26,74 @@ module Playbook
     end
 
     # Deal with lists of kits, used in Playbook doc and Externally
-    # rubocop:disable Style/StringConcatenation
-    def pb_kits(type: "rails", limit_examples: false, dark_mode: false, method: get_kits)
-      display_kits = []
-      kits = method
-      kits.each do |kit|
-        if kit.is_a?(Hash)
-          nav_hash_array(kit).each do |sub_kit|
-            display_kits << render_pb_doc_kit(sub_kit, type, limit_examples, false, dark_mode)
-          end
-        else
-          display_kits << render_pb_doc_kit(kit, type, limit_examples, false, dark_mode)
-        end
-      end
-      raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
+    def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
+      kits = get_kits(type)
+
+      # Iterate through the filtered kits and render them
+      kits.map do |kit|
+        render_pb_doc_kit(kit["name"], type, limit_examples, true, dark_mode)
+      end.join.html_safe
     end
-    # rubocop:enable Style/StringConcatenation
 
-    # rubocop:disable Naming/AccessorMethodName
-    def get_kits
-      menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
-      menu["kits"]
+    def get_kits(type = "rails")
+      return [] if type == "swift"
+
+      kits = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml")) || []
+
+      # Filter kits that have at least one component compatible with the type
+      kits["kits"].select do |kit|
+        kit["components"].any? { |component| component["platforms"].include?(type) }
+      end
     end
 
-    def get_kits_pb_website
-      menu = YAML.load_file(Rails.root.join("config/menu.yml"))
-      menu["kits"]
+    def aggregate_kits
+      all_kits = []
+
+      YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))["kits"].each do |kit|
+        kit_name = kit["name"]
+        components = kit["components"].map { |c| c["name"] }
+
+        all_kits << if components.size == 1
+                      components.first
+                    else
+                      { kit_name => components }
+                    end
+      end
+
+      all_kits
     end
-    # rubocop:enable Naming/AccessorMethodName
 
     # rubocop:disable Style/OptionalBooleanParameter
-    def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
-      title = pb_doc_render_clickable_title(kit, type)
-      ui = raw("<div class='pb--docItem-ui'>
-          #{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
-      title + ui
+    def render_pb_doc_kit(kit_name, type, limit_examples, code = true, dark_mode = false)
+      parent_kit = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))["kits"].find { |kit| kit["name"] == kit_name }
+
+      # Initialize component_content as an empty string
+      component_content = ""
+
+      # Check if parent_kit is not nil
+      # Filter components based on the specified type
+      components = parent_kit["components"].select { |component| component["platforms"].include?(type) }
+
+      # If it's a parent with components, accumulate the UI content for child components
+      if components.any?
+        component_content = components.map do |component|
+          component_name = component["name"]
+          title = pb_doc_render_clickable_title(component_name, type) # Use component_name for the title
+
+          # Render the component UI content with the same styles/tags as the parent
+          component_ui = raw("<div class='pb--docItem-ui'>
+                #{pb_kit(kit: component_name, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}
+              </div>")
+
+          # Combine the component name and component UI content
+          "#{title}#{component_ui}"
+        end.join.to_s
+      end
+
+      # Return the component_content
+      component_content.to_s
     end
+
   # rubocop:enable Style/OptionalBooleanParameter
 
   private

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.9.0"
-  VERSION = "13.9.0.pre.alpha.PLAY962SingleSelect1261"
+  VERSION = "13.9.0.pre.alpha.play845allkitsbytypes1262"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.9.0.pre.alpha.PLAY962SingleSelect1261
+  version: 13.9.0.pre.alpha.play845allkitsbytypes1262
 platform: ruby
 authors:
 - Power UX
@@ -1498,8 +1498,6 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
 - app/pb_kits/playbook/pb_multi_level_select/docs/index.js

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb

@@ -1,73 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "200",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "201",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "202",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "203",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "204",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "205",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "206",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "207",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "208",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "209",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "210",
-          },
-        ],
-      },
-    ],
-}] %>
-
-<%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-single-rails",
-    name: "my_single_select_array",
-    tree_data: treeData,
-    input_name: "Power",
-    variant: "single"
-}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx

@@ -1,87 +0,0 @@
-import React from "react";
-import MultiLevelSelect from "../_multi_level_select";
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome2",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people2",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent2",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business2",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative2",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development2",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience2",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact2",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment2",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer2",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy2",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectSingle = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id="multiselect-single"
-          inputName="Power"
-          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
-          treeData={treeData}
-          variant="single"
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectSingle;