@agrada_digital/pbm

v0.2.7

Published

21 days ago

A React component library to implement the PBM (Pharmacy Benefit Manager) model - Web Component for Vanilla JS

0High
0Medium
0Low

🚀 PBM Library

Uma biblioteca de componentes Web Component para implementar o modelo PBM (Pharmacy Benefit Manager) de forma simples e eficiente.
Totalmente self-contained com React, MUI e todas as dependências incluídas. Funciona com simples tags <script>.

GitHub package.json version

📦 Instalação

Basta adicionar uma tag script no seu HTML:

<!-- CSS da biblioteca -->
<link rel="stylesheet" href="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js">

<!-- Script único com tudo incluído (447 kB, 136 kB gzip) -->
<script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>

⚡ Quick Start

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js">
</head>
<body>
  <pbm-component
    tenant_id="seu_tenant_id"
    target_product='{"id":"123","name":"Medicamento","price":50}'
    is_authenticated_shopper="false"
  ></pbm-component>

  <script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>
</body>
</html>

🎯 Atributos do Web Component

| Atributo | Tipo | Descrição | |----------|------|-----------| | tenant_id | string | ID do tenant (obrigatório) | | target_product | JSON string | Produto alvo em formato JSON | | is_authenticated_shopper | "true" | "false" | Status de autenticação | | custom_login_url | string | URL customizada para login | | theme | JSON string | Configurações de tema (cores) |

💡 Exemplos de Uso

Exemplo Básico

<pbm-component
  tenant_id="agrada_001"
  target_product='{"id":"P001","name":"Medicamento X","price":50}'
></pbm-component>

<script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>

Com Tema Customizado

<pbm-component
  tenant_id="agrada_001"
  target_product='{"id":"P001","name":"Medicamento X"}'
  theme='{"primaryColor":"#FF5722","secondaryColor":"#2196F3"}'
></pbm-component>

<script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>

Com Interatividade via JavaScript

<pbm-component id="pbm"></pbm-component>

<script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>

<script>
  const pbm = document.getElementById('pbm');
  
  // Atualizar atributos
  pbm.setAttribute('tenant_id', 'agrada_001');
  pbm.setAttribute('target_product', JSON.stringify({
    id: 'P001',
    name: 'Medicamento X',
    price: 50
  }));
  
  // Ouvir mudanças
  window.pbm.subscribe((state) => {
    console.log('Benefício aplicado?', state.isApplied);
  });
</script>

🌍 CDN URLs

unpkg (recomendado)

https://unpkg.com/@agrada_digital/pbm@latest/dist/vanilla.js
https://unpkg.com/@agrada_digital/[email protected]/dist/vanilla.js

jsDelivr

https://cdn.jsdelivr.net/npm/@agrada_digital/pbm@latest/dist/vanilla.js
https://cdn.jsdelivr.net/npm/@agrada_digital/[email protected]/dist/vanilla.js

📊 O que está Incluído

✅ React 19 + React DOM
✅ MUI Components
✅ Zustand (State Management)
✅ Tailwind CSS
✅ React Hook Form
✅ Zod (Validação)
✅ Lucide Icons
✅ Todos os componentes da biblioteca

Tudo em um único arquivo: 447 kB (136 kB gzip)

🔗 Referências

USAGE.md - Guia de uso detalhado
PUBLISH_CHECKLIST.md - Checklist de publicação

📝 Licença

MIT is_authenticated_shopper={BOOLEAN} custom_login_url="/login"

🛠️ Tecnologias Utilizadas

| Tecnologia | Descrição | |----------------|----------------------------------------------| | | Biblioteca principal para construção de UI | | | Bundler ultrarrápido para desenvolvimento | | | Tipagem estática moderna para JavaScript | | | Framework CSS utilitário | | | Testes unitários | | | Documentação e desenvolvimento de UI isolada | | | Gerenciador de pacotes leve e rápido |