shoelace-rails 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c7cf138c772d734257018fa691d7082b04caf56da45e2d5243041d9a90e345b
-  data.tar.gz: 1902dd8b4ee4d41e57dd3ede4bfe4c71f21a1fc7607d02524e052667a3481330
+  metadata.gz: 6bf02de3fbe6ef35ad4c464e666bd7ace7bf0c2e673b0767afea4d6b87522749
+  data.tar.gz: 73abb906c86ffc3f4a945f73f3a97e3cd335c1cb4245b82362cf53c3587619d5
 SHA512:
-  metadata.gz: e6fb93a87eabac57355bd4a2a7d567d1e94680c0b59d0dc40731d46b76b3eb4ca74cce56f6c720b7bd63f4845de37a93a735a8013ea21e3d1d7a3c8b5aa22722
-  data.tar.gz: de7ddf7f75dee4a26b71eb95cf1ae3d29e9884080a25abe8f575352b0068a3c5d5e459852947ce8d286999cec6ca218efd77f9587f32ba9c44efd56ceac8fc6f
+  metadata.gz: 1e7a5bca7b14951f97b54c9de1be69698ceebb63a421be912cc8f692ebec8ed075ebdf58a4fbc9d9200c296e3150ae63f41f6a6a40f62fc368c1a54044905a9b
+  data.tar.gz: 5d09b9294065025cb30762a152c3b037739790a8b16ff5e2178bcb98afc0592756447ba0273967450783e11fbfd9863be5e11027a61074ed622e35d380a95dc5

data/.github/workflows/main.yml

@@ -9,21 +9,24 @@ jobs:
     strategy:
       matrix:
         ruby_version:
+          - '3.2'
           - '3.1'
           - '3.0'
           - '2.7'
-          - 'jruby-9.3.3.0'
+          - 'jruby-9.3'
+          - 'jruby-9.4'
         gemfile:
           - gemfiles/rails_70.gemfile
           - gemfiles/rails_61.gemfile
           - gemfiles/rails_60.gemfile
-    runs-on: ubuntu-18.04
+        exclude:
+          - ruby_version: 'jruby-9.3'
+            gemfile: gemfiles/rails_70.gemfile
+    runs-on: ubuntu-22.04
     env:
       BUNDLE_GEMFILE: ${{ matrix.gemfile }}
     steps:
-      - uses: actions/checkout@v2
-      - name: Install curl
-        run: sudo apt-get install curl libcurl4-openssl-dev
+      - uses: actions/checkout@v3
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
@@ -32,13 +35,14 @@ jobs:
       - run: bundle exec rake test
 
   system:
-    runs-on: ubuntu-18.04
+    needs: unit
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.1.0
+          ruby-version: 3.2.0
           bundler-cache: true
       - name: Install dependencies
         run: |
@@ -49,14 +53,47 @@ jobs:
       - name: Run the system test in the dummy app
         run: rake test:system
 
