feat: simplify i18n setup and add more type safety (#396)

.vscode/settings.json

@@ -1,10 +1,9 @@
 {
   "i18n-ally.localesPaths": ["src/core/i18n/resources"],
   "i18n-ally.enabledFrameworks": ["react-i18next"],
-  "i18n-ally.namespace": true,
-  "i18n-ally.sortKeys": true,
-  "i18n-ally.defaultNamespace": "common",
-  "i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
+  "i18n-ally.defaultNamespace": "messages",
+  "i18n-ally.enabledParsers": ["ts", "json"],
+  "i18n-ally.pathMatcher": "{locale}/messages.ts",
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sourceLanguage": "en",
   "search.exclude": {

src/app/blogPost/[id].tsx

@@ -6,13 +6,13 @@ import { Screen } from '$shared/uiKit/Screen';
 
 const BlogPostScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
-  const { t } = useTranslation('miscScreens');
+  const { t } = useTranslation();
 
   return (
     <Screen>
       <Stack.Screen
         options={{
-          title: t('blogPost.screenTitle'),
+          title: t('miscScreens.blogPost.screenTitle'),
         }}
       />
 

src/app/dummyForm.tsx

@@ -6,13 +6,13 @@ import { DummyForm as DummyFormComponent } from '$features/dummyForm';
 import { Screen } from '$shared/uiKit/Screen';
 
 const DummyFormScreen = () => {
-  const { t } = useTranslation('miscScreens');
+  const { t } = useTranslation();
 
   return (
     <Screen isScrollable={false}>
       <Stack.Screen
         options={{
-          title: t('dummyForm.screenTitle'),
+          title: t('miscScreens.dummyForm.screenTitle'),
         }}
       />
 

src/app/index.tsx

@@ -8,7 +8,7 @@ import { Screen } from '$shared/uiKit/Screen';
 
 const HomeScreen = () => {
   const router = useRouter();
-  const { t } = useTranslation('homeScreen');
+  const { t } = useTranslation();
 
   const goToOtherScreen = () => {
     router.push('/other');
@@ -19,20 +19,20 @@ const HomeScreen = () => {
       <Stack.Screen
         options={{
           headerShown: false,
-          title: t('navigation.screenTitle'),
+          title: t('homeScreen.navigation.screenTitle'),
         }}
       />
 
       <Header />
 
       <Box pb="spacing_32" px="spacing_16">
         <Text mt="spacing_32" variant="large">
-          {t('navigation.title')}
+          {t('homeScreen.navigation.title')}
         </Text>
 
         <Box mt="spacing_8">
           <Button.Text testID="home-navigateCta" onPress={goToOtherScreen}>
-            {t('navigation.content')}
+            {t('homeScreen.navigation.content')}
           </Button.Text>
         </Box>
 

src/app/other.tsx

@@ -8,7 +8,7 @@ import { Screen } from '$shared/uiKit/Screen';
 
 const OtherScreen = () => {
   const router = useRouter();
-  const { t } = useTranslation('otherScreen');
+  const { t } = useTranslation();
 
   const goToBlogPost = () => {
     router.push('/blogPost/1');
@@ -20,32 +20,32 @@ const OtherScreen = () => {
 
   return (
     <Screen testID="otherScreen-screen">
-      <Stack.Screen options={{ title: t('navigation.title') }} />
+      <Stack.Screen options={{ title: t('otherScreen.navigation.title') }} />
 
       <Box borderBottomColor="bg_focus" borderBottomWidth={1} pb="spacing_16">
         <Text testID="otherScreen-blogPost-title" variant="large">
-          {t('graphql.title')}
+          {t('otherScreen.graphql.title')}
         </Text>
 
         <Box alignItems="flex-start" mt="spacing_8">
           <Button.Text
             testID="otherScreen-blogPost-navigateCta"
             onPress={goToBlogPost}
           >
-            {t('graphql.cta')}
+            {t('otherScreen.graphql.cta')}
           </Button.Text>
         </Box>
       </Box>
 
       <Box borderBottomColor="bg_focus" borderBottomWidth={1} py="spacing_16">
-        <Text variant="large">{t('form.title')}</Text>
+        <Text variant="large">{t('otherScreen.form.title')}</Text>
 
         <Box alignItems="flex-start" mt="spacing_8">
           <Button.Text
             testID="otherScreen-dummyForm-navigateCta"
             onPress={goToDummyForm}
           >
-            {t('form.cta')}
+            {t('otherScreen.form.cta')}
           </Button.Text>
         </Box>
       </Box>

src/core/i18n/i18n.ts

@@ -10,7 +10,7 @@ export const i18n = i18next.use(initReactI18next).use(languageDetector).init({
   fallbackLng: config.defaultLocale,
   supportedLngs: config.supportedLocales,
   nonExplicitSupportedLngs: true,
-  defaultNS: 'common',
+  defaultNS: 'messages',
   resources,
   load: 'languageOnly',
   compatibilityJSON: 'v3',

src/core/i18n/resources/en/index.ts

@@ -0,0 +1 @@
+export { messages } from './messages';

src/core/i18n/resources/en/messages.ts

@@ -0,0 +1,133 @@
+export const messages = {
+  common: {
+    back: 'Back',
+    cancel: 'Cancel',
+    next: 'Next',
+  },
+  appConfig: {
+    networkStateCheck: {
+      message:
+        'Please check your internet connection. The app might not work properly without it.',
+      title: 'No internet connection',
+    },
+  },
+  homeScreen: {
+    formatting: {
+      content: 'The code is checked with ESLint, Prettier and TypeScript',
+      title: 'Formatting & type checking',
+    },
+    navigation: {
+      content: 'Press to navigate',
+      screenTitle: 'Home',
+      title: 'Navigate to another page',
+    },
+    sandbox: {
+      content: 'Access the Sandbox form the Dev Menu with {{command}}',
+      title: 'Sandbox',
+    },
+    tests: {
+      content: 'You can run tests with Jest or Maestro',
+      title: 'Tests',
+    },
+    updateCheck: {
+      isEmbeddedLaunch: 'The app is running from an OTA update',
+    },
+  },
+  miscScreens: {
+    appUpdate: {
+      description:
+        'Please go update the application to access the latest features',
+      title: 'Your app is outdated',
+    },
+    blogPost: {
+      screenTitle: 'Blog post',
+      title: 'Blog post fetched with GraphQL',
+    },
+    codepush: {
+      cta: 'Install now',
+      description:
+        'An app update is mandatory to be able to use the application.',
+      title: 'Update is required',
+    },
+    dummyForm: {
+      form: {
+        email: {
+          label: 'Email',
+          placeholder: 'Enter your email',
+          validation: {
+            email: 'Please enter a valid email',
+          },
+        },
+        firstName: {
+          label: 'First name',
+          placeholder: 'John',
+          validation: {
+            maxLength: 'First name must be at most 20 characters long',
+            minLength: 'First name must be at least 2 characters long',
+          },
+        },
+        lastName: {
+          label: 'Last name',
+          placeholder: 'Doe',
+          validation: {
+            maxLength: 'Last name must be at most 30 characters long',
+            minLength: 'Last name must be at least 2 characters long',
+          },
+        },
+      },
+      screenTitle: 'Dummy form',
+    },
+    errorBoundary: {
+      cta: 'Relaunch the app',
+      description:
+        'An unknown error occured. If the error persist, contact an administrator.',
+      title: 'Error',
+    },
+    maintenanceMode: {
+      description: 'It will be available online as soon as possible',
+      title: 'The app is in maintenance',
+    },
+    notifications: {
+      cta: 'Request',
+      title: 'Request Notification permission',
+    },
+  },
+  otherScreen: {
+    form: {
+      cta: 'Navigate',
+      title: 'Form example',
+    },
+    graphql: {
+      cta: 'Navigate',
+      title: 'API call example',
+    },
+    navigation: {
+      title: 'Other screen',
+    },
+  },
+  settings: {
+    changeLocale: {
+      failure: 'The language could not be changed',
+      success: 'The language has been changed',
+    },
+    permissions: {
+      notAvailable: 'This permission is not available on this device',
+      notGranted: 'You rejected this permission request',
+    },
+    updateAvailable: {
+      banner: {
+        compareVersions:
+          'Version {{storeVersion}} of the app is now available. You are currently on version {{currentVersion}}.',
+        defaultTitle: 'A new version of the app is available.',
+        updateCta: 'Update now',
+      },
+      nativePrompt: {
+        message: 'A new version is available. Do you want to update now?',
+        title: 'Update available',
+        updateCta: 'Update',
+      },
+    },
+  },
+};
+
+export type MessagesTypes = typeof messages;