ROADMAP.md

Roadmap

Scaffold

• Configurar react
• Configurar typescript
• Configurar gitignore
• Configurar storybook
• Configurar prettier

MVP

• Definir nome do projeto
• Definir logo
• Definir componentes da primeira release
• Criar componentes
  • Autocomplete
  • Avatar
  • Box
  • Button
  • Carrousel
  • Checkbox
  • Form
  • IconButton
  • Menu
  • Radio
  • RadioGroup
  • Select
  • Slider
  • Text
  • TextField
  • Title
• Configurar design tokens
• Definir família de fonte
• Definir paleta de cores
• Definir tema
• Criar story para todos os componentes
  • Autocomplete
  • Avatar
  • Box
  • Button
  • Carrousel
  • Checkbox
  • Form
  • IconButton
  • Menu
  • Radio
  • RadioGroup
  • Select
  • Slider
  • Text
  • TextField
  • Title
• Adicionar teste para todos os componentes
  • Autocomplete
  • Avatar
  • Box
  • Button
  • Carrousel
  • Checkbox
  • Form
  • IconButton
  • Menu
  • Radio
  • RadioGroup
  • Select
  • Slider
  • Text
  • TextField
  • Title
• [] Criar protótipos no figma
  • Autocomplete
  • Avatar
  • Box
  • Button
  • Carrousel
  • Checkbox
  • Form
  • IconButton
  • Menu
  • Radio
  • RadioGroup
  • Select
  • Slider
  • Text
  • TextField
  • Title

Improvements

• Traduzir documentação para inglês
• Adicionar novas regras no prettier com base no flipper-ui
• Melhorias do storybook
  • Adicionar logo
  • Utilizar fontes escolhidas para o projeto
  • Utilizar o tema do projeto
• Adicionar validações de pre-commit
  • Lint
  • Padronização das mensagens de commit
• Adicionar workflows de CI (Github Actions)

Links úteis

• Color (styled-system)
• Typography (styled-system)
• Advanced (styled-system)
• Buttons example:
• Context react
• Props com valor padrão
• Render props
• Outras props além do render
• Forms
• Acessibilidade
• Boas práticas de testes
• Prioridade das queries nos testes
• Design patterns