spoko-design-system 1.9.0 → 1.9.2

package/src/pages/components/product-engine.mdx

@@ -2,28 +2,46 @@
 title: "ProductEngine"
 layout: "../../layouts/MainLayout.astro"
 ---
-import ProductEngine from '../../components/Product/ProductEngine.vue'
-import ProductEngines from '../../components/Product/ProductEngines.vue'
+import ProductEngine from '../../components/Product/ProductEngine.astro'
+import ProductEngines from '../../components/Product/ProductEngines.astro'
 
 # ProductEngine
 
 Engine codes with detailed tooltips showing specifications like power, displacement, dates, and more.
 
+**⚡ Performance-optimized**: Uses Tippy.js delegation pattern - one global script handles all tooltips efficiently.
+
+**🔍 SEO-friendly**: Engine codes rendered as static HTML (no client-side hydration required).
+
 ## Single Engine Code
 
 Display a single engine code with tooltip showing detailed engine information.
 
-### import:
+### Setup:
+
+**1. Import the component:**
 
 ```js
-import ProductEngine from 'spoko-design-system/src/components/Product/ProductEngine.vue'
+import { ProductEngine } from 'spoko-design-system'
+```
+
+**2. Initialize tooltips in your layout (once):**
+
+```astro
+---
+// In your layout file (e.g., Layout.astro)
+---
+<script>
+  import { initTooltips } from 'spoko-design-system';
+  initTooltips();
+</script>
 ```
 
 ### Basic Usage (New API Structure):
 
 <div class="component-preview">
      <div class="bg-white p-6 w-full flex gap-2">
