feat: add propertyTranslations support in Storybook #

teritorio · Feb 21, 2024 · d33e570 · d33e570
1 parent a3fb263
commit d33e570
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -5,6 +5,7 @@ import { config } from '@fortawesome/fontawesome-svg-core'
 import { createI18n } from 'vue-i18n'
 import messages from '../locales'
 import fontawesome from '../plugins/fontawesome'
+import { propertyTranslationsVuePlugin } from '../plugins/property-translations'
 
 // After i18n module update
 // use config from config/i18n.config.ts
@@ -19,6 +20,7 @@ setup((app) => {
   config.autoAddCss = true
   app.use(fontawesome)
   app.use(i18n)
+  app.use(propertyTranslationsVuePlugin)
   app.component('NuxtLink', {
     props: {
       to: {

diff --git a/plugins/property-translations.ts b/plugins/property-translations.ts
@@ -1,3 +1,4 @@
+import type { App } from 'vue'
 import { defineNuxtPlugin } from '#app/nuxt'
 import type { PropertyTranslations } from '~/lib/apiPropertyTranslations'
 
@@ -22,35 +23,41 @@ export interface PropertyTranslationsPlugin {
   propertyTranslations: PropertyTranslations
 }
 
-export default defineNuxtPlugin((_nuxtApp) => {
-  const pt: PropertyTranslationsPlugin = {
-    propertyTranslations: {},
-    set(setPropertyTranslations: PropertyTranslations): void {
-      pt.propertyTranslations = setPropertyTranslations
-    },
-    p(
-      propertyName: string,
-      context: PropertyTranslationsContextEnum = Default,
-    ): string {
-      const pn = pt.propertyTranslations[propertyName]
-      return (
-        // When context exists, does not use default
-        (pn?.[context] ? pn?.[context]?.fr : pn?.[Default]?.fr) || propertyName
-      )
-    },
-    pv(
-      propertyName: string,
-      valueName: string,
-      context: PropertyTranslationsContextEnum = Default,
-    ): string {
-      const pn = pt.propertyTranslations[propertyName]?.values?.[valueName]
-      return (
-        // When context exists, does not use default
-        (pn?.[context] ? pn?.[context]?.fr : pn?.[Default]?.fr) || valueName
-      )
-    },
-  }
+const pt: PropertyTranslationsPlugin = {
+  propertyTranslations: {},
+  set(setPropertyTranslations: PropertyTranslations): void {
+    pt.propertyTranslations = setPropertyTranslations
+  },
+  p(
+    propertyName: string,
+    context: PropertyTranslationsContextEnum = Default,
+  ): string {
+    const pn = pt.propertyTranslations[propertyName]
+    return (
+      // When context exists, does not use default
+      (pn?.[context] ? pn?.[context]?.fr : pn?.[Default]?.fr) || propertyName
+    )
+  },
+  pv(
+    propertyName: string,
+    valueName: string,
+    context: PropertyTranslationsContextEnum = Default,
+  ): string {
+    const pn = pt.propertyTranslations[propertyName]?.values?.[valueName]
+    return (
+      // When context exists, does not use default
+      (pn?.[context] ? pn?.[context]?.fr : pn?.[Default]?.fr) || valueName
+    )
+  },
+}
 
+export const propertyTranslationsVuePlugin = {
+  install(app: App, _options?: object) {
+    app.config.globalProperties.$propertyTranslations = pt
+  },
+}
+
+export default defineNuxtPlugin((_nuxtApp) => {
   return {
     provide: {
       propertyTranslations: pt,