Skip to content

Support translations in Storybook: initialize i18n with bundled resources#6848

Open
reecebrowne wants to merge 2 commits into
mainfrom
feat/storybook-i18n-init
Open

Support translations in Storybook: initialize i18n with bundled resources#6848
reecebrowne wants to merge 2 commits into
mainfrom
feat/storybook-i18n-init

Conversation

@reecebrowne

Copy link
Copy Markdown
Contributor

What

Initializes i18next in the Storybook preview with bundled en-US translations so portal and editor components render real strings instead of raw keys.

Why

Portal and editor components use useTranslation() without inline fallback strings. Without an initialized i18next instance, stories rendered raw keys like accountLink.card.eyebrow, breaking layout and making stories visually useless.

How

Import the en-US TOML files via Vite's ?raw suffix so they are bundled at build time. Parse them with smol-toml and initialize i18next with inline resources — no HTTP fetch, no static-dir conflict between portal and editor both serving /locales/, and synchronous init so no Suspense boundary is needed.

Both portal and editor components use useTranslation() without fallback
strings. Without an initialized i18next instance in the Storybook preview,
those components rendered raw keys (e.g. 'accountLink.card.eyebrow') which
broke layout and made stories visually useless.

Import the en-US TOML files via Vite's ?raw suffix so they are bundled at
build time. Parse them with smol-toml and initialize i18next with inline
resources — no HTTP fetch, no static-dir conflict between portal and editor
both serving /locales/, and synchronous init so no Suspense boundary is needed.
@dosubot dosubot Bot added size:S This PR changes 10-29 lines ignoring generated files. enhancement New feature or request labels Jun 30, 2026
@stirlingbot stirlingbot Bot added Front End Issues or pull requests related to front-end development and removed enhancement New feature or request labels Jun 30, 2026
jbrunton96
jbrunton96 previously approved these changes Jun 30, 2026
…mports

ESLint flagged two issues in preview.tsx:
- @ts-ignore is banned (use @ts-expect-error per @typescript-eslint/ban-ts-comment)
- Relative imports (../portal/..., ../editor/...) are banned (use workspace aliases)

Add @portal-locales and @editor-locales aliases in main.ts pointing at
portal/public/locales and editor/public/locales respectively, then update
the two TOML ?raw imports in preview.tsx to use them.
@dosubot dosubot Bot added size:M This PR changes 30-99 lines ignoring generated files. and removed size:S This PR changes 10-29 lines ignoring generated files. labels Jun 30, 2026
@stirlingbot

stirlingbot Bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

🚀 V2 Auto-Deployment Complete!

Your V2 PR with embedded architecture has been deployed!

🔗 Direct Test URL (non-SSL) http://54.175.155.236:6848

🔐 Secure HTTPS URL: https://6848.ssl.stirlingpdf.cloud

This deployment will be automatically cleaned up when the PR is closed.

🔄 Auto-deployed for approved V2 contributors.

@reecebrowne reecebrowne added this pull request to the merge queue Jul 1, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jul 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Front End Issues or pull requests related to front-end development size:M This PR changes 30-99 lines ignoring generated files.

3 participants