Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork43
Component based web UIs in pure Ruby for Rails. Boost your productivity & easily create component based web UIs in pure Ruby.
License
matestack/matestack-ui-core
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Boost your productivity & easily create component based web UIs in pure Ruby.
matestack-ui-core enables you to craft maintainable web UIs in pure Ruby, skipping ERB and HTML. UI code becomes a native and fun part of your Rails app.matestack-ui-core can progressively replace the classic Rails-View-Layer. You are able to useit alongside your classic views.
matestack-ui-core is tested against:
- Rails 7.0.1 + Ruby 3.0.0
- Rails 6.1.1 + Ruby 3.0.0
- Rails 6.1.1 + Ruby 2.7.2
- Rails 6.0.3.4 + Ruby 2.6.6
- Rails 5.2.4.4 + Ruby 2.6.6
Rails versions below 5.2 are not supported.
Documentation can be foundhere
A getting started guide can be foundhere
Changelog can be foundhere
As a low-barrier feedback channel for our early users, we have set up a Discord server that can be foundhere. You are very welcome to ask questions and send us feedback there!
We are happy to accept contributors of any kind! In order to make it as easy and fun as possible to contribute tomatestack-ui-core, we would like to onboard contributors personally! Best way to become a contributor: Ping us on Discord! We will schedule a video call with you and show you, how and what to work on :)
Craft your UI based on your components written in pure Ruby. Utilizing Ruby's amazing language features, you're able to create a cleaner and more maintainable UI implementation.
Create Ruby classes within your Rails project and call matestack's core components through a Ruby DSL in order to craft your UIs.The Ruby method "div" for example calls one of the static core components, responsible for rendering HTML tags. A component can take Strings, Integers Symbols, Arrays or Hashes (...) as optional properties (e.g. "title") or require them (e.g. "body").
app/matestack/components/card.rb
classComponents::Card <Matestack::Ui::Componentrequired:bodyoptional:titleoptional:imagedefresponsedivclass:"card shadow-sm border-0 bg-light"doimgpath:context.image,class:"w-100"ifcontext.image.present?divclass:"card-body"doh5context.titleifcontext.title.present?paragraphcontext.body,class:"card-text"endendendend
Components can be then called on Rails views (not only! see below), enabling you to create a reusable card components, abstracting UI complexity in your own components.
app/views/your_view.html.erb
<!-- some other erb markup --><%=Components::Card.call(title:"hello",body:"world")%><!-- some other erb markup -->
Split your UI implementation into multiple small chunks helping others (and yourself) to better understand your implementation.Using this approach helps you to create a clean, readable and maintainable codebase.
app/matestack/components/card.rb
classComponents::Card <Matestack::Ui::Componentrequired:bodyoptional:titleoptional:imageoptional:footerdefresponsedivclass:"card shadow-sm border-0 bg-light"doimgpath:context.image,class:"w-100"ifcontext.image.present?card_contentcard_footerifcontext.footer.present?endenddefcard_contentdivclass:"card-body"doh5context.titleifcontext.title.present?paragraphcontext.body,class:"card-body"endenddefcard_footerdivclass:"card-footer text-muted"doplaincontext.footerendendend
app/views/your_view.html.erb
<!-- some other erb markup --><%=Components::Card.call(title:"hello",body:"world",footer:"foo")%><!-- some other erb markup -->
Because it's just a Ruby class, you can use class inheritance in order to further improve the quality of your UI implementation.Class inheritance can be used to easily create variants of UI components but still reuse parts of the implementation.
app/matestack/components/blue_card.rb
classComponents::BlueCard <Components::Carddefresponsedivclass:"card shadow-sm border-0 bg-primary text-white"doimgpath:context.image,class:"w-100"ifcontext.image.present?card_content#defined in parent classcard_footerifcontext.footer.present?#defined in parent classendendend
app/views/your_view.html.erb
<!-- some other erb markup --><%=Components::BlueCard.call(title:"hello",body:"world")%><!-- some other erb markup -->
Just like you used matestack's core components on your own UI component, you can use your own UI components within other custom UI components.You decide when using a Ruby method partial should be replaced by another self contained UI component!
app/matestack/components/card.rb
classComponents::Card <Matestack::Ui::Componentrequired:bodyoptional:titleoptional:imagedefresponsedivclass:"card shadow-sm border-0 bg-light"doimgpath:context.image,class:"w-100"ifcontext.image.present?# calling the CardBody component rather than using Ruby method partialsComponents::CardBody.call(title:context.title,body:context.body)endendend
app/matestack/components/card_body.rb
classComponents::CardBody <Matestack::Ui::Componentrequired:bodyoptional:titledefresponse# Just an example. Would make more sense, if this component had# a more complex structuredivclass:"card-body"doh5context.titleifcontext.title.present?paragraphcontext.body,class:"card-body"endendend
Sometimes it's not enough to just pass simple data into a component. No worries! You can just yield a block into your components!Using this approach gives you more flexibility when using your UI components. Ofcourse yielding can be used alongside passing in simple params.
app/matestack/components/card.rb
classComponents::Card <Matestack::Ui::Componentrequired:bodyoptional:titleoptional:imagedefresponsedivclass:"card shadow-sm border-0 bg-light"doimgpath:context.image,class:"w-100"ifcontext.image.present?Components::CardBody.call()do# yielding a block into the card_body componenth5context.titleifcontext.title.present?paragraphcontext.body,class:"card-body"endendendend
app/matestack/components/card_body.rb
classComponents::CardBody <Matestack::Ui::Componentdefresponse# Just an example. Would make more sense, if this component had# a more complex structuredivclass:"card-body"doyieldifblock_given?endendend
If you need to inject multiple blocks into your UI component, you can use "slots"!Slots help you to build complex UI components with multiple named content placeholders for highest implementation flexibility!
app/matestack/components/card.rb
classComponents::Card <Matestack::Ui::Componentrequired:bodyoptional:titleoptional:imagedefresponsedivclass:"card shadow-sm border-0 bg-light"doimgpath:context.image,class:"w-100"ifcontext.image.present?Components::CardBody.call(slots:{heading:method(:heading_slot),body:method(:body_slot)})endenddefheading_sloth5context.titleifcontext.title.present?enddefbody_slotparagraphcontext.body,class:"card-body"endend
app/matestack/components/card_body.rb
classComponents::CardBody <Matestack::Ui::Componentrequired:slotsdefresponse# Just an example. Would make more sense, if this component had# a more complex structuredivclass:"card-body"dodivclass:"heading-section"doslot:headingenddivclass:"body-section"doslot:bodyendendendend
matestack-ui-core is an Open Source project licensed under the terms of theMIT license
About
Component based web UIs in pure Ruby for Rails. Boost your productivity & easily create component based web UIs in pure Ruby.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.