spoko-design-system 0.4.1 → 0.4.3

package/icon.config.ts

@@ -258,7 +258,7 @@ export const iconConfig: IconConfig = {
   }
 };
 
-// Pomocnicze funkcje
+// Helpers
 export function isIconIncluded(collection: IconCollectionName, iconName: string): boolean {
   return iconConfig.include[collection]?.includes(iconName) ?? false;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -74,7 +74,6 @@
     "@iconify/vue": "^4.3.0",
     "@playform/compress": "^0.1.7",
     "@playform/inline": "^0.1.1",
-    "@types/node": "^22.13.4",
     "@unocss/astro": "^65.4.3",
     "@unocss/preset-attributify": "^65.4.3",
     "@unocss/preset-typography": "^65.4.3",
@@ -98,7 +97,6 @@
     "i18next-vue": "^5.1.0",
     "swiper": "^11.2.3",
     "unocss": "^65.4.3",
-    "vite": "^6.1.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
@@ -106,14 +104,21 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/compiler-sfc": "^3.5.13",
     "astro": "^5.3.0",
-    "unocss": "^0.65.0"
+    "unocss": "^0.65.0",
+    "@types/gtag.js": "^0.0.20",
+    "vite": "^6.1.0",
+    "@types/node": "^22.13.4"
   },
   "packageManager": "pnpm@9.15.3",
   "pnpm": {
-    "default": "8.15.2",
+    "default": "9.15.3",
     "overrides": {
       "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
       "sharp@<0.30.5": ">=0.30.5"
     }
+  },
+  "engines": {
+    "node": ">=18.14.1",
+    "pnpm": ">=9.15.3"
   }
 }

package/src/components/ButtonCopy.astro

@@ -14,7 +14,7 @@ const {
   texts 
 } = Astro.props;
 
-// Move SVG definition to a constant to avoid recomputing
+// SVG icon as data URL for mask
 const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
   `<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' d='M184 66H40a6 6 0 0 0-6 6v144a6 6 0 0 0 6 6h144a6 6 0 0 0 6-6V72a6 6 0 0 0-6-6m-6 144H46V78h132Zm44-170v144a6 6 0 0 1-12 0V46H72a6 6 0 0 1 0-12h144a6 6 0 0 1 6 6'/></svg>`
 )}")`;
@@ -24,6 +24,7 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
   aria-label={texts.copy} 
   class="btn-copy has-tooltip" 
   data-copy-text={productNumber}
+  data-category={Astro.url.pathname.split('/')[1] || ''}
 >
   <span 
     class:list={["tooltip rounded-full btn-copy-text", tooltipClasses]}
@@ -35,7 +36,8 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
 
 <script>
   class ClipboardButton {
-    private static COPY_TIMEOUT = 2000;
+    private static readonly COPY_TIMEOUT = 2000;
+    private static readonly ANALYTICS_EVENT = 'product_code_copy';
 
     constructor(private button: HTMLButtonElement) {
       this.init();
@@ -53,6 +55,10 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
       return this.button.dataset.copyText || '';
     }
 
+    private get category(): string {
+      return this.button.dataset.category || '';
+    }
+
     private get originalText(): string {
       return this.tooltip.dataset.text || 'Copy';
     }
@@ -65,11 +71,24 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
       try {
         await this.copyToClipboard();
         this.updateTooltip();
+        this.trackCopy();
       } catch (err) {
         console.error('Failed to copy text:', err);
       }
     }
 
+    private trackCopy(): void {
+      if (!window.dataLayer) return;
+
+      window.dataLayer.push({
+        event: ClipboardButton.ANALYTICS_EVENT,
+        productCode: this.copyText,
+        category: this.category,
+        pageUrl: window.location.pathname,
+        timestamp: new Date().toISOString()
+      });
+    }
+
     private async copyToClipboard(): Promise<void> {
       if (navigator.clipboard && window.isSecureContext) {
         await navigator.clipboard.writeText(this.copyText);
@@ -104,7 +123,7 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
     }
   }
 
