Add typesafety/intellisense to translation keys

apps/pxweb2/public/locales/ar/translation.json

@@ -1,6 +1,7 @@
 {
   "app_title": "مرحبًا بك في PxWeb",
   "main": {
-    "header": "مرحبا بكم في التطبيق!"
+    "header": "مرحبا بكم في التطبيق!",
+    "welcome_trans_test": "مرحبًا بك في <1>التطبيق</1> لـ PxWeb 2.0!"
   }
 }

apps/pxweb2/public/locales/en/translation.json

@@ -1,7 +1,8 @@
 {
   "app_title": "Welcome to PxWeb",
   "main": {
-    "header": "Welcome to the app!"
+    "header": "Welcome to the app!",
+    "welcome_trans_test": "Welcome to the <1>app</1> for PxWeb 2.0!"
   },
   "date": {
     "simple_date": "{{value, datetime}}",

apps/pxweb2/public/locales/no/translation.json

@@ -1,6 +1,7 @@
 {
   "app_title": "Velkommen til PxWeb",
   "main": {
-    "header": "Velkommen til appen!"
+    "header": "Velkommen til appen!",
+    "welcome_trans_test": "Velkommen til <1>appen</1> for PxWeb 2.0!"
   }
 }

apps/pxweb2/public/locales/sv/translation.json

@@ -1,6 +1,7 @@
 {
   "app_title": "Välkommen till PxWeb",
   "main": {
-    "header": "Välkommen till appen!"
+    "header": "Välkommen till appen!",
+    "welcome_trans_test": "Välkommen till <1>appen</1> för PxWeb 2.0!"
   }
 }

apps/pxweb2/src/@types/i18next.d.ts

@@ -0,0 +1,9 @@
+import Resources from './resources';
+import { defaultNS } from '../i18n/config';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: typeof defaultNS;
+    resources: Resources;
+  }
+}

apps/pxweb2/src/@types/resources.d.ts

@@ -0,0 +1,15 @@
+interface Resources {
+  "translation": {
+    "app_title": "Welcome to PxWeb",
+    "main": {
+      "header": "Welcome to the app!",
+      "welcome_trans_test": "Welcome to the <1>app</1> for PxWeb 2.0!"
+    },
+    "date": {
+      "simple_date": "{{value, datetime}}",
+      "simple_date_with_time": "{{value, datetime(year: 'numeric'; month: 'numeric'; day: 'numeric'; hour: 'numeric'; minute: 'numeric')}}"
+    }
+  }
+}
+
+export default Resources;

apps/pxweb2/src/app/app.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 
 import {
   Button,
@@ -113,6 +113,11 @@ export function App() {
           value: new Date('2024-01-25 12:34:56'),
         })}
       </p>
+      <p>
+        <Trans i18nKey="main.welcome_trans_test">
+          "Welcome to the <b>app</b> for PxWeb 2.0!"
+        </Trans>
+      </p>
     </>
   );
 }

apps/pxweb2/src/i18n/config.ts

@@ -2,6 +2,8 @@ import i18n from 'i18next';
 import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 
+export const defaultNS = 'translation';
+
 i18n
   .use(HttpApi)
   .use(initReactI18next)
@@ -15,6 +17,7 @@ i18n
     },
     lng: 'en',
     fallbackLng: 'en',
+    defaultNS,
     // Explicitly tell i18next our
     // supported locales.
     supportedLngs: ['en', 'no', 'sv', 'ar'],

apps/pxweb2/tsconfig.json

@@ -5,7 +5,8 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "types": ["vite/client", "vitest"]
+    "types": ["vite/client", "vitest"],
+    "resolveJsonModule": true,
   },
   "files": [],
   "include": [],

package.json

@@ -9,7 +9,8 @@
     "build": "nx run pxweb2:build && nx run pxweb2-ui:build-storybook",
     "start-storybook": "npx nx run pxweb2-ui:storybook",
     "build-storybook": "npx nx run pxweb2-ui:build-storybook",
-    "build-style-dictionary": "node libs/pxweb2-ui/style-dictionary/build.js"
+    "build-style-dictionary": "node libs/pxweb2-ui/style-dictionary/build.js",
+    "build-i18n-interface": "npx i18next-resources-for-ts interface -i ./apps/pxweb2/public/locales/en -o ./apps/pxweb2/src/@types/resources.d.ts"
   },
   "private": true,
   "dependencies": {
@@ -62,6 +63,7 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "i18next-resources-for-ts": "^1.5.0",
     "jsdom": "~22.1.0",
     "nx": "18.0.5",
     "prettier": "^2.8.8",