📊 Norma Charts

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

✨ 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

# 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

# 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.

# 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

# 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 para mais detalhes.

👥 Equipe

Desenvolvido com ❤️ pela equipe OlosCore