From 6168cf5ba260b2c3abe540bedec79a493c41c3be Mon Sep 17 00:00:00 2001
From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com>
Date: Fri, 5 Jul 2024 12:05:11 -0400
Subject: [PATCH] [PLAY-1391] Add Category to Playbook kit generator (#3488)
**What does this PR do?** A clear and concise description with your
runway ticket url.
[PLAY-1391](https://runway.powerhrg.com/backlog_items/PLAY-1391) adds
the capability to use a category flag when creating a new kit with the
Playbook kit generator that allows for the newly generated kit to be
sorted into one of the preexisting categories (aka submenus with in
Components on the sidebar). This feature does not allow for the
generation of new categories via this generator (creating new categories
is a rare occurrence and should be done manually) and it is optional
(when a kit is generated with a category flag, it will function like it
is currently and just be appended to the bottom of the `menu.yml`).
This ticket is a follow up following an initial investigation done
during [PLAY-1330](https://runway.powerhrg.com/backlog_items/PLAY-1330)
which fixed the Fix generator and updated its documentation. New
information about the Category prop will be added to the [Generating a
Kit huddle
doc](https://huddle.powerapp.cloud/v2/projects/419/artifacts/6279) once
this is approved (the
[draft](https://gist.github.com/ElisaShapiro/922d47e7518971e49ff1014e5c1fcc36)
is here with doc changes pending approval).
**Screenshots:** Screenshots to visualize your addition/change
Example Uno: adding a new kit with a typo in the category, then
successfully doing so once fixed
Example dos: adding a new kit with a category and a kit type
Example tres: adding a new kit without a category specified
Example quatro: adding a new kit with kit type, props, and category
specified
**How to test?** Steps to confirm the desired behavior:
1. Pull down this branch.
2. Reference the generating a kit documentation to try to add a kit with
a category (see draft linked above if huddle doc not yet updated).
3. New kit should be added to `menu.yml` file and visible on the PB
website locally when you start the server and check localhost.
4. Try to add a kit omitting a category (and see it append to the bottom
of `menu.yml` like it did previously; try to mess up the category name
(with a typo or a category that doesn't exist) and see the generator
stall out.
ALTERNATIVE:
Reference demo video in Runway ticket.
#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
~~- [ ] **TESTS** I have added test coverage to my code.~~
---
.../app/controllers/pages_controller.rb | 8 +-
.../app/helpers/application_helper.rb | 6 +-
playbook-website/config/menu.yml | 1038 +++++++++--------
playbook-website/config/routes.rb | 8 +-
playbook/lib/generators/kit/kit_generator.rb | 67 +-
5 files changed, 634 insertions(+), 493 deletions(-)
diff --git a/playbook-website/app/controllers/pages_controller.rb b/playbook-website/app/controllers/pages_controller.rb
index 85fb399310..b4bf4423b5 100755
--- a/playbook-website/app/controllers/pages_controller.rb
+++ b/playbook-website/app/controllers/pages_controller.rb
@@ -211,7 +211,7 @@ def aggregate_kits
end
def categories
- aggregate_kits.map { |item| item["name"] }
+ aggregate_kits.map { |item| item["category"] }
end
def all_kits
@@ -229,7 +229,7 @@ def set_js
end
def set_category
- @category = params[:name]
+ @category = params[:category]
if categories.include?(@category) && helpers.category_has_kits?(category_kits: kit_categories, type: params[:type])
@category_kits = kit_categories
@kits = params[:name]
@@ -239,8 +239,8 @@ def set_category
end
def kit_categories
- @category = params[:name]
- aggregate_kits.find { |item| item["name"] == @category }["components"].map { |component| component["name"] }
+ @category = params[:category]
+ aggregate_kits.find { |item| item["category"] == @category }["components"].map { |component| component["name"] }
end
def set_kit
diff --git a/playbook-website/app/helpers/application_helper.rb b/playbook-website/app/helpers/application_helper.rb
index 2c0ef96eec..8f6781c648 100644
--- a/playbook-website/app/helpers/application_helper.rb
+++ b/playbook-website/app/helpers/application_helper.rb
@@ -150,11 +150,11 @@ def aggregate_kits_with_status
all_kits = []
MENU["kits"].each do |kit|
- kit_name = kit["name"]
+ kit_category = kit["category"]
# Modify this line to include both name and status in the components array
components = kit["components"].map { |c| { name: c["name"], status: c["status"] } }
- all_kits << { kit_name => components }
+ all_kits << { kit_category => components }
end
all_kits
@@ -166,7 +166,7 @@ def search_list
aggregate_kits_with_status.each do |kit|
if kit.is_a? Hash
- _kit_name, components = kit.first
+ _kit_category, components = kit.first
components.each do |component|
all_kits.push(component[:name]) if component[:status] != "beta"
end
diff --git a/playbook-website/config/menu.yml b/playbook-website/config/menu.yml
index ffd1a6dac8..da2349d1ef 100644
--- a/playbook-website/config/menu.yml
+++ b/playbook-website/config/menu.yml
@@ -1,474 +1,568 @@
-web: &web ["rails", "react"]
-all: &all ["rails", "react", "swift"]
-rails_swift: &rails_swift ["rails", "swift"]
-react_swift: &react_swift ["swift", "react"]
-rails_only: &rails_only ["rails"]
-react_only: &react_only ["react"]
-swift_only: &swift_only ["swift"]
-
+---
+web: &1
+- rails
+- react
+all: &3
+- rails
+- react
+- swift
+rails_swift:
+- rails
+- swift
+react_swift:
+- swift
+- react
+rails_only: &4
+- rails
+react_only: &2
+- react
+swift_only:
+- swift
kits:
- - name: alerts_and_dialogs
- description:
- components:
- - name: "dialog"
- platforms: *web
- description:
- status: "stable"
- - name: "fixed_confirmation_toast"
- platforms: *web
- description: Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
- status: "stable"
- - name: "popover"
- platforms: *web
- description: A popover is a way to toggle content on top of other content. It can be used for small texts, small forms, or even dropdowns. By default, popover will toggle open/closed by simply clicking the trigger element.
- status: "stable"
- - name: "tooltip"
- platforms: *web
- description:
- status: "stable"
- - name: buttons
- description: Buttons are used primarily for actions, such as “Save” and “Cancel”. Link Buttons are used for less important or less commonly used actions, such as “view shipping settings”.
- components:
- - name: "button"
- platforms: *web
- description:
- status: "stable"
- - name: "button_toolbar"
- platforms: *web
- description: This kit should primarily hold the most commonly used buttons.
- status: "stable"
- - name: "circle_icon_button"
- platforms: *web
- description: When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text.
- status: "stable"
- - name: data_visualization
- description:
- components:
- - name: "map"
- platforms: *react_only
- description: This kit provides a wrapping class to place around the MapLibre library.
- status: "stable"
- - name: "table"
- platforms: *web
- description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
- status: "stable"
- - name: "advanced_table"
- platforms: *web
- description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
- status: "stable"
- - name: "list"
- platforms: *web
- description: Lists display a vertical set of related content.
- status: "stable"
- - name: "filter"
- platforms: *web
- description: This kit can be implemented in a variety of ways. To see examples of how to implement this kit in production visit the /dev_docs/search page in production.
- status: "stable"
- - name: "distribution_bar"
- platforms: *web
- description: Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers.
- status: "stable"
- - name: "legend"
- platforms: *web
- description: A key used to compare the variables and their value in any given graph.
- status: "stable"
- - name: "gauge"
- platforms: *web
- description:
- status: "stable"
- - name: "bar_graph"
- platforms: *web
- description: Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.
- status: "stable"
- - name: "circle_chart"
- platforms: *web
- description:
- status: "stable"
- - name: "line_graph"
- platforms: *web
- description: Line graphs are used to show changes in data over time.
- status: "stable"
- - name: "treemap_chart"
- platforms: *web
- description: Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
- status: "stable"
- - name: date_and_time_text_patterns
- description: ""
- components:
- - name: "date"
- platforms: *web
- description: Use to display the date. Year will not display if it is the current year.
- status: "stable"
- - name: "date_range_inline"
- platforms: *web
- description: Use to display a date range. Year will not show if it is the current year.
- status: "stable"
- - name: "date_range_stacked"
- platforms: *web
- description:
- status: "stable"
- - name: "date_stacked"
- platforms: *web
- description: Use to display the date, stacking month and day. Year will not show if it is the current year.
- status: "stable"
- - name: "date_time"
- platforms: *web
- description: Date Time is a composite kit that leverages the Date and Time kits. The Date Time kit is affected by time zones and defaults to "America/New_York".
- - name: "date_time_stacked"
- platforms: *web
- description:
- status: "stable"
- - name: "date_year_stacked"
- platforms: *web
- description: This kit is a simple option for displaying dates in a month, day and the year format.
- status: "stable"
- - name: "time"
- platforms: *web
- description: This kit consist of large display and table display format. It includes and icon, and a time zone.
- status: "stable"
- - name: "time_range_inline"
- platforms: *web
- description:
- status: "stable"
- - name: "time_stacked"
- platforms: *web
- description:
- status: "stable"
- - name: "timestamp"
- platforms: *all
- description: This low profile kit displays time. Elapsed, current, future, or otherwise.
- status: "stable"
- - name: "weekday_stacked"
- platforms: *web
- description:
- status: "stable"
- - name: form_and_dashboard_text_patterns
- description: ""
- components:
- - name: "contact"
- platforms: *web
- description: Use to display customer's or user's contact information.
- status: "stable"
- - name: "currency"
- platforms: *web
- description: Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels.
- status: "stable"
- - name: "home_address_street"
- platforms: *web
- description: This kit can be used to display the address for a homeowner/project. It contains street address, APT format, City, state and zip. A Project hashtag can be used as a prop to link back to a project.
- status: "stable"
- - name: "label_pill"
- platforms: *web
- description: This kit combines the caption and pill kit with all its variants.
- status: "stable"
- - name: "label_value"
- platforms: *web
- description: This kit can be very versatile when used to display text data.
- status: "stable"
- - name: "person"
- platforms: *web
- description: This kit is broken down into a first name last name format with normal and bold weighted text.
- status: "stable"
- - name: "person_contact"
- platforms: *web
- description: This kit can be used to display a person contact information.
- status: "stable"
- - name: "source"
- platforms: *web
- description: General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well.
- status: "stable"
- - name: "dashboard_value"
- platforms: *web
- description: Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use Currency Kit.
- status: "stable"
- - name: "stat_change"
- platforms: *web
- description: Displays the increase, decrease, or neutral change in data.
- status: "stable"
- - name: "stat_value"
- platforms: *web
- description: This kit was cerated for the main use as a dashboard display for numbers. A large label is an optional part if it needs more clarity.
- status: "stable"
- - name: "title_count"
- platforms: *web
- description: This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use.
- status: "stable"
- - name: "title_detail"
- platforms: *web
- description: This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.
- status: "stable"
- - name: form_elements
- description:
- components:
- - name: "file_upload"
- platforms: *web
- description:
- status: "stable"
- - name: "toggle"
- platforms: *web
- description: Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.
- status: "stable"
- - name: "form_pill"
- platforms: *web
- description:
- status: "stable"
- - name: "form"
- platforms: *rails_only
- description: The form kit provides consumers with a convenient, consistently styled