spoko-design-system 0.2.41 → 0.2.42

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-600 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-600 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,5 +1,5 @@
-
-declare module '*.astro' {
-    const component: any;
-    export default component;
+
+declare module '*.astro' {
+    const component: any;
+    export default component;
   }

package/src/types/index.ts

@@ -0,0 +1,237 @@
+/// <reference types="vite/client" />
+
+export interface Breadcrumb {
+  name: string,
+  path: string
+}
+
+
+export interface Navigation {
+  currentIndex: number | null
+  prev: Product | null
+  next: Product | null
+}
+
+export interface ResponsiveImage {
+  media: string
+  src: string
+}
+
+export interface SubCategory {
+  id: number
+  name: string
+  parent_id: number
+  title?: string
+  desc?: string
+  slug: string
+  sort: number | null
+  description?: string
+  hasProducts: boolean
+  photo?: string | null
+  children?: SubCategory[]
+  seoTitle?: string
+}
+
+export interface Category {
+  id: number
+  parent_id: number | null
+  title?: string
+  slug: string
+  sort: number | null
+  description?: string
+  hasProducts: boolean
+  photo?: string | null
+  children: SubCategory[]
+  seoTitle?: string
+}
+
+export interface CatObject {
+  id: number
+  name: string
+  desc: string
+  parent_id: number | null
+  title?: string
+  slug: string
+  sort?: number | null
+  description?: string
+  hasProducts: boolean
+  photo?: string | null
+  children: SubCategory[]
+  seoTitle?: string
+}
+
+export interface CatLevels {
+  lvl1: Category|CatObject | null
+  lvl2: CatObject | null
+  lvl3: CatObject | null
+}
+export interface CatInfo {
+  category: CatObject | null
+  subcategory: CatObject | null
+  subsubcategory: CatObject | null
+}
+
+export interface Replacement {
+  date: string | null
+  info: string | null
+  number: string
+  prcodes: string[] | null
+  manufacturer: string | null
+}
+
+export interface Color {
+  id: Number
+  slug: String
+  name?: String
+}
+
+export interface DetailList {
+  name: string
+  id: string
+  value: string | number[] | Color[]
+  translated: boolean
+  icon: boolean | null
+  isArrayValue: boolean | null
+}
+
+export interface importantDetail {
+  name: string
+  id: string
+  value: string | number[]
+  translated: boolean
+  icon: boolean | null
+  isArrayValue: boolean | null
+}
+
+export interface Detail {
+  name: string
+  value: string | number[]
+  translated: boolean
+  icon: boolean | null
+  isArrayValue: boolean | null
+}
+
+export interface DetailObject {
+  importantDetails: importantDetail[]
+  list: DetailList[],
+  checklist: DetailList[]
+}
+
+
+export interface Image {
+  id: number
+  path: string
+}
+
+export interface ImageType {
+  id: number
+  path: string
+}
+
+export interface ImageApi {
+  id: number
+  slug: string
+  path: string
+}
+
+export interface ImageObject {
+  id: number
+  path: string
+}
+
+export interface ProductFile {
+  id: number
+  name: string
+  slug: string
+  path: string
+  type: number
+}
+
+export interface Product {
+  id: number
+  number: string
+  info: string | null
+  date: string | null
+  prcodes: string[] | null
+  engines: string[] | null
+  engine_type: EngineType[] | null
+  manufacturer: string[] | null
+  manufacturer_number: string | null
+  related: string[] | null
+  color_ids: string[] | null
+  position: string[] | null
+  model: string[] | null
+  replacement: Replacement[] | null
+  details: DetailList[] | null
+  photo: string
+  files: number[] | null
+  images: Image[] | null
+  category_id: number
+  hand_drive: number | null
+  materials: MaterialsObject[] | null
+  sort: number
+  created_at: string
+  updated_at: string
+}
+
+export interface MaterialsObject {
+  name: string,
+  list: Material[]
+}
+
+
+export interface Product2FullSearch {
+  number: string
+  category_id: number
+  photo: string
+  hand_drive: number | null
+  manufacturer: string[] | null
+  date: string | null
+  text: string
+  details: DetailList[] | null
+}
+
+export interface Link {
+  path: String
+  name: String
+}
+export interface EngineType {
+  id: Number
+  type: String
+}
+
+export interface Model {
+  id: Number
+  slug: String
+  sort: Number
+  name: String
+}
+
+export interface Material {
+  id: Number
+  name: String
+  slug: String
+  sort: Number | null
+  value?: String | null
+}
+
+export interface ProductImage {
+  title: string
+  alt: string
+  link: string
+  style?: string
+  __typename: string
+}
+
+export interface Position {
+  id: number
+  slug: string
+  sort: number
+  name: string
+}
+
+export interface Hreflang {
+  rel: 'alternate' | 'canonical'
+  href: string
+  hreflang: 'en' | 'pl' | 'x-default'
+}

package/src/utils/api/getCategories.ts

@@ -0,0 +1,3 @@
+import { getData } from "@utils/getData"
+
+export const getApiCategories = await getData('categories')

package/src/utils/category/getMainCategoryList.ts

@@ -0,0 +1,31 @@
+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 };
+  });
+
+  // Sort and return processed categories
+  return translatedCategories.sort(getSortedCategories);
+};

