rook-cli 1.3.2 → 1.3.4

package/rook-framework/assets/rk-toggle.js

@@ -0,0 +1,153 @@
+/* ==========================================================================
+   Rook UI Core — Toggle & Toggle Group Controllers
+   Web Components: <rk-toggle-element> & <rk-toggle-group>
+   ========================================================================== */
+
+if (!customElements.get('rk-toggle-element')) {
+    class RkToggleElement extends HTMLElement {
+        constructor() {
+            super();
+            this.button = null;
+            this._onClick = this._onClick.bind(this);
+            this._onKeyDown = this._onKeyDown.bind(this);
+        }
+
+        connectedCallback() {
+            this.button = this.querySelector('button');
+            if (!this.button) return;
+
+            // Ensure pressed state is properly set initially
+            if (!this.button.hasAttribute('aria-pressed')) {
+                this.button.setAttribute('aria-pressed', 'false');
+            }
+
+            this.button.addEventListener('click', this._onClick);
+            this.button.addEventListener('keydown', this._onKeyDown);
+        }
+
+        disconnectedCallback() {
+            if (this.button) {
+                this.button.removeEventListener('click', this._onClick);
+                this.button.removeEventListener('keydown', this._onKeyDown);
+            }
+        }
+
+        get isPressed() {
+            return this.button?.getAttribute('aria-pressed') === 'true';
+        }
+
+        setPressed(value) {
+            if (!this.button || this.button.disabled) return;
+
+            const state = value ? 'true' : 'false';
+            this.button.setAttribute('aria-pressed', state);
+
+            if (value) {
+                this.button.classList.add('rk-toggle--on');
+                this.button.classList.remove('rk-toggle--off');
+            } else {
+                this.button.classList.add('rk-toggle--off');
+                this.button.classList.remove('rk-toggle--on');
+            }
+
+            this.dispatchEvent(new CustomEvent('rk:toggle:change', {
+                bubbles: true,
+                detail: { pressed: value, value: this.dataset.value }
+            }));
+        }
+
+        toggle() {
+            this.setPressed(!this.isPressed);
+        }
+
+        _onClick(e) {
+            // If it's part of a group, let the group manage the selection logic
+            const group = this.closest('rk-toggle-group');
+            if (!group) {
+                this.toggle();
+            }
+        }
+
+        _onKeyDown(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.button.click();
+            }
+        }
+    }
+
+    customElements.define('rk-toggle-element', RkToggleElement);
+}
+
+if (!customElements.get('rk-toggle-group')) {
+    class RkToggleGroup extends HTMLElement {
+        constructor() {
+            super();
+            this.type = this.dataset.type || 'single'; // 'single' or 'multiple'
+        }
+
+        connectedCallback() {
+            this.addEventListener('rk:toggle:change', this._onToggleChange.bind(this));
+
+            // Set initial role
+            if (!this.hasAttribute('role')) {
+                this.setAttribute('role', 'group');
+            }
+        }
+
+        get toggles() {
+            return Array.from(this.querySelectorAll('rk-toggle-element'));
+        }
+
+        _onToggleChange(e) {
+            e.stopPropagation(); // Stop the pure toggle event
+
+            const clickedToggle = e.target;
+            const isNowPressed = clickedToggle.isPressed;
+
+            // Revert the pure toggle action first, because group manages it
+            clickedToggle.setPressed(!isNowPressed);
+
+            if (this.type === 'single') {
+                this._handleSingle(clickedToggle);
+            } else {
+                this._handleMultiple(clickedToggle);
+            }
+        }
+
+        _handleSingle(toggle) {
+            const wasPressed = toggle.isPressed;
+
+            // Unpress all
+            this.toggles.forEach(t => t.setPressed(false));
+
+            // If it wasn't pressed before, press it now. If it was, let it stay unpressed (can unselect).
+            if (!wasPressed) {
+                toggle.setPressed(true);
+            }
+
+            this._emitChange();
+        }
+
+        _handleMultiple(toggle) {
+            // Just toggle the current one natively
+            toggle.setPressed(!toggle.isPressed);
+            this._emitChange();
+        }
+
+        _emitChange() {
+            const selected = this.toggles
+                .filter(t => t.isPressed)
+                .map(t => t.dataset.value);
+
+            let value = this.type === 'single' ? (selected[0] || null) : selected;
+
+            this.dispatchEvent(new CustomEvent('rk:toggle-group:change', {
+                bubbles: true,
+                detail: { value }
+            }));
+        }
+    }
+
+    customElements.define('rk-toggle-group', RkToggleGroup);
+}

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

