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

  1. Run make it
  2. Install overcommit hooks bin/overcommit
  3. 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

Upgrading between versions

See docs/upgrade-guide

Releases

Development Environment

Building Playbook Kits

Testing Playbook Kits Locally

Testing React Kits locally

  1. Inside of your Playbook repository, run yarn link.
  2. Inside of the directory you want to test with playbook, run yarn link playbook-ui.
  3. Run yarn hmr in your directory you want to test with playbook, and hard refresh (command + shift + R) your browser.
  4. Test all the things!
  5. When finished, inside of the directory you want to test with playbook, run yarn unlink playbook-ui.
  6. 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.