rook-cli 1.3.2 → 1.3.4

package/rook-framework/config/rk-settings_schema.json

@@ -0,0 +1,259 @@
+[
+    {
+        "name": "Rook UI — Cores",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Cores globais do Rook UI Core Framework. Essas cores são usadas por todos os componentes rk-*."
+            },
+            {
+                "type": "header",
+                "content": "Cores Primárias"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_primary",
+                "label": "Cor Primária",
+                "default": "#000000",
+                "info": "Cor principal dos botões, links e destaques."
+            },
+            {
+                "type": "color",
+                "id": "rk_color_primary_hover",
+                "label": "Cor Primária (Hover)",
+                "default": "#1a1a1a"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_primary_foreground",
+                "label": "Texto sobre Primária",
+                "default": "#ffffff",
+                "info": "Cor do texto quando o fundo é a cor primária."
+            },
+            {
+                "type": "header",
+                "content": "Cores Secundárias"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_secondary",
+                "label": "Cor Secundária",
+                "default": "#ffffff"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_secondary_hover",
+                "label": "Cor Secundária (Hover)",
+                "default": "#f5f5f5"
+            },
+            {
+                "type": "header",
+                "content": "Cores de Fundo"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_background",
+                "label": "Fundo da Página",
+                "default": "#ffffff",
+                "info": "Cor de fundo geral dos componentes do framework."
+            },
+            {
+                "type": "color",
+                "id": "rk_color_background_secondary",
+                "label": "Fundo Secundário",
+                "default": "#f5f5f5",
+                "info": "Usado em tabs, toggles, cards e áreas com destaque sutil."
+            },
+            {
+                "type": "header",
+                "content": "Cores Semânticas"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_success",
+                "label": "Cor de Sucesso",
+                "default": "#22c55e"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_danger",
+                "label": "Cor de Erro / Perigo",
+                "default": "#ef4444"
+            },
+            {
+                "type": "header",
+                "content": "Texto e Bordas"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_text",
+                "label": "Cor do Texto Base",
+                "default": "#1a1a1a"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_text_muted",
+                "label": "Cor do Texto Secundário",
+                "default": "#737373"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_border",
+                "label": "Cor da Borda",
+                "default": "#e5e5e5"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_ring",
+                "label": "Cor do Anel de Foco (Focus Ring)",
+                "default": "#0f172a",
+                "info": "Cor utilizada no outline de foco (acessibilidade)."
+            }
+        ]
+    },
+    {
+        "name": "Rook UI — Forma e Transição",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Controle de arredondamento (border-radius), espaçamentos e transições dos componentes rk-*."
+            },
+            {
+                "type": "header",
+                "content": "Arredondamento (Border Radius)"
+            },
+            {
+                "type": "range",
+                "id": "rk_border_radius",
+                "min": 0,
+                "max": 40,
+                "step": 2,
+                "unit": "px",
+                "label": "Arredondamento Padrão",
+                "default": 8,
+                "info": "Aplicado em botões, inputs, cards e a maioria dos componentes."
+            },
+            {
+                "type": "range",
+                "id": "rk_border_radius_sm",
+                "min": 0,
+                "max": 20,
+                "step": 1,
+                "unit": "px",
+                "label": "Arredondamento Pequeno",
+                "default": 4,
+                "info": "Usado em badges, itens de menu e elementos menores."
+            },
+            {
+                "type": "range",
+                "id": "rk_border_radius_lg",
+                "min": 0,
+                "max": 40,
+                "step": 2,
+                "unit": "px",
+                "label": "Arredondamento Grande",
+                "default": 12,
+                "info": "Usado em cards e containers maiores."
+            },
+            {
+                "type": "range",
+                "id": "rk_border_radius_pill",
+                "min": 0,
+                "max": 100,
+                "step": 2,
+                "unit": "px",
+                "label": "Arredondamento Pill",
+                "default": 50,
+                "info": "Formato pill/arredondado completo (scrollbar thumbs, badges pill, etc)."
+            },
+            {
+                "type": "header",
+                "content": "Transição"
+            },
+            {
+                "type": "range",
+                "id": "rk_transition_speed",
+                "min": 100,
+                "max": 800,
+                "step": 50,
+                "unit": "ms",
+                "label": "Velocidade da Transição",
+                "default": 300,
+                "info": "Controla a velocidade de hover, abertura de modals, drawers e outros efeitos."
+            }
+        ]
+    },
+    {
+        "name": "Rook UI — Parcelamento",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Configurações de cálculo de parcelamento exibidas pelos componentes rk-installments."
+            },
+            {
+                "type": "checkbox",
+                "id": "rk_installments_enabled",
+                "label": "Ativar Parcelamento",
+                "default": true
+            },
+            {
+                "type": "number",
+                "id": "rk_installments_max",
+                "label": "Quantidade Máxima de Parcelas",
+                "default": 12
+            },
+            {
+                "type": "number",
+                "id": "rk_installments_without_interest",
+                "label": "Quantidade de Parcelas Sem Juros",
+                "default": 3
+            },
+            {
+                "type": "text",
+                "id": "rk_installments_min_value",
+                "label": "Valor Mínimo da Parcela (em centavos)",
+                "info": "Ex: 500 para representar R$ 5,00",
+                "default": "500"
+            },
+            {
+                "type": "text",
+                "id": "rk_installments_interest_rate",
+                "label": "Taxa de Juros ao Mês (%)",
+                "info": "Ex: 2.99",
+                "default": "2.99"
+            }
+        ]
+    },
+    {
+        "name": "Rook UI — Pix",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Configurações de desconto Pix exibidas pelos componentes rk-pix-discount."
+            },
+            {
+                "type": "checkbox",
+                "id": "rk_pix_enabled",
+                "label": "Ativar Desconto Pix",
+                "default": true
+            },
+            {
+                "type": "range",
+                "id": "rk_pix_discount",
+                "min": 0,
+                "max": 30,
+                "step": 1,
+                "unit": "%",
+                "label": "Porcentagem de Desconto no Pix",
+                "default": 5
+            },
+            {
+                "type": "text",
+                "id": "rk_pix_label",
+                "label": "Texto do Pix",
+                "default": "no Pix",
+                "info": "Texto exibido ao lado do valor com desconto (ex: 'no Pix', 'via Pix')."
+            }
+        ]
+    }
+]

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

