spoko-design-system 1.1.2 → 1.1.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.1.4](https://github.com/polo-blue/sds/compare/v1.1.3...v1.1.4) (2025-09-23)
+
+### Bug Fixes
+
+* remove unused variables and improve TypeScript types ([db637f6](https://github.com/polo-blue/sds/commit/db637f6829bb2a23342a35d8041e803d4c9ad9c4))
+
+## [1.1.3](https://github.com/polo-blue/sds/compare/v1.1.2...v1.1.3) (2025-09-23)
+
+### Bug Fixes
+
+* resolve Astro syntax errors in components ([18003e7](https://github.com/polo-blue/sds/commit/18003e78558a1dbc8f34d0e4faed6183eaaa80cb))
+
 ## [1.1.2](https://github.com/polo-blue/sds/compare/v1.1.1...v1.1.2) (2025-09-23)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/Card.astro

@@ -1,5 +1,5 @@
 ---
-const { class: className, imgSrc, imgAlt, href } = Astro.props;
+const { imgSrc, imgAlt, href } = Astro.props;
 
 import Image from '../components/Image.astro';
 ---

package/src/components/Category/CategoriesCarousel.astro

@@ -1,5 +1,5 @@
 ---
-const { activeCategorySlug, locale, class: className } = Astro.props;
+const { activeCategorySlug } = Astro.props;
 
 import { getTranslatedLink } from '@utils/text/getTranslatedLink';
 import { getMainCategoryList } from '@utils/category/getMainCategoryList';

package/src/components/Category/CategoryDetails.astro

@@ -3,16 +3,8 @@ import CategorySidebarToggler from './CategorySidebarToggler.vue';
 import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
 
-const {
-  category,
-  subcategory,
-  subtitle,
-  subsubtitle,
-  titleSmall,
-  locale,
-  showViewToggler,
-  viewerLabels,
-} = Astro.props;
+const { category, subcategory, subtitle, subsubtitle, titleSmall, showViewToggler, viewerLabels } =
+  Astro.props;
 
 const baseURL = '';
 ---

package/src/components/LeftSidebar.astro

@@ -44,7 +44,7 @@ const getLinkClasses = link => {
 </Astronav>
 
 <script is:inline>
-  window.addEventListener('DOMContentLoaded', event => {
+  window.addEventListener('DOMContentLoaded', () => {
     var target = document.querySelector('[aria-current="page"]');
     if (target && target.offsetTop > window.innerHeight - 100) {
       document.querySelector('.nav-groups').scrollTop = target.offsetTop;

package/src/components/Product/ProductCarousel.astro

@@ -2,7 +2,7 @@
 import ProductLink from './ProductLink.astro';
 
 // Get the product directly from the prop on render
-const { locale, class: className, products, isShopProduct = false, ...rest } = Astro.props;
+const { locale, products, isShopProduct = false } = Astro.props;
 ---
 
 {

package/src/components/Product/ProductLink.astro

@@ -7,7 +7,7 @@ interface Props {
   locale: string;
   index: number;
   bigTile?: boolean;
-  loading?: "eager" | "lazy";
+  loading?: 'eager' | 'lazy';
   isShopProduct?: boolean;
 }
 
@@ -17,80 +17,101 @@ const {
   bigTile,
   locale,
   index,
-  loading = "lazy",
+  loading = 'lazy',
   isShopProduct = false,
 } = Astro.props;
 
 import { getProductById } from '@utils/product/getProductById';
 import { getShopProductById } from '@utils/product/getShopProductById';
-import { getProductUrl } from "@utils/product/getProductUrl";
-import { getShopProductUrl } from "@utils/product/getShopProductUrl";
-import { getProductTranslation } from "@utils/product/getProductTranslation";
+import { getProductUrl } from '@utils/product/getProductUrl';
+import { getShopProductUrl } from '@utils/product/getShopProductUrl';
+import { getProductTranslation } from '@utils/product/getProductTranslation';
 import { getImageUrl } from '@utils/getImageUrl';
-import { ProductImage, ProductNumber, removeSemicolon, getPriceFormatted } from "spoko-design-system";
+import {
+  ProductImage,
+  ProductNumber,
+  removeSemicolon,
+  getPriceFormatted,
+} from 'spoko-design-system';
 
 // Użycie productObject jeśli przekazane, inaczej pobranie produktu na podstawie productId
-const product = productObject || (productId ? (isShopProduct ? await getShopProductById(productId) : await getProductById(productId)) : null);
+const product =
+  productObject ||
+  (productId
+    ? isShopProduct
+      ? await getShopProductById(productId)
+      : await getProductById(productId)
+    : null);
 
 // Określenie URL miniatury produktu
-const thumb = product ? (
-  isShopProduct
-    ? await getImageUrl(product.images?.[0]?.path || "", "SHOP")
-    : await getImageUrl(product.photo || "", `'ProductLink' ${product.number}`)
-) : "";
+const thumb = product
+  ? isShopProduct
+    ? await getImageUrl(product.images?.[0]?.path || '', 'SHOP')
+    : await getImageUrl(product.photo || '', `'ProductLink' ${product.number}`)
+  : '';
 
 // Product translation removed - using English only
-const productTranslation = productId ? await getProductTranslation(productId, product?.number || "") : null;
- 
-const productName = product ? (
-  isShopProduct
+const productTranslation = productId
+  ? await getProductTranslation(productId, product?.number || '')
+  : null;
+
+const productName = product
+  ? isShopProduct
     ? product.name_en || product.name
     : productTranslation?.name || product.name
-) : 'NO NAME';
+  : 'NO NAME';
 
 const nameFormatted = removeSemicolon(productName.toString());
 ---
 
-{product && (
-  <div class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}>
-    {product.photo !== null && thumb ? (
-      <ProductImage
-        imagesApiUrl="https://api.polo.blue"
-        imageObject={{
-          src: thumb,
-          alt: productName,
-          height: '180',
-          width: '240',
-          loading
-        }}
-      />
-    ) : (
-      <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
-    )}
-  </div>
+{
+  product && (
+    <>
+      <div
+        class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}
+      >
+        {product.photo !== null && thumb ? (
+          <ProductImage
+            imagesApiUrl="https://api.polo.blue"
+            imageObject={{
+              src: thumb,
+              alt: productName,
+              height: '180',
+              width: '240',
+              loading,
+            }}
+          />
+        ) : (
+          <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
+        )}
+      </div>
+
+      <div class={bigTile ? '' : 'sm:pl-4'}>
+        {product.price_pln && (
+          <p class="block mb-2 font-600 font-headbold text-5">{getPriceFormatted(product)}</p>
+        )}
 
-  <div class={bigTile ? '' : 'sm:pl-4'}>
-    {product.price_pln && (
-      <p class="block mb-2 font-600 font-headbold text-5">
-        {getPriceFormatted(product)}
-      </p>
-    )}
+        <a
+          class="product-link--url"
+          href={
+            isShopProduct
+              ? getShopProductUrl(product.slug, locale)
+              : getProductUrl(product.number, locale)
+          }
+          itemprop="url"
+          title={product.number}
+          set:html={nameFormatted}
+        />
 
-    <a 
-      class="product-link--url"
-      href={isShopProduct ? getShopProductUrl(product.slug, locale) : getProductUrl(product.number, locale)}
-      itemprop="url"
-      title={product.number}
-      set:html={nameFormatted}
-    />
+        <ProductNumber productNumber={product.number} copyDisabled={true} />
 
-    <ProductNumber productNumber={product.number} copyDisabled={true} />
-    
-    {index !== null && (
-      <>
-        <meta itemprop="position" content={index.toString()} />
-        <meta itemprop="name" content={nameFormatted} />
-      </>
-    )}
-  </div>
-)}
+        {index !== null && (
+          <>
+            <meta itemprop="position" content={index.toString()} />
+            <meta itemprop="name" content={nameFormatted} />
+          </>
+        )}
+      </div>
+    </>
+  )
+}

package/src/components/Product/ProductNumber.astro

@@ -4,7 +4,6 @@ import useFormatProductNumber from '../../utils/product/useFormatProductNumber';
 
 const {
   productNumber,
-  copyDisabled = false,
   isPdp = false,
   small = false,
   big = false,

package/src/components/ProductTile.astro

@@ -1,47 +1,51 @@
 ---
-const { productObject, locale, index } = Astro.props;
-import Image from "./Image.astro"
-import ProductNumber from "./Product/ProductNumber.astro"
+const { productObject, index } = Astro.props;
+import Image from './Image.astro';
+import ProductNumber from './Product/ProductNumber.astro';
 ---
 
-{ productObject && 
-  (
-
-    <!-- product image -->
-    <div class="img--4/3 img--small">
-      { productObject.photo !== null ?
-        <Image
-          imageObject={
-            {
+{
+  productObject && (
+    <>
+      <div class="img--4/3 img--small">
+        {productObject.photo !== null ? (
+          <Image
+            imageObject={{
               src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
               alt: 'Image Alt',
               height: '180',
               width: '240',
-              class: 'img--overlay object-cover'
-            }
-          }
-        />
-        :
-        <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
-      }
-    </div>
-      
-    <!-- product deails -->
-    <div class="sm:pl-4 flex flex-col" >
-      <a class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)"
-        href={productObject.url} itemprop="url"
-        title={productObject.number}
-      >
-        { productObject.name }
-      </a>
+              class: 'img--overlay object-cover',
+            }}
+          />
+        ) : (
+          <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
+        )}
+      </div>
 
-      <ProductNumber productNumber={productObject.number} copyDisabled={false} buttonTexts={{ copy: 'Copy', copied: 'Copied' }}  />
-      
-      { index !== null && 
-        ( <meta itemprop="position" content={String(index)} />
-        <meta itemprop="name" content={productObject.name} /> )
-      }
-    </div>
+      <div class="sm:pl-4 flex flex-col">
+        <a
+          class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)"
+          href={productObject.url}
+          itemprop="url"
+          title={productObject.number}
+        >
+          {productObject.name}
+        </a>
 
-)}
+        <ProductNumber
+          productNumber={productObject.number}
+          copyDisabled={false}
+          buttonTexts={{ copy: 'Copy', copied: 'Copied' }}
+        />
 
+        {index !== null && (
+          <>
+            <meta itemprop="position" content={String(index)} />
+            <meta itemprop="name" content={productObject.name} />
+          </>
+        )}
+      </div>
+    </>
+  )
+}

package/src/components/layout/Header.astro

@@ -32,7 +32,7 @@ const navItemsLeft = [
     <div class="hidden sm:block sm:ml-6">
       <div class="flex space-x-4" itemprop="hasPart">
         {
-          navItemsLeft.map(({ title, description, url, img }) => (
+          navItemsLeft.map(({ title, description, url }) => (
             <a
               href={url}
               class="text-gray-400 hover:bg-blue-darker hover:text-white px-3 py-1 rounded-full text-sm font-medium"

package/src/pages/components/icons.astro

@@ -6,12 +6,6 @@ import { iconConfig } from '../../../icon.config';
 const iconifyUrl = 'https://icon-sets.iconify.design/';
 const ICONS = iconConfig.include;
 
-type IconGroup = {
-  name: string;
-  icons: string[];
-  url: string;
-};
-
 const sortedIconCollections = Object.entries(ICONS)
   .sort(([a], [b]) => a.localeCompare(b))
   .map(([name, icons]) => ({

package/src/pages/core/typography.astro

@@ -1,49 +1,49 @@
 ---
-import MainLayout from '../../layouts/MainLayout.astro'
-import { typography } from '../../../uno-config/theme/typography'
+import MainLayout from '../../layouts/MainLayout.astro';
+import { typography } from '../../../uno-config/theme/typography';
 
-const fonts = Object.entries(typography.fontFamily)
-const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing"
+const fonts = Object.entries(typography.fontFamily);
+const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing';
 ---
 
 <MainLayout>
-    <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
-        <h1 class="text-4xl font-bold text-gray-900 mb-8">Font Family Preview</h1>
-        
-        <!-- Font Preview Cards -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-            {fonts.map(([name, family]) => (
-                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
-                    <!-- Font Sample -->
-                    <div class={`font-${name} text-3xl mb-4 min-h-[120px] flex items-center`}>
-                        {loremText}
-                    </div>
-                    
-                    <!-- Font Info -->
-                    <div class="border-t pt-4">
-                        <div class="flex items-center justify-between mb-2">
-                            <span class="text-lg font-medium text-gray-900">{name}</span>
-                            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-600">font-{name}</span>
-                        </div>
-                        <code class="text-sm text-gray-500 block overflow-x-auto whitespace-nowrap">
-                            {family.join(', ')}
-                        </code>
-                    </div>
-                </div>
-            ))}
-        </div>
+  <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
+    <h1 class="text-4xl font-bold text-gray-900 mb-8">Font Family Preview</h1>
 
-        <!-- Font Configuration Code -->
-        <div class="bg-gray-900 rounded-lg overflow-hidden">
-            <div class="bg-gray-800 px-4 py-2 text-gray-400">
-                Font Configuration
+    <!-- Font Preview Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+      {
+        fonts.map(([name, family]) => (
+          <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
+            <div class={`font-${name} text-3xl mb-4 min-h-[120px] flex items-center`}>
+              {loremText}
             </div>
-            <pre class="p-4 overflow-x-auto">
+
+            <div class="border-t pt-4">
+              <div class="flex items-center justify-between mb-2">
+                <span class="text-lg font-medium text-gray-900">{name}</span>
+                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-600">
+                  font-{name}
+                </span>
+              </div>
+              <code class="text-sm text-gray-500 block overflow-x-auto whitespace-nowrap">
+                {family.join(', ')}
+              </code>
+            </div>
+          </div>
+        ))
+      }
+    </div>
+
+    <!-- Font Configuration Code -->
+    <div class="bg-gray-900 rounded-lg overflow-hidden">
+      <div class="bg-gray-800 px-4 py-2 text-gray-400">Font Configuration</div>
+      <pre
+        class="p-4 overflow-x-auto">
                 <code class="text-gray-200 text-sm">
 {fonts.map(([name, family]) => `font-${name}:\n${family.join(', ')}
 `).join('\n')}</code>
             </pre>
-        </div>
     </div>
+  </div>
 </MainLayout>
-

package/src/utils/category/getMainCategoryList.ts

@@ -4,7 +4,7 @@ import { getApiCategories } from '@utils/api/getCategories';
 import { getSortedCategories } from '@utils/category/getSortedCategories';
 
 // Retrieve main categories:
-export const getMainCategoryList = async (locale: string = 'en'): Promise<CatObject[]> => {
+export const getMainCategoryList = async (): Promise<CatObject[]> => {
   // Fetch categories from API
   const categories = await getApiCategories();
 

package/src/utils/product/getPriceFormatted.ts

@@ -1,4 +1,9 @@
-export const getPriceFormatted = (product: any) => {
+interface Product {
+  price_eur?: number;
+  price_pln?: number;
+}
+
+export const getPriceFormatted = (product: Product) => {
   // Default to EUR formatting for English-only design system
   if (product.price_eur) {
     return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(