feat(i18n): add custom translations & support remote translations

apps/remote-dom-demo/src/app/host/layout.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { LoadingMessage } from "@/app/_components/LoadingMessage";
 import { getHostPath, getRemotePath } from "@/app/_lib/navigation";
-import { IntlProvider } from "@mittwald/flow-react-components";
 import { RemoteRenderer } from "@mittwald/flow-remote-react-renderer";
 import { usePathname, useRouter } from "next/navigation";
 import { useRef, useState } from "react";
+import { IntlProvider } from "@mittwald/flow-react-components";
 
 export default function HostPage() {
   const router = useRouter();
@@ -14,7 +14,7 @@ export default function HostPage() {
   const [isNavigating, setIsNavigating] = useState(false);
 
   return (
-    <IntlProvider locale="en-US">
+    <IntlProvider locale="de-DE">
       {isNavigating && <LoadingMessage />}
       <RemoteRenderer
         onNavigationStateChanged={(state) => {
@@ -32,8 +32,8 @@ export default function HostPage() {
             userId: "user-id",
             appInstallationId: "appi-id",
             customerId: "customer-id",
+            language: "de-DE",
             projectId: "project-id",
-            language: "en-US",
           }),
           getSessionToken: async () => "session-token",
         }}

apps/remote-dom-demo/src/app/remote/react-hook-form/page.tsx

@@ -16,6 +16,7 @@ import {
   PasswordCreationField,
   Autocomplete,
   CheckboxGroup,
+  TranslationProvider,
   Checkbox,
 } from "@mittwald/flow-remote-react-components";
 import {
@@ -95,11 +96,21 @@ export default function Page() {
             <Label>Name</Label>
           </TextField>
         </Field>
-        <Field name="email">
-          <TextField>
-            <Label>E-Mail</Label>
-          </TextField>
-        </Field>
+        <TranslationProvider
+          translations={{
+            "de-DE": {
+              Label: {
+                optional: "(Translated via TranslationProvider -Optional-)",
+              },
+            },
+          }}
+        >
+          <Field name="email">
+            <TextField>
+              <Label>E-Mail</Label>
+            </TextField>
+          </Field>
+        </TranslationProvider>
         <Field
           name="account"
           rules={{

packages/components/dev/vite/viteI18nPlugin.test.ts

@@ -80,11 +80,15 @@ describe("vite i18n plugin", () => {
       expect(load).toBeDefined();
       expect(load.code).toBeDefined();
       expect(load.code).toMatch(
-        'export default {"bar": {  "bar": (args) => `test with variable ${args.var}`,\n' +
-          '  "bar.simple": `test simple variable`,\n' +
-          '},"foo": {  "foo": (args) => `bar ${args.var}`,\n' +
-          '  "foo.simple": `test simple variable`,\n' +
-          "}};",
+        'export default {"bar":{\n' +
+          '  "bar": "test with variable {var}",\n' +
+          '  "bar.simple": "test simple variable"\n' +
+          "}\n" +
+          ',"foo":{\n' +
+          '  "foo": "bar {var}",\n' +
+          '  "foo.simple": "test simple variable"\n' +
+          "}\n" +
+          "};",
       );
     }
   });
@@ -116,9 +120,11 @@ describe("vite i18n plugin", () => {
       expect(load).toBeDefined();
       expect(load.code).toBeDefined();
       expect(load.code).toMatch(
-        'export default {"bar": {  "bar": (args) => `test with variable ${args.var}`,\n' +
-          '  "bar.simple": `test simple variable`,\n' +
-          "}};",
+        'export default {"bar":{\n' +
+          '  "bar": "test with variable {var}",\n' +
+          '  "bar.simple": "test simple variable"\n' +
+          "}\n" +
+          "};",
       );
     }
   });

packages/components/dev/vite/viteI18nPlugin.ts

@@ -2,7 +2,6 @@ import type { Plugin } from "vite";
 import path from "path";
 import { readdirSync, readFileSync } from "fs";
 import crypt from "crypto";
-import { compileStrings } from "@internationalized/string-compiler";
 
 export const moduleSuffix = ".locale.json";
 export const moduleId = `\x00${moduleSuffix}@`;
@@ -20,15 +19,6 @@ export const generateVirtualFileId = (filePath: string): string => {
   return `${moduleId}${virtualFileId}`;
 };
 
-const compileLocalString = (localesString: string): string => {
-  return (
-    compileStrings(JSON.parse(localesString))
-      // we create our own virtual file, so we
-      // don't need the export from compileStrings
-      .replace("module.exports =", "")
-  );
-};
-
 const generateComponentIntlContent = (
   filePath: string,
   languageKey: string,
@@ -42,13 +32,11 @@ const generateComponentIntlContent = (
       const match = filePath.match(importPathInfosRegEx);
 
       const fileContent = readFileSync(filePath, "utf8");
-      langObject.push(
-        `"${match && match[3]}":${compileLocalString(fileContent)}`,
-      );
+      langObject.push(`"${match && match[3]}":${fileContent}`);
     });
   } else {
     const fileContent = readFileSync(filePath, "utf8");
-    langObject.push(`"${languageKey}":${compileLocalString(fileContent)}`);
+    langObject.push(`"${languageKey}":${fileContent}`);
   }
 
   return `{${langObject.join(",")}}`;

packages/components/package.json

@@ -58,7 +58,7 @@
   "dependencies": {
     "@codemirror/language": "^6.12.2",
     "@codemirror/lint": "^6.9.5",
-    "@internationalized/string-compiler": "^3.2.6",
+    "@internationalized/string": "^3.2.7",
     "@lezer/highlight": "^1.2.3",
     "@mittwald/flow-icons": "workspace:*",
     "@mittwald/password-tools-js": "3.0.0-alpha.18",
@@ -67,6 +67,7 @@
     "@react-aria/form": "^3.1.3",
     "@react-aria/live-announcer": "^3.4.4",
     "@react-aria/utils": "^3.32.0",
+    "@react-aria/i18n": "^3.12.16",
     "@react-stately/form": "^3.2.2",
     "@react-types/shared": "^3.32.1",
     "@replit/codemirror-indentation-markers": "^6.5.3",
@@ -83,9 +84,11 @@
     "clsx": "^2.1.1",
     "context": "^3.0.33",
     "copy-to-clipboard": "^3.3.3",
+    "country-codes-list": "^2.0.0",
     "dot-prop": "^10.1.0",
     "framer-motion": "^12.29.3",
     "html-react-parser": "^5.2.15",
+    "intl-messageformat": "^11.2.0",
     "invariant": "^2.2.4",
     "luxon": "^3.7.2",
     "mobx": "^6.15.0",

packages/components/src/components/Action/lib/ariaLive.ts

@@ -1,4 +1,4 @@
-import { useLocalizedStringFormatter } from "react-aria";
+import { useLocalizedStringFormatter } from "@/components/TranslationProvider/useLocalizedStringFormatter";
 import locales from "../locales/*.locale.json";
 import { useEffect } from "react";
 import type { ActionStateValue } from "@/components/Action/models/ActionState";
@@ -14,7 +14,7 @@ export const useAriaAnnounceActionState = (
   actionState: ActionStateValue,
   options: Options = {},
 ): void => {
-  const formatter = useLocalizedStringFormatter(locales);
+  const formatter = useLocalizedStringFormatter(locales, "AriaAnnounce");
 
   const {
     isPendingText = formatter.format("action.isPending"),
@@ -34,7 +34,7 @@ export const useAriaAnnounceActionState = (
 };
 
 export const useAriaAnnounceSuspense = () => {
-  const formatter = useLocalizedStringFormatter(locales);
+  const formatter = useLocalizedStringFormatter(locales, "AriaAnnounce");
 
   useEffect(() => {
     const timeout = setTimeout(() => {

packages/components/src/components/AlertIcon/AlertIcon.tsx

@@ -7,7 +7,7 @@ import {
   IconWarning,
 } from "@/components/Icon/components/icons";
 import locales from "./locales/*.locale.json";
-import { useLocalizedStringFormatter } from "react-aria";
+import { useLocalizedStringFormatter } from "@/components/TranslationProvider/useLocalizedStringFormatter";
 import type { Status } from "@/lib/types/props";
 import type { IconProps } from "@/components/Icon";
 
@@ -25,13 +25,13 @@ const icons: Record<Status, ComponentType> = {
 export const AlertIcon: FC<AlertIconProps> = (props) => {
   const { status = "info", ...rest } = props;
 
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "AlertIcon");
 
   const Icon = icons[status];
 
   const iconProps: IconProps = {
     status,
-    "aria-label": stringFormatter.format(`alertIcon.${status}`),
+    "aria-label": stringFormatter.format(`status.${status}`),
     ...rest,
   };
 

packages/components/src/components/AlertIcon/locales/de-DE.locale.json

@@ -1,7 +1,7 @@
 {
-  "alertIcon.danger": "Status \"Fehler\"",
-  "alertIcon.info": "Status \"Information\"",
-  "alertIcon.success": "Status \"Erfolg\"",
-  "alertIcon.unavailable": "Status \"Nicht verfügbar\"",
-  "alertIcon.warning": "Status \"Warnung\""
+  "status.danger": "Status \"Fehler\"",
+  "status.info": "Status \"Information\"",
+  "status.success": "Status \"Erfolg\"",
+  "status.unavailable": "Status \"Nicht verfügbar\"",
+  "status.warning": "Status \"Warnung\""
 }

packages/components/src/components/AlertIcon/locales/en-US.locale.json

@@ -1,7 +1,7 @@
 {
-  "alertIcon.danger": "Status \"error\"",
-  "alertIcon.info": "Status \"information\"",
-  "alertIcon.success": "Status \"success\"",
-  "alertIcon.unavailable": "Status \"unavailable\"",
-  "alertIcon.warning": "Status \"warning\""
+  "status.danger": "Status \"error\"",
+  "status.info": "Status \"information\"",
+  "status.success": "Status \"success\"",
+  "status.unavailable": "Status \"unavailable\"",
+  "status.warning": "Status \"warning\""
 }

packages/components/src/components/Badge/Badge.tsx

@@ -12,7 +12,7 @@ import { flowComponent } from "@/lib/componentFactory/flowComponent";
 import type { PressEvent } from "@react-types/shared";
 import { Button } from "@/components/Button";
 import { IconClose } from "@/components/Icon/components/icons";
-import { useLocalizedStringFormatter } from "react-aria";
+import { useLocalizedStringFormatter } from "@/components/TranslationProvider/useLocalizedStringFormatter";
 import locales from "./locales/*.locale.json";
 
 export const badgeColors = [
@@ -54,7 +54,7 @@ export const Badge = flowComponent("Badge", (props) => {
     ...rest
   } = props;
 
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "Badge");
 
   const rootClassName = clsx(
     styles.badge,
@@ -109,7 +109,7 @@ export const Badge = flowComponent("Badge", (props) => {
             variant="plain"
             onPress={onClose}
             isDisabled={isDisabled}
-            aria-label={stringFormatter.format("badge.remove")}
+            aria-label={stringFormatter.format("remove")}
           >
             <IconClose />
           </Button>

packages/components/src/components/Badge/locales/de-DE.locale.json

@@ -1,3 +1,3 @@
 {
-  "badge.remove": "Entfernen"
+  "remove": "Entfernen"
 }

packages/components/src/components/Badge/locales/en-US.locale.json

@@ -1,3 +1,3 @@
 {
-  "badge.remove": "Remove"
+  "remove": "Remove"
 }

packages/components/src/components/ComboBox/ComboBox.tsx

@@ -10,7 +10,7 @@ import { PropsContextProvider } from "@/lib/propsContext";
 import clsx from "clsx";
 import styles from "./ComboBox.module.scss";
 import locales from "./locales/*.locale.json";
-import { useLocalizedStringFormatter } from "react-aria";
+import { useLocalizedStringFormatter } from "@/components/TranslationProvider/useLocalizedStringFormatter";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
 import { useOverlayController } from "@/lib/controller";
@@ -48,7 +48,7 @@ export const ComboBox = flowComponent("ComboBox", (props) => {
     fieldPropsContext,
   } = useFieldComponent(props);
 
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "ComboBox");
 
   const rootClassName = clsx(fieldProps.className, styles.comboBox, className);
 
@@ -89,7 +89,7 @@ export const ComboBox = flowComponent("ComboBox", (props) => {
               <Aria.Input placeholder={placeholder} ref={ref} />
               <Button
                 className={styles.toggle}
-                aria-label={stringFormatter.format("comboBox.showOptions")}
+                aria-label={stringFormatter.format("showOptions")}
                 variant="plain"
                 color="secondary"
               >

packages/components/src/components/ComboBox/locales/de-DE.locale.json

@@ -1,3 +1,3 @@
 {
-  "comboBox.showOptions": "Auswahlmöglichkeiten anzeigen"
+  "showOptions": "Auswahlmöglichkeiten anzeigen"
 }

packages/components/src/components/ComboBox/locales/en-US.locale.json

@@ -1,3 +1,3 @@
 {
-  "comboBox.showOptions": "Show options"
+  "showOptions": "Show options"
 }

packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.tsx

@@ -4,7 +4,7 @@ import { OverlayTrigger } from "@/components/OverlayTrigger";
 import type { PropsContext } from "@/lib/propsContext";
 import { PropsContextProvider } from "@/lib/propsContext";
 import locales from "./locales/*.locale.json";
-import { useLocalizedStringFormatter } from "react-aria";
+import { useLocalizedStringFormatter } from "@/components/TranslationProvider/useLocalizedStringFormatter";
 import { IconInfo } from "@/components/Icon/components/icons";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
 
@@ -15,13 +15,14 @@ export const ContextualHelpTrigger = flowComponent(
   "ContextualHelpTrigger",
   (props) => {
     const { children, ...triggerProps } = props;
-    const stringFormatter = useLocalizedStringFormatter(locales);
+    const stringFormatter = useLocalizedStringFormatter(
+      locales,
+      "ContextualHelpTrigger",
+    );
 
     const propsContext: PropsContext = {
       Button: {
-        "aria-label": stringFormatter.format(
-          "contextualHelpButton.moreInformation",
-        ),
+        "aria-label": stringFormatter.format("moreInformation"),
         children: <IconInfo />,
         size: "s",
         variant: "plain",

packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/locales/de-DE.locale.json

@@ -1,3 +1,3 @@
 {
-  "contextualHelpButton.moreInformation": "Weitere Informationen"
+  "moreInformation": "Weitere Informationen"
 }

packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/locales/en-US.locale.json

@@ -1,3 +1,3 @@
 {
-  "contextualHelpButton.moreInformation": "More information"
+  "moreInformation": "More information"
 }