rook-cli 1.3.2 → 1.3.5

package/rook-framework/assets/rk-framework-tokens.css

@@ -0,0 +1,101 @@
+/* ==========================================================================
+   Rook UI Core Framework — Design Tokens (Estáticos)
+   ====================================================================
+   Este arquivo contém APENAS tokens estáticos que NÃO dependem de
+   settings do tema Shopify. Os valores dinâmicos (cores, border-radius,
+   transition-speed) são gerados pelo snippet rk-variables.liquid via
+   a tag {% style %}, garantindo compatibilidade total com a Shopify.
+
+   Ordem de carregamento no layout/theme.liquid:
+     1. {% render 'rk-variables' %}           ← CSS vars dinâmicas (Liquid)
+     2. {{ 'rk-framework-tokens.css' | ... }} ← Este arquivo (estáticos)
+     3. {{ 'rk-framework-core.css' | ... }}   ← Estilos BEM dos componentes
+   ========================================================================== */
+
+:root {
+
+    /* ================================================================
+       SPACING SCALE (fixo, não vem do schema)
+       ================================================================ */
+    --rk-space-2xs: 4px;
+    --rk-space-xs: 8px;
+    --rk-space-sm: 12px;
+    --rk-space-md: 16px;
+    --rk-space-lg: 24px;
+    --rk-space-xl: 32px;
+    --rk-space-2xl: 48px;
+
+    /* ================================================================
+       RESPONSIVE SCALING FACTORS
+       Usados por rk-spacing-style e rk-gap-style para reduzir
+       espaçamentos automaticamente em viewports menores.
+       ================================================================ */
+    --rk-spacing-scale: 1;
+    --rk-gap-scale: 1;
+
+    /* ================================================================
+       TYPOGRAPHY SCALE
+       ================================================================ */
+    --rk-font-size-xs: 0.75rem;    /* 12px */
+    --rk-font-size-sm: 0.875rem;   /* 14px */
+    --rk-font-size-md: 1rem;       /* 16px */
+    --rk-font-size-lg: 1.125rem;   /* 18px */
+    --rk-font-size-xl: 1.25rem;    /* 20px */
+    --rk-font-size-2xl: 1.5rem;    /* 24px */
+    --rk-font-size-3xl: 1.875rem;  /* 30px */
+    --rk-font-size-4xl: 2.25rem;   /* 36px */
+
+    /* ================================================================
+       LINE HEIGHT
+       ================================================================ */
+    --rk-line-height-none: 1;
+    --rk-line-height-tight: 1.25;
+    --rk-line-height-normal: 1.5;
+    --rk-line-height-relaxed: 1.625;
+    --rk-line-height-loose: 2;
+
+    /* ================================================================
+       BUTTON SIZING
+       ================================================================ */
+    --rk-btn-padding-sm: 8px 16px;
+    --rk-btn-padding-md: 12px 24px;
+    --rk-btn-padding-lg: 16px 32px;
+    --rk-btn-font-sm: var(--rk-font-size-sm);
+    --rk-btn-font-md: var(--rk-font-size-md);
+    --rk-btn-font-lg: var(--rk-font-size-lg);
+
+    /* ================================================================
+       Z-INDEX LAYERS
+       ================================================================ */
+    --rk-layer-base: 1;
+    --rk-layer-raised: 10;
+    --rk-layer-overlay: 100;
+    --rk-layer-popover: 500;
+    --rk-layer-drawer: 900;
+    --rk-layer-modal: 1000;
+    --rk-layer-alert: 1100;
+
+    /* ================================================================
+       OPACITY
+       ================================================================ */
+    --rk-opacity-disabled: 0.5;
+    --rk-opacity-muted: 0.7;
+}
+
+/* ==========================================================================
+   RESPONSIVE SCALING
+   Reduz espaçamentos e gaps automaticamente em viewports menores.
+   ========================================================================== */
+@media (max-width: 989px) {
+    :root {
+        --rk-spacing-scale: 0.85;
+        --rk-gap-scale: 0.85;
+    }
+}
+
+@media (max-width: 749px) {
+    :root {
+        --rk-spacing-scale: 0.7;
+        --rk-gap-scale: 0.7;
+    }
+}

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

