feat: Setup i18n migration

apps/web/package.json

@@ -90,6 +90,8 @@
     "eslint-config-next": "^13.2.1",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
+    "i18next": "^24.1.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "ical.js": "^1.4.0",
     "ics": "^2.37.0",
     "jose": "^4.13.1",
@@ -124,6 +126,7 @@
     "react-easy-crop": "^3.5.2",
     "react-hook-form": "^7.43.3",
     "react-hot-toast": "^2.3.0",
+    "react-i18next": "^15.2.0",
     "react-intl": "^5.25.1",
     "react-live-chat-loader": "^2.8.1",
     "react-multi-email": "^0.5.3",

apps/web/pages/_app.tsx

@@ -1,3 +1,5 @@
+import { I18nextProvider } from "react-i18next";
+import { i18n } from "./i18n";
 import type { IncomingMessage } from "http";
 import type { AppContextType } from "next/dist/shared/lib/utils";
 import React, { useEffect } from "react";

apps/web/pages/i18n.ts

@@ -0,0 +1,47 @@
+import type { Resource } from "i18next";
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+void i18n
+  .use({
+    type: "backend",
+    read(
+      language: string,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null | Resource) => void,
+    ) {
+      import(`./${namespace}/locales/${language}.json`)
+        .then((resources) => {
+          callback(null, resources as unknown as Resource);
+        })
+        .catch((error) => {
+          callback(error, null);
+        });
+    },
+  })
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    // react i18next special options (optional)
+    // override if needed - omit if ok with defaults
+    /*
+    react: {
+      bindI18n: 'languageChanged',
+      bindI18nStore: '',
+      transEmptyNodeValue: '',
+      transSupportBasicHtmlNodes: true,
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
+      useSuspense: true,
+    }
+    */
+  });
+
+export { i18n };

example-apps/credential-sync/package.json

@@ -11,10 +11,13 @@
   "dependencies": {
     "@calcom/atoms": "*",
     "@prisma/client": "5.4.2",
+    "i18next": "^24.1.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "next": "14.0.4",
     "prisma": "^5.7.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-i18next": "^15.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.3.1",

example-apps/credential-sync/pages/i18n.ts

@@ -0,0 +1,47 @@
+import type { Resource } from "i18next";
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+void i18n
+  .use({
+    type: "backend",
+    read(
+      language: string,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null | Resource) => void,
+    ) {
+      import(`./${namespace}/locales/${language}.json`)
+        .then((resources) => {
+          callback(null, resources as unknown as Resource);
+        })
+        .catch((error) => {
+          callback(error, null);
+        });
+    },
+  })
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    // react i18next special options (optional)
+    // override if needed - omit if ok with defaults
+    /*
+    react: {
+      bindI18n: 'languageChanged',
+      bindI18nStore: '',
+      transEmptyNodeValue: '',
+      transSupportBasicHtmlNodes: true,
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
+      useSuspense: true,
+    }
+    */
+  });
+
+export { i18n };

example-apps/credential-sync/pages/index.tsx

@@ -1,3 +1,5 @@
+import { I18nextProvider } from "react-i18next";
+import { i18n } from "./i18n";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
@@ -43,7 +45,8 @@ export default function Index() {
   }
 
   return (
-    <div>
+    <I18nextProvider i18n={i18n}>
+<div>
       <h1>Welcome to Credential Sync Playground</h1>
       <p>
         You are managing credentials for cal.com <strong>userId={userId}</strong> for{" "}
@@ -53,5 +56,6 @@ export default function Index() {
       <button onClick={() => updateToken()}>Give a valid token to Cal.com</button>
       <div>{data}</div>
     </div>
+</I18nextProvider>
   );
 }

packages/app-store-cli/package.json

@@ -19,11 +19,14 @@
   ],
   "dependencies": {
     "@calcom/lib": "*",
+    "i18next": "^24.1.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "ink": "^3.2.0",
     "ink-select-input": "^4.2.1",
     "ink-text-input": "^4.0.3",
     "meow": "^9.0.0",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-i18next": "^15.2.0"
   },
   "devDependencies": {
     "@types/react": "18.0.26",

packages/app-store-cli/src/App.tsx

@@ -1,3 +1,5 @@
+import { I18nextProvider } from "react-i18next";
+import { i18n } from "./i18n";
 import React, { FC } from "react";
 import { SupportedCommands } from "src/types";
 

packages/app-store-cli/src/i18n.ts

@@ -0,0 +1,47 @@
+import type { Resource } from "i18next";
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+void i18n
+  .use({
+    type: "backend",
+    read(
+      language: string,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null | Resource) => void,
+    ) {
+      import(`./${namespace}/locales/${language}.json`)
+        .then((resources) => {
+          callback(null, resources as unknown as Resource);
+        })
+        .catch((error) => {
+          callback(error, null);
+        });
+    },
+  })
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    // react i18next special options (optional)
+    // override if needed - omit if ok with defaults
+    /*
+    react: {
+      bindI18n: 'languageChanged',
+      bindI18nStore: '',
+      transEmptyNodeValue: '',
+      transSupportBasicHtmlNodes: true,
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
+      useSuspense: true,
+    }
+    */
+  });
+
+export { i18n };