+  rails_edge:
+    needs: system
+    runs-on: ubuntu-22.04
+    env:
+      BUNDLE_GEMFILE: gemfiles/rails_edge.gemfile
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.1
+          bundler-cache: true
+      - run: bundle exec rake test || echo "Rails edge test is done."
+
+  ruby_edge:
+    needs: system
+    strategy:
+      matrix:
+        gemfile:
+          - gemfiles/rails_edge.gemfile
+          - gemfiles/rails_70.gemfile
+    runs-on: ubuntu-22.04
+    env:
+      BUNDLE_GEMFILE: ${{ matrix.gemfile }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 'ruby-head'
+          bundler-cache: true
+      - run: bundle exec rake || echo "Ruby edge test is done."
+
 #  browser_tests:
-#    runs-on: ubuntu-18.04
+#    runs-on: ubuntu-22.04
 #    steps:
-#      - uses: actions/checkout@v2
+#      - uses: actions/checkout@v3
 #      - name: Set up Ruby
 #        uses: ruby/setup-ruby@v1
 #        with:
-#          ruby-version: 3.1.0
+#          ruby-version: 3.2.0
 #          bundler-cache: true
 #      - name: Install dependencies
 #        run: |

data/Appraisals

@@ -1,5 +1,5 @@
 appraise "rails_edge" do
-  git "https://github.com/rails/rails.git" do
+  git "https://github.com/rails/rails.git", branch: "main" do
     gem "rails"
     gem "railties"
     gem "activesupport"
@@ -7,9 +7,9 @@ appraise "rails_edge" do
 end
 
 appraise "rails_70" do
-  gem "rails", "~> 6.1.0"
-  gem "railties", "~> 6.1.0"
-  gem "activesupport", "~> 6.1.0"
+  gem "rails", "~> 7.0.0"
+  gem "railties", "~> 7.0.0"
+  gem "activesupport", "~> 7.0.0"
 end
 
 appraise "rails_61" do

data/CHANGELOG.md

@@ -1,3 +1,40 @@
-## [0.1.0] - 2022-02-17
+## v0.3.0
+
+_<sup>released at 2023-01-05 08:47:12 UTC</sup>_
+
+#### Features
+
+- No longer requires the `sl-form` component (`4fdbfa15`)
+- The `#text_area` method now accepts a block (`5092dc1c`)
+- Allow overriding the value attribute for `<sl-select>` (`1f38be73`)
+- Auto-display labels whenever possible (`c1e3a950`)
+- `<sl-select>` now always has a label by default (`f9fb5f0c`)
+- Support Ruby 3.2 (`b286cbc1`)
+- Add `#sl_button_to` (`e1bdedba`)
+- Add `#sl_icon_tag` (`8a2187a2`)
+- Add `#sl_avatar_tag` (`77dccdb2`)
+- Allow using the `Shoelace::FormBuilder` in a cleaner way (`43dea330`)
+
+#### Bug Fixes
+
+- Fixes a bug where the gem rake tasks are not loaded (`115bfb3d`)
+- Fixes a bug where values are not properly passed in to `<sl-textarea>` (`3d163845`)
+- Make sure yarn install is always executed before copying shoelace assets (`98018a27`)
+- Fixes a bug where the `@object` needs to respond to `#errors` (`bb981ed0`)
+- Fixes a bug where the `size` attr is ignored by the `#text_area` method (`8bc4c378`)
+- Fixes a bug where unchecked checkbox values are not captured (`dc658bea`)
+
+## [v0.2.0](https://github.com/yuki24/shoelace-rails/tree/v0.2.0)
+
+_<sup>released at 2022-06-24 05:14:01 UTC</sup>_
+
+#### Features
+
+- Do not require the `copy-webpack-plugin` to set up Shoelace so the gem works with any js bundler.
+
+## [v0.1.0](https://github.com/yuki24/shoelace-rails/tree/v0.1.0)
+
+_<sup>released at 2022-02-17 13:17:09 UTC</sup>_
+
+First release!
 
-- First release!

data/README.md

@@ -4,10 +4,6 @@ The `shoelace-rails` gem adds useful helper methods for [Shoelace.style](https:/
 
 ## Installation
 
-This document assumes that you use the [`webpacker`](https://github.com/rails/webpacker) or
-the [`jsbundling-rails`](https://github.com/rails/jsbundling-rails) gem. You may have to tweak the examples here if
-you do not use it. However, the principle here should be the same regardless of the JS bundler you use.
-
 Add this line to your application's Gemfile:
 
 ```ruby
@@ -23,7 +19,7 @@ $ bundle install
 Additionally, you need to add the following npm packages:
 
 ```sh
-$ yarn add @shoelace-style/shoelace copy-webpack-plugin
+$ yarn add @shoelace-style/shoelace
 ```
 
 ## Set up CSS
@@ -50,66 +46,31 @@ import "@shoelace-style/shoelace/dist/themes/dark.css" // Optional dark mode
 
 ## Set up Javascript
 
-In order to use Shoelace the icons need to be copied to the `public/assets` directory so they will show pu properly.
-
-If you are using the `jsbundling-rails` gem and have `webpack.config.js` in the top level directory of your project, Add th
-e configuration for the `CopyPlugin`:
+In this README, it is assumed that you are using a JS bundler such as `webpack` or `esbuild`. In order to define all
+the custome elements,  import the shoelace dependency in the entrypoint file:
 
 ```js
-// webpack.config.js
-const CopyPlugin = require("copy-webpack-plugin")
-const path = require('path')
-
-module.exports = {
-  ...,
-  plugins: [
-    new CopyPlugin({
-      patterns: [
-        {
-          from: path.resolve(__dirname, "node_modules/@shoelace-style/shoelace/dist/assets"),
-          to: path.resolve(__dirname, "public/assets"),
-        },
-      ],
-    }),
-  ],
-}
-```
-
-If you are using the `webpacker` gem, you could add the same configuration but to `config/webpack/environment.js`:
+import "@shoelace-style/shoelace"
+```
 
-```js
-// config/webpack/environment.js
-const { environment } = require('@rails/webpacker')
-const path = require('path')
-const CopyPlugin = require('copy-webpack-plugin')
+That's it!
 
-// Add shoelace icons to webpack's build process
-environment.plugins.append(
-  'CopyPlugin',
-  new CopyPlugin({
-    patterns: [
-      {
-        from: path.resolve(__dirname, '../../node_modules/@shoelace-style/shoelace/dist/assets'),
-        to: path.resolve(__dirname, '../../public/packs/js/assets')
-      }
-    ]
-  })
-)
+### Shoelace Icons
 
-module.exports = environment
-```
+Shoelace icons are automatically set up to load properly, so you don't need to add any extra code. More specifically,
 
-Finally, import the shoelace dependency in the entrypoint file:
+ * In development, the icons are served by the `ActionDispatch::Static` middleware, directly from the
+   `node_modules/@shoelace-style/shoelace/dist/assets/icons` directory.
+ * In production, the icon files are automatically copied into the `public/assets` directory as part of the
+   `assets:precompile` rake task.
 
-```js
-import "@shoelace-style/shoelace"
-```
+## View Helpers
 
-That's it!
+As explained above, this gem provides drop-in replacements to Rails view helpers.
 
-## View Helpers
+### Form Helpers
 
-As explained above, this gem provides drop-in replacements to. Here is a short example of how the form helper works:
+The `sl_form_with` or `sl_form_for` method could be used to generate a form with the Shoelace components:
 
 ```erb
 <%= sl_form_for @user do |form| %>
@@ -133,7 +94,7 @@ As explained above, this gem provides drop-in replacements to. Here is a short e
 And this code will produce:
 
 ```html
-<sl-form class="new_user" id="new_user" data-remote="true" action="/" accept-charset="UTF-8" method="post">
+<form class="new_user" id="new_user" data-remote="true" action="/" accept-charset="UTF-8" method="post">
   <sl-input label="Name" type="text" name="user[name]" id="user_name"></sl-input>
   <sl-input label="Password" type="password" name="user[password]" id="user_password"></sl-input>
   <sl-color-picker value="#ffffff" name="user[color]" id="user_color"></sl-color-picker>
@@ -151,7 +112,82 @@ And this code will produce:
   </sl-select>
 
   <sl-button submit="true" type="primary" data-disable-with="Create User">Create User</sl-button>
-</sl-form>
+</form>
+```
+
+#### Using The `sl-select` component with `multiple`
+
+TDB
+
+#### Using the Shoelace FormBuilder with other gems
+
+Sometimes you want to use the Shoelace FormBuilder with other gems, such as [ransack](https://github.com/activerecord-hackery/ransack).
+In this case, you can not use the `sl_form_for` or `sl_form_with` methods in tandem with `ransack`, but you can use
+the `Shoelace::FormBuilder` with e.g. [the `search_form_for` method](https://activerecord-hackery.github.io/ransack/getting-started/simple-mode/#form-helper):
+
+```erb
+<%= search_form_for @q, builder: Shoelace::FormBuilder do |form| %>
+  ...
+<% end %>
+```
+
+### Tag Helpers
+
+#### `#sl_avatar_tag`
+
+The `@sl_avatar_tag` method behaves just like the `image_tag` method.
+
+```erb
+<%= sl_avatar_tag "/path/to/image.jpg" %>
+```
+
+Will produce:
+
+```html
+<sl-avatar image="/path/to/image.jpg"></sl-avatar>
+```
+
+#### `#sl_button_to`
+
+The `sl_button_to` method behaves just like the `link_to` method. Note that this is slightly different from the
+built-in `button_to` method.
+
+Without a block:
+
+```erb
+<%= sl_button_to "Next Page", "/components?page=2" %>
+```
+
+```html
+<sl-button href="/components?page=2">
+  Next Page
+</sl-button>
+```
+
+With a block:
+
+```erb
+<%= sl_button_to "/components?page=2" do %>
+  Next Page 
+<% end %>
+```
+
+```html
+<sl-button href="/components?page=2">
+ Next Page
+</sl-button>
+```
+
+#### `#sl_icon_tag`
+
+The `sl_icon_tag` method takes the `name` attribute value as the first argument:
+
+```erb
+<%= sl_icon_tag "apple" %>
+```
+
+```html
+<sl-icon name="apple"></sl-icon>
 ```
 
 ## Development

data/app/helpers/shoelace/form_helper.rb

@@ -2,11 +2,8 @@
 
 module Shoelace
   module FormHelper
-    mattr_accessor :use_sl_form_tag
-    self.use_sl_form_tag = false
-
-    mattr_accessor :remote_form
-    self.remote_form = false
+    mattr_accessor :invalid_input_class_name
+    self.invalid_input_class_name = nil
 
     class ShoelaceInputField < ActionView::Helpers::Tags::TextField #:nodoc:
       attr_reader :field_type
@@ -24,7 +21,8 @@ module Shoelace
 
         options["size"] = options["maxlength"] unless options.key?("size")
         options["type"] ||= field_type
-        options["invalid"] = options.fetch("invalid") { @object.errors[@method_name].presence }
+        options["class"] ||= [options["class"], Shoelace::FormHelper.invalid_input_class_name].compact.join(" ") if @object.respond_to?(:errors) && @object.errors[@method_name].present?
+
         add_default_name_and_id(options)
 
         @template_object.content_tag('sl-input', '', options, &block)
@@ -68,10 +66,12 @@ module Shoelace
     end
 
     class ShoelaceTextArea < ActionView::Helpers::Tags::TextArea #:nodoc:
-      def content_tag(tag_name, content, options)
-        options[:value] = content if content.present?
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"] = options.fetch("value") { value_before_type_cast }
+        add_default_name_and_id(options)
 
-        tag_name.to_s == 'textarea' ? super('sl-textarea', '', options) : super
+        @template_object.content_tag("sl-textarea", '', options, &block)
       end
     end
 
@@ -86,7 +86,7 @@ module Shoelace
 
       def select_content_tag(option_tags, _options, html_options)
         html_options = html_options.stringify_keys
-        html_options['value']= value
+        html_options['value'] ||= value
         add_default_name_and_id(html_options)
 
         @template_object.content_tag("sl-select", option_tags, html_options)
@@ -100,7 +100,7 @@ module Shoelace
 
       def select_content_tag(option_tags, _options, html_options)
         html_options = html_options.stringify_keys
-        html_options['value']= value
+        html_options['value'] ||= value
         add_default_name_and_id(html_options)
 
         @template_object.content_tag("sl-select", option_tags, html_options)
@@ -120,10 +120,18 @@ module Shoelace
           add_default_name_and_id(options)
         end
 
-        if block_given?
-          @template_object.content_tag('sl-checkbox', '', options, &block)
+        include_hidden = options.delete("include_hidden") { true }
+
+        sl_checkbox_tag = if block_given?
+                            @template_object.content_tag('sl-checkbox', '', options, &block)
+                          else
+                            @template_object.content_tag('sl-checkbox', @method_name.to_s.humanize, options)
+                          end
+
+        if include_hidden
+          hidden_field_for_checkbox(options) + sl_checkbox_tag
         else
-          @template_object.content_tag('sl-checkbox', @method_name.to_s.humanize, options)
+          sl_checkbox_tag
         end
       end
     end
@@ -198,7 +206,7 @@ module Shoelace
       alias color_picker color_field
 
       def range_field(method, **options)
-        ShoelaceRange.new(object_name, method, @template, options.with_defaults(object: @object)).render
+        ShoelaceRange.new(object_name, method, @template, options.with_defaults(object: @object, label: method.to_s.humanize)).render
       end
       alias range range_field
 
@@ -207,8 +215,8 @@ module Shoelace
       end
       alias switch switch_field
 
-      def text_area(method, **options)
-        ShoelaceTextArea.new(object_name, method, @template, options.with_defaults(object: @object, resize: 'auto')).render
+      def text_area(method, **options, &block)
+        ShoelaceTextArea.new(object_name, method, @template, options.with_defaults(object: @object, label: method.to_s.humanize, resize: 'auto')).render(&block)
       end
 
       def check_box(method, options = {}, checked_value = "1", unchecked_value = "0", &block)
@@ -216,11 +224,11 @@ module Shoelace
       end
 
       def select(method, choices = nil, options = {}, html_options = {}, &block)
-        ShoelaceSelect.new(object_name, method, @template, choices, options.with_defaults(object: @object), html_options, &block).render
+        ShoelaceSelect.new(object_name, method, @template, choices, options.with_defaults(object: @object), html_options.with_defaults(label: method.to_s.humanize), &block).render
       end
 
       def collection_select(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
-        ShoelaceCollectionSelect.new(object_name, method, @template, collection, value_method, text_method, options.with_defaults(object: @object), html_options, &block).render
+        ShoelaceCollectionSelect.new(object_name, method, @template, collection, value_method, text_method, options.with_defaults(object: @object), html_options.with_defaults(label: method.to_s.humanize), &block).render
       end
 
       def collection_radio_buttons(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
@@ -234,118 +242,19 @@ module Shoelace
       end
     end
 
-    DEFAULT_FORM_PARAMETERS = {
-      builder: ShoelaceFormBuilder,
-      data: {
-        remote: true,
-      }
-    }
-
-    DEFAULT_TURBO_FORM_PARAMETERS = {
-      builder: ShoelaceFormBuilder,
-    }
-
+    DEFAULT_FORM_PARAMETERS = { builder: ShoelaceFormBuilder }
     DIVIDER_TAG = "<sl-divider></sl-divider>".html_safe
-    OPENING_SL_FORM_TAG = '<sl-form'.html_safe
-    CLOSING_SL_FORM_TAG = '</sl-form>'.html_safe
-    OPENING_SL_TURBO_FORM_TAG = '<sl-turbo-form'.html_safe
-    CLOSING_SL_TURBO_FORM_TAG = '</sl-turbo-form>'.html_safe
 
-    private_constant :DEFAULT_FORM_PARAMETERS, :DIVIDER_TAG, :OPENING_SL_FORM_TAG, :CLOSING_SL_FORM_TAG, :OPENING_SL_TURBO_FORM_TAG, :CLOSING_SL_TURBO_FORM_TAG
+    private_constant :DEFAULT_FORM_PARAMETERS, :DIVIDER_TAG
 
     def sl_form_for(*args, **options, &block)
-      form_params = if ::Shoelace::FormHelper.remote_form
-                      DEFAULT_FORM_PARAMETERS.deep_merge(options)
-                    else
-                      DEFAULT_FORM_PARAMETERS.without(:data).merge(options)
-                    end
-
-      content = form_for(*args, **form_params, &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_FORM_TAG
-        content[-7, 7] = CLOSING_SL_FORM_TAG
-      end
-
-      content
+      form_for(*args, **DEFAULT_FORM_PARAMETERS, **options, &block)
     end
 
     def sl_form_with(**args, &block)
-      content = form_with(**args, **DEFAULT_FORM_PARAMETERS.except(:data), &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_FORM_TAG
-        content[-7, 7] = CLOSING_SL_FORM_TAG
-      end
-
-      content
+      form_with(**args, **DEFAULT_FORM_PARAMETERS, &block)
     end
 
-    def sl_form_tag(url_for_options = {}, options = {}, &block)
-      content = form_tag(url_for_options, options.with_defaults(DEFAULT_FORM_PARAMETERS.except(:builder)), &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_FORM_TAG
-        content[-7, 7] = CLOSING_SL_FORM_TAG
-      end
-
-      content
-    end
-
-    def sl_turbo_form_for(*args, **options, &block)
-      content = form_for(*args, **DEFAULT_TURBO_FORM_PARAMETERS.merge(options), &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_TURBO_FORM_TAG
-        content[-7, 7] = CLOSING_SL_TURBO_FORM_TAG
-      end
-
-      content
-    end
-
-    def sl_turbo_form_with(**args, &block)
-      content = form_with(**args, **DEFAULT_TURBO_FORM_PARAMETERS, &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_TURBO_FORM_TAG
-        content[-7, 7] = CLOSING_SL_TURBO_FORM_TAG
-      end
-
-      content
-    end
-
-    def sl_turbo_form_tag(url_for_options = {}, options = {}, &block)
-      content = form_tag(url_for_options, options.with_defaults(DEFAULT_TURBO_FORM_PARAMETERS.except(:builder)), &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_TURBO_FORM_TAG
-        content[-7, 7] = CLOSING_SL_TURBO_FORM_TAG
-      end
-
-      content
-    end
-
-    # Creates a generic +<sl-button>+ element.
-    def sl_button_tag(**attrs, &block)
-      content_tag("sl-button", **attrs, &block)
-    end
-
-    # Not providing this helper for now due to potentially untraceable HTML. E.g.
-    #
-    #   <a href="...">
-    #     <sl-button>...</sl-button>
-    #   </a>
-    #
-    # may be trackable and traceable by search bots and scrapers, but:
-    #
-    #   <sl-button href="...">...</sl-button>
-    #
-    # may not be. In the mean time, it is advisable to wrap a <sl-button> tag with an <a> tag.
-    #
-    # def sl_button_to(href, **attrs, &block)
-    #   sl_button_tag(href: href, **attrs, &block)
-    # end
-
     # Creates a submit button with the text value as the caption, with the +submit+ attribute.
     def sl_submit_tag(value = 'Save changes', **options)
       options = options.deep_stringify_keys
@@ -448,4 +357,6 @@ module Shoelace
       RUBY
     end
   end
+
+  FormBuilder = FormHelper::ShoelaceFormBuilder
 end

data/app/helpers/shoelace/tag_helper.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Shoelace
+  module TagHelper
+    # Creates a generic +<sl-button>+ element.
+    def sl_button_tag(**attrs, &block)
+      content_tag("sl-button", **attrs, &block)
+    end
+
+    # Creates an <sl-button> tag with the href value as the caption.
+    def sl_button_to(body, href = nil, **attrs, &block)
+      if block_given?
+        sl_button_tag(href: body, **(href || {}), **attrs, &block)
+      else
+        sl_button_tag(href: href, **attrs) { body }
+      end
+    end
+
+    def sl_icon_tag(name, **attrs)
+      tag.sl_icon(name: name, **attrs)
+    end
+
+    def sl_avatar_tag(source, **attrs, &block)
+      tag.sl_avatar(image: source, **attrs, &block)
+    end
+  end
+end

data/gemfiles/rails_70.gemfile

@@ -4,8 +4,8 @@ source "https://rubygems.org"
 
 gem "rake", "~> 13.0"
 gem "rails-dom-testing", git: "https://github.com/rails/rails-dom-testing.git", ref: "8f5acdfc"
-gem "rails", "~> 6.1.0"
-gem "railties", "~> 6.1.0"
-gem "activesupport", "~> 6.1.0"
+gem "rails", "~> 7.0.0"
+gem "railties", "~> 7.0.0"
+gem "activesupport", "~> 7.0.0"
 
 gemspec path: "../"

data/gemfiles/rails_edge.gemfile

@@ -2,7 +2,7 @@
 
 source "https://rubygems.org"
 
-git "https://github.com/rails/rails.git" do
+git "https://github.com/rails/rails.git", branch: "main" do
   gem "rails"
   gem "railties"
   gem "activesupport"

data/lib/shoelace/engine.rb

@@ -2,7 +2,5 @@
 
 module Shoelace
   class Engine < ::Rails::Engine #:nodoc:
-    config.shoelace = ActiveSupport::OrderedOptions.new
-    config.shoelace.use_sl_form_tag = false
   end
 end

data/lib/shoelace/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Shoelace
   module Rails
-    VERSION = "0.1.0"
+    VERSION = "0.3.0"
   end
 end

data/lib/shoelace/rails.rb

@@ -1,7 +1,11 @@
 # frozen_string_literal: true
 
 require_relative "rails/version"
-require_relative "engine" if defined?(::Rails::Railtie)
+
+if defined?(::Rails::Railtie)
+  require_relative "engine"
+  require_relative "railtie"
+end
 
 module Shoelace
   module Rails

data/lib/shoelace/railtie.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+require 'action_dispatch/middleware/static'
+
+module Shoelace
+  # The only reason this class exists is to clarify that we have a custom static file server after
+  # `ActionDispatch::Static`. We could just use `ActionDispatch::Static` directly, but it would make the result of
+  # `rake middleware` more difficult to understand, as the output would look like:
+  #
+  #    use ...
+  #    use ActionDispatch::Static
+  #    use ActionDispatch::Static # Why do we use the same middleware twice?
+  #    use ...
+  #
+  # It is much more straightforward if it looks like:
+  #
+  #    use ...
+  #    use ActionDispatch::Static
+  #    use Shoelace::AssetProvider
+  #    use ...
+  #
+  class AssetProvider < ActionDispatch::Static; end
+
+  class Railtie < ::Rails::Railtie #:nodoc:
+    config.shoelace = ActiveSupport::OrderedOptions.new
+
+    # Path to the shoelace assets.
+    config.shoelace.dist_path = "node_modules/@shoelace-style/shoelace/dist"
+
+    # Class name that is added to a form input when the corresponding attribute has an `ActiveModel` error.
+    config.shoelace.invalid_input_class_name = nil
+
+    initializer "shoelace.use_rack_middleware" do |app|
+      icon_dir = File.join(app.paths["public"].first, "assets/icons")
+
+      if !Dir.exist?(icon_dir)
+        path    = app.root.join(app.config.shoelace.dist_path).to_s
+        headers = app.config.public_file_server.headers || {}
+
+        app.config.middleware.insert_after ActionDispatch::Static, Shoelace::AssetProvider, path, index: "index.html", headers: headers
+      end
+    end
+
+    initializer "shoelace.form_helper" do |app|
+      ActiveSupport.on_load :action_view do
+        Shoelace::FormHelper.invalid_input_class_name = app.config.shoelace.invalid_input_class_name
+      end
+    end
+
+    rake_tasks do
+      load "tasks/shoelace.rake"
+    end
+  end
+end

data/lib/tasks/shoelace.rake

@@ -0,0 +1,20 @@
+namespace :shoelace do
+  namespace :icons do
+    desc "Copy Shoelace icons to the assets path"
+    task copy: :environment do
+      cp_r Rails.root.join(Shoelace::Railtie.config.shoelace.dist_path, "assets").to_s, Rails.public_path
+    end
+
+    desc "Remove Shoelace icons"
+    task clobber: :environment do
+      rm_rf File.join(Rails.public_path, "assets/icons")
+    end
+  end
+end
+
+# Make sure `yarn install` is run before running `shoelace:icons:copy`.
+Rake::Task["shoelace:icons:copy"].enhance(["javascript:build"])
+
+if Rake::Task.task_defined?("assets:precompile")
+  Rake::Task["assets:precompile"].enhance(["shoelace:icons:copy"])
+end

data/test/dummy_app/app/views/hotwire_forms/form.html.erb

@@ -1,5 +1,5 @@
 <% locations = { tokyo: "Tokyo", new_york: "New York", london: "London" } %>
-<%= sl_turbo_form_for(@user, url: hotwire_forms_path) do |form| %>
+<%= sl_form_for(@user, url: hotwire_forms_path) do |form| %>
   <div>
     <%= form.text_field :name do %>
       <span slot="help-text" style="color: rgb(var(--sl-color-danger-600));">

data/test/dummy_app/app/views/layouts/application.html.erb

@@ -21,8 +21,8 @@
       }
     </style>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.65/dist/themes/light.css">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.65/dist/shoelace.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.87/dist/themes/light.css">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.87/dist/shoelace.js"></script>
 
     <% if request.path.include?("hotwire") %>
       <%= javascript_pack_tag 'hotwire' %>

data/test/dummy_app/test/system/hotwire_form_test.rb

@@ -22,7 +22,6 @@ class HotwireFormTest < ApplicationSystemTestCase
     assert_current_path hotwire_form_path(1)
     assert_text "Name: Yuki Nishijima"
     assert_text "Description: I am a human."
-    assert_text "Color: #ffffff"
     assert_text "Score: 50"
     # assert_text "Current City:"
     assert_text "Previous City: tokyo"
@@ -48,7 +47,6 @@ class HotwireFormTest < ApplicationSystemTestCase
     assert_current_path hotwire_form_path(1)
     assert_text "Name: Yuki Nishijima"
     assert_text "Description: I am a human."
-    assert_text "Color: #ffffff"
     assert_text "Score: 50"
     # assert_text "Current City:"
     assert_text "Previous City: tokyo"

data/test/dummy_app/test/system/turbolinks_form_test.rb

@@ -22,7 +22,6 @@ class TurbolinksFormTest < ApplicationSystemTestCase
     assert_current_path turbolinks_forms_path
     assert_text "Name: Yuki Nishijima"
     assert_text "Description: I am a human."
-    assert_text "Color: #ffffff"
     assert_text "Score: 50"
     # assert_text "Current City:"
     assert_text "Previous City: tokyo"

data/test/helpers/form_helper_test.rb

@@ -1,3 +1,4 @@
+# frozen_string_literal: true
 require 'test_helper'
 
 require_relative '../../app/helpers/shoelace/form_helper'
@@ -5,6 +6,8 @@ require_relative '../../app/helpers/shoelace/form_helper'
 class FormHelperTest < ActionView::TestCase
   include Shoelace::FormHelper
 
+  AUTOCOMPLETE_ATTRIBUTE = ActionView::VERSION::STRING >= '6.1.0' ? 'autocomplete="off"' : ''
+
   test "#sl_text_field_tag with name and value" do
     assert_dom_equal <<~HTML, sl_text_field_tag('name', 'Your name')
       <sl-input type="text" name="name" id="name" value="Your name"></sl-input>
@@ -41,30 +44,16 @@ class FormHelperTest < ActionView::TestCase
     HTML
   end
 
-  test "#sl_button_tag" do
-    assert_dom_equal(<<~HTML, sl_button_tag { "Submit" })
-      <sl-button>Submit</sl-button>
-    HTML
-  end
-
   test "#sl_radio_button" do
     assert_dom_equal(<<~HTML, sl_radio_button(:user, :name, 'userid-314', checked: true) { "Yuki Nishijima" })
       <sl-radio value="userid-314" checked="checked" name="user[name]" id="user_name_userid-314">Yuki Nishijima</sl-radio>
     HTML
   end
 
-  test "#sl_form_tag" do
-    assert_dom_equal(<<~HTML, sl_form_tag("/posts") { })
-      <form data-remote="true" action="/posts" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
-      </sl-form>
-    HTML
-  end
-
   test "#sl_form_with" do
     assert_dom_equal(<<~HTML, sl_form_with(url: "/") {})
       <form action="/" accept-charset="UTF-8" data-remote="true" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
       </sl-form>
     HTML
   end
@@ -72,35 +61,11 @@ class FormHelperTest < ActionView::TestCase
   test "#sl_form_for" do
     assert_dom_equal(<<~HTML, sl_form_for(User.new, url: "/") { })
       <form class="new_user" id="new_user" action="/" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
       </sl-form>
     HTML
   end
 
-  test "#sl_turbo_form_tag" do
-    assert_dom_equal(<<~HTML, sl_turbo_form_tag("/posts") { })
-      <form action="/posts" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
-      </form>
-    HTML
-  end
-
-  test "#sl_turbo_form_with" do
-    assert_dom_equal(<<~HTML, sl_turbo_form_with(url: "/") {})
-      <form action="/" accept-charset="UTF-8" data-remote="true" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
-      </form>
-    HTML
-  end
-
-  test "#sl_turbo_form_for" do
-    assert_dom_equal(<<~HTML, sl_turbo_form_for(User.new, url: "/") { })
-      <form class="new_user" id="new_user" action="/" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
-      </form>
-    HTML
-  end
-
   test "#text_field" do
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.text_field(:name)
@@ -192,6 +157,14 @@ class FormHelperTest < ActionView::TestCase
   test "#range_field" do
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.range_field(:name)
+        <sl-range label="Name" name="user[name]" id="user_name"></sl-range>
+      HTML
+    end
+  end
+
+  test "#range_field without a label" do
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.range_field(:name, label: nil)
         <sl-range name="user[name]" id="user_name"></sl-range>
       HTML
     end
@@ -208,22 +181,92 @@ class FormHelperTest < ActionView::TestCase
   test "#text_area" do
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.text_area(:name)
+        <sl-textarea label="Name" resize="auto" name="user[name]" id="user_name"></sl-textarea>
+      HTML
+    end
+  end
+
+  test "#text_area with a value" do
+    sl_form_for(User.new(name: "Yuki Nishijima"), url: "/") do |form|
+      assert_dom_equal <<~HTML, form.text_area(:name)
+        <sl-textarea label="Name" resize="auto" value="Yuki Nishijima" name="user[name]" id="user_name"></sl-textarea>
+      HTML
+    end
+  end
+
+  test "#text_area with an one-off value" do
+    sl_form_for(User.new(name: "Yuki Nishijima"), url: "/") do |form|
+      assert_dom_equal <<~HTML, form.text_area(:name, value: "Yuki")
+        <sl-textarea label="Name" resize="auto" value="Yuki" name="user[name]" id="user_name"></sl-textarea>
+      HTML
+    end
+  end
+
+  test "#text_area without a label" do
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.text_area(:name, label: nil)
         <sl-textarea resize="auto" name="user[name]" id="user_name"></sl-textarea>
       HTML
     end
   end
 
-  test "#check_box" do
+  test "#text_area with a size" do
     sl_form_for(User.new, url: "/") do |form|
-      assert_dom_equal <<~HTML, form.check_box(:name)
-        <sl-checkbox value="1" name="user[name]" id="user_name">Name</sl-checkbox>
+      assert_dom_equal <<~HTML, form.text_area(:name, size: "small")
+        <sl-textarea label="Name" resize="auto" size="small" name="user[name]" id="user_name"></sl-textarea>
       HTML
     end
   end
 
+  test "#text_area with a block" do
+    sl_form_for(User.new, url: "/") do |form|
+      expected = <<~HTML
+        <sl-textarea label="Name" resize="auto" name="user[name]" id="user_name">
+          <div slot="help-text">Name can not be blank.</div>
+        </sl-textarea>
+      HTML
+
+      assert_dom_equal(expected, form.text_area(:name) {
+        content_tag(:div, "Name can not be blank.", slot: "help-text")
+      })
+    end
+  end
+
+  test "#check_box" do
+    sl_form_for(User.new, url: "/") do |form|
+      if ActionView::VERSION::STRING >= '6.1.0'
+        assert_dom_equal <<~HTML, form.check_box(:name)
+          <input name="user[name]" type="hidden" value="0" autocomplete="off" />
+          <sl-checkbox value="1" name="user[name]" id="user_name">Name</sl-checkbox>
+        HTML
+      else
+        assert_dom_equal <<~HTML, form.check_box(:name)
+          <input name="user[name]" type="hidden" value="0" />
+          <sl-checkbox value="1" name="user[name]" id="user_name">Name</sl-checkbox>
+        HTML
+      end
+    end
+  end
+
   test "#check_box with a block" do
     sl_form_for(User.new, url: "/") do |form|
-      assert_dom_equal <<~HTML, form.check_box(:name) { "Maintainer Name" }
+      if ActionView::VERSION::STRING >= '6.1.0'
+        assert_dom_equal <<~HTML, form.check_box(:name) { "Maintainer Name" }
+          <input name="user[name]" type="hidden" value="0" autocomplete="off" />
+          <sl-checkbox value="1" name="user[name]" id="user_name">Maintainer Name</sl-checkbox>
+        HTML
+      else
+        assert_dom_equal <<~HTML, form.check_box(:name) { "Maintainer Name" }
+          <input name="user[name]" type="hidden" value="0" />
+          <sl-checkbox value="1" name="user[name]" id="user_name">Maintainer Name</sl-checkbox>
+        HTML
+      end
+    end
+  end
+
+  test "#check_box without a hidden input" do
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.check_box(:name, include_hidden: false) { "Maintainer Name" }
         <sl-checkbox value="1" name="user[name]" id="user_name">Maintainer Name</sl-checkbox>
       HTML
     end
@@ -238,7 +281,7 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.select(:name, users)
-        <sl-select name="user[name]" id="user_name">
+        <sl-select label="Name" name="user[name]" id="user_name">
           <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
           <sl-menu-item value="2">Matz</sl-menu-item>
           <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
@@ -247,6 +290,42 @@ class FormHelperTest < ActionView::TestCase
     end
   end
 
+  test "#select with a custom value" do
+    users = {
+      "Yuki Nishijima" => 1,
+      "Matz" => 2,
+      "Koichi Sasada" => 3
+    }
+
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.select(:name, users, {}, { value: 3 })
+        <sl-select label="Name" value="3" name="user[name]" id="user_name">
+          <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
+          <sl-menu-item value="2">Matz</sl-menu-item>
+          <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
+        </sl-select>
+      HTML
+    end
+  end
+
+  test "#select with custom selected and disabled values" do
+    users = {
+      "Yuki Nishijima" => 1,
+      "Matz" => 2,
+      "Koichi Sasada" => 3
+    }
+
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.select(:name, users, selected: 3, disabled: 1)
+        <sl-select label="Name" name="user[name]" id="user_name">
+          <sl-menu-item value="1" disabled="disabled">Yuki Nishijima</sl-menu-item>
+          <sl-menu-item value="2">Matz</sl-menu-item>
+          <sl-menu-item value="3" checked="checked">Koichi Sasada</sl-menu-item>
+        </sl-select>
+      HTML
+    end
+  end
+
   test "#select with multiple" do
     users = {
       "Yuki Nishijima" => 1,
@@ -256,7 +335,7 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.select(:name, users, {}, { multiple: true })
-        <sl-select name="user[name][]" id="user_name" multiple="multiple">
+        <sl-select label="Name" name="user[name][]" id="user_name" multiple="multiple">
           <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
           <sl-menu-item value="2">Matz</sl-menu-item>
           <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
@@ -278,7 +357,7 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.select(:name, users)
-        <sl-select name="user[name]" id="user_name">
+        <sl-select label="Name" name="user[name]" id="user_name">
           <sl-menu-label>Main maintainers</sl-menu-label>
           <sl-menu-item value="2">Matz</sl-menu-item>
           <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
@@ -301,9 +380,9 @@ class FormHelperTest < ActionView::TestCase
       ]
     }
 
-    sl_form_for(User.new(name: "2"), url: "/") do |form|
+    sl_form_for(User.new(name: 2), url: "/") do |form|
       assert_dom_equal <<~HTML, form.select(:name, users)
-        <sl-select name="user[name]" id="user_name" value="2">
+        <sl-select label="Name" name="user[name]" id="user_name" value="2">
           <sl-menu-label>Main maintainers</sl-menu-label>
           <sl-menu-item value="2" checked="checked">Matz</sl-menu-item>
           <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
@@ -324,7 +403,7 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.collection_select(:name, users, :first, :last)
-        <sl-select name="user[name]" id="user_name">
+        <sl-select label="Name" name="user[name]" id="user_name">
           <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
           <sl-menu-item value="2">Matz</sl-menu-item>
           <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
@@ -342,7 +421,7 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new(name: "2"), url: "/") do |form|
       assert_dom_equal <<~HTML, form.collection_select(:name, users, :first, :last)
-        <sl-select name="user[name]" id="user_name" value="2">
+        <sl-select label="Name" name="user[name]" id="user_name" value="2">
           <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
           <sl-menu-item value="2" checked="checked">Matz</sl-menu-item>
           <sl-menu-item value="3">Koichi Sasada</sl-menu-item>

data/test/helpers/tag_helper_test.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+require 'test_helper'
+
+require_relative '../../app/helpers/shoelace/tag_helper'
+
+class TagHelperTest < ActionView::TestCase
+  include Shoelace::TagHelper
+
+  test "#sl_button_tag" do
+    assert_dom_equal(<<~HTML, sl_button_tag { "Submit" })
+      <sl-button>Submit</sl-button>
+    HTML
+  end
+
+  test "#sl_button_to" do
+    assert_dom_equal <<~HTML, sl_button_to("Next", "/next")
+      <sl-button href="/next">Next</sl-button>
+    HTML
+
+    assert_dom_equal <<~HTML, sl_button_to("Next", "/next", class: "mt-1")
+      <sl-button href="/next" class="mt-1">Next</sl-button>
+    HTML
+
+    assert_dom_equal(<<~HTML, sl_button_to("/next") { "Next" })
+      <sl-button href="/next">Next</sl-button>
+    HTML
+
+    assert_dom_equal(<<~HTML, sl_button_to("/next", class: "mt-1") { "Next" })
+      <sl-button href="/next" class="mt-1">Next</sl-button>
+    HTML
+
+    assert_dom_equal <<~HTML, sl_button_to("Next")
+      <sl-button>Next</sl-button>
+    HTML
+  end
+
+  test "#sl_icon_tag"do
+    assert_dom_equal <<~HTML, sl_icon_tag("0-circle-fill")
+      <sl-icon name="0-circle-fill"></sl-icon>
+    HTML
+
+    assert_dom_equal <<~HTML, sl_icon_tag("0-circle-fill", slot: "icon")
+      <sl-icon name="0-circle-fill" slot="icon"></sl-icon>
+    HTML
+  end
+
+  test "#sl_avatar_tag"do
+    assert_dom_equal <<~HTML, sl_avatar_tag("/path/to/image.jpg")
+      <sl-avatar image="/path/to/image.jpg"></sl-avatar>
+    HTML
+
+    assert_dom_equal(<<~HTML, sl_avatar_tag("/path/to/image.jpg", slot: "trigger") { "Body" })
+      <sl-avatar image="/path/to/image.jpg" slot="trigger">
+        Body
+      </sl-avatar>
+    HTML
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shoelace-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Yuki Nishijima
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-02-17 00:00:00.000000000 Z
+date: 2023-01-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -98,6 +98,7 @@ files:
 - README.md
 - Rakefile
 - app/helpers/shoelace/form_helper.rb
+- app/helpers/shoelace/tag_helper.rb
 - bin/console
 - bin/setup
 - dist/.keep
@@ -112,7 +113,9 @@ files:
 - lib/shoelace/engine.rb
 - lib/shoelace/rails.rb
 - lib/shoelace/rails/version.rb
+- lib/shoelace/railtie.rb
 - lib/shoelace/testing.rb
+- lib/tasks/shoelace.rake
 - package.json
 - rollup.config.js
 - shoelace-rails.gemspec
@@ -164,6 +167,7 @@ files:
 - test/dummy_app/test/system/turbolinks_form_test.rb
 - test/dummy_app/test/test_helper.rb
 - test/helpers/form_helper_test.rb
+- test/helpers/tag_helper_test.rb
 - test/test_helper.rb
 - tsconfig.json
 - yarn.lock
@@ -189,7 +193,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.3
+rubygems_version: 3.4.1
 signing_key:
 specification_version: 4
 summary: Rails view helpers Shoelace.style, the design system.