spoko-design-system 0.2.84 → 0.2.86

package/astro.config.mjs

@@ -1,15 +1,15 @@
 import { defineConfig, sharpImageService } from "astro/config";
+import { iconConfig } from './icon.config';
 import vue from "@astrojs/vue";
 import mdx from '@astrojs/mdx';
 import UnoCSS from '@unocss/astro';
-// import Compress from "astro-compress";
-// https://github.com/yassinedoghri/astro-i18next#readme
 import astroI18next from "astro-i18next";
 import icon from "astro-icon";
 import sitemap from "@astrojs/sitemap";
 import pagefind from "astro-pagefind";
 import AstroPWA from '@vite-pwa/astro';
 import metaTags from "astro-meta-tags";
+import playformInline from "@playform/inline";
 
 // https://astro.build/config
 export default defineConfig({
@@ -74,72 +74,8 @@ export default defineConfig({
     }
   }), UnoCSS({
     injectReset: true
-  }), icon({
-    include: {
-      // mdi: ["*"], // (Default) Loads entire Material Design Icon set
-      mdi: ["npm", "github", "facebook", "instagram", "post-it-note-edit-outline", "car-hatchback", "car-door", "car-side", "car-windshield-outline", "car-light-alert", "car-tire-alert", "car-light-dimmed", "car-light-fog", "car-light-high", "car-parking-lights", "car-esp", "car-brake-abs", "car-horn", "engine-outline", "fan", "fan-off", "air-conditioner", "coolant-temperature", "car-brake-alert", "car-traction-control", "card-text-outline", "fuel", "oil", "hazard-lights", "credit-card-outline"],
-      "ant-design": ["menu-fold-outlined", "menu-unfold-outlined", "menu-outlined", "cluster-outlined", "audit-outlined", "build-twotone", "home-outlined", "close-outlined"],
-      bi: ["envelope-open", "credit-card", "qr-code", "list-check", "list-task", "text-indent-left", "text-indent-right", "tag", "tags", "x"],
-      bx: ["arrow-back", "check", "detail", "file", "car", "credit-card", "barcode", "qr"],
-      carbon: ["language", "checkmark", "home", "dicom-overlay"],
-      el: ["star-empty", "star", "heart-empty", "heart", "map-marker", "fire", "quote-right", "qrcode", "car", "indent-left", "indent-right", "ok"],
-      'eos-icons': ["three-dots-loading", "bubble-loading", "loading", "installing"],
-      fluent: ["share-android-24-regular", "checkmark-24-filled", "tag-24-regular", "tag-multiple-24-regular"],
-      "fluent-emoji": ["cookie", "construction", "warning", "wrench"],
-      la: ["arrow-right", "arrow-left", "car", "car-side"],
-      octicon: ["chevron-left-24", "x-24", "alert-24", "graph-24", "comment-24", "comment-discussion-24", "clock-24", "star-24", "star-fill-24", "file-media-24", "heart-24", "heart-fill-24", "project-roadmap-24", "location-24", "info-24", "mark-github-16"],
-      uil: ["map-marker", "envelope", "phone", "tag-alt"],
-      "simple-icons": ["ebay", "allegro", "volkswagen", "audi", "skoda", "seat", "whatsapp", "x", "facebook", "messenger", "instagram", "telegram"],
-      "icon-park-outline": ["shopping-bag", "comment", "comments", "tag-one"],
-      flowbite: ["arrow-left-outline", "arrow-right-outline", "angle-left-outline", "angle-right-outline", "chevron-left-outline", "chevron-right-outline", "map-location-outline", "map-pin-alt-solid", "x-outline", "messages-outline", "arrow-down-to-bracket-outline", "check-outline"]
-    }
-  }), 
-  // Compress({
-  //   CSS: true,
-  //   HTML: {
-  //     caseSensitive: true,
-  //     collapseBooleanAttributes: true,
-  //     collapseInlineTagWhitespace: false,
-  //     collapseWhitespace: true,
-  //     conservativeCollapse: false,
-  //     continueOnParseError: false,
-  //     customAttrAssign: [],
-  //     customAttrCollapse: "",
-  //     customAttrSurround: [],
-  //     customEventAttributes: [/^on[a-z]{3,}$/],
-  //     decodeEntities: false,
-  //     html5: true,
-  //     ignoreCustomComments: [],
-  //     ignoreCustomFragments: [],
-  //     includeAutoGeneratedTags: true,
-  //     keepClosingSlash: true,
-  //     maxLineLength: null,
-  //     minifyCSS: true,
-  //     minifyJS: true,
-  //     minifyURLs: false,
-  //     preserveLineBreaks: false,
-  //     preventAttributesEscaping: false,
-  //     processConditionalComments: true,
-  //     processScripts: ["module"],
-  //     quoteCharacter: "",
-  //     removeAttributeQuotes: true,
-  //     removeComments: false,
-  //     removeEmptyAttributes: false,
-  //     removeEmptyElements: false,
-  //     removeOptionalTags: false,
-  //     removeRedundantAttributes: true,
-  //     removeScriptTypeAttributes: true,
-  //     removeStyleLinkTypeAttributes: true,
-  //     removeTagWhitespace: true,
-  //     sortAttributes: true,
-  //     sortClassName: true,
-  //     trimCustomFragments: false,
-  //     useShortDoctype: false
-  //   },
-  //   Image: false,
-  //   JavaScript: true,
-  //   SVG: true
-  // }),
+  }),
+  icon(iconConfig), 
   metaTags(),
   (await import("@playform/inline")).default(),
   pagefind(), 

