@moura/logistic-lib

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

📦 Instalação

npm install @moura/logistic-lib

🎨 Dependências

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

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!

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

ScoreCardChart

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

Ver documentação detalhada

InventoryScorecard

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

Ver documentação detalhada

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)

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:

<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

🎨 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:

--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:

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

🛠️ Desenvolvimento

Storybook

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

npm run storybook

Acesse: http://localhost:6006

Build

npm run build

📄 Licença

MIT

🤝 Suporte

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