-  // Use a single event listener with event delegation
+  // Initialize copy buttons on page load
   document.addEventListener('astro:page-load', () => {
     document.querySelectorAll('.btn-copy').forEach(button => {
       if (button instanceof HTMLButtonElement) {

package/src/components/Category/CategoryDetails.astro

@@ -23,26 +23,30 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   transition:name="category-details"
   transition:animate="fade"
 >
-  <CategorySidebarToggler onclick="toggleSidebar()">
-    <!-- Desktop expanded -->
+<CategorySidebarToggler class="category-sidebar-toggler w-12 md:w-8" data-state="desktop">
+  <div class="desktop-icons hidden md:block">
+    <!-- Desktop icons container -->
     <Icon 
       name="ant-design:menu-fold-outlined" 
-      class="toggler-btn md:[&:not(.hidden)]:block" 
+      class="toggler-btn w-6 expanded-icon" 
       aria-hidden="true"
     />
-    <!-- Desktop collapsed -->
     <Icon 
       name="ant-design:menu-unfold-outlined" 
-      class="toggler-btn hidden md:[&:not(.hidden)]:block" 
+      class="toggler-btn w-6 collapsed-icon hidden" 
       aria-hidden="true"
     />
-    <!-- Mobile icon -->
+  </div>
+  <!-- Mobile icon in separate container -->
+  <div class="mobile-icon block md:hidden">
     <Icon 
       name="ant-design:menu-outlined" 
-      class="toggler-btn block md:hidden" 
+      class="toggler-btn w-6" 
       aria-hidden="true"
     />
-  </CategorySidebarToggler>
+  </div>
+</CategorySidebarToggler>
+
 
   <div class="overflow-x-auto overflow-y-hidden flex max-w-full items-center">
     {subtitle ? (
@@ -99,11 +103,15 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   }
 
   function updateTogglers(isCollapsed) {
-    const togglers = document.querySelectorAll('.toggler-btn');
-    if (togglers.length >= 2) {
-      togglers[0].classList.toggle('hidden', isCollapsed);
-      togglers[1].classList.toggle('hidden', !isCollapsed);
-    }
+    document.querySelectorAll('.category-sidebar-toggler').forEach(toggler => {
+      const expandedIcon = toggler.querySelector('.expanded-icon');
+      const collapsedIcon = toggler.querySelector('.collapsed-icon');
+      
+      if (expandedIcon && collapsedIcon) {
+        expandedIcon.classList.toggle('hidden', isCollapsed);
+        collapsedIcon.classList.toggle('hidden', !isCollapsed);
+      }
+    });
   }
   
   function toggleSidebar() {
@@ -123,8 +131,18 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
     }
   }
 
-  // Initialize on astro page load
-  document.addEventListener('astro:page-load', initializeSidebar);
+  function setupTogglers() {
+    document.querySelectorAll('.category-sidebar-toggler').forEach(toggler => {
+      toggler.removeEventListener('click', toggleSidebar);
+      toggler.addEventListener('click', toggleSidebar);
+    });
+  }
+
+  // Initialize on page load
+  document.addEventListener('astro:page-load', () => {
+    initializeSidebar();
+    setupTogglers();
+  });
   
   // Preserve state during view transitions
   document.addEventListener('astro:before-swap', () => {
@@ -144,6 +162,7 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   });
 </script>
 
+
 <style>
   .toggler-btn {
     @apply md:-mt-0.5;

package/src/components/Category/CategoryViewToggler.astro

@@ -25,7 +25,8 @@ const {
   <div class="flex border rounded">
     <button 
       data-view="list"
-      class="view-toggle flex items-center gap-1 px-3 py-1.5 transition-colors"
+      data-view-toggle
+      class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
       aria-label={listAriaLabel}
     >
       <Icon name="ant-design:bars-outlined" class="w-4 h-4" />
@@ -33,7 +34,8 @@ const {
     </button>
     <button 
       data-view="grid"
-      class="view-toggle flex items-center gap-1 px-3 py-1.5 transition-colors"
+      data-view-toggle
+      class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
       aria-label={gridAriaLabel}
     >
       <Icon name="ant-design:appstore-outlined" class="w-4 h-4" />
@@ -48,28 +50,35 @@ const {
     updateUI(savedView);
     
     // Clean up existing listeners to prevent duplicates
-    document.querySelectorAll('.view-toggle').forEach(btn => {
+    document.querySelectorAll('[data-view-toggle]').forEach(btn => {
       btn.removeEventListener('click', handleViewToggle);
       btn.addEventListener('click', handleViewToggle);
     });
   }
 
-  function handleViewToggle(e) {
-    if (!(e.currentTarget instanceof HTMLElement)) return;
-    const view = e.currentTarget.dataset.view;
-    if (!view) return;
-
+  function handleViewToggle(e: Event) {
+    const button = e.currentTarget as HTMLElement;
+    if (!button?.dataset.view) return;
+    
+    const view = button.dataset.view;
     localStorage.setItem('categoryView', view);
     updateUI(view);
+
+    // Push to dataLayer directly
+    if (window.dataLayer) {
+      window.dataLayer.push({
+        event: 'view_style_change',
+        viewType: view,
+        category: window.location.pathname
+      });
+    }
   }
 
-  function updateUI(view) {
-    // Update toggle buttons
+  function updateUI(view: string) {
     document.querySelectorAll('.view-toggle').forEach(btn => {
       btn.classList.toggle('bg-neutral-lightest', btn.dataset.view === view);
     });
 
-    // Update products container
     const productsContainer = document.querySelector('.products-container');
     if (productsContainer) {
       productsContainer.classList.remove('view-grid', 'view-list');
@@ -77,6 +86,5 @@ const {
     }
   }
 
-  // Initialize on page load and view transitions
   document.addEventListener('astro:page-load', initializeView);
 </script>