@@ -0,0 +1,31 @@
+{% doc %}
+  Snippet: RkAccordion
+  Renders a disclosure / accordion using <details> + Web Component.
+
+  @param {string} title - The accordion header text
+  @param {string} content - The content to show/hide (HTML safe)
+  @param {boolean} [open] - Whether it should start open
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-accordion', title: 'Descrição', content: product.description %}
+{% enddoc %}
+
+<rk-accordion-element>
+  <details
+    class="rk-accordion{% if custom_class %} {{ custom_class }}{% endif %}"
+    {% if open %}open{% endif %}
+  >
+    <summary class="rk-accordion__trigger">
+      <span>{{ title }}</span>
+      <span class="rk-accordion__icon" aria-hidden="true">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </span>
+    </summary>
+    <div class="rk-accordion__content">
+      {{ content }}
+    </div>
+  </details>
+</rk-accordion-element>

package/rook-framework/snippets/rk-alert-dialog.liquid

@@ -0,0 +1,83 @@
+{% doc %}
+  Snippet: RkAlertDialog
+  Renders an Alert Dialog for critical confirmations.
+  Uses Web Component <rk-alert-dialog-element> for behaviour.
+
+  Unlike the standard Modal, the Alert Dialog:
+  - Does NOT close on overlay click
+  - Focuses the Cancel button by default (safety)
+  - Uses role="alertdialog" for assistive technologies
+
+  @param {string} id - Unique alert dialog id
+  @param {string} title - Alert title (required)
+  @param {string} [description] - Explanatory text about consequences
+  @param {string} [cancel_text] - Cancel button text (default: 'Cancelar')
+  @param {string} [confirm_text] - Confirm button text (default: 'Confirmar')
+  @param {string} [confirm_style] - Confirm button rk-button style (default: 'primary')
+  @param {boolean} [esc_close] - Allow ESC key to close (default: true)
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-alert-dialog',
+    id: 'delete-account',
+    title: 'Você tem certeza absoluta?',
+    description: 'Esta ação não pode ser desfeita. Isso excluirá permanentemente sua conta.',
+    cancel_text: 'Cancelar',
+    confirm_text: 'Excluir Conta',
+    confirm_style: 'danger'
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign ad_cancel_text = cancel_text | default: 'Cancelar'
+  assign ad_confirm_text = confirm_text | default: 'Confirmar'
+  assign ad_confirm_style = confirm_style | default: 'primary'
+  assign ad_esc_close = esc_close | default: true
+-%}
+
+{%- capture title_id -%}{{ id }}-title{%- endcapture -%}
+{%- capture desc_id -%}{{ id }}-desc{%- endcapture -%}
+
+<rk-alert-dialog-element data-alert-dialog-id="{{ id }}" data-esc-close="{{ ad_esc_close }}">
+  <div
+    id="{{ id }}"
+    class="rk-alert-dialog{% if custom_class %} {{ custom_class }}{% endif %}"
+  >
+    {%- comment -%} Overlay (non-dismissable) {%- endcomment -%}
+    <div class="rk-alert-dialog__overlay"></div>
+
+    {%- comment -%} Content {%- endcomment -%}
+    <div
+      class="rk-alert-dialog__content"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="{{ title_id }}"
+      {% if description %}aria-describedby="{{ desc_id }}"{% endif %}
+    >
+      <div class="rk-alert-dialog__header">
+        <h2 id="{{ title_id }}" class="rk-alert-dialog__title">{{ title }}</h2>
+        {%- if description -%}
+          <p id="{{ desc_id }}" class="rk-alert-dialog__description">{{ description }}</p>
+        {%- endif -%}
+      </div>
+
+      <div class="rk-alert-dialog__footer">
+        <button
+          type="button"
+          class="rk-btn rk-btn--secondary rk-btn--md"
+          data-action="cancel"
+        >
+          <span class="rk-btn__text">{{ ad_cancel_text }}</span>
+        </button>
+
+        <button
+          type="button"
+          class="rk-btn rk-btn--{{ ad_confirm_style }} rk-btn--md"
+          data-action="confirm"
+        >
+          <span class="rk-btn__text">{{ ad_confirm_text }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</rk-alert-dialog-element>

package/rook-framework/snippets/rk-aspect-ratio.liquid

@@ -0,0 +1,23 @@
+{% doc %}
+  Snippet: RkAspectRatio
+  Um container utilitário que força uma proporção específica (aspect-ratio) no seu conteúdo.
+  Ideal para imagens, embeds, iframes e esqueletos de carregamento.
+
+  @param {string} content - O conteúdo html a ser encaixado (ex: tag img, iframe). Age como `asChild`.
+  @param {string} [ratio] - A proporção (ex: '16/9', '4/3', '1/1', '21/9'). Padrão: '16/9'
+  @param {string} [custom_class] - Classes CSS adicionais.
+
+  @example
+  {% capture media_img %}
+    <img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}">
+  {% endcapture %}
+  {% render 'rk-aspect-ratio', content: media_img, ratio: '1/1' %}
+{% enddoc %}
+
+{%- liquid
+  assign t_ratio = ratio | default: '16/9'
+-%}
+
+<div class="rk-aspect-ratio{% if custom_class %} {{ custom_class }}{% endif %}" style="aspect-ratio: {{ t_ratio }};">
+  {{ content }}
+</div>

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

