npm package: @moura-logistic/logistic-lib
Description: Biblioteca de componentes logísticos Moura com Bootstrap integrado.
Latest version: 0.0.45

# @moura/logistic-lib

Biblioteca de componentes React para aplicações logísticas com design system Moura integrado.

## 📦 Instalação

```bash
npm install @moura/logistic-lib
```

## 🎨 Dependências

Esta biblioteca possui as seguintes peer dependencies que devem estar instaladas no seu projeto:

```bash
npm install react react-dom bootstrap chart.js react-chartjs-2 react-icons
```

## 🚀 Início Rápido

### Importe e use os componentes

O CSS já vem embutido nos componentes - **não é necessário importar arquivos CSS separados**!

```tsx
import { LogisticsButton, InventoryScorecard, ScoreCardChart } from '@moura/logistic-lib';

function App() {
  return (
    <div>
      <LogisticsButton variant="primary" size="md">
        Clique aqui
      </LogisticsButton>

      <ScoreCardChart percentage={87} />

      <InventoryScorecard
        title="MRO"
        headerComponent={<ScoreCardChart percentage={87} />}
        metrics={[
          {
            id: '1',
            label: 'Total de itens',
            icon: <span>📦</span>,
            totalValue: 50840,
            totalLabel: 'TOTAL',
            actionValue: 4821,
            actionLabel: 'COM AÇÃO',
            classAValue: 248,
            classALabel: 'CLASSE A',
          },
        ]}
      />
    </div>
  );
}
```

## 📚 Componentes Disponíveis

### LogisticsButton

Botão estilizado com variantes primary e secondary seguindo o design Moura.

[Ver documentação detalhada](./src/components/Button/README.md)

### ScoreCardChart

Gráfico circular (doughnut) que mostra porcentagem com mudança automática de cor e label.

[Ver documentação detalhada](./src/components/Chart/README.md)

### InventoryScorecard

Card de scorecard de inventário com cabeçalho opcional e lista de métricas.

[Ver documentação detalhada](./src/components/ScoreCard/README.md)

#### Novo: Tabela lado a lado (TableScoreCard)

Agora o `InventoryScorecard` pode abrir uma `TableScoreCard` **ao lado** quando você clica em uma métrica (ou no header). Esse recurso é útil para detalhar dados sem usar modal/popup.

##### Como usar (lado a lado)

```tsx
import { InventoryScorecard } from '@moura/logistic-lib';

const columns = [
  { key: 'material', header: 'Material', pinnable: true },
  { key: 'descricao', header: 'Texto breve', pinnable: true },
  { key: 'centro', header: 'Centro' },
  { key: 'quantidade', header: 'Qtd', align: 'right' },
  { key: 'estoque', header: 'Estoque', align: 'right' },
  { key: 'status', header: 'Status' }
];

const rows = [
  {
    id: '1',
    data: {
      material: '11002329',
      descricao: 'REATOR CONVENC 1X20W',
      centro: '0005',
      quantidade: 0,
      estoque: 0,
      status: 'Mat. Ruptura'
    }
  }
];

<InventoryScorecard
  title="Estoque Atual"
  metrics={[
    {
      id: '1',
      label: 'Total de itens',
      icon: <span>📦</span>,
      columns: [
        { value: 12450, label: 'TOTAL' },
        { value: 1120, label: 'COM ACAO' },
        { value: 89, label: 'CLASSE A' }
      ]
    }
  ]}
  onMetricTableClick={(metricId, columnIndex, columnLabel) => ({
    title: `Detalhes - ${metricId}`,
    subtitle: `Clique: ${columnLabel}`,
    columns,
    rows,
    enableExport: true,
    enableColumnControls: true,
    enablePinning: true,
    initialPinnedColumns: ['material', 'descricao']
  })}
/>
```

##### Abrir tabela ao clicar no header

Se você quiser que o clique no **header** abra a tabela (ex.: gráfico/ícone), use `onHeaderTableClick`:

```tsx
<InventoryScorecard
  title="Eficiência"
  headerComponent={<ProgressBarChart value={72.8} label="Indicador X" />}
  metrics={[/* ... */]}
  onHeaderTableClick={() => ({
    title: 'Resumo',
    subtitle: 'Header',
    columns,
    rows
  })}
/>
```

##### Comportamentos importantes

- **Clique novamente** na mesma métrica ou no header para **fechar** a tabela.
- Existe um botão **X** no canto da tabela para fechar.
- A métrica clicada fica **destacada no número** (não na linha).

##### Props relacionadas

- `onMetricTableClick`: callback para montar a tabela a partir da métrica clicada
- `onHeaderTableClick`: callback para abrir tabela via header
- `onMetricTableVisibilityChange`: notifica qual métrica está ativa (ou `null` ao fechar)

### MetricRow

Linha de métrica com ícone, label e três colunas de valores (usado internamente pelo InventoryScorecard).

[Ver documentação detalhada](./src/components/ScoreCard/README.md)

## 🎨 Design System

### CSS Automático

O CSS da biblioteca (incluindo Bootstrap 5.3+ e variáveis do tema Moura) é **injetado automaticamente** quando você importa os componentes. Não é necessário nenhuma configuração adicional!

### Paleta de Cores

A biblioteca usa variáveis CSS do tema Moura:

```css
--moura-primary       /* Azul escuro #1F3D90 */
--moura-blue-light    /* Azul claro #0274BA */
--moura-danger        /* Vermelho #DC3545 */
--moura-warning       /* Amarelo #E3A21D */
--moura-white         /* Branco #FFFFFF */
--moura-black-alt     /* Preto alternativo #373435 */
--moura-gray          /* Cinza #B8B6BB */
--moura-track         /* Cinza claro para trilhas #EDEEF0 */
```

Você pode usar essas variáveis nos seus próprios estilos:

```css
.meu-elemento {
  color: var(--moura-primary);
  background-color: var(--moura-white);
}
```

## 🛠️ Desenvolvimento

### Storybook

Para visualizar todos os componentes e suas variações:

```bash
npm run storybook
```

Acesse: http://localhost:6006

### Build

```bash
npm run build
```

## 📄 Licença

MIT

## 🤝 Suporte

Para reportar problemas ou sugerir melhorias, entre em contato com a equipe de desenvolvimento.