Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lookbook-hq/lookbook

A UI development environment for Ruby on Rails apps ✨
https://github.com/lookbook-hq/lookbook

components development lookbook partials phlex rails ruby ruby-on-rails styleguide viewcomponent

Last synced: 1 day ago
JSON representation

A UI development environment for Ruby on Rails apps ✨

Awesome Lists containing this project

README 

        








A UI development environment for Ruby on Rails applications.



Documentation  |  Demo site



Gem version

CI status






---





Lookbook combines a powerful component browser and preview system with an integrated documentation engine to help teams build robust, modular, maintainable user interfaces.



It's compatible with ViewComponent, Phlex, ActionView partials and more.





Read the docs →






---



[![Lookbook UI](.github/assets/lookbook_ui.png)](http://lookbook.build/)



## Development



Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for its UI.



This repository contains:



* The Lookbook source code ([`/app`](https://github.com/lookbook-hq/lookbook/tree/main/app), [`/lib`](https://github.com/lookbook-hq/lookbook/tree/main/lib), [`/config`](https://github.com/lookbook-hq/lookbook/tree/main/config), etc)

* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/lookbook-hq/lookbook/tree/main/docs)).

* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/lookbook-hq/lookbook/tree/main/spec)).



### Documentation site



The [Lookbook docs site](https://lookbook.build) is built using [Bridgetown](https://www.bridgetownrb.com/) and the source files can be found in the `./docs` directory.



To preview changes locally you can run a development version of the docs site:



1. Clone this repo

2. Install dependencies: `bundle install`

3. Start the app: `bin/docs`

4. Visit http://localhost:4000 



### Testing



Lookbook uses [RSpec](https://relishapp.com/rspec) for testing.



Tests can be run using the `rake spec` or `bundle exec rspec` commands.



The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook



### Releases



Lookbook uses [Release It!](https://github.com/release-it/release-it) to automate the release process.



Running `npm run release` will start the process of publishing a new release and walks though all the steps from picking a version number to publishing the updated gem.



Publishing a release requires write permissions for this repository (lookbook-hq/lookbook) and 2FA publish permissions for Lookbook on RubyGems.



## Contributing



Lookbook is an un-funded open source project and contributions of all types and sizes are most welcome!



Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/lookbook-hq/lookbook/discussions) and we will do our best to help you out.



## Contributors 



Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and continues to grow

& improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/lookbook-hq/lookbook/graphs/contributors):









  




## License



The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).