@@ -0,0 +1,17 @@
+{% doc %}
+  Snippet: RkBadge
+  Renders a small label badge.
+
+  @param {string} text - Badge text
+  @param {string} [style] - 'primary' | 'success' | 'danger' | 'outline' (default: 'primary')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-badge', text: 'Novo', style: 'success' %}
+{% enddoc %}
+
+{%- assign badge_style = style | default: 'primary' -%}
+
+<span class="rk-badge rk-badge--{{ badge_style }}{% if custom_class %} {{ custom_class }}{% endif %}">
+  {{ text }}
+</span>

package/rook-framework/snippets/rk-bottom-app-bar.liquid

@@ -0,0 +1,51 @@
+{% doc %}
+  Snippet: RkBottomAppBar
+  Renders a Bottom App Bar (Menubar style) that fixes at the screen bottom.
+  Includes a Glassmorphism effect and Safe Area support.
+
+  @param {string} content - HTML content representing the buttons/links. MUST use `role="menuitem"` for JS keyboard tracking.
+  @param {string} [fab] - HTML content for a Floating Action Button in the center.
+  @param {string} [id] - Unique ID for the bar
+  @param {string} [alignment] - 'distributed' | 'grouped' (default: 'distributed')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture app_bar_items %}
+    <button role="menuitem" class="rk-bottom-app-bar__item">
+      <span>Home</span>
+    </button>
+    <button role="menuitem" class="rk-bottom-app-bar__item">
+      <span>Categorias</span>
+    </button>
+  {% endcapture %}
+
+  {% capture my_fab %}
+    <button role="menuitem" class="rk-bottom-app-bar__fab">🛒</button>
+  {% endcapture %}
+
+  {% render 'rk-bottom-app-bar', content: app_bar_items, fab: my_fab, alignment: 'grouped' %}
+{% enddoc %}
+
+{%- liquid
+  assign t_alignment = alignment | default: 'distributed'
+  assign t_id = id | default: 'rk-bottom-app-bar'
+-%}
+
+<rk-bottom-app-bar-element
+  id="{{ t_id }}"
+  class="rk-bottom-app-bar rk-bottom-app-bar--{{ t_alignment }}{% if custom_class %} {{ custom_class }}{% endif %}"
+  role="menubar"
+  aria-label="Bottom Navigation"
+>
+  {%- comment -%} Optional FAB that breaks the edge {%- endcomment -%}
+  {%- if fab -%}
+    <div class="rk-bottom-app-bar__fab-wrapper">
+      {{ fab }}
+    </div>
+  {%- endif -%}
+
+  {%- comment -%} Normal Items Row {%- endcomment -%}
+  <div class="rk-bottom-app-bar__row">
+    {{ content }}
+  </div>
+</rk-bottom-app-bar-element>

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