package/src/utils/category/getSortedCategories.ts

@@ -0,0 +1,11 @@
+import type { CatObject, SubCategory } from "@types/index";
+
+
+// compareFn
+export const getSortedCategories = (a: CatObject|SubCategory, b: CatObject|SubCategory) => {
+  if (a.sort && b.sort)
+    return (a.sort - b.sort)
+
+  else
+    return 0
+}

package/src/utils/getData.ts

@@ -0,0 +1,52 @@
+import fs from 'node:fs';
+import fetch from 'node-fetch';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const API_URL = process.env.API_URL || '';
+const CACHE_DIR = process.env.CACHE_DIR || './.cache';
+const version = new Date().toISOString().split('T')[0]; // 'YYYY-MM-DD' daily version to refresh cache from Cloudflare
+
+export const getData = async (type: string): Promise<any | null> => {
+  if (!API_URL) {
+    console.error("API_URL is not defined in .env");
+    return null;
+  }
+
+  const cacheFilePath = `${CACHE_DIR}/${type}.json`;
+  const apiUrl = `${API_URL}${type}?version=${version}`;
+
+  // Ensure cache directory exists
+  if (!fs.existsSync(CACHE_DIR)) {
+    fs.mkdirSync(CACHE_DIR, { recursive: true });
+  }
+
+  // Check if cached file exists
+  if (fs.existsSync(cacheFilePath)) {
+    try {
+      const rawData = fs.readFileSync(cacheFilePath, 'utf-8');
+      return JSON.parse(rawData);
+    } catch (error) {
+      console.error("Failed to read or parse cached data:", error);
+      return null;
+    }
+  }
+
+  // Fetch data from API and cache it
+  try {
+    const response = await fetch(apiUrl);
+    const jsonObject = await response.json();
+
+    if (jsonObject.success) {
+      fs.writeFileSync(cacheFilePath, JSON.stringify(jsonObject.data, null, 2));
+      return jsonObject.data;
+    } else {
+      console.warn(`API response unsuccessful for type: ${type}`);
+      return null;
+    }
+  } catch (error) {
+    console.error("Error fetching data from API:", error);
+    return null;
+  }
+};

package/src/utils/product/getPriceFormatted.ts

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

package/src/utils/product/getProductChecklist.ts

@@ -1,15 +1,15 @@
-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}`));
-}
+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}`));
+}

package/src/utils/seo/getShorterDescription.ts

@@ -1,12 +1,12 @@
-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) || '' : '';
-  
-}
+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) || '' : '';
+  
+}

package/src/utils/text/formatDate.ts

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

package/src/utils/text/formatLocaleNumber.ts

@@ -1,7 +1,7 @@
-/* Format numbers like details data: liters, measuring etc. */
-
-import i18next from "i18next";
-
-export function formatLocaleNumber(number: number ) {
-  return  i18next.language === 'en' ? String(number).replace(/,/g, '.') : String(number);
+/* Format numbers like details data: liters, measuring etc. */
+
+import i18next from "i18next";
+
+export function formatLocaleNumber(number: number ) {
+  return  i18next.language === 'en' ? String(number).replace(/,/g, '.') : String(number);
 }