rook-cli 1.0.3 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rook-cli",
-  "version": "1.0.3",
-  "description": "CLI para instalar componentes Shopify de um repositório centralizado",
+  "version": "1.1.0",
+  "description": "CLI para instalar componentes Shopify",
   "repository": {
     "type": "git",
     "url": "https://github.com/chesslabdev/rook-cli.git"

package/src/app.js

@@ -20,6 +20,8 @@ import { FileMapper } from './filesystem/FileMapper.js';
 import { ConflictResolver } from './filesystem/ConflictResolver.js';
 import { AddCommand } from './commands/AddCommand.js';
 import { ConfigCommand } from './commands/ConfigCommand.js';
+import { GenerateCommand } from './commands/GenerateCommand.js';
+import { ScaffoldService } from './services/ScaffoldService.js';
 import { CLI_NAME } from './config/constants.js';
 
 export class App {
@@ -50,6 +52,15 @@ export class App {
             this.logger,
             this.tokenManager
         );
+
+        this.scaffoldService = new ScaffoldService(this.logger);
+
+        this.generateCommand = new GenerateCommand(
+            this.logger,
+            this.promptUI,
+            this.scaffoldService,
+            this.conflictResolver
+        );
     }
 
     /**
@@ -80,6 +91,16 @@ export class App {
                 await this.configCommand.executar();
             });
 
+        // Comando: rook generate [nome-do-componente]
+        this.programa
+            .command('generate [nome]')
+            .alias('g')
+            .description('Gera scaffold de componentes Shopify (sections, blocks, snippets, assets)')
+            .action(async (nome) => {
+                this.logger.banner();
+                await this.generateCommand.executar(nome);
+            });
+
         // Comando padrão (sem argumentos) — abre o menu interativo
         this.programa
             .action(async () => {

package/src/commands/GenerateCommand.js

@@ -0,0 +1,114 @@
+/**
+ * GenerateCommand — Comando "generate" do CLI.
+ * 
+ * Orquestra o fluxo de scaffold de componentes:
+ * 1. Recebe o nome do componente (argumento ou prompt)
+ * 2. Exibe menu multi-select para tipos de arquivo
+ * 3. Normaliza o nome para os formatos corretos (kebab, Pascal, snake)
+ * 4. Delega a geração ao ScaffoldService
+ * 5. Grava os arquivos via FileSystemManager (fs-extra)
+ * 6. Trata conflitos de sobrescrita
+ * 
+ * Princípio: Inversão de Dependência (DIP) — todas as dependências são injetadas
+ * Princípio: Responsabilidade Única (SRP) — orquestra apenas o fluxo do comando "generate"
+ */
+
+import path from 'path';
+import fs from 'fs-extra';
+import { generateNames } from '../utils/stringUtils.js';
+
+export class GenerateCommand {
+
+    /**
+     * @param {import('../utils/logger.js').Logger} logger
+     * @param {import('../ui/PromptUI.js').PromptUI} promptUI
+     * @param {import('../services/ScaffoldService.js').ScaffoldService} scaffoldService
+     * @param {import('../filesystem/ConflictResolver.js').ConflictResolver} conflictResolver
+     */
+    constructor(logger, promptUI, scaffoldService, conflictResolver) {
+        this.logger = logger;
+        this.promptUI = promptUI;
+        this.scaffoldService = scaffoldService;
+        this.conflictResolver = conflictResolver;
+    }
+
+    /**
+     * Executa o fluxo principal do comando "generate".
+     * 
+     * @param {string} [nomeComponente] - Nome passado como argumento CLI (opcional)
+     * @returns {Promise<void>}
+     */
+    async executar(nomeComponente) {
+        try {
+            // 1. Se o nome não veio como argumento, pergunta ao usuário
+            const nome = nomeComponente || await this.promptUI.perguntarNomeComponente();
+
+            if (!nome || nome.trim() === '') {
+                this.logger.erro('Nome do componente é obrigatório.');
+                return;
+            }
+
+            // 2. Normaliza os nomes
+            const names = generateNames(nome);
+
+            this.logger.destaque(`\n🔧 Gerando componente: ${names.PascalName} (${names.kebabName})\n`);
+
+            // 3. Pergunta quais tipos gerar
+            const tiposSelecionados = await this.promptUI.selecionarTiposGerador();
+
+            if (tiposSelecionados.length === 0) {
+                this.logger.aviso('Nenhum tipo selecionado. Operação cancelada.');
+                return;
+            }
+
+            // 4. Gera os arquivos via ScaffoldService
+            const arquivosGerados = await this.scaffoldService.generateMultiple(tiposSelecionados, names);
+
+            // 5. Grava os arquivos no disco
+            const diretorioAtual = process.cwd();
+            let totalGravados = 0;
+
+            // Reseta decisões anteriores do ConflictResolver
+            this.conflictResolver.resetar();
+
+            for (const arquivo of arquivosGerados) {
+                const destDir = path.join(diretorioAtual, arquivo.outputDir);
+                const destPath = path.join(destDir, arquivo.fileName);
+                const caminhoRelativo = path.join(arquivo.outputDir, arquivo.fileName);
+
+                // RF03: Verifica se já existe
+                if (await fs.pathExists(destPath)) {
+                    const sobrescrever = await this.conflictResolver.resolver(caminhoRelativo);
+
+                    if (!sobrescrever) {
+                        this.logger.aviso(`  ⏩ Pulando: ${caminhoRelativo}`);
+                        continue;
+                    }
+                }
+
+                // Cria o diretório se não existe e grava o arquivo
+                await fs.ensureDir(destDir);
+                await fs.writeFile(destPath, arquivo.content, 'utf-8');
+
+                this.logger.sucesso(`  ✅ ${caminhoRelativo}`);
+                totalGravados++;
+            }
+
+            // 6. Resumo final
+            console.log('');
+            this.logger.destaque('═══════════════════════════════════════════');
+            this.logger.sucesso(`🎉 ${totalGravados}/${arquivosGerados.length} arquivo(s) gerado(s) com sucesso!`);
+            this.logger.sutil(`Componente: ${names.PascalName} (${names.kebabName})`);
+            this.logger.destaque('═══════════════════════════════════════════');
+            console.log('');
+
+        } catch (erro) {
+            // Trata cancelamento do usuário (Ctrl+C)
+            if (erro.name === 'ExitPromptError') {
+                this.logger.aviso('Operação cancelada pelo usuário.');
+                return;
+            }
+            this.logger.erro(`Erro durante a geração: ${erro.message}`);
+        }
+    }
+}

package/src/services/ScaffoldService.js

@@ -0,0 +1,131 @@
+/**
+ * ScaffoldService — Motor de geração de scaffold via templates.
+ * 
+ * Responsável por:
+ * - Ler os templates base da pasta src/templates/
+ * - Substituir placeholders ({{kebabName}}, {{PascalName}}, etc.)
+ * - Retornar o conteúdo final já renderizado
+ * 
+ * Princípio: Responsabilidade Única (SRP) — lida apenas com renderização de templates
+ * Princípio: Aberto/Fechado (OCP) — novos templates são adicionados sem alterar lógica existente
+ */
+
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/** Diretório onde os templates estão armazenados */
+const TEMPLATES_DIR = path.resolve(__dirname, '..', 'templates');
+
+/**
+ * Mapa de tipos para seus respectivos arquivos de template
+ * e destinos de saída.
+ * 
+ * @type {Object.<string, { templateFile: string, outputDir: string, outputFileName: (kebabName: string) => string }>}
+ */
+const TEMPLATE_MAP = {
+    section: {
+        templateFile: 'section.liquid.txt',
+        outputDir: 'sections',
+        outputFileName: (kebabName) => `${kebabName}.liquid`,
+    },
+    block: {
+        templateFile: 'block.liquid.txt',
+        outputDir: 'blocks',
+        outputFileName: (kebabName) => `${kebabName}-block.liquid`,
+    },
+    snippet: {
+        templateFile: 'snippet.liquid.txt',
+        outputDir: 'snippets',
+        outputFileName: (kebabName) => `${kebabName}.liquid`,
+    },
+    controller: {
+        templateFile: 'controller.js.txt',
+        outputDir: 'assets',
+        outputFileName: (kebabName) => `${kebabName}-controller.js`,
+    },
+};
+
+export class ScaffoldService {
+
+    /**
+     * @param {import('../utils/logger.js').Logger} logger
+     */
+    constructor(logger) {
+        this.logger = logger;
+    }
+
+    /**
+     * Retorna os tipos de componente disponíveis para geração.
+     * @returns {string[]} Lista de tipos disponíveis
+     */
+    getAvailableTypes() {
+        return Object.keys(TEMPLATE_MAP);
+    }
+
+    /**
+     * Renderiza um template substituindo todos os placeholders.
+     * Utiliza replace via regex (RF02 do PRD).
+     * 
+     * @param {string} templateContent - Conteúdo bruto do template
+     * @param {{ kebabName: string, PascalName: string, snake_name: string }} names - Nomes formatados
+     * @returns {string} Conteúdo final renderizado
+     */
+    render(templateContent, names) {
+        return templateContent
+            .replace(/\{\{kebabName\}\}/g, names.kebabName)
+            .replace(/\{\{PascalName\}\}/g, names.PascalName)
+            .replace(/\{\{snake_name\}\}/g, names.snake_name);
+    }
+
+    /**
+     * Gera um único componente: lê o template, renderiza e retorna
+     * o conteúdo com as informações de destino.
+     * 
+     * @param {string} type - Tipo do componente ('section', 'block', 'snippet', 'controller')
+     * @param {{ kebabName: string, PascalName: string, snake_name: string }} names - Nomes formatados
+     * @returns {Promise<{ content: string, outputDir: string, fileName: string }>}
+     * @throws {Error} Se o tipo não for suportado
+     */
+    async generate(type, names) {
+        const config = TEMPLATE_MAP[type];
+
+        if (!config) {
+            throw new Error(`Tipo de componente não suportado: "${type}". Tipos válidos: ${this.getAvailableTypes().join(', ')}`);
+        }
+
+        // Lê o template do disco
+        const templatePath = path.join(TEMPLATES_DIR, config.templateFile);
+        const templateContent = await fs.readFile(templatePath, 'utf-8');
+
+        // Renderiza com as variáveis
+        const content = this.render(templateContent, names);
+
+        return {
+            content,
+            outputDir: config.outputDir,
+            fileName: config.outputFileName(names.kebabName),
+        };
+    }
+
+    /**
+     * Gera múltiplos componentes de uma vez.
+     * 
+     * @param {string[]} types - Lista de tipos a serem gerados
+     * @param {{ kebabName: string, PascalName: string, snake_name: string }} names - Nomes formatados
+     * @returns {Promise<Array<{ content: string, outputDir: string, fileName: string }>>}
+     */
+    async generateMultiple(types, names) {
+        const results = [];
+
+        for (const type of types) {
+            const result = await this.generate(type, names);
+            results.push(result);
+        }
+
+        return results;
+    }
+}

package/src/templates/block.liquid.txt

@@ -0,0 +1,52 @@
+{% doc %}
+  Block: {{PascalName}} Block
+  Usage: Use inside sections that support blocks.
+{% enddoc %}
+
+{% liquid
+  assign block_id = block.id
+%}
+
+<{{kebabName}}-block
+  id="block-{{ block_id }}"
+  class="{{kebabName}}-block"
+  data-block-id="{{ block_id }}"
+  {{ block.shopify_attributes }}
+>
+  <div class="{{kebabName}}-block__inner">
+    {% if block.settings.title != blank %}
+      <h3 class="{{kebabName}}-block__title">{{ block.settings.title | escape }}</h3>
+    {% endif %}
+  </div>
+</{{kebabName}}-block>
+
+{% schema %}
+{
+  "name": "{{PascalName}} Block",
+  "target": "section",
+  "settings": [
+    {
+      "type": "text",
+      "id": "title",
+      "label": "Block Title",
+      "default": "Feature"
+    }
+  ]
+}
+{% endschema %}
+
+{% javascript %}
+  class {{PascalName}}Block extends HTMLElement {
+    connectedCallback() {
+      this.addEventListener('click', this.handleClick.bind(this));
+    }
+
+    handleClick() {
+      console.log('Block clicked:', this.dataset.blockId);
+    }
+  }
+
+  if (!customElements.get('{{kebabName}}-block')) {
+    customElements.define('{{kebabName}}-block', {{PascalName}}Block);
+  }
+{% endjavascript %}

package/src/templates/controller.js.txt

@@ -0,0 +1,27 @@
+/**
+ * Controller: {{PascalName}}Controller
+ * Path: assets/{{kebabName}}-controller.js
+ * Description: Logic separated for reuse across multiple sections/blocks
+ */
+
+class {{PascalName}}Controller extends HTMLElement {
+  connectedCallback() {
+    const sectionId = this.dataset.sectionId;
+    if (!sectionId) return;
+
+    this.root = document.getElementById(`section-${sectionId}`);
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    // Add event listeners
+  }
+
+  disconnectedCallback() {
+    // Remove event listeners
+  }
+}
+
+if (!customElements.get('{{kebabName}}-controller')) {
+  customElements.define('{{kebabName}}-controller', {{PascalName}}Controller);
+}

package/src/templates/section.liquid.txt

@@ -0,0 +1,92 @@
+{% doc %}
+  Section: {{PascalName}}
+  Description: Componente principal controlado via Web Component.
+  Architecture:
+    - HTML: Semântico com IDs dinâmicos
+    - JS: Web Component desacoplado
+    - CSS: Scoped ou via Assets
+{% enddoc %}
+
+{% liquid
+  assign section_id = section.id
+  assign container_id = 'section-' | append: section_id
+%}
+
+<{{kebabName}}-section
+  id="{{ container_id }}"
+  class="{{kebabName}} section-container"
+  data-section-id="{{ section_id }}"
+>
+  <div class="{{kebabName}}__wrapper page-width">
+    {%- if section.settings.heading != blank -%}
+      <h2 class="{{kebabName}}__heading">{{ section.settings.heading | escape }}</h2>
+    {%- endif -%}
+
+    <div class="{{kebabName}}__content">
+      {% content_for 'blocks' %}
+    </div>
+  </div>
+</{{kebabName}}-section>
+
+{% schema %}
+{
+  "name": "{{PascalName}}",
+  "tag": "section",
+  "class": "section-{{kebabName}}",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "{{PascalName}}"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "presets": [
+    {
+      "name": "{{PascalName}}"
+    }
+  ]
+}
+{% endschema %}
+
+{% stylesheet %}
+  /* BEM Styling */
+  .{{kebabName}} {
+    display: block;
+    position: relative;
+    padding: 2rem 0;
+  }
+  .{{kebabName}}__heading {
+    margin-bottom: 1.5rem;
+  }
+{% endstylesheet %}
+
+{% javascript %}
+  class {{PascalName}}Section extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      this.init();
+    }
+
+    init() {
+      console.log('{{PascalName}} initialized', this.dataset.sectionId);
+      // Logic goes here
+    }
+
+    disconnectedCallback() {
+      // Cleanup events
+    }
+  }
+
+  if (!customElements.get('{{kebabName}}-section')) {
+    customElements.define('{{kebabName}}-section', {{PascalName}}Section);
+  }
+{% endjavascript %}