-          <ProductEngine client:load engine={{
+          <ProductEngine engine={{
                code: "CAYA",
                name: "1.6 TDI",
                serie: { value: "EA189", label: "Seria silnika" },
@@ -31,7 +49,7 @@ import ProductEngine from 'spoko-design-system/src/components/Product/ProductEng
                displacement: { value: 1598, label: "Pojemność" },
                euro: { value: 5, label: "Norma Euro" }
           }} />
-          <ProductEngine client:load engine={{
+          <ProductEngine engine={{
                code: "CAYB",
                name: "1.6 TDI",
                serie: { value: "EA189", label: "Seria silnika" },
@@ -42,21 +60,25 @@ import ProductEngine from 'spoko-design-system/src/components/Product/ProductEng
      </div>
 </div>
 
-```vue
+```astro
+---
+import { ProductEngine } from 'spoko-design-system';
+---
+
 <!-- New API structure (with built-in translations) -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CAYA',
   name: '1.6 TDI',
   serie: { value: 'EA189', label: 'Seria silnika' },
   power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1598, label: 'Pojemność' },
   euro: { value: 5, label: 'Norma Euro' }
-}" />
+}} />
 
 <!-- Old API structure (backward compatible) -->
 <ProductEngine
-  :engine="{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }"
-  :translations="{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }"
+  engine={{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }}
+  translations={{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }}
 />
 ```
 
@@ -68,7 +90,7 @@ Engine codes for special editions are automatically color-coded:
      <div class="bg-white p-6 w-full flex flex-wrap gap-3">
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">GTI Engine (Red)</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CAVE",
                     name: "1.4 TSI",
                     power: { kw: 132, ps: 180, ps_label: "KM", label: "Moc" },
@@ -78,7 +100,7 @@ Engine codes for special editions are automatically color-coded:
           </div>
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">WRC Engine (Blue)</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CDLJ",
                     name: "1.6 TDI",
                     power: { kw: 165, ps: 220, ps_label: "KM", label: "Moc" },
@@ -88,7 +110,7 @@ Engine codes for special editions are automatically color-coded:
           </div>
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">Special Blue</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CPTA",
                     name: "1.0 TSI",
                     power: { kw: 70, ps: 95, ps_label: "KM", label: "Moc" },
@@ -99,41 +121,41 @@ Engine codes for special editions are automatically color-coded:
      </div>
 </div>
 
-```vue
+```astro
 <!-- GTI Engine - Red -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CAVE',
   name: '1.4 TSI',
   power: { kw: 132, ps: 180, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1390, label: 'Pojemność' },
   euro: { value: 5, label: 'Norma Euro' }
-}" />
+}} />
 
 <!-- WRC Engine - Blue -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CDLJ',
   name: '1.6 TDI',
   power: { kw: 165, ps: 220, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1598, label: 'Pojemność' },
   euro: { value: 6, label: 'Norma Euro' }
-}" />
+}} />
 ```
 
 ## Engine List
 
 Display multiple engine codes from an array (from API response).
 
-### import:
+### Import:
 
 ```js
-import ProductEngines from 'spoko-design-system/src/components/Product/ProductEngines.vue'
+import { ProductEngines } from 'spoko-design-system'
 ```
 
 ### Usage:
 
 <div class="component-preview">
      <div class="bg-white p-6 w-full">
-          <ProductEngines client:load engines={[
+          <ProductEngines engines={[
                {
                     id: 13,
                     code: "CAYA",
@@ -165,8 +187,12 @@ import ProductEngines from 'spoko-design-system/src/components/Product/ProductEn
      </div>
 </div>
 
-```vue
-<ProductEngines :engines="[
+```astro
+---
+import { ProductEngines } from 'spoko-design-system';
+---
+
+<ProductEngines engines={[
   {
     id: 13,
     code: 'CAYA',
@@ -185,17 +211,17 @@ import ProductEngines from 'spoko-design-system/src/components/Product/ProductEn
     displacement: { value: 1598, label: 'Pojemność' },
     euro: { value: 5, label: 'Norma Euro' }
   }
-]" />
+]} />
 ```
 
 ### With API Data:
 
 When using data from the API, pass the `part_engines` array directly. The component automatically extracts translations from the nested structure:
 
-```vue
+```astro
 <ProductEngines
-  :engines="product.part_engines"
-  :isPdp="true"
+  engines={product.part_engines}
+  isPdp={true}
 />
 ```
 
@@ -334,7 +360,9 @@ When using data from the API, pass the `part_engines` array directly. The compon
 
 ## Features
 
-- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js)
+- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js delegation)
+- ✅ **Performance Optimized**: One global script handles all tooltips efficiently
+- ✅ **SEO-Friendly**: Engine codes rendered as static HTML (no hydration)
 - ✅ **API-Driven Translations**: Labels and units come directly from API
 - ✅ **Multi-language**: Supports Polish (KM), German (PS), English (HP)
 - ✅ **Two-Tone Design**: Dark blue header with light body for better hierarchy
@@ -342,7 +370,6 @@ When using data from the API, pass the `part_engines` array directly. The compon
 - ✅ **Clean Layout**: Flexbox-based design with semantic CSS classes
 - ✅ **Smart Data**: Only shows relevant fields (power, displacement, euro)
 - ✅ **Auto-sorting**: Engines automatically sorted alphabetically by code
-- ✅ **SEO-Friendly**: Static HTML enhanced with client-side tooltips
 - ✅ **Backward Compatible**: Works with both new and old API structures
 - ✅ **Touch Friendly**: Works on mobile devices
 
@@ -358,8 +385,10 @@ Special engine codes are automatically color-coded:
 
 ## Notes
 
+- **Setup required**: Call `initTooltips()` once in your layout to enable tooltips
 - Hover over any engine code to see full specifications in a detailed tooltip
-- Tooltips use Tippy.js with custom two-tone SDS theme
+- Tooltips use Tippy.js delegation pattern (one global handler for all tooltips)
+- **Performance**: No client-side hydration needed - pure Astro components
 - **New API structure**: Labels come from API (e.g., "Moc", "Pojemność", "KM")
 - **No manual translations needed**: The API provides all labels and units
 - The component automatically extracts series value from nested structure
@@ -368,3 +397,18 @@ Special engine codes are automatically color-coded:
 - Commas between engine codes are automatically handled in lists
 - **Backward compatible**: Still works with old flat API structure
 - Tooltip has dark blue header (#001e50) with light gray body (#f3f4f6)
+
+## Migration from Vue to Astro
+
+If upgrading from the old Vue version:
+
+1. **Remove `client:load`** directive from all ProductEngine/ProductEngines usage
+2. **Add tooltip initialization** to your layout:
+   ```astro
+   <script>
+     import { initTooltips } from 'spoko-design-system';
+     initTooltips();
+   </script>
+   ```
+3. **Update imports** to use Astro components (automatically handled by package exports)
+4. **No other changes needed** - props and API structure remain the same

package/src/pages/core/typography.astro

@@ -15,16 +15,12 @@ const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing';
       {
         fonts.map(([name, family]) => (
           <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
-            <div class={`font-${name} text-3xl mb-4 min-h-[120px] flex items-center`}>
-              {loremText}
-            </div>
+            <div class={`font-${name} text-3xl mb-4 min-h-[120px] flex items-center`}>{loremText}</div>
 
             <div class="border-t pt-4">
               <div class="flex items-center justify-between mb-2">
                 <span class="text-lg font-medium text-gray-900">{name}</span>
-                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-600">
-                  font-{name}
-                </span>
+                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-600">font-{name}</span>
               </div>
               <code class="text-sm text-gray-500 block overflow-x-auto whitespace-nowrap">
                 {family.join(', ')}

package/src/pages/index.astro

@@ -56,8 +56,7 @@ const features = [
   {
     title: 'Design Patterns',
     icon: 'streamline-freehand-color:design-process-drawing-board',
-    description:
-      'Proven patterns and layouts for common use cases, from landing pages to product catalogs.',
+    description: 'Proven patterns and layouts for common use cases, from landing pages to product catalogs.',
   },
   {
     title: 'Developer Ready',
@@ -100,13 +99,7 @@ const exampleSites = [
         set:html={SITE.description}
       />
 
-      <Button
-        slot="cta-content"
-        href="/core/introduction/"
-        title="Spoko Design System"
-        primary
-        rounded
-      >
+      <Button slot="cta-content" href="/core/introduction/" title="Spoko Design System" primary rounded>
         Read More
       </Button>
     </Jumbotron>
@@ -121,16 +114,8 @@ const exampleSites = [
               title={description}
               class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
             >
-              <Headline
-                as="h2"
-                class="text-3xl"
-                underline={false}
-              >
-                <Icon
-                  name={icon}
-                  aria-hidden="true"
-                  class="text-blue-400 mr-3 text-4xl"
-                />
+              <Headline as="h2" class="text-3xl" underline={false}>
+                <Icon name={icon} aria-hidden="true" class="text-blue-400 mr-3 text-4xl" />
                 {title}
               </Headline>
               <p class="text-slate-500 w-full">{description}</p>
@@ -143,16 +128,12 @@ const exampleSites = [
     <!-- Features Section -->
     <section class="py-16 px-4 max-w-5xl mx-auto">
       <div class="text-center mb-12">
-        <Headline
-          as="h2"
-          class="text-3xl md:text-4xl text-gray-900 mb-6"
-          underline="center"
-        >
+        <Headline as="h2" class="text-3xl md:text-4xl text-gray-900 mb-6" underline="center">
           Why Spoko Design System?
         </Headline>
         <p class="text-lg text-gray-600 max-w-2xl mx-auto">
-          A modern, comprehensive design system built with Astro and Vue, featuring consistent
-          components and patterns for rapid development.
+          A modern, comprehensive design system built with Astro and Vue, featuring consistent components and
+          patterns for rapid development.
         </p>
       </div>
 
@@ -165,26 +146,17 @@ const exampleSites = [
                 class="text-2xl mb-3 text-gray-900 flex items-center justify-center"
                 underline={false}
               >
-                <Icon
-                  name={icon}
-                  aria-hidden="true"
-                  class="text-4xl text-blue-400 mr-3"
-                />
+                <Icon name={icon} aria-hidden="true" class="text-4xl text-blue-400 mr-3" />
                 {title}
               </Headline>
-              <p
-                class="text-gray-600"
-                set:html={description}
-              />
+              <p class="text-gray-600" set:html={description} />
             </div>
           ))
         }
       </div>
     </section>
 
-    <div
-      class="mt-12 py-20 bg-blue-darker bg-vw text-white flex items-center justify-center relative"
-    >
+    <div class="mt-12 py-20 bg-blue-darker bg-vw text-white flex items-center justify-center relative">
       <Quote>
         <blockquote>
           Well done is better than well said.
@@ -198,11 +170,7 @@ const exampleSites = [
       <div class="grid lg:grid-cols-2 gap-8 md:gap-12">
         <!-- Download Section -->
         <div class="text-center">
-          <Headline
-            underline
-            as="h2"
-            class="text-3xl text-gray-900 mb-8"
-          >
+          <Headline underline as="h2" class="text-3xl text-gray-900 mb-8">
             <Icon
               name="streamline-freehand-color:archive-box"
               aria-hidden="true"
@@ -231,10 +199,7 @@ const exampleSites = [
               rel="noopener noreferrer"
               class="flex items-center gap-3 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors"
             >
-              <Icon
-                name="vscode-icons:file-type-npm"
-                class="text-3xl"
-              />
+              <Icon name="vscode-icons:file-type-npm" class="text-3xl" />
               <span class="font-semibold">npm Package</span>
             </a>
             <a
@@ -243,10 +208,7 @@ const exampleSites = [
               rel="noopener noreferrer"
               class="flex items-center gap-3 bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg transition-colors"
             >
-              <Icon
-                name="mdi:github"
-                class="text-2xl"
-              />
+              <Icon name="mdi:github" class="text-2xl" />
               <span class="font-semibold">Source Code</span>
             </a>
           </div>
@@ -258,11 +220,7 @@ const exampleSites = [
 
         <!-- Examples Section -->
         <div class="text-center">
-          <Headline
-            underline
-            as="h2"
-            class="text-3xl text-gray-900 mb-8"
-          >
+          <Headline underline as="h2" class="text-3xl text-gray-900 mb-8">
             <Icon
               name="streamline-freehand-color:coding-files-network-folder"
               aria-hidden="true"
@@ -285,18 +243,13 @@ const exampleSites = [
                     <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">{title}</h4>
                     <p class="text-sm text-gray-600">{description}</p>
                   </div>
-                  <Icon
-                    name="lucide:link"
-                    class="text-gray-400 group-hover:text-blue-400"
-                  />
+                  <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
                 </a>
               ))
             }
           </div>
 
-          <p class="text-gray-600 text-sm">
-            See the design system in action across different project types
-          </p>
+          <p class="text-gray-600 text-sm">See the design system in action across different project types</p>
         </div>
       </div>
     </section>

package/src/scripts/tooltips.ts

@@ -1,46 +1,51 @@
-import tippy from 'tippy.js';
-import 'tippy.js/dist/tippy.css';
-import '../styles/tippy-theme.css';
-
 /**
- * Global Tooltip Initializer
- * Automatically enhances all elements with data-tippy-content attribute
- * Works with static HTML - perfect for SEO and Astro static pages
+ * Global tooltip delegation script for SDS
+ * Uses Tippy.js delegation pattern for performance
+ * Handles tooltips for:
+ * - Engine codes (.engine-code)
+ * - PR codes (.btn-prcode)
+ * - Any other elements with data-tippy-content
  */
 
-function initTooltips() {
-  // Destroy existing tooltips to avoid duplicates
-  document.querySelectorAll('[data-tippy-content]').forEach((el: any) => {
-    if (el._tippy) {
-      el._tippy.destroy();
-    }
-  });
+import { delegate } from 'tippy.js';
 
-  // Initialize tooltips for all elements with data-tippy-content
-  tippy('[data-tippy-content]', {
+/**
+ * Initialize tooltips with delegation pattern
+ * Call this once in your layout after page load
+ */
+export function initTooltips() {
+  // Delegate to body for all tooltip targets
+  delegate('body', {
+    target: '[data-tippy-content]', // Any element with data-tippy-content
+    allowHTML: true,
     theme: 'sds',
     placement: 'top',
     arrow: true,
     animation: 'shift-away',
     duration: [200, 150],
     maxWidth: 280,
-    allowHTML: true, // Allow HTML content for rich tooltips
+    // Only show tooltip if there's actual content
+    onShow(instance) {
+      const content = instance.props.content;
+      if (!content || content === '' || content === 'undefined') {
+        return false;
+      }
+    },
   });
 }
 
-// Initialize on page load
-if (typeof window !== 'undefined') {
-  // Initial load
-  document.addEventListener('DOMContentLoaded', () => {
+// Auto-initialize on Astro page load (for View Transitions)
+if (typeof document !== 'undefined') {
+  document.addEventListener('astro:page-load', () => {
     initTooltips();
-    // Reinitialize after a short delay to catch Vue components
-    setTimeout(initTooltips, 100);
   });
 
-  // Reinitialize on Astro page transitions (for View Transitions)
-  document.addEventListener('astro:page-load', () => {
+  // Fallback for non-Astro or initial load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      initTooltips();
+    });
+  } else {
     initTooltips();
-    // Reinitialize after a short delay to catch Vue components
-    setTimeout(initTooltips, 100);
-  });
+  }
 }

package/src/styles/main.css

@@ -3,3 +3,7 @@
 @import 'base/grid';
 
 @import 'content.css';
+
+/* Tippy.js for tooltips (used by ProductEngine component) */
+@import 'tippy.js/dist/tippy.css';
+@import './tippy-theme.css';

package/src/styles/tippy-theme.css

@@ -10,7 +10,9 @@
   font-size: 0.75rem;
   line-height: 1.5;
   border-radius: 0.5rem;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
   max-width: 280px;
   border: 1px solid #e5e7eb; /* neutral-lighter */
 }
@@ -92,7 +94,7 @@
 
 .tippy-box[data-theme~='sds'] .tooltip-label {
   font-size: 0.7rem;
-  color: #64748B;
+  color: #64748b;
   font-weight: 400;
 }