@vtclog/lib-wms-vtclog

Biblioteca de componentes React para o sistema WMS VTCLog. Esta biblioteca fornece um conjunto completo de componentes de interface do usuário reutilizáveis, construídos com React, TypeScript e Tailwind CSS.

🚀 Instalação

npm install @vtclog/lib-wms-vtclog

📦 Dependências

Esta biblioteca requer as seguintes dependências peer:

• React >= 18.0.0
• React DOM >= 18.0.0

🎯 Uso

import { Button, Header, Page } from '@vtclog/lib-wms-vtclog';

function App() {
  return (
    <Page>
      <Header title="Minha Aplicação" />
      <Button variant="primary">
        Clique aqui
      </Button>
    </Page>
  );
}

🧩 Componentes Disponíveis

Átomos

• Button - Botões com diferentes variantes e tamanhos
• Input - Campos de entrada de texto
• Checkbox - Caixas de seleção
• Radio - Botões de opção
• Switch - Interruptores
• Select - Listas suspensas
• Textarea - Áreas de texto
• Label - Rótulos para formulários
• Icon - Ícones SVG
• Image - Componente de imagem
• Badge - Etiquetas e badges
• Tag - Tags para categorização
• Link - Links estilizados
• Avatar - Avatares de usuário
• Spinner - Indicadores de carregamento
• ProgressBar - Barras de progresso
• NotificationDot - Pontos de notificação
• ErrorMessage - Mensagens de erro
• HelperText - Textos de ajuda

Moléculas

• Form - Formulários completos
• FormField - Campos de formulário com validação
• Header - Cabeçalhos de página
• TopBar - Barra superior de navegação

Organismos

• Page - Layout de página completo

🎨 Sistema de Design

A biblioteca inclui um sistema de design completo com:

• Cores - Paleta de cores consistente
• Tipografia - Sistema tipográfico padronizado
• Espaçamentos - Sistema de espaçamento baseado em Tailwind CSS

🛠️ Desenvolvimento

Para contribuir com a biblioteca:

# Instalar dependências
npm install

# Executar em modo de desenvolvimento
npm run dev

# Executar Storybook
npm run storybook

# Build da biblioteca
npm run build:lib

# Executar testes
npm test

# Linting
npm run lint

📚 Storybook

A biblioteca inclui documentação interativa no Storybook. Para visualizar:

npm run storybook

📄 Licença

MIT License - veja o arquivo LICENSE para detalhes.

🤝 Contribuição

Contribuições são bem-vindas! Por favor, abra uma issue ou pull request no repositório.

📞 Suporte

Para suporte, entre em contato com a equipe VTCLog.