spoko-design-system 0.3.3 → 0.3.9

package/README.md

@@ -66,7 +66,7 @@ export const SIDEBAR = [
     { text: "Introduction", link: "/core/introduction" },
     ...,
     { text: "Components", header: true },
-    { text: "Buttons", link: "/components/jumbatron" },
+    { text: "Buttons", link: "/components/jumbotron" },
     ...,
     { text: "New section", header: true },
     { text: "New component", link: "/new-section/new-component.md" },
@@ -81,7 +81,7 @@ You're free to organize the pages however you want.
 
 ### Customizing Core section (colors, typography, shadows...)
 
-If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`.  I think I have prepared enough shades of blue ;-)
+If you want to customize the default colors, typography or shadows you can find the configuration file at uno.config.ts`.  I think I have prepared enough shades of blue ;-)
 
 Feel free to add new pages to the Core section
 

package/astro.config.mjs

@@ -10,6 +10,9 @@ import pagefind from "astro-pagefind";
 import AstroPWA from '@vite-pwa/astro';
 import metaTags from "astro-meta-tags";
 import playformInline from "@playform/inline";
+import { createSdsConfig } from './uno-config';
+
+const unoConfig = createSdsConfig();
 
 // https://astro.build/config
 export default defineConfig({
@@ -72,8 +75,10 @@ export default defineConfig({
     experimental: {
       directoryAndTrailingSlashHandler: true
     }
-  }), UnoCSS({
-    injectReset: true
+  }), 
+  UnoCSS({
+    injectReset: true,
+    ...unoConfig
   }),
   icon(iconConfig), 
   metaTags(),

package/index.ts

@@ -8,7 +8,7 @@ export { default as FuckRussia } from './src/components/FuckRussia.vue';
 export { default as FlagPL } from './src/components/flags/FlagPL.vue';
 export { default as Badges } from './src/components/Badges.vue';
 export { default as SlimBanner } from './src/components/SlimBanner.vue';
-export { default as Jumbatron } from './src/components/Jumbatron.vue';
+export { default as Jumbotron } from './src/components/Jumbotron.astro';
 export { default as Button } from './src/components/Button.vue';
 export { default as Breadcrumbs } from './src/components/Breadcrumbs.vue';
 export { default as ProductDetailsList } from './src/components/ProductDetailsList.vue';

package/package.json

@@ -1,119 +1,119 @@
-{
-  "name": "spoko-design-system",
-  "version": "0.3.03",
-  "private": false,
-  "main": "./index.ts",
-  "module": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": {
-      "import": "./index.ts",
-      "require": "./index.ts"
-    },
-    "./styles/*": "./src/styles/*",
-    "./icons": "./icon.config.ts",
-    "./icon-collections": "./icon.collections.ts",
-    "./uno-config": "./uno-config/index.ts"
-  },
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/polo-blue/sds"
-  },
-  "author": {
-    "name": "spokospace",
-    "email": "szymon@spoko.space",
-    "url": "https://spoko.space"
-  },
-  "homepage": "https://sds.spoko.space/",
-  "license": "MIT",
-  "keywords": [
-    "astro-starter",
-    "seo",
-    "astro",
-    "sds design system",
-    "spoko design system"
-  ],
-  "dependencies": {
-    "@algolia/client-search": "^5.20.2",
-    "@astrojs/mdx": "^4.0.8",
-    "@astrojs/node": "^9.0.2",
-    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/ts-plugin": "^1.10.4",
-    "@astrojs/vue": "^5.0.6",
-    "@docsearch/css": "^3.8.3",
-    "@iconify-json/ant-design": "^1.2.5",
-    "@iconify-json/bi": "^1.2.2",
-    "@iconify-json/bx": "^1.2.2",
-    "@iconify-json/carbon": "^1.2.6",
-    "@iconify-json/circle-flags": "^1.2.6",
-    "@iconify-json/ei": "^1.2.2",
-    "@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.4",
-    "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.24",
-    "@iconify-json/system-uicons": "^1.2.2",
-    "@iconify-json/uil": "^1.2.3",
-    "@iconify/json": "^2.2.305",
-    "@iconify/vue": "^4.3.0",
-    "@playform/compress": "^0.1.7",
-    "@playform/inline": "^0.1.1",
-    "@types/node": "^22.13.1",
-    "@unocss/astro": "^65.4.3",
-    "@unocss/preset-attributify": "^65.4.3",
-    "@unocss/preset-typography": "^65.4.3",
-    "@unocss/preset-uno": "^65.4.3",
-    "@unocss/preset-web-fonts": "^65.4.3",
-    "@unocss/preset-wind": "^65.4.3",
-    "@unocss/reset": "^65.4.3",
-    "@vite-pwa/astro": "^0.5.0",
-    "@vueuse/core": "^12.5.0",
-    "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.1.5",
-    "astro-meta-tags": "^0.3.1",
-    "astro-navbar": "^2.3.9",
-    "astro-pagefind": "^1.8.0",
-    "astro-remote": "^0.3.3",
-    "dotenv": "^16.4.7",
-    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.2",
-    "i18next-fs-backend": "^2.6.0",
-    "i18next-http-backend": "^3.0.2",
-    "i18next-vue": "^5.0.0",
-    "swiper": "^11.2.2",
-    "unocss": "^65.4.3",
-    "vite": "^6.1.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@unocss/transformer-variant-group": "^65.4.3",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/compiler-sfc": "^3.5.13",
-    "astro": "^5.2.5",
-    "unocss": "^0.65.0"
-  },
-  "packageManager": "pnpm@9.15.3",
-  "pnpm": {
-    "default": "8.15.2",
-    "overrides": {
-      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
-      "sharp@<0.30.5": ">=0.30.5"
-    }
-  }
-}
+{
+  "name": "spoko-design-system",
+  "version": "0.3.9",
+  "private": false,
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "require": "./index.ts"
+    },
+    "./styles/*": "./src/styles/*",
+    "./icons": "./icon.config.ts",
+    "./icon-collections": "./icon.collections.ts",
+    "./uno-config": "./uno-config/index.ts"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/polo-blue/sds"
+  },
+  "author": {
+    "name": "spokospace",
+    "email": "szymon@spoko.space",
+    "url": "https://spoko.space"
+  },
+  "homepage": "https://sds.spoko.space/",
+  "license": "MIT",
+  "keywords": [
+    "astro-starter",
+    "seo",
+    "astro",
+    "sds design system",
+    "spoko design system"
+  ],
+  "dependencies": {
+    "@algolia/client-search": "^5.20.2",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/node": "^9.1.0",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/ts-plugin": "^1.10.4",
+    "@astrojs/vue": "^5.0.6",
+    "@docsearch/css": "^3.8.3",
+    "@iconify-json/ant-design": "^1.2.5",
+    "@iconify-json/bi": "^1.2.2",
+    "@iconify-json/bx": "^1.2.2",
+    "@iconify-json/carbon": "^1.2.7",
+    "@iconify-json/circle-flags": "^1.2.6",
+    "@iconify-json/ei": "^1.2.2",
+    "@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.4",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.24",
+    "@iconify-json/system-uicons": "^1.2.2",
+    "@iconify-json/uil": "^1.2.3",
+    "@iconify/json": "^2.2.306",
+    "@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",
+    "@unocss/preset-uno": "^65.4.3",
+    "@unocss/preset-web-fonts": "^65.4.3",
+    "@unocss/preset-wind": "^65.4.3",
+    "@unocss/reset": "^65.4.3",
+    "@vite-pwa/astro": "^0.5.0",
+    "@vueuse/core": "^12.6.1",
+    "astro-i18next": "1.0.0-beta.21",
+    "astro-icon": "^1.1.5",
+    "astro-meta-tags": "^0.3.1",
+    "astro-navbar": "^2.3.9",
+    "astro-pagefind": "^1.8.0",
+    "astro-remote": "^0.3.3",
+    "dotenv": "^16.4.7",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.3",
+    "i18next-fs-backend": "^2.6.0",
+    "i18next-http-backend": "^3.0.2",
+    "i18next-vue": "^5.1.0",
+    "swiper": "^11.2.3",
+    "unocss": "^65.4.3",
+    "vite": "^6.1.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@unocss/transformer-variant-group": "^65.4.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/compiler-sfc": "^3.5.13",
+    "astro": "^5.3.0",
+    "unocss": "^0.65.0"
+  },
+  "packageManager": "pnpm@9.15.3",
+  "pnpm": {
+    "default": "8.15.2",
+    "overrides": {
+      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
+      "sharp@<0.30.5": ">=0.30.5"
+    }
+  }
+}

