Combo is a full stack component library for Rails inspired by Liveview and Livewire. The goal of this library is to provide a better abstraction over traditional MVC for building admin and backoffice applications along with a rich collection of components and view helpers.

1. Defining components
2. Using components
3. State management
   • Request params
   • Attributes
   • Action payload
4. Action responses
   • Clear forms
   • Flash
   • Redirect
   • Reload
5. Helpers and components library
   • Tables
   • Date picker

Components encapsulate views and backend actions into a single unit. Views work similar to Rails' ERB templates, and actions work similar to controllers actions, except you don't have to add a route entry.

class MyApp::Admin::UserDetails < Combo::Component
  attribute :user, User

  def view
    inline <<~ERB
      <%= cb_panel do %>
        <%= cb_table do %>
          <%= cb_row "Email", user.email %>
          <%= cb_row "Registration date", user.registration_date %>
        <% end %>

        <%= cb_dropdown do %>
          <%= cb_button "Actions" %>

          <%= cb_menu do %>
            <%= cb_menu_item "Unlock login", to: action(:unlock_login) %>
            <%= cb_menu_item "Send password reset email", to: action(:send_password_reset_email) %>
          <% end %>
        <% end %>
      <% end %>
    ERB
  end

  def unlock_login
    user.unlock_login!

    client.flash_success "Login unlocked"
  end

  def send_password_reset_email
    token = user.generate_password_reset_token

    UserMailer.password_reset(user, token).deliver_now

    client.flash_success "Password reset email sent"
  end
end

You can use components by either rendering them in a regular rails view or mounting them in a route. To render a component in a view call the render method passing the component and attributes. For example, in myapp/admin/users/index.html.erb:

<h1>User <%= user.id %></h1>

<div>
  <%= render MyApp::Admin::UserDetails, user: user %>
</div>

To render a component as a full page from a route, add the following entry to your routes.rb:

Rails.application.routes.draw do
  get '/users/:user_id', to: MyApp::Admin::UserDetails
end

There are three pieces of state in a component:

1. Request params
2. Attributes
3. Action payload

Components can respond to requests like controllers. For example, in your routes.rb:

Rails.application.routes.draw do
  get '/payments/:payment_id', to: MyApp::PaymentDetails
end