Skip to content

Schwad/shoelace-rails-ui

Repository files navigation

In active development 👷‍♂️ 🏗️ 🚧

At time of writing this gem gives you working Shoelace with the sl-light theme (tested against a new Rails 7 app). It also allows you to author components with the <%= sl_drawer %> ERB-flavored format. There's active work (see below) to get this gem to a stable and reliable stage, so feel free to contribute!

Shoelace::Rails::Ui

Get started with Shoelace today, the Rails way!

Quickstart

  1. bundle add shoelace-rails-ui
  2. rails g shoelace:install
  3. presto!
# ERB-flavored shoelace.
<%= sl_alert variant: "warning", open: true, closable: true do %>
  Hello from shoelace!!!
<% end %>

# Is the equivalent of
  <sl-alert variant="warning" open closable>
    Hello from shoelace!!!
  </sl-alert>

<%= sl_divider %>

# Nested blocks
<%= sl_details summary: "Togglable" do %>
  <%= sl_alert variant: "primary", open: true do %>
    This is doubly-nested shoelace
  <% end %>
<% end %>

#=>
#  <sl-details summary="Togglable">
#    <sl-alert variant="primary" open>
#      This is doubly-nested shoelace
#    </sl-alert>
#  </sl-details>

<%= sl_divider %>

# You can throw in raw shoelace as well to gradually migrate existing apps.
 <sl-dropdown>
  <sl-button slot="trigger" caret>But you aren't forced</sl-button>
  <sl-menu>
    <sl-menu-item>To use</sl-menu-item>
    <sl-menu-item>ERB</sl-menu-item>
    <sl-divider></sl-divider>
    <sl-menu-item checked>It's totally</sl-menu-item>
    <sl-menu-item disabled>optional :)</sl-menu-item>
  </sl-menu>
</sl-dropdown>

<%= sl_divider %>

# Works like a dream with Hotwire 🚀
<%= turbo_frame_tag :slow, src: static_pages_lazy_path, loading: :lazy do %>
  <%= sl_tag variant: "warning" do %>
    Loading lazily with hotwire!
  <% end %>
  <%= sl_progress_bar indeterminate: true %>
<% end %>

<%= sl_divider %>

What this gem gives you

  • Out-of-the-box shoelace
  • sl_my_component(my_attribute:"")-style ERB syntax for composing HTML with these components
  • sl_form helpers to write forms the Rails way, supercharged with Shoelace

Requirements

  • Rails 7.0 or greater with defaults (hotwire, importmaps, etc.)

What you don't need

  • custom javascript
  • custom css
  • yarn
  • webpack
  • node

Docs

All components

Example application that actually uses this

Workload for MVP (contribute today!)

Todo Status
rails generate shoelace:install one-step to shoelace
Render nested shoelace components
Include assets
V1 codegen
V2 codegen (with @kddnewton's guidance implemented) 🔲
Smoketest in CI
All components test covered 🔲
Github Action CI
Linting in CI 🔲
Render icons 🔲
Autogen docs site 🔲
Version parity with shoelace 🔲
BUG Details summary only accepts one word 🔲
BUG - double text render

Notes

Codegen could be generated by a scrape online instead of a full pull. ( Alernatively, unpkg )

License

The gem is available as open source under the terms of the MIT License.