Feature/migrate nexti18next to nextintl

.storybook/i18n.js

@@ -1,18 +1,98 @@
-import i18n from 'i18next';
-import Backend from 'i18next-http-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { initReactI18next } from 'react-i18next';
+import bulkCodes from '../public/static/locales/en/bulkCodes.json';
+import common from '../public/static/locales/en/common.json';
+import country from '../public/static/locales/en/country.json';
+import donate from '../public/static/locales/en/donate.json';
+import donationLink from '../public/static/locales/en/donationLink.json';
+import editProfile from '../public/static/locales/en/editProfile.json';
+import giftfunds from '../public/static/locales/en/giftfunds.json';
+import leaderboard from '../public/static/locales/en/leaderboard.json';
+import managePayouts from '../public/static/locales/en/managePayouts.json';
+import manageProjects from '../public/static/locales/en/manageProjects.json';
+import maps from '../public/static/locales/en/maps.json';
+import me from '../public/static/locales/en/me.json';
+import planet from '../public/static/locales/en/planet.json';
+import planetcash from '../public/static/locales/en/planetcash.json';
+import profile from '../public/static/locales/en/profile.json';
+import redeem from '../public/static/locales/en/redeem.json';
+import registerTrees from '../public/static/locales/en/registerTrees.json';
+import tenants from '../public/static/locales/en/tenants.json';
+import treemapper from '../public/static/locales/en/treemapper.json';
+import treemapperAnalytics from '../public/static/locales/en/treemapperAnalytics.json';
 
-i18n
-  .use(Backend)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    fallbackLng: 'en',
-    debug: true,
-    backend: {
-      loadPath: '/static/locales/{{lng}}/{{ns}}.json',
-    },
-  });
+import bulkCodesDE from '../public/static/locales/de/bulkCodes.json';
+import commonDE from '../public/static/locales/de/common.json';
+import countryDE from '../public/static/locales/de/country.json';
+import donateDE from '../public/static/locales/de/donate.json';
+import donationLinkDE from '../public/static/locales/de/donationLink.json';
+import editProfileDE from '../public/static/locales/de/editProfile.json';
+import giftfundsDE from '../public/static/locales/de/giftfunds.json';
+import leaderboardDE from '../public/static/locales/de/leaderboard.json';
+import managePayoutsDE from '../public/static/locales/de/managePayouts.json';
+import manageProjectsDE from '../public/static/locales/de/manageProjects.json';
+import mapsDE from '../public/static/locales/de/maps.json';
+import meDE from '../public/static/locales/de/me.json';
+import planetDE from '../public/static/locales/de/planet.json';
+import planetcashDE from '../public/static/locales/de/planetcash.json';
+import profileDE from '../public/static/locales/de/profile.json';
+import redeemDE from '../public/static/locales/de/redeem.json';
+import registerTreesDE from '../public/static/locales/de/registerTrees.json';
+import tenantsDE from '../public/static/locales/de/tenants.json';
+import treemapperDE from '../public/static/locales/de/treemapper.json';
+import treemapperAnalyticsDE from '../public/static/locales/de/treemapperAnalytics.json';
 
-export default i18n;
+import deepmerge from 'deepmerge';
+
+const messages_en = {
+  ...bulkCodes,
+  ...common,
+  ...country,
+  ...donate,
+  ...donationLink,
+  ...editProfile,
+  ...giftfunds,
+  ...leaderboard,
+  ...managePayouts,
+  ...manageProjects,
+  ...maps,
+  ...me,
+  ...planet,
+  ...planetcash,
+  ...profile,
+  ...redeem,
+  ...registerTrees,
+  ...tenants,
+  ...treemapper,
+  ...treemapperAnalytics,
+};
+
+const messages_de = {
+  ...bulkCodesDE,
+  ...commonDE,
+  ...countryDE,
+  ...donateDE,
+  ...donationLinkDE,
+  ...editProfileDE,
+  ...giftfundsDE,
+  ...leaderboardDE,
+  ...managePayoutsDE,
+  ...manageProjectsDE,
+  ...mapsDE,
+  ...meDE,
+  ...planetDE,
+  ...planetcashDE,
+  ...profileDE,
+  ...redeemDE,
+  ...registerTreesDE,
+  ...tenantsDE,
+  ...treemapperDE,
+  ...treemapperAnalyticsDE,
+};
+
+const getMessages = (locale) => {
+  if (locale === 'de') {
+    return deepmerge(messages_en, messages_de);
+  }
+  return messages_en;
+};
+
+export default getMessages;

