@memori.ai/memori-react 2.23.0 → 3.0.0

package/src/components/MediaWidget/MediaWidget.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import MediaWidget, { Props } from './MediaWidget';
 import {
   Medium,
@@ -92,7 +93,11 @@ const hints: TranslatedHint[] = [
   },
 ];
 
-const Template: Story<Props> = args => <MediaWidget {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <MediaWidget {...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

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, integration, tenant } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
 import MemoriWidget, { Props } from './MemoriWidget';
 
 import './MemoriWidget.css';
@@ -33,8 +34,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <MemoriWidget {...args} />;
-
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <MemoriWidget {...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
 export const Default = Template.bind({});

package/src/components/MicrophoneButton/MicrophoneButton.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import MicrophoneButton, { Props } from './MicrophoneButton';
 
 import './MicrophoneButton.css';
@@ -27,14 +28,16 @@ const Template: Story<Props> = args => {
   const stopListening = () => setListening(false);
 
   return (
-    <div style={{ paddingTop: '10rem', textAlign: 'right' }}>
-      <MicrophoneButton
-        {...args}
-        listening={listening}
-        startListening={startListening}
-        stopListening={stopListening}
-      />
-    </div>
+    <I18nWrapper>
+      <div style={{ paddingTop: '10rem', textAlign: 'right' }}>
+        <MicrophoneButton
+          {...args}
+          listening={listening}
+          startListening={startListening}
+          stopListening={stopListening}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

package/src/components/SendOnEnterMenu/SendOnEnterMenu.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import SendOnEnterMenu, { Props } from './SendOnEnterMenu';
 
 import './SendOnEnterMenu.css';
@@ -24,20 +25,23 @@ export default meta;
 
 const Template: Story<Props> = args => {
   const [sendOnEnter, setSendOnEnter] = React.useState(args.sendOnEnter);
+
   return (
-    <div
-      style={{
-        minHeight: '200px',
-        display: 'flex',
-        alignItems: 'flex-end',
-      }}
-    >
-      <SendOnEnterMenu
-        {...args}
-        sendOnEnter={sendOnEnter}
-        setSendOnEnter={setSendOnEnter}
-      />
-    </div>
+    <I18nWrapper>
+      <div
+        style={{
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'flex-end',
+        }}
+      >
+        <SendOnEnterMenu
+          {...args}
+          sendOnEnter={sendOnEnter}
+          setSendOnEnter={setSendOnEnter}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

package/src/components/SettingsDrawer/SettingsDrawer.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import SettingsDrawer, { Props } from './SettingsDrawer';
 import './SettingsDrawer.css';
 
@@ -27,14 +28,17 @@ const Template: Story<Props> = args => {
   const [controlsPosition, setControlsPosition] = React.useState<
     'bottom' | 'center'
   >('bottom');
+
   return (
-    <SettingsDrawer
-      {...args}
-      microphoneMode={microphoneMode}
-      setMicrophoneMode={setMicrophoneMode}
-      controlsPosition={controlsPosition}
-      setControlsPosition={setControlsPosition}
-    />
+    <I18nWrapper>
+      <SettingsDrawer
+        {...args}
+        microphoneMode={microphoneMode}
+        setMicrophoneMode={setMicrophoneMode}
+        controlsPosition={controlsPosition}
+        setControlsPosition={setControlsPosition}
+      />
+    </I18nWrapper>
   );
 };
 

package/src/components/ShareButton/ShareButton.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import ShareButton, { Props } from './ShareButton';
 import { tenant } from '../../mocks/data';
 
@@ -27,11 +28,17 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <ShareButton {...args} />;
-const TemplateRight: Story<Props> = args => (
-  <div style={{ textAlign: 'right' }}>
+const Template: Story<Props> = args => (
+  <I18nWrapper>
     <ShareButton {...args} />
-  </div>
+  </I18nWrapper>
+);
+const TemplateRight: Story<Props> = args => (
+  <I18nWrapper>
+    <div style={{ textAlign: 'right' }}>
+      <ShareButton {...args} />
+    </div>
+  </I18nWrapper>
 );
 
 export const Default = Template.bind({});

package/src/components/Snippet/Snippet.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import Snippet from './Snippet';
 import { prismSyntaxLangs } from '../../helpers/constants';
 
@@ -82,15 +83,17 @@ const Template: Story<{
   content: string;
   preview?: boolean;
 }> = args => (
-  <Snippet
-    {...args}
-    medium={{
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-      mimeType: args.mimeType,
-      title: 'Snippet',
-      content: args.content,
-    }}
-  />
+  <I18nWrapper>
+    <Snippet
+      {...args}
+      medium={{
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: args.mimeType,
+        title: 'Snippet',
+        content: args.content,
+      }}
+    />
+  </I18nWrapper>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import { memori, sessionID, integration, tenant } from '../../mocks/data';
 import StartPanel, { Props } from './StartPanel';
 
@@ -80,12 +81,14 @@ const integrationStylesheet = `
   `;
 
 const Template: Story<Props> = args => (
-  <div style={{ maxWidth: '600px', margin: 'auto' }}>
-    {args.integrationConfig && (
-      <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
-    )}
-    <StartPanel {...args} />
-  </div>
+  <I18nWrapper>
+    <div style={{ maxWidth: '600px', margin: 'auto' }}>
+      {args.integrationConfig && (
+        <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
+      )}
+      <StartPanel {...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

package/src/components/Typing/Typing.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import Typing, { Props } from './Typing';
 
 const meta: Meta = {
@@ -30,8 +31,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <Typing {...args} />;
-
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <Typing {...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
 export const Default = Template.bind({});

package/src/components/UploadMenu/UploadMenu.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import UploadMenu, { Props } from './UploadMenu';
 
 import './UploadMenu.css';
@@ -27,19 +28,21 @@ const Template: Story<Props> = args => {
     'link' | 'media' | undefined
   >(args.attachmentsMenuOpen);
   return (
-    <div
-      style={{
-        minHeight: '200px',
-        display: 'flex',
-        alignItems: 'flex-end',
-      }}
-    >
-      <UploadMenu
-        {...args}
-        attachmentsMenuOpen={attachmentsMenuOpen}
-        setAttachmentsMenuOpen={setAttachmentsMenuOpen}
-      />
-    </div>
+    <I18nWrapper>
+      <div
+        style={{
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'flex-end',
+        }}
+      >
+        <UploadMenu
+          {...args}
+          attachmentsMenuOpen={attachmentsMenuOpen}
+          setAttachmentsMenuOpen={setAttachmentsMenuOpen}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

package/src/i18n.ts

@@ -1,5 +1,4 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
+import { createInstance } from 'i18next';
 import it from './locales/it.json';
 import en from './locales/en.json';
 
@@ -12,7 +11,7 @@ const resources = {
   },
 };
 
-i18n.use(initReactI18next).init({
+const i18n = createInstance({
   resources,
   lng: 'en',
   fallbackLng: 'it',
@@ -23,4 +22,6 @@ i18n.use(initReactI18next).init({
   },
 });
 
+i18n.init();
+
 export default i18n;

package/src/index.tsx

@@ -12,7 +12,7 @@ import MemoriWidget, {
 import { getTenant } from './helpers/tenant';
 
 import i18n from './i18n';
-import { useTranslation } from 'react-i18next';
+import { I18nextProvider, useTranslation } from 'react-i18next';
 
 export interface Props {
   memoriName?: string | null;
@@ -202,7 +202,7 @@ const Memori: React.FC<Props> = ({
     }
   }, [uiLang]);
 
-  return memori ? (
+  const renderer = memori ? (
     <MemoriWidget
       layout={layout}
       customLayout={customLayout}
@@ -256,11 +256,19 @@ const Memori: React.FC<Props> = ({
         justifyContent: 'center',
       }}
     >
-      <p style={{ textAlign: 'center', margin: '2rem auto' }}>
-        {t('loading')}...
+      <p
+        style={{
+          textAlign: 'center',
+          margin: '2rem auto',
+          textTransform: 'capitalize',
+        }}
+      >
+        {t('loading') || 'Loading'}...
       </p>
     </div>
   );
+
+  return <I18nextProvider i18n={i18n}>{renderer}</I18nextProvider>;
 };
 
 Memori.propTypes = {

package/src/locales/en.json

@@ -12,6 +12,7 @@
   "delete": "Delete",
   "loading": "Loading",
   "expand": "Expand",
+  "collapse": "Collapse",
   "fullscreenEnter": "Enter fullscreen",
   "fullscreenExit": "Exit fullscreen",
   "center": "Center",

package/src/locales/it.json

@@ -12,6 +12,7 @@
   "delete": "Elimina",
   "loading": "Caricamento",
   "expand": "Espandi",
+  "collapse": "Riduci",
   "fullscreenEnter": "Passa a schermo intero",
   "fullscreenExit": "Esci da schermo intero",
   "center": "Centro",