spoko-design-system 1.9.0 → 1.9.2

package/src/utils/product/getEngineTooltipContent.ts

@@ -0,0 +1,158 @@
+/**
+ * Generates HTML content for engine tooltip
+ * Used by both SSR (Astro) and CSR (Tippy.js delegation)
+ */
+
+export interface Engine {
+  id?: number;
+  code: string;
+  name?: string;
+  info?: string | null;
+  serie?: {
+    value: string;
+    label: string;
+  };
+  type?: {
+    value: string;
+    translated: string;
+    label: string;
+  };
+  power?: {
+    kw: number;
+    ps: number;
+    ps_label: string;
+    label: string;
+  };
+  date?: {
+    value: string;
+    label: string;
+  };
+  displacement?: {
+    value: number;
+    label: string;
+  };
+  compression_ratio?: {
+    value: string | null;
+    label: string;
+  };
+  valves?: {
+    value: number | null;
+    label: string;
+  };
+  euro?: {
+    value: number;
+    label: string;
+  };
+  pivot?: any;
+
+  // Backward compatibility - old flat structure
+  kw?: number;
+  ps?: number;
+  cc?: number;
+  c_ratio?: string | null;
+}
+
+export interface EngineTranslations {
+  power?: string;
+  cc?: string;
+  compressionRatio?: string;
+  valves?: string;
+  euro?: string;
+  horsepowerUnit?: string;
+}
+
+const defaultTranslations: EngineTranslations = {
+  power: 'Power',
+  cc: 'CC',
+  compressionRatio: 'C. Ratio',
+  valves: 'Valves',
+  euro: 'Euro',
+  horsepowerUnit: 'PS',
+};
+
+// Helper to get series value (supports both old and new API)
+function getSerieValue(engine: Engine): string {
+  if (engine.serie && typeof engine.serie === 'object') {
+    return engine.serie.value;
+  }
+  // Backward compatibility - old API
+  const serie = engine.serie as any;
+  if (!serie) return '';
+  return serie === 3 ? 'EA288' : serie === 2 ? 'EA189' : `Serie ${serie}`;
+}
+
+export function getEngineTooltipContent(engine: Engine, translations: EngineTranslations = {}): string {
+  const t = { ...defaultTranslations, ...translations };
+
+  // Header section
+  let headerContent = `<strong>${engine.name || engine.code}</strong>`;
+  if (engine.info) {
+    headerContent += ` <span class="info">${engine.info}</span>`;
+  }
+  const serieValue = getSerieValue(engine);
+  if (serieValue) {
+    headerContent += `<div class="series-badge">${serieValue}</div>`;
+  }
+
+  const header = `<div class="tooltip-header">${headerContent}</div>`;
+
+  // Specs rows
+  const rows: string[] = [];
+
+  // Power (supports both new and old API structure)
+  const power = engine.power;
+  const oldKw = engine.kw;
+  const oldPs = engine.ps;
+
+  if (power || oldKw || oldPs) {
+    const powerValues: string[] = [];
+    const kw = power?.kw || oldKw;
+    const ps = power?.ps || oldPs;
+    const psLabel = power?.ps_label || t.horsepowerUnit;
+    const powerLabel = power?.label || t.power;
+
+    if (kw) powerValues.push(`${kw} kW`);
+    if (ps) powerValues.push(`${ps} ${psLabel}`);
+
+    if (powerValues.length) {
+      rows.push(
+        `<div class="tooltip-row"><span class="tooltip-label">${powerLabel}:</span><span class="tooltip-value">${powerValues.join(' / ')}</span></div>`
+      );
+    }
+  }
+
+  // Displacement (CC)
+  const displacement = engine.displacement;
+  const oldCc = engine.cc;
+
+  if (displacement || oldCc) {
+    const ccValue = displacement?.value || oldCc;
+    const ccLabel = displacement?.label || t.cc;
+
+    if (ccValue) {
+      rows.push(
+        `<div class="tooltip-row"><span class="tooltip-label">${ccLabel}:</span><span class="tooltip-value">${ccValue} cm³</span></div>`
+      );
+    }
+  }
+
+  // Euro standard
+  const euro = engine.euro;
+
+  if (euro && typeof euro === 'object') {
+    if (euro.value) {
+      rows.push(
+        `<div class="tooltip-row"><span class="tooltip-label">${euro.label}:</span><span class="tooltip-value">Euro ${euro.value}</span></div>`
+      );
+    }
+  } else if (euro) {
+    // Backward compatibility - old API
+    rows.push(
+      `<div class="tooltip-row"><span class="tooltip-label">${t.euro}:</span><span class="tooltip-value">Euro ${euro}</span></div>`
+    );
+  }
+
+  const specsContent = rows.length ? `<div class="tooltip-specs">${rows.join('')}</div>` : '';
+
+  return header + specsContent;
+}

