shoelace-rails 0.1.0

data/app/helpers/shoelace/form_helper.rb

@@ -0,0 +1,451 @@
+# frozen_string_literal: true
+
+module Shoelace
+  module FormHelper
+    mattr_accessor :use_sl_form_tag
+    self.use_sl_form_tag = false
+
+    mattr_accessor :remote_form
+    self.remote_form = false
+
+    class ShoelaceInputField < ActionView::Helpers::Tags::TextField #:nodoc:
+      attr_reader :field_type
+
+      def initialize(field_type, *args)
+        super(*args)
+        @field_type = field_type
+      end
+
+      def render(&block)
+        options = @options.stringify_keys
+
+        value = options.fetch("value") { value_before_type_cast }
+        options["value"] = value if value.present?
+
+        options["size"] = options["maxlength"] unless options.key?("size")
+        options["type"] ||= field_type
+        options["invalid"] = options.fetch("invalid") { @object.errors[@method_name].presence }
+        add_default_name_and_id(options)
+
+        @template_object.content_tag('sl-input', '', options, &block)
+      end
+    end
+
+    class ShoelaceColorPicker < ActionView::Helpers::Tags::ColorField #:nodoc:
+      RGB_VALUE_REGEX = /#[0-9a-fA-F]{6}/
+
+      def field_type; nil; end
+
+      def tag(tag_name, *args, &block)
+        tag_name.to_s == 'input' ? content_tag('sl-color-picker', '', *args, &block) : super
+      end
+
+      private
+
+      def validate_color_string(string)
+        string.downcase if RGB_VALUE_REGEX.match?(string)
+      end
+    end
+
+    class ShoelaceRange < ActionView::Helpers::Tags::NumberField #:nodoc:
+      def field_type; nil; end
+
+      def tag(tag_name, *args, &block)
+        tag_name.to_s == 'input' ? content_tag('sl-range', '', *args, &block) : super
+      end
+    end
+
+    class ShoelaceSwitch < ActionView::Helpers::Tags::TextField #:nodoc:
+      def field_type; nil; end
+
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"] = options.fetch("value") { value_before_type_cast }
+        add_default_name_and_id(options)
+
+        @template_object.content_tag('sl-switch', @method_name.to_s.humanize, options, &block)
+      end
+    end
+
+    class ShoelaceTextArea < ActionView::Helpers::Tags::TextArea #:nodoc:
+      def content_tag(tag_name, content, options)
+        options[:value] = content if content.present?
+
+        tag_name.to_s == 'textarea' ? super('sl-textarea', '', options) : super
+      end
+    end
+
+    class ShoelaceSelect < ActionView::Helpers::Tags::Select #:nodoc:
+      def grouped_options_for_select(grouped_options, options)
+        @template_object.grouped_sl_options_for_select(grouped_options, options)
+      end
+
+      def options_for_select(container, options = nil)
+        @template_object.sl_options_for_select(container, options)
+      end
+
+      def select_content_tag(option_tags, _options, html_options)
+        html_options = html_options.stringify_keys
+        html_options['value']= value
+        add_default_name_and_id(html_options)
+
+        @template_object.content_tag("sl-select", option_tags, html_options)
+      end
+    end
+
+    class ShoelaceCollectionSelect < ActionView::Helpers::Tags::CollectionSelect #:nodoc:
+      def options_from_collection_for_select(collection, value_method, text_method, selected = nil)
+        @template_object.sl_options_from_collection_for_select(collection, value_method, text_method, selected)
+      end
+
+      def select_content_tag(option_tags, _options, html_options)
+        html_options = html_options.stringify_keys
+        html_options['value']= value
+        add_default_name_and_id(html_options)
+
+        @template_object.content_tag("sl-select", option_tags, html_options)
+      end
+    end
+
+    class ShoelaceCheckBox < ActionView::Helpers::Tags::CheckBox #:nodoc:
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"]   = @checked_value
+        options["checked"] = true if input_checked?(options)
+
+        if options["multiple"]
+          add_default_name_and_id_for_value(@checked_value, options)
+          options.delete("multiple")
+        else
+          add_default_name_and_id(options)
+        end
+
+        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
+      end
+    end
+
+    class ShoelaceRadioButton < ActionView::Helpers::Tags::RadioButton #:nodoc:
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"]   = @tag_value
+        options["checked"] = "checked" if input_checked?(options)
+        add_default_name_and_id_for_value(@tag_value, options)
+
+        @template_object.content_tag('sl-radio', '', options.except("type"), &block)
+      end
+    end
+
+    class ShoelaceCollectionRadioButtons < ActionView::Helpers::Tags::CollectionRadioButtons #:nodoc:
+      class RadioButtonBuilder < Builder # :nodoc:
+        def label(*)
+          text
+        end
+
+        def radio_button(extra_html_options = {}, &block)
+          html_options = extra_html_options.merge(@input_html_options)
+          html_options[:skip_default_ids] = false
+          @template_object.sl_radio_button(@object_name, @method_name, @value, html_options, &block)
+        end
+      end
+
+      def render(&block)
+        render_collection_for(RadioButtonBuilder, &block)
+      end
+
+      private
+
+      def render_collection(&block)
+        @template_object.content_tag('sl-radio-group', 'label' => @method_name.to_s.humanize) { super(&block) }
+      end
+
+      def hidden_field
+        ''.html_safe
+      end
+
+      def render_component(builder)
+        builder.radio_button { builder.label }
+      end
+    end
+
+    class ShoelaceFormBuilder < ActionView::Helpers::FormBuilder #:nodoc:
+      {
+        email: :email,
+        number: :number,
+        password: :password,
+        search: :search,
+        telephone: :tel,
+        phone: :tel,
+        text: :text,
+        url: :url
+      }.each do |field_type, field_class|
+        # def email_field(method, **options, &block)
+        #   ShoelaceInputField.new(:email, object_name, method, @template, options.with_defaults(label: method.to_s.humanize)).render(&block)
+        # end
+        eval <<-RUBY, nil, __FILE__, __LINE__ + 1
+          def #{field_type}_field(method, **options, &block)
+            ShoelaceInputField.new(:#{field_class}, object_name, method, @template, options.with_defaults(object: @object, label: method.to_s.humanize)).render(&block)
+          end
+        RUBY
+      end
+
+      def color_field(method, **options)
+        ShoelaceColorPicker.new(object_name, method, @template, options.with_defaults(object: @object)).render
+      end
+      alias color_picker color_field
+
+      def range_field(method, **options)
+        ShoelaceRange.new(object_name, method, @template, options.with_defaults(object: @object)).render
+      end
+      alias range range_field
+
+      def switch_field(method, **options, &block)
+        ShoelaceSwitch.new(object_name, method, @template, options.with_defaults(object: @object)).render(&block)
+      end
+      alias switch switch_field
+
+      def text_area(method, **options)
+        ShoelaceTextArea.new(object_name, method, @template, options.with_defaults(object: @object, resize: 'auto')).render
+      end
+
+      def check_box(method, options = {}, checked_value = "1", unchecked_value = "0", &block)
+        ShoelaceCheckBox.new(object_name, method, @template, checked_value, unchecked_value, options.merge(object: @object)).render(&block)
+      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
+      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
+      end
+
+      def collection_radio_buttons(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
+        ShoelaceCollectionRadioButtons.new(object_name, method, @template, collection, value_method, text_method, options.with_defaults(object: @object), html_options).render(&block)
+      end
+
+      def submit(value = nil, options = {})
+        value, options = nil, value if value.is_a?(Hash)
+
+        @template.sl_submit_tag(value || submit_default_value, **options)
+      end
+    end
+
+    DEFAULT_FORM_PARAMETERS = {
+      builder: ShoelaceFormBuilder,
+      data: {
+        remote: true,
+      }
+    }
+
+    DEFAULT_TURBO_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
+
+    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
+    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
+    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
+      tag_options = { "type" => "submit", "variant" => "primary" }.update(options)
+      set_default_disable_with(value, tag_options)
+
+      content_tag('sl-button', value, tag_options)
+    end
+
+    # Creates a shoelace text field; use these text fields to input smaller chunks of text like a username or a search
+    # query.
+    #
+    # For the properties available on this tag, please refer to the official documentation:
+    #   https://shoelace.style/components/input?id=properties
+    #
+    def sl_text_field_tag(name, value = nil, **options, &block)
+      content_tag('sl-input', '', { "type" => "text", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys), &block)
+    end
+
+    # Returns a string of +<sl-menu-item>+ tags, like +options_for_select+, but prepends a +<sl-menu-label>+ tag to
+    # each group.
+    def grouped_sl_options_for_select(grouped_options, options)
+      body = "".html_safe
+
+      grouped_options.each_with_index do |container, index|
+        label, values = container
+
+        body.safe_concat(DIVIDER_TAG) if index > 0
+        body.safe_concat(content_tag("sl-menu-label", label)) if label.present?
+        body.safe_concat(sl_options_for_select(values, options))
+      end
+
+      body
+    end
+
+    # Accepts an enumerable (hash, array, enumerable, your type) and returns a string of +sl-menu-item+ tags. Given
+    # an enumerable where the elements respond to +first+ and +last+ (such as a two-element array), the “lasts” serve
+    # as option values and the “firsts” as option text.
+    def sl_options_for_select(enumerable, options = nil)
+      return enumerable if String === enumerable
+
+      selected, disabled = extract_selected_and_disabled(options).map { |r| Array(r).map(&:to_s) }
+
+      enumerable.map do |element|
+        html_attributes = option_html_attributes(element)
+        text, value = option_text_and_value(element).map(&:to_s)
+
+        html_attributes[:checked] ||= selected.include?(value)
+        html_attributes[:disabled] ||= disabled.include?(value)
+        html_attributes[:value] = value
+
+        tag_builder.content_tag_string('sl-menu-item', text, html_attributes)
+      end.join("\n").html_safe
+    end
+
+    # Returns a string of +<sl-menu-item>+ tags compiled by iterating over the collection and assigning the result of
+    # a call to the +value_method+ as the option value and the +text_method+ as the option text.
+    def sl_options_from_collection_for_select(collection, value_method, text_method, selected = nil)
+      options = collection.map do |element|
+        [value_for_collection(element, text_method), value_for_collection(element, value_method), option_html_attributes(element)]
+      end
+
+      selected, disabled = extract_selected_and_disabled(selected)
+
+      select_deselect = {
+        selected: extract_values_from_collection(collection, value_method, selected),
+        disabled: extract_values_from_collection(collection, value_method, disabled)
+      }
+
+      sl_options_for_select(options, select_deselect)
+    end
+
+    # Returns a +<sl-radio>+ tag for accessing a specified attribute (identified by method) on an object assigned to
+    # the template (identified by object). If the current value of method is +tag_value+ the radio button will be
+    # checked.
+    #
+    # To force the radio button to be checked pass checked: true in the options hash. You may pass HTML options there
+    # as well.
+    def sl_radio_button(object_name, method, tag_value, options = {}, &block)
+      ShoelaceRadioButton.new(object_name, method, self, tag_value, options).render(&block)
+    end
+
+    {
+      email: :email,
+      number: :number,
+      password: :password,
+      search: :search,
+      telephone: :tel,
+      phone: :tel,
+      url: :url
+    }.each do |field_type, field_class|
+      # def sl_email_field_tag(method, **options, &block)
+      #   sl_text_field_tag(name, value, options.merge(type: :email))
+      # end
+      eval <<-RUBY, nil, __FILE__, __LINE__ + 1
+        # Creates a text field of type “#{field_type}”.
+        def sl_#{field_type}_field_tag(method, **options, &block)
+          sl_text_field_tag(name, value, options.merge(type: :#{field_class}))
+        end
+      RUBY
+    end
+  end
+end

data/bin/console

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "shoelace/rails"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/gemfiles/rails_50.gemfile

@@ -0,0 +1,12 @@
+# This file was generated by Appraisal
+
+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", "~> 5.0.0"
+gem "railties", "~> 5.0.0"
+gem "activesupport", "~> 5.0.0"
+gem "minitest", "5.10.3"
+
+gemspec path: "../"

data/gemfiles/rails_51.gemfile

@@ -0,0 +1,11 @@
+# This file was generated by Appraisal
+
+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", "~> 5.1.0"
+gem "railties", "~> 5.1.0"
+gem "activesupport", "~> 5.1.0"
+
+gemspec path: "../"

data/gemfiles/rails_52.gemfile

@@ -0,0 +1,11 @@
+# This file was generated by Appraisal
+
+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", "~> 5.2.0"
+gem "railties", "~> 5.2.0"
+gem "activesupport", "~> 5.2.0"
+
+gemspec path: "../"

data/gemfiles/rails_60.gemfile

@@ -0,0 +1,11 @@
+# This file was generated by Appraisal
+
+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.0.0"
+gem "railties", "~> 6.0.0"
+gem "activesupport", "~> 6.0.0"
+
+gemspec path: "../"

data/gemfiles/rails_61.gemfile

@@ -0,0 +1,11 @@
+# This file was generated by Appraisal
+
+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"
+
+gemspec path: "../"

data/gemfiles/rails_70.gemfile

@@ -0,0 +1,11 @@
+# This file was generated by Appraisal
+
+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"
+
+gemspec path: "../"

data/gemfiles/rails_edge.gemfile

@@ -0,0 +1,14 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+git "https://github.com/rails/rails.git" do
+  gem "rails"
+  gem "railties"
+  gem "activesupport"
+end
+
+gem "rake", "~> 13.0"
+gem "rails-dom-testing", git: "https://github.com/rails/rails-dom-testing.git", ref: "8f5acdfc"
+
+gemspec path: "../"

data/lib/shoelace/engine.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+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

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Shoelace
+  module Rails
+    VERSION = "0.1.0"
+  end
+end

data/lib/shoelace/rails.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require_relative "rails/version"
+require_relative "engine" if defined?(::Rails::Railtie)
+
+module Shoelace
+  module Rails
+    class Error < StandardError; end
+  end
+end

data/lib/shoelace/testing.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Shoelace
+  module Testing
+    def sl_select(option_text, from: )
+      select_element = find("sl-select[placeholder=\"#{from}\"]")
+      select_element.click
+
+      within select_element do
+        find('sl-menu-item', text: option_text).click
+      end
+
+      select_element
+    end
+
+    def sl_multi_select(*options_to_select, from: )
+      select_element = find("sl-select[placeholder=\"#{from}\"]")
+
+      select_element.click
+      within select_element do
+        options_to_select.each do |option_text|
+          find('sl-menu-item', text: option_text).click
+        end
+      end
+
+      # The multi select does not close automatically, so need to click to close it.
+      select_element.click if options_to_select.size > 1
+
+      select_element
+    end
+
+    def sl_check(label)
+      find("sl-checkbox", text: label).click
+    end
+
+    def sl_toggle(label)
+      find("sl-switch", text: label).click
+    end
+  end
+end