Internationalization + Finnish language (#181)

* I18n with next-intl

* package-lock

* Finnish translations

* Development fix

* Use locale for positioning currency symbol

* Translations: Expenses.ActiveUserModal

* Translations: group 404

* Better translation for ExpenseCard

* Apply translations in CategorySelect search

* Fix for Finnish translation

* Translations for ExpenseDocumentsInput

* Translations for CreateFromReceipt

* Fix for Finnish translation

* Translations for schema errors

* Fix for Finnish translation

* Fixes for Finnish translations

* Prettier

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

src/components/ui/form.tsx

@@ -12,6 +12,7 @@ import {
 
 import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
+import { useMessages } from "next-intl"
 
 const Form = FormProvider
 
@@ -144,8 +145,18 @@ const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
+  const messages = useMessages()
   const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  let body
+  if (error) {
+    body = String(error?.message)
+    const translation = (messages.SchemaErrors as any)[body]
+    if (translation) {
+      body = translation
+    }
+  } else {
+    body = children
+  }
 
   if (!body) {
     return null

src/components/ui/search-bar.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
+import { useTranslations } from 'next-intl'
 import { Search, XCircle } from 'lucide-react'
 
 export interface InputProps
@@ -11,6 +12,7 @@ export interface InputProps
 
 const SearchBar = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, onValueChange, ...props }, ref) => {
+    const t = useTranslations('Expenses')
     const [value, _setValue] = React.useState('')
 
     const setValue = (v: string) => {
@@ -28,7 +30,7 @@ const SearchBar = React.forwardRef<HTMLInputElement, InputProps>(
             className,
           )}
           ref={ref}
-          placeholder="Search for an expense…"
+          placeholder={t("searchPlaceholder")}
           value={value}
           onChange={(e) => setValue(e.target.value)}
           {...props}