rook-cli 1.3.2 → 1.3.5

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 (92) hide show
  1. package/package.json +3 -2
  2. package/rook-framework/PRD-INSTALL-COMMAND.md +379 -0
  3. package/rook-framework/PRD.md +1214 -0
  4. package/rook-framework/README.md +143 -0
  5. package/rook-framework/assets/rk-accordion.js +99 -0
  6. package/rook-framework/assets/rk-alert-dialog.js +132 -0
  7. package/rook-framework/assets/rk-bottom-app-bar.js +88 -0
  8. package/rook-framework/assets/rk-carousel.js +145 -0
  9. package/rook-framework/assets/rk-collapsible.js +151 -0
  10. package/rook-framework/assets/rk-dialog.js +161 -0
  11. package/rook-framework/assets/rk-drawer.js +214 -0
  12. package/rook-framework/assets/rk-framework-core.css +2554 -0
  13. package/rook-framework/assets/rk-framework-tokens.css +101 -0
  14. package/rook-framework/assets/rk-modal.js +91 -0
  15. package/rook-framework/assets/rk-popover.js +264 -0
  16. package/rook-framework/assets/rk-progress.js +81 -0
  17. package/rook-framework/assets/rk-quantity.js +91 -0
  18. package/rook-framework/assets/rk-scroll-area.js +286 -0
  19. package/rook-framework/assets/rk-sheet.js +157 -0
  20. package/rook-framework/assets/rk-tabs.js +179 -0
  21. package/rook-framework/assets/rk-toggle.js +153 -0
  22. package/rook-framework/blocks/rk-accordion.liquid +97 -0
  23. package/rook-framework/blocks/rk-badge.liquid +103 -0
  24. package/rook-framework/blocks/rk-button.liquid +166 -0
  25. package/rook-framework/blocks/rk-divider.liquid +100 -0
  26. package/rook-framework/blocks/rk-form-field.liquid +120 -0
  27. package/rook-framework/blocks/rk-icon.liquid +134 -0
  28. package/rook-framework/blocks/rk-image.liquid +198 -0
  29. package/rook-framework/blocks/rk-installments.liquid +99 -0
  30. package/rook-framework/blocks/rk-pix-discount.liquid +99 -0
  31. package/rook-framework/blocks/rk-price.liquid +128 -0
  32. package/rook-framework/blocks/rk-quantity.liquid +108 -0
  33. package/rook-framework/blocks/rk-quick-add.liquid +137 -0
  34. package/rook-framework/blocks/rk-skeleton.liquid +104 -0
  35. package/rook-framework/blocks/rk-typography.liquid +183 -0
  36. package/rook-framework/config/rk-color-scheme-group.json +138 -0
  37. package/rook-framework/config/rk-settings_schema.json +259 -0
  38. package/rook-framework/snippets/rk-accordion.liquid +31 -0
  39. package/rook-framework/snippets/rk-alert-dialog.liquid +83 -0
  40. package/rook-framework/snippets/rk-aspect-ratio.liquid +23 -0
  41. package/rook-framework/snippets/rk-badge.liquid +17 -0
  42. package/rook-framework/snippets/rk-bottom-app-bar.liquid +51 -0
  43. package/rook-framework/snippets/rk-button.liquid +49 -0
  44. package/rook-framework/snippets/rk-card.liquid +64 -0
  45. package/rook-framework/snippets/rk-carousel.liquid +74 -0
  46. package/rook-framework/snippets/rk-checkbox.liquid +34 -0
  47. package/rook-framework/snippets/rk-collapsible.liquid +52 -0
  48. package/rook-framework/snippets/rk-color-schemes-standalone.liquid +61 -0
  49. package/rook-framework/snippets/rk-color-schemes.liquid +43 -0
  50. package/rook-framework/snippets/rk-dialog.liquid +85 -0
  51. package/rook-framework/snippets/rk-divider.liquid +25 -0
  52. package/rook-framework/snippets/rk-drawer.liquid +81 -0
  53. package/rook-framework/snippets/rk-external-assets copy.liquid +33 -0
  54. package/rook-framework/snippets/rk-external-assets.liquid +68 -0
  55. package/rook-framework/snippets/rk-form-field.liquid +83 -0
  56. package/rook-framework/snippets/rk-gap-style.liquid +32 -0
  57. package/rook-framework/snippets/rk-icon.liquid +28 -0
  58. package/rook-framework/snippets/rk-image.liquid +60 -0
  59. package/rook-framework/snippets/rk-input.liquid +35 -0
  60. package/rook-framework/snippets/rk-installments.liquid +54 -0
  61. package/rook-framework/snippets/rk-item.liquid +69 -0
  62. package/rook-framework/snippets/rk-layout-style.liquid +37 -0
  63. package/rook-framework/snippets/rk-modal.liquid +31 -0
  64. package/rook-framework/snippets/rk-pix-discount.liquid +34 -0
  65. package/rook-framework/snippets/rk-popover.liquid +77 -0
  66. package/rook-framework/snippets/rk-price.liquid +48 -0
  67. package/rook-framework/snippets/rk-progress.liquid +38 -0
  68. package/rook-framework/snippets/rk-quantity.liquid +56 -0
  69. package/rook-framework/snippets/rk-quick-add.liquid +67 -0
  70. package/rook-framework/snippets/rk-scripts.liquid +17 -0
  71. package/rook-framework/snippets/rk-scroll-area.liquid +60 -0
  72. package/rook-framework/snippets/rk-sheet.liquid +86 -0
  73. package/rook-framework/snippets/rk-size-style.liquid +48 -0
  74. package/rook-framework/snippets/rk-skeleton.liquid +25 -0
  75. package/rook-framework/snippets/rk-spacing-padding.liquid +18 -0
  76. package/rook-framework/snippets/rk-spacing-style.liquid +54 -0
  77. package/rook-framework/snippets/rk-spinner.liquid +43 -0
  78. package/rook-framework/snippets/rk-swatch.liquid +33 -0
  79. package/rook-framework/snippets/rk-table.liquid +44 -0
  80. package/rook-framework/snippets/rk-tabs.liquid +52 -0
  81. package/rook-framework/snippets/rk-textarea.liquid +42 -0
  82. package/rook-framework/snippets/rk-toggle-group.liquid +27 -0
  83. package/rook-framework/snippets/rk-toggle.liquid +58 -0
  84. package/rook-framework/snippets/rk-typography.liquid +27 -0
  85. package/rook-framework/snippets/rk-variables.liquid +76 -0
  86. package/src/app.js +24 -0
  87. package/src/commands/InstallCommand.js +133 -0
  88. package/src/mcp/server.js +111 -1
  89. package/src/services/FrameworkInstaller.js +485 -0
  90. package/src/templates/block.liquid.txt +0 -15
  91. package/src/ui/PromptUI.js +15 -1
  92. package/src/utils/logger.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rook-cli",
