feat(i18n): add Loco package integration and Storybook live sync#289
Open
HrithikMani wants to merge 1 commit into
Open
feat(i18n): add Loco package integration and Storybook live sync#289HrithikMani wants to merge 1 commit into
HrithikMani wants to merge 1 commit into
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds Loco i18n integration helpers plus Storybook tooling for switching locales and optionally running a “live sync” mode that discovers text in rendered stories and posts it to a Loco server.
Changes:
- Added i18n utility helpers (
createLocoTranslator, dotted-key resolution, fallback language support) with Vitest coverage. - Added Storybook preview decorators and globals for locale + Loco “package vs live” mode, including runtime script loading and textnode posting.
- Added a CLI script to export a Loco package and write it to a local sample pack used by Storybook integration stories.
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/loco-live.ts | Adds DOM scanning + POST helper for live text discovery/sync. |
| src/utils/index.ts | Re-exports new i18n and live-sync utilities. |
| src/utils/i18n.ts | Introduces translation dictionary resolution + dotted-key lookup + translator factory. |
| src/utils/i18n.test.ts | Adds unit tests for i18n helpers. |
| src/i18n/loco-sample-pack.json | Adds a sample Loco export package for Storybook demos. |
| src/components/Text/TextI18nIntegration.stories.tsx | Adds an i18n integration story demonstrating package-driven translation. |
| src/components/CountBadge/CountBadge.stories.tsx | Updates stories to use the translator (notably for “eSign” and item labels). |
| src/components/Badge/Badge.stories.tsx | Updates stories to use the translator for displayed labels. |
| src/components/AppHeader/AppHeaderI18nIntegration.stories.tsx | Adds an AppHeader i18n integration story using the translator. |
| scripts/sync-loco-pack.mjs | Adds a script to fetch/export a Loco package to a local JSON file. |
| package.json | Adds loco:pack:sync script entry. |
| pnpm-lock.yaml | Updates lockfile entries (ychart file reference normalization). |
| .storybook/preview.tsx | Adds Storybook globals + decorator to load/apply Loco runtime and post discovered phrases. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
392
to
401
| const preview: Preview = { | ||
| initialGlobals: { | ||
| brand: 'bluehive', | ||
| theme: 'light', | ||
| density: 'standard', | ||
| locale: 'en', | ||
| locoMode: 'package', | ||
| locoServer: 'http://localhost:6101', | ||
| locoApiKey: '82b6c1a44ec247dcb6c96fe0', | ||
| }, |
Comment on lines
+49
to
+52
| it('falls back to fallback language when missing', () => { | ||
| expect(resolveLocoTranslation(samplePack, 'fr', 'ui.missing', 'en')).toBeUndefined(); | ||
| expect(resolveLocoTranslation(samplePack, 'fr', 'ui.title', 'en')).toBe('Parametres'); | ||
| }); |
Deploying ui with
|
| Latest commit: |
94cd8f7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://aeb9ad53.ui-6d0.pages.dev |
| Branch Preview URL: | https://feat-loco-i18n-package-integ.ui-6d0.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds Loco i18n package integration to Storybook and introduces a live sync workflow for discovering and posting translatable text to Loco.
What Changed
Validation
Notes