@@ -0,0 +1,91 @@
+/* ==========================================================================
+   Rook UI Core — Modal Controller
+   Web Component: <rk-modal-element>
+   ========================================================================== */
+
+if (!customElements.get('rk-modal-element')) {
+    class RkModalElement extends HTMLElement {
+        constructor() {
+            super();
+            this.modal = null;
+            this.focusableElements = [];
+            this.previousFocus = null;
+        }
+
+        connectedCallback() {
+            this.modal = this.querySelector('.rk-modal');
+            if (!this.modal) return;
+
+            this.bindEvents();
+            this.setupOpenTriggers();
+        }
+
+        bindEvents() {
+            // Close buttons (overlay & X)
+            this.querySelectorAll('[data-action="close"]').forEach((el) => {
+                el.addEventListener('click', () => this.close());
+            });
+
+            // ESC key
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && this.isOpen()) {
+                    this.close();
+                }
+            });
+        }
+
+        setupOpenTriggers() {
+            const modalId = this.dataset.modalId || this.modal?.id;
+            if (!modalId) return;
+
+            document.querySelectorAll(`[data-modal-open="${modalId}"]`).forEach((trigger) => {
+                trigger.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.open();
+                });
+            });
+        }
+
+        isOpen() {
+            return this.modal?.classList.contains('rk-modal--active');
+        }
+
+        open() {
+            if (!this.modal) return;
+
+            this.previousFocus = document.activeElement;
+            this.modal.classList.add('rk-modal--active');
+            document.body.style.overflow = 'hidden';
+
+            // Trap focus
+            this.focusableElements = this.modal.querySelectorAll(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+
+            if (this.focusableElements.length > 0) {
+                this.focusableElements[0].focus();
+            }
+
+            this.dispatchEvent(
+                new CustomEvent('rk:modal:open', { bubbles: true, detail: { id: this.modal.id } })
+            );
+        }
+
+        close() {
+            if (!this.modal) return;
+
+            this.modal.classList.remove('rk-modal--active');
+            document.body.style.overflow = '';
+
+            if (this.previousFocus) {
+                this.previousFocus.focus();
+            }
+
+            this.dispatchEvent(
+                new CustomEvent('rk:modal:close', { bubbles: true, detail: { id: this.modal.id } })
+            );
+        }
+    }
+
+    customElements.define('rk-modal-element', RkModalElement);
+}

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

