mkfashion-sdk 1.0.0 → 1.0.2

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/mkfashion.js +1 -1
  3. package/test.html +14 -217
  4. package/README.md +0 -62
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mkfashion-sdk",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "SDK para integrar o provador virtual mKFashion",
5
5
  "main": "src/mkfashion.js",
6
6
  "type": "module",
package/src/mkfashion.js CHANGED
@@ -23,7 +23,7 @@ const mkfashion = {
23
23
 
24
24
  // ============ CONFIGURACAO ============
25
25
 
26
- appUrl: 'https://fashion.metakosmos.com/',
26
+ appUrl: 'https://metakosmoslab.com/demos/mk-fashion-plus/',
27
27
  debug: false,
28
28
 
29
29
  // Estado interno
package/test.html CHANGED
@@ -1,235 +1,32 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="pt-BR">
3
-
4
3
  <head>
5
4
  <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Teste - mKFashion SDK</title>
8
- <style>
9
- * {
10
- box-sizing: border-box;
11
- margin: 0;
12
- padding: 0;
13
- }
14
-
15
- body {
16
- font-family: Arial, sans-serif;
17
- padding: 40px;
18
- background: #f5f5f5;
19
- }
20
-
21
- h1 {
22
- margin-bottom: 10px;
23
- color: #333;
24
- }
25
-
26
- p {
27
- color: #666;
28
- margin-bottom: 30px;
29
- }
30
-
31
- .buttons {
32
- display: flex;
33
- gap: 10px;
34
- flex-wrap: wrap;
35
- margin-bottom: 30px;
36
- }
37
-
38
- button {
39
- padding: 12px 24px;
40
- font-size: 16px;
41
- border: none;
42
- border-radius: 8px;
43
- cursor: pointer;
44
- transition: transform 0.2s;
45
- }
46
-
47
- button:hover {
48
- transform: scale(1.05);
49
- }
50
-
51
- .btn-primary {
52
- background: #4F46E5;
53
- color: white;
54
- }
55
-
56
- .btn-secondary {
57
- background: #6B7280;
58
- color: white;
59
- }
60
-
61
- .code-box {
62
- margin-top: 20px;
63
- padding: 20px;
64
- background: #1e1e1e;
65
- border-radius: 8px;
66
- color: #d4d4d4;
67
- font-family: monospace;
68
- font-size: 14px;
69
- overflow-x: auto;
70
- }
71
-
72
- .code-box .comment {
73
- color: #6a9955;
74
- }
75
-
76
- .code-box .string {
77
- color: #ce9178;
78
- }
79
-
80
- .code-box .keyword {
81
- color: #569cd6;
82
- }
83
-
84
- .code-box .function {
85
- color: #dcdcaa;
86
- }
87
-
88
- .events-log {
89
- margin-top: 30px;
90
- padding: 20px;
91
- background: white;
92
- border-radius: 8px;
93
- border: 1px solid #e5e5e5;
94
- }
95
-
96
- .events-log h3 {
97
- margin-bottom: 15px;
98
- color: #333;
99
- }
100
-
101
- .events-log ul {
102
- list-style: none;
103
- max-height: 200px;
104
- overflow-y: auto;
105
- }
106
-
107
- .events-log li {
108
- padding: 8px 12px;
109
- margin-bottom: 5px;
110
- background: #f9f9f9;
111
- border-radius: 4px;
112
- font-family: monospace;
113
- font-size: 13px;
114
- }
115
-
116
- .events-log li.ready {
117
- border-left: 3px solid #22c55e;
118
- }
119
-
120
- .events-log li.close {
121
- border-left: 3px solid #ef4444;
122
- }
123
-
124
- .events-log li.cart {
125
- border-left: 3px solid #3b82f6;
126
- }
127
-
128
- .events-log li.generation {
129
- border-left: 3px solid #a855f7;
130
- }
131
- </style>
5
+ <title>Teste SDK NPM</title>
6
+ <script src="https://unpkg.com/mkfashion-sdk@1.0.1/src/mkfashion.js"></script>
132
7
  </head>
133
-
134
8
  <body>
135
- <h1>mKFashion SDK - Teste</h1>
136
- <p>Clique no botao para testar o provador virtual</p>
137
-
138
- <div class="buttons">
139
- <button class="btn-primary" onclick="abrirModal()">Abrir Modal</button>
140
- <button class="btn-secondary" onclick="mkfashion.close()">Fechar</button>
141
- <button class="btn-secondary" onclick="mkfashion.restart()">Reiniciar</button>
142
- <button class="btn-secondary" onclick="limparLogs()">Limpar Logs</button>
143
- </div>
144
-
145
- <div class="code-box">
146
- <span class="comment">// 1. Instalar via CDN</span><br>
147
- &lt;script src=<span class="string">"https://unpkg.com/mkfashion-sdk/src/mkfashion.js"</span>&gt;&lt;/script&gt;<br><br>
148
-
149
- <span class="comment">// 2. Registrar callback do carrinho</span><br>
150
- mkfashion.<span class="function">addToCart</span>(<span class="keyword">function</span>(payload) {<br>
151
- &nbsp;&nbsp;<span class="keyword">console</span>.log(<span class="string">"Produto adicionado:"</span>, payload);<br>
152
- });<br><br>
153
-
154
- <span class="comment">// 3. Abrir o visualizador</span><br>
155
- mkfashion.<span class="function">open</span>({<br>
156
- &nbsp;&nbsp;type: <span class="string">'iframe'</span>,<br>
157
- &nbsp;&nbsp;projectid: <span class="string">'gregory'</span>,<br>
158
- &nbsp;&nbsp;identifier: <span class="string">'VEST-001-AZUL'</span>,<br>
159
- &nbsp;&nbsp;width: <span class="keyword">400</span>,<br>
160
- &nbsp;&nbsp;height: <span class="keyword">700</span><br>
161
- });
162
- </div>
163
-
164
- <div class="events-log">
165
- <h3>Eventos recebidos:</h3>
166
- <ul id="eventsList">
167
- <li style="color: #999;">Nenhum evento ainda...</li>
168
- </ul>
169
- </div>
9
+ <h1>Teste mKFashion SDK (NPM)</h1>
10
+ <button onclick="testar()">Abrir Provador</button>
170
11
 
171
- <script src="src/mkfashion.js"></script>
172
12
  <script>
173
- // Ativa logs no console
174
- mkfashion.debug = true
175
-
176
- // Para testar local, mude a URL
177
- mkfashion.appUrl = 'http://localhost:5173/'
178
-
179
- // Funcao para adicionar evento na lista
180
- function logEvent(type, message, data = null) {
181
- const list = document.getElementById('eventsList')
13
+ // Verifica se carregou
14
+ console.log('mkfashion:', mkfashion);
15
+ console.log('Status:', mkfashion.getStatus());
182
16
 
183
- // Remove mensagem inicial
184
- if (list.children.length === 1 && list.children[0].style.color) {
185
- list.innerHTML = ''
186
- }
187
-
188
- const li = document.createElement('li')
189
- li.className = type
190
- const time = new Date().toLocaleTimeString()
191
- li.textContent = `[${time}] ${message}${data ? ': ' + JSON.stringify(data) : ''}`
192
- list.insertBefore(li, list.firstChild)
193
- }
194
-
195
- // Registra callbacks (padrao mK3D)
196
17
  mkfashion.addToCart(function(payload) {
197
- logEvent('cart', 'Adicionar ao carrinho', payload)
198
- alert(`Produto ${payload.identifier} tamanho ${payload.size} adicionado ao carrinho!`)
199
- })
200
-
201
- mkfashion.onReady(function(data) {
202
- logEvent('ready', 'App pronta', data)
203
- })
204
-
205
- mkfashion.onClose(function() {
206
- logEvent('close', 'Modal fechado')
207
- })
208
-
209
- mkfashion.onGenerationComplete(function(data) {
210
- logEvent('generation', 'Geracao completa', data)
211
- })
212
-
213
- mkfashion.onError(function(data) {
214
- logEvent('close', 'Erro', data)
215
- })
18
+ alert('Produto: ' + payload.identifier + '\nTamanho: ' + payload.size);
19
+ });
216
20
 
