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.

Note: 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