✨ create ErrorSummary components

app/components/application/error_summary_component.html.erb

@@ -0,0 +1,5 @@
+<%= render Form::ErrorSummaryComponent.new do |summary| %>
+ <% errors.each do |attribute, message| %>
+ <%= summary.error { format_error_message(attribute, message) } %>
+ <% end %>
+<% end %>

app/components/application/error_summary_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Application
+ class ErrorSummaryComponent < ViewComponent::Base
+ def initialize(record:)
+ @record = record
+ @errors = record.errors.to_hash
+ end
+
+ private
+
+ attr_reader :record, :errors
+
+ def render?
+ errors.any?
+ end
+
+ def format_error_message(attribute, message)
+ "#{record.class.human_attribute_name(attribute)} #{message.to_sentence}"
+ end
+ end
+end

app/components/form/error_summary_component.html.erb

@@ -0,0 +1,15 @@
+<div class="flex p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50" role="alert">
+ <svg class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+ </svg>
+ <span class="sr-only">Danger</span>
+
+ <div>
+ <span class="ml-2 font-medium"> <%= t("form.error_summary_component.title") %></span>
+ <ul class="mt-1.5 list-disc list-inside">
+ <% errors.each do |error| %>
+ <li><%= error %></li>
+ <% end %>
+ </ul>
+ </div>
+</div>

app/components/form/error_summary_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Form
+ class ErrorSummaryComponent < ViewComponent::Base
+ renders_many :errors
+ end
+end

config/locales/pt-BR/components/form.yml

@@ -0,0 +1,4 @@
+pt-BR:
+ form:
+ error_summary_component:
+ title: "Vish, alguns erros apareceram:"

config/locales/pt-BR/models/core.yml

@@ -0,0 +1,28 @@
+pt-BR:
+ activerecord:
+ models:
+ like: Curtida
+ post: Publicação
+ user_profile: Perfil
+ user: Usuário
+
+ attributes:
+ like:
+ post: Publicação
+ user: Usuário
+
+ post:
+ subtitle: Legenda
+ image: Imagem
+ user: Usuário
+
+ user_profile:
+ user: Usuário
+ username: "@"
+ display_name: Nome do usuário
+ bio: "Sobre"
+ avatar: Foto de perfil
+
+ user:
+ email: E-mail
+ password: Senha

spec/components/application/error_summary_component_spec.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Application::ErrorSummaryComponent, type: :component do
+ it "renders record errors" do
+ invalid_post = Post.new
+ invalid_post.valid?
+
+ rendered = render_inline(described_class.new(record: invalid_post))
+
+ expect(rendered).to have_text("Usuário é obrigatório")
+ .and(have_text("Imagem não pode ficar em branco"))
+ end
+end

spec/components/form/error_summary_component_spec.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Form::ErrorSummaryComponent, type: :component do
+ it "renders the title" do
+ rendered = render_inline(described_class.new)
+
+ expect(rendered).to have_text(I18n.t("form.error_summary_component.title"))
+ end
+
+ it "renders the provided error line" do
+ rendered = render_inline(described_class.new) do |summary|
+ summary.error { "My error line #1" }
+ summary.error { "My error line #2" }
+ end
+
+ expect(rendered.to_html).to have_css("li", text: "My error line #1")
+ .and have_css("li", text: "My error line #2")
+ end
+end

spec/components/previews/form/error_summary_component_preview.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Form
+ class ErrorSummaryComponentPreview < ViewComponent::Preview
+ def default
+ render Form::ErrorSummaryComponent.new do |summary|
+ summary.error { "At least 10 characters (and up to 100 characters)" }
+ summary.error { "At least one lowercase character" }
+ summary.error { "Inclusion of at least one special character, e.g., ! @ # ?" }
+ end
+ end
+ end
+end