refactor(react-sdk): pass translations from SDK and not from i18n pac…

…kage (#852)

This PR is over #847

packages/i18n/index.ts

@@ -1,4 +1,3 @@
 export * from './src/StreamI18n';
-export * from './src/translations';
 export * from './src/types';
 export * from './src/utils';

packages/i18n/src/StreamI18n.ts

@@ -1,5 +1,4 @@
 import i18next from 'i18next';
-import defaultTranslations from './translations';
 import { mapToRegistry } from './utils';
 import {
   TranslationLanguage,
@@ -15,10 +14,7 @@ const DEFAULT_CONFIG = {
   currentLanguage: DEFAULT_LANGUAGE,
 };
 
-const DEFAULT_TRANSLATIONS_REGISTRY = mapToRegistry(
-  defaultTranslations,
-  DEFAULT_NAMESPACE,
-);
+const DEFAULT_TRANSLATIONS_REGISTRY = mapToRegistry({}, DEFAULT_NAMESPACE);
 
 export const defaultTranslationFunction = (key: string) => key;
 

packages/i18n/src/types.ts

@@ -1,12 +1,8 @@
-import defaultTranslations from './translations';
-
-export type TranslationLanguage = 'en' | 'es' | string;
+export type TranslationLanguage = 'en' | string;
 
 export type Namespace = string;
 
-export type TranslationSheet =
-  | typeof defaultTranslations.en
-  | Record<string, string>;
+export type TranslationSheet = Record<string, string>;
 
 export type TranslationsForLanguage = Record<Namespace, TranslationSheet>;
 

packages/react-bindings/src/contexts/StreamI18nContext.tsx

@@ -20,6 +20,12 @@ const StreamI18nContext = createContext<StreamI18nContextValue>({
   t: defaultTranslationFunction,
 });
 
+type CreateI18nParams = {
+  i18nInstance?: StreamI18n;
+  language?: string;
+  translationsOverrides?: TranslationsMap;
+};
+
 export type StreamI18nProviderProps = CreateI18nParams;
 
 export const StreamI18nProvider = ({
@@ -35,12 +41,6 @@ export const StreamI18nProvider = ({
   );
 };
 
-type CreateI18nParams = {
-  i18nInstance?: StreamI18n;
-  language?: string;
-  translationsOverrides?: TranslationsMap;
-};
-
 export const useCreateI18n = ({
   i18nInstance,
   language,

packages/react-bindings/src/contexts/StreamVideoContext.tsx

@@ -23,7 +23,7 @@ export type StreamVideoProps = StreamI18nProviderProps & {
  *  @param PropsWithChildren<StreamVideoProps>
  *  @category Client State
  */
-export const StreamVideo = ({
+export const StreamVideoProvider = ({
   children,
   client,
   i18nInstance,

packages/react-native-sdk/src/providers/StreamVideo.tsx

@@ -1,6 +1,8 @@
 import {
-  StreamVideo as StreamVideoProvider,
+  StreamVideoProvider,
+  StreamI18nProvider,
   StreamVideoProps,
+  StreamI18nProviderProps,
 } from '@stream-io/video-react-bindings';
 import React, { PropsWithChildren, useEffect } from 'react';
 import { StreamVideoStoreProvider } from '../contexts/StreamVideoContext';
@@ -15,7 +17,9 @@ import { usePushRegisterEffect } from '../hooks';
  *
  * @category Client State
  */
-export const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {
+export const StreamVideo = (
+  props: PropsWithChildren<StreamVideoProps & StreamI18nProviderProps>,
+) => {
   const { client, children, translationsOverrides, i18nInstance, language } =
     props;
 
@@ -41,17 +45,18 @@ export const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {
   }, [client]);
 
   return (
-    <StreamVideoProvider
-      client={client}
-      translationsOverrides={translationsOverrides}
-      i18nInstance={i18nInstance}
-      language={language}
-    >
-      <StreamVideoStoreProvider>
-        <MediaDevices />
-        <PushRegister />
-        {children}
-      </StreamVideoStoreProvider>
+    <StreamVideoProvider client={client}>
+      <StreamI18nProvider
+        language={language}
+        translationsOverrides={translationsOverrides}
+        i18nInstance={i18nInstance}
+      >
+        <StreamVideoStoreProvider>
+          <MediaDevices />
+          <PushRegister />
+          {children}
+        </StreamVideoStoreProvider>
+      </StreamI18nProvider>
     </StreamVideoProvider>
   );
 };

packages/react-sdk/index.ts

@@ -9,6 +9,7 @@ export * from './src/core';
 
 export * from './src/components';
 export * from './src/types';
+export * from './src/translations';
 export {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,

packages/react-sdk/src/core/components/StreamVideo/StreamVideo.tsx

@@ -0,0 +1,12 @@
+import {
+  StreamVideoProvider,
+  StreamVideoProps,
+} from '@stream-io/video-react-bindings';
+import { PropsWithChildren } from 'react';
+import { translations } from '../../../translations';
+
+export const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {
+  return (
+    <StreamVideoProvider translationsOverrides={translations} {...props} />
+  );
+};

packages/react-sdk/src/core/components/StreamVideo/index.ts

@@ -0,0 +1 @@
+export * from './StreamVideo';

packages/react-sdk/src/core/components/index.ts

@@ -1,6 +1,7 @@
 export * from './Audio';
 export * from './ParticipantView';
 export * from './StreamCall';
+export * from './StreamVideo';
 
 export { Video } from './Video';
 export type { BaseVideoProps, VideoProps } from './Video';

packages/i18n/src/translations/en.json → packages/react-sdk/src/translations/en.json

@@ -22,7 +22,7 @@
   "Waiting for recording to start...": "Waiting for recording to start...",
   "Record call": "Record call",
   "Reactions": "Reactions",
-  "You can now share your screen.": "You can now share your screen.",
+  "You can now share your screen.": "You can now share your screen.", 
   "Awaiting for an approval to share screen.": "Awaiting for an approval to share screen.",
   "You can no longer share your screen.": "You can no longer share your screen.",
   "Share screen": "Share screen",

packages/react-sdk/src/translations/index.ts

@@ -0,0 +1,3 @@
+import en from './en.json';
+
+export const translations = { en };

sample-apps/react/react-dogfood/pages/join/[callId].tsx

@@ -17,7 +17,7 @@ import {
 } from '../../lib/getServerSideCredentialsProps';
 import { useGleap } from '../../hooks/useGleap';
 import { useSettings } from '../../context/SettingsContext';
-import translations from '../../translations';
+import appTranslations from '../../translations';
 import {
   DeviceSettingsCaptor,
   getDeviceSettings,
@@ -108,7 +108,7 @@ const CallRoom = (props: ServerSideCredentialsProps) => {
       <StreamVideo
         client={client}
         language={language}
-        translationsOverrides={translations}
+        translationsOverrides={appTranslations}
       >
         <StreamCall
           call={call}

sample-apps/react/react-dogfood/translations/index.ts

@@ -2,5 +2,7 @@ import de from './de.json';
 import en from './en.json';
 import es from './es.json';
 
-const translations = { de, en, es };
-export default translations;
+import { translations as sdkTranslations } from '@stream-io/video-react-sdk';
+
+const appTranslations = { de, en: { ...sdkTranslations.en, ...en }, es };
+export default appTranslations;