package/src/utils/product/getPriceFormatted.ts

@@ -6,14 +6,10 @@ interface Product {
 export const getPriceFormatted = (product: Product) => {
   // 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
-    );
+    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 new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(product.price_pln);
   }
   return 'no price';
 };

package/src/utils/product/useFormatProductNumber.ts

@@ -20,10 +20,7 @@ export default function useFormatProductNumber(productNumber: string | null): {
     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`
-      );
+      formatted = formatted.replace(LIQUIDS_PATTERN, `$1${separator}$2${separator}$3${separator}$4`);
     } else if (number.length >= 13) {
       formatted = formatted.replace(
         WHEELS_EMBLEMS_PATTERN,

package/src/utils/seo/getShorterDescription.ts

@@ -1,9 +1,6 @@
 const MAX_DESCRIPTION_LENGTH = 150;
 
-export const getShorterDescription = (
-  description: string | null,
-  limit = MAX_DESCRIPTION_LENGTH
-) => {
+export const getShorterDescription = (description: string | null, limit = MAX_DESCRIPTION_LENGTH) => {
   function cutString(s: string, n: number) {
     const text = s.replaceAll('\n', ' ');
     const cut = text.indexOf('. ', n);

package/uno-config/index.ts

@@ -207,7 +207,7 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       presetAttributify(),
       presetIcons({
         scale: 1.2,
-        warn: true, // Show warnings for actual missing icons
+        warn: false, // Disabled to prevent false positives from JS code scanning
         prefix: 'i-',
         extraProperties: {
           'display': 'inline-block',

package/src/components/Product/ProductEngine.vue

@@ -1,240 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from 'vue';
-import type { PropType } from 'vue';
-import tippy, { type Instance } from 'tippy.js';
-import 'tippy.js/dist/tippy.css';
-import '../../styles/tippy-theme.css';
-
-/*
-  VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer Engine Code
-  Displays engine code with detailed tooltip showing: name, power, displacement, dates, etc.
-*/
-
-interface Engine {
-  id?: number;
-  code: string;
-  name?: string;
-  info?: string | null;
-  serie?: {
-    value: string;
-    label: string;
-  };
-  type?: {
-    value: string;
-    translated: string;
-    label: string;
-  };
-  power?: {
-    kw: number;
-    ps: number;
-    ps_label: string;
-    label: string;
-  };
-  date?: {
-    value: string;
-    label: string;
-  };
-  displacement?: {
-    value: number;
-    label: string;
-  };
-  compression_ratio?: {
-    value: string | null;
-    label: string;
-  };
-  valves?: {
-    value: number | null;
-    label: string;
-  };
-  euro?: {
-    value: number;
-    label: string;
-  };
-  pivot?: any;
-
-  // Backward compatibility - old flat structure
-  kw?: number;
-  ps?: number;
-  cc?: number;
-  c_ratio?: string | null;
-}
-
-const props = defineProps({
-  engine: {
-    type: Object as PropType<Engine>,
-    required: true,
-  },
-  showComma: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  translations: {
-    type: Object as PropType<{
-      power?: string;
-      cc?: string;
-      compressionRatio?: string;
-      valves?: string;
-      euro?: string;
-      horsepowerUnit?: string; // 'PS' for German, 'KM' for Polish, 'HP' for English
-    }>,
-    default: () => ({
-      power: 'Power',
-      cc: 'CC',
-      compressionRatio: 'C. Ratio',
-      valves: 'Valves',
-      euro: 'Euro',
-      horsepowerUnit: 'PS',
-    }),
-    required: false,
-  },
-});
-
-const engineRef = ref<HTMLElement | null>(null);
-let tippyInstance: Instance | null = null;
-
-// Helper to get series value (supports both old and new API)
-const getSerieValue = (): string => {
-  if (props.engine.serie && typeof props.engine.serie === 'object') {
-    return props.engine.serie.value;
-  }
-  // Backward compatibility - old API
-  const serie = props.engine.serie as any;
-  if (!serie) return '';
-  return serie === 3 ? 'EA288' : serie === 2 ? 'EA189' : `Serie ${serie}`;
-};
-
-// Generate tooltip HTML content
-const getTooltipContent = () => {
-  // Header section
-  let headerContent = `<strong>${props.engine.name || props.engine.code}</strong>`;
-  if (props.engine.info) {
-    headerContent += ` <span class="info">${props.engine.info}</span>`;
-  }
-  const serieValue = getSerieValue();
-  if (serieValue) {
-    headerContent += `<div class="series-badge">${serieValue}</div>`;
-  }
-
-  const header = `<div class="tooltip-header">${headerContent}</div>`;
-
-  // Specs rows
-  const rows = [];
-
-  // Power (supports both new and old API structure)
-  const power = props.engine.power;
-  const oldKw = props.engine.kw;
-  const oldPs = props.engine.ps;
-
-  if (power || oldKw || oldPs) {
-    const powerValues = [];
-    const kw = power?.kw || oldKw;
-    const ps = power?.ps || oldPs;
-    const psLabel = power?.ps_label || props.translations.horsepowerUnit;
-    const powerLabel = power?.label || props.translations.power;
-
-    if (kw) powerValues.push(`${kw} kW`);
-    if (ps) powerValues.push(`${ps} ${psLabel}`);
-
-    if (powerValues.length) {
-      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${powerLabel}:</span><span class="tooltip-value">${powerValues.join(' / ')}</span></div>`);
-    }
-  }
-
-  // Displacement (CC)
-  const displacement = props.engine.displacement;
-  const oldCc = props.engine.cc;
-
-  if (displacement || oldCc) {
-    const ccValue = displacement?.value || oldCc;
-    const ccLabel = displacement?.label || props.translations.cc;
-
-    if (ccValue) {
-      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${ccLabel}:</span><span class="tooltip-value">${ccValue} cm³</span></div>`);
-    }
-  }
-
-  // Euro standard
-  const euro = props.engine.euro;
-
-  if (euro && typeof euro === 'object') {
-    if (euro.value) {
-      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${euro.label}:</span><span class="tooltip-value">Euro ${euro.value}</span></div>`);
-    }
-  } else if (euro) {
-    // Backward compatibility - old API
-    rows.push(`<div class="tooltip-row"><span class="tooltip-label">${props.translations.euro}:</span><span class="tooltip-value">Euro ${euro}</span></div>`);
-  }
-
-  const specsContent = rows.length
-    ? `<div class="tooltip-specs">${rows.join('')}</div>`
-    : '';
-
-  return header + specsContent;
-};
-
-onMounted(() => {
-  if (engineRef.value) {
-    tippyInstance = tippy(engineRef.value, {
-      content: getTooltipContent(),
-      allowHTML: true,
-      theme: 'sds',
-      placement: 'top',
-      arrow: true,
-      animation: 'shift-away',
-      duration: [200, 150],
-      maxWidth: 280,
-    });
-  }
-});
-
-onUnmounted(() => {
-  if (tippyInstance) {
-    tippyInstance.destroy();
-  }
-});
-</script>
-
-<template>
-  <span
-    ref="engineRef"
-    class="engine-code"
-    :class="`engine-code-${engine.code}`"
-  >
-    {{ engine.code }}<span v-if="showComma">,</span>
-  </span>
-</template>
-
-<style scoped>
-/* Engine Code Styles */
-.engine-code {
-  @apply inline-block mr-1;
-  @apply underline decoration-dotted underline-offset-4 py-0.5;
-  @apply decoration-neutral-light cursor-default;
-  @apply transition-colors duration-200;
-}
-
-.engine-code:hover {
-  @apply decoration-blue-darker dark:decoration-blue-light;
-}
-
-/* Semantic Engine Code Colors */
-/* GTI Engines - Red */
-.engine-code-CAVE,
-.engine-code-CTHE,
-.engine-code-DAJA,
-.engine-code-DAYB {
-  @apply text-red-600 dark:text-red-500;
-}
-
-/* WRC R Engine - Blue */
-.engine-code-CDLJ {
-  @apply text-blue-600 dark:text-blue-500;
-}
-
-/* Special Blue Engines */
-.engine-code-CPTA,
-.engine-code-CZEA {
-  @apply text-blue-700 dark:text-blue-600;
-}
-</style>

