@agrada_digital/pbm 0.0.127 → 0.0.129

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +130 -27
  2. package/dist/vanilla.js +46 -38
  3. package/package.json +3 -20
  4. package/dist/index.cjs +0 -2828
  5. package/dist/index.cjs.map +0 -1
  6. package/dist/index.css +0 -1432
  7. package/dist/index.css.map +0 -1
  8. package/dist/index.d.cts +0 -100
  9. package/dist/index.d.ts +0 -100
  10. package/dist/index.js +0 -2789
  11. package/dist/index.js.map +0 -1
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # 🚀 PBM Library
2
2
 
3
- > Uma biblioteca de componentes **React** para implementar o modelo **PBM (Pharmacy Benefit Manager)** de forma simples e eficiente.
3
+ > Uma biblioteca de componentes **Web Component** para implementar o modelo **PBM (Pharmacy Benefit Manager)** de forma simples e eficiente.
4
+ >
5
+ > Totalmente self-contained com React, MUI e todas as dependências incluídas. Funciona com simples tags `<script>`.
4
6
 
5
7
  ![GitHub package.json version](https://img.shields.io/npm/v/@agrada_digital/pbm?color=%2364c3ff&label=versão&style=flat-square)
6
8
 
@@ -8,46 +10,147 @@
8
10
 
9
11
  ## 📦 Instalação
10
12
 
11
- Instale a biblioteca com seu gerenciador de pacotes favorito:
13
+ Basta adicionar uma tag script no seu HTML:
12
14
 
13
- #### NPM
15
+ ```html
16
+ <!-- CSS da biblioteca -->
17
+ <link rel="stylesheet" href="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js">
14
18
 
15
- ```bash
16
- npm install @agrada_digital/pbm
19
+ <!-- Script único com tudo incluído (447 kB, 136 kB gzip) -->
20
+ <script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>
17
21
  ```
18
22
 
19
- #### Yarn
23
+ ---
24
+
25
+ ## ⚡ Quick Start
20
26
 
21
- ```bash
22
- yarn add @agrada_digital/pbm
27
+ ```html
28
+ <!DOCTYPE html>
29
+ <html>
30
+ <head>
31
+ <link rel="stylesheet" href="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js">
32
+ </head>
33
+ <body>
34
+ <pbm-component
35
+ tenant_id="seu_tenant_id"
36
+ target_product='{"id":"123","name":"Medicamento","price":50}'
37
+ is_authenticated_shopper="false"
38
+ ></pbm-component>
39
+
40
+ <script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>
41
+ </body>
42
+ </html>
23
43
  ```
24
44
 
25
- #### PNPM
45
+ ---
26
46
 
27
- ```bash
28
- pnpm add @agrada_digital/pbm
29
- ```
47
+ ## 🎯 Atributos do Web Component
48
+
49
+ | Atributo | Tipo | Descrição |
50
+ |----------|------|-----------|
51
+ | `tenant_id` | string | ID do tenant (obrigatório) |
52
+ | `target_product` | JSON string | Produto alvo em formato JSON |
53
+ | `is_authenticated_shopper` | "true" \| "false" | Status de autenticação |
54
+ | `custom_login_url` | string | URL customizada para login |
55
+ | `theme` | JSON string | Configurações de tema (cores) |
30
56
 
31
57
  ---
32
58
 
33
- ## 💡 Uso em Vanilla JS (sem React)
59
+ ## 💡 Exemplos de Uso
60
+
61
+ ### Exemplo Básico
62
+
63
+ ```html
64
+ <pbm-component
65
+ tenant_id="agrada_001"
66
+ target_product='{"id":"P001","name":"Medicamento X","price":50}'
67
+ ></pbm-component>
68
+
69
+ <script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>
70
+ ```
34
71
 
35
- Inclua via `<script>`:
72
+ ### Com Tema Customizado
36
73
 
37
74
  ```html
38
- <script src="https://unpkg.com/@agrada_digital/pbm/vanilla" defer></script>
39
-
40
- const TARGET_PRODUCT = {
41
- id: "*****",
42
- ean: "********",
43
- requestedQuantity: "*",
44
- listPrice: "*****",
45
- netPrice: "*****",
46
- }
47
-
48
- <pbm-component
49
- tenant_id="******"
50
- target_product={TARGET_PRODUCT}
75
+ <pbm-component
76
+ tenant_id="agrada_001"
77
+ target_product='{"id":"P001","name":"Medicamento X"}'
78
+ theme='{"primaryColor":"#FF5722","secondaryColor":"#2196F3"}'
79
+ ></pbm-component>
80
+
81
+ <script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>
82
+ ```
83
+
84
+ ### Com Interatividade via JavaScript
85
+
86
+ ```html
87
+ <pbm-component id="pbm"></pbm-component>
88
+
89
+ <script src="https://unpkg.com/@agrada_digital/pbm/dist/vanilla.js"></script>
90
+
91
+ <script>
92
+ const pbm = document.getElementById('pbm');
93
+
94
+ // Atualizar atributos
95
+ pbm.setAttribute('tenant_id', 'agrada_001');
96
+ pbm.setAttribute('target_product', JSON.stringify({
97
+ id: 'P001',
98
+ name: 'Medicamento X',
99
+ price: 50
100
+ }));
101
+
102
+ // Ouvir mudanças
103
+ window.pbm.subscribe((state) => {
104
+ console.log('Benefício aplicado?', state.isApplied);
105
+ });
106
+ </script>
107
+ ```
108
+
109
+ ---
110
+
111
+ ## 🌍 CDN URLs
112
+
113
+ ### unpkg (recomendado)
114
+
115
+ ```
116
+ https://unpkg.com/@agrada_digital/pbm@latest/dist/vanilla.js
117
+ https://unpkg.com/@agrada_digital/pbm@0.0.128/dist/vanilla.js
118
+ ```
119
+
120
+ ### jsDelivr
121
+
122
+ ```
123
+ https://cdn.jsdelivr.net/npm/@agrada_digital/pbm@latest/dist/vanilla.js
124
+ https://cdn.jsdelivr.net/npm/@agrada_digital/pbm@0.0.128/dist/vanilla.js
125
+ ```
126
+
127
+ ---
128
+
129
+ ## 📊 O que está Incluído
130
+
131
+ - ✅ React 19 + React DOM
132
+ - ✅ MUI Components
133
+ - ✅ Zustand (State Management)
134
+ - ✅ Tailwind CSS
135
+ - ✅ React Hook Form
136
+ - ✅ Zod (Validação)
137
+ - ✅ Lucide Icons
138
+ - ✅ Todos os componentes da biblioteca
139
+
140
+ **Tudo em um único arquivo: 447 kB (136 kB gzip)**
141
+
142
+ ---
143
+
144
+ ## 🔗 Referências
145
+
146
+ - [USAGE.md](./USAGE.md) - Guia de uso detalhado
147
+ - [PUBLISH_CHECKLIST.md](./PUBLISH_CHECKLIST.md) - Checklist de publicação
148
+
149
+ ---
150
+
151
+ ## 📝 Licença
152
+
153
+ MIT
51
154
  is_authenticated_shopper={BOOLEAN}
52
155
  custom_login_url="/login"
53
156
  >