Apisul Plataforma UI Core

Biblioteca de componentes React + MUI (Material UI) com suporte aos componentes Pro e Premium do MUI-X.

📦 Instalação

1. Configurar acesso ao Azure Artifacts

Crie um arquivo .npmrc na raiz do seu projeto:

@apisul:registry=https://pkgs.dev.azure.com/Apisul/_packaging/apisul-plataforma-ui-core/npm/registry/
always-auth=true

2. Instalar o pacote

npm install @apisul/plataforma-ui-core

3. Configurar a licença MUI Pro

No arquivo de entrada da sua aplicação (main.tsx ou index.tsx):

import { LicenseInfo } from '@apisul/plataforma-ui-core';

// Configure a licença antes de usar componentes Pro/Premium
LicenseInfo.setLicenseKey(import.meta.env.VITE_MUI_X_LICENSE_KEY);

Adicione a chave no arquivo .env:

VITE_MUI_X_LICENSE_KEY=sua-chave-aqui

🚀 Uso

Importar componentes

import { 
  Button, 
  TextField, 
  DataGrid,
  DataGridPro,
  DataGridPremium,
  DateTimePicker,
  LocalizationProvider
} from '@apisul/plataforma-ui-core';

function MyComponent() {
  return (
    <div>
      <Button variant="contained">Click me</Button>
      <DataGridPremium rows={rows} columns={columns} />
    </div>
  );
}

📚 Componentes disponíveis

Esta biblioteca re-exporta todos os componentes do MUI:

• @mui/material - Todos os componentes base
• @mui/icons-material - Todos os ícones
• @mui/x-data-grid - DataGrid (community)
• @mui/x-data-grid-pro - DataGridPro
• @mui/x-data-grid-premium - DataGridPremium
• @mui/x-date-pickers - Date pickers (community)
• @mui/x-date-pickers-pro - Date pickers Pro
• @mui/x-charts - Charts (community)
• @mui/x-charts-pro - Charts Pro
• @mui/x-tree-view - Tree view (community)
• @mui/x-tree-view-pro - Tree view Pro

⚙️ Requisitos

O projeto consumidor deve ter instalado:

{
  "dependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0",
    "@mui/material": "^7.0.0",
    "@emotion/react": "^11.0.0",
    "@emotion/styled": "^11.0.0"
  }
}

🔑 Gerenciamento da Licença MUI Pro

IMPORTANTE: A chave de licença do MUI Pro não está incluída neste pacote por questões de segurança.

Cada projeto que usar componentes Pro/Premium deve:

1. Obter a chave de licença com a equipe
2. Configurar a chave como variável de ambiente
3. Inicializar a licença antes de usar os componentes

🏗️ Desenvolvimento

Configuração inicial

# Instalar dependências
npm install

# Copiar arquivo de exemplo das variáveis de ambiente
cp .env.example .env

# Editar o arquivo .env e adicionar a chave de licença MUI-X
# VITE_MUI_X_LICENSE_KEY=sua-chave-aqui

Comandos disponíveis

# Modo desenvolvimento (playground)
npm run dev

# Build da biblioteca
npm run build

# Lint do código
npm run lint

# Preview do build
npm run preview

Publicação

# Publicar (via pipeline)
git push origin main

📝 Versionamento

Este projeto segue o Semantic Versioning.

Para publicar uma nova versão:

npm version patch  # 0.1.0 -> 0.1.1
npm version minor  # 0.1.0 -> 0.2.0
npm version major  # 0.1.0 -> 1.0.0

Depois faça push da tag:

git push origin main --follow-tags

👥 Suporte

Para dúvidas ou problemas, entre em contato com a equipe de Plataforma Apisul.