@@ -0,0 +1,264 @@
+/* ==========================================================================
+   Rook UI Core — Popover Controller
+   Web Component: <rk-popover-element>
+   ========================================================================== */
+
+if (!customElements.get('rk-popover-element')) {
+    class RkPopoverElement extends HTMLElement {
+        constructor() {
+            super();
+            this.trigger = null;
+            this.content = null;
+            this.previousFocus = null;
+            this._onClickOutside = this._onClickOutside.bind(this);
+            this._onKeyDown = this._onKeyDown.bind(this);
+            this._onResize = this._debounce(this._reposition.bind(this), 100);
+        }
+
+        connectedCallback() {
+            this.trigger = this.querySelector('[data-rk-popover-trigger]');
+            this.content = this.querySelector('.rk-popover__content');
+
+            if (!this.trigger || !this.content) return;
+
+            this.trigger.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggle();
+            });
+
+            // Ensure trigger has a11y attributes
+            this.trigger.setAttribute('aria-haspopup', 'dialog');
+            this.trigger.setAttribute('aria-expanded', 'false');
+
+            // Link trigger to content
+            const contentId = this.content.id || `rk-popover-${this._uid()}`;
+            this.content.id = contentId;
+            this.trigger.setAttribute('aria-controls', contentId);
+        }
+
+        disconnectedCallback() {
+            this._removeGlobalListeners();
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+
+        toggle() {
+            this.isOpen() ? this.close() : this.open();
+        }
+
+        isOpen() {
+            return this.content?.classList.contains('rk-popover__content--active');
+        }
+
+        open() {
+            if (!this.content || this.isOpen()) return;
+
+            this.previousFocus = document.activeElement;
+            this.content.classList.add('rk-popover__content--active');
+            this.trigger?.setAttribute('aria-expanded', 'true');
+
+            this._reposition();
+            this._addGlobalListeners();
+
+            // Trap focus — focus first interactive element inside
+            requestAnimationFrame(() => {
+                const firstFocusable = this.content.querySelector(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                );
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                }
+            });
+
+            this.dispatchEvent(
+                new CustomEvent('rk:popover:open', { bubbles: true, detail: { id: this.content.id } })
+            );
+        }
+
+        close() {
+            if (!this.content || !this.isOpen()) return;
+
+            this.content.classList.remove('rk-popover__content--active');
+            this.trigger?.setAttribute('aria-expanded', 'false');
+
+            this._removeGlobalListeners();
+
+            // Restore focus
+            if (this.previousFocus) {
+                this.previousFocus.focus();
+                this.previousFocus = null;
+            }
+
+            this.dispatchEvent(
+                new CustomEvent('rk:popover:close', { bubbles: true, detail: { id: this.content.id } })
+            );
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Positioning Engine                                                */
+        /* ------------------------------------------------------------------ */
+
+        _reposition() {
+            if (!this.trigger || !this.content || !this.isOpen()) return;
+
+            const preferredSide = this.dataset.side || 'bottom';
+            const align = this.dataset.align || 'center';
+            const sideOffset = parseInt(this.dataset.sideOffset, 10) || 8;
+            const alignOffset = parseInt(this.dataset.alignOffset, 10) || 0;
+
+            const triggerRect = this.trigger.getBoundingClientRect();
+            const contentRect = this.content.getBoundingClientRect();
+            const viewportW = window.innerWidth;
+            const viewportH = window.innerHeight;
+
+            // Determine actual side (with collision detection / auto-flip)
+            const side = this._resolveSide(preferredSide, triggerRect, contentRect, viewportW, viewportH, sideOffset);
+
+            let top = 0;
+            let left = 0;
+
+            // 1. Calculate position on the main axis (side)
+            switch (side) {
+                case 'top':
+                    top = -(contentRect.height + sideOffset);
+                    break;
+                case 'bottom':
+                    top = triggerRect.height + sideOffset;
+                    break;
+                case 'left':
+                    left = -(contentRect.width + sideOffset);
+                    break;
+                case 'right':
+                    left = triggerRect.width + sideOffset;
+                    break;
+            }
+
+            // 2. Calculate position on the cross axis (align)
+            if (side === 'top' || side === 'bottom') {
+                switch (align) {
+                    case 'start':
+                        left = alignOffset;
+                        break;
+                    case 'center':
+                        left = (triggerRect.width - contentRect.width) / 2 + alignOffset;
+                        break;
+                    case 'end':
+                        left = triggerRect.width - contentRect.width + alignOffset;
+                        break;
+                }
+            } else {
+                switch (align) {
+                    case 'start':
+                        top = alignOffset;
+                        break;
+                    case 'center':
+                        top = (triggerRect.height - contentRect.height) / 2 + alignOffset;
+                        break;
+                    case 'end':
+                        top = triggerRect.height - contentRect.height + alignOffset;
+                        break;
+                }
+            }
+
+            // 3. Clamp to viewport edges (prevent overflow)
+            const absLeft = triggerRect.left + left;
+            const absTop = triggerRect.top + top;
+
+            if (absLeft < 8) {
+                left += (8 - absLeft);
+            } else if (absLeft + contentRect.width > viewportW - 8) {
+                left -= (absLeft + contentRect.width - viewportW + 8);
+            }
+
+            if (absTop < 8) {
+                top += (8 - absTop);
+            } else if (absTop + contentRect.height > viewportH - 8) {
+                top -= (absTop + contentRect.height - viewportH + 8);
+            }
+
+            this.content.style.top = `${top}px`;
+            this.content.style.left = `${left}px`;
+
+            // Set data-side for arrow / animation CSS
+            this.content.dataset.side = side;
+        }
+
+        _resolveSide(preferred, triggerRect, contentRect, vw, vh, offset) {
+            const space = {
+                top: triggerRect.top - offset,
+                bottom: vh - triggerRect.bottom - offset,
+                left: triggerRect.left - offset,
+                right: vw - triggerRect.right - offset,
+            };
+
+            const fits = {
+                top: space.top >= contentRect.height,
+                bottom: space.bottom >= contentRect.height,
+                left: space.left >= contentRect.width,
+                right: space.right >= contentRect.width,
+            };
+
+            if (fits[preferred]) return preferred;
+
+            // Flip to opposite side
+            const opposite = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
+            if (fits[opposite[preferred]]) return opposite[preferred];
+
+            // Fallback: pick side with most space
+            const sorted = Object.entries(space).sort((a, b) => b[1] - a[1]);
+            return sorted[0][0];
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Global Listeners                                                  */
+        /* ------------------------------------------------------------------ */
+
+        _addGlobalListeners() {
+            document.addEventListener('click', this._onClickOutside, true);
+            document.addEventListener('keydown', this._onKeyDown);
+            window.addEventListener('resize', this._onResize);
+            window.addEventListener('scroll', this._onResize, true);
+        }
+
+        _removeGlobalListeners() {
+            document.removeEventListener('click', this._onClickOutside, true);
+            document.removeEventListener('keydown', this._onKeyDown);
+            window.removeEventListener('resize', this._onResize);
+            window.removeEventListener('scroll', this._onResize, true);
+        }
+
+        _onClickOutside(e) {
+            if (!this.contains(e.target)) {
+                this.close();
+            }
+        }
+
+        _onKeyDown(e) {
+            if (e.key === 'Escape' && this.isOpen()) {
+                e.preventDefault();
+                this.close();
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Helpers                                                           */
+        /* ------------------------------------------------------------------ */
+
+        _uid() {
+            return Math.random().toString(36).substring(2, 9);
+        }
+
+        _debounce(fn, delay) {
+            let timer;
+            return (...args) => {
+                clearTimeout(timer);
+                timer = setTimeout(() => fn(...args), delay);
+            };
+        }
+    }
+
+    customElements.define('rk-popover-element', RkPopoverElement);
+}

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

@@ -0,0 +1,81 @@
+/* ==========================================================================
+   Rook UI Core — Progress Controller
+   Web Component: <rk-progress-element>
+   ========================================================================== */
+
+if (!customElements.get('rk-progress-element')) {
+    class RkProgressElement extends HTMLElement {
+        constructor() {
+            super();
+            this.indicator = null;
+        }
+
+        connectedCallback() {
+            this.indicator = this.querySelector('.rk-progress__indicator');
+            if (!this.indicator) return;
+
+            // Initialize position
+            this._updateIndicator();
+
+            // Observe data attribute changes for reactive updates
+            this.observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.type === 'attributes' &&
+                        (mutation.attributeName === 'data-value' || mutation.attributeName === 'data-max')) {
+                        this._updateIndicator();
+                    }
+                });
+            });
+
+            this.observer.observe(this, { attributes: true });
+        }
+
+        disconnectedCallback() {
+            if (this.observer) {
+                this.observer.disconnect();
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+
+        get value() {
+            const val = parseFloat(this.getAttribute('data-value'));
+            return isNaN(val) ? 0 : val;
+        }
+
+        set value(val) {
+            this.setAttribute('data-value', val);
+        }
+
+        get max() {
+            const m = parseFloat(this.getAttribute('data-max'));
+            return (isNaN(m) || m <= 0) ? 100 : m;
+        }
+
+        set max(m) {
+            this.setAttribute('data-max', m);
+        }
+
+        _updateIndicator() {
+            let percentage = (this.value / this.max) * 100;
+
+            // Clamp between 0 and 100
+            percentage = Math.max(0, Math.min(100, percentage));
+
+            // Update ARIA 
+            const progressBar = this.querySelector('[role="progressbar"]');
+            if (progressBar) {
+                progressBar.setAttribute('aria-valuenow', this.value);
+                progressBar.setAttribute('aria-valuemax', this.max);
+            }
+
+            // Animate using transform (hardware accelerated)
+            // By default, it's translated to -100%. We calculate how much to translate back towards 0%.
+            this.indicator.style.transform = `translateX(-${100 - percentage}%)`;
+        }
+    }
+
+    customElements.define('rk-progress-element', RkProgressElement);
+}

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