3
- "version": "1.3.2",
3
+ "version": "1.3.5",
4
4
  "description": "CLI para instalar componentes Shopify",
5
5
  "repository": {
6
6
  "type": "git",
@@ -13,7 +13,8 @@
13
13
  },
14
14
  "files": [
15
15
  "bin",
16
- "src"
16
+ "src",
17
+ "rook-framework"
17
18
  ],
18
19
  "scripts": {
19
20
  "start": "node bin/rook.js",
package/rook-framework/PRD-INSTALL-COMMAND.md ADDED
@@ -0,0 +1,379 @@
1
+ # PRD: Comando `rook install` — Instalação do Rook UI Core Framework
2
+
3
+ ## 1. Visão Geral
4
+
5
+ O comando `rook install` automatiza a instalação completa do **Rook UI Core Framework** em qualquer tema Shopify. Ele substitui o processo manual de copiar arquivos, injetar settings e modificar o layout, realizando tudo com um único comando.
6
+
7
+ ```bash
8
+ rook install # Interativo: detecta o tema e instala
9
+ rook install --path ./meu-tema # Headless: especifica o diretório do tema
10
+ rook install --force # Sobrescreve tudo sem perguntar
11
+ ```
12
+
13
+ ---
14
+
15
+ ## 2. Problema que Resolve
16
+
17
+ Atualmente, instalar o Rook UI requer **5 etapas manuais**:
18
+
19
+ 1. Copiar `rook-framework/assets/*` → `assets/`
20
+ 2. Copiar `rook-framework/snippets/*` → `snippets/`
21
+ 3. Copiar `rook-framework/blocks/*` → `blocks/`
22
+ 4. Editar `config/settings_schema.json` e injetar as 4 seções Rook UI
23
+ 5. Editar `layout/theme.liquid` e adicionar os renders no `<head>` e antes do `</body>`
24
+
25
+ Esse processo é propenso a erros (esquecer o `rk-variables`, colocar na ordem errada, JSON inválido, etc) e desmotiva a adoção do framework em novos projetos.
26
+
27
+ ---
28
+
29
+ ## 3. Arquitetura da Solução
30
+
31
+ ### 3.1 Novo Comando: `InstallCommand`
32
+
33
+ **Arquivo:** `src/commands/InstallCommand.js`
34
+
35
+ Segue o padrão existente do CLI (DIP, SRP):
36
+ - Recebe `Logger`, `ConflictResolver` via construtor
37
+ - Método principal: `executar(opcoes)`
38
+ - Suporta modo interativo e headless
39
+
40
+ ### 3.2 Novo Serviço: `FrameworkInstaller`
41
+
42
+ **Arquivo:** `src/services/FrameworkInstaller.js`
43
+
44
+ Serviço dedicado que encapsula toda a lógica de instalação. Responsabilidades:
45
+
46
+ | Método | Responsabilidade |
47
+ |---|---|
48
+ | `install(themePath, options)` | Orquestra as 5 etapas |
49
+ | `_copyAssets(src, dest)` | Copia arquivos de `assets/` |
50
+ | `_copySnippets(src, dest)` | Copia arquivos de `snippets/` |
51
+ | `_copyBlocks(src, dest)` | Copia arquivos de `blocks/` |
52
+ | `_injectSettings(themePath)` | Injeta seções no `settings_schema.json` |
53
+ | `_patchThemeLayout(themePath)` | Modifica `layout/theme.liquid` |
54
+ | `_validate(themePath)` | Valida que o diretório é um tema Shopify |
55
+ | `_isAlreadyInstalled(themePath)` | Detecta instalação prévia |
56
+
57
+ ### 3.3 Fonte dos Arquivos do Framework
58
+
59
+ Os arquivos do Rook UI Framework ficam em `rook-framework/` **dentro do pacote npm** do CLI.
60
+ O `FrameworkInstaller` resolve o caminho relativo ao `import.meta.url`:
61
+
62
+ ```javascript
63
+ import { fileURLToPath } from 'url';
64
+ import path from 'path';
65
+
66
+ const __dirname = path.dirname(fileURLToPath(import.meta.url));
67
+ const FRAMEWORK_DIR = path.resolve(__dirname, '../../rook-framework');
68
+ ```
69
+
70
+ ---
71
+
72
+ ## 4. Fluxo de Execução
73
+
74
+ ### 4.1 Modo Interativo (`rook install`)
75
+
76
+ ```
77
+ 1. Banner do CLI
78
+ 2. Validação: o cwd é um tema Shopify? (verifica config/ + layout/)
79
+ → Se não: "Este diretório não parece ser um tema Shopify. Deseja continuar? [s/N]"
80
+ 3. Detecção: já existe instalação do Rook UI?
81
+ → Se sim: "Rook UI já está instalado. Deseja reinstalar/atualizar? [s/N]"
82
+ 4. Confirmação: "Instalar Rook UI Core Framework neste tema? [S/n]"
83
+ 5. Execução das 5 etapas com progresso no terminal
84
+ 6. Resumo final com contagem de arquivos
85
+ ```
86
+
87
+ ### 4.2 Modo Headless (`rook install --path ./tema --force`)
88
+
89
+ ```
90
+ 1. Validação do caminho
91
+ 2. Execução direta (sem prompts)
92
+ 3. Retorna 0 (sucesso) ou 1 (erro) via exit code
93
+ ```
94
+
95
+ ---
96
+
97
+ ## 5. Especificação das Etapas
98
+
99
+ ### Etapa 1: Copiar Assets (`assets/`)
100
+
101
+ - **Origem:** `rook-framework/assets/*.css` + `rook-framework/assets/*.js`
102
+ - **Destino:** `<tema>/assets/`
103
+ - **Conflito:** Perguntar se deve sobrescrever (ou `--force`)
104
+ - **Contagem esperada:** ~17 arquivos (2 CSS + 15 JS)
105
+
106
+ ### Etapa 2: Copiar Snippets (`snippets/`)
107
+
108
+ - **Origem:** `rook-framework/snippets/*.liquid`
109
+ - **Destino:** `<tema>/snippets/`
110
+ - **Exclusões:** Ignorar arquivos com " copy" no nome (ex: `rk-external-assets copy.liquid`)
111
+ - **Contagem esperada:** ~45 arquivos
112
+
113
+ ### Etapa 3: Copiar Blocks (`blocks/`)
114
+
115
+ - **Origem:** `rook-framework/blocks/*.liquid`
116
+ - **Destino:** `<tema>/blocks/`
117
+ - **Contagem esperada:** ~14 arquivos
118
+
119
+ ### Etapa 4: Injetar Settings (`config/settings_schema.json`)
120
+
121
+ **Lógica:**
122
+
123
+ ```javascript
124
+ // 1. Ler o settings_schema.json do tema
125
+ const schema = JSON.parse(await fs.readFile(settingsPath, 'utf8'));
126
+
127
+ // 2. Ler as seções do Rook UI
128
+ const rkSections = JSON.parse(await fs.readFile(rkSettingsPath, 'utf8'));
129
+
130
+ // 3. Verificar se já existem seções Rook UI (por nome)
131
+ const existingRkNames = schema
132
+ .filter(s => s.name && s.name.startsWith('Rook UI'))
133
+ .map(s => s.name);
134
+
135
+ // 4. Se existem: remover as antigas e substituir
136
+ if (existingRkNames.length > 0) {
137
+ schema = schema.filter(s => !s.name || !s.name.startsWith('Rook UI'));
138
+ }
139
+
140
+ // 5. Inserir as novas seções no final do array
141
+ schema.push(...rkSections);
142
+
143
+ // 6. Salvar o arquivo
144
+ await fs.writeFile(settingsPath, JSON.stringify(schema, null, 2), 'utf8');
145
+ ```
146
+
147
+ **Seções injetadas:** (4 seções)
148
+ - `Rook UI — Cores`
149
+ - `Rook UI — Forma e Transição`
150
+ - `Rook UI — Parcelamento`
151
+ - `Rook UI — Pix`
152
+
153
+ **Validação pós-injeção:** Parsear o JSON resultante para confirmar que é válido.
154
+
155
+ ### Etapa 5: Patch do `layout/theme.liquid`
156
+
157
+ **Injeção no `<head>`** (após a última tag `render` ou `stylesheet_tag` no head):
158
+
159
+ ```liquid
160
+ {%- comment -%} Rook UI Core Framework {%- endcomment -%}
161
+ {%- render 'rk-variables' -%}
162
+ {{ 'rk-framework-tokens.css' | asset_url | stylesheet_tag }}
163
+ {{ 'rk-framework-core.css' | asset_url | stylesheet_tag }}
164
+ {%- render 'rk-external-assets', location: 'head' -%}
165
+ ```
166
+
167
+ **Injeção antes do `</body>`:**
168
+
169
+ ```liquid
170
+ {%- comment -%} Rook UI Core Framework — Scripts {%- endcomment -%}
171
+ {%- render 'rk-external-assets', location: 'body' -%}
172
+ {%- render 'rk-scripts' -%}
173
+ ```
174
+
175
+ **Detecção de instalação prévia:** Buscar `rk-variables` no conteúdo. Se já existe, pular esta etapa (ou substituir o bloco antigo em caso de `--force`).
176
+
177
+ **Estratégia de injeção:**
178
+
179
+ Para o `<head>`:
180
+ - Buscar a linha `{{ content_for_header }}` e inserir ANTES dela
181
+ - Fallback: buscar `</head>` e inserir antes
182
+
183
+ Para o `</body>`:
184
+ - Buscar `</body>` e inserir antes
185
+
186
+ ---
187
+
188
+ ## 6. Flags e Opções
189
+
190
+ | Flag | Tipo | Default | Descrição |
191
+ |---|---|---|---|
192
+ | `--path <dir>` | string | `process.cwd()` | Diretório do tema Shopify |
193
+ | `--force` | boolean | `false` | Sobrescreve tudo sem perguntar |
194
+ | `--skip-layout` | boolean | `false` | Não modifica o `theme.liquid` |
195
+ | `--skip-settings` | boolean | `false` | Não modifica o `settings_schema.json` |
196
+
197
+ ---
198
+
199
+ ## 7. Integração com o CLI Existente
200
+
201
+ ### 7.1 Registro no `app.js`
202
+
203
+ ```javascript
204
+ import { InstallCommand } from './commands/InstallCommand.js';
205
+
206
+ // No constructor:
207
+ this.installCommand = new InstallCommand(
208
+ this.logger,
209
+ this.conflictResolver
210
+ );
211
+
212
+ // No run():
213
+ this.programa
214
+ .command('install')
215
+ .alias('i')
216
+ .description('Instala o Rook UI Core Framework no tema Shopify')
217
+ .option('--path <dir>', 'Diretório do tema Shopify', process.cwd())
218
+ .option('--force', 'Sobrescreve arquivos sem perguntar')
219
+ .option('--skip-layout', 'Não modifica o theme.liquid')
220
+ .option('--skip-settings', 'Não modifica o settings_schema.json')
221
+ .action(async (opcoes) => {
222
+ this.logger.banner();
223
+ await this.installCommand.executar(opcoes);
224
+ });
225
+ ```
226
+
227
+ ### 7.2 Integração com MCP Server
228
+
229
+ Adicionar nova tool `install_framework` no `src/mcp/server.js`:
230
+
231
+ ```javascript
232
+ {
233
+ name: 'install_framework',
234
+ description: 'Instala o Rook UI Core Framework em um tema Shopify',
235
+ inputSchema: {
236
+ type: 'object',
237
+ properties: {
238
+ projectPath: { type: 'string', description: 'Caminho do tema' }
239
+ },
240
+ required: ['projectPath']
241
+ }
242
+ }
243
+ ```
244
+
245
+ ---
246
+
247
+ ## 8. Saída do Terminal (UX)
248
+
249
+ ```
250
+ ╭─────────────────────────────────╮
251
+ │ 🏰 Rook CLI — Install │
252
+ ╰─────────────────────────────────╯
253
+
254
+ ✔ Tema Shopify detectado: Horizon v3.4.0
255
+
256
+ 📦 Instalando Rook UI Core Framework...
257
+
258
+ [1/5] Copiando assets...
259
+ → assets/rk-framework-tokens.css
260
+ → assets/rk-framework-core.css
261
+ → assets/rk-quantity.js
262
+ → assets/rk-modal.js
263
+ → ... (17 arquivos)
264
+
265
+ [2/5] Copiando snippets...
266
+ → snippets/rk-variables.liquid
267
+ → snippets/rk-button.liquid
268
+ → ... (45 arquivos)
269
+
270
+ [3/5] Copiando blocks...
271
+ → blocks/rk-button.liquid
272
+ → ... (14 arquivos)
273
+
274
+ [4/5] Injetando settings no settings_schema.json...
275
+ → Rook UI — Cores (19 settings)
276
+ → Rook UI — Forma e Transição (6 settings)
277
+ → Rook UI — Parcelamento (5 settings)
278
+ → Rook UI — Pix (3 settings)
279
+
280
+ [5/5] Configurando layout/theme.liquid...
281
+ → Injetado no <head>: rk-variables, tokens, core CSS
282
+ → Injetado antes do </body>: rk-scripts
283
+
284
+ ═══════════════════════════════════════════
285
+ ✔ Rook UI instalado com sucesso!
286
+ Arquivos copiados: 76
287
+ Settings injetadas: 4 seções (33 settings)
288
+ Layout atualizado: theme.liquid
289
+ ═══════════════════════════════════════════
290
+ ```
291
+
292
+ ---
293
+
294
+ ## 9. Detecção e Validação
295
+
296
+ ### 9.1 Validar que é um tema Shopify
297
+
298
+ Verificar existência de pelo menos 3 dos seguintes:
299
+ - `config/settings_schema.json`
300
+ - `layout/theme.liquid`
301
+ - `snippets/`
302
+ - `sections/`
303
+ - `templates/`
304
+
305
+ ### 9.2 Detectar instalação prévia
306
+
307
+ Verificar qualquer um destes:
308
+ - Existência de `snippets/rk-variables.liquid`
309
+ - Existência de `assets/rk-framework-core.css`
310
+ - Seção com `name` começando com `"Rook UI"` no `settings_schema.json`
311
+
312
+ ### 9.3 Detectar versão do tema (opcional)
313
+
314
+ Ler o primeiro objeto do `settings_schema.json` (`theme_info`) para exibir nome e versão:
315
+ ```json
316
+ { "name": "theme_info", "theme_name": "Horizon", "theme_version": "3.4.0" }
317
+ ```
318
+
319
+ ---
320
+
321
+ ## 10. Estrutura de Arquivos Criados/Modificados
322
+
323
+ ```
324
+ src/
325
+ ├── commands/
326
+ │ └── InstallCommand.js ← NOVO: Comando rook install
327
+ ├── services/
328
+ │ └── FrameworkInstaller.js ← NOVO: Serviço de instalação
329
+ ├── app.js ← MODIFICADO: Registrar novo comando
330
+ └── mcp/
331
+ └── server.js ← MODIFICADO: Nova tool install_framework
332
+ ```
333
+
334
+ ---
335
+
336
+ ## 11. Tratamento de Erros
337
+
338
+ | Cenário | Comportamento |
339
+ |---|---|
340
+ | Diretório não é tema Shopify | Aviso + confirmação para continuar |
341
+ | `settings_schema.json` com JSON inválido | Erro fatal + backup criado antes de modificar |
342
+ | `theme.liquid` não encontrado | Skip com aviso (usa `--skip-layout` implícito) |
343
+ | Arquivo já existe | Pergunta via `ConflictResolver` (ou `--force`) |
344
+ | Rook UI já instalado | Pergunta se quer reinstalar/atualizar |
345
+ | Permissão negada | Erro fatal com mensagem clara |
346
+
347
+ ### 11.1 Backup de Segurança
348
+
349
+ Antes de modificar `settings_schema.json` e `theme.liquid`, criar backup:
350
+ ```
351
+ config/settings_schema.json.rk-backup
352
+ layout/theme.liquid.rk-backup
353
+ ```
354
+
355
+ ---
356
+
357
+ ## 12. Comando Desinstalar (Futuro)
358
+
359
+ Não faz parte deste PRD, mas o design permite fácil implementação futura de `rook uninstall`:
360
+ - Remover arquivos `rk-*` de `assets/`, `snippets/`, `blocks/`
361
+ - Remover seções `"Rook UI"` do `settings_schema.json`
362
+ - Remover blocos `Rook UI Core Framework` do `theme.liquid`
363
+ - Restaurar backups `.rk-backup`
364
+
365
+ ---
366
+
367
+ ## 13. Definição de Pronto (DoD)
368
+
369
+ - [ ] `rook install` funciona no modo interativo (sem flags)
370
+ - [ ] `rook install --path ./tema --force` funciona no modo headless
371
+ - [ ] Assets, snippets e blocks copiados corretamente
372
+ - [ ] `settings_schema.json` modificado com JSON válido
373
+ - [ ] `theme.liquid` modificado com as injeções corretas na ordem certa
374
+ - [ ] Detecção de tema Shopify funciona
375
+ - [ ] Detecção de instalação prévia funciona
376
+ - [ ] Reinstalação/atualização funciona sem duplicar entradas
377
+ - [ ] Backups criados antes de modificar arquivos existentes
378
+ - [ ] MCP tool `install_framework` funciona
379
+ - [ ] Testado no tema Horizon e em pelo menos um outro tema