rook-cli 1.3.7 → 1.3.9

package/rook-framework/snippets/rk-modal.liquid

@@ -1,31 +1,120 @@
 {% doc %}
   Snippet: RkModal
-  Renders a modal/dialog wrapper using a Web Component.
+  Renders a media lightbox for images, videos, and embedded content.
+  Uses Web Component <rk-modal-element> for behaviour.
 
-  @param {string} id - Unique modal id
-  @param {string} content - HTML content of the modal
-  @param {string} [title] - Optional title
+  @param {string} id - Unique modal id (required)
+  @param {string} [type] - 'image' | 'video' | 'youtube' | 'vimeo' | 'html' (default: 'image')
+  @param {object} [image] - Shopify image object (when type is 'image')
+  @param {string} [video_url] - Video URL for hosted .mp4 (when type is 'video')
+  @param {string} [youtube_id] - YouTube video ID (when type is 'youtube')
+  @param {string} [vimeo_id] - Vimeo video ID (when type is 'vimeo')
+  @param {string} [content] - Raw HTML content (when type is 'html')
+  @param {string} [alt] - Alt text for images / aria-label for media
+  @param {string} [aspect_ratio] - Aspect ratio for video (e.g. '16/9', default: '16/9')
+  @param {boolean} [autoplay] - Autoplay video on open (default: true)
   @param {string} [custom_class] - Extra CSS classes
 
-  @example
-  {% render 'rk-modal', id: 'my-modal', title: 'Quick View', content: some_html %}
+  @example — Image lightbox
+  {% render 'rk-modal', id: 'product-zoom', type: 'image', image: product.featured_image, alt: product.title %}
+
+  @example — YouTube lightbox
+  {% render 'rk-modal', id: 'brand-video', type: 'youtube', youtube_id: 'dQw4w9WgXcQ' %}
+
+  @example — Hosted video
+  {% render 'rk-modal', id: 'story-video', type: 'video', video_url: video_source %}
 {% enddoc %}
 
-<rk-modal-element data-modal-id="{{ id }}">
+{%- liquid
+  assign modal_type = type | default: 'image'
+  assign modal_aspect = aspect_ratio | default: '16/9'
+  assign modal_autoplay = autoplay | default: true
+  assign modal_alt = alt | default: ''
+-%}
+
+<rk-modal-element
+  data-modal-id="{{ id }}"
+  data-type="{{ modal_type }}"
+  {% if modal_autoplay %}data-autoplay="true"{% endif %}
+>
   <div id="{{ id }}" class="rk-modal{% if custom_class %} {{ custom_class }}{% endif %}">
+    {%- comment -%} Overlay {%- endcomment -%}
     <div class="rk-modal__overlay" data-action="close"></div>