@@ -0,0 +1,91 @@
+/* ==========================================================================
+   Rook UI Core — Quantity Selector Controller
+   Web Component: <rk-quantity-selector>
+   ========================================================================== */
+
+if (!customElements.get('rk-quantity-selector')) {
+    class RkQuantitySelector extends HTMLElement {
+        constructor() {
+            super();
+            this.input = null;
+            this.btnMinus = null;
+            this.btnPlus = null;
+        }
+
+        connectedCallback() {
+            this.input = this.querySelector('.rk-quantity__input');
+            this.btnMinus = this.querySelector('[data-type="minus"]');
+            this.btnPlus = this.querySelector('[data-type="plus"]');
+
+            if (!this.input) return;
+
+            this.bindEvents();
+            this.updateButtons();
+        }
+
+        bindEvents() {
+            this.btnMinus?.addEventListener('click', () => this.step(-1));
+            this.btnPlus?.addEventListener('click', () => this.step(1));
+
+            this.input.addEventListener('change', () => {
+                this.clampValue();
+                this.updateButtons();
+                this.dispatchChange();
+            });
+
+            // Prevent non-numeric input
+            this.input.addEventListener('keydown', (e) => {
+                if (['e', 'E', '+', '-', '.', ','].includes(e.key)) {
+                    e.preventDefault();
+                }
+            });
+        }
+
+        step(direction) {
+            const stepValue = parseInt(this.input.step) || 1;
+            const current = parseInt(this.input.value) || 1;
+            const newValue = current + (stepValue * direction);
+
+            this.input.value = newValue;
+            this.clampValue();
+            this.updateButtons();
+            this.dispatchChange();
+        }
+
+        clampValue() {
+            const min = parseInt(this.input.min) || 1;
+            const max = this.input.max ? parseInt(this.input.max) : Infinity;
+            let value = parseInt(this.input.value) || min;
+
+            value = Math.max(min, Math.min(max, value));
+            this.input.value = value;
+        }
+
+        updateButtons() {
+            const value = parseInt(this.input.value) || 1;
+            const min = parseInt(this.input.min) || 1;
+            const max = this.input.max ? parseInt(this.input.max) : Infinity;
+
+            if (this.btnMinus) {
+                this.btnMinus.disabled = value <= min;
+            }
+            if (this.btnPlus) {
+                this.btnPlus.disabled = value >= max;
+            }
+        }
+
+        dispatchChange() {
+            this.dispatchEvent(
+                new CustomEvent('rk:quantity:change', {
+                    bubbles: true,
+                    detail: {
+                        value: parseInt(this.input.value),
+                        name: this.input.name,
+                    },
+                })
+            );
+        }
+    }
+
+    customElements.define('rk-quantity-selector', RkQuantitySelector);
+}