Integrating Playbook Kits into Nitro Components

Playbook Integration Guide

If you are looking to create a Runway Ticket to cover Ninja testing in Nitro, look here!

Update Playbook Version

Note: Playbook should only be added to Nitro through NitroTheme. This way we will only have to update the version in one place.

Update playbook to latest stable version in nitro_theme.gemspec

# components/nitro_theme/nitro_theme.gemspec

s.add_dependency "playbook_ui", "2.9.5"

Add Playbook Kit Styles

Check to be sure the styles for Playbook kits are imported into NitroTheme application.scss

/* components/nitro_theme/app/assets/stylesheets/nitro_theme/application.scss */

@import "playbook";

Bundle All Nitro Components

Note: This script supports alpha Playbook versions as well by auto-detection!

./upgrade_playbook_ui -v [VERSION_NUMBER_HERE]

Add Playbook Helpers to Nitro Component

Within your Nitro Component, add the following lines to the application_controller.rb

These lines give your component access to use Playbook Helpers such as pb_rails() which renders the Playbook kit, as well as the ability to find kit partials within the Playbook gem.

# components/YOUR_COMPONENT_NAME/app/controllers/application_controller.rb

helper Playbook::PbKitHelper

Add a test Playbook Kit

In your nitro component, in a view add a test kit to make sure Playbook is integrated correctly.

# components/YOUR_COMPONENT_NAME/app/views/.../index.html

<%= pb_rails("title", props: { text: "HELLO!!!!" }) %>