npm package: @mynameiskayky/cubevis-ui
Description: CubeVis Design System - Sistema de componentes modular para produtos CubeVis (Simplify, GreenCoins, etc.)
Author: CubeVis Team
Latest version: 1.0.1

# 🎨 CubeVis UI - Design System

<div align="center">
  <img src="https://img.shields.io/npm/v/@mynameiskayky/cubevis-ui" alt="NPM Version" />
  <img src="https://img.shields.io/npm/l/@mynameiskayky/cubevis-ui" alt="License" />
  <img src="https://img.shields.io/npm/dm/@mynameiskayky/cubevis-ui" alt="Downloads" />
  <img src="https://img.shields.io/github/stars/mynameiskayky/cubevis-ui" alt="Stars" />
</div>

> **Sistema de Design Modular para Produtos CubeVis** - Uma biblioteca de componentes React +
> TypeScript com automação completa de desenvolvimento

## ✨ Características

- 🎯 **TypeScript Nativo** - Tipagem completa e IntelliSense
- 🎨 **Multi-tema** - Suporte para Simplify e GreenCoins
- 📱 **Mobile-first** - Design responsivo desde o início
- ♿ **Acessível** - WAI-ARIA completo
- 🚀 **Performático** - Bundle otimizado e tree-shaking
- 🧪 **Testado** - Cobertura completa com Jest
- 📖 **Documentado** - Storybook interativo
- 🤖 **Automatizado** - CLI completo para desenvolvimento

## 🚀 Instalação

```bash
npm install @mynameiskayky/cubevis-ui
```

ou

```bash
yarn add @mynameiskayky/cubevis-ui
```

## 📖 Uso Básico

```tsx
import { Button } from '@mynameiskayky/cubevis-ui';
import '@mynameiskayky/cubevis-ui/dist/styles.css';

function App() {
  return (
    <Button variant="primary" size="lg">
      Clique aqui
    </Button>
  );
}
```

## 🎨 Temas Disponíveis

### Simplify (Azul Profissional)

```tsx
import { Button } from '@mynameiskayky/cubevis-ui/simplify';
```

### GreenCoins (Verde Sustentável)

```tsx
import { Button } from '@mynameiskayky/cubevis-ui/greencoins';
```

## 🤖 Sistema de Automação

### Criar Componentes

```bash
# Componente básico
npm run create Button

# Com opções avançadas
npm run cli create Card --category=display --icon

# Componente de formulário
npm run cli create Input --category=form --form
```

### Comandos de Desenvolvimento

```bash
# Desenvolvimento com Storybook
npm run dev

# Executar testes
npm run test

# Validar código
npm run validate

# Analisar bundle
npm run analyze
```

### Publicação Automatizada

```bash
# Release patch (1.0.0 → 1.0.1)
npm run release:patch

# Release minor (1.0.0 → 1.1.0)
npm run release:minor

# Release major (1.0.0 → 2.0.0)
npm run release:major

# Release interativo
npm run release
```

## 📦 Componentes Disponíveis

### Interface

- `Button` - Botão com múltiplas variantes
- `Card` - Container de conteúdo
- `Badge` - Indicadores e labels
- `Avatar` - Imagens de perfil

### Formulários

- `Input` - Campo de entrada
- `Select` - Seleção de opções
- `Checkbox` - Caixas de seleção
- `Switch` - Alternadores

### Feedback

- `Alert` - Mensagens de alerta
- `Toast` - Notificações temporárias
- `Tooltip` - Dicas contextuais
- `Modal` - Diálogos modais

### Dados

- `DataTable` - Tabelas de dados
- `Pagination` - Navegação paginada
- `Skeleton` - Estados de carregamento

## 🛠️ Desenvolvimento

### Pré-requisitos

- Node.js 18+
- npm ou yarn
- Git

### Setup Local