.storybook/preview.js

@@ -3,11 +3,8 @@ import './storybook.scss';
 import { ThemeProvider as MUIThemeProvider } from '@mui/material';
 import materialTheme from '../src/theme/themeStyles';
 import { ThemeProvider } from '@storybook/theming';
-import { I18nextProvider } from 'react-i18next';
-import i18n from './i18n';
-import { useEffect } from 'react';
-
-// import { ThemeProvider } from 'emotion-theming';
+import getMessages from './i18n';
+import { NextIntlClientProvider } from 'next-intl';
 
 /*
  * Global decorator to apply the styles to all stories
@@ -16,20 +13,16 @@ import { useEffect } from 'react';
  */
 export const decorators = [
   (Story, context) => {
-    const { locale } = context.globals;
-
-    useEffect(() => {
-      i18n.changeLanguage(locale);
-    }, [locale]);
+    const locale = context.globals.locale;
 
     return (
-      <I18nextProvider i18n={i18n}>
+      <NextIntlClientProvider messages={getMessages(locale)} locale={locale}>
         <MUIThemeProvider theme={materialTheme}>
           <ThemeProvider theme={materialTheme}>
             <Story />
           </ThemeProvider>
         </MUIThemeProvider>
-      </I18nextProvider>
+      </NextIntlClientProvider>
     );
   },
 ];

global.d.ts

@@ -0,0 +1,55 @@
+// Use type safe message keys with `next-intl`
+type MessagesBulkCodes =
+  typeof import('./public/static/locales/en/bulkCodes.json');
+type MessagesCommon = typeof import('./public/static/locales/en/common.json');
+type MessagesCountry = typeof import('./public/static/locales/en/country.json');
+type MessagesDonate = typeof import('./public/static/locales/en/donate.json');
+type MessagesDonationLink =
+  typeof import('./public/static/locales/en/donationLink.json');
+type MessagesEditProfile =
+  typeof import('./public/static/locales/en/editProfile.json');
+type MessagesGiftfunds =
+  typeof import('./public/static/locales/en/giftfunds.json');
+type MessagesLeaderboard =
+  typeof import('./public/static/locales/en/leaderboard.json');
+type MessagesManagePayouts =
+  typeof import('./public/static/locales/en/managePayouts.json');
+type MessagesManageProjects =
+  typeof import('./public/static/locales/en/manageProjects.json');
+type MessagesMaps = typeof import('./public/static/locales/en/maps.json');
+type MessagesMe = typeof import('./public/static/locales/en/me.json');
+type MessagesPlanet = typeof import('./public/static/locales/en/planet.json');
+type MessagesPlanetcash =
+  typeof import('./public/static/locales/en/planetcash.json');
+type MessagesProfile = typeof import('./public/static/locales/en/profile.json');
+type MessagesRedeem = typeof import('./public/static/locales/en/redeem.json');
+type MessagesRegisterTrees =
+  typeof import('./public/static/locales/en/registerTrees.json');
+type MessagesTenants = typeof import('./public/static/locales/en/tenants.json');
+type MessagesTreemapper =
+  typeof import('./public/static/locales/en/treemapper.json');
+type MessagesTreemapperAnalytics =
+  typeof import('./public/static/locales/en/treemapperAnalytics.json');
+
+type Messages = MessagesBulkCodes &
+  MessagesCommon &
+  MessagesCountry &
+  MessagesDonate &
+  MessagesDonationLink &
+  MessagesEditProfile &
+  MessagesGiftfunds &
+  MessagesLeaderboard &
+  MessagesManagePayouts &
+  MessagesManageProjects &
+  MessagesMaps &
+  MessagesMe &
+  MessagesPlanet &
+  MessagesPlanetcash &
+  MessagesProfile &
+  MessagesRedeem &
+  MessagesRegisterTrees &
+  MessagesTenants &
+  MessagesTreemapper &
+  MessagesTreemapperAnalytics;
+
+declare interface IntlMessages extends Messages {}

