chore(apollo-react): add temp locale selector to Flow Default story

Adds a temporary Storybook control on `Flow > Default` that drives the
StickyNote formatting toolbar's locale via `ApI18nProvider`. Intended
purely as a dev-harness to verify the canvas i18n pipeline end-to-end
until a real ambient locale context exists.

- New optional `locale?: SupportedLocale` prop on `StickyNoteNode`,
  threaded into the internal `ApI18nProvider`. Marked as storybook-only
  in the JSDoc.
- New `stickyNoteLocale` storybook arg (select control, 5 translated
  locales: en/es/fr/ja/de).
- `DefaultStory` rebuilds its `stickyNote` node type entry on locale
  change so xyflow remounts the notes with the new prop — xyflow keys
  its node type map by component identity, so a stable wrapper would
  close over the initial value.

Remove the arg, the prop, and this commit once a real locale context
lands.

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

Author: david-rios-uipath

packages/apollo-react/src/canvas/components/Flow.stories.tsx

@@ -3,7 +3,17 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { Edge, Node, NodeProps } from '@uipath/apollo-react/canvas/xyflow/react';
 import { Handle, Panel, Position, useReactFlow } from '@uipath/apollo-react/canvas/xyflow/react';
 import { Download, Plus, StickyNote } from 'lucide-react';
-import { type FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type ComponentProps,
+  type FC,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { SupportedLocale } from '../../i18n';
 import { useCanvasEvent, useExportCanvas } from '../hooks';
 import {
   createNode,
@@ -28,8 +38,19 @@ import type { ListItem } from './Toolbox';
 
 interface FlowStoryArgs {
   useSmartHandles: boolean;
+  /**
+   * TEMPORARY dev harness — drives the StickyNote formatting toolbar's locale
+   * via the `ApI18nProvider`. Remove once a real ambient locale context lands.
+   * Only `en / es / fr / ja / de` have non-empty translations today; other
+   * locales fall back to the source `message` default.
+   */
+  stickyNoteLocale: SupportedLocale;
 }
 
+// Locales that actually have translations in src/canvas/locales/*.json (others
+// are shipped with empty strings and fall back to the English `message`).
+const STICKY_NOTE_LOCALE_OPTIONS: SupportedLocale[] = ['en', 'es', 'fr', 'ja', 'de'];
+
 const meta: Meta<FlowStoryArgs> = {
   title: 'Flow',
   parameters: {
@@ -45,9 +66,19 @@ const meta: Meta<FlowStoryArgs> = {
         defaultValue: { summary: 'false' },
       },
     },
+    stickyNoteLocale: {
+      control: 'select',
+      options: STICKY_NOTE_LOCALE_OPTIONS,
+      description:
+        '[TEMP] Locale applied to the StickyNote formatting toolbar tooltips. Remove once a real locale context lands.',
+      table: {
+        defaultValue: { summary: 'en' },
+      },
+    },
   },
   args: {
     useSmartHandles: false,
+    stickyNoteLocale: 'en',
   },
 };
 
@@ -159,11 +190,19 @@ const ExportMessage = styled.div`
 
 const DELETE_KEY_CODES = ['Backspace', 'Delete'];
 
-const additionalNodeTypes = {
-  stickyNote: StickyNoteNode,
-};
+function DefaultStory({ useSmartHandles, stickyNoteLocale }: FlowStoryArgs) {
+  // Re-create the node type whenever the locale changes so xyflow remounts the
+  // sticky notes with the new `locale` prop. (xyflow keys its node type map by
+  // component identity; a stable wrapper would close over the initial value.)
+  const additionalNodeTypes = useMemo(
+    () => ({
+      stickyNote: (props: ComponentProps<typeof StickyNoteNode>) => (
+        <StickyNoteNode {...props} locale={stickyNoteLocale} />
+      ),
+    }),
+    [stickyNoteLocale]
+  );
 
-function DefaultStory({ useSmartHandles }: FlowStoryArgs) {
   const initialNodes = useMemo(() => createInitialNodes(useSmartHandles), [useSmartHandles]);
   const initialEdges = useMemo(() => createInitialEdges(), []);
   const [stickyNoteCounter, setStickyNoteCounter] = useState(0);

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

@@ -5,7 +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 { ApI18nProvider, type SupportedLocale } from '../../../i18n';
 import ReactMarkdown from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
@@ -42,6 +42,12 @@ export interface StickyNoteNodeProps extends NodeProps {
   data: StickyNoteData;
   placeholder?: string;
   renderPlaceholderOnSelect?: boolean;
+  /**
+   * Locale for the formatting toolbar tooltips. Defaults to `'en'`. Currently
+   * only consumed by the storybook harness — production callers should rely on
+   * an ambient locale context once one is wired up.
+   */
+  locale?: SupportedLocale;
   onContentChange?: (content: string) => void;
   onColorChange?: (color: StickyNoteColor) => void;
   onResize?: (width: number, height: number) => void;
@@ -57,6 +63,7 @@ const StickyNoteNodeComponent = ({
   dragging,
   placeholder = 'Add text',
   renderPlaceholderOnSelect = false,
+  locale,
   onContentChange,
   onColorChange,
   onResize,
@@ -349,7 +356,7 @@ const StickyNoteNodeComponent = ({
           <TopCornerIndicators selected={selected} />
           <BottomCornerIndicators selected={selected} />
           {isEditing ? (
-            <ApI18nProvider component="canvas">
+            <ApI18nProvider component="canvas" locale={locale}>
               <FormattingToolbar
                 textAreaRef={textAreaRef}
                 borderColor={color}