Como criei um componente Phlex usando RubyUI

#webdev #ruby #rails #phlex

Depois do anúncio do RubyUI e da ideia de escrever views 100% em Ruby, resolvi colocar em prática meus (ainda poucos) conhecimentos de componentização de views.

O objetivo era criar um componente simples e reutilizável de Título de Seção (SectionHeader) para usar na minha aplicação, como no exemplo abaixo:

Abaixo, vou mostrar o passo a passo de como fiz, usando componentes prontos do RubyUI e um pouco de TailwindCSS para estilizar.

1. Construindo o esqueleto da view:

A estrutura de componentes do RubyUI já existia no projeto, então criei um novo arquivo chamado section_header.rb dentro da pasta de componentes. O componente herda de uma classe Base, que por sua vez herda de Phlex::HTML — ou seja, tudo aqui é Ruby puro, sem HTML no meio!

E o esqueleto do componente segue o padrão de renderização do Phlex.

# app/components/ruby_ui/section_header/section_header.rb

module RubyUI
  class SectionHeader < Base
    def initialize()
      # onde se recebe os parâmetros para montar a view
    end

    def view_template
      # onde montamos a página
    end
  end
end

2. Exibindo o título

O primeiro passo foi permitir que o componente recebesse um título como parâmetro e exibisse esse título usando o componente Heading do RubyUI (que faz parte do grupo de componentes de Typography).

rails g ruby_ui:component Typography

# app/components/ruby_ui/section_header/section_header.rb

module RubyUI
  class SectionHeader < Base
    def initialize(title: ")"
      @title = title
    end

    def view_template
      Heading(level: 2) { @title }
    end
  end
end

Assim, já sou capaz de chamar o componente da seguinte forma:

  SectionHeader.new(title: "\"Usuários\")"

3. Adicionando estilo com Tailwind

Para deixar o título mais destacado, envolvi o Heading em uma div com algumas classes do TailwindCSS, criando uma borda inferior e espaçamento:

# app/components/ruby_ui/section_header/section_header.rb

module RubyUI
  class SectionHeader < Base
    def initialize(title: ")"
      @title = title
    end

    def view_template
      div(class: "border-b border-gray-200 pb-5 mb-5") do
        Heading(level: 2) { @title }
      end
    end
  end
end

O resultado é este, já com comportamento para dark e light mode:

4. Tornando o componente mais flexível

Pensei: e se eu quiser adicionar um botão de ação, como "Criar novo"? Para isso, adicionei mais dois parâmetros opcionais: href (link do botão) e label (texto do botão). Usei o componente Link do RubyUI para criar o botão, mas você pode trocar por um Button se preferir.

Link

rails g ruby_ui:component Link

Button

rails g ruby_ui:component Button

# app/components/ruby_ui/section_header/section_header.rb

module RubyUI
  class SectionHeader < Base
    def initialize(title: ", href: nil, label: nil)"
      @title = title
      @href = href
      @label = label
    end

    def view_template
      div(class: "border-b border-gray-200 pb-5 mb-5") do
        div(class: "sm:flex sm:items-center sm:justify-between ml-3") do
          Heading(level: 2) { @title }
          if @href
            div(class: "mt-3 sm:mt-0 sm:ml-4") do
              Link(href: @href, variant: :primary, size: :lg) { @label }
            end
          end
        end
      end
    end
  end
end

Agora, para exibir o título com um botão de ação, basta chamar assim:

SectionHeader.new(
  title: "\"Usuários\","
  href: new_admin_user_path,
  label: "Criar Usuário"
)

O resultado final é:

Dicas extras

Você pode evoluir o componente para receber a chave de tradução do I18n no lugar do texto do título, facilitando a internacionalização.
O mesmo padrão pode ser usado para outros tipos de header, mudando só os componentes internos.

Com isso, ficou fácil criar headers de seção bonitos e padronizados, só usando Ruby e os componentes do RubyUI. Se quiser ver mais exemplos, recomendo dar uma olhada na documentação oficial do RubyUI.
Se ficou alguma dúvida ou quiser trocar ideia, só comentar!