spoko-design-system 1.5.0 → 1.5.2

package/.husky/README.md

@@ -0,0 +1,41 @@
+# Git Hooks with Husky
+
+This directory contains Git hooks managed by [Husky](https://typicode.github.io/husky/).
+
+## Pre-commit Hook
+
+The pre-commit hook automatically runs before each commit to ensure code quality:
+
+1. **Builds the project** (`pnpm run build`)
+   - Catches MDX syntax errors
+   - Validates Vue components
+   - Ensures all documentation examples work
+
+If the build fails, the commit will be blocked until errors are fixed.
+
+## Setup for Team Members
+
+Hooks are automatically installed when running:
+
+```bash
+pnpm install
+```
+
+The `prepare` script in `package.json` handles this automatically.
+
+## Benefits
+
+✅ Prevents broken builds from being committed
+✅ Catches errors early in development
+✅ Maintains code quality across the team
+✅ Reduces failed CI/CD builds
+
+## Bypassing Hooks (Emergency Only)
+
+If you absolutely need to bypass the pre-commit hook:
+
+```bash
+git commit --no-verify -m "your message"
+```
+
+**Note:** Only use this in emergencies. Your commit may break the build.

package/.husky/pre-commit

@@ -0,0 +1,12 @@
+echo "🔍 Running pre-commit checks..."
+
+# Run Astro build to catch MDX and component errors
+echo "🏗️  Building project..."
+pnpm run build
+
+if [ $? -eq 0 ]; then
+  echo "✅ Build successful! Proceeding with commit..."
+else
+  echo "❌ Build failed! Please fix errors before committing."
+  exit 1
+fi

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.5.2](https://github.com/polo-blue/sds/compare/v1.5.1...v1.5.2) (2025-10-28)
+
+### Bug Fixes
+
+* improve combined PR code display and color handling ([e9bb13d](https://github.com/polo-blue/sds/commit/e9bb13d5500ba5ef0be527bf79b75e14fc49e6fe))
+
+## [1.5.1](https://github.com/polo-blue/sds/compare/v1.5.0...v1.5.1) (2025-10-27)
+
+### Bug Fixes
+
+* remove deprecated Husky shebang for v10 compatibility ([c7addfb](https://github.com/polo-blue/sds/commit/c7addfb1834eb480ead83b3d275977b47683a94a))
+
 ## [1.5.0](https://github.com/polo-blue/sds/compare/v1.4.4...v1.5.0) (2025-10-27)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -26,7 +26,8 @@
     "format:check": "prettier --check \"src/**/*.{js,ts,jsx,tsx,vue,astro,json,css,md}\"",
     "lint": "eslint \"src/**/*.{js,ts,jsx,tsx,vue,astro}\"",
     "lint:fix": "eslint \"src/**/*.{js,ts,jsx,tsx,vue,astro}\" --fix",
-    "check": "astro check"
+    "check": "astro check",
+    "prepare": "husky"
   },
   "repository": {
     "type": "git",
@@ -126,6 +127,7 @@
     "eslint": "^9.38.0",
     "eslint-plugin-astro": "^1.4.0",
     "eslint-plugin-vue": "^10.5.1",
+    "husky": "^9.1.7",
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
     "semantic-release": "^25.0.1",

package/src/components/ProductCodes.vue

@@ -22,6 +22,37 @@ const props = defineProps({
     required: false,
   },
 });
+
+// Static mapping of PR codes to variant categories
+// Based on database migration from PR_CODE_REFACTORING_2025_10_27.md
+const variantCategoryMap: Record<string, string> = {
+  // GTI
+  '2JD': 'GTI',
+  '1ZD': 'GTI',
+  '1KV': 'GTI',
+  '0NH': 'GTI',
+  '1ZR': 'GTI',
+  // WRC
+  'E5M': 'WRC',
+  '1KD': 'WRC',
+  '1ZP': 'WRC',
+  '2JQ': 'WRC',
+  'TA2': 'WRC',
+  // CROSS
+  '2JK': 'CROSS',
+  // BLUEGT
+  '2JE': 'BLUEGT',
+  // BLUEMOTION
+  '2JZ': 'BLUEMOTION',
+  '7L6': 'BLUEMOTION',
+  // R_LINE
+  '2JP': 'R_LINE',
+};
+
+// Get variant category for a code (check map, fallback to passed value)
+const getVariantCategory = (code: string, fallback?: string): string | undefined => {
+  return variantCategoryMap[code] || fallback;
+};
 </script>
 
 <template>
@@ -30,28 +61,29 @@ const props = defineProps({
     :key="prcode?.id || index"
     class="not-last:mr-1"
   >
-    <!-- Skip invalid entries -->
     <template v-if="prcode?.code">
-      <!-- Handle normal PR codes -->
       <PrCode
         v-if="!prcode.code.includes('+')"
         :prcode="prcode"
         :isPdp="isPdp"
       />
-
-      <!-- Handle combined PR codes like "1KD+2JP" -->
-      <span v-else>
-        <PrCode
-          v-for="(code, idx) in prcode.code.split('+')"
-          :key="idx"
-          :prcode="{
-            code: code.trim(),
-            group: prcode.group,
-            description: null,
-            variant_category: prcode.variant_category
-          }"
-          :isPdp="isPdp"
-        />
+      <span v-else class="inline-flex items-center gap-1">
+        <template v-for="(code, idx) in prcode.code.split('+')" :key="idx">
+          <span v-if="idx > 0" class="text-sm opacity-75 font-bold">+</span>
+          <span class="inline-flex items-center">
+            <span class="opacity-75">[</span>
+            <PrCode
+              :prcode="{
+                code: code.trim(),
+                group: prcode.group,
+                description: null,
+                variant_category: getVariantCategory(code.trim(), prcode.variant_category)
+              }"
+              :isPdp="isPdp"
+            />
+            <span class="opacity-75">]</span>
+          </span>
+        </template>
       </span>
     </template>
   </span>

package/src/pages/components/pr-code.mdx

@@ -198,12 +198,15 @@ When using data from the API, pass the `pr_codes` array directly:
 - ✅ **Dark Mode**: Supports dark mode with appropriate color adjustments
 - ✅ **Accessible**: Uses semantic HTML and proper ARIA attributes
 - ✅ **Search Friendly**: Includes `data-pagefind-filter` for search indexing
-- ✅ **Combination Support**: Handles combined PR codes like "1KD+2JP"
+- ✅ **Combination Support**: Handles combined PR codes like "1AT+1ZR" with format `[1AT]+[1ZR]`
+- ✅ **Individual Colors**: Each code in a combination gets its own color based on variant category
 - ✅ **Defensive**: Gracefully handles invalid or malformed data
 
 ## Notes
 
 - Hover over any PR code to see its full description
 - Colors are based on semantic variant categories, not hardcoded per code
+- Combined codes are displayed as `[CODE]+[CODE]` with each code colored independently
+- The component uses a static mapping for variant categories to ensure consistent coloring
 - The tooltip design matches the ProductEngine component style
 - All 14,000+ PR codes in the database have English descriptions