fix(deps): update dependency next-intl to v4 (#2580)

* fix(deps): update dependency next-intl to v4 * fix: typecheck issue * refactor: implement improvements for next-intl v4 * fix: typecheck issues * fix: typecheck issue --------- Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com> Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
2025-03-12 18:37:43 +01:00
parent 47ebc66c9e
commit f55d8a9c2e
37 changed files with 127 additions and 76 deletions
--- a/packages/forms-collection/src/icon-picker/icon-picker.tsx
+++ b/packages/forms-collection/src/icon-picker/icon-picker.tsx
@@ -148,7 +148,7 @@ export const IconPicker = ({ value: propsValue, onChange, error, onFocus, onBlur
            withAsterisk
            error={error}
            label={tCommon("iconPicker.label")}
-            placeholder={tCommon("iconPicker.header", { countIcons: data?.countIcons ?? 0 })}
+            placeholder={tCommon("iconPicker.header", { countIcons: String(data?.countIcons ?? 0) })}
          />
          {session?.user.permissions.includes("media-upload") && (
            <UploadMedia
--- a/packages/old-import/src/components/initial/board-selection-card.tsx
+++ b/packages/old-import/src/components/initial/board-selection-card.tsx
@@ -42,7 +42,7 @@ export const BoardSelectionCard = ({ selections, updateSelections }: BoardSelect
      <Stack gap="sm">
        <Stack gap={0}>
          <Group justify="space-between" align="center">
-            <Text fw={500}>{tBoardSelection("title", { count: selections.size })}</Text>
+            <Text fw={500}>{tBoardSelection("title", { count: String(selections.size) })}</Text>
            <Anchor component="button" onClick={handleToggleAll}>
              {areAllChecked ? tBoardSelection("action.unselectAll") : tBoardSelection("action.selectAll")}
            </Anchor>
--- a/packages/translation/package.json
+++ b/packages/translation/package.json
@@ -33,7 +33,7 @@
    "deepmerge": "4.3.1",
    "mantine-react-table": "2.0.0-beta.9",
    "next": "15.1.7",
-    "next-intl": "3.26.5",
+    "next-intl": "4.0.0",
    "react": "19.0.0",
    "react-dom": "19.0.0"
  },
--- a/packages/translation/src/client/index.ts
+++ b/packages/translation/src/client/index.ts
@@ -2,18 +2,26 @@

 import { useMessages, useTranslations } from "next-intl";

-import type { TranslationObject } from "../type";
+import type { SupportedLanguage } from "../config";
+import type englishTranslation from "../lang/en.json";

 export { useChangeLocale } from "./use-change-locale";
 export { useCurrentLocale } from "./use-current-locale";

+declare module "next-intl" {
+  interface AppConfig {
+    Messages: typeof englishTranslation;
+    Locale: SupportedLanguage;
+  }
+}
+
 export const { useI18n, useScopedI18n } = {
  useI18n: useTranslations,
  useScopedI18n: useTranslations,
 };

 export const { useI18nMessages } = {
-  useI18nMessages: () => useMessages() as TranslationObject,
+  useI18nMessages: () => useMessages(),
 };

 export { useTranslations };
--- a/packages/translation/src/client/use-current-locale.ts
+++ b/packages/translation/src/client/use-current-locale.ts
@@ -1,5 +1,3 @@
 import { useLocale } from "next-intl";

-import type { SupportedLanguage } from "../config";
-
-export const useCurrentLocale = () => useLocale() as SupportedLanguage;
+export const useCurrentLocale = useLocale;
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -3594,7 +3594,7 @@
        },
        "delete": {
          "title": "Delete search engine",
-          "message": "Are you sure you want to delete the search engine '{name}'?",
+          "message": "Are you sure you want to delete the search engine {name}?",
          "notification": {
            "success": {
              "title": "Search engine deleted",
--- a/packages/translation/src/request.ts
+++ b/packages/translation/src/request.ts
@@ -22,7 +22,7 @@ export default getRequestConfig(async ({ requestLocale }) => {
  if (currentLocale !== fallbackLocale) {
    const fallbackMessages = (await languageMap[fallbackLocale]()).default;
    return {
-      locale: currentLocale,
+      locale: typedLocale,
      messages: deepmerge(fallbackMessages, currentMessages),
    };
  }
--- a/packages/translation/src/routing.ts
+++ b/packages/translation/src/routing.ts
@@ -11,6 +11,8 @@ export const createRouting = (defaultLocale: SupportedLanguage) =>
    defaultLocale,
    localeCookie: {
      name: localeCookieKey,
+      // 1 year
+      maxAge: 60 * 60 * 24 * 365,
    },
    localePrefix: {
      mode: "never", // Rewrite the URL with locale parameter but without shown in url
--- a/packages/translation/src/server.ts
+++ b/packages/translation/src/server.ts
@@ -1,5 +1,15 @@
 import { getTranslations } from "next-intl/server";

+import type { SupportedLanguage } from "./config";
+import type englishTranslation from "./lang/en.json";
+
+declare module "next-intl" {
+  interface AppConfig {
+    Messages: typeof englishTranslation;
+    Locale: SupportedLanguage;
+  }
+}
+
 export const { getI18n, getScopedI18n } = {
  getI18n: getTranslations,
  getScopedI18n: getTranslations,
--- a/packages/validation/src/form/i18n.ts
+++ b/packages/validation/src/form/i18n.ts
@@ -12,7 +12,8 @@ export const zodErrorMap = <TFunction extends TranslationFunction>(t: TFunction)
      };
    }
    return {
-      message: t(error.key ? `common.zod.${error.key}` : "common.zod.errors.default", error.params ?? {}),
+      // use never to make ts happy
+      message: t(error.key ? `common.zod.${error.key}` : "common.zod.errors.default", (error.params ?? {}) as never),
    };
  };
 };
--- a/packages/widgets/src/_inputs/widget-location-input.tsx
+++ b/packages/widgets/src/_inputs/widget-location-input.tsx
@@ -224,7 +224,7 @@ const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: Location
        <Tooltip
          label={t("action.select", {
            city: city.name,
-            countryCode: city.country_code,
+            countryCode: city.country_code ?? "??",
          })}
        >
          <ActionIcon color="red" variant="subtle" onClick={onSelect}>
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -140,7 +140,7 @@ export const SystemHealthMonitoring = ({
                    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={30} />}>
                      {t("widget.healthMonitoring.popover.memoryAvailable", {
                        memoryAvailable: memoryUsage.memFree.GB,
-                        percent: memoryUsage.memFree.percent,
+                        percent: String(memoryUsage.memFree.percent),
                      })}
                    </List.Item>
                    <List.Item className="health-monitoring-information-version" icon={<IconVersions size={30} />}>
@@ -159,10 +159,11 @@ export const SystemHealthMonitoring = ({
                        {t("widget.healthMonitoring.popover.minute")} {healthInfo.loadAverage["1min"]}%
                      </List.Item>
                      <List.Item className="health-monitoring-information-load-average-5min">
-                        {t("widget.healthMonitoring.popover.minutes", { count: 5 })} {healthInfo.loadAverage["5min"]}%
+                        {t("widget.healthMonitoring.popover.minutes", { count: "5" })} {healthInfo.loadAverage["5min"]}%
                      </List.Item>
                      <List.Item className="health-monitoring-information-load-average-15min">
-                        {t("widget.healthMonitoring.popover.minutes", { count: 15 })} {healthInfo.loadAverage["15min"]}%
+                        {t("widget.healthMonitoring.popover.minutes", { count: "15" })}{" "}
+                        {healthInfo.loadAverage["15min"]}%
                      </List.Item>
                    </List>
                  </List>
@@ -274,7 +275,12 @@ export const formatUptime = (uptimeInSeconds: number, t: TranslationFunction) =>
  const hours = uptimeDuration.hours();
  const minutes = uptimeDuration.minutes();

-  return t("widget.healthMonitoring.popover.uptime", { months, days, hours, minutes });
+  return t("widget.healthMonitoring.popover.uptime", {
+    months: String(months),
+    days: String(days),
+    hours: String(hours),
+    minutes: String(minutes),
+  });
 };

 export const progressColor = (percentage: number) => {
--- a/packages/widgets/src/media-transcoding/component.tsx
+++ b/packages/widgets/src/media-transcoding/component.tsx
@@ -95,9 +95,9 @@ export default function MediaTranscodingWidget({
              </Pagination.Root>
              <Text size="xs">
                {t("currentIndex", {
-                  start: transcodingData.data.queue.startIndex + 1,
-                  end: transcodingData.data.queue.endIndex + 1,
-                  total: transcodingData.data.queue.totalCount,
+                  start: String(transcodingData.data.queue.startIndex + 1),
+                  end: String(transcodingData.data.queue.endIndex + 1),
+                  total: String(transcodingData.data.queue.totalCount),
                })}
              </Text>
            </>
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -280,10 +280,10 @@ export function Notebook({ options, isEditMode, boardId, itemId }: WidgetCompone
          </RichTextEditor.ControlsGroup>

          <RichTextEditor.ControlsGroup>
-            <RichTextEditor.H1 title={tControls("heading", { level: 1 })} />
-            <RichTextEditor.H2 title={tControls("heading", { level: 2 })} />
-            <RichTextEditor.H3 title={tControls("heading", { level: 3 })} />
-            <RichTextEditor.H4 title={tControls("heading", { level: 4 })} />
+            <RichTextEditor.H1 title={tControls("heading", { level: "1" })} />
+            <RichTextEditor.H2 title={tControls("heading", { level: "2" })} />
+            <RichTextEditor.H3 title={tControls("heading", { level: "3" })} />
+            <RichTextEditor.H4 title={tControls("heading", { level: "4" })} />
          </RichTextEditor.ControlsGroup>

          <RichTextEditor.ControlsGroup>
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -75,7 +75,7 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
        {options.showCurrentWindSpeed && (
          <Group className="weather-current-wind-speed-group" wrap="nowrap" gap="xs">
            <IconWind size={16} />
-            <Text fz={16}>{t("currentWindSpeed", { currentWindSpeed: weather.current.windspeed })}</Text>
+            <Text fz={16}>{t("currentWindSpeed", { currentWindSpeed: String(weather.current.windspeed) })}</Text>
          </Group>
        )}
        <Group className="weather-max-min-temp-group" wrap="nowrap" gap="sm">
--- a/packages/widgets/src/weather/icon.tsx
+++ b/packages/widgets/src/weather/icon.tsx
@@ -94,8 +94,16 @@ export const WeatherDescription = ({
        <List.Item icon={<IconTemperatureMinus size={15} />}>{`${tCommon("information.min")}: ${minTemp}`}</List.Item>
        <List.Item icon={<IconSun size={15} />}>{`${t("dailyForecast.sunrise")}: ${sunrise}`}</List.Item>
        <List.Item icon={<IconMoon size={15} />}>{`${t("dailyForecast.sunset")}: ${sunset}`}</List.Item>
-        <List.Item icon={<IconWind size={15} />}>{t("dailyForecast.maxWindSpeed", { maxWindSpeed })}</List.Item>
-        <List.Item icon={<IconWind size={15} />}>{t("dailyForecast.maxWindGusts", { maxWindGusts })}</List.Item>
+        {maxWindSpeed !== undefined && (
+          <List.Item icon={<IconWind size={15} />}>
+            {t("dailyForecast.maxWindSpeed", { maxWindSpeed: String(maxWindSpeed) })}
+          </List.Item>
+        )}
+        {maxWindGusts !== undefined && (
+          <List.Item icon={<IconWind size={15} />}>
+            {t("dailyForecast.maxWindGusts", { maxWindGusts: String(maxWindGusts) })}
+          </List.Item>
+        )}
      </List>
    </Stack>
  );