chore: use i18n in storybook

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview, StoryFn } from '@storybook/react';
 
 import 'src/shared/styles/global.css';
 import 'src/shared/styles/variables.css';
@@ -9,6 +9,31 @@ import { MemoryRouter } from 'react-router';
 import { Suspense } from 'react';
 import { ToastOption } from 'src/shared/ui/Toast/toastOption';
 import { Toaster } from 'react-hot-toast';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import i18next from 'i18next';
+import Backend from 'i18next-http-backend';
+import i18n from '../src/app/i18n';
+
+const withI18next = (Story: StoryFn) => {
+  i18next
+    .use(initReactI18next)
+    .use(Backend)
+    .init({
+      ...i18n,
+      backend: { loadPath: '../public/locales/{{lng}}/{{ns}}.json' },
+      detection: {
+        order: ['htmlTag'],
+        caches: [],
+      },
+    });
+  return (
+    <Suspense fallback={<div>loading translations...</div>}>
+      <I18nextProvider i18n={i18next}>
+        <Story />
+      </I18nextProvider>
+    </Suspense>
+  );
+};
 
 const preview: Preview = {
   parameters: {
@@ -26,6 +51,7 @@ const preview: Preview = {
     },
   },
   decorators: [
+    withI18next,
     (Story) => (
       <MemoryRouter initialEntries={['/']}>
         <IdealPartnerProvider>