feature: add react-i18next with ICU (#183)

packages/frontend-design-poc/README.md

@@ -16,3 +16,11 @@ Typesript and CSS modules.
 ### Mock
 
 Uses [msw](https://mswjs.io/) as API mocking library.
+
+### i18n 
+
+This project uses [react-i18next](https://react.i18next.com/) as internationalization framework, and is configured
+with [ICU format](https://react.i18next.com/misc/using-with-icu-format), a widely used standard for message format.
+[This page](https://unicode-org.github.io/icu/userguide/format_parse/messages/) describes the format and covers the most common use cases, including more complex examples.
+
+`react-i18next`is configured in `./src/i18n/index.ts` and initiated as an import in `main.tsx`.

packages/frontend-design-poc/package.json

@@ -14,8 +14,11 @@
   "dependencies": {
     "@digdir/design-system-react": "^0.47.0",
     "@digdir/design-system-tokens": "^0.12.0",
+    "i18next": "^23.8.2",
+    "i18next-icu": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.3",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.16.0"
   },

packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx

@@ -1,12 +1,18 @@
 import styles from "./helloWorld.module.css";
 import { useQuery } from "react-query";
 import { getUser } from "../../api/queries.ts";
+import { useTranslation } from "react-i18next";
 
 export const HelloWorld = () => {
   const { isLoading, data } = useQuery("user", getUser);
+  const { t } = useTranslation();
   return (
     <section className={styles.helloWorld}>
-      {isLoading ? <span>Loading ...</span> : <h1>Hello, {data?.name}!</h1>}
+      {isLoading ? (
+        <span>Loading ...</span>
+      ) : (
+        <h1>{t("example.hello", { person: data?.name })}!</h1>
+      )}
     </section>
   );
 };

packages/frontend-design-poc/src/i18n/config.ts

@@ -0,0 +1,13 @@
+import nb from "./resources/nb.json";
+
+export const i18nInitConfig = {
+  resources: {
+    nb: { translation: nb },
+  },
+  lng: "nb",
+  fallbackLng: "nb",
+  debug: false,
+  interpolation: {
+    escapeValue: false,
+  },
+};

packages/frontend-design-poc/src/i18n/index.ts

@@ -0,0 +1,19 @@
+import i18n from "i18next";
+import ICU from "i18next-icu";
+import { initReactI18next } from "react-i18next";
+
+import nb from "./resources/nb.json";
+
+const i18nInitConfig = {
+  resources: {
+    nb: { translation: nb },
+  },
+  lng: "nb",
+  fallbackLng: "nb",
+  debug: false,
+  interpolation: {
+    escapeValue: false,
+  },
+};
+
+await i18n.use(ICU).use(initReactI18next).init(i18nInitConfig);

packages/frontend-design-poc/src/i18n/resources/nb.json

@@ -0,0 +1,3 @@
+{
+  "example.hello": "Hei, {person}"
+}

packages/frontend-design-poc/src/main.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { BrowserRouter } from "react-router-dom";
+import "./i18n/";
+
+import App from "./App.tsx";
 
 async function enableMocking() {
   if (import.meta.env.MODE === "development") {

packages/frontend-design-poc/utils/test-utils.tsx

@@ -3,6 +3,8 @@ import { ReactElement } from "react";
 import { MemoryRouter } from "react-router-dom";
 import { render, RenderOptions } from "@testing-library/react";
 
+import "../src/i18n/";
+
 interface IExtendedRenderOptions extends RenderOptions {
   initialEntries?: string[];
 }