anchor_view_components 0.20.1 → 0.22.0

data/app/components/anchor/toast_component.rb

@@ -14,25 +14,21 @@ module Anchor
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
-    def initialize(
-      id: self.class.generate_id,
-      role: :alert,
-      variant: VARIANT_DEFAULT
-    )
-      @variant = VARIANT_MAPPINGS[
-        fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
-      ]
-      @role = role
-
-      super
+    def initialize(id: self.class.generate_id, **kwargs)
+      @id = id
+      super(**kwargs, id:)
     end
 
     private
 
-    attr_reader :variant, :role, :id
+    attr_reader :id
 
     def render?
       content.present?
     end
+
+    def test_id
+      wrapper_options.dig(:data, :testid) || "toast"
+    end
   end
 end

data/app/components/anchor/toast_controller.ts

@@ -15,7 +15,11 @@ export default class extends Controller<HTMLDivElement> {
     }, this.showDelayValue);
 
     setTimeout(() => {
-      this.element.hidePopover();
+      this.element.remove();
     }, this.hideDelayValue);
   }
+
+  disconnect(): void {
+    this.element.remove();
+  }
 }

data/app/helpers/anchor/fetch_or_fallback_helper.rb

@@ -16,5 +16,31 @@ module Anchor
         fallback
       end
     end
+
+    private
+
+    def add_variant_classes_if_available(classes:, variant:)
+      if supports_variants?
+        variant ||= self.class::VARIANT_DEFAULT
+
+        variant_class = self.class::VARIANT_MAPPINGS[
+          fetch_or_fallback(
+            self.class::VARIANT_OPTIONS,
+            variant,
+            self.class::VARIANT_DEFAULT
+          )
+        ]
+
+        [variant_class, *classes]
+      else
+        classes
+      end
+    end
+
+    def supports_variants?
+      self.class.const_defined?(:VARIANT_MAPPINGS) \
+        && self.class.const_defined?(:VARIANT_DEFAULT) \
+        && self.class.const_defined?(:VARIANT_OPTIONS)
+    end
   end
 end

data/app/helpers/anchor/form_builder.rb

@@ -2,6 +2,46 @@ module Anchor
   class FormBuilder < ActionView::Helpers::FormBuilder
     delegate :concat, :content_tag, :render, to: :@template
 
+    def initialize(object_name, object, template, options, &)
+      super(
+        object_name,
+        object,
+        view_component?(template) ? template.helpers : template,
+        options,
+        &
+      )
+    end
+
+    def collection_radio_buttons(
+      attribute,
+      collection,
+      value_method,
+      text_method,
+      options = {},
+      html_options = {}
+    )
+      render RadioButtonCollectionComponent.new(
+        form_builder: self,
+        attribute:,
+        collection:,
+        value_method:,
+        text_method:,
+        **options,
+        **html_options
+      ) do |component|
+        super(
+          attribute,
+          collection,
+          value_method,
+          text_method,
+          options,
+          component.options.merge(html_options),
+        ) do |radio|
+          render component.radio(radio:)
+        end
+      end
+    end
+
     def error_message_for(attribute, options = {})
       render ErrorMessageComponent.new(
         form_builder: self,
@@ -24,7 +64,9 @@ module Anchor
     def text_field(attribute, options = {})
       render TextFieldComponent.new(
         form_builder: self,
-        attribute:
+        attribute:,
+        starting_icon: options.delete(:starting_icon),
+        ending_icon: options.delete(:ending_icon)
       ) do |component|
         super attribute, component.options.merge(options)
       end
@@ -32,33 +74,6 @@ module Anchor
 
     # The following methods are pending to be replaced with ViewComponents.
 
-    def collection_radio_buttons(
-      attribute,
-      collection,
-      value_method,
-      text_method,
-      options = {},
-      html_options = {}
-    )
-      content_tag :div, class: "flex flex-col space-y-2 text-base" do
-        super(
-          attribute,
-          collection,
-          value_method,
-          text_method,
-          options,
-          html_options.merge(class: Anchor::TailwindConstants::RADIO)
-        ) do |radio|
-          content_tag :div, class: "inline-flex items-center gap-1" do
-            concat(radio.radio_button(
-              data: { testId: "radio-#{attribute}-#{radio.value}".dasherize }
-            ))
-            concat(radio.label { i18n_label("#{attribute}.#{radio.value}") })
-          end
-        end
-      end
-    end
-
     def datetime_field(attribute, options = {})
       super attribute, options.merge(class: Anchor::TailwindConstants::INPUT)
     end
@@ -111,7 +126,15 @@ module Anchor
     private
 
     def i18n_label(attribute)
-      object.class.human_attribute_name attribute
+      if object.class.respond_to?(:human_attribute_name)
+        object.class.human_attribute_name(attribute)
+      else
+        attribute
+      end
+    end
+
+    def view_component?(template)
+      template.is_a? ViewComponent::Base
     end
   end
 end

data/app/helpers/anchor/tailwind_constants.rb

@@ -11,7 +11,6 @@ module Anchor
       text-base
       min-h-[40px]
       resize-none
-      mt-1
       block
       w-full
       rounded
@@ -21,42 +20,6 @@ module Anchor
       [&[readonly]]:shadow-none
     ).freeze
 
