Localização

Todo texto que um componente renderiza por conta própria, como o rótulo de um botão de fechar, a seta da paginação ou a mensagem de tabela vazia, passa pelo I18n.t com o texto em inglês como padrão:

# app/components/ui/dialog/content_component.rb, as installed
I18n.t("ui.dialog.close", default: "Close")

Graças a esse padrão, o componente funciona logo depois de instalado: sem arquivo de locale, ele aparece em inglês. Não é preciso configurar nada antes, e apps que não usam I18n não são afetados.

Sobrescrevendo um texto

Defina a chave no seu próprio arquivo de locale. Não é preciso registrar nada nem passar argumento para o componente; basta a chave.

# config/locales/pt.yml
pt:
  ui:
    dialog:
      close: Fechar
    sheet:
      close: Fechar
    pagination:

# config/locales/pt.yml
pt:
  ui:
    dialog:
      close: Fechar
    sheet:
      close: Fechar
    pagination:
      previous: Anterior
      next: Próxima

Só mudam as chaves que você define. As outras continuam com o padrão em inglês, então dá para traduzir um componente de cada vez.

As chaves

Todas as chaves que os componentes leem, com o texto padrão de cada uma. As marcadas como value vão para um atributo data-*-value e são usadas por um controller Stimulus, em vez de impressas pelo servidor; a próxima seção explica por que isso importa.

breadcrumb

calendar

carousel

data_table

dialog

pagination

sheet

sidebar

sonner

spinner

Cinco delas são lidas por JavaScript

ui.data_table.selection, ui.data_table.page, ui.calendar.month, ui.calendar.year e ui.sonner.close não são impressas na página. Elas são buscadas uma vez, quando o componente renderiza, e gravadas num atributo data-*-value para o controller ler. Você as traduz do mesmo jeito que as outras, porque são chaves de I18n comuns.

Duas delas pedem cuidado. A contagem de selecionados e o contador de páginas da data table são preenchidos pelo controller, não pelo I18n, então a sua tradução precisa manter os marcadores:

pt:
  ui:
    data_table:
      # The Stimulus controller substitutes these tokens, not I18n.
      # Keep every one of them, in any order.
      selection: "%{selected} de %{total} linha(s) selecionada(s)."
      page: "Página %{page} de %{total}"

Se você traduzir ou remover %{selected}, %{page} ou %{total}, a legenda mostra o marcador como texto ou fica sem número, e nenhum erro aparece, porque o I18n nunca vê esses marcadores.

Nomes de meses e dias vêm do Rails

A legenda e os cabeçalhos do calendário não estão no namespace ui.. O calendário os lê das traduções de data do próprio Rails, date.month_names e date.abbr_day_names. Eles vêm em inglês por padrão, e no seu idioma assim que o app carrega as traduções, seja pelo rails-i18n ou pelo seu próprio arquivo de locale. Para usar outros nomes em um calendário específico, passe-os como argumento:

<%# Abbreviated months in the caption, two-letter column headers %>
<%= ui_calendar(month_names: I18n.t("date.abbr_month_names").compact,
                day_names: I18n.t("date.abbr_day_names").map { |name| name.first(2) }) %>

O .compact é necessário: o date.abbr_month_names do Rails começa no índice 1, então o primeiro elemento é nil.

Um exemplo completo

Este site é um. As páginas em português renderizam os mesmos componentes que você instala, e o site define o bloco ui. inteiro uma única vez. É por isso que os textos que os próprios componentes colocam em /pt (botões de fechar, setas da paginação, a mensagem de tabela vazia) aparecem em português.

O sandbox/config/locales/pt.yml tem todas as chaves desta página, e você pode copiá-lo como ponto de partida para um app em português.