npm package: @olostecnologia/norma-charts
Description: Gráficos para o sistema Norma
Latest version: 1.0.22

# 📊 Norma Charts

> Uma biblioteca moderna de componentes de gráficos para React, construída com TypeScript, Vite e Nivo

[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
[![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)
[![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://storybook.js.org/)

## ✨ Características

- 🚀 **Performance**: Construído com Vite para desenvolvimento e build ultra-rápidos
- 📊 **Gráficos Modernos**: Powered by Nivo para visualizações de dados interativas
- 📖 **Storybook**: Documentação interativa e desenvolvimento isolado de componentes
- 🧪 **Testes**: Configurado com Vitest e Testing Library
- 🔧 **TypeScript**: Tipagem estática para maior segurança e produtividade
- ♿ **Acessibilidade**: Testes de a11y integrados
- 🎭 **E2E Testing**: Testes end-to-end com Playwright

## 🚀 Início Rápido

### Pré-requisitos

- Node.js (versão 18 ou superior)
- Yarn

### Instalação

```bash
# Clone o repositório
git clone https://github.com/OlosCore/norma-charts.git

# Navegue até o diretório
cd norma-charts

# Instale as dependências
yarn install
```

### Executando o projeto

```bash
# Modo desenvolvimento
yarn dev

# Storybook
yarn storybook

# Build para produção
yarn build

# Preview do build
yarn preview
```

## ⚠️ Peer dependencies e compatibilidade

Esta biblioteca exige que você tenha React 18+ instalado no seu projeto.

```bash
# Instale as dependências peer obrigatórias
yarn add react@^18.0.0 react-dom@^18.0.0 @types/react @types/react-dom
# ou
npm install react@^18.0.0 react-dom@^18.0.0 @types/react @types/react-dom
```

> **Atenção:**  
> React e React-DOM são peerDependencies obrigatórios.  
> Não instale múltiplas versões de React no mesmo projeto para evitar erros como "Invalid hook call".

### Compatibilidade

- **Vite**: Suporte total (ESM)
- **Next.js**: Suporte SSR e Client Components
- **Create React App**: Suporte Webpack

### SSR

Esta biblioteca é compatível com SSR (Next.js, Remix, etc).  
Garanta que React não seja duplicado entre dependências do seu app e da biblioteca.

## 📊 Componentes Disponíveis

A biblioteca inclui os seguintes componentes de gráficos:

- **Bar Chart**: Gráfico de barras responsivo e customizável
- **Gauge Chart**: Gráfico de medidor para visualizações de progresso
- **Heatmap**: Mapa de calor para visualizações densas de dados
- **Line Chart**: Gráfico de linhas para tendências e séries temporais
- **Pie Chart**: Gráfico de pizza para proporções e distribuições

Para mais detalhes e exemplos de uso, consulte a [documentação do Storybook](#).

## 🧰 Stack Tecnológica

- **⚛️ React 19**: Biblioteca de interface do usuário
- **🔷 TypeScript**: Superset tipado do JavaScript
- **⚡ Vite**: Build tool e dev server
- **📊 Nivo**: Biblioteca de gráficos para React
- **📖 Storybook**: Ferramenta para desenvolvimento de componentes
- **🧪 Vitest**: Framework de testes
- **🎭 Playwright**: Testes end-to-end
- **🔍 ESLint**: Linter para qualidade de código

## 🗂️ Estrutura do Projeto

```
norma-charts/
├── 📁 public/           # Arquivos estáticos
├── 📁 src/
│   ├── 📁 @types/       # Definições de tipos TypeScript
│   ├── 📁 assets/       # Recursos estáticos
│   ├── 📁 components/   # Componentes React
│   │   ├── 📁 Bar/      # Componente de gráfico de barras
│   │   ├── 📁 Heatmap/  # Componente de mapa de calor
│   │   ├── 📁 Line/     # Componente de gráfico de linhas
│   │   ├── 📁 Gauge/    # Componente de gráfico de medidor
│   │   ├── 📁 Donut/    # Componente de gráfico de rosca
│   │   └── 📁 Pie/      # Componente de gráfico de pizza
│   ├── 📁 hooks/        # Hooks personalizados
│   ├── 📁 stories/      # Arquivos de histórias para Storybook
│   ├── 📁 style/        # Estilos globais
│   ├── 📁 theme/        # Configurações de tema
│   └── 📁 utils/        # Funções utilitárias
├── 📄 package.json      # Dependências e scripts
├── 📄 vite.config.ts    # Configuração do Vite
├── 📄 tsconfig.json     # Configuração do TypeScript
└── 📄 README.md         # Documentação do projeto
```

## 🔧 Scripts Disponíveis

| Script                 | Descrição                               |
| ---------------------- | --------------------------------------- |
| `yarn dev`             | 🏃‍♂️ Inicia o servidor de desenvolvimento |
| `yarn build`           | 🏗️ Cria build para produção             |
| `yarn preview`         | 👀 Preview do build de produção         |
| `yarn lint`            | 🔍 Executa o linter                     |
| `yarn storybook`       | 📖 Inicia o Storybook                   |
| `yarn build-storybook` | 📚 Build do Storybook                   |

## 🧪 Testes

```bash
# Executar todos os testes
yarn test

# Executar testes em modo watch
yarn test:watch

# Executar testes com coverage
yarn test:coverage
```

## 🤝 Contribuindo

1. 🍴 Fork o projeto
2. 🌿 Crie uma branch para sua feature (`git checkout -b feature/nova-feature`)
3. 💾 Commit suas mudanças (`git commit -m 'Adiciona nova feature'`)
4. 📤 Push para a branch (`git push origin feature/nova-feature`)
5. 🔄 Abra um Pull Request

## 📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.

## 👥 Equipe

Desenvolvido com ❤️ pela equipe [OlosCore](https://github.com/OlosCore)