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]/_client-providers/trpc.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
+import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
+import superjson from "superjson";
+
+import { env } from "~/env.mjs";
+import { api } from "~/utils/api";
+
+const getBaseUrl = () => {
+  if (typeof window !== "undefined") return ""; // browser should use relative url
+  if (env.VERCEL_URL) return env.VERCEL_URL; // SSR should use vercel url
+
+  return `http://localhost:${env.PORT}`; // dev SSR should use localhost
+};
+
+export function TRPCReactProvider(props: {
+  children: React.ReactNode;
+  headers?: Headers;
+}) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 1000,
+          },
+        },
+      }),
+  );
+
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      transformer: superjson,
+      links: [
+        loggerLink({
+          enabled: (opts) =>
+            process.env.NODE_ENV === "development" ||
+            (opts.direction === "down" && opts.result instanceof Error),
+        }),
+        unstable_httpBatchStreamLink({
+          url: `${getBaseUrl()}/api/trpc`,
+          headers() {
+            const headers = new Map(props.headers);
+            headers.set("x-trpc-source", "nextjs-react");
+            return Object.fromEntries(headers);
+          },
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryStreamedHydration transformer={superjson}>
+          {props.children}
+        </ReactQueryStreamedHydration>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </api.Provider>
+  );
+}

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

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Alert,
+  Button,
+  PasswordInput,
+  rem,
+  Stack,
+  TextInput,
+} from "@mantine/core";
+import { useForm, zodResolver } from "@mantine/form";
+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>();
+  const form = useForm<FormType>({
+    validate: zodResolver(signInSchema),
+    initialValues: {
+      name: "",
+      password: "",
+    },
+  });
+
+  const handleSubmit = async (values: FormType) => {
+    setIsLoading(true);
+    setError(undefined);
+    await signIn("credentials", {
+      ...values,
+      redirect: false,
+      callbackUrl: "/",
+    })
+      .then((response) => {
+        if (!response?.ok) {
+          throw response?.error;
+        }
+
+        void router.push("/");
+      })
+      .catch((error: Error | string) => {
+        setIsLoading(false);
+        setError(error.toString());
+      });
+  };
+
+  return (
+    <Stack gap="xl">
+      <form onSubmit={form.onSubmit((v) => void handleSubmit(v))}>
+        <Stack gap="lg">
+          <TextInput
+            label={t("field.username.label")}
+            {...form.getInputProps("name")}
+          />
+          <PasswordInput
+            label={t("field.password.label")}
+            {...form.getInputProps("password")}
+          />
+          <Button type="submit" fullWidth loading={isLoading}>
+            {t("action.login")}
+          </Button>
+        </Stack>
+      </form>
+
+      {error && (
+        <Alert icon={<IconAlertTriangle size={rem(16)} />} color="red">
+          {error}
+        </Alert>
+      )}
+    </Stack>
+  );
+};
+
+type FormType = z.infer<typeof signInSchema>;

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

@@ -0,0 +1,29 @@
+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 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">
+            {t("title")}
+          </Title>
+          <Text size="sm" c="gray.5" ta="center">
+            {t("subtitle")}
+          </Text>
+        </Stack>
+        <Card bg="dark.8" w={64 * 6} maw="90vw">
+          <LoginForm />
+        </Card>
+      </Stack>
+    </Center>
+  );
+}

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

@@ -0,0 +1,78 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+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";
+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),
+    validateInputOnBlur: true,
+    validateInputOnChange: true,
+    initialValues: {
+      username: "",
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const handleSubmit = async (values: FormType) => {
+    console.log(values);
+    await mutateAsync(values, {
+      onSuccess: () => {
+        showSuccessNotification({
+          title: "User created",
+          message: "You can now log in",
+        });
+        router.push("/auth/login");
+      },
+      onError: () => {
+        showErrorNotification({
+          title: "User creation failed",
+          message: error?.message ?? "Unknown error",
+        });
+      },
+    });
+  };
+
+  return (
+    <Stack gap="xl">
+      <form
+        onSubmit={form.onSubmit(
+          (v) => void handleSubmit(v),
+          (err) => console.log(err),
+        )}
+      >
+        <Stack gap="lg">
+          <TextInput
+            label={t("field.username.label")}
+            {...form.getInputProps("username")}
+          />
+          <PasswordInput
+            label={t("field.password.label")}
+            {...form.getInputProps("password")}
+          />
+          <PasswordInput
+            label={t("field.passwordConfirm.label")}
+            {...form.getInputProps("confirmPassword")}
+          />
+          <Button type="submit" fullWidth loading={isPending}>
+            {t("action.create")}
+          </Button>
+        </Stack>
+      </form>
+    </Stack>
+  );
+};
+
+type FormType = z.infer<typeof initUserSchema>;

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

@@ -0,0 +1,41 @@
+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";
+
+export default async function InitUser() {
+  const firstUser = await db.query.users.findFirst({
+    columns: {
+      id: true,
+    },
+  });
+
+  if (firstUser) {
+    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">
+            {t("title")}
+          </Title>
+          <Text size="sm" c="gray.5" ta="center">
+            {t("subtitle")}
+          </Text>
+        </Stack>
+        <Card bg="dark.8" w={64 * 6} maw="90vw">
+          <InitUserForm />
+        </Card>
+      </Stack>
+    </Center>
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+import "@mantine/core/styles.css";
+import "@mantine/dates/styles.css";
+import "@mantine/notifications/styles.css";
+
+import { headers } from "next/headers";
+import { ColorSchemeScript, MantineProvider } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
+
+import { uiConfiguration } from "@alparr/ui";
+
+import { NextInternationalProvider } from "./_client-providers/next-international";
+import { TRPCReactProvider } from "./_client-providers/trpc";
+
+const fontSans = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+/**
+ * Since we're passing `headers()` to the `TRPCReactProvider` we need to
+ * make the entire app dynamic. You can move the `TRPCReactProvider` further
+ * down the tree (e.g. /dashboard and onwards) to make part of the app statically rendered.
+ */
+export const dynamic = "force-dynamic";
+
+export const metadata: Metadata = {
+  title: "Create T3 Turbo",
+  description: "Simple monorepo with shared backend for web & mobile apps",
+};
+
+export default function Layout(props: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  const colorScheme = "dark";
+
+  return (
+    <html lang="en">
+      <head>
+        <ColorSchemeScript defaultColorScheme={colorScheme} />
+      </head>
+      <body className={["font-sans", fontSans.variable].join(" ")}>
+        <TRPCReactProvider headers={headers()}>
+          <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/app/[locale]/page.tsx

@@ -0,0 +1,22 @@
+import { Button, Stack, Title } from "@mantine/core";
+
+import { auth } from "@alparr/auth";
+import { db } from "@alparr/db";
+
+export default async function HomePage() {
+  const currentSession = await auth();
+  const users = await db.query.users.findMany();
+
+  return (
+    <Stack>
+      <Title>Home</Title>
+      <Button>Test</Button>
+      <pre>{JSON.stringify(users)}</pre>
+      {currentSession && (
+        <span>
+          Currently logged in as <b>{currentSession.user.name}</b>
+        </span>
+      )}
+    </Stack>
+  );
+}