Creating a new kit requires multiple files in multiple locations in the repo so to make the process easier, Playbook provides a Kit Generator that creates the base files that can be build upon. Servers do not need to be running to run the kit generator, but if they are, be sure to stop and restart the servers after running the generator to allow everything to update properly.

Usage

You must be inside playbook/playbook to run this command:

bin/rails generate kit "Button"

Options

# Defining props
bin/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 must be added manually within your TSX component for now.

Defining props with type

# Defining props with type
bin/rails generate kit "Button" --props text:string variant:enum disabled:boolean other:object

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

# Example boolean prop type
def disabled
  true_value(configured_active, "true value", "false value")
end

# Example string prop type
def text
  default_value(configured_title, "default value")
end

# Example enum prop type
def variant
  variant_options = %w(option1 option2)
  one_of_value(configured_variant, variant_options, "default value")
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.

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.tsx
• 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
• Kit added to Index for React Files at app/pb_kits/playbook/index.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

Note:

When adding to the menu.yml file, the generator does not reorder the list to place the new kit in alphabetical order but simply places it at the bottom of the list. Placing the new kit in the correct place alphabetically can be done manually.