package/src/components/Category/CategoryDetails.astro

@@ -4,133 +4,123 @@ import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
 import { t } from "i18next";
 
-const { category, subcategory, subtitle, subsubtitle, titleSmall, locale, showViewToggler, viewerLabels } = Astro.props;
+const { 
+  category, 
+  subcategory, 
+  subtitle, 
+  subsubtitle, 
+  titleSmall, 
+  locale, 
+  showViewToggler, 
+  viewerLabels 
+} = Astro.props;
 
-// Compute base URL for localization
 const baseURL = locale === 'en' ? '' : `/${locale}`;
-
 ---
 
 <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()" client:load>
-  <!-- First icon - visible only on desktop when sidebar is expanded -->
-  <Icon 
-    name="ant-design:menu-fold-outlined" 
-    class="toggler-btn hidden md:[&:not(.hidden)]:block" 
-    aria-hidden="true"
-  />
-  <!-- Second icon - visible only on desktop when sidebar is collapsed -->
-  <Icon 
-    name="ant-design:menu-unfold-outlined" 
-    class="toggler-btn hidden md:[&:not(.hidden)]:block" 
-    aria-hidden="true"
-  />
-  <!-- Mobile icon -->
-  <Icon 
-    name="ant-design:menu-outlined" 
-    class="toggler-btn block md:hidden" 
-    aria-hidden="true"
-  />
-</CategorySidebarToggler>
+  <CategorySidebarToggler onclick="toggleSidebar()">
+    <!-- Desktop expanded -->
+    <Icon 
+      name="ant-design:menu-fold-outlined" 
+      class="toggler-btn md:[&:not(.hidden)]:block" 
+      aria-hidden="true"
+    />
+    <!-- Desktop collapsed -->
+    <Icon 
+      name="ant-design:menu-unfold-outlined" 
+      class="toggler-btn hidden md:[&:not(.hidden)]:block" 
+      aria-hidden="true"
+    />
+    <!-- Mobile icon -->
+    <Icon 
+      name="ant-design:menu-outlined" 
+      class="toggler-btn block md:hidden" 
+      aria-hidden="true"
+    />
+  </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-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>
+  <!-- Rest of the existing template code -->
 
