spoko-design-system 0.8.2 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -40,7 +40,7 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.29.0",
+    "@algolia/client-search": "^5.30.0",
     "@astrojs/mdx": "^4.3.0",
     "@astrojs/node": "^9.2.2",
     "@astrojs/sitemap": "^3.4.1",
@@ -57,57 +57,57 @@
     "@iconify-json/eos-icons": "^1.2.2",
     "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.5",
-    "@iconify-json/fluent": "^1.2.25",
+    "@iconify-json/fluent": "^1.2.26",
     "@iconify-json/fluent-emoji": "1.2.3",
     "@iconify-json/ic": "^1.2.2",
     "@iconify-json/icon-park-outline": "^1.2.2",
     "@iconify-json/la": "^1.2.1",
-    "@iconify-json/material-symbols-light": "^1.2.27",
+    "@iconify-json/material-symbols-light": "^1.2.28",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.2",
-    "@iconify-json/octicon": "^1.2.6",
+    "@iconify-json/octicon": "^1.2.7",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.39",
+    "@iconify-json/simple-icons": "^1.2.41",
     "@iconify-json/system-uicons": "^1.2.2",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify/json": "^2.2.351",
+    "@iconify/json": "^2.2.354",
     "@iconify/vue": "^5.0.0",
     "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
-    "@unocss/astro": "66.2.3",
-    "@unocss/preset-attributify": "66.2.3",
-    "@unocss/preset-typography": "66.2.3",
-    "@unocss/preset-uno": "66.2.3",
-    "@unocss/preset-web-fonts": "66.2.3",
-    "@unocss/preset-wind": "66.2.3",
-    "@unocss/reset": "66.2.3",
+    "@unocss/astro": "66.3.2",
+    "@unocss/preset-attributify": "66.3.2",
+    "@unocss/preset-typography": "66.3.2",
+    "@unocss/preset-uno": "66.3.2",
+    "@unocss/preset-web-fonts": "66.3.2",
+    "@unocss/preset-wind": "66.3.2",
+    "@unocss/reset": "66.3.2",
     "@vite-pwa/astro": "^1.1.0",
-    "@vueuse/core": "^13.4.0",
+    "@vueuse/core": "^13.5.0",
     "astro-i18next": "1.0.0-beta.21",
     "astro-icon": "^1.1.5",
     "astro-meta-tags": "^0.3.2",
     "astro-navbar": "^2.4.0",
     "astro-pagefind": "^1.8.3",
     "astro-remote": "^0.3.4",
-    "dotenv": "^16.5.0",
-    "i18next": "^25.2.1",
+    "dotenv": "^17.0.1",
+    "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-fs-backend": "^2.6.0",
     "i18next-http-backend": "^3.0.2",
     "i18next-vue": "^5.3.0",
