Feature/pxweb2-41 install i18next

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

@@ -0,0 +1,6 @@
+{
+  "app_title": "مرحبًا بك في PxWeb",
+  "main": {
+    "header": "مرحبا بكم في التطبيق!"
+  }
+}

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

@@ -0,0 +1,10 @@
+{
+  "app_title": "Welcome to PxWeb",
+  "main": {
+    "header": "Welcome to the app!"
+  },
+  "date": {
+    "simple_date": "{{value, datetime}}",
+    "simple_date_with_time": "{{value, datetime(year: 'numeric'; month: 'numeric'; day: 'numeric'; hour: 'numeric'; minute: 'numeric')}}"
+  }
+}

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

@@ -0,0 +1,6 @@
+{
+  "app_title": "Velkommen til PxWeb",
+  "main": {
+    "header": "Velkommen til appen!"
+  }
+}

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

@@ -0,0 +1,6 @@
+{
+  "app_title": "Välkommen till PxWeb",
+  "main": {
+    "header": "Välkommen till appen!"
+  }
+}

apps/pxweb2/public/theme/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 06 Feb 2024 11:35:57 GMT
+ * Generated on Thu, 29 Feb 2024 09:16:51 GMT
  */
 
 :root {

apps/pxweb2/src/app/app.tsx

@@ -1,5 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import styles from './app.module.scss';
+import { useTranslation } from 'react-i18next';
 
 import {
   Button,
@@ -9,6 +8,7 @@ import {
   Ingress,
   Label,
 } from '@pxweb2/pxweb2-ui';
+import useLocalizeDocumentAttributes from '../i18n/useLocalizeDocumentAttributes';
 
 function test(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
   event.preventDefault();
@@ -19,15 +19,40 @@ function testSubmit() {
 }
 
 export function App() {
+  const { t, i18n } = useTranslation();
+
+  const locales = {
+    en: { title: 'English' },
+    no: { title: 'Norsk' },
+    sv: { title: 'Svenska' },
+    ar: { title: 'العربية' },
+  };
+
+  useLocalizeDocumentAttributes();
+
   return (
     <>
+      <ul>
+        {Object.keys(locales).map((locale) => (
+          <li key={locale}>
+            <button
+              style={{
+                fontWeight:
+                  i18n.resolvedLanguage === locale ? 'bold' : 'normal',
+              }}
+              type="submit"
+              onClick={() => i18n.changeLanguage(locale)}
+            >
+              {locales[locale as keyof typeof locales].title}
+            </button>
+          </li>
+        ))}
+      </ul>
       <Heading level="1" size="xlarge">
         Welcome to PxWeb 2.0
       </Heading>
       <br />
-      <Ingress spacing>
-        Ingress: This page will display various components
-      </Ingress>
+      <Ingress spacing>{t('main.header')}</Ingress>
       <BodyShort size="medium" spacing align="start" weight="regular">
         BodyShort: This component will be used for text with not more than 80
         characters.
@@ -78,6 +103,16 @@ export function App() {
       <Button variant="secondary" icon="FloppyDisk" onClick={test}></Button>
       &nbsp;
       <Button variant="secondary" icon="Heart" onClick={test}></Button>
+      <p>
+        {t('date.simple_date', {
+          value: new Date('2024-01-25'),
+        })}
+      </p>
+      <p>
+        {t('date.simple_date_with_time', {
+          value: new Date('2024-01-25 12:34:56'),
+        })}
+      </p>
     </>
   );
 }

apps/pxweb2/src/i18n/config.ts

@@ -0,0 +1,27 @@
+import i18n from 'i18next';
+import HttpApi from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  .use(HttpApi)
+  .use(initReactI18next)
+  .init({
+    backend: {
+      requestOptions: {
+        // Do not cache the response from the server. This is needed because site administrators 
+        // may want to change the translations without having to wait for the cache to expire.
+        cache: 'no-store',
+      },
+    },
+    lng: 'en',
+    fallbackLng: 'en',
+    // Explicitly tell i18next our
+    // supported locales.
+    supportedLngs: ['en', 'no', 'sv', 'ar'],
+    debug: true,
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

apps/pxweb2/src/i18n/useLocalizeDocumentAttributes.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function useLocalizeDocumentAttributes() {
+  const { t, i18n } = useTranslation();
+
+  useEffect(() => {
+    if (i18n.resolvedLanguage) {
+      document.documentElement.lang = i18n.resolvedLanguage;
+      document.documentElement.dir = i18n.dir(i18n.resolvedLanguage);
+    }
+
+    document.title = t('app_title');
+
+  }, [i18n, i18n.resolvedLanguage, t]);
+}

apps/pxweb2/src/main.tsx

@@ -1,13 +1,16 @@
-import { StrictMode } from 'react';
+import { StrictMode, Suspense } from 'react';
 import * as ReactDOM from 'react-dom/client';
 
 import App from './app/app';
+import './i18n/config';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <StrictMode>
-    <App />
+    <Suspense fallback={<div>Loading...</div>}>
+      <App />
+    </Suspense>
   </StrictMode>
 );

package.json

@@ -15,8 +15,11 @@
   "dependencies": {
     "@swc/helpers": "^0.5.6",
     "clsx": "^2.1.0",
+    "i18next": "^23.10.0",
+    "i18next-http-backend": "^2.5.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-i18next": "^14.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",