feat: add next-international translations (#2)

* feat: add next-international translations
* chore: fix formatting
* chore: address pull request feedback

apps/nextjs/package.json

@@ -16,6 +16,7 @@
     "@alparr/api": "workspace:^0.1.0",
     "@alparr/auth": "workspace:^0.1.0",
     "@alparr/db": "workspace:^0.1.0",
+    "@alparr/translation": "workspace:^",
     "@alparr/ui": "workspace:^0.1.0",
     "@alparr/validation": "workspace:^0.1.0",
     "@mantine/core": "^7.3.1",

apps/nextjs/src/app/[locale]/_client-providers/next-international.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react";
+
+import { defaultLocale } from "@alparr/translation";
+import { I18nProviderClient } from "@alparr/translation/client";
+
+export const NextInternationalProvider = ({
+  children,
+  locale,
+}: PropsWithChildren<{ locale: string }>) => {
+  return (
+    <I18nProviderClient locale={locale} fallback={defaultLocale}>
+      {children}
+    </I18nProviderClient>
+  );
+};

apps/nextjs/src/app/[locale]/auth/login/_components/login-form.tsx

@@ -15,9 +15,11 @@ import { IconAlertTriangle } from "@tabler/icons-react";
 import type { z } from "zod";
 
 import { signIn } from "@alparr/auth/client";
+import { useScopedI18n } from "@alparr/translation/client";
 import { signInSchema } from "@alparr/validation";
 
 export const LoginForm = () => {
+  const t = useScopedI18n("user");
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>();
@@ -54,10 +56,16 @@ export const LoginForm = () => {
     <Stack gap="xl">
       <form onSubmit={form.onSubmit((v) => void handleSubmit(v))}>
         <Stack gap="lg">
-          <TextInput label="Username" {...form.getInputProps("name")} />
-          <PasswordInput label="Password" {...form.getInputProps("password")} />
+          <TextInput
+            label={t("field.username.label")}
+            {...form.getInputProps("name")}
+          />
+          <PasswordInput
+            label={t("field.password.label")}
+            {...form.getInputProps("password")}
+          />
           <Button type="submit" fullWidth loading={isLoading}>
-            Login
+            {t("action.login")}
           </Button>
         </Stack>
       </form>

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -1,19 +1,23 @@
 import { Card, Center, Stack, Text, Title } from "@mantine/core";
 
+import { getScopedI18n } from "@alparr/translation/server";
+
 import { LogoWithTitle } from "~/components/layout/logo";
 import { LoginForm } from "./_components/login-form";
 
-export default function Login() {
+export default async function Login() {
+  const t = await getScopedI18n("user.page.login");
+
   return (
     <Center>
       <Stack align="center" mt="xl">
         <LogoWithTitle />
         <Stack gap={6} align="center">
           <Title order={3} fw={400} ta="center">
-            Log in to your account
+            {t("title")}
           </Title>
           <Text size="sm" c="gray.5" ta="center">
-            Welcome back! Please enter your credentials
+            {t("subtitle")}
           </Text>
         </Stack>
         <Card bg="dark.8" w={64 * 6} maw="90vw">

apps/nextjs/src/app/[locale]/init/user/_components/init-user-form.tsx

@@ -5,6 +5,7 @@ import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
 import { useForm, zodResolver } from "@mantine/form";
 import type { z } from "zod";
 
+import { useScopedI18n } from "@alparr/translation/client";
 import { initUserSchema } from "@alparr/validation";
 
 import { showErrorNotification, showSuccessNotification } from "~/notification";
@@ -12,6 +13,7 @@ import { api } from "~/utils/api";
 
 export const InitUserForm = () => {
   const router = useRouter();
+  const t = useScopedI18n("user");
   const { mutateAsync, error, isPending } = api.user.initUser.useMutation();
   const form = useForm<FormType>({
     validate: zodResolver(initUserSchema),
@@ -20,7 +22,7 @@ export const InitUserForm = () => {
     initialValues: {
       username: "",
       password: "",
-      repeatPassword: "",
+      confirmPassword: "",
     },
   });
 
@@ -52,14 +54,20 @@ export const InitUserForm = () => {
         )}
       >
         <Stack gap="lg">
-          <TextInput label="Username" {...form.getInputProps("username")} />
-          <PasswordInput label="Password" {...form.getInputProps("password")} />
+          <TextInput
+            label={t("field.username.label")}
+            {...form.getInputProps("username")}
+          />
           <PasswordInput
-            label="Repeat password"
-            {...form.getInputProps("repeatPassword")}
+            label={t("field.password.label")}
+            {...form.getInputProps("password")}
+          />
+          <PasswordInput
+            label={t("field.passwordConfirm.label")}
+            {...form.getInputProps("confirmPassword")}
           />
           <Button type="submit" fullWidth loading={isPending}>
-            Create user
+            {t("action.create")}
           </Button>
         </Stack>
       </form>

apps/nextjs/src/app/[locale]/init/user/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from "next/navigation";
 import { Card, Center, Stack, Text, Title } from "@mantine/core";
 
 import { db } from "@alparr/db";
+import { getScopedI18n } from "@alparr/translation/server";
 
 import { LogoWithTitle } from "~/components/layout/logo";
 import { InitUserForm } from "./_components/init-user-form";
@@ -14,19 +15,21 @@ export default async function InitUser() {
   });
 
   if (firstUser) {
-    return notFound();
+    notFound();
   }
 
+  const t = await getScopedI18n("user.page.init");
+
   return (
     <Center>
       <Stack align="center" mt="xl">
         <LogoWithTitle />
         <Stack gap={6} align="center">
           <Title order={3} fw={400} ta="center">
-            New Alparr installation
+            {t("title")}
           </Title>
           <Text size="sm" c="gray.5" ta="center">
-            Please create the initial administator user.
+            {t("subtitle")}
           </Text>
         </Stack>
         <Card bg="dark.8" w={64 * 6} maw="90vw">

apps/nextjs/src/app/[locale]/layout.tsx

@@ -11,7 +11,8 @@ import { Notifications } from "@mantine/notifications";
 
 import { uiConfiguration } from "@alparr/ui";
 
-import { TRPCReactProvider } from "./providers";
+import { NextInternationalProvider } from "./_client-providers/next-international";
+import { TRPCReactProvider } from "./_client-providers/trpc";
 
 const fontSans = Inter({
   subsets: ["latin"],
@@ -30,7 +31,10 @@ export const metadata: Metadata = {
   description: "Simple monorepo with shared backend for web & mobile apps",
 };
 
-export default function Layout(props: { children: React.ReactNode }) {
+export default function Layout(props: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
   const colorScheme = "dark";
 
   return (
@@ -40,13 +44,15 @@ export default function Layout(props: { children: React.ReactNode }) {
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <TRPCReactProvider headers={headers()}>
-          <MantineProvider
-            defaultColorScheme={colorScheme}
-            {...uiConfiguration}
-          >
-            <Notifications />
-            {props.children}
-          </MantineProvider>
+          <NextInternationalProvider locale={props.params.locale}>
+            <MantineProvider
+              defaultColorScheme={colorScheme}
+              {...uiConfiguration}
+            >
+              <Notifications />
+              {props.children}
+            </MantineProvider>
+          </NextInternationalProvider>
         </TRPCReactProvider>
       </body>
     </html>

apps/nextjs/src/app/[locale]/loading.tsx

@@ -0,0 +1,9 @@
+import { Center, Loader } from "@mantine/core";
+
+export default function CommonLoading() {
+  return (
+    <Center h="100vh">
+      <Loader />
+    </Center>
+  );
+}

apps/nextjs/src/app/[locale]/not-found.tsx

@@ -0,0 +1,5 @@
+import { Center } from "@mantine/core";
+
+export default function CommonNotFound() {
+  return <Center h="100vh">404</Center>;
+}

apps/nextjs/src/middleware.ts

@@ -0,0 +1,11 @@
+import type { NextRequest } from "next/server";
+
+import { I18nMiddleware } from "@alparr/translation/middleware";
+
+export function middleware(request: NextRequest) {
+  return I18nMiddleware(request);
+}
+
+export const config = {
+  matcher: ["/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)"],
+};

packages/translation/index.ts

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

packages/translation/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@alparr/translation",
+  "private": true,
+  "version": "0.1.0",
+  "exports": {
+    ".": "./index.ts",
+    "./client": "./src/client.ts",
+    "./server": "./src/server.ts",
+    "./middleware": "./src/middleware.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "lint": "eslint .",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@alparr/eslint-config": "workspace:^0.2.0",
+    "@alparr/prettier-config": "workspace:^0.1.0",
+    "@alparr/tsconfig": "workspace:^0.1.0",
+    "eslint": "^8.53.0",
+    "typescript": "^5.3.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "@alparr/eslint-config/base"
+    ]
+  },
+  "prettier": "@alparr/prettier-config",
+  "dependencies": {
+    "next-international": "^1.1.4"
+  }
+}

packages/translation/src/client.ts

@@ -0,0 +1,8 @@
+"use client";
+
+import { createI18nClient } from "next-international/client";
+
+import { languageMapping } from "./lang";
+
+export const { useI18n, useScopedI18n, I18nProviderClient } =
+  createI18nClient(languageMapping());

packages/translation/src/index.ts

@@ -0,0 +1,4 @@
+export const supportedLanguages = ["en", "de"] as const;
+export type SupportedLanguage = (typeof supportedLanguages)[number];
+
+export const defaultLocale = "en";

packages/translation/src/lang.ts

@@ -0,0 +1,17 @@
+import { supportedLanguages } from ".";
+
+const enTranslations = () => import("./lang/en");
+
+export const languageMapping = () => {
+  const mapping: Record<string, unknown> = {};
+
+  for (const language of supportedLanguages) {
+    mapping[language] = () =>
+      import(`./lang/${language}`) as ReturnType<typeof enTranslations>;
+  }
+
+  return mapping as Record<
+    (typeof supportedLanguages)[number],
+    () => ReturnType<typeof enTranslations>
+  >;
+};

packages/translation/src/lang/de.ts

@@ -0,0 +1,29 @@
+export default {
+  user: {
+    page: {
+      login: {
+        title: "Melde dich bei deinem Konto an",
+        subtitle: "Willkommen zurück! Bitte gib deine Zugangsdaten ein",
+      },
+      init: {
+        title: "Neue Alparr Installation",
+        subtitle: "Bitte erstelle den initialen Administrator Benutzer",
+      },
+    },
+    field: {
+      username: {
+        label: "Benutzername",
+      },
+      password: {
+        label: "Passwort",
+      },
+      passwordConfirm: {
+        label: "Passwort bestätigen",
+      },
+    },
+    action: {
+      login: "Anmelden",
+      create: "Benutzer erstellen",
+    },
+  },
+} as const;

packages/translation/src/lang/en.ts

@@ -0,0 +1,29 @@
+export default {
+  user: {
+    page: {
+      login: {
+        title: "Log in to your account",
+        subtitle: "Welcome back! Please enter your credentials",
+      },
+      init: {
+        title: "New Alparr installation",
+        subtitle: "Please create the initial administator user",
+      },
+    },
+    field: {
+      username: {
+        label: "Username",
+      },
+      password: {
+        label: "Password",
+      },
+      passwordConfirm: {
+        label: "Confirm password",
+      },
+    },
+    action: {
+      login: "Login",
+      create: "Create user",
+    },
+  },
+} as const;

packages/translation/src/middleware.ts

@@ -0,0 +1,9 @@
+import { createI18nMiddleware } from "next-international/middleware";
+
+import { defaultLocale, supportedLanguages } from ".";
+
+export const I18nMiddleware = createI18nMiddleware({
+  locales: supportedLanguages,
+  defaultLocale,
+  urlMappingStrategy: "rewrite",
+});

packages/translation/src/server.ts

@@ -0,0 +1,6 @@
+import { createI18nServer } from "next-international/server";
+
+import { languageMapping } from "./lang";
+
+export const { getI18n, getScopedI18n, getStaticParams } =
+  createI18nServer(languageMapping());

packages/translation/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@alparr/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "src"],
+  "exclude": ["node_modules"]
+}

packages/validation/src/user.ts

@@ -7,10 +7,10 @@ export const initUserSchema = z
   .object({
     username: usernameSchema,
     password: passwordSchema,
-    repeatPassword: z.string(),
+    confirmPassword: z.string(),
   })
-  .refine((data) => data.password === data.repeatPassword, {
-    path: ["repeatPassword"],
+  .refine((data) => data.password === data.confirmPassword, {
+    path: ["confirmPassword"],
     message: "Passwords do not match",
   });
 

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       '@alparr/db':
         specifier: workspace:^0.1.0
         version: link:../../packages/db
+      '@alparr/translation':
+        specifier: workspace:^
+        version: link:../../packages/translation
       '@alparr/ui':
         specifier: workspace:^0.1.0
         version: link:../../packages/ui
@@ -301,6 +304,28 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
 
+  packages/translation:
+    dependencies:
+      next-international:
+        specifier: ^1.1.4
+        version: 1.1.4
+    devDependencies:
+      '@alparr/eslint-config':
+        specifier: workspace:^0.2.0
+        version: link:../../tooling/eslint
+      '@alparr/prettier-config':
+        specifier: workspace:^0.1.0
+        version: link:../../tooling/prettier
+      '@alparr/tsconfig':
+        specifier: workspace:^0.1.0
+        version: link:../../tooling/typescript
+      eslint:
+        specifier: ^8.53.0
+        version: 8.53.0
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+
   packages/ui:
     dependencies:
       '@mantine/core':
@@ -4395,6 +4420,10 @@ packages:
       side-channel: 1.0.4
     dev: false
 
+  /international-types@0.8.1:
+    resolution: {integrity: sha512-tajBCAHo4I0LIFlmQ9ZWfjMWVyRffzuvfbXCd6ssFt5u1Zw15DN0UBpVTItXdNa1ls+cpQt3Yw8+TxsfGF8JcA==}
+    dev: false
+
   /invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
     dependencies:
@@ -5070,6 +5099,14 @@ packages:
       react: 18.2.0
     dev: false
 
+  /next-international@1.1.4:
+    resolution: {integrity: sha512-peIJXXEC5lM7zZONCgN1uUxCkIHpSW1pZuHoRTp9ND14K7CDdHajDMz9RTxVCmQUGWXSaqruM6XVAuq4d+Gpxg==}
+    dependencies:
+      client-only: 0.0.1
+      international-types: 0.8.1
+      server-only: 0.0.1
+    dev: false
+
   /next-tick@1.1.0:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
     dev: true
@@ -6122,6 +6159,10 @@ packages:
       upper-case-first: 1.1.2
     dev: true
 
+  /server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+    dev: false
+
   /set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
     dev: false