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

[cylewaitforit]

🔗 Linked issue

Related: #1964

🧭 Context

This adds the storybook-i18n for locale switching in the npmx storybook.

📚 Description

This allows stories that have been configured with a translation to be viewed with different translations.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Mar 20, 2026 5:58pm
npmx.dev	Ready	Preview, Comment	Mar 20, 2026 5:58pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Mar 20, 2026 5:58pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5b02564c-e619-4103-bd77-d364a5d86534

📥 Commits

Reviewing files that changed from the base of the PR and between bf4866d and 85d139e.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (3)

• .storybook/main.ts
• .storybook/preview.ts
• pnpm-workspace.yaml

✅ Files skipped from review due to trivial changes (2)

• pnpm-workspace.yaml
• .storybook/main.ts

---

📝 Walkthrough

Walkthrough

Appended storybook-i18n to .storybook/main.ts addons and added it to devDependencies and the pnpm workspace catalog. Updated .storybook/preview.ts to add initialGlobals (locale 'en-US' and a locales map), remove the locale toolbar/globalType, introduce a module-level currentI18nInstance and a LOCALE_CHANGED channel handler, set the i18n instance in the decorator created() hook, and make locale optional in decorator typing. Modified Link stories to provide explicit args and to use custom render functions that call $t(...) for translated content.

Possibly related PRs

• docs(ui): add dark theme for storybook docs v2 #2172: Modifies .storybook/main.ts and the Storybook client logger shim — overlaps on Storybook config and shim edits.
• docs(ui): add stories for Link #1732: Updates the Link component stories — directly overlaps with changes to Link.stories.ts args and render.
• feat: add storybook #1270: Edits .storybook/main.ts, .storybook/preview.ts, and workspace/package entries related to Storybook/i18n — directly related to addon and preview configuration changes.

Suggested reviewers

• cylewaitforit
• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description adequately explains the purpose of adding the storybook-i18n addon for locale switching in stories.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

.storybook/preview.ts (1)

22-26: Avoid any for the i18n instance and narrow before calling setLocale.

Line 22 and Lines 92-96 currently bypass type checks; a narrow interface here keeps the locale bridge safe and explicit.

💡 Suggested refactor

-let currentI18nInstance: any = null
+type StorybookI18nInstance = {
+  setLocale: (locale: string) => void | Promise<void>
+}
+let currentI18nInstance: StorybookI18nInstance | null = null
@@
-          currentI18nInstance = this.$i18n
+          currentI18nInstance =
+            this.$i18n && typeof this.$i18n.setLocale === 'function'
+              ? (this.$i18n as StorybookI18nInstance)
+              : null
@@
-          if (locale && this.$i18n) {
-            this.$i18n.setLocale(locale)
+          if (locale && currentI18nInstance) {
+            void currentI18nInstance.setLocale(locale)
           }

As per coding guidelines, "Ensure you write strictly type-safe code, for example by ensuring you always check when accessing an array value by index".

Also applies to: 91-96

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a584aa74-dd82-4f31-b2eb-5c2635be10b0

📥 Commits

Reviewing files that changed from the base of the PR and between ad2b174 and 542b245.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• .storybook/main.ts
• .storybook/preview.ts
• app/components/Link/Link.stories.ts
• package.json
• pnpm-workspace.yaml

[ghostdevv]

Could you also take a look at that coderabbit suggestion? Let me know if you want some help!