-  <CategoryViewToggler {...viewerLabels} showViewToggler={showViewToggler}  class="hidden lg:flex items-center gap-2 ml-auto" />
+  { showViewToggler && (
+    <CategoryViewToggler 
+      {...viewerLabels}  
+      class="hidden lg:flex items-center gap-2 ml-auto" 
+    /> 
+  )}
 </div>
 
-<script is:inline>
+<script>
+  function initializeSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    const savedState = localStorage.getItem('sidebarState') || 'open';
+    
+    if (sidebar) {
+      sidebar.classList.toggle('collapsed', savedState === 'closed');
+      
+      const togglers = document.querySelectorAll('.toggler-btn');
+      if (togglers.length >= 2) {
+        const isCollapsed = savedState === 'closed';
+        togglers[0].classList.toggle('hidden', isCollapsed);
+        togglers[1].classList.toggle('hidden', !isCollapsed);
+      }
+    }
+  }
+  
   function toggleSidebar() {
     const sidebar = document.getElementById('sidebar');
     const togglers = document.querySelectorAll('.toggler-btn');
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
-
+  
     if (sidebar) {
       if (isMobile) {
-        // On mobile just toggle classes without localStorage
-        document.body.classList.toggle('overflow-hidden');
-        sidebar.classList.toggle('show');
+        const isShown = sidebar.classList.toggle('show');
+        document.body.classList.toggle('overflow-hidden', isShown);
       } else {
-        // On desktop save the state
+        const isCollapsed = sidebar.classList.toggle('collapsed');
         document.body.classList.remove('overflow-hidden');
-        sidebar.classList.toggle('collapsed');
-        localStorage.setItem('sidebarState', sidebar.classList.contains('collapsed') ? 'closed' : 'open');
+        localStorage.setItem('sidebarState', isCollapsed ? 'closed' : 'open');
         
-        // Toggle visibility of buttons on desktop
-        togglers.forEach(btn => btn.classList.toggle('hidden'));
-      }
-    }
-  }
-
-  function handlePageLoad() {
-    const sidebar = document.getElementById('sidebar');
-    const togglers = document.querySelectorAll('.toggler-btn');
-    const isMobile = window.matchMedia("(max-width: 768px)").matches;
-    
-    if (sidebar && !isMobile) {
-      const savedState = localStorage.getItem('sidebarState');
-      
-      if (savedState === 'open') {
-        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') {
-        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
+          togglers[0].classList.toggle('hidden', isCollapsed);
+          togglers[1].classList.toggle('hidden', !isCollapsed);
         }
       }
     }
   }
 
