spoko-design-system 0.2.35 → 0.2.36

package/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1727944915761
+		"lastUpdateCheck": 1730933717958
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -27,21 +27,21 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.9.1",
-    "@astrojs/mdx": "^3.1.8",
+    "@algolia/client-search": "^5.13.0",
+    "@astrojs/mdx": "^3.1.9",
     "@astrojs/node": "^8.3.4",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/vue": "^4.5.2",
-    "@docsearch/css": "^3.6.2",
+    "@docsearch/css": "^3.7.0",
     "@iconify-json/ant-design": "^1.2.2",
     "@iconify-json/bi": "^1.2.1",
     "@iconify-json/bx": "^1.2.1",
-    "@iconify-json/carbon": "^1.2.3",
+    "@iconify-json/carbon": "^1.2.4",
     "@iconify-json/circle-flags": "^1.2.1",
     "@iconify-json/el": "^1.2.0",
     "@iconify-json/eos-icons": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.2",
-    "@iconify-json/fluent": "^1.2.4",
+    "@iconify-json/fluent": "^1.2.6",
     "@iconify-json/fluent-emoji": "1.2.1",
     "@iconify-json/icon-park-outline": "^1.2.1",
     "@iconify-json/la": "^1.2.0",
@@ -49,41 +49,42 @@
     "@iconify-json/noto-v1": "^1.2.0",
     "@iconify-json/octicon": "^1.2.1",
     "@iconify-json/ph": "^1.2.1",
-    "@iconify-json/simple-icons": "^1.2.9",
+    "@iconify-json/simple-icons": "^1.2.11",
     "@iconify-json/uil": "^1.2.1",
-    "@iconify/json": "^2.2.262",
+    "@iconify/json": "^2.2.268",
     "@iconify/vue": "^4.1.2",
-    "@playform/compress": "^0.1.4",
+    "@playform/compress": "^0.1.6",
     "@playform/inline": "github:playform/inline",
-    "@types/node": "^22.7.7",
-    "@unocss/astro": "^0.63.4",
-    "@unocss/preset-attributify": "^0.63.4",
-    "@unocss/preset-typography": "^0.63.4",
-    "@unocss/preset-uno": "^0.63.4",
-    "@unocss/preset-web-fonts": "^0.63.4",
-    "@unocss/preset-wind": "^0.63.4",
-    "@unocss/reset": "^0.63.4",
+    "@types/node": "^22.9.0",
+    "@unocss/astro": "^0.64.0",
+    "@unocss/preset-attributify": "^0.64.0",
+    "@unocss/preset-typography": "^0.64.0",
+    "@unocss/preset-uno": "^0.64.0",
+    "@unocss/preset-web-fonts": "^0.64.0",
+    "@unocss/preset-wind": "^0.64.0",
+    "@unocss/reset": "^0.64.0",
     "@vite-pwa/astro": "^0.4.3",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/core": "^11.2.0",
     "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.1.1",
+    "astro-icon": "^1.1.2",
     "astro-meta-tags": "^0.3.1",
-    "astro-navbar": "^2.3.4",
+    "astro-navbar": "^2.3.6",
     "astro-pagefind": "^1.6.0",
     "astro-remote": "^0.3.3",
-    "i18next": "^23.16.2",
+    "i18next": "^23.16.4",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-fs-backend": "^2.3.2",
     "i18next-http-backend": "^2.6.2",
     "i18next-vue": "^5.0.0",
     "swiper": "^11.1.14",
-    "unocss": "^0.63.4",
-    "vite": "^5.4.9",
+    "unocss": "^0.64.0",
+    "vite": "^5.4.10",
     "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@unocss/transformer-variant-group": "^0.63.4",
-    "astro": "^4.16.6",
+    "@unocss/transformer-variant-group": "^0.64.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "astro": "^4.16.10",
     "unocss": "^0.60.0"
   },
   "packageManager": "pnpm@9.8.0",
@@ -94,4 +95,4 @@
       "sharp@<0.30.5": ">=0.30.5"
     }
   }
-}
+}

package/src/components/Button.vue

