Feat(viewer): Add i18n

package.json

@@ -14,12 +14,10 @@
 	"private": true,
 	"devDependencies": {
 		"@biomejs/biome": "catalog:",
-		"@playwright/test": "^1.57.0",
 		"@types/node": "catalog:",
 		"husky": "catalog:",
 		"playwright": "catalog:",
-		"turbo": "catalog:",
-		"typescript": "catalog:"
+		"turbo": "catalog:"
 	},
 	"packageManager": "pnpm@10.25.0+sha512.5e82639027af37cf832061bcc6d639c219634488e0f2baebe785028a793de7b525ffcd3f7ff574f5e9860654e098fe852ba8ac5dd5cefe1767d23a020a92f501"
 }

packages/demo/package.json

@@ -20,8 +20,12 @@
 		"@istex/react-tei": "workspace:^",
 		"@mui/icons-material": "catalog:",
 		"@mui/material": "catalog:",
+		"i18next": "catalog:",
+		"i18next-browser-languagedetector": "catalog:",
+		"i18next-resources-to-backend": "catalog:",
 		"react": "catalog:",
-		"react-dom": "catalog:"
+		"react-dom": "catalog:",
+		"react-i18next": "catalog:"
 	},
 	"devDependencies": {
 		"@types/node": "catalog:",
@@ -30,6 +34,7 @@
 		"@vitejs/plugin-react-swc": "catalog:",
 		"@vitest/browser-playwright": "catalog:",
 		"@vitest/coverage-v8": "catalog:",
+		"playwright": "catalog:",
 		"typescript": "catalog:",
 		"vite": "catalog:",
 		"vite-plugin-devtools-json": "catalog:",

packages/demo/src/App.tsx

@@ -1,18 +1,19 @@
 import CssBaseline from "@mui/material/CssBaseline";
 
+import { I18nProvider } from "./i18n/I18nProvider";
 import { UploadPage } from "./upload/UploadPage";
 import { ViewerContextProvider } from "./viewer/ViewerContext";
 import { ViewerPage } from "./viewer/ViewerPage";
 
 function App() {
 	return (
-		<>
+		<I18nProvider>
 			<CssBaseline />
 			<ViewerContextProvider>
 				<UploadPage />
 				<ViewerPage />
 			</ViewerContextProvider>
-		</>
+		</I18nProvider>
 	);
 }
 export default App;

packages/demo/src/i18n/I18NProvider.spec.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+import { describe, expect, it } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { I18nProvider } from "./I18nProvider.js";
+
+function TestFunction() {
+	const { t } = useTranslation();
+
+	return t("header.title");
+}
+
+describe("I18NProvider", () => {
+	it("should translate header.title", async () => {
+		const screen = await render(
+			<I18nProvider>
+				<TestFunction />
+			</I18nProvider>,
+		);
+
+		expect(screen.getByText("Viewer")).toBeDefined();
+	});
+});

packages/demo/src/i18n/I18nProvider.tsx

@@ -0,0 +1,16 @@
+import type { i18n } from "i18next";
+import { I18nextProvider } from "react-i18next";
+
+import defaultI18n from "./i18n.js";
+
+export function I18nProvider({
+	i18n = defaultI18n,
+	children,
+}: I18nProviderProps) {
+	return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}
+
+export type I18nProviderProps = {
+	i18n?: i18n;
+	children: React.ReactNode;
+};

packages/demo/src/i18n/i18n.ts

@@ -0,0 +1,25 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { initReactI18next } from "react-i18next";
+
+import { en } from "./locales/en.js";
+import { fr } from "./locales/fr.js";
+
+i18n
+	.use(
+		resourcesToBackend({
+			en: { translation: en },
+			fr: { translation: fr },
+		}),
+	)
+	.use(LanguageDetector)
+	.use(initReactI18next)
+	.init({
+		fallbackLng: "en",
+		interpolation: {
+			escapeValue: false,
+		},
+	});
+
+export default i18n;

packages/demo/src/i18n/locales/en.ts

@@ -0,0 +1,7 @@
+import type { Translation } from "./fr.js";
+
+export const en: Translation = {
+	header: {
+		title: "Viewer",
+	},
+};

packages/demo/src/i18n/locales/fr.ts

@@ -0,0 +1,7 @@
+export const fr = {
+	header: {
+		title: "Viewer",
+	},
+};
+
+export type Translation = typeof fr;

packages/demo/vitest.config.ts

@@ -13,7 +13,11 @@ export default defineConfig({
 		},
 		browser: {
 			enabled: true,
-			provider: playwright(),
+			provider: playwright({
+				contextOptions: {
+					locale: "fr-FR",
+				},
+			}),
 			instances: [{ browser: "chromium" }],
 			viewport: { width: 1920, height: 1080 },
 		},

packages/e2e/package.json

@@ -11,5 +11,10 @@
 	},
 	"dependencies": {
 		"@istex/viewer-demo": "workspace:^"
+	},
+	"devDependencies": {
+		"@playwright/test": "catalog:",
+		"playwright": "catalog:",
+		"typescript": "catalog:"
 	}
 }