packages/emails/package.json

@@ -9,9 +9,12 @@
   "dependencies": {
     "@calcom/dayjs": "*",
     "@calcom/lib": "*",
+    "i18next": "^24.1.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "next-i18next": "^13.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^15.2.0",
     "rrule": "^2.7.1"
   },
   "devDependencies": {

packages/emails/src/components/UserFieldsResponses.tsx

@@ -1,3 +1,5 @@
+import { I18nextProvider } from "react-i18next";
+import { i18n } from "./i18n";
 import type { TFunction } from "next-i18next";
 
 import getLabelValueMapFromResponses from "@calcom/lib/getLabelValueMapFromResponses";
@@ -11,7 +13,8 @@ export function UserFieldsResponses(props: { calEvent: CalendarEvent; t: TFuncti
 
   if (!labelValueMap) return null;
   return (
-    <>
+    <I18nextProvider i18n={i18n}>
+<>
       {Object.keys(labelValueMap).map((key) =>
         labelValueMap[key] !== "" ? (
           <Info
@@ -30,5 +33,6 @@ export function UserFieldsResponses(props: { calEvent: CalendarEvent; t: TFuncti
         ) : null
       )}
     </>
+</I18nextProvider>
   );
 }

packages/emails/src/components/i18n.ts

@@ -0,0 +1,47 @@
+import type { Resource } from "i18next";
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+void i18n
+  .use({
+    type: "backend",
+    read(
+      language: string,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null | Resource) => void,
+    ) {
+      import(`./${namespace}/locales/${language}.json`)
+        .then((resources) => {
+          callback(null, resources as unknown as Resource);
+        })
+        .catch((error) => {
+          callback(error, null);
+        });
+    },
+  })
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    // react i18next special options (optional)
+    // override if needed - omit if ok with defaults
+    /*
+    react: {
+      bindI18n: 'languageChanged',
+      bindI18nStore: '',
+      transEmptyNodeValue: '',
+      transSupportBasicHtmlNodes: true,
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
+      useSuspense: true,
+    }
+    */
+  });
+
+export { i18n };

packages/platform/examples/base/package.json

@@ -11,10 +11,13 @@
   "dependencies": {
     "@calcom/atoms": "*",
     "@prisma/client": "5.4.2",
+    "i18next": "^24.1.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "next": "14.0.4",
     "prisma": "^5.7.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-i18next": "^15.2.0",
     "react-select": "^5.8.0"
   },
   "devDependencies": {

packages/platform/examples/base/src/pages/_app.tsx

@@ -1,3 +1,5 @@
+import { I18nextProvider } from "react-i18next";
+import { i18n } from "./i18n";
 import type { Data } from "@/pages/api/get-managed-users";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
@@ -75,7 +77,8 @@ export default function App({ Component, pageProps }: AppProps) {
   }, [selectedUser]);
 
   return (
-    <div className={`${poppins.className} text-black`}>
+    <I18nextProvider i18n={i18n}>
+<div className={`${poppins.className} text-black`}>
       {options.length > 0 && (
         <Select defaultValue={selectedUser} onChange={setSelectedUser} options={options} />
       )}
@@ -122,5 +125,6 @@ export default function App({ Component, pageProps }: AppProps) {
         </div>
       )}
     </div>
+</I18nextProvider>
   );
 }

packages/platform/examples/base/src/pages/i18n.ts

@@ -0,0 +1,47 @@
+import type { Resource } from "i18next";
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+void i18n
+  .use({
+    type: "backend",
+    read(
+      language: string,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null | Resource) => void,
+    ) {
+      import(`./${namespace}/locales/${language}.json`)
+        .then((resources) => {
+          callback(null, resources as unknown as Resource);
+        })
+        .catch((error) => {
+          callback(error, null);
+        });
+    },
+  })
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    // react i18next special options (optional)
+    // override if needed - omit if ok with defaults
+    /*
+    react: {
+      bindI18n: 'languageChanged',
+      bindI18nStore: '',
+      transEmptyNodeValue: '',
+      transSupportBasicHtmlNodes: true,
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
+      useSuspense: true,
+    }
+    */
+  });
+
+export { i18n };