spoko-design-system 0.2.49 → 0.2.50

package/src/components/Product/ProductEngineType.vue

@@ -1,43 +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 >
-.engine-types {
-  @apply flex flex-wrap items-center;
-}
-
-.engine-type {
-  @apply inline-block;
-
-  &.with-comma {
-    @apply mr-1;
-    
-    &:after {
-      content: ',';
-    }
-  }
-}
+<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 >
+.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

@@ -1,42 +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}
+---
+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

@@ -1,38 +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} />
-      </>
-    )}
+---
+import type { Product } from '../../types/Product';
+import ProductNumber from "./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

@@ -1,105 +1,61 @@
----
-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>
-)}
+---
+import ButtonCopy from '../ButtonCopy.vue';
+import useFormatProductNumber from '../../utils/product/useFormatProductNumber';
+
+const {
+  productNumber,
+  copyDisabled = false,
+  isPdp = false,
+  small = false,
+  big = false,
+  class: customClass = '',
+  buttonTexts = { copy: "Copy", copied: "Copied" },
+} = Astro.props;
+
+// Use formatted product number using a helper function
+const { formattedNumbers: formatted } = useFormatProductNumber(productNumber);
+
+// Define classes dynamically
+const classNames = [
+  'product-number',
+  big ? 'text-4.5' : 'number-big',
+  customClass,
+].filter(Boolean).join(' ');
+
+const trackingClass = small ? 'tracking-wide' : 'tracking-tight';
+
+// Determine wrapper tags based on `isPdp`
+const ProductWrapper = isPdp ? 'h2' : 'div';
+const FormattedWrapper = isPdp ? 'h3' : 'div';
+---
+
+{productNumber && formatted && (
+  <div class={classNames}>
+    <div class={['p-number', small ? 'w-full' : ''].join(' ')} itemprop="identifier">
+      <ProductWrapper id={productNumber} class="product-code">
+        {productNumber}
+      </ProductWrapper>
+
+      {big && (
+        <ButtonCopy
+          productNumber={productNumber}
+          texts={buttonTexts}
+          tooltipClasses=""
+          client:only="vue"
+        />
+      )}
+    </div>
+
+    <div class={['code-formatted', trackingClass].join(' ')}>
+      <div class="relative inset-0" data-pagefind-ignore>
+        {formatted.dot}
+      </div>
+      <div class="absolute inset-0" data-pagefind-ignore>
+        {formatted.dash}
+      </div>
+      <FormattedWrapper class="number-secondary">
+        {formatted.standard}
+      </FormattedWrapper>
+    </div>
+  </div>
+)}

package/src/components/ProductCarousel.astro

@@ -1,38 +1,38 @@
----
-import ProductTile from "../components/ProductTile.astro";
-export const productObject = {
-  name: "Combi-instrument MFA+",
-  url: "https://google.com",
-  number: "6R0920870F",
-  photo:
-    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
-};
----
-
-<div class="bg-white rounded-lg p-4 w-full">
-  <swiper-container
-    class="flex w-full max-w-full"
-    grid-rows="1"
-    mousewheel-force-to-axis="true"
-    navigation="false"
-    scrollbar="false"
-    slides-per-view="auto"
-    space-between="0"
-  >
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-  </swiper-container>
-</div>
+---
+import ProductTile from "../components/ProductTile.astro";
+export const productObject = {
+  name: "Combi-instrument MFA+",
+  url: "https://google.com",
+  number: "6R0920870F",
+  photo:
+    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
+};
+---
+
+<div class="bg-white rounded-lg p-4 w-full">
+  <swiper-container
+    class="flex w-full max-w-full"
+    grid-rows="1"
+    mousewheel-force-to-axis="true"
+    navigation="false"
+    scrollbar="false"
+    slides-per-view="auto"
+    space-between="0"
+  >
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+  </swiper-container>
+</div>

package/src/components/ProductCodes.vue

@@ -1,39 +1,39 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import PrCode from './PrCode.vue';
-
-const props = defineProps({
-  prcodes: {
-    type: Object as PropType<string[] | null>,
-    default: null,
-    required: true,
-  },
-  isPdp: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-})
-
-const codes = props.prcodes || []
-const decodedCodes = codes ? codes.sort() : []
-
-const settings = {
-  prcodes: decodedCodes,
-}
-</script>
-
-<template>
- 
- <span
-    v-for="(prcode, index) in settings.prcodes"
-    :key="index"
-    class="not-last:mr-1"
-  >
-    <PrCode :prcode="prcode" v-if="!String(prcode).includes('+')" />
-    <span v-else >
-      <PrCode  v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" :prcode="splittedCode" />
-    </span>
-  </span>
-</template>
-
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import PrCode from './PrCode.vue';
+
+const props = defineProps({
+  prcodes: {
+    type: Object as PropType<string[] | null>,
+    default: null,
+    required: true,
+  },
+  isPdp: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
+
+const codes = props.prcodes || []
+const decodedCodes = codes ? codes.sort() : []
+
+const settings = {
+  prcodes: decodedCodes,
+}
+</script>
+
+<template>
+ 
+ <span
+    v-for="(prcode, index) in settings.prcodes"
+    :key="index"
+    class="not-last:mr-1"
+  >
+    <PrCode :prcode="prcode" v-if="!String(prcode).includes('+')" />
+    <span v-else >
+      <PrCode  v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" :prcode="splittedCode" />
+    </span>
+  </span>
+</template>
+

package/src/components/ProductDetailName.vue

@@ -1,53 +1,53 @@
-<script lang="ts" setup>
-import { PropType } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String as PropType< 'th'| 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: 'div',
-    required: true,
-  },
-  text: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  styles: {
-    type: String,
-    default: '',
-    required: false,
-  }
-})
-</script>
-
-<template>
-  <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64">
-    <span :class="styles && styles.length ? styles : 'mt-auto'">
-      <b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
-    </span>
-  </component>
-</template>
-
-
-<style>
-.detail-name {
-  @apply overflow-hidden relative;
-
-    span {
-      @apply block bg-white relative z-10 pr-1.5 w-full;
-
-      &:before {
-        /* // order: 2; */
-        @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
-        height: 1em;
-        white-space: nowrap;
-        font-weight: 100;
-        bottom: 2px;
-        flex: 1;
-      }
-    }
-
-
-}
-
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType< 'th'| 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'div',
+    required: true,
+  },
+  text: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  styles: {
+    type: String,
+    default: '',
+    required: false,
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64">
+    <span :class="styles && styles.length ? styles : 'mt-auto'">
+      <b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
+    </span>
+  </component>
+</template>
+
+
+<style>
+.detail-name {
+  @apply overflow-hidden relative;
+
+    span {
+      @apply block bg-white relative z-10 pr-1.5 w-full;
+
+      &:before {
+        /* // order: 2; */
+        @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
+        height: 1em;
+        white-space: nowrap;
+        font-weight: 100;
+        bottom: 2px;
+        flex: 1;
+      }
+    }
+
+
+}
+
 </style>