feat(i18n): add locale dictionaries and pilot surfaces

src/app/(auth)/login/_components/login-form.tsx

@@ -6,9 +6,14 @@ import { useState } from "react"
 import { useForm } from "react-hook-form"
 import { signInAction } from "@/actions/auth.actions"
 import { Button } from "@/components/ui/button"
+import type { Dictionary } from "@/i18n/dictionaries"
 import { type SignInFormType, signInSchema } from "@/schemas/auth.schema"
 
-export default function SignInForm() {
+type SignInFormProps = {
+  copy: Dictionary["login"]
+}
+
+export default function SignInForm({ copy }: SignInFormProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
   const callbackUrl = searchParams.get("callbackUrl")
@@ -37,7 +42,7 @@ export default function SignInForm() {
   return (
     <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
       <label className="flex flex-col gap-1">
-        Username
+        {copy.usernameLabel}
         <input
           {...register("username")}
           name="username"
@@ -49,7 +54,7 @@ export default function SignInForm() {
         )}
       </label>
       <label className="flex flex-col gap-1">
-        Password
+        {copy.passwordLabel}
         <input
           {...register("password")}
           name="password"
@@ -61,7 +66,7 @@ export default function SignInForm() {
         )}
       </label>
       {error && <p className="text-error">{error}</p>}
-      <Button type="submit">Sign In</Button>
+      <Button type="submit">{copy.submitLabel}</Button>
     </form>
   )
 }

src/app/(auth)/login/page.tsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation"
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { getI18n } from "@/i18n/server"
 import { auth } from "@/lib/auth"
 
 import SignInForm from "./_components/login-form"
