Documentation

Utilities

Rails Designer has various smaller utilities packed. They range from small, reusable Stimulus controllers, to little JavaScript helpers to a custom confirmation dialog for Turbo and a reusable way to nested forms.

You can get any of the following utilities by running:

bin/rails generate rails_designer:utility #{utility_name}

All available utilities

The currently available utilities.

Toggle Class Controller

Useful little Stimulus controller that allows you to add one or many CSS classes to the given element.

bin/rails generate rails_designer:utility toggle_class

Turbo Frame Load Controller

This small controller allows you to load screens in modals or slide overs on page load. It listens for a URL param that can be customizable (the default is v, like so: localhost:3000?v=settings).

bin/rails generate rails_designer:utility turbo_frame_load

Smooth Turbo Stream Transitions

Add or remove elements from the page with grace.

To add elements use the following:

<%= turbo_stream_action_tag_with_block "prepend", target: "resources", data: {transition_enter: "transition ease-in duration-300", transition_enter_start: "opacity-0", transition_enter_end: "opacity-100"} do %>
  <%= render ResourceComponent.new(resource: @resource) %>
<% end %>

To remove an element use this:

<%= turbo_stream_action_tag_with_block "remove", target: dom_id(@resource), data: {transition_leave: "transition ease-out duration-300", transition_leave_start: "opacity-100", transition_leave_end: "opacity-0"} %>

bin/rails generate rails_designer:utility turbo_stream_transitions

Then add to your app/javascript/application.js: import "./utilities/turbo_stream_render.js". Make sure to run ./bin/rails stimulus:manifest:update to pick the new Stimulus controller.

String Helpers

General string helpers that every Rails developer misses in their JavaScript toolbox.

bin/rails generate rails_designer:utility string_helpers

Included are:

  • capitalize
  • dasherize
  • isBlank

Cookies helpers

Need to store or get a cookie. No need to rewrite that logic again and again.

bin/rails generate rails_designer:utility cookies_helpers

Local Storage helpers

Easier implementation for setting, getting and resetting a key/value into the localStorage.

bin/rails generate rails_designer:utility local_storage_helpers

Custom Confirm dialog

Turbo allows you to override the default confirm dialog. By adding this utility + just a few lines of code, your confirm dialogs have never looked this good!

bin/rails generate rails_designer:utility confirm_modal

Usage:

button_to "Delete…",
filters_path(filter),
  method: :delete,
  data: {
    turbo_method: "delete",
    turbo_confirm: "Really delete this filter?",
    turbo_confirm_confirm_label: "Yes, put it in the shredder!",
    turbo_confirm_cancel_label: "Oops, no go back…",
  }

Comes with three themes: light, dark, lightGlass

Nested Attributes

Rails Designer has a nested_attributes utility that gives you a reusable way to add nested forms for your ActiveModel’s. Read more about nested forms with Rails using Turbo in this article.

bin/rails generate rails_designer:utility nested_attributes survey question

The first attribute is the “parent” resource, the second argument the “nested/child” recource. After successfully running the generator, you are guided through a few steps to finalize the implementation.