A jornada de criação da minha primeira biblioteca JavaScript foi transformadora, ajudando-me a crescer. Como cheguei aqui? Vamos começar do início.

Depois de concluir as versões beta dos UnifyUI Blocks e Flexiwind Blocks, meu amigo e eu enfrentamos um desafio: adicionar componentes interativos como menus suspensos, recolhimentos e guias.

Como UnifyUI e Flexiwind são diferentes: um funciona com UnoCSS e o outro com TailwindCSS, inicialmente escrevemos scripts separados para cada um. Mas logo ficou claro que esta era uma solução nada ideal.

Depois de estudar como o Preline lida com interações com plug-ins JavaScript dedicados adaptados para TailwindCSS, vimos a necessidade de uma solução independente de estrutura CSS.

Por que CSS Framework-Agnóstico?

Criar uma biblioteca independente de framework CSS foi essencial para nós porque queríamos que o Flexilla funcionasse perfeitamente com qualquer framework CSS ou mesmo com CSS puro. Muitos desenvolvedores, incluindo aqueles que usam UnoCSS, TailwindCSS, ou mesmo Bootstrap, devem ter flexibilidade para aprimorar seus componentes sem limitações.

Ao tornar o Flexilla independente de uma estrutura específica, podemos fornecer uma ferramenta versátil que funciona para muitos tipos diferentes de projetos. Também se alinha com o trabalho que já fizemos no UnifyUI e no Flexiwind Blocks, onde a flexibilidade é fundamental.

Solução

Inspirados no plugin Preline e Flowbite, decidimos criar o Flexilla que é totalmente de código aberto.

Flexilla é uma biblioteca autônoma projetada para gerenciar interações de forma independente, sem depender de nenhuma estrutura CSS específica. Ele oferece a flexibilidade de integração perfeita com TailwindCSS, UnoCSS ou qualquer outra tecnologia CSS.

Nosso objetivo era aprimorar os componentes de uma forma que não ficasse restrita a um ambiente CSS específico.

Desafios

No início, eu não tinha ideia por onde começar. Devo clonar o Preline e adaptá-lo? Não, isso não teria me ajudado, pois meu objetivo era aprender através deste projeto.

Organização do Código

No começo, meu código estava uma bagunça: ilegível e difícil de seguir.

Eu tinha uma pasta “pacotes” e foi um desastre! Isso dificultou a publicação de determinados pacotes separadamente, então eu precisava de uma solução.

Solução

Encontrei um artigo sobre Lerna que imediatamente me interessou. Depois de alguns dias lendo documentação e reestruturando meu código, eu tinha uma organização da qual me orgulhava. Lerna me permitiu agilizar minhas atualizações, gerenciar vários pacotes em um repositório mono e publicá-los de forma independente.

Popper JS?

Sim, enfrentei este dilema: devo usar PopperJS ou não?

Foi um grande desafio, mas vou guardar essa história para um artigo futuro.

Versionamento

Este foi um grande obstáculo. Publiquei inicialmente a biblioteca e todos os seus pacotes com a versão 1.0.0… e após a publicação, percebi que havia problemas em alguns pacotes. Então, para cada correção, eu publicaria uma nova versão da biblioteca e seus pacotes. Má ideia! Eventualmente, um amigo sugeriu que eu lesse um artigo sobre SEMVER e, de repente, o versionamento fez sentido – embora eu estivesse um pouco atrasado para o jogo.

Foi assim que acabei com a biblioteca na versão 2.x.x. A partir daí, parei de cometer esses erros. Com Lerna, não preciso mais me preocupar em alterar versões de pacotes que não foram atualizadas; Lerna cuida disso para mim.

Características

1. Agnosticismo da estrutura CSS

Flexilla não depende de nenhuma estrutura CSS específica, tornando-o compatível com TailwindCSS, UnoCSS, ou mesmo CSS simples. Essa flexibilidade garante que você possa integrá-lo ao seu projeto, independentemente da estrutura CSS que estiver usando.

2. Componentes Modulares

Flexilla oferece componentes modulares como menus suspensos, guias e recolhimentos. Esses componentes são desenvolvidos para serem leves e fáceis de incluir conforme necessário, então você só adiciona o que vai usar, o que ajuda no desempenho e no tamanho do pacote.

3. API simples

A biblioteca apresenta uma API fácil de usar que requer configuração mínima. Aqui está um exemplo simples de como configurar um componente suspenso:

   import { Dropdown } from '@flexilla/flexilla';
   Dropdown.init("#myDropdown");

Este exemplo mostra como você pode inicializar rapidamente um menu suspenso com apenas algumas linhas de código, tornando-o altamente acessível para desenvolvedores de todos os níveis.

4. Arquitetura sem cabeça

Inspirado em bibliotecas de UI headless, o Flexilla permite que você controle os estilos completamente, para que você não fique limitado por designs ou temas predefinidos. Isso facilita a integração em projetos com estilo personalizado e garante que não entrará em conflito com os estilos existentes.

5. Eventos personalizáveis

Os componentes Flexilla vêm com eventos personalizáveis. Por exemplo, você pode adicionar ações para responder às ações do usuário ou personalizar comportamentos para interações específicas, como ao abrir um menu suspenso ou alterar uma guia.

const myDropdown = new Dropdown('#myDropdown', {
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});

const myAccordionEl = document.querySelector("#myAccordion")
const myAccordion = Accordion.init(myAccordionEl)
myAccordionEl.addEventListener("change-item",()=>{
   console.log("Accordion item changed")
})

Quando e onde usar a biblioteca?

Use o Flexilla quando estiver trabalhando em um projeto onde não deseja usar uma estrutura JavaScript, mas precisa de componentes interativos com acessibilidade em mente. (Recomendado: AstroJS, estruturas PHP e PHP, sites estáticos)
Pode funcionar bem com VueJS, mas não é recomendado. Com ReactJS, nem tente!

O que vem por aí para Flexilla?

Flexilla continuará a evoluir. Pretendo adicionar mais componentes, melhorar os existentes e refinar a documentação. Além dos componentes existentes, pretendo introduzir outros componentes comuns, como notificações e brindes. Isso permitirá que a Flexilla suporte uma gama mais ampla de necessidades interativas.

Conclusão

De acordo com minhas necessidades, o Flexilla provou ser uma ferramenta valiosa para a criação de componentes interativos em meus projetos.
Começar pode ser assustador. Tive medo de que ninguém apreciasse meu trabalho, medo de que ele não servisse a nenhum propósito. Mas garanto que não tentar é o maior erro. Hoje, não me arrependo de ter criado esta biblioteca. Isso me permitiu aprender muito: organização de código, versionamento, gerenciamento de pacotes npm… Não hesite em compartilhar sua solução com o mundo e esteja aberto a comentários, sejam eles positivos ou negativos. Isso ajudará você a crescer!

Se você tiver ideias, sugestões ou melhorias de código, não hesite em bifurcar o repositório, enviar uma solicitação pull ou abrir um problema. Juntos, podemos aprimorar a biblioteca e criar um recurso valioso para desenvolvedores em todos os lugares.

Por falar nisso, tome cuidado e não se esqueça de dar uma olhada no Flexilla e me dizer o que você achou!