-  // Remove previous listener if exists
-  // document.removeEventListener('astro:page-load', handlePageLoad);
-  // Add new listener
-  // document.addEventListener('astro:page-load', handlePageLoad);
-  document.addEventListener('astro:page-load', handlePageLoad, { once: true });
+  // Initialize on every page load to maintain state during navigation
+  document.addEventListener('astro:page-load', initializeSidebar);
+  
+  // Initialize on initial page load
+  document.addEventListener('DOMContentLoaded', initializeSidebar);
+  
+  // Handle state during view transitions
+  document.addEventListener('astro:before-swap', () => {
+    const sidebarState = localStorage.getItem('sidebarState');
+    if (sidebarState) {
+      // Store state temporarily during transition
+      sessionStorage.setItem('tempSidebarState', sidebarState);
+    }
+  });
   
-  // Initial call to set up the initial state
-  handlePageLoad();
-</script>
+  document.addEventListener('astro:after-swap', () => {
+    const tempState = sessionStorage.getItem('tempSidebarState');
+    if (tempState) {
+      // Restore state after transition
+      localStorage.setItem('sidebarState', tempState);
+      sessionStorage.removeItem('tempSidebarState');
+      initializeSidebar();
+    }
+  });
+</script>
+
+<style>
+  .toggler-btn {
+    @apply md:-mt-0.5;
+  }
+</style>

package/src/components/Category/CategorySidebarToggler.vue

@@ -1,7 +1,7 @@
 
 <template>
   <button
-    class="category-toggler"
+    class="category-toggler md:w-8"
     type="button"
     aria-label="toggle menu"
   >

package/src/components/Category/CategoryViewToggler.astro

@@ -7,7 +7,6 @@ interface Props {
   gridText: string;      // "Grid"
   listAriaLabel: string; // "List view"
   gridAriaLabel: string; // "Grid view"
-  showViewToggler: boolean;
   class?: string; 
 }
 
@@ -17,13 +16,10 @@ const {
   gridText, 
   listAriaLabel, 
   gridAriaLabel, 
-  showViewToggler,
   class: className
 } = Astro.props;
 ---
 
-{
-  showViewToggler && 
 <div class:list={[ className ]}>
   <span class="text-slate-default text-sm">{showText}</span>
   <div class="flex border rounded">
@@ -45,37 +41,42 @@ const {
     </button>
   </div>
 </div>
-}
 
-<script define:vars={{ showViewToggler }}>
-  function handleViewToggle(e) {
-    const button = e.currentTarget;
-    if (!(button instanceof HTMLElement)) return;
+<script>
+  function initializeView() {
+    const savedView = localStorage.getItem('categoryView') || 'list';
+    updateUI(savedView);
     
-    const view = button.dataset.view;
+    // Clean up existing listeners to prevent duplicates
+    document.querySelectorAll('.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;
-  
+
     localStorage.setItem('categoryView', view);
     updateUI(view);
   }
-  
+
   function updateUI(view) {
-    document.querySelectorAll('.view-toggle')
-      .forEach(btn => btn.classList.toggle('bg-neutral-lightest', 
-        btn.dataset.view === view));
-  
+    // Update toggle buttons
+    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');
       productsContainer.classList.add(`view-${view}`);
     }
   }
-  
-  document.addEventListener('astro:page-load', () => {
-    if (!showViewToggler) return;
-    
-    updateUI(localStorage.getItem('categoryView') || 'list');
-    document.querySelectorAll('.view-toggle')
-      .forEach(btn => btn.addEventListener('click', handleViewToggle));
-  }, { once: true });
-  </script>
+
+  // Initialize on page load and view transitions
+  document.addEventListener('astro:page-load', initializeView);
+</script>