-    RADIO = %w(
-      appearance-none
-      w-[18px]
-      m-[3px]
-      aspect-square
-      rounded-full
-      border-2
-      border-grey-60
-      hover:border-grey-80
-      checked:bg-gradient-radial
-      checked:from-blue-50
-      checked:from-[50%]
-      checked:to-transparent
-      checked:to-[54%]
-      checked:border-blue-50
-      checked:hover:from-blue-60
-      checked:hover:from-[50%]
-      checked:hover:to-transparent
-      checked:hover:to-[54%]
-      checked:hover:border-blue-60
-      disabled:border-grey-40
-      disabled:checked:border-grey-40
-      disabled:checked:from-grey-40
-      disabled:checked:from-[50%]
-      disabled:checked:to-transparent
-      disabled:checked:to-[54%]
-      disabled:checked:border-grey-40
-      aria-readonly:border-grey-40
-      aria-readonly:checked:border-grey-40
-      aria-readonly:checked:from-grey-40
-      aria-readonly:checked:from-[50%]
-      aria-readonly:checked:to-transparent
-      aria-readonly:checked:to-[54%]
-      aria-readonly:checked:border-grey-40
-    ).freeze
-
     TEXT_AREA = %w(
       h-[120px]
     ).freeze

data/app/helpers/anchor/view_helper.rb

@@ -7,6 +7,7 @@ module Anchor
       banner
       breadcrumbs
       button
+      copy_to_clipboard
       dialog
       favicons
       icon
@@ -67,6 +68,7 @@ module Anchor
       file = ::Anchor::ViewComponents::SvgResolver.resolve(name)
       doc = Nokogiri::HTML::DocumentFragment.parse(file)
       svg = doc.at_css "svg"
+      attributes[:class] = class_names(attributes[:class])
 
       attributes.each_pair do |key, value|
         svg[key] = value
@@ -89,5 +91,14 @@ module Anchor
         popovertarget:,
       }
     end
+
+    def merge_options(original, new)
+      original.except(:class, :data, :aria).merge(
+        aria: original.fetch(:aria, {}).merge(new.delete(:aria) || {}),
+        class: class_names(original[:class], new.delete(:class)),
+        data: original.fetch(:data, {}).merge(new.delete(:data) || {}),
+        **new
+      )
+    end
   end
 end

data/lib/anchor/view_components/engine.rb

@@ -25,7 +25,6 @@ module Anchor
 
       initializer "anchor_view_components.helper" do
         ActiveSupport.on_load(:action_controller_base) do
