feat(apollo-react): add i18n support for sticky note formatting toolbar tooltips

Author: david-rios-uipath

.gitignore

@@ -24,6 +24,7 @@ storybook-static/
 
 # Compiled locale files (generated by lingui compile)
 **/locales/*.js
+**/locales/*.mjs
 
 # Playwright MCP
 .playwright-mcp

apps/storybook/.storybook/main.ts

@@ -1,7 +1,8 @@
-import type { StorybookConfig } from "@storybook/react-vite";
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import type { StorybookConfig } from "@storybook/react-vite";
+import react from "@vitejs/plugin-react";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -31,6 +32,23 @@ const reactScanHook = isDev
   : "";
 
 const config: StorybookConfig = {
+  viteFinal(config) {
+    config.plugins ??= [];
+
+    // Lingui macros (`@lingui/core/macro`) are compile-time Babel transforms.
+    // Without this plugin, they run uncompiled in the browser and crash (process is not defined).
+    // Only process source files — dist/ is already compiled and doesn't contain macros.
+    config.plugins.push(
+      react({
+        include: /packages\/apollo-react\/src\/.*\.[tj]sx?$/,
+        babel: {
+          plugins: ["@lingui/babel-plugin-lingui-macro"],
+        },
+      }),
+    );
+
+    return config;
+  },
   stories: [
     // For now only include canvas stories
     {

apps/storybook/package.json

@@ -21,11 +21,13 @@
     "react-dom": "19.2.3"
   },
   "devDependencies": {
+    "@lingui/babel-plugin-lingui-macro": "^5.9.4",
     "@storybook/addon-a11y": "^10.2.15",
     "@storybook/addon-docs": "^10.2.15",
     "@storybook/addon-links": "^10.2.15",
     "@storybook/react": "^10.2.15",
     "@storybook/react-vite": "^10.2.15",
+    "@vitejs/plugin-react": "^4.7.0",
     "prettier": "^3.8.1",
     "react-scan": "^0.5.3",
     "storybook": "^10.2.15",

lingui.config.ts

@@ -0,0 +1,6 @@
+/**
+ * Root-level Lingui config for tooling that searches from cwd (e.g. Storybook).
+ * The canonical config lives in packages/apollo-react/lingui.config.ts —
+ * this re-exports it so the Babel macro plugin can find it from any workspace.
+ */
+export { default } from './packages/apollo-react/lingui.config';

packages/apollo-react/lingui.config.ts

@@ -13,8 +13,13 @@ const config: LinguiConfig = {
       path: 'src/material/components/ap-tool-call/locales/{locale}',
       include: ['src/material/components/ap-tool-call'],
     },
+    {
+      path: 'src/canvas/locales/{locale}',
+      include: ['src/canvas'],
+    },
   ],
   format: formatter({ style: 'minimal' }),
+  compileNamespace: 'es',
 };
 
 export default config;

packages/apollo-react/rslib.config.ts

