Pindoba é uma biblioteca UI que desenvolvi para facilitar a criação de aplicações web com os mesmos componentes e funcionalidades independentemente do framework utilizado. Neste post, compartilharei mais sobre este projeto, suas motivações e como está sendo aplicado.

O que é Pindoba?

Pindoba é uma biblioteca de componentes UI versátil que surgiu da necessidade de manter consistência visual e funcional entre diferentes projetos, independentemente do framework escolhido. A biblioteca utiliza Panda CSS para estilização, garantindo um design coeso e consistente em todos os componentes.

Motivações do Projeto

A principal motivação por trás do Pindoba foi facilitar meu trabalho ao explorar diferentes frameworks e bibliotecas. Em vez de recriar componentes do zero para cada tecnologia, o Pindoba mantém uma API uniforme para os componentes, simplificando o processo de alternar entre diferentes frameworks.

Principais Recursos

• Compatibilidade Multi-framework: Atualmente, a maioria dos componentes é compatível com Astro e Svelte 5, com desenvolvimento em andamento para a versão React.
• Design Consistente: Através do Panda CSS, todos os componentes seguem um sistema de design unificado.
• API Uniforme: Os componentes mantêm uma API consistente entre as bibliotecas enquanto respeitam as características únicas de cada uma. Por exemplo, se um componente tem uma prop específica no Astro, você encontrará a funcionalidade equivalente nas versões Svelte e React, garantindo uma transição suave entre frameworks.
• Modular: Cada componente é um pacote independente, permitindo que você use apenas o que precisa.

Aplicações Práticas

O Pindoba já está em uso em alguns projetos pessoais:

1. Este Site: Construído usando Astro e componentes Pindoba.
2. (Cut Branches)[/pt-br/blog/introducing-cut-branches]: Uma aplicação Svelte 5 + Tauri para gerenciamento de branches em repositórios Git que utiliza componentes Pindoba.

Demo

Abaixo você encontrará uma demonstração dos componentes Pindoba implementados em diferentes frameworks. Esta demo interativa apresenta os mesmos componentes (Botões, Seletor de Modo de Tema e Alertas) construídos para Astro e Svelte.

O que torna esta demo especial é que não é apenas uma representação visual - este site está realmente usando os componentes reais do Pindoba. A aba Astro mostra componentes dos pacotes @pindoba/astro-* que alimentam este site. A aba Svelte demonstra componentes dos pacotes @pindoba/svelte-*, e a aba React mostra as implementações @pindoba/react-*.

A demo aproveita a arquitetura de ilhas do Astro para renderizar componentes de cada biblioteca.

(até mesmo o componente de abas é um componente pindoba)

Estado Atual e Futuro

Embora os pacotes Pindoba já estejam publicados no NPM, o código fonte ainda não está publicamente disponível. Porém, a documentação está disponível em pindoba.netlify.app, onde você pode explorar todos os componentes disponíveis e seus exemplos de uso. Vale ressaltar que o site de documentação ainda está em desenvolvimento, incompleto, em constante evolução conforme continuo aprimorando e expandindo a biblioteca de componentes.

Estou trabalhando para liberar o código fonte em breve, junto com melhorias e novos componentes.

À medida que o projeto amadurece, planejo adicionar mais componentes, melhorar a documentação e expandir o suporte para outros frameworks populares.

Conclusão

Pindoba representa meu esforço para criar uma solução que facilite o desenvolvimento de interfaces consistentes independentemente do framework. É um projeto em constante evolução que reflete minha jornada de aprendizado e melhoria como desenvolvedor web.