From 181460d3b02fc6bf5991f717b61f4135e0d60b5d Mon Sep 17 00:00:00 2001
From: Bamieh <ahmad.bamyeh@elastic.co>
Date: Fri, 7 Jun 2024 19:20:43 +0300
Subject: [PATCH 1/2] initialize i18n with english locale

---
 packages/kbn-storybook/src/lib/decorators.tsx | 7 +++++--
 packages/kbn-storybook/tsconfig.json          | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/kbn-storybook/src/lib/decorators.tsx b/packages/kbn-storybook/src/lib/decorators.tsx
index 8693d55faac61..001c7ad630b93 100644
--- a/packages/kbn-storybook/src/lib/decorators.tsx
+++ b/packages/kbn-storybook/src/lib/decorators.tsx
@@ -18,10 +18,11 @@ import { CoreTheme } from '@kbn/core-theme-browser';
 import { I18nStart } from '@kbn/core-i18n-browser';
 import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
 import { KibanaRootContextProvider } from '@kbn/react-kibana-context-root';
+import { i18n } from '@kbn/i18n';
 
 const theme$ = new BehaviorSubject<CoreTheme>({ darkMode: false });
 
-const i18n: I18nStart = {
+const i18nStart: I18nStart = {
   Context: ({ children }) => <I18nProvider>{children}</I18nProvider>,
 };
 
@@ -36,6 +37,8 @@ const analytics: AnalyticsServiceStart = {
  * `globals` provided by the Storybook theme switcher to set the `colorMode`.
  */
 const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => {
+  // TODO: Add a switcher to see components in other locales or pseudo locale
+  i18n.init({ locale: 'en' });
   const colorMode = globals.euiTheme === 'v8.dark' ? 'dark' : 'light';
 
   useEffect(() => {
@@ -43,7 +46,7 @@ const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => {
   }, [colorMode]);
 
   return (
-    <KibanaRootContextProvider {...{ theme: { theme$ }, analytics, i18n }}>
+    <KibanaRootContextProvider {...{ theme: { theme$ }, analytics, i18n: i18nStart }}>
       {storyFn()}
     </KibanaRootContextProvider>
   );
diff --git a/packages/kbn-storybook/tsconfig.json b/packages/kbn-storybook/tsconfig.json
index 97d423551115d..ab513c1d02c0c 100644
--- a/packages/kbn-storybook/tsconfig.json
+++ b/packages/kbn-storybook/tsconfig.json
@@ -17,6 +17,7 @@
     "@kbn/repo-info",
     "@kbn/dev-cli-runner",
     "@kbn/core-theme-browser",
+    "@kbn/i18n",
     "@kbn/i18n-react",
     "@kbn/core-i18n-browser",
     "@kbn/react-kibana-context-root",

From 58bee22e2bf7e748848a368e243f0d18ad0f4b77 Mon Sep 17 00:00:00 2001
From: Bamieh <ahmad.bamyeh@elastic.co>
Date: Fri, 7 Jun 2024 21:22:06 +0300
Subject: [PATCH 2/2] fix types

---
 packages/kbn-storybook/src/lib/decorators.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kbn-storybook/src/lib/decorators.tsx b/packages/kbn-storybook/src/lib/decorators.tsx
index 001c7ad630b93..ff10c78fe4589 100644
--- a/packages/kbn-storybook/src/lib/decorators.tsx
+++ b/packages/kbn-storybook/src/lib/decorators.tsx
@@ -38,7 +38,7 @@ const analytics: AnalyticsServiceStart = {
  */
 const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => {
   // TODO: Add a switcher to see components in other locales or pseudo locale
-  i18n.init({ locale: 'en' });
+  i18n.init({ locale: 'en', messages: {} });
   const colorMode = globals.euiTheme === 'v8.dark' ? 'dark' : 'light';
 
   useEffect(() => {