@@ -0,0 +1,49 @@
+{% doc %}
+  Snippet: RkButton
+  Renders a button or link with style variants.
+
+  @param {string} text - Button label text
+  @param {string} [url] - If set, renders as <a> instead of <button>
+  @param {string} [style] - 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' (default: 'primary')
+  @param {string} [size] - 'sm' | 'md' | 'lg' (default: 'md')
+  @param {string} [type] - Button type attribute ('button' | 'submit'), default: 'button'
+  @param {boolean} [disabled] - Disables the button
+  @param {boolean} [loading] - Shows spinner state
+  @param {boolean} [full_width] - Makes the button 100% width
+  @param {string} [icon] - Icon name to render before text
+  @param {string} [custom_class] - Extra CSS classes
+  @param {string} [attr] - Additional HTML attributes (e.g. data-*, aria-*)
+  @param {boolean} [open_in_new_tab] - Opens link in new tab
+
+  @example
+  {% render 'rk-button', text: 'Buy Now', style: 'primary', size: 'lg' %}
+  {% render 'rk-button', text: 'Learn More', url: '/about', style: 'outline' %}
+{% enddoc %}
+
+{%- liquid
+  assign tag = 'button'
+  if url != blank
+    assign tag = 'a'
+  endif
+
+  assign btn_style = style | default: 'primary'
+  assign btn_size = size | default: 'md'
+  assign btn_type = type | default: 'button'
+-%}
+
+<{{ tag }}
+  {% if tag == 'a' %}
+    href="{{ url }}"
+    {% if open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
+  {% else %}
+    type="{{ btn_type }}"
+    {% if disabled %}disabled{% endif %}
+  {% endif %}
+  class="rk-btn rk-btn--{{ btn_style }} rk-btn--{{ btn_size }}{% if full_width %} rk-btn--full{% endif %}{% if loading %} rk-btn--loading{% endif %}{% if disabled %} rk-btn--disabled{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {{ attr }}
+>
+  {%- if icon != blank -%}
+    <span class="rk-icon rk-icon--sm">{% render 'icon', icon: icon %}</span>
+  {%- endif -%}
+  <span class="rk-btn__text">{{ text }}</span>
+</{{ tag }}>

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

@@ -0,0 +1,64 @@
+{% doc %}
+  Snippet: RkCard
+  Container flexível para agrupar conteúdos e ações sobre um único tópico.
+
+  @param {string} [as] - Tag do container principal (ex: 'div', 'article', 'a'). Padrão: 'div'
+  @param {string} [href] - URL caso o card seja um link (exige as: 'a').
+  @param {boolean} [interactive] - Se true (ativo por padrão em links), adiciona efeito de hover e focus.
+  @param {string} [custom_class] - Classes CSS customizadas para o root.
+  @param {string} [header] - HTML para o cabeçalho (título/descrição).
+  @param {string} [content] - HTML para o corpo principal (dados/mídias).
+  @param {string} [footer] - HTML para o rodapé (ações/metadados).
+
+  @example
+  {% capture card_header %}
+    <h3 class="rk-card__title">Título do Card</h3>
+    <p class="rk-card__description">Descrição de apoio</p>
+  {% endcapture %}
+  
+  {% render 'rk-card', 
+    as: 'article', 
+    interactive: true, 
+    header: card_header, 
+    content: '<p>Corpo</p>', 
+    footer: '<button>Ação</button>' 
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_as = as | default: 'div'
+  assign is_link = false
+  
+  if t_as == 'a' and href != blank
+    assign is_link = true
+  endif
+
+  # Set interactive state
+  assign is_interactive = false
+  if interactive == true or interactive == 'true' or is_link
+    assign is_interactive = true
+  endif
+-%}
+
+<{{ t_as }}
+  class="rk-card{% if is_interactive %} rk-card--interactive{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {% if is_link %}href="{{ href }}"{% endif %}
+>
+  {%- if header != blank -%}
+    <div class="rk-card__header">
+      {{ header }}
+    </div>
+  {%- endif -%}
+
+  {%- if content != blank -%}
+    <div class="rk-card__content">
+      {{ content }}
+    </div>
+  {%- endif -%}
+
+  {%- if footer != blank -%}
+    <div class="rk-card__footer">
+      {{ footer }}
+    </div>
+  {%- endif -%}
+</{{ t_as }}>

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

@@ -0,0 +1,74 @@
+{% doc %}
+  Snippet: RkCarousel
+  Renders a powerful Slider/Carousel powered by Swiper.js.
+  The `<rk-carousel-element>` dynamically loads the library and handles init/destroy lifecycle.
+
+  @param {string} content - HTML content. MUST yield elements with class `swiper-slide`
+  @param {string} [id] - Unique ID
+  @param {string} [custom_class] - Extra CSS classes for the root wrapper
+  @param {boolean} [show_arrows] - Show previous/next buttons (default: true)
+  @param {boolean} [show_pagination] - Show bottom pagination dots (default: true)
+  @param {boolean} [loop] - Enable infinite loop
+  @param {boolean} [autoplay] - Enable automatic sliding
+  @param {number} [autoplay_delay] - Delay between slides in ms for autoplay (default: 3000)
+  @param {number} [gap] - Space between slides in pixels (default: 16)
+  @param {number} [desktop_items] - Slides to show on desktop >= 768px (default: 3)
+  @param {number} [mobile_items] - Slides to show on mobile < 768px (default: 1)
+  @param {boolean} [free_mode] - Free scroll mode instead of snap-to-slide
+  @param {string} [options_json] - Escaped JSON string for raw Swiper options override
+
+  @example
+  {% capture carousel_slides %}
+    <div class="swiper-slide rk-carousel__slide">Slide 1</div>
+    <div class="swiper-slide rk-carousel__slide">Slide 2</div>
+  {% endcapture %}
+  
+  {% render 'rk-carousel', 
+    content: carousel_slides, 
+    show_arrows: true, 
+    desktop_items: 4, 
+    loop: true 
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_show_arrows = show_arrows | default: true, allow_false: true
+  assign t_show_pagination = show_pagination | default: true, allow_false: true
+  assign t_loop = loop | default: false
+  assign t_autoplay = autoplay | default: false
+  assign t_gap = gap | default: 16
+  assign t_desktop_items = desktop_items | default: 3
+  assign t_mobile_items = mobile_items | default: 1
+-%}
+
+<rk-carousel-element
+  class="rk-carousel{% if custom_class %} {{ custom_class }}{% endif %}"
+  {% if id %}id="{{ id }}"{% endif %}
+  data-gap="{{ t_gap }}"
+  data-desktop-items="{{ t_desktop_items }}"
+  data-mobile-items="{{ t_mobile_items }}"
+  {% if t_loop %}data-loop="true"{% endif %}
+  {% if free_mode %}data-free-mode="true"{% endif %}
+  {% if t_autoplay %}
+    data-autoplay="true"
+    {% if autoplay_delay %}data-autoplay-delay="{{ autoplay_delay }}"{% endif %}
+  {% endif %}
+  {% if options_json %}data-swiper-options="{{ options_json | escape }}"{% endif %}
+>
+  <div class="swiper rk-carousel__swiper">
+    <div class="swiper-wrapper rk-carousel__wrapper">
+      {{ content }}
+    </div>
+
+    {%- if t_show_arrows -%}
+      <div class="swiper-button-prev rk-carousel__nav rk-carousel__nav--prev"></div>
+      <div class="swiper-button-next rk-carousel__nav rk-carousel__nav--next"></div>
+    {%- endif -%}
+
+    {%- if t_show_pagination -%}
+      <div class="rk-carousel__pagination-wrapper">
+        <div class="swiper-pagination rk-carousel__pagination"></div>
+      </div>
+    {%- endif -%}
+  </div>
+</rk-carousel-element>