-          require "anchor/view_helper"
           helper Anchor::ViewHelper
         end
       end

data/lib/anchor/view_components/version.rb

@@ -1,5 +1,5 @@
 module Anchor
   module ViewComponents
-    VERSION = "0.20.1".freeze
+    VERSION = "0.22.0".freeze
   end
 end

data/previews/anchor/copy_to_clipboard_component_preview.rb

@@ -0,0 +1,7 @@
+module Anchor
+  class CopyToClipboardComponentPreview < Preview
+    def default
+      anchor_copy_to_clipboard(value: "Copy Me")
+    end
+  end
+end

data/previews/anchor/forms_preview.rb

@@ -1,16 +1,61 @@
 module Anchor
   class FormsPreview < Preview
+    Option = Data.define(:value, :text, :description)
+
     def default
       model = FakeUser.new(name: "Jerry Seinfeld")
 
       render_with_template(template: "forms/default", locals: { model: })
     end
 
+    def with_icons
+      render_with_template(template: "forms/with_icons")
+    end
+
     def with_errors
       model = FakeUser.new
       model.valid?
 
       render_with_template(template: "forms/default", locals: { model: })
     end
+
+    def radio_button_collection
+      model = FakeUser.new
+
+      render_with_template(
+        template: "forms/radio_button_collection",
+        locals: { model:, object_options:, hash_options: }
+      )
+    end
+
+    private
+
+    def object_options
+      [
+        Option.new(
+          value: "english",
+          text: "English",
+          description: "Object #1"
+        ),
+        Option.new(
+          value: "portuguese",
+          text: "Portuguese",
+          description: "Object #2"
+        ),
+        Option.new(
+          value: "spanish",
+          text: "Spanish",
+          description: "Object #3"
+        ),
+      ]
+    end
+
+    def hash_options
+      [
+        { value: "english", text: "English", description: "Hash #1" },
+        { value: "portuguese", text: "Portuguese", description: "Hash #2" },
+        { value: "spanish", text: "Spanish", description: "Hash #3" },
+      ]
+    end
   end
 end

data/previews/forms/default.html.erb

@@ -1,5 +1,7 @@
-<%= anchor_form_with model:, url: false do |form| %>
-  <%= form.label :name %>
-  <%= form.text_field :name %>
-  <%= form.error_message_for :name %>
+<%= anchor_form_with model:, url: false, class: "flex flex-col gap-4" do |form| %>
+  <%= tag.div do %>
+    <%= form.label :name %>
+    <%= form.text_field :name %>
+    <%= form.error_message_for :name %>
+  <% end %>
 <% end %>

data/previews/forms/radio_button_collection.html.erb

