SicoobKit

Biblioteca de componentes React do Design System Sicoob.

Instalação

npm install

Desenvolvimento

npm run dev

Build

npm run build

Componentes

Fundação

| Componente | Descrição | |---|---| | Typography | Títulos, textos, links e estilos tipográficos | | Icon | Sistema de ícones (colorido, linha, com fundo) | | Logo | Logos Sicoob em variações | | Tokens | Cores, espaçamentos e variáveis de design |

Formulários

| Componente | Descrição | |---|---| | Button | Botões com variantes, tamanhos e estados | | Input | Campo de texto com máscaras e validação | | InputNumber | Campo numérico com incremento/decremento | | Select | Seleção com busca e opções agrupadas | | Checkbox | Caixa de seleção individual e em grupo | | Radio | Grupo de opções exclusivas | | Slider | Controle deslizante de valores | | DatePicker | Seletor de data | | DateRangePicker | Seletor de período | | FileUpload | Upload de arquivos com drag & drop | | FormGroup | Agrupamento de campos com label e validação |

Dados & Tabelas

| Componente | Descrição | |---|---| | Table | Tabela com ordenação e filtros | | DataGrid | Grade avançada com agrupamento, edição inline e exportação (CSV, XLSX, JSON) | | Kanban | Quadro Kanban com drag & drop | | Chart | Gráficos (barras, linhas, pizza, rosca, área) | | Calendar | Calendário com eventos | | Timeline | Linha do tempo vertical | | TreeView | Árvore de itens expansível | | Transfer | Transferência entre listas | | NPS | Pesquisa de satisfação | | Rating | Avaliação com estrelas | | ProgressBar | Barra de progresso |

Feedback & Sobreposição

| Componente | Descrição | |---|---| | Alert | Alertas informativos | | SicoobAlert | Alerta estilizado Sicoob | | Toast | Notificações temporárias | | Modal | Janela modal | | Drawer | Painel lateral deslizante | | Popover | Conteúdo flutuante ancorado | | Tooltip | Dica flutuante ao passar o mouse | | Loading | Indicador de carregamento | | Skeleton | Placeholder de carregamento | | EmptyState | Estado vazio com ação |

Layout & Navegação

| Componente | Descrição | |---|---| | Card | Cartão com variantes | | Badge | Emblema/etiqueta de status | | Tag | Tags de categorização | | Avatar | Foto ou iniciais do usuário | | Nav | Barra de navegação | | Tabs | Abas de conteúdo | | Accordion | Seções expansíveis | | Breadcrumb | Caminho de navegação | | Pagination | Paginação de listas | | Carousel | Carrossel de conteúdo | | Divider | Divisor horizontal/vertical | | Stepper | Passos de progresso | | BackToTop | Botão voltar ao topo | | Chat | Interface de bate-papo | | QRCode | Gerador de QR Code | | Sidebar | Menu lateral | | Footer | Rodapé |

Tecnologias

• React 18 com hooks
• TypeScript para tipagem
• Vite para build
• CSS Modules com Custom Properties
• Design Tokens Sicoob (cores, tipografia, espaçamentos)

Estrutura

src/
├── components/     # Componentes React
├── styles/         # Estilos globais e tokens
public/
├── icons/          # Ícones (colorido, linha, com_fundo)
├── logos/          # Logos Sicoob
├── fonte/          # Fontes Sicoob Sans e Sicoob Script

Licença

Uso interno Sicoob.