build: decouple package deps and introduce yarn workspaces (#7415)

* feat: decouple package deps and introduce yarn workspaces

* update root directory

* fix

* fix scripts

* fix lint

* update path in scripts

* remove yarn.lock files from packages

* ignore workspace

* dummy

* dummy

* remove comment check

* revert workflow changes

* ignore ws when installing gh actions

* remove log

* update path

* fix

* fix typo

packages/excalidraw/i18n.ts

@@ -0,0 +1,172 @@
+import fallbackLangData from "./locales/en.json";
+import percentages from "./locales/percentages.json";
+import { jotaiScope, jotaiStore } from "./jotai";
+import { atom, useAtomValue } from "jotai";
+import { NestedKeyOf } from "./utility-types";
+
+const COMPLETION_THRESHOLD = 85;
+
+export interface Language {
+  code: string;
+  label: string;
+  rtl?: boolean;
+}
+
+export type TranslationKeys = NestedKeyOf<typeof fallbackLangData>;
+
+export const defaultLang = { code: "en", label: "English" };
+
+export const languages: Language[] = [
+  defaultLang,
+  ...[
+    { code: "ar-SA", label: "العربية", rtl: true },
+    { code: "bg-BG", label: "Български" },
+    { code: "ca-ES", label: "Català" },
+    { code: "cs-CZ", label: "Česky" },
+    { code: "de-DE", label: "Deutsch" },
+    { code: "el-GR", label: "Ελληνικά" },
+    { code: "es-ES", label: "Español" },
+    { code: "eu-ES", label: "Euskara" },
+    { code: "fa-IR", label: "فارسی", rtl: true },
+    { code: "fi-FI", label: "Suomi" },
+    { code: "fr-FR", label: "Français" },
+    { code: "gl-ES", label: "Galego" },
+    { code: "he-IL", label: "עברית", rtl: true },
+    { code: "hi-IN", label: "हिन्दी" },
+    { code: "hu-HU", label: "Magyar" },
+    { code: "id-ID", label: "Bahasa Indonesia" },
+    { code: "it-IT", label: "Italiano" },
+    { code: "ja-JP", label: "日本語" },
+    { code: "kab-KAB", label: "Taqbaylit" },
+    { code: "kk-KZ", label: "Қазақ тілі" },
+    { code: "ko-KR", label: "한국어" },
+    { code: "ku-TR", label: "Kurdî" },
+    { code: "lt-LT", label: "Lietuvių" },
+    { code: "lv-LV", label: "Latviešu" },
+    { code: "my-MM", label: "Burmese" },
+    { code: "nb-NO", label: "Norsk bokmål" },
+    { code: "nl-NL", label: "Nederlands" },
+    { code: "nn-NO", label: "Norsk nynorsk" },
+    { code: "oc-FR", label: "Occitan" },
+    { code: "pa-IN", label: "ਪੰਜਾਬੀ" },
+    { code: "pl-PL", label: "Polski" },
+    { code: "pt-BR", label: "Português Brasileiro" },
+    { code: "pt-PT", label: "Português" },
+    { code: "ro-RO", label: "Română" },
+    { code: "ru-RU", label: "Русский" },
+    { code: "sk-SK", label: "Slovenčina" },
+    { code: "sv-SE", label: "Svenska" },
+    { code: "sl-SI", label: "Slovenščina" },
+    { code: "tr-TR", label: "Türkçe" },
+    { code: "uk-UA", label: "Українська" },
+    { code: "zh-CN", label: "简体中文" },
+    { code: "zh-TW", label: "繁體中文" },
+    { code: "vi-VN", label: "Tiếng Việt" },
+    { code: "mr-IN", label: "मराठी" },
+  ]
+    .filter(
+      (lang) =>
+        (percentages as Record<string, number>)[lang.code] >=
+        COMPLETION_THRESHOLD,
+    )
+    .sort((left, right) => (left.label > right.label ? 1 : -1)),
+];
+
+const TEST_LANG_CODE = "__test__";
+if (import.meta.env.DEV) {
+  languages.unshift(
+    { code: TEST_LANG_CODE, label: "test language" },
+    {
+      code: `${TEST_LANG_CODE}.rtl`,
+      label: "\u{202a}test language (rtl)\u{202c}",
+      rtl: true,
+    },
+  );
+}
+
+let currentLang: Language = defaultLang;
+let currentLangData = {};
+
+export const setLanguage = async (lang: Language) => {
+  currentLang = lang;
+  document.documentElement.dir = currentLang.rtl ? "rtl" : "ltr";
+  document.documentElement.lang = currentLang.code;
+
+  if (lang.code.startsWith(TEST_LANG_CODE)) {
+    currentLangData = {};
+  } else {
+    try {
+      currentLangData = await import(
+        /* webpackChunkName: "locales/[request]" */ `./locales/${currentLang.code}.json`
+      );
+    } catch (error: any) {
+      console.error(`Failed to load language ${lang.code}:`, error.message);
+      currentLangData = fallbackLangData;
+    }
+  }
+
+  jotaiStore.set(editorLangCodeAtom, lang.code);
+};
+
+export const getLanguage = () => currentLang;
+
+const findPartsForData = (data: any, parts: string[]) => {
+  for (let index = 0; index < parts.length; ++index) {
+    const part = parts[index];
+    if (data[part] === undefined) {
+      return undefined;
+    }
+    data = data[part];
+  }
+  if (typeof data !== "string") {
+    return undefined;
+  }
+  return data;
+};
+
+export const t = (
+  path: NestedKeyOf<typeof fallbackLangData>,
+  replacement?: { [key: string]: string | number } | null,
+  fallback?: string,
+) => {
+  if (currentLang.code.startsWith(TEST_LANG_CODE)) {
+    const name = replacement
+      ? `${path}(${JSON.stringify(replacement).slice(1, -1)})`
+      : path;
+    return `\u{202a}[[${name}]]\u{202c}`;
+  }
+
+  const parts = path.split(".");
+  let translation =
+    findPartsForData(currentLangData, parts) ||
+    findPartsForData(fallbackLangData, parts) ||
+    fallback;
+  if (translation === undefined) {
+    const errorMessage = `Can't find translation for ${path}`;
+    // in production, don't blow up the app on a missing translation key
+    if (import.meta.env.PROD) {
+      console.warn(errorMessage);
+      return "";
+    }
+    throw new Error(errorMessage);
+  }
+
+  if (replacement) {
+    for (const key in replacement) {
+      translation = translation.replace(`{{${key}}}`, String(replacement[key]));
+    }
+  }
+  return translation;
+};
+
+/** @private atom used solely to rerender components using `useI18n` hook */
+const editorLangCodeAtom = atom(defaultLang.code);
+
+// Should be used in components that fall under these cases:
+// - component is rendered as an <Excalidraw> child
+// - component is rendered internally by <Excalidraw>, but the component
+//   is memoized w/o being updated on `langCode`, `AppState`, or `UIAppState`
+export const useI18n = () => {
+  const langCode = useAtomValue(editorLangCodeAtom, jotaiScope);
+  return { t, langCode };
+};