Criei um Sistema de Componentes Independente de Framework
Concebi e desenvolvi o Caderno UI do zero, usando custom elements canônicos e adaptadores leves para oferecer uma plataforma de componentes portátil, acessível e inspirada em cadernos.
Contexto
Bibliotecas de componentes frequentemente duplicam comportamento em implementações específicas de cada framework. O Caderno UI mantém uma única camada baseada em padrões web como fonte da verdade e oferece integrações ergonômicas para HTML nativo, React e Astro.
O que eu fiz
- Defini a linguagem visual, a API pública dos componentes, a arquitetura entre frameworks, os princípios de acessibilidade, a documentação, o empacotamento e a estratégia de releases.
- Implementei design tokens, ícones, custom elements com Lit, entrega opcional de animações e gráficos, eventos DOM tipados, slots, propriedades CSS e shadow parts.
- Criei wrappers React e fachadas Astro leves que utilizam os custom elements canônicos sem duplicar o comportamento.
- Estabeleci marcação semântica, interação por teclado, gerenciamento de foco, resiliência antes do upgrade e fallbacks sem JavaScript como requisitos da biblioteca.
- Implementei documentação, testes de compatibilidade, validação de pacotes, releases com Changesets, trusted publishing, verificação de proveniência e deploy no GitHub Pages.
Resultados
- Publiquei uma plataforma de componentes sob licença MIT que atende HTML nativo, React e Astro a partir de uma única implementação baseada em padrões web.
- Eliminei a duplicação de comportamento específico por framework dentro da biblioteca ao manter os adaptadores como fachadas leves.