Generating a Kit

In playbook, there is a kit generator.

Usage

rails generate kit "Button"

Options

# Defining props
rails generate kit "Button" --props text variant disabled

When passing the props option through the generator, the Kit Class is generated will all props ready to use in Rails HTML Partial. This functionality does not yet exist for react. React props much be added manually for now.

Defining props with type

# Defining props with type
rails generate kit "Button" --props text:string variant:array disabled:boolean

When props with type is passed through the generator, it will kickstart your Kit Class in my_kit.rb by providing base validation.

def disabled
  true_value(configured_active, "true value", "false value")
end

def text
  default_value(configured_title, "")
end

def variant
  variant_options = %w(option1 option2)
  one_of_value(configured_variant, variant_options, "")
end

Rails Kit

Create RAILS kit? (y/N)
# If your kit will need a rails version, type `y` and hit enter

React Kit

Create REACT kit? (y/N)
# If your kit will need a react version, type `y` and hit enter

Files Generated

The kit generator creates all the files and imports a base kit needs, and is a great way to get started.

All kits

• Added to the main menu in config/data/menu.yml
• Kit SCSS Stylesheet created at app/pb_kits/playbook/pb_my_kit/_my_kit.scss
• Imported into the main kit stylesheet at app/pb_kits/playbook/site_styles/kit_style_index.scss
• Kit Example YML at app/pb_kits/playbook/pb_my_kit/docs/example.yml

Rails Kits

• Kit Class created at app/pb_kits/playbook/pb_my_kit/my_kit.rb
• Kit Rails Partial created at app/pb_kits/playbook/pb_my_kit/_my_kit.html.erb
• Kit Rails Example Usage at app/pb_kits/playbook/pb_my_kit/docs/_my_kit_default.html.erb

React Kits

• Kit React Component created at app/pb_kits/playbook/pb_my_kit/_my_kit.jsx
• Kit React Example Usage at app/pb_kits/playbook/pb_my_kit/docs/_my_kit_default.jsx
• Kit React Examples index at app/pb_kits/playbook/pb_my_kit/docs/index.js
• Kit React Pack file at app/pb_kits/playbook/packs/pb_my_kit.js
• Imported into main kit js at app/pb_kits/playbook/packs/kits.js
• Imported examples into examples js at app/pb_kits/playbook/packs/examples.js