Quando se trata de desenvolvimento de interfaces de usuário (UI), a estética e a funcionalidade precisam andar de mãos dadas para criar uma experiência envolvente e eficiente para os usuários. É aí que entra o DaisyUI, um plugin estiloso e prático para a popular framework de CSS, Tailwind CSS. No post de hoje, vamos mergulhar no mundo do DaisyUI e explorar como a inclusão de seus componentes no projeto "Storefront" pode elevar nossa plataforma a novos patamares.

O Que é DaisyUI?

DaisyUI é uma biblioteca de componentes que funciona como um plugin para TailwindCSS, um framework de CSS altamente personalizável e de baixo nível. O que o DaisyUI faz é trazer um conjunto rico de componentes pré-construídos que podem ser facilmente integrados e personalizados dentro de um projeto que utiliza TailwindCSS. Isso significa que você pode desfrutar de todos os benefícios de personalização que o Tailwind oferece, com a velocidade e simplicidade de um UI kit mais tradicional.

Aqui está um rápido exemplo de um botão simples codificado sem e com DaisyUI:

Sem DaisyUI (Usando apenas Tailwind CSS)

<!-- Botão sem DaisyUI -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Clique Aqui
</button>

Neste exemplo com Tailwind CSS puro, é preciso especificar todas as classes para estilização do botão, desde a cor do fundo (bg-blue-500 e hover:bg-blue-700 para o estado de hover) até o arredondamento das bordas (rounded).

Com DaisyUI

<!-- Botão com DaisyUI -->
<button class="btn btn-primary">
  Clique Aqui
</button>

Com o DaisyUI, simplificamos a marcação usando a classe btn para um estilo básico de botão e btn-primary para aplicar o estilo primário predefinido pelo tema do DaisyUI. A biblioteca cuida de todos os estados de interação do botão, como hover e foco, sem a necessidade de adicionar classes adicionais.

Quando você instala o DaisyUI, ele disponibiliza uma série de classes pré-definidas que já levam consigo uma série de configurações de estilo. Isso permite uma redução substancial do esforço necessário no código e aumenta a legibilidade ao mesmo tempo.

E como o Daisy UI se encontra no Storefront?

É comum o conhecimento de que nossos sites já tem Daisy UI neles. A diferença agora é que com a pasta de componentes “daisy” você pode encontrar os componentes de UI oferecidos pela biblioteca adaptados para virarem componentes com props no nosso editor.

Estes componentes 'deco' são versões avançadas dos componentes do DaisyUI que agora podem ser usados como componentes Preact (uma alternativa leve ao React), oferecendo a flexibilidade de aceitar 'props' - um recurso poderoso do Preact para passar dados e configurar o componente. Isso permite que eles se adaptem ou mudem de acordo com as necessidades do contexto em que são utilizados, o que é especialmente útil para criar 'sections' dinâmicas numa aplicação.

Por exemplo, se temos um componente Toast, ao invés de usar eles de diferentes formas em diferentes contextos, você pode usar o componente Toast.tsx que já prevê algumas mudanças de comportamento.

<Toast message=”Olá, sou um Toast” verticalPosition=”toast-top” horizontalPosition=”toast-start” />

Essa simples configuração já vai configurar corretamente o seu Toast numa posição em cima e a esquerda.