```bash
# Clonar repositório
git clone https://github.com/mynameiskayky/cubevis-ui.git
cd cubevis-ui

# Instalar dependências
npm install

# Iniciar desenvolvimento
npm run dev
```

### Estrutura do Projeto

```
cube-ui/
├── src/
│   ├── components/      # Componentes React
│   ├── themes/          # Temas (Simplify, GreenCoins)
│   ├── tokens/          # Design tokens
│   ├── utils/           # Utilitários
│   └── tests/           # Configuração de testes
├── scripts/             # Automação e CLI
├── stories/             # Stories do Storybook
├── docs/                # Documentação
└── public/              # Assets estáticos
```

### Fluxo de Contribuição

1. **Fork** o repositório
2. **Clone** seu fork
3. **Crie** uma branch: `git checkout -b feature/nome`
4. **Desenvolva** usando o CLI: `npm run create ComponentName`
5. **Teste** no Storybook: `npm run dev`
6. **Valide**: `npm run validate`
7. **Commit**: `git commit -m "feat: add ComponentName"`
8. **Push**: `git push origin feature/nome`
9. **PR**: Abra um Pull Request

## 📊 Scripts Disponíveis

| Comando            | Descrição                                  |
| ------------------ | ------------------------------------------ |
| `npm run dev`      | Inicia o Storybook em modo desenvolvimento |
| `npm run build`    | Compila a biblioteca para produção         |
| `npm run test`     | Executa todos os testes                    |
| `npm run lint`     | Verifica e corrige problemas de código     |
| `npm run format`   | Formata código com Prettier                |
| `npm run validate` | Valida TypeScript, ESLint e Prettier       |
| `npm run create`   | Cria novo componente com o CLI             |
| `npm run release`  | Publicação automatizada completa           |
| `npm run analyze`  | Analisa tamanho do bundle                  |

## 🧪 Testes

```bash
# Executar todos os testes
npm test

# Modo watch
npm run test:watch

# Com cobertura
npm run test:coverage

# Teste específico
npm test Button
```

## 📖 Documentação

- **[Storybook](https://cubevis-ui.vercel.app)** - Documentação interativa
- **[Guia de Início Rápido](docs/automation/quick-start.md)** - Comece aqui
- **[Padrões de Desenvolvimento](PADRAO_DESENVOLVIMENTO_CUBEVIS.md)** - Guidelines
- **[API Reference](docs/reference)** - Referência completa

## 🤝 Contribuindo

Contribuições são bem-vindas! Por favor:

1. Leia o [Guia de Contribuição](GUIA_CONTRIBUICAO.md)
2. Siga os [Padrões de Desenvolvimento](PADRAO_DESENVOLVIMENTO_CUBEVIS.md)
3. Use o sistema de automação para criar componentes
4. Adicione testes para novas funcionalidades
5. Atualize a documentação quando necessário

## 📄 Licença

Este projeto está licenciado sob a licença MIT - veja o arquivo [LICENSE](LICENSE) para detalhes.

## 🔗 Links Úteis

- [NPM Package](https://www.npmjs.com/package/@mynameiskayky/cubevis-ui)
- [GitHub Repository](https://github.com/mynameiskayky/cubevis-ui)
- [Storybook Demo](https://cubevis-ui.vercel.app)
- [Changelog](CHANGELOG.md)
- [Roadmap](docs/reference/changelog.md#roadmap)

## 💡 Suporte

- **Issues**: [GitHub Issues](https://github.com/mynameiskayky/cubevis-ui/issues)
- **Discussions**: [GitHub Discussions](https://github.com/mynameiskayky/cubevis-ui/discussions)
- **Email**: suporte@cubevis.com.br

---

<div align="center">
  <p>Feito com ❤️ pela equipe CubeVis</p>
  <p>
    <a href="https://github.com/mynameiskayky/cubevis-ui/stargazers">⭐ Dê uma estrela se este projeto ajudou você!</a>
  </p>
</div>