docs(ui): use storybook-i18n addon for locale switching

Author: cylewaitforit

.storybook/main.ts

@@ -2,7 +2,12 @@ import type { StorybookConfig } from '@storybook-vue/nuxt'
 
 const config = {
   stories: ['../app/**/*.stories.@(js|ts)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-themes',
+    'storybook-i18n',
+  ],
   framework: '@storybook-vue/nuxt',
   staticDirs: ['./.public'],
   features: {

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook-vue/nuxt'
 import { withThemeByDataAttribute } from '@storybook/addon-themes'
+import { addons } from 'storybook/preview-api'
 import { currentLocales } from '../config/i18n'
 import { fn } from 'storybook/test'
 import { ACCENT_COLORS } from '../shared/utils/constants'
@@ -17,6 +18,14 @@ globalThis['__NUXT_COLOR_MODE__'] ??= {
 // @ts-expect-error - dynamic global name
 globalThis.defineOgImageComponent = fn()
 
+// Subscribe to locale changes from storybook-i18n addon (once, outside decorator)
+let currentI18nInstance: any = null
+addons.getChannel().on('LOCALE_CHANGED', (newLocale: string) => {
+  if (currentI18nInstance) {
+    currentI18nInstance.setLocale(newLocale)
+  }
+})
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -26,24 +35,18 @@ const preview: Preview = {
       },
     },
   },
+  initialGlobals: {
+    locale: 'en-US',
+    locales: currentLocales.reduce(
+      (acc, locale) => {
+        acc[locale.code] = locale.name
+        return acc
+      },
+      {} as Record<string, string>,
+    ),
+  },
   // Provides toolbars to switch things like theming and language
   globalTypes: {
-    locale: {
-      name: 'Locale',
-      description: 'UI language',
-      defaultValue: 'en-US',
-      toolbar: {
-        icon: 'globe',
-        dynamicTitle: true,
-        items: [
-          // English is at the top so it's easier to reset to it
-          { value: 'en-US', title: 'English (US)' },
-          ...currentLocales
-            .filter(locale => locale.code !== 'en-US')
-            .map(locale => ({ value: locale.code, title: locale.name })),
-        ],
-      },
-    },
     accentColor: {
       name: 'Accent Color',
       description: 'Accent color',
@@ -70,9 +73,9 @@ const preview: Preview = {
       attributeName: 'data-theme',
     }),
     (story, context) => {
-      const { locale, accentColor } = context.globals as {
-        locale: string
+      const { accentColor, locale } = context.globals as {
         accentColor?: string
+        locale?: string
       }
 
       // Set accent color from globals
@@ -84,14 +87,12 @@ const preview: Preview = {
 
       return {
         template: '<story />',
-        // Set locale from globals
         created() {
-          if (this.$i18n) {
-            this.$i18n.setLocale(locale)
-          }
-        },
-        updated() {
-          if (this.$i18n) {
+          // Store i18n instance for LOCALE_CHANGED events
+          currentI18nInstance = this.$i18n
+
+          // Set initial locale when component is created
+          if (locale && this.$i18n) {
             this.$i18n.setLocale(locale)
           }
         },

app/components/Link/Link.stories.ts

@@ -5,14 +5,17 @@ const meta = {
   component: LinkBase,
   args: {
     to: '/',
-    default: 'Click me',
   },
 } satisfies Meta<typeof LinkBase>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  args: {
+    default: 'Click me',
+  },
+}
 
 export const ExternalLink: Story = {
   args: {
@@ -75,16 +78,28 @@ export const WithIconButton: Story = {
   args: {
     variant: 'button-primary',
     classicon: 'i-lucide:copy',
-    default: 'Copy',
   },
+  render: args => ({
+    components: { LinkBase },
+    setup() {
+      return { args }
+    },
+    template: `<LinkBase v-bind="args">{{ $t("package.readme.copy_as_markdown") }}</LinkBase>`,
+  }),
 }
 
 export const WithKeyboardShortcut: Story = {
   args: {
     variant: 'button-secondary',
     ariaKeyshortcuts: 's',
-    default: 'Search',
   },
+  render: args => ({
+    components: { LinkBase },
+    setup() {
+      return { args }
+    },
+    template: `<LinkBase v-bind="args">{{ $t("search.button") }}</LinkBase>`,
+  }),
 }
 
 export const BlockLink: Story = {

package.json

@@ -138,6 +138,7 @@
     "markdown-it-anchor": "9.2.0",
     "schema-dts": "1.1.5",
     "storybook": "catalog:storybook",
+    "storybook-i18n": "catalog:storybook",
     "typescript": "5.9.3",
     "unplugin-vue-markdown": "30.0.0",
     "vitest": "npm:@voidzero-dev/vite-plus-test@0.1.12",

pnpm-lock.yaml

@@ -47,3 +47,4 @@ catalogs:
     '@storybook/addon-docs': '^10.2.7'
     '@storybook/addon-themes': '^10.2.7'
     'storybook': '^10.2.7'
+    'storybook-i18n': '^10.1.1'