package/src/templates/snippet.liquid.txt

@@ -0,0 +1,21 @@
+{% doc %}
+  Snippet: {{PascalName}}
+  Renders a reusable UI component.
+
+  @param {string} id - Unique DOM id
+  @param {string} [modifier_class] - Optional CSS class
+  @param {string} [content] - Optional inner HTML
+
+  @example
+  {% render '{{kebabName}}', id: 'my-id', content: 'Hello' %}
+{% enddoc %}
+
+<div
+  id="{{ id | escape }}"
+  class="{{kebabName}} {{ modifier_class }}"
+  data-ui-component="{{kebabName}}"
+>
+  {% if content %}
+    {{ content }}
+  {% endif %}
+</div>

package/src/ui/PromptUI.js

@@ -8,10 +8,63 @@
  * Princípio: Aberto/Fechado (OCP) — fácil adicionar novos menus
  */
 
-import { select, checkbox } from '@inquirer/prompts';
+import { select, checkbox, input } from '@inquirer/prompts';
 
 export class PromptUI {
 
+    /**
+     * Pergunta o nome do componente ao usuário.
+     * Usado quando o nome não é fornecido via argumento CLI.
+     * 
+     * @returns {Promise<string>} Nome digitado pelo usuário
+     */
+    async perguntarNomeComponente() {
+        const nome = await input({
+            message: '📝 Qual o nome do componente?',
+            validate: (value) => {
+                if (!value || value.trim() === '') {
+                    return 'O nome do componente é obrigatório.';
+                }
+                return true;
+            },
+        });
+
+        return nome.trim();
+    }
+
+    /**
+     * Exibe menu multi-select para escolher os tipos de arquivo a serem gerados.
+     * Implementa o RF do PRD: "O que você deseja criar?"
+     * 
+     * @returns {Promise<string[]>} Tipos selecionados ('section', 'block', 'snippet', 'controller')
+     */
+    async selecionarTiposGerador() {
+        const tipos = await checkbox({
+            message: '🧱 O que você deseja criar?',
+            choices: [
+                {
+                    name: '📄 Section — Cria sections/[nome].liquid',
+                    value: 'section',
+                },
+                {
+                    name: '🧩 Block — Cria blocks/[nome]-block.liquid',
+                    value: 'block',
+                },
+                {
+                    name: '🔗 Snippet — Cria snippets/[nome].liquid',
+                    value: 'snippet',
+                },
+                {
+                    name: '⚡ Asset JS Controller — Cria assets/[nome]-controller.js',
+                    value: 'controller',
+                },
+            ],
+            required: true,
+        });
+
+        return tipos;
+    }
+
     /**
      * Exibe o menu principal com as opções de instalação.
      * 

package/src/utils/stringUtils.js

@@ -0,0 +1,86 @@
+/**
+ * stringUtils — Utilitários puros de manipulação de strings.
+ * 
+ * Responsável pelas conversões de casing necessárias
+ * no fluxo de geração de componentes (scaffold).
+ * 
+ * Princípio: Responsabilidade Única (SRP) — funções puras sem side-effects
+ * Princípio: Aberto/Fechado (OCP) — novos formatadores são adicionados sem alterar existentes
+ */
+
+/**
+ * Converte qualquer input para kebab-case.
+ * Usado em: nomes de arquivo, classes CSS (BEM), tags HTML.
+ * 
+ * Exemplos:
+ *   "hero banner"   → "hero-banner"
+ *   "HeroBanner"    → "hero-banner"
+ *   "hero_banner"   → "hero-banner"
+ *   "HERO-BANNER"   → "hero-banner"
+ * 
+ * @param {string} input - String para converter
+ * @returns {string} String em kebab-case
+ */
+export function toKebabCase(input) {
+    return input
+        // Insere hífen antes de letras maiúsculas em camelCase/PascalCase
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        // Substitui espaços, underscores e múltiplos hífens por hífen único
+        .replace(/[\s_]+/g, '-')
+        // Remove múltiplos hífens consecutivos
+        .replace(/-+/g, '-')
+        // Remove hífens no início e final
+        .replace(/^-|-$/g, '')
+        .toLowerCase();
+}
+
+/**
+ * Converte qualquer input para PascalCase.
+ * Usado em: classes JS (Web Components), labels do Schema Shopify.
+ * 
+ * Exemplos:
+ *   "hero banner"   → "HeroBanner"
+ *   "hero-banner"   → "HeroBanner"
+ *   "hero_banner"   → "HeroBanner"
+ *   "HeroBanner"    → "HeroBanner"
+ * 
+ * @param {string} input - String para converter
+ * @returns {string} String em PascalCase
+ */
+export function toPascalCase(input) {
+    return toKebabCase(input)
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}
+
+/**
+ * Converte qualquer input para snake_case.
+ * Usado em: variáveis Liquid, IDs de settings.
+ * 
+ * Exemplos:
+ *   "hero banner"   → "hero_banner"
+ *   "hero-banner"   → "hero_banner"
+ *   "HeroBanner"    → "hero_banner"
+ * 
+ * @param {string} input - String para converter
+ * @returns {string} String em snake_case
+ */
+export function toSnakeCase(input) {
+    return toKebabCase(input).replace(/-/g, '_');
+}
+
+/**
+ * Gera todos os formatos de nome a partir de um input qualquer.
+ * Retorna um objeto padronizado usado nos templates.
+ * 
+ * @param {string} input - Nome original do componente
+ * @returns {{ kebabName: string, PascalName: string, snake_name: string }}
+ */
+export function generateNames(input) {
+    return {
+        kebabName: toKebabCase(input),
+        PascalName: toPascalCase(input),
+        snake_name: toSnakeCase(input),
+    };
+}