Storybook - Mock NuxtImg on prod - Fix ts errors

Author: srcdev

.storybook/preview.ts

@@ -1,21 +1,17 @@
 import { defineComponent } from "vue";
 import type { Preview } from "@nuxtjs/storybook";
 
-// Decorator to globally mock NuxtImg for Storybook
+// Global NuxtImg mock for Storybook
+const NuxtImgMock = defineComponent({
+  props: ["src", "alt", "width", "height", "class", "style"],
+  template: `<img :src="src" :alt="alt" :width="width" :height="height" :class="class" :style="style" />`,
+});
+
 export const decorators = [
-  (story: any) =>
+  (story: () => unknown) =>
     defineComponent({
-      components: { story },
+      components: { story, NuxtImg: NuxtImgMock },
       template: "<story />",
-      setup() {
-        // Register NuxtImg globally using Vue's globalThis
-        if (typeof window !== "undefined" && (globalThis as any).$nuxt) {
-          (globalThis as any).$nuxt.vueApp.component("NuxtImg", {
-            props: ["src", "alt", "width", "height", "class", "style"],
-            template: `<img :src="src" :alt="alt" :width="width" :height="height" :class="class" :style="style" />`,
-          });
-        }
-      },
     }),
 ];
 

app/components/03.organisms/treatment-consultant/TreatmentConsultant.vue

@@ -214,7 +214,7 @@
               </div>
               <div class="colour-finder__details-card">
                 <div class="colour-finder__details-header">
-                  <span class="colour-finder__details-method-label">Recommended Method</span>
+                  <span class="colour-finder__details-method-label">Processes Required</span>
                   <span class="colour-finder__details-method-badge">{{ colourRecommendation.method }}</span>
                 </div>
                 <div class="colour-finder__details-list">
@@ -1860,9 +1860,9 @@ const suitabilityConfig: Record<Suitability, { icon: string; label: string }> =
     }
 
     .colour-finder__summary-swatch {
-      inline-size: 3rem;
-      block-size: 3rem;
-      border-radius: 50%;
+      aspect-ratio: 1 / 1;
+      block-size: 8rem;
+      border-radius: 100vw;
       margin-block-end: var(--_spacing-sm);
       border: 1px solid color-mix(in srgb, var(--_foreground) 10%, transparent);
       overflow: hidden;