@@ -0,0 +1,97 @@
+{% comment %}
+  Block: RK Accordion
+  Renders a rk-accordion disclosure item.
+  Uses rk-spacing-style for Horizon-compatible spacing.
+{% endcomment %}
+
+<rk-accordion-block
+  id="block-{{ block.id }}"
+  {{ block.shopify_attributes }}
+  class="rk-block rk-spacing-style"
+  style="
+    {% render 'rk-spacing-style', settings: block.settings %}
+  "
+>
+  {% render 'rk-accordion',
+    title: block.settings.title,
+    content: block.settings.content,
+    open: block.settings.open
+  %}
+</rk-accordion-block>
+
+{% schema %}
+{
+  "name": "RK | Accordion",
+  "tag": null,
+  "settings": [
+    {
+      "type": "text",
+      "id": "title",
+      "label": "Título",
+      "default": "Pergunta ou título"
+    },
+    {
+      "type": "richtext",
+      "id": "content",
+      "label": "Conteúdo",
+      "default": "<p>Resposta ou conteúdo do accordion.</p>"
+    },
+    {
+      "type": "checkbox",
+      "id": "open",
+      "label": "Iniciar aberto",
+      "default": false
+    },
+    {
+      "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 | Accordion",
+      "category": "Rook UI"
+    }
+  ]
+}
+{% endschema %}

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

@@ -0,0 +1,103 @@
+{% comment %}
+  Block: RK Badge
+  Renders a rk-badge label.
+  Uses rk-spacing-style for Horizon-compatible spacing.
+{% endcomment %}
+
+<rk-badge-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-badge',
+    text: block.settings.text,
+    style: block.settings.style
+  %}
+</rk-badge-block>
+
+{% schema %}
+{
+  "name": "RK | Badge",
+  "tag": null,
+  "settings": [
+    {
+      "type": "text",
+      "id": "text",
+      "label": "Texto do badge",
+      "default": "Novo"
+    },
+    {
+      "type": "select",
+      "id": "style",
+      "label": "Estilo",
+      "options": [
+        { "value": "primary", "label": "Primário" },
+        { "value": "success", "label": "Sucesso (verde)" },
+        { "value": "danger", "label": "Alerta (vermelho)" },
+        { "value": "outline", "label": "Outline" }
+      ],
+      "default": "primary"
+    },
+    {
+      "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 | Badge",
+      "category": "Rook UI"
+    }
+  ]
+}
+{% endschema %}

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

@@ -0,0 +1,166 @@
+{% 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-divider.liquid

@@ -0,0 +1,100 @@
+{% comment %}
+  Block: RK Divider
+  Renders a rk-divider separator.
+  Uses rk-spacing-style for Horizon-compatible spacing.
+{% endcomment %}
+
+<rk-divider-block
+  id="block-{{ block.id }}"
+  {{ block.shopify_attributes }}
+  class="rk-block rk-spacing-style"
+  style="
+    {% render 'rk-spacing-style', settings: block.settings %}
+  "
+>
+  {% render 'rk-divider',
+    thickness: block.settings.thickness,
+    width: block.settings.width
+  %}
+</rk-divider-block>
+
+{% schema %}
+{
+  "name": "RK | Divisor",
+  "tag": null,
+  "settings": [
+    {
+      "type": "range",
+      "id": "thickness",
+      "label": "Espessura",
+      "min": 1,
+      "max": 8,
+      "step": 1,
+      "unit": "px",
+      "default": 1
+    },
+    {
+      "type": "select",
+      "id": "width",
+      "label": "Largura",
+      "options": [
+        { "value": "25%", "label": "25%" },
+        { "value": "50%", "label": "50%" },
+        { "value": "75%", "label": "75%" },
+        { "value": "100%", "label": "100%" }
+      ],
+      "default": "100%"
+    },
+    {
+      "type": "header",
+      "content": "Espaçamento"
+    },
+    {
+      "type": "range",
+      "id": "padding-block-start",
+      "label": "Topo",
+      "min": 0,
+      "max": 100,
+      "step": 2,
+      "unit": "px",
+      "default": 8
+    },
+    {
+      "type": "range",
+      "id": "padding-block-end",
+      "label": "Base",
+      "min": 0,
+      "max": 100,
+      "step": 2,
+      "unit": "px",
+      "default": 8
+    },
+    {
+      "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 | Divisor",
+      "category": "Rook UI"
+    }
+  ]
+}
+{% endschema %}