packages/e2e/playwright.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
 	use: {
 		baseURL,
 		trace: "on-first-retry",
+		locale: "fr-FR",
 	},
 
 	projects: [

packages/react-tei/package.json

@@ -16,9 +16,13 @@
 	"dependencies": {
 		"@mui/icons-material": "catalog:",
 		"@mui/material": "catalog:",
+		"i18next": "catalog:",
+		"i18next-browser-languagedetector": "catalog:",
+		"i18next-resources-to-backend": "catalog:",
+		"fast-xml-parser": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
-		"fast-xml-parser": "catalog:"
+		"react-i18next": "catalog:"
 	},
 	"devDependencies": {
 		"@types/node": "catalog:",
@@ -27,6 +31,7 @@
 		"@vitejs/plugin-react-swc": "catalog:",
 		"@vitest/browser-playwright": "catalog:",
 		"@vitest/coverage-v8": "catalog:",
+		"playwright": "catalog:",
 		"typescript": "catalog:",
 		"vite": "catalog:",
 		"vite-plugin-devtools-json": "catalog:",

packages/react-tei/src/Viewer.tsx

@@ -1,8 +1,10 @@
 import { XMLParser } from "fast-xml-parser";
 import { useMemo } from "react";
+
 import { DocumentBody } from "./DocumentBody.js";
 import { DocumentContextProvider } from "./DocumentContextProvider.js";
 import { DocumentDrawer } from "./DocumentDrawer.js";
+import { I18nProvider } from "./i18n/I18nProvider.js";
 
 const parser = new XMLParser({
 	ignoreAttributes: false,
@@ -12,13 +14,15 @@ const parser = new XMLParser({
 export const Viewer = ({ document }: { document: string }) => {
 	const jsonDocument = useMemo(() => parser.parse(document), [document]);
 	return (
-		<DocumentContextProvider jsonDocument={jsonDocument}>
-			<div>
-				<DocumentBody jsonDocument={jsonDocument} />
-				<DocumentDrawer
-					teiHeader={jsonDocument.TEI.teiHeader as Record<string, unknown>}
-				/>
-			</div>
-		</DocumentContextProvider>
+		<I18nProvider>
+			<DocumentContextProvider jsonDocument={jsonDocument}>
+				<div>
+					<DocumentBody jsonDocument={jsonDocument} />
+					<DocumentDrawer
+						teiHeader={jsonDocument.TEI.teiHeader as Record<string, unknown>}
+					/>
+				</div>
+			</DocumentContextProvider>
+		</I18nProvider>
 	);
 };

packages/react-tei/src/i18n/I18NProvider.spec.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+import { describe, expect, it } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { I18nProvider } from "./I18nProvider.js";
+
+function TestFunction() {
+	const { t } = useTranslation();
+
+	return t("document.abstract");
+}
+
+describe("I18NProvider", () => {
+	it("should translate document.abstract", async () => {
+		const screen = await render(
+			<I18nProvider>
+				<TestFunction />
+			</I18nProvider>,
+		);
+
+		expect(screen.getByText("Résumé")).toBeDefined();
+	});
+});

packages/react-tei/src/i18n/I18nProvider.tsx

@@ -0,0 +1,16 @@
+import type { i18n } from "i18next";
+import { I18nextProvider } from "react-i18next";
+
+import defaultI18n from "./i18n.js";
+
+export function I18nProvider({
+	i18n = defaultI18n,
+	children,
+}: I18nProviderProps) {
+	return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}
+
+export type I18nProviderProps = {
+	i18n?: i18n;
+	children: React.ReactNode;
+};

packages/react-tei/src/i18n/i18n.ts

@@ -0,0 +1,25 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { initReactI18next } from "react-i18next";
+
+import { en } from "./locales/en.js";
+import { fr } from "./locales/fr.js";
+
+i18n
+	.use(
+		resourcesToBackend({
+			en: { translation: en },
+			fr: { translation: fr },
+		}),
+	)
+	.use(LanguageDetector)
+	.use(initReactI18next)
+	.init({
+		fallbackLng: "en",
+		interpolation: {
+			escapeValue: false,
+		},
+	});
+
+export default i18n;

packages/react-tei/src/i18n/locales/en.ts

@@ -0,0 +1,10 @@
+import type { Translation } from "./fr.js";
+
+export const en: Translation = {
+	document: {
+		abstract: "Abstract",
+	},
+	sidebar: {
+		footNotes: "Foot Notes",
+	},
+};

packages/react-tei/src/i18n/locales/fr.ts

@@ -0,0 +1,10 @@
+export const fr = {
+	document: {
+		abstract: "Résumé",
+	},
+	sidebar: {
+		footNotes: "Notes de bas de page",
+	},
+};
+
+export type Translation = typeof fr;

packages/react-tei/vitest.config.ts

@@ -12,7 +12,11 @@ export default defineConfig({
 		},
 		browser: {
 			enabled: true,
-			provider: playwright(),
+			provider: playwright({
+				contextOptions: {
+					locale: "fr-FR",
+				},
+			}),
 			instances: [{ browser: "chromium" }],
 			viewport: { width: 1920, height: 1080 },
 		},