npm - rook-cli - Versions diffs - 1.3.2 → 1.3.4 - Mend

rook-cli 1.3.2 → 1.3.4

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 (89) hide show

package/package.json +3 -2
package/rook-framework/PRD-INSTALL-COMMAND.md +379 -0
package/rook-framework/PRD.md +1214 -0
package/rook-framework/README.md +143 -0
package/rook-framework/assets/rk-accordion.js +99 -0
package/rook-framework/assets/rk-alert-dialog.js +132 -0
package/rook-framework/assets/rk-bottom-app-bar.js +88 -0
package/rook-framework/assets/rk-carousel.js +145 -0
package/rook-framework/assets/rk-collapsible.js +151 -0
package/rook-framework/assets/rk-dialog.js +161 -0
package/rook-framework/assets/rk-drawer.js +214 -0
package/rook-framework/assets/rk-framework-core.css +2554 -0
package/rook-framework/assets/rk-framework-tokens.css +101 -0
package/rook-framework/assets/rk-modal.js +91 -0
package/rook-framework/assets/rk-popover.js +264 -0
package/rook-framework/assets/rk-progress.js +81 -0
package/rook-framework/assets/rk-quantity.js +91 -0
package/rook-framework/assets/rk-scroll-area.js +286 -0
package/rook-framework/assets/rk-sheet.js +157 -0
package/rook-framework/assets/rk-tabs.js +179 -0
package/rook-framework/assets/rk-toggle.js +153 -0
package/rook-framework/blocks/rk-accordion.liquid +97 -0
package/rook-framework/blocks/rk-badge.liquid +103 -0
package/rook-framework/blocks/rk-button.liquid +166 -0
package/rook-framework/blocks/rk-divider.liquid +100 -0
package/rook-framework/blocks/rk-form-field.liquid +120 -0
package/rook-framework/blocks/rk-icon.liquid +134 -0
package/rook-framework/blocks/rk-image.liquid +198 -0
package/rook-framework/blocks/rk-installments.liquid +99 -0
package/rook-framework/blocks/rk-pix-discount.liquid +99 -0
package/rook-framework/blocks/rk-price.liquid +128 -0
package/rook-framework/blocks/rk-quantity.liquid +108 -0
package/rook-framework/blocks/rk-quick-add.liquid +137 -0
package/rook-framework/blocks/rk-skeleton.liquid +104 -0
package/rook-framework/blocks/rk-typography.liquid +183 -0
package/rook-framework/config/rk-settings_schema.json +259 -0
package/rook-framework/snippets/rk-accordion.liquid +31 -0
package/rook-framework/snippets/rk-alert-dialog.liquid +83 -0
package/rook-framework/snippets/rk-aspect-ratio.liquid +23 -0
package/rook-framework/snippets/rk-badge.liquid +17 -0
package/rook-framework/snippets/rk-bottom-app-bar.liquid +51 -0
package/rook-framework/snippets/rk-button.liquid +49 -0
package/rook-framework/snippets/rk-card.liquid +64 -0
package/rook-framework/snippets/rk-carousel.liquid +74 -0
package/rook-framework/snippets/rk-checkbox.liquid +34 -0
package/rook-framework/snippets/rk-collapsible.liquid +52 -0
package/rook-framework/snippets/rk-dialog.liquid +85 -0
package/rook-framework/snippets/rk-divider.liquid +25 -0
package/rook-framework/snippets/rk-drawer.liquid +81 -0
package/rook-framework/snippets/rk-external-assets copy.liquid +33 -0
package/rook-framework/snippets/rk-external-assets.liquid +68 -0
package/rook-framework/snippets/rk-form-field.liquid +83 -0
package/rook-framework/snippets/rk-gap-style.liquid +32 -0
package/rook-framework/snippets/rk-icon.liquid +28 -0
package/rook-framework/snippets/rk-image.liquid +60 -0
package/rook-framework/snippets/rk-input.liquid +35 -0
package/rook-framework/snippets/rk-installments.liquid +54 -0
package/rook-framework/snippets/rk-item.liquid +69 -0
package/rook-framework/snippets/rk-layout-style.liquid +37 -0
package/rook-framework/snippets/rk-modal.liquid +31 -0
package/rook-framework/snippets/rk-pix-discount.liquid +34 -0
package/rook-framework/snippets/rk-popover.liquid +77 -0
package/rook-framework/snippets/rk-price.liquid +48 -0
package/rook-framework/snippets/rk-progress.liquid +38 -0
package/rook-framework/snippets/rk-quantity.liquid +56 -0
package/rook-framework/snippets/rk-quick-add.liquid +67 -0
package/rook-framework/snippets/rk-scripts.liquid +17 -0
package/rook-framework/snippets/rk-scroll-area.liquid +60 -0
package/rook-framework/snippets/rk-sheet.liquid +86 -0
package/rook-framework/snippets/rk-size-style.liquid +48 -0
package/rook-framework/snippets/rk-skeleton.liquid +25 -0
package/rook-framework/snippets/rk-spacing-padding.liquid +18 -0
package/rook-framework/snippets/rk-spacing-style.liquid +54 -0
package/rook-framework/snippets/rk-spinner.liquid +43 -0
package/rook-framework/snippets/rk-swatch.liquid +33 -0
package/rook-framework/snippets/rk-table.liquid +44 -0
package/rook-framework/snippets/rk-tabs.liquid +52 -0
package/rook-framework/snippets/rk-textarea.liquid +42 -0
package/rook-framework/snippets/rk-toggle-group.liquid +27 -0
package/rook-framework/snippets/rk-toggle.liquid +58 -0
package/rook-framework/snippets/rk-typography.liquid +27 -0
package/rook-framework/snippets/rk-variables.liquid +74 -0
package/src/app.js +24 -0
package/src/commands/InstallCommand.js +133 -0
package/src/mcp/server.js +111 -1
package/src/services/FrameworkInstaller.js +379 -0
package/src/templates/block.liquid.txt +0 -15
package/src/ui/PromptUI.js +15 -1
package/src/utils/logger.js +1 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "rook-cli",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "CLI para instalar componentes Shopify",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
   },
   "files": [
     "bin",
-    "src"
+    "src",
+    "rook-framework"
   ],
   "scripts": {
     "start": "node bin/rook.js",

package/rook-framework/PRD-INSTALL-COMMAND.md ADDED Viewed

@@ -0,0 +1,379 @@
+# PRD: Comando `rook install` — Instalação do Rook UI Core Framework
+## 1. Visão Geral
+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.
+```bash
+rook install              # Interativo: detecta o tema e instala
+rook install --path ./meu-tema   # Headless: especifica o diretório do tema
+rook install --force      # Sobrescreve tudo sem perguntar
+```
+---
+## 2. Problema que Resolve
+Atualmente, instalar o Rook UI requer **5 etapas manuais**:
+1. Copiar `rook-framework/assets/*` → `assets/`
+2. Copiar `rook-framework/snippets/*` → `snippets/`
+3. Copiar `rook-framework/blocks/*` → `blocks/`
+4. Editar `config/settings_schema.json` e injetar as 4 seções Rook UI
+5. Editar `layout/theme.liquid` e adicionar os renders no `<head>` e antes do `</body>`
+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.
+---
+## 3. Arquitetura da Solução
+### 3.1 Novo Comando: `InstallCommand`
+**Arquivo:** `src/commands/InstallCommand.js`
+Segue o padrão existente do CLI (DIP, SRP):
+- Recebe `Logger`, `ConflictResolver` via construtor
+- Método principal: `executar(opcoes)`
+- Suporta modo interativo e headless
+### 3.2 Novo Serviço: `FrameworkInstaller`
+**Arquivo:** `src/services/FrameworkInstaller.js`
+Serviço dedicado que encapsula toda a lógica de instalação. Responsabilidades:
+| Método | Responsabilidade |
+|---|---|
+| `install(themePath, options)` | Orquestra as 5 etapas |
+| `_copyAssets(src, dest)` | Copia arquivos de `assets/` |
+| `_copySnippets(src, dest)` | Copia arquivos de `snippets/` |
+| `_copyBlocks(src, dest)` | Copia arquivos de `blocks/` |
+| `_injectSettings(themePath)` | Injeta seções no `settings_schema.json` |
+| `_patchThemeLayout(themePath)` | Modifica `layout/theme.liquid` |
+| `_validate(themePath)` | Valida que o diretório é um tema Shopify |
+| `_isAlreadyInstalled(themePath)` | Detecta instalação prévia |
+### 3.3 Fonte dos Arquivos do Framework
+Os arquivos do Rook UI Framework ficam em `rook-framework/` **dentro do pacote npm** do CLI.
+O `FrameworkInstaller` resolve o caminho relativo ao `import.meta.url`:
+```javascript
+import { fileURLToPath } from 'url';
+import path from 'path';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const FRAMEWORK_DIR = path.resolve(__dirname, '../../rook-framework');
+```
+---
+## 4. Fluxo de Execução
+### 4.1 Modo Interativo (`rook install`)
+```
+1. Banner do CLI
+2. Validação: o cwd é um tema Shopify? (verifica config/ + layout/)
+   → Se não: "Este diretório não parece ser um tema Shopify. Deseja continuar? [s/N]"
+3. Detecção: já existe instalação do Rook UI?
+   → Se sim: "Rook UI já está instalado. Deseja reinstalar/atualizar? [s/N]"
+4. Confirmação: "Instalar Rook UI Core Framework neste tema? [S/n]"
+5. Execução das 5 etapas com progresso no terminal
+6. Resumo final com contagem de arquivos
+```
+### 4.2 Modo Headless (`rook install --path ./tema --force`)
+```
+1. Validação do caminho
+2. Execução direta (sem prompts)
+3. Retorna 0 (sucesso) ou 1 (erro) via exit code
+```
+---
+## 5. Especificação das Etapas
+### Etapa 1: Copiar Assets (`assets/`)
+- **Origem:** `rook-framework/assets/*.css` + `rook-framework/assets/*.js`
+- **Destino:** `<tema>/assets/`
+- **Conflito:** Perguntar se deve sobrescrever (ou `--force`)
+- **Contagem esperada:** ~17 arquivos (2 CSS + 15 JS)
+### Etapa 2: Copiar Snippets (`snippets/`)
+- **Origem:** `rook-framework/snippets/*.liquid`
+- **Destino:** `<tema>/snippets/`
+- **Exclusões:** Ignorar arquivos com " copy" no nome (ex: `rk-external-assets copy.liquid`)
+- **Contagem esperada:** ~45 arquivos
+### Etapa 3: Copiar Blocks (`blocks/`)
+- **Origem:** `rook-framework/blocks/*.liquid`
+- **Destino:** `<tema>/blocks/`
+- **Contagem esperada:** ~14 arquivos
+### Etapa 4: Injetar Settings (`config/settings_schema.json`)
+**Lógica:**
+```javascript
+// 1. Ler o settings_schema.json do tema
+const schema = JSON.parse(await fs.readFile(settingsPath, 'utf8'));
+// 2. Ler as seções do Rook UI
+const rkSections = JSON.parse(await fs.readFile(rkSettingsPath, 'utf8'));
+// 3. Verificar se já existem seções Rook UI (por nome)
+const existingRkNames = schema
+    .filter(s => s.name && s.name.startsWith('Rook UI'))
+    .map(s => s.name);
+// 4. Se existem: remover as antigas e substituir
+if (existingRkNames.length > 0) {
+    schema = schema.filter(s => !s.name || !s.name.startsWith('Rook UI'));
+}
+// 5. Inserir as novas seções no final do array
+schema.push(...rkSections);
+// 6. Salvar o arquivo
+await fs.writeFile(settingsPath, JSON.stringify(schema, null, 2), 'utf8');
+```
+**Seções injetadas:** (4 seções)
+- `Rook UI — Cores`
+- `Rook UI — Forma e Transição`
+- `Rook UI — Parcelamento`
+- `Rook UI — Pix`
+**Validação pós-injeção:** Parsear o JSON resultante para confirmar que é válido.
+### Etapa 5: Patch do `layout/theme.liquid`
+**Injeção no `<head>`** (após a última tag `render` ou `stylesheet_tag` no head):
+```liquid
+{%- comment -%} Rook UI Core Framework {%- endcomment -%}
+{%- render 'rk-variables' -%}
+{{ 'rk-framework-tokens.css' | asset_url | stylesheet_tag }}
+{{ 'rk-framework-core.css' | asset_url | stylesheet_tag }}
+{%- render 'rk-external-assets', location: 'head' -%}
+```
+**Injeção antes do `</body>`:**
+```liquid
+{%- comment -%} Rook UI Core Framework — Scripts {%- endcomment -%}
+{%- render 'rk-external-assets', location: 'body' -%}
+{%- render 'rk-scripts' -%}
+```
+**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`).
+**Estratégia de injeção:**
+Para o `<head>`:
+- Buscar a linha `{{ content_for_header }}` e inserir ANTES dela
+- Fallback: buscar `</head>` e inserir antes
+Para o `</body>`:
+- Buscar `</body>` e inserir antes
+---
+## 6. Flags e Opções
+| Flag | Tipo | Default | Descrição |
+|---|---|---|---|
+| `--path <dir>` | string | `process.cwd()` | Diretório do tema Shopify |
+| `--force` | boolean | `false` | Sobrescreve tudo sem perguntar |
+| `--skip-layout` | boolean | `false` | Não modifica o `theme.liquid` |
+| `--skip-settings` | boolean | `false` | Não modifica o `settings_schema.json` |
+---
+## 7. Integração com o CLI Existente
+### 7.1 Registro no `app.js`
+```javascript
+import { InstallCommand } from './commands/InstallCommand.js';
+// No constructor:
+this.installCommand = new InstallCommand(
+    this.logger,
+    this.conflictResolver
+);
+// No run():
+this.programa
+    .command('install')
+    .alias('i')
+    .description('Instala o Rook UI Core Framework no tema Shopify')
+    .option('--path <dir>', 'Diretório do tema Shopify', process.cwd())
+    .option('--force', 'Sobrescreve arquivos sem perguntar')
+    .option('--skip-layout', 'Não modifica o theme.liquid')
+    .option('--skip-settings', 'Não modifica o settings_schema.json')
+    .action(async (opcoes) => {
+        this.logger.banner();
+        await this.installCommand.executar(opcoes);
+    });
+```
+### 7.2 Integração com MCP Server
+Adicionar nova tool `install_framework` no `src/mcp/server.js`:
+```javascript
+{
+    name: 'install_framework',
+    description: 'Instala o Rook UI Core Framework em um tema Shopify',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            projectPath: { type: 'string', description: 'Caminho do tema' }
+        },
+        required: ['projectPath']
+    }
+}
+```
+---
+## 8. Saída do Terminal (UX)
+```
+  ╭─────────────────────────────────╮
+  │  🏰 Rook CLI — Install         │
+  ╰─────────────────────────────────╯
+  ✔ Tema Shopify detectado: Horizon v3.4.0
+  📦 Instalando Rook UI Core Framework...
+  [1/5] Copiando assets...
+    → assets/rk-framework-tokens.css
+    → assets/rk-framework-core.css
+    → assets/rk-quantity.js
+    → assets/rk-modal.js
+    → ... (17 arquivos)
+  [2/5] Copiando snippets...
+    → snippets/rk-variables.liquid
+    → snippets/rk-button.liquid
+    → ... (45 arquivos)
+  [3/5] Copiando blocks...
+    → blocks/rk-button.liquid
+    → ... (14 arquivos)
+  [4/5] Injetando settings no settings_schema.json...
+    → Rook UI — Cores (19 settings)
+    → Rook UI — Forma e Transição (6 settings)
+    → Rook UI — Parcelamento (5 settings)
+    → Rook UI — Pix (3 settings)
+  [5/5] Configurando layout/theme.liquid...
+    → Injetado no <head>: rk-variables, tokens, core CSS
+    → Injetado antes do </body>: rk-scripts
+  ═══════════════════════════════════════════
+  ✔ Rook UI instalado com sucesso!
+     Arquivos copiados: 76
+     Settings injetadas: 4 seções (33 settings)
+     Layout atualizado: theme.liquid
+  ═══════════════════════════════════════════
+```
+---
+## 9. Detecção e Validação
+### 9.1 Validar que é um tema Shopify
+Verificar existência de pelo menos 3 dos seguintes:
+- `config/settings_schema.json`
+- `layout/theme.liquid`
+- `snippets/`
+- `sections/`
+- `templates/`
+### 9.2 Detectar instalação prévia
+Verificar qualquer um destes:
+- Existência de `snippets/rk-variables.liquid`
+- Existência de `assets/rk-framework-core.css`
+- Seção com `name` começando com `"Rook UI"` no `settings_schema.json`
+### 9.3 Detectar versão do tema (opcional)
+Ler o primeiro objeto do `settings_schema.json` (`theme_info`) para exibir nome e versão:
+```json
+{ "name": "theme_info", "theme_name": "Horizon", "theme_version": "3.4.0" }
+```
+---
+## 10. Estrutura de Arquivos Criados/Modificados
+```
+src/
+├── commands/
+│   └── InstallCommand.js          ← NOVO: Comando rook install
+├── services/
+│   └── FrameworkInstaller.js      ← NOVO: Serviço de instalação
+├── app.js                         ← MODIFICADO: Registrar novo comando
+└── mcp/
+    └── server.js                  ← MODIFICADO: Nova tool install_framework
+```
+---
+## 11. Tratamento de Erros
+| Cenário | Comportamento |
+|---|---|
+| Diretório não é tema Shopify | Aviso + confirmação para continuar |
+| `settings_schema.json` com JSON inválido | Erro fatal + backup criado antes de modificar |
+| `theme.liquid` não encontrado | Skip com aviso (usa `--skip-layout` implícito) |
+| Arquivo já existe | Pergunta via `ConflictResolver` (ou `--force`) |
+| Rook UI já instalado | Pergunta se quer reinstalar/atualizar |
+| Permissão negada | Erro fatal com mensagem clara |
+### 11.1 Backup de Segurança
+Antes de modificar `settings_schema.json` e `theme.liquid`, criar backup:
+```
+config/settings_schema.json.rk-backup
+layout/theme.liquid.rk-backup
+```
+---
+## 12. Comando Desinstalar (Futuro)
+Não faz parte deste PRD, mas o design permite fácil implementação futura de `rook uninstall`:
+- Remover arquivos `rk-*` de `assets/`, `snippets/`, `blocks/`
+- Remover seções `"Rook UI"` do `settings_schema.json`
+- Remover blocos `Rook UI Core Framework` do `theme.liquid`
+- Restaurar backups `.rk-backup`
+---
+## 13. Definição de Pronto (DoD)
+- [ ] `rook install` funciona no modo interativo (sem flags)
+- [ ] `rook install --path ./tema --force` funciona no modo headless
+- [ ] Assets, snippets e blocks copiados corretamente
+- [ ] `settings_schema.json` modificado com JSON válido
+- [ ] `theme.liquid` modificado com as injeções corretas na ordem certa
+- [ ] Detecção de tema Shopify funciona
+- [ ] Detecção de instalação prévia funciona
+- [ ] Reinstalação/atualização funciona sem duplicar entradas
+- [ ] Backups criados antes de modificar arquivos existentes
+- [ ] MCP tool `install_framework` funciona
+- [ ] Testado no tema Horizon e em pelo menos um outro tema