Skip to content

feat(apollo-react): add i18n support for canvas components [MST-8210]#436

Draft
david-rios-uipath wants to merge 2 commits intomainfrom
feat/sticky-note-i18n-tooltips
Draft

feat(apollo-react): add i18n support for canvas components [MST-8210]#436
david-rios-uipath wants to merge 2 commits intomainfrom
feat/sticky-note-i18n-tooltips

Conversation

@david-rios-uipath
Copy link
Copy Markdown
Contributor

@david-rios-uipath david-rios-uipath commented Apr 1, 2026

Summary

  • Add Lingui localization to the formatting toolbar tooltips with a new canvas locale catalog (13 locales)
  • Migrate Lingui compiled locale output from CJS (module.exports) to ESM (export const messages) for better compatibility w/ Storybook
  • Configure the Lingui Babel macro plugin for Storybook and vitest

CJS → ESM locale migration

Lingui's default compileNamespace is cjs, which outputs module.exports = {...}. This caused two problems:

  1. Storybook (Vite dev server) serves .js files as ESM, so CJS locale files failed with does not provide an export named 'default'
  2. locale-registry.ts used ESM import syntax with @ts-expect-error suppressions to work around the CJS/ESM mismatch

Setting compileNamespace: 'es' in lingui.config.ts fixes both issues:

  • Compiled locales are now .mjs with proper export const messages = ...
  • locale-registry.ts uses clean typed named imports — no @ts-expect-error needed
  • Added lingui-locale.d.ts type declaration for .mjs imports
  • Removed the lingui-cjs-to-esm Vite workaround plugin from Storybook
  • Added **/locales/*.mjs to .gitignore (compiled output, same as the old .js files)

Storybook Lingui support

  • Added @vitejs/plugin-react with @lingui/babel-plugin-lingui-macro to Storybook's Vite config (scoped to apollo-react/src/ only)
  • Added root-level lingui.config.ts re-export so the Babel plugin can find the config from any workspace cwd

Test plan

  • Run pnpm i18n:compile && pnpm test in packages/apollo-react — verify locale compilation and tests pass
  • Run Storybook (pnpm storybook) — verify sticky note stories render without locale errors
  • Verify FormattingToolbar tooltips display localized text

🤖 Generated with Claude Code

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 1, 2026

Dependency License Review

  • 1948 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 4 package(s) excluded (see details below)
License distribution
License Packages
MIT 1707
ISC 89
Apache-2.0 61
BSD-3-Clause 28
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 5
MIT OR Apache-2.0 3
MIT-0 3
CC0-1.0 3
LGPL-3.0-or-later 2
Unknown 2
(MIT OR Apache-2.0) 2
Unlicense 2
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
@img/sharp-libvips-linuxmusl-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
@uipath/proteus-client 0.1.10 Unknown UiPath internal package, Proprietary license
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-i18n-tooltips branch from 73c084e to b6f1b06 Compare April 1, 2026 16:25
@david-rios-uipath david-rios-uipath changed the title feat(apollo-react): add i18n support for sticky note formatting toolbar tooltips feat(apollo-react): add i18n support for canvas components Apr 1, 2026
@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-i18n-tooltips branch from cc16cbf to 8ad5e85 Compare April 1, 2026 20:14
Copy link
Copy Markdown
Collaborator

@CalinaCristian CalinaCristian left a comment

Choose a reason for hiding this comment

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

Can you validate ap-chat (in web packages) still works properly? I think I chose cjs vs esm for some issues that were caused there.. if you run dev mode and switch language, does it actually switch?

@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-i18n-tooltips branch from 720c6ba to abdda60 Compare April 2, 2026 02:15
@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-formatting-next branch from fe4c2c3 to b6e0981 Compare April 2, 2026 02:15
@david-rios-uipath
Copy link
Copy Markdown
Contributor Author

It seems to be working as expected when run from web-packages after some changes to the locale copy script:

Screen.Recording.2026-04-01.at.10.45.52.PM.mov

@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-i18n-tooltips branch 3 times, most recently from 4e1b22b to 6ddd8ee Compare April 3, 2026 21:25
@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-formatting-next branch 2 times, most recently from 43462ed to 2ff16b3 Compare April 6, 2026 14:22
@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-i18n-tooltips branch from 6ddd8ee to 3572178 Compare April 6, 2026 14:22
@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-formatting-next branch from 2ff16b3 to 9871736 Compare April 6, 2026 14:23
@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-i18n-tooltips branch from 3572178 to fcfccbe Compare April 6, 2026 14:24
Base automatically changed from feat/sticky-note-formatting-next to main April 6, 2026 15:23
@david-rios-uipath david-rios-uipath changed the title feat(apollo-react): add i18n support for canvas components feat(apollo-react): add i18n support for canvas components [MST-8210] Apr 6, 2026
@david-rios-uipath david-rios-uipath force-pushed the feat/sticky-note-i18n-tooltips branch from fcfccbe to 8a517e5 Compare April 10, 2026 17:55
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 10, 2026

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

Project Deployment Review Updated (PT)
apollo-canvas 🟢 Ready Preview, Logs Apr 10, 2026, 11:01:02 AM
apollo-landing 🟢 Ready Preview, Logs Apr 10, 2026, 10:58:39 AM
apollo-ui-react 🟢 Ready Preview, Logs Apr 10, 2026, 11:00:19 AM
apollo-vertex 🟢 Ready Preview, Logs Apr 10, 2026, 11:00:14 AM
apollo-wind 🟢 Ready Preview, Logs Apr 10, 2026, 10:59:30 AM

@github-actions github-actions bot added the size:XL 500-999 changed lines. label Apr 10, 2026
// Write .js only if not already created from a .js source above
const jsFile = join(distLocales, `${baseName}.js`);
if (!existsSync(jsFile)) {
writeFileSync(jsFile, content, 'utf-8');
'/*eslint-disable*/module.exports={messages:'
)
.replace(/;$/, '};');
writeFileSync(cjsFile, cjsContent, 'utf-8');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XL 500-999 changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants