playbook_ui_docs 13.9.0.pre.alpha.play845allkitsbytypes1271 → 13.9.0.pre.alpha.play978makehighchartsadevdependencypoc1292

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce3a9c89050342f49ebef14dc2e13ea30ef5e6712645de1f683091979a4c3ef8
-  data.tar.gz: 81390b493ad59955333020188546ca16137995f984934c1ba31395b5b7ac5de2
+  metadata.gz: e8e7645f8572b888c9b586709a1006abd6ea9449a36ea5d45640c2997382a6c6
+  data.tar.gz: 20f6a59a901995418b023b234183cb4e2096c06f4eb525c82415124560db50ec
 SHA512:
-  metadata.gz: ea3ed3ea48f1436afa0d3bf86c80821448bcd662bda256c23cc87c69097cc82cdc8d71e939ab5956327b79d56304af596d98efe17c05739ddf359333624c4619
-  data.tar.gz: 4047229f51de662cafd3ff46c4d1879eaf5ff3faccba46438d34489a93a2d2d54bb21da892caba7566391c72d745c1c4cf4f7605887d8c48dc1df67b320eae28
+  metadata.gz: 64fe3682ca7d3e3c1f26783502af1f0e409d7b18b8e5c56acea3b0964c5e79cf0fbec1f53521b2ea034451a54d32516a93c33e797c01f05a442e79f771928306
+  data.tar.gz: 71d45a12ef74eabe52e17173dc45789e1a15f7f0eb4bc16742d02b0814fc84f50102277ecf79b3c9ff4d139568caf46b2d86b4d0f49120a0aed07f45a242d200

data/dist/menu.yml

@@ -1,282 +1,111 @@
-web: &web ["rails", "react"]
-all: &all ["rails", "react", "swift"]
-rails_only: &rails_only ["rails"]
-react_only: &react_only ["react"]
-
 kits:
