Documentação das Alterações Feitas e Planejamento

Resumo das Ações Feitas no Projeto

1. Configuração Inicial do Rollup
   • Configurado o rollup.config.js para suportar a construção do projeto.
   • Adicionados plugins essenciais:
     • @rollup/plugin-alias: Para criar atalhos de importação.
     • @rollup/plugin-node-resolve e @rollup/plugin-commonjs: Para resolver dependências de módulos.
     • rollup-plugin-typescript: Para compilar TypeScript.
     • rollup-plugin-postcss: Para processar arquivos CSS e LESS.
     • rollup-plugin-dts: Para gerar arquivos de declaração TypeScript.
     • @svgr/rollup: Para importar SVGs como componentes React.
2. Organização do Código
   • Criado um diretório específico para cada componente, como src/components/Button, para isolar responsabilidades e melhorar a organização.
   • Adicionados aliases no Rollup para facilitar a importação de arquivos e pastas:
     • Exemplo: @components aponta para src/components.
3. Configuração de Estilos
   • Configurado o rollup-plugin-postcss para suportar arquivos .css e .less.
   • Habilitado o uso de LESS com a opção javascriptEnabled: true.
   • Configurado o plugin para gerar arquivos CSS separados.
4. Geração de Tipos TypeScript
   • Adicionado o plugin rollup-plugin-dts para gerar arquivos .d.ts no build final.
   • Configurado o Rollup para gerar os tipos no formato ESM.
5. Atualizações no package.json
   • Configurado os campos main e module para apontar para os arquivos gerados pelo Rollup:
     • main: Arquivo CommonJS.
     • module: Arquivo ES Module.
6. Ajustes no TypeScript
   • Atualizado o tsconfig.json para incluir os novos diretórios e garantir que todos os arquivos sejam compilados corretamente.
7. Testes e Verificações
   • Planejado a configuração de testes para garantir a qualidade do código (ainda pendente).
   • Verificado o funcionamento dos componentes após as mudanças.

To-Do List

Tarefas Concluídas

• [x] Mover o componente para uma pasta própria.
• [x] Atualizar o caminho de entrada no rollup.config.js.
• [x] Ajustar o arquivo de estilos do componente.
• [x] Atualizar o arquivo de exportação principal (src/index.ts).
• [x] Verificar e ajustar o tsconfig.json.

Tarefas Pendentes

1. Configurar Testes
   • Configurar uma ferramenta de testes (como Jest ou React Testing Library).
   • Criar testes unitários para o componente Button.
   • Garantir cobertura de testes para os casos principais.
2. Importar Componentes da Outra Biblioteca
   • Identificar os componentes necessários na outra biblioteca.
   • Importar e integrar esses componentes ao projeto atual.
3. Testar o Componente
   • Testar o componente manualmente para garantir que ele funcione como esperado.
   • Verificar se os estilos estão sendo aplicados corretamente.
   • Garantir que o componente seja responsivo e funcione em diferentes navegadores.
4. Aplicar Acessibilidade
   • Usar ferramentas como @storybook/addon-a11y ou axe-core para verificar a acessibilidade.
   • Garantir que o componente seja acessível para usuários com deficiência.
   • Adicionar atributos ARIA e outras melhorias de acessibilidade, se necessário.

Próximos Passos

• Priorizar as tarefas pendentes.
• Configurar o ambiente de testes e criar os primeiros testes unitários.
• Garantir que o componente esteja pronto para uso em produção com acessibilidade e testes completos.
• Aplicar práticas de acessibilidade (a11y) nos componentes.