-    <div class="rk-modal__content" role="dialog" aria-modal="true" {% if title %}aria-label="{{ title }}"{% endif %}>
-      <button type="button" class="rk-modal__close" data-action="close" aria-label="Fechar">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-        </svg>
-      </button>
-
-      {% if title %}
-        <h2 class="rk-typography rk-typography--lg rk-typography--bold" style="margin-bottom: var(--rk-space-md);">{{ title }}</h2>
-      {% endif %}
-
-      {{ content }}
+
+    {%- comment -%} Close button {%- endcomment -%}
+    <button type="button" class="rk-modal__close" data-action="close" aria-label="Fechar">
+      {% render 'rk-icon', icon: 'close', size: 'md', color: '#fff' %}
+    </button>
+
+    {%- comment -%} Media content {%- endcomment -%}
+    <div
+      class="rk-modal__content"
+      role="dialog"
+      aria-modal="true"
+      {% if modal_alt != blank %}aria-label="{{ modal_alt }}"{% endif %}
+    >
+      {%- case modal_type -%}
+
+        {%- when 'image' -%}
+          {%- if image != blank -%}
+            {%- assign img_alt = modal_alt | default: image.alt | escape -%}
+            <div class="rk-modal__media rk-modal__media--image">
+              {{
+                image
+                | image_url: width: 1600
+                | image_tag:
+                  class: 'rk-modal__img',
+                  loading: 'lazy',
+                  alt: img_alt,
+                  sizes: '(min-width: 1200px) 1200px, 90vw'
+              }}
+            </div>
+          {%- endif -%}
+
+        {%- when 'video' -%}
+          <div class="rk-modal__media rk-modal__media--video" style="aspect-ratio: {{ modal_aspect }};">
+            <video
+              class="rk-modal__video"
+              controls
+              playsinline
+              preload="metadata"
+              {% if modal_autoplay %}data-autoplay{% endif %}
+              {% if modal_alt != blank %}aria-label="{{ modal_alt }}"{% endif %}
+            >
+              <source src="{{ video_url }}" type="video/mp4">
+            </video>
+          </div>
+
+        {%- when 'youtube' -%}
+          <div class="rk-modal__media rk-modal__media--embed" style="aspect-ratio: {{ modal_aspect }};">
+            <iframe
+              class="rk-modal__iframe"
+              data-src="https://www.youtube.com/embed/{{ youtube_id }}?rel=0&enablejsapi=1"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+              loading="lazy"
+              {% if modal_alt != blank %}title="{{ modal_alt }}"{% endif %}
+            ></iframe>
+          </div>
+
+        {%- when 'vimeo' -%}
+          <div class="rk-modal__media rk-modal__media--embed" style="aspect-ratio: {{ modal_aspect }};">
+            <iframe
+              class="rk-modal__iframe"
+              data-src="https://player.vimeo.com/video/{{ vimeo_id }}?title=0&byline=0&portrait=0"
+              allow="autoplay; fullscreen; picture-in-picture"
+              allowfullscreen
+              loading="lazy"
+              {% if modal_alt != blank %}title="{{ modal_alt }}"{% endif %}
+            ></iframe>
+          </div>
+
+        {%- when 'html' -%}
+          <div class="rk-modal__media rk-modal__media--html">
+            {{ content }}
+          </div>
+
+      {%- endcase -%}
     </div>
   </div>
 </rk-modal-element>

package/rook-framework/snippets/rk-reveal.liquid

@@ -0,0 +1,56 @@
+{% doc %}
+  Snippet: RkReveal
+  Wrapper que aplica animacao de revelacao progressiva por scroll (fade-in + slide-up).
+  Usa IntersectionObserver para detectar quando o elemento entra na viewport
+  e dispara a animacao com suporte a stagger (cascata entre filhos).
+
+  @param {string} [animation] - Tipo de animacao: 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'fade' | 'zoom' (default: 'fade-up')
+  @param {number} [duration] - Duracao da animacao em ms (default: 600)
+  @param {number} [delay] - Atraso antes de iniciar em ms (default: 0)
+  @param {number} [stagger] - Atraso incremental entre filhos diretos em ms (default: 0, desativado)
+  @param {number} [threshold] - Percentual visivel para disparar (0.0 a 1.0, default: 0.1)
+  @param {string} [easing] - CSS easing function (default: 'cubic-bezier(0.16, 1, 0.3, 1)')
+  @param {boolean} [once] - Anima apenas uma vez (default: true)
+  @param {string} [content] - HTML do conteudo interno
+  @param {string} [custom_class] - Classes CSS extras
+  @param {string} [tag] - Tag HTML do wrapper (default: 'div')
+
+  @example
+  {% capture card_content %}
+    <div>Card 1</div>
+    <div>Card 2</div>
+    <div>Card 3</div>
+  {% endcapture %}
+  {% render 'rk-reveal', content: card_content, animation: 'fade-up', stagger: 100 %}
+
+  {% capture banner %}
+    <h2>Titulo do Banner</h2>
+  {% endcapture %}
+  {% render 'rk-reveal', content: banner, animation: 'fade-up', delay: 200, duration: 800 %}
+{% enddoc %}
+
+{%- liquid
+  assign rv_animation = animation | default: 'fade-up'
+  assign rv_duration = duration | default: 600
+  assign rv_delay = delay | default: 0
+  assign rv_stagger = stagger | default: 0
+  assign rv_threshold = threshold | default: '0.1'
+  assign rv_easing = easing | default: 'cubic-bezier(0.16, 1, 0.3, 1)'
+  assign rv_once = once | default: true
+  assign rv_tag = tag | default: 'div'
+-%}
+
+<rk-reveal-element
+  class="rk-reveal{% if custom_class %} {{ custom_class }}{% endif %}"
+  data-animation="{{ rv_animation }}"
+  data-duration="{{ rv_duration }}"
+  data-delay="{{ rv_delay }}"
+  data-stagger="{{ rv_stagger }}"
+  data-threshold="{{ rv_threshold }}"
+  data-easing="{{ rv_easing }}"
+  data-once="{{ rv_once }}"
+>
+  <{{ rv_tag }} class="rk-reveal__content">
+    {{ content }}
+  </{{ rv_tag }}>
+</rk-reveal-element>

