Tema
Níveis do sistema
Os componentes seguem o atomic design: peças pequenas formam peças maiores, e cada nível só usa componentes do próprio nível ou de níveis abaixo. Assim fica fácil achar o que usar e prever o que muda quando um componente muda.
| Nível | O que é | Exemplos |
|---|---|---|
| Átomos | Uma peça que não se divide: um ícone, um texto, um botão, um campo simples. Pode usar o BaseIcon por dentro. | BaseButton, BaseBadge, BaseCheckbox |
| Moléculas | Alguns átomos juntos para uma tarefa só: um campo com rótulo e ajuda, uma busca, uma paginação. | BaseField, BaseSearch, BasePagination |
| Organismos | Uma região inteira da tela, com comportamento próprio: tabela, envio de arquivos, janela modal, avisos. | BaseDataTable, BaseModal, BaseApprovalBar |
| Templates | A estrutura da página, onde os outros níveis entram. | BaseAppShell, BaseCard, BaseFormGrid |
Da base até a tela, cada camada usa só o que está abaixo dela:
Os tokens dão cor, espaço e tipografia. Os padrões de tela dizem como montar cada momento da tela com os componentes.
Todos os componentes por nível
Átomos (18)
Moléculas (22)
- BaseField e BaseInput
- BaseTextarea
- BaseRadioGroup e BaseRadio
- BaseFieldset
- BaseDateRange
- BaseCombobox
- BaseRowActions
- BaseUserMenuItem
- BaseSearch
- BaseSegmented
- BaseThemeSwitch
- BaseTabs
- BaseBreadcrumb
- BasePagination
- BaseAlertBanner
- BaseSummaryList
- BaseKpiCard
- BaseDiff
- BaseExecutionBar
- BaseStatusFlow
- BaseTimeline
- BaseFileItem
Organismos (8)
Templates (3)
A regra que o teste confere
- Todo componente de
src/componentsestá em um nível, na lista dedocs/.vitepress/levels.ts. - Um componente só importa componentes do mesmo nível ou de níveis abaixo. Um átomo nunca usa uma molécula; uma molécula nunca usa um organismo.
O teste tests/levels.test.ts reprova o pipeline se uma das duas regras for quebrada. Componente novo entra na lista, no nível certo, junto com a página de documentação.