[WEB-2870]feat: language support

packages/constants/src/workspace.ts

@@ -1,5 +1,5 @@
 export const ORGANIZATION_SIZE = [
-  "Just myself",
+  "Just myself", // TODO: translate
   "2-10",
   "11-50",
   "51-200",

packages/i18n/.eslintignore

@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*

packages/i18n/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

packages/i18n/.prettierignore

@@ -0,0 +1,4 @@
+.turbo
+out/
+dist/
+build/

packages/i18n/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

packages/i18n/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@plane/i18n",
+  "version": "0.24.1",
+  "description": "I18n shared across multiple apps internally",
+  "private": true,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:errors": "eslint src --ext .ts,.tsx --quiet"
+  },
+  "dependencies": {
+    "@plane/utils": "*"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@types/node": "^22.5.4",
+    "typescript": "^5.3.3"
+  }
+}

packages/i18n/src/components/index.tsx

@@ -0,0 +1,29 @@
+import { observer } from "mobx-react";
+import React, { createContext, useEffect } from "react";
+import { Language, languages } from "../config";
+import { TranslationStore } from "./store";
+
+// Create the store instance
+const translationStore = new TranslationStore();
+
+// Create Context
+export const TranslationContext = createContext<TranslationStore>(translationStore);
+
+export const TranslationProvider = observer(({ children }: { children: React.ReactNode }) => {
+  // Handle storage events for cross-tab synchronization
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === "userLanguage" && event.newValue) {
+        const newLang = event.newValue as Language;
+        if (languages.includes(newLang)) {
+          translationStore.setLanguage(newLang);
+        }
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    return () => window.removeEventListener("storage", handleStorageChange);
+  }, []);
+
+  return <TranslationContext.Provider value={translationStore}>{children}</TranslationContext.Provider>;
+});

packages/i18n/src/components/store.ts

@@ -0,0 +1,42 @@
+import { makeObservable, observable } from "mobx";
+import { Language, fallbackLng, languages, translations } from "../config";
+
+export class TranslationStore {
+  currentLocale: Language = fallbackLng;
+
+  constructor() {
+    makeObservable(this, {
+      currentLocale: observable.ref,
+    });
+    this.initializeLanguage();
+  }
+
+  get availableLanguages() {
+    return languages;
+  }
+
+  t(key: string) {
+    return translations[this.currentLocale]?.[key] || translations[fallbackLng][key] || key;
+  }
+
+  setLanguage(lng: Language) {
+    try {
+      localStorage.setItem("userLanguage", lng);
+      this.currentLocale = lng;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  initializeLanguage() {
+    if (typeof window === "undefined") return;
+    const savedLocale = localStorage.getItem("userLanguage") as Language;
+    if (savedLocale && languages.includes(savedLocale)) {
+      this.setLanguage(savedLocale);
+    } else {
+      const browserLang = navigator.language.split("-")[0] as Language;
+      const newLocale = languages.includes(browserLang as Language) ? (browserLang as Language) : fallbackLng;
+      this.setLanguage(newLocale);
+    }
+  }
+}

packages/i18n/src/config/index.ts

@@ -0,0 +1,39 @@
+import en from "../locales/en/translations.json";
+import fr from "../locales/fr/translations.json";
+import es from "../locales/es/translations.json";
+import ja from "../locales/ja/translations.json";
+
+export type Language = (typeof languages)[number];
+export type Translations = {
+  [key: string]: {
+    [key: string]: string;
+  };
+};
+
+export const fallbackLng = "en";
+export const languages = ["en", "fr", "es", "ja"] as const;
+export const translations: Translations = {
+  en,
+  fr,
+  es,
+  ja,
+};
+
+export const SUPPORTED_LANGUAGES = [
+  {
+    label: "English",
+    value: "en",
+  },
+  {
+    label: "French",
+    value: "fr",
+  },
+  {
+    label: "Spanish",
+    value: "es",
+  },
+  {
+    label: "Japanese",
+    value: "ja",
+  },
+];

packages/i18n/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-translation";

packages/i18n/src/hooks/use-translation.ts

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+import { TranslationContext } from "../components";
+import { Language } from "../config";
+
+export function useTranslation() {
+  const store = useContext(TranslationContext);
+  if (!store) {
+    throw new Error("useTranslation must be used within a TranslationProvider");
+  }
+
+  return {
+    t: (key: string) => store.t(key),
+    currentLocale: store.currentLocale,
+    changeLanguage: (lng: Language) => store.setLanguage(lng),
+    languages: store.availableLanguages,
+  };
+}

packages/i18n/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./config";
+export * from "./components";
+export * from "./hooks";