-  - name: "avatars"
-    components:
-      - name: "avatar"
-        platforms: *all
-      - name: "avatar_action_button"
-        platforms: *web
-      - name: "multiple_users"
-        platforms: *web
-      - name: "multiple_users_stacked"
-        platforms: *web
-      - name: "user"
-        platforms: *web
-  - name: "background"
-    components:
-      - name: "background"
-        platforms: *web
-  - name: "bread_crumbs"
-    components:
-      - name: "bread_crumbs"
-        platforms: *web
-  - name: "buttons"
-    components:
-      - name: "button"
-        platforms: *web
-      - name: "button_toolbar"
-        platforms: *web
-      - name: "circle_icon_button"
-        platforms: *web
-  - name: "card"
-    components:
-      - name: "card"
-        platforms: *all
-  - name: "collapsible"
-    components:
-      - name: "collapsible"
-        platforms: *web
-  - name: "charts_and_graphs"
-    components:
-      - name: "bar_graph"
-        platforms: *web
-      - name: "circle_chart"
-        platforms: *web
-      - name: "distribution_bar"
-        platforms: *web
-      - name: "gauge"
-        platforms: *web
-      - name: "legend"
-        platforms: *web
-      - name: "line_graph"
-        platforms: *web
-      - name: "treemap_chart"
-        platforms: *web
-  - name: "dialog"
-    components:
-      - name: "dialog"
-        platforms: *web
-  - name: "filter"
-    components:
-      - name: "filter"
-        platforms: *web
-  - name: "fixed_confirmation_toast"
-    components:
-      - name: "fixed_confirmation_toast"
-        platforms: *web
-  - name: "forms"
-    components:
-      - name: "checkbox"
-        platforms: *web
-      - name: "date_picker"
-        platforms: *web
-      - name: "file_upload"
-        platforms: *web
-      - name: "form"
-        platforms: *rails_only
-      - name: "form_group"
-        platforms: *web
-      - name: "form_pill"
-        platforms: *web
-      - name: "multi_level_select"
-        platforms: *web
-      - name: "passphrase"
-        platforms: *web
-      - name: "phone_number_input"
-        platforms: *web
-      - name: "radio"
-        platforms: *all
-      - name: "rich_text_editor"
-        platforms: *web
-      - name: "select"
-        platforms: *web
-      - name: "selectable_card"
-        platforms: *web
-      - name: "selectable_card_icon"
-        platforms: *web
-      - name: "selectable_icon"
-        platforms: *web
-      - name: "selectable_list"
-        platforms: *web
-      - name: "text_input"
-        platforms: *web
-      - name: "textarea"
-        platforms: *web
-      - name: "toggle"
-        platforms: *web
-      - name: "typeahead"
-        platforms: *web
-  - name: "highlight"
-    components:
-      - name: "highlight"
-        platforms: *web
-  - name: "icon"
-    components:
-      - name: "icon"
-        platforms: *web
-  - name: "icon_circle"
-    components:
-      - name: "icon_circle"
-        platforms: *web
-  - name: "icon_stat_value"
-    components:
-      - name: "icon_stat_value"
-        platforms: *web
-  - name: "icon_value"
-    components:
-      - name: "icon_value"
-        platforms: *web
-  - name: "image"
-    components:
-      - name: "image"
-        platforms: *web
-  - name: "layouts"
-    components:
-      - name: "flex"
-        platforms: *web
-      - name: "layout"
-        platforms: *web
-  - name: "lightbox"
-    components:
-      - name: "lightbox"
-        platforms: *react_only
-  - name: "list"
-    components:
-      - name: "list"
-        platforms: *web
-  - name: "loading_inline"
-    components:
-      - name: "loading_inline"
-        platforms: *web
-  - name: "map"
-    components:
-      - name: "map"
-        platforms: *react_only
-  - name: "nav"
-    components:
-      - name: "nav"
-        platforms: *web
-  - name: "pagination"
-    components:
-      - name: "pagination"
-        platforms: *rails_only
-  - name: "popover"
-    components:
-      - name: "popover"
-        platforms: *web
-  - name: "progress"
-    components:
-      - name: "progress_pills"
-        platforms: *web
-      - name: "progress_simple"
-        platforms: *web
-      - name: "progress_step"
-        platforms: *web
-  - name: "section_separator"
-    components:
-      - name: "section_separator"
-        platforms: *web
-  - name: "star_rating"
-    components:
-      - name: "star_rating"
-        platforms: *web
-  - name: "table"
-    components:
-      - name: "table"
-        platforms: *web
-  - name: "tags"
-    components:
-      - name: "tags"
-        platforms: *web
-      - name: "badge"
-        platforms: *web
-      - name: "hashtag"
-        platforms: *web
-      - name: "pill"
-        platforms: *all
-  - name: "timeline"
-    components:
-      - name: "timeline"
-        platforms: *web
-  - name: "time_and_date"
-    components:
-      - name: "date"
-        platforms: *web
-      - name: "date_range_inline"
-        platforms: *web
-      - name: "date_range_stacked"
-        platforms: *web
-      - name: "date_stacked"
-        platforms: *web
-      - name: "date_time"
-        platforms: *web
-      - name: "date_time_stacked"
-        platforms: *web
-      - name: "date_year_stacked"
-        platforms: *web
-      - name: "time"
-        platforms: *web
-      - name: "time_range_inline"
-        platforms: *web
-      - name: "time_stacked"
-        platforms: *web
-      - name: "timestamp"
-        platforms: *all
-      - name: "weekday_stacked"
-        platforms: *web
-  - name: "tooltip"
-    components:
-      - name: "tooltip"
-        platforms: *web
-  - name: "typography"
-    components:
-      - name: "body"
-        platforms: *web
-      - name: "caption"
-        platforms: *web
-      - name: "detail"
-        platforms: *web
-      - name: "title"
-        platforms: *web
-  - name: "typography_patterns"
-    components:
-      - name: "contact"
-        platforms: *web
-      - name: "currency"
-        platforms: *web
-      - name: "dashboard_value"
-        platforms: *web
-      - name: "home_address_street"
-        platforms: *web
-      - name: "label_pill"
-        platforms: *web
-      - name: "label_value"
-        platforms: *web
-      - name: "message"
-        platforms: *web
-      - name: "person"
-        platforms: *web
-      - name: "person_contact"
-        platforms: *web
-      - name: "source"
-        platforms: *web
-      - name: "stat_change"
-        platforms: *web
-      - name: "stat_value"
-        platforms: *web
-      - name: "title_count"
-        platforms: *web
-      - name: "title_detail"
-        platforms: *web
-  - name: "user_badge"
-    components:
-      - name: "user_badge"
-        platforms: *web
-  - name: "walkthrough"
-    components:
-      - name: "walkthrough"
-        platforms: *web
+  - avatars:
+    - avatar
+    - avatar_action_button
+    - multiple_users
+    - multiple_users_stacked
+    - user
+  - background
+  - bread_crumbs
+  - buttons:
+    - button
+    - button_toolbar
+    - circle_icon_button
+  - card
+  - collapsible
+  - charts_and_graphs:
+    - bar_graph
+    - circle_chart
+    - distribution_bar
+    - gauge
+    - legend
+    - line_graph
+    - treemap_chart
+  - dialog
+  - filter
+  - fixed_confirmation_toast
+  - forms:
+    - checkbox
+    - date_picker
+    - file_upload
+    - form
+    - form_group
+    - form_pill
+    - multi_level_select
+    - passphrase
+    - phone_number_input
+    - radio
+    - rich_text_editor
+    - select
+    - selectable_card
+    - selectable_card_icon
+    - selectable_icon
+    - selectable_list
+    - text_input
+    - textarea
+    - toggle
+    - typeahead
+  - highlight
+  - icon
+  - icon_circle
+  - icon_stat_value
+  - icon_value
+  - image
+  - layouts:
+    - flex
+    - layout
+  - lightbox
+  - list
+  - loading_inline
+  - map
+  - nav
+  - tags:
+    - badge
+    - hashtag
+    - pill
+  - pagination
+  - popover
+  - progress:
+    - progress_pills
+    - progress_simple
+    - progress_step
+  - section_separator
+  - star_rating
+  - table
+  - timeline
+  - time_and_date:
+    - date
+    - date_range_inline
+    - date_range_stacked
+    - date_stacked
+    - date_time
+    - date_time_stacked
+    - date_year_stacked
+    - time
+    - time_range_inline
+    - time_stacked
+    - timestamp
+    - weekday_stacked
+  - tooltip
+  - typography:
+    - body
+    - caption
+    - detail
+    - title
+  - typography_patterns:
+    - contact
+    - currency
+    - dashboard_value
+    - home_address_street
+    - label_pill
+    - label_value
+    - message
+    - person
+    - person_contact
+    - source
+    - stat_change
+    - stat_value
+    - title_count
+    - title_detail
+  - user_badge
+  - walkthrough