package/icon.config.ts

@@ -0,0 +1,225 @@
+interface IconConfig {
+    include: {
+      [key: string]: string[];
+    }
+  }
+  
+  export const iconConfig: IconConfig = {
+    include: {
+      mdi: [
+        // Social
+        "npm", 
+        "github", 
+        "facebook", 
+        "instagram",
+        
+        // Notes & Content
+        "post-it-note-edit-outline",
+        
+        // Car related
+        "car-hatchback",
+        "car-door", 
+        "car-side",
+        "car-windshield-outline",
+        "car-light-alert",
+        "car-tire-alert",
+        "car-light-dimmed",
+        "car-light-fog",
+        "car-light-high",
+        "car-parking-lights",
+        "car-esp",
+        "car-brake-abs",
+        "car-horn",
+        "engine-outline",
+        
+        // Climate & Temperature
+        "fan",
+        "fan-off",
+        "air-conditioner",
+        "coolant-temperature",
+        
+        // Alerts & Warnings
+        "car-brake-alert",
+        "car-traction-control",
+        
+        // Other
+        "card-text-outline",
+        "fuel",
+        "oil",
+        "hazard-lights",
+        "credit-card-outline"
+      ],
+  
+      "ant-design": [
+        "menu-fold-outlined",
+        "menu-unfold-outlined",
+        "menu-outlined",
+        "bars-outlined",
+        "appstore-outlined",
+        "cluster-outlined",
+        "audit-outlined",
+        "build-twotone",
+        "home-outlined",
+        "close-outlined"
+      ],
+  
+      bi: [
+        "envelope-open",
+        "credit-card",
+        "qr-code",
+        "list-check",
+        "list-task",
+        "text-indent-left",
+        "text-indent-right",
+        "tag",
+        "tags",
+        "x",
+        "graph-up"
+      ],
+  
+      bx: [
+        "arrow-back",
+        "check",
+        "detail",
+        "file",
+        "car",
+        "credit-card",
+        "barcode",
+        "qr"
+      ],
+  
+      carbon: [
+        "language",
+        "checkmark",
+        "home",
+        "dicom-overlay"
+      ],
+  
+      el: [
+        "star-empty",
+        "star",
+        "heart-empty",
+        "heart",
+        "map-marker",
+        "fire",
+        "quote-right",
+        "qrcode",
+        "car",
+        "indent-left",
+        "indent-right",
+        "ok"
+      ],
+  
+      'eos-icons': [
+        "three-dots-loading",
+        "bubble-loading",
+        "loading",
+        "installing"
+      ],
+  
+      fluent: [
+        "share-android-24-regular",
+        "checkmark-24-filled",
+        "tag-24-regular",
+        "tag-multiple-24-regular"
+      ],
+  
+      "fluent-emoji": [
+        "cookie",
+        "construction",
+        "warning",
+        "wrench"
+      ],
+  
+      la: [
+        "arrow-right",
+        "arrow-left",
+        "car",
+        "car-side"
+      ],
+  
+      octicon: [
+        "chevron-left-24",
+        "x-24",
+        "alert-24",
+        "graph-24",
+        "comment-24",
+        "comment-discussion-24",
+        "clock-24",
+        "star-24",
+        "star-fill-24",
+        "file-media-24",
+        "heart-24",
+        "heart-fill-24",
+        "project-roadmap-24",
+        "location-24",
+        "info-24",
+        "mark-github-16"
+      ],
+  
+      uil: [
+        "map-marker",
+        "envelope",
+        "phone",
+        "tag-alt"
+      ],
+  
+      "simple-icons": [
+        "ebay",
+        "allegro",
+        "volkswagen",
+        "audi",
+        "skoda",
+        "seat",
+        "whatsapp",
+        "x",
+        "facebook",
+        "messenger",
+        "instagram",
+        "telegram",
+        "carrd"
+      ],
+  
+      "icon-park-outline": [
+        "shopping-bag",
+        "comment",
+        "comments",
+        "tag-one"
+      ],
+  
+      flowbite: [
+        "arrow-left-outline",
+        "arrow-right-outline",
+        "angle-left-outline",
+        "angle-right-outline",
+        "chevron-left-outline",
+        "chevron-right-outline",
+        "map-location-outline",
+        "map-pin-alt-solid",
+        "x-outline",
+        "messages-outline",
+        "arrow-down-to-bracket-outline",
+        "check-outline"
+      ],
+  
+      // Nowe kolekcje
+      ph: [
+        'images-light',
+        'image-square-thin',
+        'cat-thin',
+        'copy-simple-light'
+      ],
+  
+      ic: [
+        'sharp-photo-library'
+      ],
+  
+      'material-symbols-light': [
+        'broken-image-outline'
+      ],
+  
+      et: [
+        'documents'
+      ]
+    }
+  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.84",
+  "version": "0.2.86",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -10,7 +10,8 @@
       "import": "./index.ts",
       "require": "./index.ts"
     },
