Update styling of text fields and checkbox

Procfile.dev

@@ -1,2 +1,2 @@
-web: bin/rails server
+web: bin/rails server -p 3001
 css: bin/rails tailwindcss:watch

lib/atomic_view/components/check_box_component.rb

@@ -1,6 +1,9 @@
 module AtomicView
   module Components
     class CheckBoxComponent < ViewComponent::Form::CheckBoxComponent
+      def html_class
+        "h-4 w-4 rounded border-neutral-300 text-blue-500 focus:ring-blue-700 hover:border-neutral-700"
+      end
     end
   end
 end

lib/atomic_view/components/email_field_component.rb

@@ -2,14 +2,12 @@ module AtomicView
   module Components
     class EmailFieldComponent < ViewComponent::Form::EmailFieldComponent
       def call
-        render TextFieldComponent.new(
-          @form,
-          @object_name,
-          @object_method,
-          @options.merge(
-            type: "email",
-            left_section: icon("at-symbol", variant: :mini, options: {class: "size-5 text-gray-500"})
-          )
+        render FieldComponent.new(
+          form,
+          object_name,
+          method_name,
+          options,
+          ActionView::Helpers::Tags::EmailField
         )
       end
     end

lib/atomic_view/components/text_field_component.html.erb → lib/atomic_view/components/field_component.erb

@@ -10,7 +10,7 @@
       </div>
     <% end %>
   <% end %>
-  <%= ActionView::Helpers::Tags::TextField.new(object_name, method_name, @view_context, options).render %>
+  <%= tag_klass.new(@object_name, @method_name, @view_context, @options).render %>
   <% if right_section? %>
     <% if right_section_addon? %>
       <span class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm"><%= right_section %></span>

lib/atomic_view/components/field_component.rb

@@ -0,0 +1,65 @@
+module AtomicView
+  module Components
+    class FieldComponent < ViewComponent::Form::FieldComponent
+      attr_reader :tag_klass
+
+      def initialize(form, object_name, method_name, options = {}, tag_klass = ActionView::Helpers::Tags::TextField)
+        super(form, object_name, method_name, options)
+        @tag_klass = tag_klass
+      end
+
+      def html_class
+        class_names(
+          *%W[block w-full h-9 min-w-0 flex-1 rounded-md border-0 py-1 text-sm shadow-sm ring-1],
+          "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200",
+          "text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-neutral-700",
+          "pl-10" => left_section? && !(left_section_addon? || left_section_button?),
+          "pr-10" => right_section? && !(right_section_addon? || right_section_button?),
+          "shadow-none rounded-none rounded-r-md" => left_section_addon? || left_section_button?,
+          "shadow-none rounded-none rounded-l-md" => right_section_addon? || right_section_button?,
+          "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors?
+        )
+      end
+
+      def container_html_class
+        class_names(
+          "relative rounded-md shadow-sm",
+          {"flex" => left_section_addon? || left_section_button? || right_section_addon? || right_section_button?},
+          options[:container_class]
+        )
+      end
+
+      def left_section
+        options[:left_section]
+      end
+
+      def left_section?
+        left_section.present?
+      end
+
+      def left_section_addon?
+        options[:left_section_as_addon].present?
+      end
+
+      def left_section_button?
+        options[:left_section_as_button].present?
+      end
+
+      def right_section
+        options[:right_section] || method_errors? && icon("exclamation-circle", variant: :mini, options: {class: "size-5 text-red-500"})
+      end
+
+      def right_section?
+        right_section.present?
+      end
+
+      def right_section_addon?
+        options[:right_section_as_addon].present?
+      end
+
+      def right_section_button?
+        options[:right_section_as_button].present?
+      end
+    end
+  end
+end

lib/atomic_view/components/password_field_component.rb

@@ -1,6 +1,15 @@
 module AtomicView
   module Components
     class PasswordFieldComponent < ViewComponent::Form::PasswordFieldComponent
+      def call
+        render FieldComponent.new(
+          form,
+          object_name,
+          method_name,
+          options,
+          ActionView::Helpers::Tags::PasswordField
+        )
+      end
     end
   end
 end

lib/atomic_view/components/search_field_component.rb

@@ -1,6 +1,15 @@
 module AtomicView
   module Components
     class SearchFieldComponent < ViewComponent::Form::SearchFieldComponent
+      def call
+        render FieldComponent.new(
+          form,
+          object_name,
+          method_name,
+          options,
+          ActionView::Helpers::Tags::SearchField
+        )
+      end
     end
   end
 end

lib/atomic_view/components/telephone_field_component.rb

@@ -1,6 +1,15 @@
 module AtomicView
   module Components
     class TelephoneFieldComponent < ViewComponent::Form::TelephoneFieldComponent
+      def call
+        render FieldComponent.new(
+          form,
+          object_name,
+          method_name,
+          options,
+          ActionView::Helpers::Tags::TelField
+        )
+      end
     end
   end
 end

lib/atomic_view/components/text_field_component.rb

@@ -1,58 +1,14 @@
 module AtomicView
   module Components
     class TextFieldComponent < ViewComponent::Form::TextFieldComponent
-      def html_class
-        class_names(
-          *%W[block w-full min-w-0 flex-1 rounded-md border-0 py-1.5 shadow-sm ring-1 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6],
-          "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200",
-          "text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-600",
-          "pl-10" => left_section? && !(left_section_addon? || left_section_button?),
-          "pr-10" => right_section? && !(right_section_addon? || right_section_button?),
-          "shadow-none ring-inset rounded-none rounded-r-md" => left_section_addon? || left_section_button?,
-          "shadow-none ring-inset rounded-none rounded-l-md" => right_section_addon? || right_section_button?,
-          "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors?
+      def call
+        render FieldComponent.new(
+          form,
+          object_name,
+          method_name,
+          options
         )
       end
-
-      def container_html_class
-        class_names(
-          "relative rounded-md shadow-sm",
-          {"flex" => left_section_addon? || left_section_button? || right_section_addon? || right_section_button?},
-          options[:container_class]
-        )
-      end
-
-      def left_section
-        options[:left_section]
-      end
-
-      def left_section?
-        left_section.present?
-      end
-
-      def left_section_addon?
-        options[:left_section_as_addon].present?
-      end
-
-      def left_section_button?
-        options[:left_section_as_button].present?
-      end
-
-      def right_section
-        options[:right_section] || method_errors? && icon("exclamation-circle", variant: :mini, options: {class: "size-5 text-red-500"})
-      end
-
-      def right_section?
-        right_section.present?
-      end
-
-      def right_section_addon?
-        options[:right_section_as_addon].present?
-      end
-
-      def right_section_button?
-        options[:right_section_as_button].present?
-      end
     end
   end
 end

lib/atomic_view/components/url_field_component.rb

@@ -1,6 +1,15 @@
 module AtomicView
   module Components
     class UrlFieldComponent < ViewComponent::Form::UrlFieldComponent
+      def call
+        render FieldComponent.new(
+          form,
+          object_name,
+          method_name,
+          options,
+          ActionView::Helpers::Tags::UrlField
+        )
+      end
     end
   end
 end