data/dist/pb_doc_helper.rb

@@ -26,81 +26,41 @@ module PlaybookWebsite
     end
 
     # Deal with lists of kits, used in Playbook doc and Externally
-    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
-
-    def get_kits(type = "rails")
-      kits = MENU["kits"] || []
-
-      # Filter kits that have at least one component compatible with the type
-      kits.select do |kit|
-        kit["components"].any? { |component| component["platforms"].include?(type) }
+    # 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>")
     end
+    # rubocop:enable Style/StringConcatenation
 
-    def aggregate_kits
-      all_kits = []
-
-      MENU["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
+    # rubocop:disable Naming/AccessorMethodName
+    def get_kits
+      menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
+      menu["kits"]
+    end
 
-      all_kits
+    def get_kits_pb_website
+      menu = YAML.load_file(Rails.root.join("config/menu.yml"))
+      menu["kits"]
     end
+    # rubocop:enable Naming/AccessorMethodName
 
     # rubocop:disable Style/OptionalBooleanParameter
-    def render_pb_doc_kit(kit_name, type, limit_examples, code = true, dark_mode = false)
-      parent_kit = MENU["kits"].find { |kit| kit["name"] == kit_name }
-
-      # Initialize component_content as an empty string
-      component_content = ""
-      title = ""
-
-      # Check if parent_kit is nil
-      if parent_kit.nil?
-        title = pb_doc_render_clickable_title(kit_name, type)
-        component_content = raw("<div class='pb--docItem-ui'>
-    #{pb_kit(kit: kit_name, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
-      else
-        # 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
-      end
-
-      # Combine the component content and UI content for the parent kit
-      if parent_kit.nil?
-        "#{title}#{component_content}".to_s
-      else
-        component_content.to_s.to_s
-      end
+    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
     end
   # rubocop:enable Style/OptionalBooleanParameter