-    "./styles/*": "./src/styles/*"
+    "./styles/*": "./src/styles/*",
+    "./icons": "./icon.config.ts"
   },
   "scripts": {
     "dev": "astro dev",
@@ -51,21 +52,24 @@
     "@iconify-json/circle-flags": "^1.2.6",
     "@iconify-json/el": "^1.2.1",
     "@iconify-json/eos-icons": "^1.2.2",
+    "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.4",
     "@iconify-json/fluent": "^1.2.13",
     "@iconify-json/fluent-emoji": "1.2.3",
+    "@iconify-json/ic": "^1.2.2",
     "@iconify-json/icon-park-outline": "^1.2.2",
     "@iconify-json/la": "^1.2.1",
+    "@iconify-json/material-symbols-light": "^1.2.14",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.1",
-    "@iconify-json/octicon": "^1.2.3",
+    "@iconify-json/octicon": "^1.2.4",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/simple-icons": "^1.2.23",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify/json": "^2.2.303",
+    "@iconify/json": "^2.2.304",
     "@iconify/vue": "^4.3.0",
     "@playform/compress": "^0.1.7",
-    "@playform/inline": "github:playform/inline",
+    "@playform/inline": "^0.1.1",
     "@types/node": "^22.13.1",
     "@unocss/astro": "^65.4.3",
     "@unocss/preset-attributify": "^65.4.3",

package/src/components/Badges.vue

@@ -16,6 +16,6 @@ const props = defineProps({
 <template>
   <div v-if="(props.badges && props.badges.length > 0)" class="absolute z-2">
     <Badge v-for="(badge, index) in props.badges" :key="index" :badge="badge"
-      :class="(badge.toLocaleLowerCase().includes('gti') ? 'bg-red-600' : badge.toLocaleLowerCase().includes('motorsport') ? 'bg-blue-600' : 'bg-black')" />
+      :class="(badge.toLocaleLowerCase().includes('gti') ? 'bg-red-600' : badge.toLocaleLowerCase().includes('motorsport') ? 'bg-blue-wrc' : 'bg-black')" />
   </div>
 </template>

package/src/components/Category/CategoriesCarousel.astro

@@ -75,7 +75,7 @@ const activeIndex = activeCategorySlug && categories ? categories.map(a => a.slu
 
 <style >
 .active {
-  @apply bg-blue-700 text-white bg-opacity-100;
+  @apply bg-blue-darker text-white bg-opacity-100;
 
   &:not(:hover) .cats-img {
     filter: invert(100%);

package/src/components/Category/CategoryDetails.astro

@@ -1,63 +1,77 @@
 ---
 import CategorySidebarToggler from './CategorySidebarToggler.vue';
+import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
-const { category, subcategory, subtitle, subsubtitle, titleSmall, locale } = Astro.props;
+const { category, subcategory, subtitle, subsubtitle, titleSmall, locale, showViewToggler, viewerLabels } = Astro.props;
 import { t } from "i18next";
 
 // Compute base URL for localization
 const baseURL = locale === 'en' ? '' : `/${locale}`;
+
+// View toggler translations
+// const viewerLabels = {
+//   showText: t('category.view.show'),
+//   listText: t('category.view.list'),
+//   gridText: t('category.view.grid'),
+//   listAriaLabel: t('category.view.listAriaLabel'),
+//   gridAriaLabel: t('category.view.gridAriaLabel')
+// };
 ---
 
-<div ref="el"
-   class="flex flex-nowrap pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-gray-100 md:bg-white"
-   transition:name="category-details"
-   transition:animate="fade"
+<div 
+  ref="el"
+  class="flex flex-nowrap items-center pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-neutral-lightest md:bg-white"
+  transition:name="category-details"
+  transition:animate="fade"
 >
-  <CategorySidebarToggler onclick="toggleSidebar()">
+  <CategorySidebarToggler client:load onclick="toggleSidebar()">
     <Icon name="ant-design:menu-fold-outlined" class="toggler-btn hidden md:block" />
     <Icon name="ant-design:menu-unfold-outlined" class="toggler-btn hidden" />
     <Icon name="ant-design:menu-outlined" class="toggler-btn md:hidden" />
   </CategorySidebarToggler>
 
   <div class="overflow-x-auto overflow-y-hidden flex max-w-full items-center">
-      {subtitle ? (
-        <>
-          <a class="text-lg font-vw-headregular whitespace-nowrap block" href={`${baseURL}/${category.slug}/`}>
-            {category.name}
-            {titleSmall && <small>{titleSmall}</small>}
-          </a>
-          <span class="text-gray-200 text-lg inline-block px-1 font-headlight">/</span>
-          {!subsubtitle ? (
-            <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
-              {subtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
-            </h1>
-          ) : (
-            <>
-              <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap ">
-                <a href={`${baseURL}/${category.slug}/${subcategory.slug}/`}>
-                  {subtitle}
-                </a>
-              </div>
-              <span class="text-gray-200 text-lg inline-block px-1 font-headlight">/</span>
-              <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
-                {subsubtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
-              </h1>
-            </>
-          )}
-        </>
-      ) : (
-        <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
+    {subtitle ? (
+      <>
+        <a class="text-lg font-vw-headregular whitespace-nowrap block" href={`${baseURL}/${category.slug}/`}>
           {category.name}
           {titleSmall && <small>{titleSmall}</small>}
-          <span class="sr-only"> {t('catalog.extra-short')}</span>
-        </h1>
-      )}
+        </a>
+        <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
+        {!subsubtitle ? (
+          <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
+            {subtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
+          </h1>
+        ) : (
+          <>
+            <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap ">
+              <a href={`${baseURL}/${category.slug}/${subcategory.slug}/`}>
+                {subtitle}
+              </a>
+            </div>
+            <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
+            <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
+              {subsubtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
+            </h1>
+          </>
+        )}
+      </>
+    ) : (
+      <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
+        {category.name}
+        {titleSmall && <small>{titleSmall}</small>}
+        <span class="sr-only"> {t('catalog.extra-short')}</span>
+      </h1>
+    )}
   </div>
+
+  <CategoryViewToggler {...viewerLabels} showViewToggler={showViewToggler} />
 </div>
 
 <script is:inline>
   function toggleSidebar() {
     const sidebar = document.getElementById('sidebar');
+    const togglers = document.querySelectorAll('.toggler-btn');
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
 
     if (sidebar) {
@@ -69,13 +83,17 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
         document.body.classList.remove('overflow-hidden');
         sidebar.classList.toggle('collapsed');
         localStorage.setItem('sidebarState', sidebar.classList.contains('collapsed') ? 'closed' : 'open');
+        
+        // Toggle visibility of buttons on desktop
+        togglers.forEach(btn => btn.classList.toggle('hidden'));
       }
     }
   }
 
   // Read status from localStorage on page load
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const sidebar = document.getElementById('sidebar');
+    const togglers = document.querySelectorAll('.toggler-btn');
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
     const savedState = localStorage.getItem('sidebarState');
 
@@ -85,22 +103,35 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
           sidebar.classList.add('show');
         } else {
           sidebar.classList.remove('collapsed');
+          // Show correct button on desktop
+          if (togglers.length >= 2) {
+            togglers[0].classList.remove('hidden'); // menu-fold
+            togglers[1].classList.add('hidden');    // menu-unfold
+          }
         }
       } else if (savedState === 'closed') {
         if (isMobile) {
           sidebar.classList.remove('show');
         } else {
           sidebar.classList.add('collapsed');
+          // Show correct button on desktop
+          if (togglers.length >= 2) {
+            togglers[0].classList.add('hidden');    // menu-fold
+            togglers[1].classList.remove('hidden'); // menu-unfold
+          }
         }
       }
     }
   });
 </script>
 
-
 <style>
-  .category-toggler {
-    right: -1px;
-    bottom: -1px;
+  /* View toggle styles */
+  .view-grid {
+    @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
+  }
+
+  .view-list {
+    @apply flex flex-col gap-4;
   }
-</style>
+</style>

package/src/components/Category/CategoryViewToggler.astro

@@ -0,0 +1,107 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  showText: string;      // "Show:"
+  listText: string;      // "List"
+  gridText: string;      // "Grid"
+  listAriaLabel: string; // "List view"
+  gridAriaLabel: string; // "Grid view"
+  showViewToggler: boolean;
+}
+
+const { 
+  showText, 
+  listText, 
+  gridText, 
+  listAriaLabel, 
+  gridAriaLabel, 
+  showViewToggler
+} = Astro.props;
+---
+
+{
+  showViewToggler && 
+<div class="flex items-center gap-2 ml-auto">
+  <span class="text-slate-default text-sm">{showText}</span>
+  <div class="flex border rounded">
+    <button 
+      data-view="list"
+      class="view-toggle flex items-center gap-1 px-3 py-1.5 transition-colors"
+      aria-label={listAriaLabel}
+    >
+      <Icon name="ant-design:bars-outlined" class="w-4 h-4" />
+      <span class="text-sm">{listText}</span>
+    </button>
+    <button 
+      data-view="grid"
+      class="view-toggle flex items-center gap-1 px-3 py-1.5 transition-colors"
+      aria-label={gridAriaLabel}
+    >
+      <Icon name="ant-design:appstore-outlined" class="w-4 h-4" />
+      <span class="text-sm">{gridText}</span>
+    </button>
+  </div>
+</div>
+}
+
+<script define:vars={{ showViewToggler }}>
+    
+  // Initialize view state
+  function initializeView() {
+    const savedView = localStorage.getItem('categoryView') || 'list';
+    const buttons = document.querySelectorAll('.view-toggle');
+    const productsContainer = document.querySelector('.products-container');
+
+    // Set initial active state
+    buttons.forEach(button => {
+      if (button instanceof HTMLElement) {
+        const isActive = button.dataset.view === savedView;
+        button.classList.toggle('bg-neutral-lightest', isActive);
+      }
+    });
+
+    // Set initial view on products container
+    if (productsContainer) {
+      productsContainer.classList.remove('view-grid', 'view-list');
+      productsContainer.classList.add(`view-${savedView}`);
+    }
+  }
+
+  // Handle view changes
+  function setupViewToggle() {
+    const buttons = document.querySelectorAll('.view-toggle');
+    
+    buttons.forEach(button => {
+      button.addEventListener('click', (e) => {
+        const clickedButton = e.currentTarget;
+        if (!(clickedButton instanceof HTMLElement)) return;
+        
+        const view = clickedButton.dataset.view;
+        if (!view) return;
+
+        // Update localStorage
+        localStorage.setItem('categoryView', view);
+
+        // Update button states
+        buttons.forEach(btn => btn.classList.remove('bg-neutral-lightest'));
+        clickedButton.classList.add('bg-neutral-lightest');
+
+        // Update products container
+        const productsContainer = document.querySelector('.products-container');
+        if (productsContainer) {
+          productsContainer.classList.remove('view-grid', 'view-list');
+          productsContainer.classList.add(`view-${view}`);
+        }
+      });
+    });
+  }
+
+  // Setup on page load
+  document.addEventListener('astro:page-load', () => {
+    if (showViewToggler) {
+        initializeView();
+        setupViewToggle();
+    }
+  });
+</script>

package/src/components/Header/Header.astro

@@ -6,7 +6,7 @@ import Search from "astro-pagefind/components/Search";
 ---
 
 <header
-  class="p-3 bg-blue-600 bg-opacity-10 backdrop-blur-md border-b text-slate-900"
+  class="p-3 bg-blue-medium bg-opacity-10 backdrop-blur-md border-b text-slate-900"
 >
   <SkipToContent />
   <nav

package/src/components/Modal.astro

@@ -8,7 +8,7 @@ import Button from "../components/Button.vue";
     @apply fixed top-0 left-0 right-0 bottom-0;
 
     &::backdrop {
-      @apply bg-gray-500/50 fixed;
+      @apply bg-slate-medium/50 fixed;
       top: 0px;
       right: 0px;
       bottom: 0px;