spoko-design-system 0.9.6 → 1.0.1

package/src/styles/base/typography.css

@@ -1,70 +1,70 @@
-@font-face {
-    font-family: 'vw_textregular';
-    src: url('/fonts/vwtext-regular-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'vw_textbold';
-    src: url('/fonts/vwtext-bold-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-.font-vw-textbold {
-    font-family: 'vw_textbold';
-    font-display: fallback;
-}
-
-@font-face {
-    font-family: 'vw_headbold';
-    src: url('/fonts/vwhead-bold-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-.font-vw-headbold {
-    font-family: 'vw_headbold' !important;
-    font-display: fallback;
-}
-
-@font-face {
-    font-family: 'vw_headregular';
-    src: url('/fonts/vwhead-regular-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-@font-face {
-    font-family: 'vw_headlight';
-    src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Nova Mono';
-    src: url('/fonts/nova-mono-v13-latin-regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap; 
-}
-
-@font-face {
-    font-family: 'vw_textlight';
-    src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-/* for some content which don't need to index in Google */
-[data-text]:before {
-    content: attr(data-text);
-}
+@font-face {
+    font-family: 'vw_textregular';
+    src: url('/fonts/vwtext-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'vw_textbold';
+    src: url('/fonts/vwtext-bold-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+.font-vw-textbold {
+    font-family: 'vw_textbold';
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: 'vw_headbold';
+    src: url('/fonts/vwhead-bold-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+.font-vw-headbold {
+    font-family: 'vw_headbold' !important;
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: 'vw_headregular';
+    src: url('/fonts/vwhead-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: 'vw_headlight';
+    src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Nova Mono';
+    src: url('/fonts/nova-mono-v13-latin-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap; 
+}
+
+@font-face {
+    font-family: 'vw_textlight';
+    src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* for some content which don't need to index in Google */
+[data-text]:before {
+    content: attr(data-text);
+}

package/src/styles/content.css

@@ -1,73 +1,73 @@
-.content {
-  .main-section {
-    &>h1,
-    &>h2,
-    &>h3,
-    &>h4,
-    &>h5,
-    &>h6 {
-      margin-top: 1.77rem;
-    }
-    &>h1 {
-      font-size: 22pt;
-      font-weight: 400;
-    }
-    &>h2 {
-      font-size: 17pt;
-      font-weight: 500;
-    }
-    &>h3 {
-      font-size: 15pt;
-    }
-    &>h4 {
-      font-size: 13pt;
-    }
-
-    &>ul {
-      @apply list-disc pl-5
-    }
-  }
-
-  &>h1, 
-  &>h2,
-  &>h3,
-  &>h4,
-  &>h5 {
-      font-weight: bold;
-      @apply font-textbold;
-  }
-
-  code {
-    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
-      Consolas, "Liberation Mono", "Courier New", monospace;
-  }
-
-  .component-preview {
-    @apply bg-blue-medium bg-opacity-5 px-4 py-4 mx-0 flex items-center overflow-x-auto sm:(p-8);
-    gap: 1rem;
-    border-radius: 0.33rem;
-    border: 1px solid theme("colors.slate.200");
-    resize: both;
-  }
-
-  .astro-code {
-    @apply mx-0 p-4;
-    border-radius: 0.44rem;
-  }
-}
-
-table {
-  @apply table-auto text-left border bg-white shadow-md;
-
-  tr {
-    @apply border;
-  }
-
-  td, th {
-    @apply px-4 py-2;
-  }
-
-  thead {
-    @apply bg-gray-100;
-  }
-}
+.content {
+  .main-section {
+    &>h1,
+    &>h2,
+    &>h3,
+    &>h4,
+    &>h5,
+    &>h6 {
+      margin-top: 1.77rem;
+    }
+    &>h1 {
+      font-size: 22pt;
+      font-weight: 400;
+    }
+    &>h2 {
+      font-size: 17pt;
+      font-weight: 500;
+    }
+    &>h3 {
+      font-size: 15pt;
+    }
+    &>h4 {
+      font-size: 13pt;
+    }
+
+    &>ul {
+      @apply list-disc pl-5
+    }
+  }
+
+  &>h1, 
+  &>h2,
+  &>h3,
+  &>h4,
+  &>h5 {
+      font-weight: bold;
+      @apply font-textbold;
+  }
+
+  code {
+    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+      Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .component-preview {
+    @apply bg-blue-medium bg-opacity-5 px-4 py-4 mx-0 flex items-center overflow-x-auto sm:(p-8);
+    gap: 1rem;
+    border-radius: 0.33rem;
+    border: 1px solid theme("colors.slate.200");
+    resize: both;
+  }
+
+  .astro-code {
+    @apply mx-0 p-4;
+    border-radius: 0.44rem;
+  }
+}
+
+table {
+  @apply table-auto text-left border bg-white shadow-md;
+
+  tr {
+    @apply border;
+  }
+
+  td, th {
+    @apply px-4 py-2;
+  }
+
+  thead {
+    @apply bg-gray-100;
+  }
+}

package/src/styles/main.css

@@ -1,7 +1,7 @@
-
-/* @import "variables"; */
-@import "base/typography";
-@import "base/base";
-@import "base/grid";
-  
-@import "content.css";
+
+/* @import "variables"; */
+@import "base/typography";
+@import "base/base";
+@import "base/grid";
+  
+@import "content.css";

package/src/types/Product.ts

@@ -1,32 +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;
+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

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

package/src/utils/category/getMainCategoryList.ts

@@ -1,31 +1,22 @@
 import type { CatObject  } from "@types/index";
 
-import i18next, { t } from "i18next";
 import { getApiCategories } from "@utils/api/getCategories";
 import { getSortedCategories } from "@utils/category/getSortedCategories";
 
 // Retrieve main categories:
 export const getMainCategoryList = async (locale: string = 'en'): Promise<CatObject[]> => {
-  // Set the selected language
-  await i18next.changeLanguage(locale);
-
   // Fetch categories from API
   const categories = await getApiCategories();
 
-  // Map categories with translations
-  const translatedCategories = categories.map((category) => {
-    const name = t(`cat.${category.slug}.name`);
-    const desc = i18next.exists(`cat.${category.slug}.desc`)
-      ? t(`cat.${category.slug}.desc`)
-      : '';
-
-    if (!desc) {
-      console.warn('No category description', category.slug, i18next.language);
-    }
-
-    return { ...category, name, desc };
+  // Use category data directly (English only)
+  const processedCategories = categories.map((category) => {
+    return {
+      ...category,
+      name: category.name || category.slug,
+      desc: category.desc || ''
+    };
   });
 
   // Sort and return processed categories
-  return translatedCategories.sort(getSortedCategories);
+  return processedCategories.sort(getSortedCategories);
 };

package/src/utils/product/getPriceFormatted.ts

@@ -1,16 +1,13 @@
-import i18next from "i18next";
-
-export const getPriceFormatted  = (product: any) => {
-    if (i18next.language === 'en') {
-      return  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price_eur, )
-    }
-    if (i18next.language === 'pl') {
-      return  new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(product.price_pln, )
-    }
-    else {
-      return 'no price'
-    }
-  }
-  
-
+export const getPriceFormatted  = (product: any) => {
+    // Default to EUR formatting for English-only design system
+    if (product.price_eur) {
+      return  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price_eur)
+    }
+    if (product.price_pln) {
+      return  new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(product.price_pln)
+    }
+    return 'no price'
+  }
+  
+
   export default getPriceFormatted;

package/src/utils/product/getProductChecklist.ts

@@ -1,17 +1,16 @@
-import { t } from "i18next";
-
-export const getProductCheckList = (productDetails) => {
-    if (!productDetails || !productDetails.length) {
-        return null;
-    }
-
-    const list = productDetails.filter(item => item.icon);
-
-    if (!list.length) {
-        return null;
-    }
-
-    return list.map(detail => t(`detail.value.${detail.value}`));
-}
-
-export default getProductCheckList;
+
+export const getProductCheckList = (productDetails) => {
+    if (!productDetails || !productDetails.length) {
+        return null;
+    }
+
+    const list = productDetails.filter(item => item.icon);
+
+    if (!list.length) {
+        return null;
+    }
+
+    return list.map(detail => detail.value || 'Detail');
+}
+
+export default getProductCheckList;

package/src/utils/product/useFormatProductNumber.ts

@@ -1,42 +1,42 @@
-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();
-
-interface FormattedNumbers {
-  standard: string;
-  dot: string;
-  dash: string;
-}
-
-export default function useFormatProductNumber(productNumber: string | null): { formattedNumbers: FormattedNumbers | null } {
-  if (!productNumber) return { formattedNumbers: null };
-
-  const formatProductNumber = (number: string, separator: string): string => {
-    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
-  };
-
-  const formattedNumbers: FormattedNumbers = {
-    standard: formatProductNumber(productNumber, '\u00A0'),
-    dot: formatProductNumber(productNumber, '.'),
-    dash: formatProductNumber(productNumber, '-')
-  };
-
-  return { formattedNumbers };
+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();
+
+interface FormattedNumbers {
+  standard: string;
+  dot: string;
+  dash: string;
+}
+
+export default function useFormatProductNumber(productNumber: string | null): { formattedNumbers: FormattedNumbers | null } {
+  if (!productNumber) return { formattedNumbers: null };
+
+  const formatProductNumber = (number: string, separator: string): string => {
+    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
+  };
+
+  const formattedNumbers: FormattedNumbers = {
+    standard: formatProductNumber(productNumber, '\u00A0'),
+    dot: formatProductNumber(productNumber, '.'),
+    dash: formatProductNumber(productNumber, '-')
+  };
+
+  return { formattedNumbers };
 }

package/src/utils/seo/getShorterDescription.ts

@@ -1,14 +1,14 @@
-const MAX_DESCRIPTION_LENGTH = 150;
-
-export const getShorterDescription = (description: string | null, limit = MAX_DESCRIPTION_LENGTH) => {
-  function cutString(s: string, n: number) {
-    const text = s.replace(/(\n)/g, " ");
-    const cut = text.indexOf('. ', n);
-    return cut === -1 ? text : `${text.substring(0, cut)}.`;
-  }
-
-  return description ? cutString(description, limit) || '' : '';
-  
-}
-
-export default getShorterDescription;
+const MAX_DESCRIPTION_LENGTH = 150;
+
+export const getShorterDescription = (description: string | null, limit = MAX_DESCRIPTION_LENGTH) => {
+  function cutString(s: string, n: number) {
+    const text = s.replace(/(\n)/g, " ");
+    const cut = text.indexOf('. ', n);
+    return cut === -1 ? text : `${text.substring(0, cut)}.`;
+  }
+
+  return description ? cutString(description, limit) || '' : '';
+  
+}
+
+export default getShorterDescription;

package/src/utils/text/formatDate.ts

@@ -1,6 +1,6 @@
-/* Format date  */
-
-
-export default function formatDate(date: Date ) {
-  return new Date(date);
+/* Format date  */
+
+
+export default function formatDate(date: Date ) {
+  return new Date(date);
 }

package/src/utils/text/formatLocaleNumber.ts

@@ -1,7 +1,6 @@
-/* Format numbers like details data: liters, measuring etc. */
-
-import i18next from "i18next";
-
-export default function formatLocaleNumber(number: number ) {
-  return  i18next.language === 'en' ? String(number).replace(/,/g, '.') : String(number);
+/* Format numbers like details data: liters, measuring etc. */
+
+export default function formatLocaleNumber(number: number ) {
+  // For English-only design system, always use dot notation
+  return String(number).replace(/,/g, '.');
 }

package/src/utils/text/formatPad.ts

@@ -1,13 +1,13 @@
-export const formatPad = (num: number, size: number) => {
-  return String(num).padStart(size, '0');
-}
-
-export default formatPad;
-// export const formatPad = (num: number, size: number) => {
-//   let productId = String(num)
-
-//   if (size < 10)
-//     while (productId.length < size) productId = `0${productId}`
-
-//   return productId
+export const formatPad = (num: number, size: number) => {
+  return String(num).padStart(size, '0');
+}
+
+export default formatPad;
+// export const formatPad = (num: number, size: number) => {
+//   let productId = String(num)
+
+//   if (size < 10)
+//     while (productId.length < size) productId = `0${productId}`
+
+//   return productId
 // }