refactor!: use i18next with local provider as lib

memori-ai · Dec 11, 2023 · d7a192c · d7a192c
1 parent 9f78d95
commit d7a192c
Show file tree

Hide file tree

Showing 41 changed files with 341 additions and 166 deletions.
diff --git a/src/I18nWrapper.tsx b/src/I18nWrapper.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n';
+
+export interface Props {
+  children: React.ReactNode;
+}
+
+const I18nWrapper = ({ children }: Props) => (
+  <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+);
+
+export default I18nWrapper;
diff --git a/src/components/AgeVerificationModal/AgeVerificationModal.stories.tsx b/src/components/AgeVerificationModal/AgeVerificationModal.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import AgeVerificationModal, { Props } from './AgeVerificationModal';
 
 import './AgeVerificationModal.css';
@@ -15,7 +16,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <AgeVerificationModal {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <AgeVerificationModal {...args} />
+  </I18nWrapper>
+);
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing

diff --git a/src/components/AttachmentLinkModal/AttachmentLinkModal.stories.tsx b/src/components/AttachmentLinkModal/AttachmentLinkModal.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import AttachmentLinkModal, { Props } from './AttachmentLinkModal';
 
 import './AttachmentLinkModal.css';
@@ -15,7 +16,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <AttachmentLinkModal {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <AttachmentLinkModal {...args} />
+  </I18nWrapper>
+);
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing

diff --git a/src/components/AttachmentMediaModal/AttachmentMediaModal.stories.tsx b/src/components/AttachmentMediaModal/AttachmentMediaModal.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import AttachmentMediaModal, { Props } from './AttachmentMediaModal';
 import memoriAPIClient from '@memori.ai/memori-api-client';
+import I18nWrapper from '../../I18nWrapper';
 import { Asset } from '@memori.ai/memori-api-client/dist/types';
 
 const client = memoriAPIClient();
@@ -17,7 +18,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <AttachmentMediaModal {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <AttachmentMediaModal {...args} />
+  </I18nWrapper>
+);
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing

diff --git a/src/components/Auth/Auth.stories.tsx b/src/components/Auth/Auth.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import AuthWidget, { Props } from './Auth';
 
 import './Auth.css';
@@ -33,11 +34,13 @@ const Template: Story<Props> = args => {
   );
 
   return (
-    <AuthWidget
-      {...args}
-      pwdOrTokens={pwdOrTokens}
-      setPwdOrTokens={setPwdOrTokens}
-    />
+    <I18nWrapper>
+      <AuthWidget
+        {...args}
+        pwdOrTokens={pwdOrTokens}
+        setPwdOrTokens={setPwdOrTokens}
+      />
+    </I18nWrapper>
   );
 };
 
@@ -47,12 +50,14 @@ const TemplateWithModal: Story<Props> = args => {
   );
 
   return (
-    <AuthWidget
-      {...args}
-      withModal
-      pwdOrTokens={pwdOrTokens}
-      setPwdOrTokens={setPwdOrTokens}
-    />
+    <I18nWrapper>
+      <AuthWidget
+        {...args}
+        withModal
+        pwdOrTokens={pwdOrTokens}
+        setPwdOrTokens={setPwdOrTokens}
+      />
+    </I18nWrapper>
   );
 };
 

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, tenant, integration } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
 import Avatar, { Props } from './Avatar';
 
 import './Avatar.css';
