refactor: move from next-international to next-intl (#1368)

* refactor: move from next-international to next-intl

* refactor: restructure translation package,

* chore: change i18n-allay framework to next-intl

* fix: add missing bold html tag to translation

* fix: format issue

* fix: address deepsource issues

* fix: remove international-types dependency

* fix: lint and typecheck issues

* fix: typecheck issue

* fix: typecheck issue

* fix: issue with translations

packages/widgets/src/_inputs/widget-app-input.tsx

@@ -43,8 +43,8 @@ export const WidgetAppInput = ({ property, kind }: CommonWidgetInputProps<"app">
       inputWrapperOrder={["label", "input", "description", "error"]}
       description={
         <Text size="xs">
-          {t("widget.common.app.description", {
-            here: (
+          {t.rich("widget.common.app.description", {
+            here: () => (
               <Anchor size="xs" component={Link} target="_blank" href="/manage/apps/new">
                 {t("common.here")}
               </Anchor>

packages/widgets/src/test/translation.spec.ts

@@ -1,12 +1,12 @@
 import { describe, expect, it } from "vitest";
 
 import { objectEntries } from "@homarr/common";
-import { languageMapping } from "@homarr/translation";
+import { createLanguageMapping } from "@homarr/translation";
 
 import { widgetImports } from "..";
 
 describe("Widget properties with description should have matching translations", async () => {
-  const enTranslation = await languageMapping().en();
+  const enTranslation = await createLanguageMapping().en();
   objectEntries(widgetImports).forEach(([key, value]) => {
     Object.entries(value.definition.options).forEach(
       ([optionKey, optionValue]: [string, { withDescription?: boolean }]) => {
@@ -25,7 +25,7 @@ describe("Widget properties with description should have matching translations",
 });
 
 describe("Widget properties should have matching name translations", async () => {
-  const enTranslation = await languageMapping().en();
+  const enTranslation = await createLanguageMapping().en();
   objectEntries(widgetImports).forEach(([key, value]) => {
     Object.keys(value.definition.options).forEach((optionKey) => {
       it(`should have matching translations for ${optionKey} option name of ${key} widget`, () => {

packages/widgets/src/widget-integration-select.tsx

@@ -92,8 +92,8 @@ export const WidgetIntegrationSelect = ({
           inputWrapperOrder={["label", "input", "description", "error"]}
           description={
             <Text size="xs">
-              {t("widget.common.integration.description", {
-                here: (
+              {t.rich("widget.common.integration.description", {
+                here: () => (
                   <Anchor size="xs" component={Link} target="_blank" href="/manage/integrations">
                     {t("common.here")}
                   </Anchor>