Introdução

O Raaghu Design System é uma biblioteca de componentes React abrangente, escalável e altamente documentada. Ele fornece um conjunto unificado de componentes de UI, tokens de design e recursos de temas para criar aplicações web consistentes, acessíveis e de alto desempenho.

Principais Recursos

• Biblioteca de Componentes: componentes React reutilizáveis e personalizáveis (botões, gráficos, seletores, toolbars, etc.) organizados em raaghu-components e raaghu-elements.
• Tokens de Design & Temas: variáveis SCSS centralizadas e propriedades CSS para cores, espaçamento, tipografia e muito mais. Suporte a troca fácil de temas (claro, escuro, etc.).
• Performance: monitoramento de desempenho embutido, análise de bundle e otimizações (tree-shaking, code splitting, memoization, virtualização).
• Acessibilidade: conformidade com WCAG 2.1 AA, navegação por teclado, suporte ARIA, contraste de cores e gerenciamento de foco.
• Localização (i18n): suporte à internacionalização para múltiplos idiomas, RTL, pluralização e traduções sensíveis ao contexto.
• Documentação: guias extensos sobre arquitetura, CSS, temas, localização, performance e testes.
• Automação: scripts para gerar SCSS, atualizar variáveis de tema e manter consistência.

Estrutura do Projeto

• raaghu-components e raaghu-elements: código-fonte de todos os componentes de UI.
• public: arquivos estáticos.
• utils: funções utilitárias e helpers.
• package.json, tsconfig.json, vite.config.ts: arquivos de configuração do projeto.

Fluxo de Desenvolvimento

• Componentes são desenvolvidos isoladamente, documentados com Storybook e testados para acessibilidade e performance.
• Arquivos SCSS utilizam tokens de design para todos os estilos, garantindo consistência e facilidade de aplicação de temas.
• Scripts automatizados ajudam a manter e expandir o sistema de forma eficiente.

Guia Rápido para Desenvolvedores

1. Leia a visão geral da arquitetura e os guias de CSS na pasta docs.
2. Siga a estrutura e as convenções de nomenclatura dos componentes.
3. Utilize tokens de design e variáveis de tema para todos os estilos.
4. Teste acessibilidade e performance conforme desenvolve.