Playbook Design System

Playbook is the first design system built for both Rails & React interfaces. Inspired by Velocity, Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Development teams at Power Home Remodeling, the largest home remodeler in the US.

Requirements

Docker 17.09 or later
Docker Compose 1.17.1 or later

Getting started

Run make it
Install overcommit hooks bin/overcommit
open http://localhost:8089

To clean up this project from your local machine, run make stop, which will drop all containers and networks associated with this project. To purge all resources, do make clean, which also removes images and volumes for a blank slate.

Making changes to the Gemfile:

* Stop the `make start` process * Run `make bundle` to (un-)install gems and update the `Gemfile.lock` * Re-start the server with `make start` To run the tests, do `bin/test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`

Additional resources

Building Playbook Kits

Testing Playbook Kits Locally

Testing React Kits locally

Inside of your Playbook repository, run yarn link.
Inside of the directory you want to test with playbook, run yarn link playbook-ui.
Run yarn hmr in your directory you want to test with playbook, and hard refresh (command + shift + R) your browser.
Test all the things!
When finished, inside of the directory you want to test with playbook, run yarn unlink playbook-ui.
Inside of your Playbook repository, run yarn unlink.

Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.