package/rook-framework/snippets/rk-scripts.liquid

@@ -7,7 +7,7 @@
 
 {%- liquid
   # Lista de componentes JS essenciais do Rook Framework
-  assign rk_components = 'quantity,modal,accordion,popover,scroll-area,drawer,dialog,sheet,tabs,toggle,progress,collapsible,carousel,bottom-app-bar'
+  assign rk_components = 'quantity,modal,accordion,popover,scroll-area,drawer,dialog,sheet,tabs,toggle,progress,collapsible,carousel,bottom-app-bar,reveal'
   assign rk_components_array = rk_components | split: ','
 -%}
 

package/src/commands/AddCommand.js

@@ -14,6 +14,7 @@
 import path from 'path';
 import os from 'os';
 import fs from 'fs-extra';
+import { REMOTE_PATHS } from '../config/constants.js';
 
 export class AddCommand {
 
@@ -120,7 +121,7 @@ export class AddCommand {
             this.logger.destaque(`🧩 Instalando ${kitSelecionado.componentes.length} componente(s) do manifesto...\n`);
 
             for (const nomeComponente of kitSelecionado.componentes) {
-                const caminhoComponente = `components/${nomeComponente}`;
+                const caminhoComponente = `${REMOTE_PATHS.COMPONENTS}/${nomeComponente}`;
 
                 try {
                     this.logger.info(`[${totalComponentesInstalados + 1}/${kitSelecionado.componentes.length}] ${nomeComponente}`);

package/src/config/constants.js

@@ -6,7 +6,7 @@
  */
 
 /** Repositório de origem no GitHub (owner/repo) */
-export const GITHUB_REPO = process.env.GITHUB_REPO || 'chesslabdev/rook-cli/tree/main/rook-components';
+export const GITHUB_REPO = process.env.GITHUB_REPO || 'chesslabdev/rook-cli';
 
 /** URL base da API do GitHub para conteúdo do repositório */
 export const GITHUB_API_BASE = `https://api.github.com/repos/${GITHUB_REPO}/contents`;
@@ -30,10 +30,9 @@ export const SHOPIFY_DIRS = [
     'templates',
 ];
 
-/** Pastas raiz do repositório remoto */
 export const REMOTE_PATHS = {
-    KITS: 'kits',
-    COMPONENTS: 'components',
+    KITS: 'rook-components/kits',
+    COMPONENTS: 'rook-components/components',
 };
 
 /** Nome do CLI exibido nos logs */

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.7       ║')));
+        console.log(pc.bold(pc.white('  ║    ♟️  ROOK CLI  v1.3.9       ║')));
         console.log(pc.bold(pc.white('  ║   Shopify Component Tool     ║')));
         console.log(pc.bold(pc.white('  ╚══════════════════════════════╝')));
         console.log('');

package/rook-framework/blocks/rk-button.liquid

@@ -1,166 +0,0 @@
-{% comment %}
-  Block: RK Button
-  Renders a rk-button with full customizer control.
-  Uses rk-size-style and rk-spacing-style for Horizon-compatible sizing and spacing.
-{% endcomment %}
-
-<rk-button-block
-  id="block-{{ block.id }}"
-  {{ block.shopify_attributes }}
-  class="rk-block rk-size-style rk-spacing-style"
-  style="
-    {% render 'rk-size-style', settings: block.settings %}
-    {% render 'rk-spacing-style', settings: block.settings %}
-    {% if block.settings.alignment == 'center' %}text-align: center;{% elsif block.settings.alignment == 'right' %}text-align: right;{% endif %}
-  "
->
-  {% render 'rk-button',
-    text: block.settings.text,
-    url: block.settings.url,
-    style: block.settings.style,
-    size: block.settings.size,
-    full_width: block.settings.full_width,
-    icon: block.settings.icon
-  %}
-</rk-button-block>
-
-{% schema %}
-{
-  "name": "RK | Botão",
-  "tag": null,
-  "settings": [
-    {
-      "type": "text",
-      "id": "text",
-      "label": "Texto do botão",
-      "default": "Clique aqui"
-    },
-    {
-      "type": "url",
-      "id": "url",
-      "label": "Link"
-    },
-    {
-      "type": "select",
-      "id": "style",
-      "label": "Estilo",
-      "options": [
-        { "value": "primary", "label": "Primário" },
-        { "value": "secondary", "label": "Secundário" },
-        { "value": "outline", "label": "Outline" },
-        { "value": "ghost", "label": "Ghost" },
-        { "value": "link", "label": "Link" }
-      ],
-      "default": "primary"
-    },
-    {
-      "type": "select",
-      "id": "size",
-      "label": "Tamanho",
-      "options": [
-        { "value": "sm", "label": "Pequeno" },
-        { "value": "md", "label": "Médio" },
-        { "value": "lg", "label": "Grande" }
-      ],
-      "default": "md"
-    },
-    {
-      "type": "checkbox",
-      "id": "full_width",
-      "label": "Largura total",
-      "default": false
-    },
-    {
-      "type": "text",
-      "id": "icon",
-      "label": "Ícone (nome)",
-      "info": "Ex: heart, cart, arrow"
-    },
-    {
-      "type": "header",
-      "content": "Dimensionamento"
-    },
-    {
-      "type": "select",
-      "id": "width",
-      "label": "Largura",
-      "options": [
-        { "value": "fit-content", "label": "Ajustar ao conteúdo" },
-        { "value": "fill", "label": "Preencher" },
-        { "value": "custom", "label": "Personalizado" }
-      ],
-      "default": "fit-content"
-    },
-    {
-      "type": "range",
-      "id": "custom_width",
-      "label": "Largura personalizada",
-      "min": 10,
-      "max": 100,
-      "step": 5,
-      "unit": "%",
-      "default": 100
-    },
-    {
-      "type": "header",
-      "content": "Layout"
-    },
-    {
-      "type": "text_alignment",
-      "id": "alignment",
-      "label": "Alinhamento",
-      "default": "left"
-    },
-    {
-      "type": "header",
-      "content": "Espaçamento"
-    },
-    {
-      "type": "range",
-      "id": "padding-block-start",
-      "label": "Topo",
-      "min": 0,
-      "max": 100,
-      "step": 2,
-      "unit": "px",
-      "default": 0
-    },
-    {
-      "type": "range",
-      "id": "padding-block-end",
-      "label": "Base",
-      "min": 0,
-      "max": 100,
-      "step": 2,
-      "unit": "px",
-      "default": 0
-    },
-    {
-      "type": "range",
-      "id": "padding-inline-start",
-      "label": "Esquerda",
-      "min": 0,
-      "max": 100,
-      "step": 2,
-      "unit": "px",
-      "default": 0
-    },
-    {
-      "type": "range",
-      "id": "padding-inline-end",
-      "label": "Direita",
-      "min": 0,
-      "max": 100,
-      "step": 2,
-      "unit": "px",
-      "default": 0
-    }
-  ],
-  "presets": [
-    {
-      "name": "RK | Botão",
-      "category": "Rook UI"
-    }
-  ]
-}
-{% endschema %}

package/rook-framework/blocks/rk-icon.liquid

@@ -1,134 +0,0 @@
-{% comment %}
-  Block: RK Icon
-  Renders a rk-icon standalone block.
-  Uses rk-spacing-style for Horizon-compatible spacing.
-{% endcomment %}
-
-<rk-icon-block
-  id="block-{{ block.id }}"
-  {{ block.shopify_attributes }}
-  class="rk-block rk-spacing-style"
-  style="
-    {% render 'rk-spacing-style', settings: block.settings %}
-    {% if block.settings.alignment == 'center' %}text-align: center;{% elsif block.settings.alignment == 'right' %}text-align: right;{% endif %}
-  "
->
-  {% render 'rk-icon',
-    icon: block.settings.icon,
-    size: block.settings.size,
-    color: block.settings.color
-  %}
-</rk-icon-block>
-
-{% schema %}
-{
-  "name": "RK | Ícone",
-  "tag": null,
-  "settings": [
-    {
-      "type": "select",
-      "id": "icon",
-      "label": "Ícone",
-      "options": [
-        { "value": "heart", "label": "Coração" },
-        { "value": "star", "label": "Estrela" },
-        { "value": "truck", "label": "Caminhão" },
-        { "value": "lock", "label": "Cadeado" },
-        { "value": "return", "label": "Devolução" },
-        { "value": "chat_bubble", "label": "Chat" },
-        { "value": "fire", "label": "Fogo" },
-        { "value": "lightning_bolt", "label": "Raio" },
-        { "value": "leaf", "label": "Folha" },
-        { "value": "plant", "label": "Planta" },
-        { "value": "recycle", "label": "Reciclável" },
-        { "value": "snowflake", "label": "Floco de neve" },
-        { "value": "map_pin", "label": "Pin de mapa" },
-        { "value": "eye", "label": "Olho" },
-        { "value": "ruler", "label": "Régua" },
-        { "value": "price_tag", "label": "Etiqueta de preço" },
-        { "value": "question_mark", "label": "Interrogação" },
-        { "value": "error", "label": "Erro" },
-        { "value": "check_box", "label": "Checkbox" },
-        { "value": "clipboard", "label": "Clipboard" },
-        { "value": "plane", "label": "Avião" },
-        { "value": "stopwatch", "label": "Cronômetro" },
-        { "value": "silhouette", "label": "Perfil" }
-      ],
-      "default": "heart"
-    },
-    {
-      "type": "select",
-      "id": "size",
-      "label": "Tamanho",
-      "options": [
-        { "value": "sm", "label": "Pequeno (16px)" },
-        { "value": "md", "label": "Médio (20px)" },
-        { "value": "lg", "label": "Grande (24px)" },
-        { "value": "xl", "label": "Extra Grande (32px)" }
-      ],
-      "default": "md"
-    },
-    {
-      "type": "color",
-      "id": "color",
-      "label": "Cor"
-    },
-    {
-      "type": "text_alignment",
-      "id": "alignment",
-      "label": "Alinhamento",
-      "default": "left"
-    },
-    {
-      "type": "header",
-      "content": "Espaçamento"
-    },
-    {
-      "type": "range",
-      "id": "padding-block-start",
-      "label": "Topo",
-      "min": 0,
-      "max": 100,
-      "step": 2,
-      "unit": "px",
-      "default": 0
-    },
-    {
-      "type": "range",
-      "id": "padding-block-end",
-      "label": "Base",
-      "min": 0,
-      "max": 100,
-      "step": 2,
-      "unit": "px",
-      "default": 0
-    },
-    {
-      "type": "range",
-      "id": "padding-inline-start",
-      "label": "Esquerda",
-      "min": 0,
-      "max": 100,
-      "step": 2,
-      "unit": "px",
-      "default": 0
-    },
-    {
-      "type": "range",
-      "id": "padding-inline-end",
-      "label": "Direita",
-      "min": 0,
-      "max": 100,
-      "step": 2,
-      "unit": "px",
-      "default": 0
-    }
-  ],
-  "presets": [
-    {
-      "name": "RK | Ícone",
-      "category": "Rook UI"
-    }
-  ]
-}
-{% endschema %}