@@ -30,32 +31,34 @@ const Template: Story<Props> = args => {
   );
 
   return (
-    <div
-      style={
-        args.integrationConfig?.avatar === 'customglb' ||
-        args.integrationConfig?.avatar === 'readyplayerme' ||
-        args.integrationConfig?.avatar === 'readyplayerme-full'
-          ? {}
-          : { marginTop: '20vw' }
-      }
-    >
-      <Avatar
-        {...args}
-        integrationConfig={
-          args.integrationConfig
-            ? {
-                ...args.integrationConfig,
-                avatarURL:
-                  args.integrationConfig.avatarURL?.split('#')?.[0] +
-                  `#${new Date(Date.now()).toISOString()}`,
-              }
-            : undefined
+    <I18nWrapper>
+      <div
+        style={
+          args.integrationConfig?.avatar === 'customglb' ||
+          args.integrationConfig?.avatar === 'readyplayerme' ||
+          args.integrationConfig?.avatar === 'readyplayerme-full'
+            ? {}
+            : { marginTop: '20vw' }
         }
-        avatar3dVisible={avatar3dVisible}
-        setAvatar3dVisible={setAvatar3dVisible}
-        key={Date.now()}
-      />
-    </div>
+      >
+        <Avatar
+          {...args}
+          integrationConfig={
+            args.integrationConfig
+              ? {
+                  ...args.integrationConfig,
+                  avatarURL:
+                    args.integrationConfig.avatarURL?.split('#')?.[0] +
+                    `#${new Date(Date.now()).toISOString()}`,
+                }
+              : undefined
+          }
+          avatar3dVisible={avatar3dVisible}
+          setAvatar3dVisible={setAvatar3dVisible}
+          key={Date.now()}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

diff --git a/src/components/AvatarView/AvatarView.stories.tsx b/src/components/AvatarView/AvatarView.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import AvatarView, { Props } from './index';
 
 const meta: Meta = {
@@ -67,11 +68,13 @@ const Template: Story<Props> = args => {
   }, []);
 
   return hydrated ? (
-    <AvatarView
-      {...args}
-      url={args.url + `#${new Date(Date.now()).toISOString()}`}
-      key={Date.now()}
-    />
+    <I18nWrapper>
+      <AvatarView
+        {...args}
+        url={args.url + `#${new Date(Date.now()).toISOString()}`}
+        key={Date.now()}
+      />
+    </I18nWrapper>
   ) : (
     <></>
   );

diff --git a/src/components/Blob/Blob.stories.tsx b/src/components/Blob/Blob.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import Blob, { Props } from './Blob';
 import './Blob.css';
 
@@ -26,9 +27,11 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<Props> = args => (
-  <div style={{ marginTop: '20vw' }}>
-    <Blob {...args} />
-  </div>
+  <I18nWrapper>
+    <div style={{ marginTop: '20vw' }}>
+      <Blob {...args} />
+    </div>
+  </I18nWrapper>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

diff --git a/src/components/BlockedMemoriBadge/BlockedMemoriBadge.stories.tsx b/src/components/BlockedMemoriBadge/BlockedMemoriBadge.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import BlockedMemoriBadge, { Props } from './BlockedMemoriBadge';
 
 import './BlockedMemoriBadge.css';
@@ -15,7 +16,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <BlockedMemoriBadge {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <BlockedMemoriBadge {...args} />
+  </I18nWrapper>
+);
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing

diff --git a/src/components/ChangeMode/ChangeMode.stories.tsx b/src/components/ChangeMode/ChangeMode.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import ChangeMode, { Props } from './ChangeMode';
 
 import './ChangeMode.css';
@@ -25,12 +26,14 @@ const Template: Story<Props> = args => {
   const [instruct, setInstruct] = React.useState(args.instruct);
 
   return (
-    <ChangeMode
-      {...args}
-      canInstruct
-      instruct={instruct}
-      onChangeMode={mode => setInstruct(mode === 'instruct')}
-    />
+    <I18nWrapper>
+      <ChangeMode
+        {...args}
+        canInstruct
+        instruct={instruct}
+        onChangeMode={mode => setInstruct(mode === 'instruct')}
+      />
+    </I18nWrapper>
   );
 };
 

diff --git a/src/components/Chat/Chat.stories.tsx b/src/components/Chat/Chat.stories.tsx
@@ -9,6 +9,7 @@ import {
   sessionID,
   dialogState as dialogStateWithHints,
 } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
 import Chat, { Props } from './Chat';
 
 import './Chat.css';
@@ -33,11 +34,13 @@ const Template: Story<Props> = args => {
   const [userMessage, setUserMessage] = useState(args.userMessage);
 
   return (
-    <Chat
-      {...args}
-      userMessage={userMessage}
-      onChangeUserMessage={setUserMessage}
-    />
+    <I18nWrapper>
+      <Chat
+        {...args}
+        userMessage={userMessage}
+        onChangeUserMessage={setUserMessage}
+      />
+    </I18nWrapper>
   );
 };