O que building-components faz?
Guia para construir componentes de UI modernos, acessíveis e compostíveis. Use ao criar novos componentes, implementar acessibilidade, criar APIs compostíveis, configurar design tokens, publicar no npm/registry ou escrever documentação de componentes.
Princípios Fundamentais
- Moderno: utilize padrões atuais (como React hooks, Vue composition API) e aproveite recursos de plataforma
- Acessível: garanta que todos os componentes sigam a WCAG 2.1 AA
- Compostível: crie APIs previsíveis que permitam combinar e estender componentes facilmente
Design Tokens
Use tokens para garantir consistência visual:
// exemplo de tokens
--color-primary: #0070f3;
--spacing-unit: 8px;
--border-radius: 4px;
Acessibilidade
Para cada componente:
- Atributos ARIA necessários (
aria-label,aria-expanded, etc.) - Foco gerenciável e visível (
tabIndex,:focus-visible) - Suporte a navegação por teclado (
onKeyDown,role) - Testes automatizados de acessibilidade (axe, Lighthouse)
Publicação
- Configure
package.jsoncommain,module,types - Use versionamento semântico (
major.minor.patch) - Inclua um
README.mdcom exemplos de uso - Publique com
npm publish(oupnpm publish,yarn publish)
Documentação
- Documente cada componente com exemplos de código ao vivo
- Inclua variações de estado (carregando, vazio, erro)
- Forneça tabelas de props com descrições, tipos e valores padrão
Recursos Adicionais
Este guia é mantido pela comunidade da Vercel. Contribuições são bem-vindas!