package/src/components/Product/ProductEngines.vue

@@ -1,116 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import type { PropType } from 'vue';
-import ProductEngine from './ProductEngine.vue';
-
-/*
-  ProductEngines wrapper component
-  Displays a list of engine codes with tooltips
-*/
-
-interface Engine {
-  id?: number;
-  code: string;
-  name?: string;
-  info?: string | null;
-  serie?: {
-    value: string;
-    label: string;
-  } | number;
-  type?: {
-    value: string;
-    translated: string;
-    label: string;
-  };
-  power?: {
-    kw: number;
-    ps: number;
-    ps_label: string;
-    label: string;
-  };
-  date?: {
-    value: string;
-    label: string;
-  };
-  displacement?: {
-    value: number;
-    label: string;
-  };
-  compression_ratio?: {
-    value: string | null;
-    label: string;
-  };
-  valves?: {
-    value: number | null;
-    label: string;
-  };
-  euro?: {
-    value: number;
-    label: string;
-  } | number;
-  pivot?: any;
-
-  // Backward compatibility
-  kw?: number;
-  ps?: number;
-  cc?: number;
-}
-
-const props = defineProps({
-  engines: {
-    type: Array as PropType<Engine[]>,
-    default: () => [],
-    required: true,
-  },
-  isPdp: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  translations: {
-    type: Object as PropType<{
-      power?: string;
-      cc?: string;
-      compressionRatio?: string;
-      valves?: string;
-      euro?: string;
-      horsepowerUnit?: string;
-    }>,
-    default: () => ({
-      power: 'Power',
-      cc: 'CC',
-      compressionRatio: 'C. Ratio',
-      valves: 'Valves',
-      euro: 'Euro',
-      horsepowerUnit: 'PS',
-    }),
-    required: false,
-  },
-});
-
-// Sort engines by code
-const sortedEngines = computed(() => {
-  if (!props.engines || !props.engines.length) return [];
-  return [...props.engines].sort((a, b) => {
-    return (a.code || '').localeCompare(b.code || '');
-  });
-});
-</script>
-
-<template>
-  <div v-if="sortedEngines.length" class="engines-list inline-flex flex-wrap items-center gap-x-0.5">
-    <ProductEngine
-      v-for="(engine, index) in sortedEngines"
-      :key="engine.id || index"
-      :engine="engine"
-      :show-comma="index !== sortedEngines.length - 1"
-      :translations="translations"
-    />
-  </div>
-</template>
-
-<style scoped>
-.engines-list {
-  @apply leading-none;
-}
-</style>