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

Add Lingui localization to the formatting toolbar tooltips with
platform-dependent keyboard shortcuts (⌘ on Mac, Ctrl+ elsewhere).
Includes a new canvas locale catalog with 13 supported locales and
configures the Lingui babel plugin for vitest.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: david-rios-uipath

apps/storybook/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import react from "@vitejs/plugin-react";
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -31,6 +32,34 @@ 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'],
+        },
+      })
+    );
+
+    // Lingui compiles locale catalogs to CommonJS (.js with module.exports).
+    // Vite's dev server serves .js as ESM, breaking default imports from CJS.
+    // This plugin converts CJS → ESM on the fly for locale files.
+    config.plugins.push({
+      name: 'lingui-cjs-to-esm',
+      transform(code, id) {
+        if (id.includes('/locales/') && /\.js(\?|$)/.test(id) && code.includes('module.exports')) {
+          return code.replace(/module\.exports\s*=\s*/, 'export default ');
+        }
+      },
+    });
+    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,6 +13,10 @@ 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' }),
 };

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,6 +1,8 @@
+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';
+import { memo, type RefObject, useCallback, useMemo } from 'react';
 import type { ActiveFormats } from './markdown-formatting';
 import {
   toggleBold,
@@ -16,6 +18,10 @@ import {
 } from './StickyNoteNode.styles';
 import type { TextSelection } from './StickyNoteNode.types';
 
+const isMac = () => typeof navigator !== 'undefined' && /Mac/.test(navigator.userAgent);
+
+const getModifierKey = () => (isMac() ? '⌘' : 'Ctrl+');
+
 interface FormattingToolbarProps {
   textAreaRef: RefObject<HTMLTextAreaElement | null>;
   borderColor: string;
@@ -29,6 +35,9 @@ const FormattingToolbarComponent = ({
   activeFormats,
   onFormat,
 }: FormattingToolbarProps) => {
+  const { _ } = useLingui();
+  const mod = useMemo(() => getModifierKey(), []);
+
   const applyFormat = useCallback(
     (formatFn: (input: TextSelection) => TextSelection) => {
       const textarea = textAreaRef.current;
@@ -52,36 +61,75 @@ const FormattingToolbarComponent = ({
   const handleBulletList = useCallback(() => applyFormat(toggleBulletList), [applyFormat]);
   const handleNumberedList = useCallback(() => applyFormat(toggleNumberedList), [applyFormat]);
 
+  const boldShortcut = `${mod}B`;
+  const italicShortcut = `${mod}I`;
+  const strikethroughShortcut = `${mod}⇧X`;
+
   return (
     <FormattingToolbarContainer
       borderColor={borderColor}
       onMouseDown={(e) => e.preventDefault()}
       className="nodrag nowheel"
     >
-      <ApTooltip content="Bold (⌘B)" placement="top" delay>
+      <ApTooltip
+        content={_(
+          msg({
+            id: 'sticky-note.formatting.bold',
+            message: `Bold (${boldShortcut})`,
+          })
+        )}
+        placement="top"
+        delay
+      >
         <FormattingButton isActive={activeFormats.bold} onClick={handleBold}>
           <NodeIcon icon="bold" size={14} />
         </FormattingButton>
       </ApTooltip>
-      <ApTooltip content="Italic (⌘I)" placement="top" delay>
+      <ApTooltip
+        content={_(
+          msg({
+            id: 'sticky-note.formatting.italic',
+            message: `Italic (${italicShortcut})`,
+          })
+        )}
+        placement="top"
+        delay
+      >
         <FormattingButton isActive={activeFormats.italic} onClick={handleItalic}>
           <NodeIcon icon="italic" size={14} />
         </FormattingButton>
       </ApTooltip>
-      <ApTooltip content="Strikethrough (⌘⇧X)" placement="top" delay>
+      <ApTooltip
+        content={_(
+          msg({
+            id: 'sticky-note.formatting.strikethrough',
+            message: `Strikethrough (${strikethroughShortcut})`,
+          })
+        )}
+        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

@@ -4,6 +4,7 @@ import type { NodeProps } from '@uipath/apollo-react/canvas/xyflow/react';
 import { NodeResizeControl, useReactFlow } from '@uipath/apollo-react/canvas/xyflow/react';
 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';
@@ -335,7 +336,7 @@ const StickyNoteNodeComponent = ({
           <TopCornerIndicators selected={selected} />
           <BottomCornerIndicators selected={selected} />
           {isEditing ? (
-            <>
+            <ApI18nProvider component="canvas">
               <FormattingToolbar
                 textAreaRef={textAreaRef}
                 borderColor={color}
@@ -354,7 +355,7 @@ const StickyNoteNodeComponent = ({
                 isEditing={isEditing}
                 className="nodrag nowheel"
               />
-            </>
+            </ApI18nProvider>
           ) : (
             <StickyNoteMarkdown ref={markdownRef} {...scrollCaptureProps}>
               {localContent ? (

packages/apollo-react/src/canvas/locales/de.json

@@ -0,0 +1,7 @@
+{
+  "sticky-note.formatting.bold": "",
+  "sticky-note.formatting.italic": "",
+  "sticky-note.formatting.strikethrough": "",
+  "sticky-note.formatting.bullet-list": "",
+  "sticky-note.formatting.numbered-list": ""
+}

packages/apollo-react/src/canvas/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "sticky-note.formatting.bold": "Bold ({boldShortcut})",
+  "sticky-note.formatting.italic": "Italic ({italicShortcut})",
+  "sticky-note.formatting.strikethrough": "Strikethrough ({strikethroughShortcut})",
+  "sticky-note.formatting.bullet-list": "Bullet list",
+  "sticky-note.formatting.numbered-list": "Numbered list"
+}

packages/apollo-react/src/canvas/locales/es-MX.json

@@ -0,0 +1,7 @@
+{
+  "sticky-note.formatting.bold": "",
+  "sticky-note.formatting.italic": "",
+  "sticky-note.formatting.strikethrough": "",
+  "sticky-note.formatting.bullet-list": "",
+  "sticky-note.formatting.numbered-list": ""
+}