feat(i18n): Create LanguageSelector to validate feature

Author: david-bretaud-dev

webapp/.gitignore

@@ -23,4 +23,7 @@ dist-ssr
 *.sln
 *.sw?
 
-METABASE_LOGIN.json
+METABASE_LOGIN.json
+
+# Translations
+public/locales

webapp/.prettierrc

@@ -37,6 +37,8 @@
     "^@pages/(.*)$",
     "^@ui",
     "^@ui/(.*)$",
+    "^@shared",
+    "^@shared/(.*)$",
     "[../]",
     "[./]"
   ],

webapp/README.md

@@ -25,3 +25,4 @@ npm run dev
 - `npm run preview` : Démarre le serveur à partir du build pour la production (dans le dist)
 - `npm run check:arch` : Vérifier si les imports du projet respectent le principe de l'architecture FSD.
 - `npm run arch:tree` : Génère un fichier text contenant l'arborescence du projet.
+- `npm run translations:update`: Upload les fichiers de traductions vers public/locales, depuis lequel sont servis les fichiers de traduction

webapp/package.json

@@ -14,7 +14,8 @@
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "lint": "eslint ./src",
-    "lint:fix": "eslint ./src --fix"
+    "lint:fix": "eslint ./src --fix",
+    "translations:update": "./scripts/update-translations.sh"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.15",

webapp/scripts/update-translations.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+# Copy src/shared/i18n/translations/{files} -> public/locales/{files}
+
+cp -R ./src/shared/i18n/translations/ public/locales/

webapp/src/components/Header.tsx

@@ -5,6 +5,9 @@ import logo from "@assets/logo_all4trees.png";
 
 import { Button } from "@ui/button";
 
+import { useTranslation } from "@shared/i18n";
+
+import { LanguageSelecor } from "./LanguageSelector";
 import { ModeToggle } from "./ModeToggle";
 
 interface HeaderProps {
@@ -14,6 +17,8 @@ interface HeaderProps {
 }
 
 export function Header({ onLogout, onLogin, isLogin }: HeaderProps) {
+  const { t } = useTranslation("translations");
+
   return (
     <header className="bg-background border-b border-border px-6 py-4 relative z-40">
       <div className="mx-auto max-w-screen-2xl px-6 py-4">
@@ -41,6 +46,8 @@ export function Header({ onLogout, onLogin, isLogin }: HeaderProps) {
               </Button>
             )}
             <ModeToggle />
+            <p>{t("helloWorld")}</p>
+            <LanguageSelecor />
           </div>
         </div>
       </div>

webapp/src/components/LanguageSelector.tsx

@@ -0,0 +1,55 @@
+import { LanguagesIcon } from "lucide-react";
+import type { FC } from "react";
+
+import { Button } from "@ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ui/dropdown-menu";
+
+import { LANGUAGES, i18nInstance } from "@shared/i18n";
+
+const LANGUAGES_CONFIGS = [
+  {
+    identifier: LANGUAGES.FRENCH,
+    fullString: "Français",
+    flag: "🇫🇷",
+  },
+  {
+    identifier: LANGUAGES.ENGLISH,
+    fullString: "English",
+    flag: "🇬🇧",
+  },
+] as const;
+
+export const LanguageSelecor: FC = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none"
+        >
+          <LanguagesIcon className="h-[1.2rem] w-[1.2rem]" />
+          <span className="sr-only">{i18nInstance.language.toUpperCase()}</span>
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        className="bg-background"
+        align="end"
+      >
+        {LANGUAGES_CONFIGS.map((config) => (
+          <DropdownMenuItem
+            onClick={() => i18nInstance.changeLanguage(config.identifier)}
+          >
+            {`${config.flag} - ${config.fullString}`}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

webapp/tsconfig.json

@@ -21,7 +21,8 @@
       "@widgets": ["./src/widgets/index.ts"],
       "@widgets/*": ["./src/widgets/*"],
       "@ui/*": ["./src/components/ui/*"],
-      "@assets/*": ["./src/assets/*"]
+      "@assets/*": ["./src/assets/*"],
+      "@shared/*": ["./src/shared/*"]
     }
   }
 }

webapp/vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
       "@assets": path.resolve(__dirname, "./src/assets"),
       "@pages": path.resolve(__dirname, "./src/pages"),
       "@ui": path.resolve(__dirname, "./src/components/ui"),
+      "@shared": path.resolve(__dirname, "./src/shared"),
     },
   },
   plugins: [react(), tailwindcss()],