@@ -58,7 +58,7 @@ export default defineConfig({
         '!./src/test/**',
         '!./src/icons/.cache',
         '!./src/**/*.md',
-        '!./src/**/locales/*.js',
+        '!./src/**/locales/*.mjs',
         '!./src/**/locales/*.json',
         '!./src/**/.DS_Store',
       ],

packages/apollo-react/scripts/plugin-copy-locales.ts

@@ -1,27 +1,46 @@
-import {
-  existsSync,
-  mkdirSync,
-  readFileSync,
-  readdirSync,
-  statSync,
-  writeFileSync,
-} from 'fs';
-import {
-  dirname,
-  join,
-} from 'path';
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'fs';
+import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const packageRoot = dirname(__dirname);
 
 /**
- * Convert CommonJS locale module to ESM format
- * From: module.exports={messages:JSON.parse("{...}")};
- * To: export default {messages:JSON.parse("{...}")};
+ * Copy Lingui-compiled locale catalogs from `src/**\/locales/` into `dist/`.
+ *
+ * Lingui is configured with `compileNamespace: 'es'`, so it emits ESM modules
+ * as `*.mjs` with a named export:
+ *
+ *   /\*eslint-disable*\/export const messages=JSON.parse("{...}");
+ *
+ * For `dist/` we need:
+ *   - `*.js`  — ESM consumers (identical contents to the `.mjs`, just renamed
+ *               so rslib's `.mjs → .js` import rewriting in compiled output
+ *               resolves correctly).
+ *   - `*.cjs` — CommonJS consumers, synthesized by wrapping the RHS of the
+ *               single `export const messages=…;` statement in
+ *               `module.exports = { messages: … };`.
+ *   - `*.json` — copied verbatim for runtime catalog loaders.
+ *
+ * The CJS synthesis is intentionally tied to the exact shape Lingui emits.
+ * If Lingui ever changes its ESM output format, we fail loudly (throw) so
+ * the breakage surfaces here rather than as a silent link-time error in a
+ * downstream package (see `locale-registry.ts`, which imports
+ * `{ messages }` as a named export).
  */
-function convertToESM(content: string): string {
-  return content.replace(/module\.exports\s*=\s*/, 'export default ');
+const ESM_PREFIX = '/*eslint-disable*/export const messages=';
+
+function esmToCjs(esmContent: string, srcFile: string): string {
+  const trimmed = esmContent.trimEnd();
+  if (!trimmed.startsWith(ESM_PREFIX) || !trimmed.endsWith(';')) {
+    throw new Error(
+      `plugin-copy-locales: unexpected Lingui ESM output in ${srcFile}.\n` +
+        `Expected a file starting with '${ESM_PREFIX}' and ending with ';'.\n` +
+        `Got:\n${trimmed.slice(0, 200)}...`
+    );
+  }
+  const rhs = trimmed.slice(ESM_PREFIX.length, -1); // strip prefix + trailing `;`
+  return `/*eslint-disable*/module.exports={messages:${rhs}};`;
 }
 
 export function pluginCopyLocales() {
@@ -42,30 +61,26 @@ export function pluginCopyLocales() {
               const distLocales = join(distDir, relativePath);
 
               if (existsSync(srcLocales)) {
-                // Ensure dist directory exists
                 mkdirSync(distLocales, { recursive: true });
 
-                // Process each locale file
-                const files = readdirSync(srcLocales);
-                for (const file of files) {
-                  if (file.endsWith('.js')) {
-                    const srcFile = join(srcLocales, file);
+                for (const file of readdirSync(srcLocales)) {
+                  const srcFile = join(srcLocales, file);
+
+                  if (file.endsWith('.mjs')) {
                     const content = readFileSync(srcFile, 'utf-8');
+                    const baseName = file.replace(/\.mjs$/, '');
 
-                    // Write .cjs (CommonJS format)
-                    const cjsFile = join(distLocales, file.replace('.js', '.cjs'));
-                    writeFileSync(cjsFile, content, 'utf-8');
+                    // ESM: same contents, .js extension for rslib import rewriting.
+                    writeFileSync(join(distLocales, `${baseName}.js`), content, 'utf-8');
 
-                    // Write .js (ESM format)
-                    const esmFile = join(distLocales, file);
-                    const esmContent = convertToESM(content);
-                    writeFileSync(esmFile, esmContent, 'utf-8');
+                    // CJS: synthesize from the known ESM shape.
+                    writeFileSync(
+                      join(distLocales, `${baseName}.cjs`),
+                      esmToCjs(content, srcFile),
+                      'utf-8'
+                    );
                   } else if (file.endsWith('.json')) {
-                    // Copy JSON files as-is
-                    const srcFile = join(srcLocales, file);
-                    const destFile = join(distLocales, file);
-                    const content = readFileSync(srcFile, 'utf-8');
-                    writeFileSync(destFile, content, 'utf-8');
+                    writeFileSync(join(distLocales, file), readFileSync(srcFile, 'utf-8'), 'utf-8');
                   }
                 }
 

packages/apollo-react/src/canvas/components/StickyNoteNode/FormattingToolbar.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
+import { ApI18nProvider } from '../../../i18n';
 import { FormattingToolbar } from './FormattingToolbar';
 import type { ActiveFormats } from './markdown-formatting';
 
@@ -21,12 +22,20 @@ function createMockTextArea(value = '', selectionStart = 0, selectionEnd = 0) {
   return { current: textarea };
 }
 
+function renderWithI18n(ui: React.ReactElement) {
+  return render(
+    <ApI18nProvider component="canvas" locale="en">
+      {ui}
+    </ApI18nProvider>
+  );
+}
+
 describe('FormattingToolbar', () => {
   it('calls onFormat when a button is clicked', () => {
     const onFormat = vi.fn();
     const ref = createMockTextArea('hello world', 6, 11);
 
-    render(
+    renderWithI18n(
       <FormattingToolbar
         textAreaRef={ref}
         borderColor="#42A1FF"
@@ -46,7 +55,7 @@ describe('FormattingToolbar', () => {
     const onFormat = vi.fn();
     const ref = { current: null } as React.RefObject<HTMLTextAreaElement | null>;
 
-    render(
+    renderWithI18n(
       <FormattingToolbar
         textAreaRef={ref}
         borderColor="#42A1FF"
@@ -61,7 +70,7 @@ describe('FormattingToolbar', () => {
 
   it('prevents textarea blur on mousedown', () => {
     const ref = { current: null } as React.RefObject<HTMLTextAreaElement | null>;
-    const { container } = render(
+    const { container } = renderWithI18n(
       <FormattingToolbar
         textAreaRef={ref}
         borderColor="#42A1FF"
@@ -70,7 +79,7 @@ describe('FormattingToolbar', () => {
       />
     );
 
-    const toolbarContainer = container.firstChild as HTMLElement;
+    const toolbarContainer = container.querySelector('[class]') as HTMLElement;
     const mouseDownEvent = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
     const prevented = !toolbarContainer.dispatchEvent(mouseDownEvent);
     expect(prevented).toBe(true);

packages/apollo-react/src/canvas/components/StickyNoteNode/FormattingToolbar.tsx

@@ -1,3 +1,5 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { NodeIcon } from '@uipath/apollo-react/canvas';
 import { ApTooltip } from '@uipath/apollo-react/material/components';
 import { memo, type RefObject, useCallback } from 'react';
@@ -30,6 +32,11 @@ const FormattingToolbarComponent = ({
   activeFormats,
   onFormat,
 }: FormattingToolbarProps) => {
+  const { _ } = useLingui();
+
+  const mod = getModifierKey();
+  const shift = isMac() ? '⇧' : '+Shift+';
+
   const applyFormat = useCallback(
     (formatFn: (input: TextSelection) => TextSelection) => {
       const textarea = textAreaRef.current;
@@ -53,39 +60,71 @@ const FormattingToolbarComponent = ({
   const handleBulletList = useCallback(() => applyFormat(toggleBulletList), [applyFormat]);
   const handleNumberedList = useCallback(() => applyFormat(toggleNumberedList), [applyFormat]);
 
-  const mod = getModifierKey();
-  const shift = isMac() ? '⇧' : '+Shift+';
-
   return (
     <FormattingToolbarContainer
       borderColor={borderColor}
       onMouseDown={(e) => e.preventDefault()}
       className="nodrag nowheel"
     >
-      <ApTooltip content={`Bold (${mod}+B)`} placement="top" delay>
+      <ApTooltip
+        content={_(
+          msg({
+            id: 'sticky-note.formatting.bold',
+            message: `Bold (${mod}+B)`,
+          })
+        )}
+        placement="top"
+        delay
+      >
         <FormattingButton isActive={activeFormats.bold} onClick={handleBold}>
           <NodeIcon icon="bold" size={14} />
         </FormattingButton>
       </ApTooltip>
-      <ApTooltip content={`Italic (${mod}+I)`} placement="top" delay>
+      <ApTooltip
+        content={_(
+          msg({
+            id: 'sticky-note.formatting.italic',
+            message: `Italic (${mod}+I)`,
+          })
+        )}
+        placement="top"
+        delay
+      >
         <FormattingButton isActive={activeFormats.italic} onClick={handleItalic}>
           <NodeIcon icon="italic" size={14} />
         </FormattingButton>
       </ApTooltip>
-      <ApTooltip content={`Strikethrough (${mod}${shift}X)`} placement="top" delay>
+      <ApTooltip
+        content={_(
+          msg({
+            id: 'sticky-note.formatting.strikethrough',
+            message: `Strikethrough (${mod}${shift}X)`,
+          })
+        )}
+        placement="top"
+        delay
+      >
         <FormattingButton isActive={activeFormats.strikethrough} onClick={handleStrikethrough}>
           <NodeIcon icon="strikethrough" size={14} />
         </FormattingButton>
       </ApTooltip>
 
       <ToolbarSeparator />
 
-      <ApTooltip content="Bullet list" placement="top" delay>
+      <ApTooltip
+        content={_(msg({ id: 'sticky-note.formatting.bullet-list', message: 'Bullet list' }))}
+        placement="top"
+        delay
+      >
         <FormattingButton isActive={activeFormats.bulletList} onClick={handleBulletList}>
           <NodeIcon icon="list" size={14} />
         </FormattingButton>
       </ApTooltip>
-      <ApTooltip content="Numbered list" placement="top" delay>
+      <ApTooltip
+        content={_(msg({ id: 'sticky-note.formatting.numbered-list', message: 'Numbered list' }))}
+        placement="top"
+        delay
+      >
         <FormattingButton isActive={activeFormats.numberedList} onClick={handleNumberedList}>
           <NodeIcon icon="list-ordered" size={14} />
         </FormattingButton>

packages/apollo-react/src/canvas/components/StickyNoteNode/StickyNoteNode.tsx

@@ -5,6 +5,7 @@ import { NodeResizeControl, useReactFlow } from '@uipath/apollo-react/canvas/xyf
 import type { ResizeDragEvent, ResizeParams } from '@uipath/apollo-react/canvas/xyflow/system';
 import { AnimatePresence } from 'motion/react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ApI18nProvider } from '../../../i18n';
 import ReactMarkdown from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
@@ -348,7 +349,7 @@ const StickyNoteNodeComponent = ({
           <TopCornerIndicators selected={selected} />
           <BottomCornerIndicators selected={selected} />
           {isEditing ? (
-            <>
+            <ApI18nProvider component="canvas">
               <FormattingToolbar
                 textAreaRef={textAreaRef}
                 borderColor={color}
@@ -367,7 +368,7 @@ const StickyNoteNodeComponent = ({
                 isEditing={isEditing}
                 className="nodrag nowheel"
               />
-            </>
+            </ApI18nProvider>
           ) : (
             <StickyNoteMarkdown ref={markdownRef} {...scrollCaptureProps}>
               {localContent ? (