Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cylewaitforit wants to merge 1 commit into
base: main
Choose a base branch
from
+77 −35
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
51 changes: 26 additions & 25 deletions .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)
}
})
Comment on lines +21 to +27
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

For Storybook 10 using storybook/preview-api, is channel.off(eventName, listener)the supported way to avoid duplicate listeners during HMR afterchannel.on(eventName, listener)?

💡 Result:

Yes. In Storybook 10, addons.getChannel() returns a Node.js EventEmitter-compatible channel, so removing a listener with channel.off(eventName, listener) is part of the supported API surface. [1]

Storybook’s own addon examples use the exact pattern to avoid duplicate subscriptions (subscribe with on, then unsubscribe with off in cleanup), e.g. channel.on(EVENTS.REQUEST, handleRequest) paired with channel.off(EVENTS.REQUEST, handleRequest). [2]

Also, Storybook’s @storybook/preview-api testing utilities model the channel with an explicit off(eventId, listener) method, reinforcing that off is the intended unsubscribe call. [3]

Important: you must pass the same function reference to off that you passed to on (i.e., don’t inline a new lambda each HMR pass). [2]

Sources: [1] (storybook.js.org) [2] (storybook.js.org) [3] (tessl.io)

Citations:

De-register the locale listener before re-registering it to avoid duplicate handlers during HMR.

Line 23 adds a module-scope LOCALE_CHANGED listener; on preview HMR reloads this can stack handlers and trigger repeated setLocale calls. Use channel.off() with the same function reference to clean up before re-subscribing.

💡 Suggested fix 
-let currentI18nInstance: any = null
-addons.getChannel().on('LOCALE_CHANGED', (newLocale: string) => {
+let currentI18nInstance: any = null
+const channel = addons.getChannel()
+const onLocaleChanged = (newLocale: string) => {
   if (currentI18nInstance) {
     currentI18nInstance.setLocale(newLocale)
   }
-})
+}
+channel.off?.('LOCALE_CHANGED', onLocaleChanged)
+channel.on('LOCALE_CHANGED', onLocaleChanged)

Also consider typing currentI18nInstance to improve type safety.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// 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)
}
})
// Subscribe to locale changes from storybook-i18n addon (once, outside decorator)
let currentI18nInstance: any = null
const channel = addons.getChannel()
const onLocaleChanged = (newLocale: string) => {
if (currentI18nInstance) {
currentI18nInstance.setLocale(newLocale)
}
}
channel.off?.('LOCALE_CHANGED', onLocaleChanged)
channel.on('LOCALE_CHANGED', onLocaleChanged)


const preview: Preview = {
parameters: {
controls: {
Expand All @@ -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',
Expand All @@ -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
Expand All @@ -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)
}
},
Expand Down
23 changes: 19 additions & 4 deletions app/components/Link/Link.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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 = {
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@
"schema-dts": "1.1.5",
"simple-git-hooks": "2.13.1",
"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.0.0-gd42e0ca6.20260225-0619",
Expand Down
29 changes: 24 additions & 5 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,4 @@ catalogs:
'@storybook/addon-docs': '^10.2.7'
'@storybook/addon-themes': '^10.2.7'
'storybook': '^10.2.7'
'storybook-i18n': '^10.1.1'
Loading