217
- function abrirModal() {
21
+ function testar() {
218
22
  mkfashion.open({
219
23
  type: 'iframe',
220
- projectid: 'gregory',
221
- identifier: 'VEST-001-AZUL',
24
+ projectid: 'demo',
25
+ identifier: 'TESTE-001',
222
26
  width: 400,
223
27
  height: 700
224
- })
225
-
226
- logEvent('ready', 'Modal aberto')
227
- }
228
-
229
- function limparLogs() {
230
- document.getElementById('eventsList').innerHTML = '<li style="color: #999;">Nenhum evento ainda...</li>'
28
+ });
231
29
  }
232
30
  </script>
233
31
  </body>
234
-
235
- </html>
32
+ </html>
package/README.md DELETED
@@ -1,62 +0,0 @@
1
- # mKFashion SDK
2
-
3
- SDK para integrar o provador virtual de roupas com IA em qualquer site ou e-commerce.
4
-
5
- ## Instalação
6
-
7
- ```html
8
- <script src="https://unpkg.com/mkfashion-sdk/src/mkfashion.js"></script>
9
- ```
10
-
11
- ## Uso Rápido
12
-
13
- ```javascript
14
- // 1. Registrar callback do carrinho
15
- mkfashion.addToCart(function(payload) {
16
- console.log("Produto:", payload.identifier);
17
- console.log("Tamanho:", payload.size);
18
- });
19
-
20
- // 2. Abrir o provador
21
- mkfashion.open({
22
- type: 'iframe',
23
- projectid: 'minha-loja',
24
- identifier: 'PRODUTO-001',
25
- width: 400,
26
- height: 700
27
- });
28
- ```
29
-
30
- ## Documentação
31
-
32
- - [Introdução](./docs/index.md)
33
- - [Instalação do Plugin](./docs/instalacao.md)
34
- - [Abrir o Visualizador](./docs/abrir-visualizador.md)
35
- - [Integração com Carrinho](./docs/integracao-carrinho.md)
36
- - [SDK Reference](./docs/sdk-reference.md)
37
-
38
- ## Métodos Disponíveis
39
-
40
- | Método | Descrição |
41
- |--------|-----------|
42
- | `open(options)` | Abre o provador virtual |
43
- | `close()` | Fecha o provador |
44
- | `restart()` | Reinicia a experiência |
45
- | `destroy()` | Remove do DOM |
46
- | `getStatus()` | Retorna estado atual |
47
- | `addToCart(callback)` | Callback ao adicionar ao carrinho |
48
- | `onReady(callback)` | Callback quando pronto |
49
- | `onClose(callback)` | Callback ao fechar |
50
- | `onGenerationComplete(callback)` | Callback ao gerar imagem |
51
- | `onError(callback)` | Callback de erro |
52
-
53
- ## Desenvolvimento
54
-
55
- ```bash
56
- # Testar localmente
57
- # Abra test.html no navegador
58
- ```
59
-
60
- ## Licença
61
-
62
- MIT - metaKosmos