feat(i18n): add Ukrainian language support and switcher (closes #351)

src/components/LanguageSwitcher.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+
+const languages = [
+  { code: "en", label: "English" },
+  { code: "uk", label: "Українська" },
+];
+
+export default function LanguageSwitcher() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const currentLang = pathname.split("/")[1] || "en";
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const newLang = event.target.value;
+
+    // Якщо шлях взагалі порожній (наприклад, просто /), то додаємо мову
+    if (!pathname) {
+      router.push(`/${newLang}`);
+      return;
+    }
+
+    const pathSegments = pathname.split("/");
+    pathSegments[1] = newLang;
+    const newPath = pathSegments.join("/");
+
+    router.push(newPath);
+  };
+
+  return (
+    <Select
+      value={currentLang}
+      onChange={handleChange}
+      size="small"
+      variant="outlined"
+      sx={{
+        minWidth: 120,
+        color: "inherit",
+        ".MuiOutlinedInput-notchedOutline": {
+          borderColor: "rgba(255, 255, 255, 0.5)",
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: "white",
+        },
+        ".MuiSvgIcon-root ": {
+          fill: "currentColor",
+        },
+      }}
+    >
+      {languages.map((lang) => (
+        <MenuItem key={lang.code} value={lang.code}>
+          {lang.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}

src/components/app-bar.tsx

@@ -20,6 +20,7 @@ import Link from "@/components/link";
 import { RoleEnum } from "@/services/api/types/role";
 import Divider from "@mui/material/Divider";
 import ThemeSwitchButton from "@/components/switch-theme-button";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 import { IS_SIGN_UP_ENABLED } from "@/services/auth/config";
 
 function ResponsiveAppBar() {
@@ -193,10 +194,13 @@ function ResponsiveAppBar() {
           <Box
             sx={{
               display: "flex",
-              mr: 1,
+              alignItems: "center",
+              gap: 2,
+              mr: 2,
             }}
           >
             <ThemeSwitchButton />
+            <LanguageSwitcher />
           </Box>
 
           {!isLoaded ? (

src/services/i18n/config.ts

@@ -1,5 +1,5 @@
 export const fallbackLanguage = "en" as const;
-export const languages = [fallbackLanguage] as const;
+export const languages = [fallbackLanguage, "uk"] as const;
 export const defaultNamespace = "common";
 export const cookieName = "i18next";
 

src/services/i18n/locales/uk/admin-panel-home.json

@@ -0,0 +1,4 @@
+{
+  "title": "Панель адміністратора",
+  "description": "Ласкаво просимо до панелі адміністратора."
+}

src/services/i18n/locales/uk/admin-panel-roles.json

@@ -0,0 +1,6 @@
+{
+  "role": {
+    "1": "Адміністратор",
+    "2": "Користувач"
+  }
+}

src/services/i18n/locales/uk/admin-panel-users-create.json

@@ -0,0 +1,61 @@
+{
+  "title": "Створити користувача",
+  "actions": {
+    "submit": "Зберегти",
+    "cancel": "Скасувати"
+  },
+  "inputs": {
+    "email": {
+      "label": "Email",
+      "validation": {
+        "invalid": "Недійсний email",
+        "required": "Email є обов'язковим",
+        "server": {
+          "emailAlreadyExists": "Такий email вже існує"
+        }
+      }
+    },
+    "firstName": {
+      "label": "Ім'я",
+      "validation": {
+        "required": "Ім'я є обов'язковим"
+      }
+    },
+    "lastName": {
+      "label": "Прізвище",
+      "validation": {
+        "required": "Прізвище є обов'язковим"
+      }
+    },
+    "role": {
+      "label": "Роль",
+      "validation": {
+        "required": "Роль є обов'язковою"
+      },
+      "options": {
+        "1": "Адміністратор",
+        "2": "Користувач"
+      }
+    },
+    "password": {
+      "label": "Пароль",
+      "validation": {
+        "required": "Пароль є обов'язковим",
+        "min": "Пароль має містити щонайменше 6 символів"
+      }
+    },
+    "passwordConfirmation": {
+      "label": "Підтвердження пароля",
+      "validation": {
+        "required": "Підтвердження пароля є обов'язковим",
+        "match": "Підтвердження пароля має збігатися з паролем"
+      }
+    },
+    "<system>": "Do not remove this property"
+  },
+  "alerts": {
+    "user": {
+      "success": "Профіль користувача успішно створено"
+    }
+  }
+}

src/services/i18n/locales/uk/admin-panel-users-edit.json

@@ -0,0 +1,65 @@
+{
+  "title1": "Редагувати користувача",
+  "title2": "Змінити пароль",
+  "actions": {
+    "submit": "Зберегти",
+    "cancel": "Скасувати"
+  },
+  "inputs": {
+    "email": {
+      "label": "Email",
+      "validation": {
+        "invalid": "Недійсний email",
+        "required": "Email є обов'язковим",
+        "server": {
+          "emailAlreadyExists": "Такий email вже існує"
+        }
+      }
+    },
+    "firstName": {
+      "label": "Ім'я",
+      "validation": {
+        "required": "Ім'я є обов'язковим"
+      }
+    },
+    "lastName": {
+      "label": "Прізвище",
+      "validation": {
+        "required": "Прізвище є обов'язковим"
+      }
+    },
+    "role": {
+      "label": "Роль",
+      "validation": {
+        "required": "Роль є обов'язковою"
+      },
+      "options": {
+        "1": "Адміністратор",
+        "2": "Користувач"
+      }
+    },
+    "password": {
+      "label": "Пароль",
+      "validation": {
+        "required": "Пароль є обов'язковим",
+        "min": "Пароль має містити щонайменше 6 символів"
+      }
+    },
+    "passwordConfirmation": {
+      "label": "Підтвердження пароля",
+      "validation": {
+        "required": "Підтвердження пароля є обов'язковим",
+        "match": "Підтвердження пароля має збігатися з паролем"
+      }
+    },
+    "<system>": "Do not remove this property"
+  },
+  "alerts": {
+    "password": {
+      "success": "Пароль успішно оновлено"
+    },
+    "user": {
+      "success": "Профіль користувача успішно оновлено"
+    }
+  }
+}

src/services/i18n/locales/uk/admin-panel-users.json

@@ -0,0 +1,36 @@
+{
+  "title": "Користувачі",
+  "table": {
+    "column1": "ID",
+    "column2": "Ім'я",
+    "column3": "Email",
+    "column4": "Роль"
+  },
+  "actions": {
+    "add": "Додати користувача",
+    "edit": "Редагувати",
+    "delete": "Видалити",
+    "create": "Створити користувача"
+  },
+  "confirm": {
+    "delete": {
+      "title": "Видалити користувача",
+      "message": "Ви впевнені, що хочете видалити цього користувача?"
+    }
+  },
+  "filter": {
+    "actions": {
+      "filter": "Фільтр",
+      "apply": "Застосувати"
+    },
+    "inputs": {
+      "role": {
+        "label": "Роль",
+        "options": {
+          "1": "Адміністратор",
+          "2": "Користувач"
+        }
+      }
+    }
+  }
+}

src/services/i18n/locales/uk/common.json

@@ -0,0 +1,40 @@
+{
+  "app-name": "ДОДАТОК",
+  "loading": "Завантаження...",
+  "navigation": {
+    "home": "Головна",
+    "signIn": "Увійти",
+    "signUp": "Зареєструватися",
+    "profile": "Профіль",
+    "users": "Користувачі",
+    "logout": "Вийти"
+  },
+  "formInputs": {
+    "avatarInput": {
+      "dropzoneText": "Перетягніть зображення сюди...",
+      "dragAndDrop": "Або перетягніть якесь зображення сюди",
+      "selectFile": "Виберіть зображення"
+    },
+    "multipleImageInput": {
+      "dropzoneText": "Перетягніть зображення сюди...",
+      "dragAndDrop": "Або перетягніть якісь зображення сюди",
+      "selectFile": "Виберіть зображення"
+    },
+    "singleImageInput": {
+      "dropzoneText": "Перетягніть зображення сюди...",
+      "dragAndDrop": "Або перетягніть якесь зображення сюди",
+      "selectFile": "Виберіть зображення"
+    }
+  },
+  "leavePage": {
+    "title": "Залишити цю сторінку?",
+    "message": "Зміни, які ви зробили, можуть бути не збережені",
+    "stay": "Залишитися на сторінці",
+    "leave": "Залишити сторінку"
+  },
+  "auth": {
+    "facebook": {
+      "action": "Увійти через Facebook"
+    }
+  }
+}

src/services/i18n/locales/uk/confirm-dialog.json

@@ -0,0 +1,8 @@
+{
+  "title": "Підтвердження",
+  "message": "Ви впевнені, що хочете виконати цю дію?",
+  "actions": {
+    "yes": "Так",
+    "no": "Ні"
+  }
+}

src/services/i18n/locales/uk/confirm-email.json

@@ -0,0 +1,5 @@
+{
+  "title": "Підтвердження Email",
+  "emailConfirmed": "Email було успішно підтверджено!",
+  "emailConfirmFailed": "Не вдалося підтвердити Email!"
+}

src/services/i18n/locales/uk/confirm-new-email.json

@@ -0,0 +1,5 @@
+{
+  "title": "Підтвердження нового Email",
+  "emailConfirmed": "Email було змінено!",
+  "emailConfirmFailed": "Не вдалося змінити адресу електронної пошти!"
+}

src/services/i18n/locales/uk/forgot-password.json

@@ -0,0 +1,21 @@
+{
+  "title": "Забули пароль",
+  "actions": {
+    "submit": "Надіслати посилання для скидання"
+  },
+  "inputs": {
+    "email": {
+      "label": "Email",
+      "validation": {
+        "required": "Email є обов'язковим",
+        "invalid": "Недійсний формат email",
+        "server": {
+          "emailNotExists": "Користувача з таким email не існує"
+        }
+      }
+    }
+  },
+  "alerts": {
+    "success": "Посилання для скидання пароля надіслано на ваш email"
+  }
+}

src/services/i18n/locales/uk/home.json

@@ -0,0 +1,4 @@
+{
+  "title": "Головна",
+  "description": "Ласкаво просимо до прикладу додатку reactjs-boilerplate. Повну документацію можна знайти <0>тут</0>."
+}

src/services/i18n/locales/uk/password-change.json

@@ -0,0 +1,29 @@
+{
+  "title": "Зміна пароля",
+  "actions": {
+    "submit": "Встановити новий пароль"
+  },
+  "inputs": {
+    "password": {
+      "label": "Пароль",
+      "validation": {
+        "required": "Пароль є обов'язковим",
+        "min": "Пароль має містити щонайменше 6 символів",
+        "server": {
+          "incorrectPassword": "Недійсний пароль"
+        }
+      }
+    },
+    "passwordConfirmation": {
+      "label": "Підтвердження пароля",
+      "validation": {
+        "required": "Підтвердження пароля є обов'язковим",
+        "match": "Підтвердження пароля має збігатися з паролем"
+      }
+    }
+  },
+  "alerts": {
+    "success": "Пароль успішно скинуто",
+    "expired": "Термін дії посилання для скидання пароля закінчився"
+  }
+}