@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

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.