i18n-config.ts

@@ -0,0 +1,7 @@
+// i18n config for next-intl
+export const i18nConfig = {
+  defaultLocale: 'en',
+  locales: ['en', 'de', 'cs', 'es', 'fr', 'it', 'pt-BR'],
+};
+
+export type Locale = (typeof i18nConfig)['locales'][number];

i18n.ts

@@ -0,0 +1,71 @@
+import { getRequestConfig } from 'next-intl/server';
+import deepmerge from 'deepmerge';
+
+// IMP - Import any new translation file here in `userMessages` add `defaultMessages`, to enable translation auto complete.
+export default getRequestConfig(async ({ locale }) => {
+  const userMessages = {
+    ...(await import(`./public/static/locales/${locale}/bulkCodes.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/common.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/country.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/donate.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/donationLink.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/editProfile.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/giftfunds.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/leaderboard.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/managePayouts.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/manageProjects.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/maps.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/me.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/planet.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/planetcash.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/profile.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/redeem.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/registerTrees.json`))
+      .default,
+    ...(await import(`./public/static/locales/${locale}/tenants.json`)).default,
+    ...(await import(`./public/static/locales/${locale}/treemapper.json`))
+      .default,
+    ...(
+      await import(`./public/static/locales/${locale}/treemapperAnalytics.json`)
+    ).default,
+  };
+
+  const defaultMessages = {
+    ...(await import(`./public/static/locales/en/bulkCodes.json`)).default,
+    ...(await import(`./public/static/locales/en/common.json`)).default,
+    ...(await import(`./public/static/locales/en/country.json`)).default,
+    ...(await import(`./public/static/locales/en/donate.json`)).default,
+    ...(await import(`./public/static/locales/en/donationLink.json`)).default,
+    ...(await import(`./public/static/locales/en/editProfile.json`)).default,
+    ...(await import(`./public/static/locales/en/giftfunds.json`)).default,
+    ...(await import(`./public/static/locales/en/leaderboard.json`)).default,
+    ...(await import(`./public/static/locales/en/managePayouts.json`)).default,
+    ...(await import(`./public/static/locales/en/manageProjects.json`)).default,
+    ...(await import(`./public/static/locales/en/maps.json`)).default,
+    ...(await import(`./public/static/locales/en/me.json`)).default,
+    ...(await import(`./public/static/locales/en/planet.json`)).default,
+    ...(await import(`./public/static/locales/en/planetcash.json`)).default,
+    ...(await import(`./public/static/locales/en/profile.json`)).default,
+    ...(await import(`./public/static/locales/en/redeem.json`)).default,
+    ...(await import(`./public/static/locales/en/registerTrees.json`)).default,
+    ...(await import(`./public/static/locales/en/tenants.json`)).default,
+    ...(await import(`./public/static/locales/en/treemapper.json`)).default,
+    ...(await import(`./public/static/locales/en/treemapperAnalytics.json`))
+      .default,
+  };
+
+  const messages: IntlMessages = deepmerge(defaultMessages, userMessages);
+
+  // Single file, no fallback
+  // messages: (await import(`./messages/${locale}.json`)).default,
+
+  return { messages };
+});