feat: add next-international translations (#2)

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

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).*)"],
+};