rook-cli 1.3.1 → 1.3.4

package/src/templates/block.liquid.txt

@@ -1,7 +1,7 @@
-{% doc %}
+{% comment %}
   Block: {{PascalName}} Block
   Usage: Use inside sections that support blocks.
-{% enddoc %}
+{% endcomment %}
 
 {% liquid
   assign block_id = block.id
@@ -12,6 +12,21 @@
   class="{{kebabName}}-block"
   data-block-id="{{ block_id }}"
   {{ block.shopify_attributes }}
+  style="
+    --bg-color: {{ block.settings.bg_color }};
+    --text-color: {{ block.settings.text_color }};
+    --title-color: {{ block.settings.title_color }};
+    --border-color: {{ block.settings.border_color }};
+    --border-radius: {{ block.settings.border_radius }}px;
+    --border-width: {{ block.settings.border_width }}px;
+    --btn-bg: {{ block.settings.btn_bg_color }};
+    --btn-text: {{ block.settings.btn_text_color }};
+    --btn-radius: {{ block.settings.btn_border_radius }}px;
+    --fs-title-desktop: {{ block.settings.title_size_desktop }}px;
+    --fs-text-desktop: {{ block.settings.text_size_desktop }}px;
+    --fs-title-mobile: {{ block.settings.title_size_mobile }}px;
+    --fs-text-mobile: {{ block.settings.text_size_mobile }}px;
+  "
 >
   <div class="{{kebabName}}-block__inner">
     {% if block.settings.title != blank %}
@@ -20,6 +35,14 @@
   </div>
 </{{kebabName}}-block>
 
+{% stylesheet %}
+  /* Block Styling */
+  .{{kebabName}}-block {
+    display: block;
+    position: relative;
+  }
+{% endstylesheet %}
+
 {% schema %}
 {
   "name": "{{PascalName}} Block",
@@ -35,18 +58,3 @@
 }
 {% 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/section.liquid.txt

@@ -1,11 +1,11 @@
-{% doc %}
+{% comment %}
   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 %}
+{% endcomment %}
 
 {% liquid
   assign section_id = section.id
@@ -16,6 +16,21 @@
   id="{{ container_id }}"
   class="{{kebabName}} section-container"
   data-section-id="{{ section_id }}"
+  style="
+    --bg-color: {{ section.settings.bg_color }};
+    --text-color: {{ section.settings.text_color }};
+    --title-color: {{ section.settings.title_color }};
+    --border-color: {{ section.settings.border_color }};
+    --border-radius: {{ section.settings.border_radius }}px;
+    --border-width: {{ section.settings.border_width }}px;
+    --btn-bg: {{ section.settings.btn_bg_color }};
+    --btn-text: {{ section.settings.btn_text_color }};
+    --btn-radius: {{ section.settings.btn_border_radius }}px;
+    --fs-title-desktop: {{ section.settings.title_size_desktop }}px;
+    --fs-text-desktop: {{ section.settings.text_size_desktop }}px;
+    --fs-title-mobile: {{ section.settings.title_size_mobile }}px;
+    --fs-text-mobile: {{ section.settings.text_size_mobile }}px;
+  "
 >
   <div class="{{kebabName}}__wrapper page-width">
     {%- if section.settings.heading != blank -%}
@@ -28,6 +43,18 @@
   </div>
 </{{kebabName}}-section>
 
+{% stylesheet %}
+  /* BEM Styling */
+  .{{kebabName}} {
+    display: block;
+    position: relative;
+    padding: 2rem 0;
+  }
+  .{{kebabName}}__heading {
+    margin-bottom: 1.5rem;
+  }
+{% endstylesheet %}
+
 {% schema %}
 {
   "name": "{{PascalName}}",
@@ -54,18 +81,6 @@
 }
 {% 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() {

package/src/ui/PromptUI.js

@@ -8,7 +8,7 @@
  * Princípio: Aberto/Fechado (OCP) — fácil adicionar novos menus
  */
 
-import { select, checkbox, input } from '@inquirer/prompts';
+import { select, checkbox, input, confirm } from '@inquirer/prompts';
 
 export class PromptUI {
 
@@ -120,6 +120,20 @@ export class PromptUI {
      * @param {Array<{nome: string, caminho: string}>} componentes - Componentes disponíveis
      * @returns {Promise<Array<{nome: string, caminho: string}>>} Componentes selecionados
      */
+    /**
+     * Exibe uma pergunta de confirmação (sim/não).
+     *
+     * @param {string} mensagem - Pergunta a ser exibida
+     * @param {boolean} [padrao=true] - Valor padrão (true = Sim)
+     * @returns {Promise<boolean>}
+     */
+    async confirmar(mensagem, padrao = true) {
+        return confirm({
+            message: mensagem,
+            default: padrao,
+        });
+    }
+
     async selecionarComponentes(componentes) {
         if (componentes.length === 0) {
             throw new Error('Nenhum componente disponível no repositório.');

package/src/utils/logger.js

@@ -49,7 +49,7 @@ export class Logger {
     banner() {
         console.log('');
         console.log(pc.bold(pc.white('  ╔══════════════════════════════╗')));
-        console.log(pc.bold(pc.white('  ║    ♟️  ROOK CLI  v1.3.1       ║')));
+        console.log(pc.bold(pc.white('  ║    ♟️  ROOK CLI  v1.3.4       ║')));
         console.log(pc.bold(pc.white('  ║   Shopify Component Tool     ║')));
         console.log(pc.bold(pc.white('  ╚══════════════════════════════╝')));
         console.log('');