@@ -39,7 +39,7 @@ const classes = {
   </component>
 </template>
 
-<style lang="scss">
+<style>
 .btn-primary,
 .btn-secondary {
   svg {

package/src/components/Product/ProductEngineType.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface Engine {
+  id: number | string;
+  name: string;
+}
+
+const props = withDefaults(defineProps<{
+  engines: Engine[];
+}>(), {
+  engines: () => []
+});
+</script>
+
+<template>
+  <ul v-if="engines.length" class="engine-types">
+    <li 
+      v-for="(engine, index) in engines" 
+      :key="engine.id"
+      class="engine-type"
+      :class="{ 'with-comma': index !== engines.length - 1 }"
+    >
+      {{ engine.name }}
+    </li>
+  </ul>
+</template>
+
+<style lang="scss">
+.engine-types {
+  @apply flex flex-wrap items-center;
+}
+
+.engine-type {
+  @apply inline-block;
+
+  &.with-comma {
+    @apply mr-1;
+    
+    &:after {
+      content: ',';
+    }
+  }
+}
+</style>

package/src/components/Product/ProductImage.astro

@@ -0,0 +1,42 @@
+---
+import { Image } from 'astro:assets'
+
+interface ImageObject {
+  src: string;
+  alt?: string;
+  height?: string | number;
+  width?: string | number;
+  loading?: 'lazy' | 'eager';
+  srcset?: string[];
+  class?: string;
+  index?: number;
+}
+
+const { imageObject, imagesApiUrl } = Astro.props as { imageObject: ImageObject; imagesApiUrl: string };
+
+let inputProps = {};
+
+
+if (imageObject.index && imageObject.index === 1) {
+  inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
+  imageObject.loading = 'eager'
+}
+
+if (imageObject.srcset && imageObject.srcset.length) {
+  inputProps['widths'] = imageObject.srcset
+}
+
+---
+<Image 
+    src={`${imagesApiUrl}${imageObject.src}`}
+    alt={imageObject.alt}
+    height={imageObject.height} 
+    width={imageObject.width}
+    loading={imageObject.loading ? imageObject.loading : 'lazy'}
+    itemprop="image"
+    format="avif"
+    data-pagefind-index-attrs={imageObject.alt}
+    onerror="this.style.display='none';"
+    class={`product-image ${imageObject.class || ''}`}
+    { ...inputProps}
+/>

package/src/components/Product/ProductLinkInfo.astro

@@ -0,0 +1,38 @@
+---
+import type { Product } from '../../types/Product';
+import ProductNumber from "@components/Product/ProductNumber.astro"
+
+interface Props {
+  product: Product;
+  nameFormatted: string;
+  price?: string;
+  url: string;
+  index?: number | null;
+  bigTile?: boolean;
+}
+
+const { product, nameFormatted, price, url, index, bigTile } = Astro.props;
+
+---
+
+<div class={`flex flex-col ${bigTile ? '' : 'sm:pl-4'}`}>
+    {price && (
+      <p class="block mb-2 font-600 font-headbold text-5">
+        {price}
+      </p>
+    )}
+    <a 
+      class="product-link--url"
+      href={url}
+      itemprop="url"
+      title={product.number}
+      set:html={nameFormatted}
+    />
+    <ProductNumber productNumber={product.number} copyDisabled={true} />
+    {index !== null && (
+      <>
+        <meta itemprop="position" content={index} />
+        <meta itemprop="name" content={nameFormatted} />
+      </>
+    )}
+  </div>

package/src/components/Product/ProductNumber.astro

@@ -0,0 +1,105 @@
+---
+import { t } from "i18next";
+import ButtonCopy from "./../ButtonCopy.vue";
+
+interface Props {
+  productNumber: string | null;
+  copyDisabled?: boolean;
+  isPdp?: boolean;
+  small?: boolean;
+  big?: boolean;
+  class?: string;
+}
+
+const { 
+  productNumber, 
+  copyDisabled, 
+  isPdp, 
+  small, 
+  big, 
+  class: className 
+} = Astro.props;
+
+const buttonTexts = {
+  copy: t('copy'),
+  copied: t('copied')
+} as const;
+
+// Regex patterns:
+const LIQUIDS_PATTERN = /^(\w{1})(\w{3})(\w{3})(.*)$/;
+const WHEELS_EMBLEMS_PATTERN = /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/;
+const ACCESSORIES_MATS_PATTERN = /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/;
+const OTHER_PARTS_PATTERN = /(\w{3})/g;
+
+const isLetter = (char: string): boolean => 
+  char.toLowerCase() !== char.toUpperCase();
+
+const formatProductNumber = (number: string, separator: string): string => {
+  if (!number) return '';
+  
+  let formatted = number;
+
+  if (isLetter(number[0]) && !isLetter(number[1]) && number.length === 9) {
+    formatted = formatted.replace(LIQUIDS_PATTERN, `$1${separator}$2${separator}$3${separator}$4`);
+  } else if (number.length >= 13) {
+    formatted = formatted.replace(WHEELS_EMBLEMS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
+  } else if (number.length > 12) {
+    formatted = formatted.replace(ACCESSORIES_MATS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
+  } else {
+    formatted = formatted.replace(OTHER_PARTS_PATTERN, `$1${separator}`);
+  }
+
+  return formatted
+    .replace(' ', separator)
+    .replace(/[^a-zA-Z0-9]$/, ''); // Remove the end trailing separator
+};
+
+// Memoization of formatted numbers
+const formattedNumbers = productNumber ? {
+  standard: formatProductNumber(productNumber, '\u00A0'),
+  dot: formatProductNumber(productNumber, '.'),
+  dash: formatProductNumber(productNumber, '-')
+} : null;
+
+const classNames = [
+  'product-number',
+  big ? 'text-4.5' : 'number-big',
+  className
+].filter(Boolean).join(' ');
+
+const trackingClass = small ? 'tracking-wide' : 'tracking-tight';
+
+const ProductWrapper = isPdp ? 'h2' : 'div';
+const FormattedWrapper = isPdp ? 'h3' : 'div';
+---
+
+{productNumber && formattedNumbers && (
+  <div class={classNames}>
+    <div class={`p-number ${small ? "w-full" : ""}`} itemprop="identifier">
+      <ProductWrapper id={productNumber} class="product-code">
+        {productNumber}
+      </ProductWrapper>
+
+      {big && (
+        <ButtonCopy 
+          productNumber={productNumber} 
+          copyDisabled={!big} 
+          texts={buttonTexts} 
+          client:idle 
+        />
+      )}
+    </div>
+
+    <div class={`code-formatted ${trackingClass}`}>
+      <div class="relative inset-0" data-pagefind-ignore>
+        {formattedNumbers.dot}
+      </div>
+      <div class="absolute inset-0" data-pagefind-ignore>
+        {formattedNumbers.dash}
+      </div>
+      <FormattedWrapper class="number-secondary">
+        {formattedNumbers.standard}
+      </FormattedWrapper>
+    </div>
+  </div>
+)}

package/src/components/ProductNumber.astro

@@ -1,114 +1,105 @@
 ---
 import { t } from "i18next";
 import ButtonCopy from "./ButtonCopy.vue";
-import PartNumber from "./PartNumber.vue";
 
-const {
-  copyDisabled,
-  productNumber,
-  as,
-  isPdp,
-  small,
-  big,
-  class: className,
-} = Astro.props;
-
-const butonTexts = {
-  copy: t("copy"),
-  copied: t("copied"),
-};
+interface Props {
+  productNumber: string | null;
+  copyDisabled?: boolean;
+  isPdp?: boolean;
+  small?: boolean;
+  big?: boolean;
+  class?: string;
+}
 
-const isLetter = (string: string) => {
-  return string.toLowerCase() !== string.toUpperCase();
-};
+const { 
+  productNumber, 
+  copyDisabled, 
+  isPdp, 
+  small, 
+  big, 
+  class: className 
+} = Astro.props;
 
-const niceName = (string: string, separator = "\u00A0") => {
-  let word = string; //e.g. to 6Q0947106EY20 .split('+')
+const buttonTexts = {
+  copy: t('copy'),
+  copied: t('copied')
+} as const;
 
-  if (
-    isLetter(string[0]) === true &&
-    isLetter(string[1]) === false &&
-    string.length === 9
-  ) {
-    // mainly liquids
-    word = string
-      .replace(
-        /^(\w{1})(\w{3})(\w{3})(.*)$/,
-        `$1${separator}$2${separator}$3${separator}$4`,
-      )
-      .replace(/(^\s+|\s+$)/, "");
-  }
+// Regex patterns:
+const LIQUIDS_PATTERN = /^(\w{1})(\w{3})(\w{3})(.*)$/;
+const WHEELS_EMBLEMS_PATTERN = /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/;
+const ACCESSORIES_MATS_PATTERN = /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/;
+const OTHER_PARTS_PATTERN = /(\w{3})/g;
 
-  // wheels / emblems e.g. 6R0601025AK8Z8 --> 6R0 601 025 AB 8Z8 || 6C0601025DFZZ --> 6C0 601 025 D FZZ || 6R0853433ADA1 -> 6R0 853 433 A DA1
-  else if (string.length >= 13) {
-    // console.log('part number: wheels / emblems', word)
-    word = string
-      .replace(
-        /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/,
-        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
-      )
-      .replace(/(^\s+|\s+$)/, "");
-  } else if (string.length > 12) {
-    // accessories / mats
-    word = string
-      .replace(
-        /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/,
-        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
-      )
-      .replace(/(^\s+|\s+$)/, "");
-  } else {
-    // other parts
-    word = string
-      .replace(/(\w{3})/g, `$1${separator}`)
-      .replace(/(^\s+|\s+$)/, "");
-  }
+const isLetter = (char: string): boolean => 
+  char.toLowerCase() !== char.toUpperCase();
 
-  // remove single separator from the end of string:
-  let lastCharacter = word.split('').pop() || '';
+const formatProductNumber = (number: string, separator: string): string => {
+  if (!number) return '';
   
-  if (!Boolean(lastCharacter.match(/[a-zA-Z0-9]/))) {
-    word = word.slice(0, -1)
+  let formatted = number;
+
+  if (isLetter(number[0]) && !isLetter(number[1]) && number.length === 9) {
+    formatted = formatted.replace(LIQUIDS_PATTERN, `$1${separator}$2${separator}$3${separator}$4`);
+  } else if (number.length >= 13) {
+    formatted = formatted.replace(WHEELS_EMBLEMS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
+  } else if (number.length > 12) {
+    formatted = formatted.replace(ACCESSORIES_MATS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
+  } else {
+    formatted = formatted.replace(OTHER_PARTS_PATTERN, `$1${separator}`);
   }
 
-  return word.replace(" ", separator);
+  return formatted
+    .replace(' ', separator)
+    .replace(/[^a-zA-Z0-9]$/, ''); // Remove the end trailing separator
 };
 
-const classes = `product-number ${big ? "text-5.5 leading-none" : "text-sm"} ${className}` //mt-2 sm:mt-0
+// Memoization of formatted numbers
+const formattedNumbers = productNumber ? {
+  standard: formatProductNumber(productNumber, '\u00A0'),
+  dot: formatProductNumber(productNumber, '.'),
+  dash: formatProductNumber(productNumber, '-')
+} : null;
 
+const classNames = [
+  'product-number',
+  big ? 'text-4.5' : 'number-big',
+  className
+].filter(Boolean).join(' ');
 
----
-
-<!-- <PartNumber number={productNumber} as="div"></PartNumber> -->
-
+const trackingClass = small ? 'tracking-wide' : 'tracking-tight';
 
-{
-  productNumber !== null && (
-   
-
-      <PartNumber class={`${classes} product-code`} number={productNumber} as={isPdp ? 'h2' : 'div'} />
+const ProductWrapper = isPdp ? 'h2' : 'div';
+const FormattedWrapper = isPdp ? 'h3' : 'div';
+---
 
-      <div
-        class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
-      >
-        <div class="relative inset-0" data-pagefind-ignore>
-          {niceName(productNumber, ".")}
-        </div>
-        <div class="absolute inset-0" data-pagefind-ignore>
-          {niceName(productNumber, "-")}
-        </div>
-        <PartNumber class="number-secondary" number={niceName(productNumber)} as={isPdp ? 'h3' : 'div'} />
+{productNumber && formattedNumbers && (
+  <div class={classNames}>
+    <div class={`p-number ${small ? "w-full" : ""}`} itemprop="identifier">
+      <ProductWrapper id={productNumber} class="product-code">
+        {productNumber}
+      </ProductWrapper>
+
+      {big && (
+        <ButtonCopy 
+          productNumber={productNumber} 
+          copyDisabled={!big} 
+          texts={buttonTexts} 
+          client:idle 
+        />
+      )}
+    </div>
+
+    <div class={`code-formatted ${trackingClass}`}>
+      <div class="relative inset-0" data-pagefind-ignore>
+        {formattedNumbers.dot}
       </div>
-    
-  )
-}
-
-
-<!-- {!copyDisabled && ( -->
-  <ButtonCopy
-    class="top-1 right-0"
-    productNumber={String(productNumber)}
-    texts={butonTexts}
-    tooltipClasses=""
-    client:only
-  />
-<!-- )}  -->
+      <div class="absolute inset-0" data-pagefind-ignore>
+        {formattedNumbers.dash}
+      </div>
+      <FormattedWrapper class="number-secondary">
+        {formattedNumbers.standard}
+      </FormattedWrapper>
+    </div>
+  </div>
+)}

package/src/components/ProductTile.astro

@@ -1,7 +1,7 @@
 ---
 const { productObject, locale, index } = Astro.props;
 import Image from "./Image.astro"
-import ProductNumber from "./ProductNumber.astro"
+import ProductNumber from "./Product/ProductNumber.astro"
 
 ---
 

package/src/index.ts

@@ -0,0 +1,23 @@
+// src/index.ts
+
+// Vue Components
+export { default as FuckRussia } from './components/FuckRussia.vue';
+export { default as FlagPL } from './components/flags/FlagPL.vue';
+export { default as Badges } from './components/Badges.vue';
+export { default as SlimBanner } from './components/SlimBanner.vue';
+export { default as Jumbatron } from './components/Jumbatron.vue';
+export { default as Button } from './components/Button.vue';
+export { default as Breadcrumbs } from './components/Breadcrumbs.vue';
+export { default as ProductDetailsList } from './components/ProductDetailsList.vue';
+export { default as FeaturesList } from './components/FeaturesList.vue';
+export { default as ProductCodes } from './components/ProductCodes.vue';
+export { default as ProductEngineType } from './components/Product/ProductEngineType.vue';
+
+
+
+// Astro Components
+export { default as Copyright } from './components/Copyright.astro';
+export { default as HandDrive } from './components/HandDrive.astro';
+export { default as Faq } from './components/Faq.astro';
+export { default as ProductNumber } from './components/Product/ProductNumber.astro';
+export { default as ProductImage } from './components/Product/ProductImage.astro';

package/src/pages/components/details-list.mdx

@@ -4,7 +4,7 @@ layout: "../../layouts/MainLayout.astro"
 ---
 
 import ProductDetailsList from '../../components/ProductDetailsList.vue'
-import ProductNumber from "../../components/ProductNumber.astro"
+import ProductNumber from "../../components/Product/ProductNumber.astro"
 import ProductCodes from '../../components/ProductCodes.vue'
 
 export const prcodesArray = ["PJ4", "CA2", "C4E", "2JZ"]

package/src/pages/components/product-number.mdx

@@ -2,7 +2,7 @@
 title: "ProductNumber"
 layout: "../../layouts/MainLayout.astro"
 ---
-import ProductNumber from '../../components/ProductNumber.astro'
+import ProductNumber from '../../components/Product/ProductNumber.astro'
 
 # ProductNumber
 

package/src/types/Product.ts

@@ -0,0 +1,32 @@
+export interface ProductImage {
+    path: string;
+  }
+  
+  export interface BaseProduct {
+    id: string | number;
+    number: string;
+    photo: string | null;
+    price_pln?: number;
+  }
+  
+  export interface ShopProduct extends BaseProduct {
+    images: ProductImage[];
+    slug: string;
+    name_pl: string;
+    name_en: string;
+  }
+  
+  export interface CatalogProduct extends BaseProduct {
+    photo: string | null;
+  }
+  
+  export type Product = ShopProduct | CatalogProduct;
+  
+  export interface ProductLinkProps {
+    productId: string;
+    bigTile?: boolean;
+    locale: string;
+    index?: number | null;
+    loading?: 'lazy' | 'eager';
+    isShopProduct?: boolean;
+  }

package/src/types/astro.d.ts

@@ -0,0 +1,5 @@
+
+declare module '*.astro' {
+    const component: any;
+    export default component;
+  }

package/src/utils/text.ts

@@ -0,0 +1,43 @@
+
+import i18next, { t } from "i18next";
+
+// import { t } from "i18next";
+
+export const getTranslation = (translationKey:string) => {
+    // console.log('search translation for', translationKey, t(translationKey))
+    return i18next.exists(translationKey) ? t(translationKey) : `missing ${translationKey}`
+}
+
+export const text2paragraphs = (text:string, firstLineBottomMargin:boolean=false) => {
+    // return '<p class="mb-2">' + text.split(/[\n\r]+/g).join('</p><p>') + '</p>'
+    let out = '<p' + (firstLineBottomMargin ? 'class="mb-3"' : '') + '>' + text.split("\n").join('</p><p>') + '<\/p>';
+    return out.split('<p><\/p><p>').join('<p class="mt-3">');
+}
+
+
+export const getShorterDescription = (description: string) => {
+    function cutString(s:string, n:number) {
+      if (s && s.length > 150) {
+        const text = s.replace(/(\n)/g," ")
+        const cut = text.indexOf('. ', n);
+        if (cut ==  -1) return text;
+        return `${text.substring(0, cut)}.`
+      } else {
+        return s || ''
+      }
+    }
+  
+    return cutString(description, 150) || ''
+  }
+  
+  export const countWords = (str: string) => {
+    return str.trim().split(/\s+/).length;
+  }
+  
+  export const firstSentence = (str: string) => {
+    return str.split('\.');
+  }
+
+  export const removeSemicolon = (name: string) => {
+    return name.replace(';', '')
+  }