spoko-design-system 0.8.0 → 0.8.1

package/src/components/Product/ProductImage.astro

@@ -1,41 +1,41 @@
----
-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 } = Astro.props as { imageObject: ImageObject; };
-
-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={imageObject.src}
-    alt={imageObject.alt}
-    height={Number(imageObject.height)} 
-    width={Number(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 } = Astro.props as { imageObject: ImageObject; };
+
+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={imageObject.src}
+    alt={imageObject.alt}
+    height={Number(imageObject.height)} 
+    width={Number(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/ProductLink.astro

@@ -1,101 +1,101 @@
----
-import type { Product } from 'types/index';
-
-interface Props {
-  productId?: number;
-  productObject?: Product;
-  locale: string;
-  index: number;
-  bigTile?: boolean;
-  loading?: "eager" | "lazy";
-  isShopProduct?: boolean;
-}
-
-const {
-  productId,
-  productObject,
-  bigTile,
-  locale,
-  index,
-  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 { getImageUrl } from '@utils/getImageUrl';
-import i18next, { t } from "i18next";
-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);
-
-// Określenie URL miniatury produktu
-const thumb = product ? (
-  isShopProduct
-    ? await getImageUrl(product.images?.[0]?.path || "", "SHOP")
-    : await getImageUrl(product.photo || "", `'ProductLink' ${product.number}`)
-) : "";
-
-// Tłumaczenie nazwy produktu jeśli dostępne
-const productTranslation = i18next.exists(`parts.${product?.number}.name`)
-  ? null
-  : productId ? await getProductTranslation(productId, product?.number || "") : null;
- 
-// const productName = product ? (
-//   isShopProduct
-//     ? (locale === "pl" ? product.name_pl : product.name_en)
-//     : productTranslation?.name || t(`parts.${product.number}.name`)
-// ) : "";
-
-const productName = product.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>
-
-  <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}
-    />
-
-    <ProductNumber productNumber={product.number} copyDisabled={true} />
-    
-    {index !== null && (
-      <>
-        <meta itemprop="position" content={index.toString()} />
-        <meta itemprop="name" content={nameFormatted} />
-      </>
-    )}
-  </div>
-)}
+---
+import type { Product } from 'types/index';
+
+interface Props {
+  productId?: number;
+  productObject?: Product;
+  locale: string;
+  index: number;
+  bigTile?: boolean;
+  loading?: "eager" | "lazy";
+  isShopProduct?: boolean;
+}
+
+const {
+  productId,
+  productObject,
+  bigTile,
+  locale,
+  index,
+  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 { getImageUrl } from '@utils/getImageUrl';
+import i18next, { t } from "i18next";
+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);
+
+// Określenie URL miniatury produktu
+const thumb = product ? (
+  isShopProduct
+    ? await getImageUrl(product.images?.[0]?.path || "", "SHOP")
+    : await getImageUrl(product.photo || "", `'ProductLink' ${product.number}`)
+) : "";
+
+// Tłumaczenie nazwy produktu jeśli dostępne
+const productTranslation = i18next.exists(`parts.${product?.number}.name`)
+  ? null
+  : productId ? await getProductTranslation(productId, product?.number || "") : null;
+ 
+// const productName = product ? (
+//   isShopProduct
+//     ? (locale === "pl" ? product.name_pl : product.name_en)
+//     : productTranslation?.name || t(`parts.${product.number}.name`)
+// ) : "";
+
+const productName = product.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>
+
+  <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}
+    />
+
+    <ProductNumber productNumber={product.number} copyDisabled={true} />
+    
+    {index !== null && (
+      <>
+        <meta itemprop="position" content={index.toString()} />
+        <meta itemprop="name" content={nameFormatted} />
+      </>
+    )}
+  </div>
+)}

package/src/components/Product/ProductLink.vue

@@ -1,60 +1,60 @@
-<template>
-    <div class="product-link" itemscope itemtype="https://schema.org/Product">
-      <div :class="[
-        bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'
-      ]">
-        <!-- Slot na ProductImage z Astro -->
-        <slot name="image">
-          <img src="/1x1.png" class="bg-neutral-lightest/70" :alt="productName" />
-        </slot>
-      </div>
-  
-      <div :class="[bigTile ? '' : 'sm:pl-4']">
-        <p v-if="price" class="block mb-2 font-600 font-headbold text-5">
-          {{ price }}
-        </p>
-  
-        <a 
-          class="product-link--url"
-          :href="url"
-          itemprop="url"
-          :title="productNumber"
-          v-html="nameFormatted"
-        />
-  
-        <ProductNumber 
-          :productNumber="productNumber" 
-          :copyDisabled="true" 
-        />
-        
-        <template v-if="index !== null">
-          <meta itemprop="position" :content="index.toString()" />
-          <meta itemprop="name" :content="nameFormatted" />
-        </template>
-      </div>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { computed } from 'vue'
-  import { ProductNumber } from 'spoko-design-system'
-  import { removeSemicolon } from 'spoko-design-system'
-  
-  interface Props {
-    productName: string
-    productNumber: string
-    url: string
-    price?: string
-    bigTile?: boolean
-    index?: number
-  }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    bigTile: false,
-    index: null,
-  })
-  
-  const nameFormatted = computed(() => {
-    return removeSemicolon(props.productName.toString())
-  })
+<template>
+    <div class="product-link" itemscope itemtype="https://schema.org/Product">
+      <div :class="[
+        bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'
+      ]">
+        <!-- Slot na ProductImage z Astro -->
+        <slot name="image">
+          <img src="/1x1.png" class="bg-neutral-lightest/70" :alt="productName" />
+        </slot>
+      </div>
+  
+      <div :class="[bigTile ? '' : 'sm:pl-4']">
+        <p v-if="price" class="block mb-2 font-600 font-headbold text-5">
+          {{ price }}
+        </p>
+  
+        <a 
+          class="product-link--url"
+          :href="url"
+          itemprop="url"
+          :title="productNumber"
+          v-html="nameFormatted"
+        />
+  
+        <ProductNumber 
+          :productNumber="productNumber" 
+          :copyDisabled="true" 
+        />
+        
+        <template v-if="index !== null">
+          <meta itemprop="position" :content="index.toString()" />
+          <meta itemprop="name" :content="nameFormatted" />
+        </template>
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { computed } from 'vue'
+  import { ProductNumber } from 'spoko-design-system'
+  import { removeSemicolon } from 'spoko-design-system'
+  
+  interface Props {
+    productName: string
+    productNumber: string
+    url: string
+    price?: string
+    bigTile?: boolean
+    index?: number
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    bigTile: false,
+    index: null,
+  })
+  
+  const nameFormatted = computed(() => {
+    return removeSemicolon(props.productName.toString())
+  })
   </script>

package/src/components/Product/ProductLinkInfo.astro

@@ -1,38 +1,38 @@
----
-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} />
-      </>
-    )}
+---
+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,60 +1,60 @@
----
-import ButtonCopy from '../ButtonCopy.astro';
-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=""
-        />
-      )}
-    </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>
-)}
+---
+import ButtonCopy from '../ButtonCopy.astro';
+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=""
+        />
+      )}
+    </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>
+)}