@@ -10,15 +11,20 @@ export default async function LoginPage() {
 
   if (session) redirect("/")
 
+  const { dictionary } = await getI18n()
+  const copy = dictionary.login
+
   return (
     <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
         <Card>
           <CardHeader>
-            <CardTitle>Sign In</CardTitle>
+            <CardTitle>
+              <h1>{copy.title}</h1>
+            </CardTitle>
           </CardHeader>
           <CardContent>
-            <SignInForm />
+            <SignInForm copy={copy} />
           </CardContent>
         </Card>
       </div>

src/app/(dashboard)/(home)/_components/card.tsx

@@ -3,11 +3,13 @@ import Link from "next/link"
 export default function Card({
   title,
   total,
+  countLabel,
   icon,
   href,
 }: {
   title: string
   total: number
+  countLabel: string
   icon: React.ReactNode
   href: string
 }) {
@@ -18,7 +20,9 @@ export default function Card({
           <div className="mr-4">{icon}</div>
           <div>
             <h3 className="text-lg font-medium">{title}</h3>
-            <p className="text-muted-foreground mt-2 text-sm">Total: {total}</p>
+            <p className="text-muted-foreground mt-2 text-sm">
+              {countLabel}: {total}
+            </p>
           </div>
         </div>
       </div>

src/app/(dashboard)/(home)/page.tsx

@@ -1,3 +1,4 @@
+import { getI18n } from "@/i18n/server"
 import { AssetService } from "@/services/asset.service"
 import { ItemService } from "@/services/item.service"
 import { RecipientService } from "@/services/recipient.service"
@@ -5,17 +6,20 @@ import { RecipientService } from "@/services/recipient.service"
 import Card from "./_components/card"
 
 export default async function Home() {
+  const { dictionary } = await getI18n()
+  const copy = dictionary.dashboardHome
   const totalItems = await ItemService.findAllItemsCount()
   const totalAssets = await AssetService.findAllAssetsCount()
   const totalRecipients = await RecipientService.findAllRecipientsCount()
 
   return (
     <div className="container mx-auto p-4">
-      <h1 className="mb-4 text-2xl font-bold">Dashboard</h1>
+      <h1 className="mb-4 text-2xl font-bold">{copy.heading}</h1>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
         <Card
-          title="Total Items"
+          title={copy.cards.items.title}
           total={totalItems}
+          countLabel={copy.cards.items.countLabel}
           href="/inventory/items"
           icon={
             <svg
@@ -37,8 +41,9 @@ export default async function Home() {
           }
         />
         <Card
-          title="Total Assets"
+          title={copy.cards.assets.title}
           total={totalAssets}
+          countLabel={copy.cards.assets.countLabel}
           href="/inventory/assets"
           icon={
             <svg
@@ -60,8 +65,9 @@ export default async function Home() {
           }
         />
         <Card
-          title="Total Recipients"
+          title={copy.cards.recipients.title}
           total={totalRecipients}
+          countLabel={copy.cards.recipients.countLabel}
           href="/recipients"
           icon={
             <svg

src/app/layout.tsx

@@ -2,6 +2,7 @@ import "@/styles/globals.css"
 
 import type { Metadata } from "next"
 import { Geist, Geist_Mono } from "next/font/google"
+import { getI18n } from "@/i18n/server"
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -18,13 +19,15 @@ export const metadata: Metadata = {
   description: "Manage your inventory with ease",
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  const { locale } = await getI18n()
+
   return (
-    <html lang="en">
+    <html lang={locale}>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

src/i18n/dictionaries/en.ts

@@ -0,0 +1,27 @@
+export const en = {
+  login: {
+    title: "Sign In",
+    usernameLabel: "Username",
+    passwordLabel: "Password",
+    submitLabel: "Sign In",
+  },
+  dashboardHome: {
+    heading: "Dashboard",
+    cards: {
+      items: {
+        title: "Total Items",
+        countLabel: "Total",
+      },
+      assets: {
+        title: "Total Assets",
+        countLabel: "Total",
+      },
+      recipients: {
+        title: "Total Recipients",
+        countLabel: "Total",
+      },
+    },
+  },
+}
+
+export type Dictionary = typeof en

src/i18n/dictionaries/es.ts

@@ -0,0 +1,27 @@
+import type { Dictionary } from "./en"
+
+export const es = {
+  login: {
+    title: "Iniciar sesión",
+    usernameLabel: "Usuario",
+    passwordLabel: "Contraseña",
+    submitLabel: "Iniciar sesión",
+  },
+  dashboardHome: {
+    heading: "Panel de control",
+    cards: {
+      items: {
+        title: "Total de artículos",
+        countLabel: "Total",
+      },
+      assets: {
+        title: "Total de activos",
+        countLabel: "Total",
+      },
+      recipients: {
+        title: "Total de destinatarios",
+        countLabel: "Total",
+      },
+    },
+  },
+} satisfies Dictionary

src/i18n/dictionaries/index.ts

@@ -0,0 +1,15 @@
+import type { Locale } from "../locales"
+
+import { type Dictionary, en } from "./en"
+import { es } from "./es"
+
+export type { Dictionary }
+
+export const dictionaries = {
+  en,
+  es,
+} satisfies Record<Locale, Dictionary>
+
+export function getDictionary(locale: Locale): Dictionary {
+  return dictionaries[locale]
+}

src/i18n/locales.ts

@@ -0,0 +1,21 @@
+export const SUPPORTED_LOCALES = ["en", "es"] as const
+
+export type Locale = (typeof SUPPORTED_LOCALES)[number]
+
+export const FALLBACK_LOCALE: Locale = "en"
+export const DEFAULT_LOCALE_ENV_VAR = "STOCK_MANAGER_DEFAULT_LOCALE"
+export const LOCALE_COOKIE_NAME = "stock-manager-locale"
+
+export function isLocale(value: unknown): value is Locale {
+  return (
+    typeof value === "string" && SUPPORTED_LOCALES.includes(value as Locale)
+  )
+}
+
+export function resolveDefaultLocale(value: unknown): Locale {
+  return isLocale(value) ? value : FALLBACK_LOCALE
+}
+
+export function resolveLocale(value: unknown, fallback: Locale): Locale {
+  return isLocale(value) ? value : fallback
+}

src/i18n/server.ts

@@ -0,0 +1,27 @@
+import "server-only"
+
+import { cookies } from "next/headers"
+
+import { getDictionary } from "./dictionaries"
+import {
+  DEFAULT_LOCALE_ENV_VAR,
+  LOCALE_COOKIE_NAME,
+  resolveDefaultLocale,
+  resolveLocale,
+} from "./locales"
+
+export async function getI18n() {
+  const cookieStore = await cookies()
+  const defaultLocale = resolveDefaultLocale(
+    process.env[DEFAULT_LOCALE_ENV_VAR],
+  )
+  const locale = resolveLocale(
+    cookieStore.get(LOCALE_COOKIE_NAME)?.value,
+    defaultLocale,
+  )
+
+  return {
+    locale,
+    dictionary: getDictionary(locale),
+  }
+}