-    "swiper": "^11.2.8",
-    "unocss": "66.2.3",
+    "swiper": "^11.2.10",
+    "unocss": "66.3.2",
     "vue": "^3.5.17"
   },
   "devDependencies": {
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.0.3",
-    "@unocss/transformer-variant-group": "66.2.3",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@types/node": "^24.0.10",
+    "@unocss/transformer-variant-group": "66.3.2",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@vue/compiler-sfc": "^3.5.17",
-    "astro": "^5.10.1",
+    "astro": "^5.10.2",
     "unocss": "^0.65.0",
-    "vite": "^6.3.5"
+    "vite": "^7.0.0"
   },
   "packageManager": "pnpm@9.15.3",
   "pnpm": {

package/src/components/ProductDetailsList.vue

@@ -7,21 +7,17 @@ interface ColorCode {
   name: string;
 }
 
-interface PaintMark {
-  count: number;
-  color: string;
-}
-
 interface TableItem {
   id: string;
   name: string;
-  value: unknown;
+  value: unknown; // Może być string, number, boolean, array (ColorCode[] lub string[])
   translated?: boolean;
   icon?: boolean;
   isArrayValue?: boolean;
-  isColorArray?: boolean;
-  isPaintMarks?: boolean;
-  isGenericArray?: boolean;
+  isColorArray?: boolean; // dla product.colors (color_ids)
+  isPaintMarks?: boolean; // dla product.paint_marks_text
+  isGenericArray?: boolean; // dla ogólnych tablic stringów (np. position)
+  isForExteriorColour?: boolean; // Ta flaga będzie ustawiana przez getProductDetails na true, jeśli 'value' jest tablicą
 }
 
 interface GroupedLink {
@@ -37,26 +33,34 @@ const props = defineProps({
   caption: { type: String, default: null }
 });
 
-// Function for checking whether a value is a link
+// Function to check if a value is a link
 const isLink = (id: string) => {
   return ['blog', 'youtube', 'vimeo'].includes(id);
 };
 
-// Function for checking if it's a color array
+// Function to check if it's a color array (for 'color_ids' field from product.colors)
+// This will still apply to the 'color' detail if its value is an array of ColorCode objects
 const isColorArray = (item: TableItem) => {
-  return item.isColorArray && Array.isArray(item.value);
+  const colorIds = ['color', 'thread-color']; // lista ID które są kolorami
+  return (item.isColorArray || colorIds.includes(item.id)) && Array.isArray(item.value);
 };
 
-// Function for checking if it's paint marks
+// Function to check if it's paint marks (value is now a string from API)
 const isPaintMarks = (item: TableItem) => {
-  return item.isPaintMarks && Array.isArray(item.value);
+  return item.isPaintMarks && typeof item.value === 'string';
 };
 
-// Function for checking if it's a generic array
+// Function to check if it's a generic array (e.g., for position)
 const isGenericArray = (item: TableItem) => {
   return item.isGenericArray && Array.isArray(item.value);
 };
 
+// ✅ Zaktualizowana funkcja: Sprawdzamy ID i czy value jest faktycznie tablicą ColorCode[]
+const isForExteriorColour = (item: TableItem) => {
+  return item.id === 'for-exterior-colour' && Array.isArray(item.value);
+};
+
+
 // Function to check if value is HTML string (fallback)
 const isHtmlValue = (value: unknown): boolean => {
   return typeof value === 'string' && (value.includes('<span') || value.includes('<br>'));
@@ -64,13 +68,13 @@ const isHtmlValue = (value: unknown): boolean => {
 
 // Function for specifying header text
 const getHeaderText = (row: TableItem | GroupedLink) => {
-  // For the blog, we use id instead of name
   if (row.id === 'blog') {
     return row.id.charAt(0).toUpperCase() + row.id.slice(1);
   }
-  
-  // For other types, we use name (if it is GroupedLink, there is no name)
-  return 'name' in row ? row.name : row.id.charAt(0).toUpperCase() + row.id.slice(1);
+  // Użyj `name` z obiektu `TableItem`, jeśli istnieje, w przeciwnym razie sformatuj `id`.
+  return 'name' in row ? row.name : row.id.split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
 };
 
 // Function to determine the icon class for a link type
@@ -89,37 +93,43 @@ const getLinkIconClass = (linkId: string) => {
 
 // Grouping of elements by id
 const groupedItems = computed(() => {
+  // ✅ Add validation to ensure props.items is an array
+  if (!Array.isArray(props.items)) {
+    console.warn('ProductDetailsList: items prop is not an array:', props.items);
+    return [];
+  }
+
   const result: (TableItem | GroupedLink)[] = [];
   const linkGroups = new Map<string, GroupedLink>();
-  
-  // We process all elements
+
+  // Process all elements
   props.items.forEach(item => {
     // If it's a link (blog, youtube, vimeo)
     if (isLink(item.id)) {
       // Add a link to the relevant group
       if (!linkGroups.has(item.id)) {
-        linkGroups.set(item.id, { 
-          id: item.id, 
-          links: [] 
+        linkGroups.set(item.id, {
+          id: item.id,
+          links: []
         });
       }
-      
+
       // Add link to the relevant group
       linkGroups.get(item.id)?.links.push({
         name: item.name,
         value: item.value as string
       });
     } else {
-      // If it is not a link, we add it normally to the results
+      // If it's not a link, add it normally to the results
       result.push(item);
     }
   });
-  
+
   // Add all link groups at the end
   linkGroups.forEach(group => {
     result.push(group);
   });
-  
+
   return result;
 });
 </script>
@@ -135,63 +145,72 @@ const groupedItems = computed(() => {
     </colgroup>
     <tbody>
       <tr v-for="row, index in groupedItems" :key="index" class="details-table-row">
-        <!-- We use the getHeaderText function to specify the header text -->
-        <ProductDetailName 
-          as="th" 
-          :text="getHeaderText(row)" 
-          class="details-table-header"
-        />
-        
-        <!-- Handling link groups -->
+        <ProductDetailName as="th" :text="getHeaderText(row)" class="details-table-header" />
+
         <td v-if="'links' in row" class="details-table-cell">
           <ul class="list-none p-0 m-0">
             <li v-for="(link, linkIndex) in row.links" :key="linkIndex" class="mb-2 last:mb-0 flex items-center">
-              <span :class="[getLinkIconClass(row.id), 'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400']" />
+              <span
+                :class="[getLinkIconClass(row.id), 'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400']" />
               <a :href="link.value" target="_blank" rel="noopener noreferrer" class="link-primary">
                 {{ link.name }}
               </a>
             </li>
           </ul>
         </td>
-        
-        <!-- Special handling for color arrays (already translated) -->
+
         <td v-else-if="'id' in row && isColorArray(row)" class="details-table-cell">
-        <ul>
-          <li v-for="(colorItem, colorIndex) in (row.value as ColorCode[])" :key="colorIndex" 
-               class="flex items-center gap-1 mb-1 last:mb-0">
-            <code>
-              {{ colorItem.code }}
-            </code>
-            <span class="text-gray-400">-</span>
-            <span class="text-gray-700 dark:text-gray-300">{{ colorItem.name }}</span>
-          </li>
+          <ul class="list-none p-0 m-0">
+            <li v-for="(colorItem, colorIndex) in (row.value as ColorCode[])" :key="colorIndex"
+              class="flex items-center gap-1 mb-1 last:mb-0">
+
+              <template v-if="colorItem.code">
+                <code class="font-mono text-sm">
+                        {{ colorItem.code }}
+                    </code>
+                <span class="text-gray-400">-</span>
+              </template>
+              <span class="text-gray-700 dark:text-gray-300">{{ colorItem.name }}</span>
+            </li>
           </ul>
         </td>
-        
-        <!-- Special handling for paint marks (already translated) -->
+
         <td v-else-if="'id' in row && isPaintMarks(row)" class="details-table-cell">
           <span class="text-gray-700 dark:text-gray-300">{{ row.value }}</span>
         </td>
-        
-        <!-- Generic array handling (bullet list) -->
+
+        <td v-else-if="'id' in row && isForExteriorColour(row)" class="details-table-cell">
+          <ul class="list-none p-0 m-0">
+            <li v-for="(colorEntry, colourIndex) in (row.value as ColorCode[])" :key="colourIndex"
+              class="flex items-center gap-1 mb-1 last:mb-0">
+
+              <template v-if="colorEntry.code">
+                <code class="font-mono text-sm">
+                        {{ colorEntry.code }}
+                    </code>
+                <span class="text-gray-400">-</span>
+              </template>
+              <span class="text-gray-700 dark:text-gray-300">{{ colorEntry.name }}</span>
+            </li>
+          </ul>
+        </td>
+
         <td v-else-if="'id' in row && isGenericArray(row)" class="details-table-cell">
           <ul class="list-none p-0 m-0">
-            <li v-for="(item, itemIndex) in (row.value as string[])" :key="itemIndex" 
-                class="flex items-start gap-2 mb-1 last:mb-0 leading-relaxed">
+            <li v-for="(item, itemIndex) in (row.value as string[])" :key="itemIndex"
+              class="flex items-start gap-2 mb-1 last:mb-0 leading-relaxed">
               <span class="text-gray-500 font-bold flex-shrink-0 mt-0.5">·</span>
               <span class="text-gray-700 dark:text-gray-300 text-sm">{{ item }}</span>
             </li>
           </ul>
         </td>
-        
-        <!-- Handling HTML values (fallback for already formatted HTML) -->
+
         <td v-else-if="'id' in row && isHtmlValue(row.value)" class="details-table-cell" v-html="row.value"></td>
-        
-        <!-- Support for standard types -->
+
         <slot v-else-if="'id' in row" :name="row.id">
           <td class="details-table-cell">{{ row.value }}</td>
         </slot>
       </tr>
     </tbody>
   </table>
-</template>
+</template>

package/src/pages/index.astro

@@ -91,10 +91,10 @@ const navItems = [
       <div>
         <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Download:</Headline>
         <div class="grid grid-flow-col gap-4 auto-cols-max text-6xl mb-12">
-          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-accent-lightest">
+          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-accent-light">
             <Icon name="mdi:npm"/>
           </a>
-          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-accent-lightest">
+          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-accent-light">
             <Icon name="mdi:github"/>
           </a>
         </div>

package/uno-config/theme/shortcuts/components.ts

@@ -109,7 +109,7 @@ export const componentShortcuts = [
   ['breadcrumb-back-btn', 'flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-accent-light whitespace-nowrap my-auto'],
 
   // PostCategories
-  ['category-link-base', 'text-sm sm:text-base text-accent-lightest uppercase hover:text-blue-500 transition-colors'],
+  ['category-link-base', 'text-sm sm:text-base text-accent-light uppercase hover:text-blue-500 transition-colors'],
   ['category-link-active', 'text-blue-500'],
 
   // Details table

package/uno-config/theme/shortcuts/constants.ts

@@ -121,7 +121,7 @@ export const TYPOGRAPHY = {
 export const PRODUCT_STYLES = {
   thumb: {
     base: 'h-full w-full object-cover object-center transform scale-100 group-hover:scale-110 absolute inset-0 will-change-transform bg-neutral-lightest',
-    container: `${aspectRatios['4/3']} ${LAYOUT.flex.alignCenter} mb-3 sm:mb-0 ${IMAGE_STYLES.overlay}`,
+    container: `${aspectRatios['4/3']} ${LAYOUT.flex.alignCenter} mb-3 sm:mb-auto ${IMAGE_STYLES.overlay}`,
   },
   link: {
     base: 'relative flex w-full bg-white after:(absolute bg-accent-light w-[calc(100%-1rem)] left-0 h-px top-[calc(100%-1px)] bottom-1 content-empty scale-x-0 transition-transform-300 origin-top-right) hover:after:(origin-top-left scale-x-100)',