@@ -0,0 +1,51 @@
+<div class="space-y-5">
+  <%= anchor_form_with url: false do |form| %>
+    <%= tag.div do %>
+      <%= form.legend "Object options" %>
+      <%= form.collection_radio_buttons(
+        :language,
+        object_options,
+        :value,
+        :text,
+        { checked: FakeUser::LANGUAGES.sample }
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= anchor_form_with url: false do |form| %>
+    <%= tag.div do %>
+      <%= form.legend "Hash options" %>
+      <%= form.collection_radio_buttons(
+        :language,
+        hash_options,
+        ->(option) { option[:value] },
+        ->(option) { option[:text] },
+        { checked: FakeUser::LANGUAGES.sample }
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= anchor_form_with model:, url: false do |form| %>
+    <%= tag.div do %>
+      <%= form.legend "Translated descriptions" %>
+      <%= form.collection_radio_buttons(
+        :language,
+        FakeUser::LANGUAGES,
+        :to_s,
+        :titleize,
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= anchor_form_with model: FakeCar.new, url: false do |form| %>
+    <%= tag.div do %>
+      <%= form.legend "No descriptions" %>
+      <%= form.collection_radio_buttons(
+        :color,
+        FakeCar::COLORS,
+        :to_s,
+        :titleize,
+      ) %>
+    <% end %>
+  <% end %>
+</div>

data/previews/forms/with_icons.html.erb

@@ -0,0 +1,10 @@
+<%= anchor_form_with url: false, method: :get do |form| %>
+  <div class="flex flex-col gap-4">
+    <%= form.text_field :search, placeholder: "Search…",
+      starting_icon: :search %>
+    <%= form.text_field :search, placeholder: "Search…",
+      ending_icon: :calendar %>
+    <%= form.text_field :search, placeholder: "Search…", starting_icon: :search,
+      ending_icon: :calendar %>
+  </div>
+<% end %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: anchor_view_components
 version: !ruby/object:Gem::Version
-  version: 0.20.1
+  version: 0.22.0
 platform: ruby
 authors:
 - Buoy Software
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-09-26 00:00:00.000000000 Z
+date: 2023-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -55,14 +55,18 @@ files:
 - app/assets/images/favicon.ico
 - app/assets/images/favicon.svg
 - app/assets/images/icons/README.md
+- app/assets/images/icons/calendar.svg
 - app/assets/images/icons/cancel.svg
 - app/assets/images/icons/check-circle.svg
+- app/assets/images/icons/check.svg
 - app/assets/images/icons/fast-left-circle.svg
 - app/assets/images/icons/loading-indicator.svg
 - app/assets/images/icons/menu.svg
 - app/assets/images/icons/nav-arrow-down.svg
 - app/assets/images/icons/nav-arrow-left.svg
 - app/assets/images/icons/nav-arrow-right.svg
+- app/assets/images/icons/paste-clipboard.svg
+- app/assets/images/icons/search.svg
 - app/assets/images/icons/warning-triangle.svg
 - app/assets/stylesheets/anchor-view-components.tailwind.css
 - app/assets/stylesheets/components/action-menu.css
@@ -86,6 +90,10 @@ files:
 - app/components/anchor/button_component.html.erb
 - app/components/anchor/button_component.rb
 - app/components/anchor/component.rb
+- app/components/anchor/copy_to_clipboard_component.en.yml
+- app/components/anchor/copy_to_clipboard_component.html.erb
+- app/components/anchor/copy_to_clipboard_component.rb
+- app/components/anchor/copy_to_clipboard_controller.ts
 - app/components/anchor/dialog_component.html.erb
 - app/components/anchor/dialog_component.rb
 - app/components/anchor/dialog_controller.ts
@@ -116,6 +124,10 @@ files:
 - app/components/anchor/popover_controller.ts
 - app/components/anchor/prose_component.html.erb
 - app/components/anchor/prose_component.rb
+- app/components/anchor/radio_button_collection_component.html.erb
+- app/components/anchor/radio_button_collection_component.rb
+- app/components/anchor/radio_button_component.html.erb
+- app/components/anchor/radio_button_component.rb
 - app/components/anchor/side_nav_component.en.yml
 - app/components/anchor/side_nav_component.html.erb
 - app/components/anchor/side_nav_component.rb
@@ -154,6 +166,7 @@ files:
 - previews/anchor/banner_component_preview.rb
 - previews/anchor/breadcrumbs_component_preview.rb
 - previews/anchor/button_component_preview.rb
+- previews/anchor/copy_to_clipboard_component_preview.rb
 - previews/anchor/dialog_component_preview.rb
 - previews/anchor/dialog_component_preview/with_custom_show_button.html.erb
 - previews/anchor/dialog_component_preview/with_footer.html.erb
@@ -173,6 +186,8 @@ files:
 - previews/anchor/text_component_preview.rb
 - previews/anchor/toast_component_preview.rb
 - previews/forms/default.html.erb
+- previews/forms/radio_button_collection.html.erb
+- previews/forms/with_icons.html.erb
 - previews/pages/forms.md.erb
 - previews/pages/helpers.md.erb
 - previews/pages/icons.md.erb