@freedom/react-components

Biblioteca de componentes React do Freedom Design System. Oferece uma coleção de componentes acessíveis e customizáveis para construção de interfaces de forma consistente.

Requisitos

• React ^18.2.0
• React DOM ^18.2.0
• Node.js >= 14.x

Instalação

npm install @freedom/react-components
# ou
yarn add @freedom/react-components

Dependências do design system

O pacote utiliza tokens e ícones do Freedom. Instale os peer dependencies necessárias:

npm install @freedom/tokens @freedom/react-icons
# ou
yarn add @freedom/tokens @freedom/react-icons

Componentes

Formulários e entrada de dados

• TextInput — Campo de texto com máscara e adornos
• MultilineTextInput — Área de texto multilinha
• PasswordInput — Campo de senha com toggle de visibilidade
• Select — Select customizado
• AdvancedSelect — Select com busca e múltipla escolha
• Checkbox — Caixa de seleção
• RadioGroup — Grupo de opções radio
• Switch — Interruptor
• DatePicker — Seletor de data
• FileUpload — Upload de arquivos

Ações e feedback

• Button — Botão
• IconButton — Botão apenas com ícone
• Chip — Etiqueta/categoria
• Tag — Tag para listas e filtros
• Alert — Mensagem de alerta
• Banner — Faixa informativa
• Badge — Indicador numérico ou de status
• Toast / Toasts — Notificações temporárias
• ProgressBar — Barra de progresso
• Skeleton — Placeholder de carregamento

Layout e estrutura

• Card — Cartão de conteúdo
• TotalCard — Cartão para métricas e totais
• Divider — Separador visual
• Drawer — Painel lateral deslizante
• Modal — Janela modal
• Dialog — Diálogo de confirmação ou formulário

Navegação

• Link — Link estilizado
• Breadcrumbs — Navegação em migalhas
• NavigationMenu — Menu de navegação
• BackToTop — Botão voltar ao topo
• Tabs — Abas

Exibição de conteúdo

• Typography — Títulos, parágrafos e textos
• Avatar — Foto ou iniciais do usuário
• Rating — Avaliação por estrelas
• Timeline — Linha do tempo
• ImageCarousel — Carrossel de imagens
• TextToolbar — Barra de formatação de texto (rich text)

Gráficos

• PieChart — Gráfico de pizza
• BarChart — Gráfico de barras
• LineChart — Gráfico de linhas

Utilitários

• Filter — Filtros com tags e busca
• Tooltip — Dica ao passar o mouse
• ErrorBoundary — Tratamento de erros em React
• NeedPermission — Controle de permissões por perfil

Estilos

Os componentes dependem dos estilos do pacote @freedom/styles. Importe o CSS principal no entry da aplicação:

import '@freedom/styles/scss/index.scss';

Ou use o ponto de entrada já referenciado pelo pacote, conforme a documentação do design system.

Tipos TypeScript

O pacote exporta definições em dist/types. Tipos auxiliares são exportados junto dos componentes, por exemplo:

import type {
  SelectOption,
  ModalAction,
  FileUploadProps,
} from '@freedom/react-components';

Licença

MIT © 2026 Freedom Design System