feat: add i18n, localization: starts with layout + boards, fix: bugs

.husky/pre-commit

@@ -1,4 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
 yarn lint-staged

package.json

@@ -28,15 +28,17 @@
     "@unhead/vue": "^1.9.14",
     "@vee-validate/zod": "^4.13.1",
     "@vueuse/core": "^10.11.0",
-    "@vueuse/integrations": "^10.11.0",
+    "@vueuse/integrations": "^10.10.0",
     "axios": "^1.7.2",
     "chart.js": "^4.4.3",
     "floating-vue": "^5.2.2",
     "lucide-vue-next": "^0.396.0",
     "pinia": "^2.1.7",
     "splitpanes": "^3.1.5",
+    "universal-cookie": "^6.1.3",
     "vee-validate": "^4.13.1",
     "vue": "^3.4.29",
+    "vue-i18n": "9",
     "vue-router": "^4.3.3",
     "vue-sonner": "^1.1.3",
     "zod": "^3.23.8"

src/app/index.ts

@@ -2,6 +2,8 @@ import { createApp } from 'vue';
 import { router, pinia } from './providers';
 import { createHead } from '@unhead/vue';
 import App from './App.vue';
+import i18n from '@/shared/lib/i18n';
+
 import './styles/primary/index.scss';
 import 'floating-vue/dist/style.css';
 
@@ -14,6 +16,7 @@ const head = createHead();
 
 app.use(pinia);
 app.use(router);
+app.use(i18n);
 app.use(head);
 app.use(autoAnimatePlugin);
 app.directive('tooltip', vTooltip);

src/entities/board/ui/BoardPreviewCard.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import type { UserType } from '@/entities/user/model';
-import type { BoardPreview } from '../model';
 import { UserAvatar } from '@/entities/user';
-import { computed } from 'vue';
+import type { BoardPreview } from '../model';
 
 defineProps<{
   board: BoardPreview;
 }>();
 
+const { t } = useI18n();
+
 const userPosition = computed(() => {
   return (board: BoardPreview, user: UserType) => {
     return (board.users.length - 1 - +user._id!) * 12;
@@ -21,7 +24,7 @@ const userPosition = computed(() => {
       <span class="text-xs">{{ board.description }}</span>
     </div>
     <div :class="$style.bottom_part">
-      <span class="text-xs"> Updated: May 2024</span>
+      <span class="text-xs"> {{ t('boards.card.date_updated') }}: May 2024</span>
       <div :class="$style.users">
         <template v-for="user in board.users" :key="user._id">
           <UserAvatar
@@ -102,9 +105,9 @@ const userPosition = computed(() => {
       }
     }
 
-    .bottom_part{
+    .bottom_part {
       & > span {
-        color: var(--zinc-300)
+        color: var(--zinc-300);
       }
     }
   }

src/entities/chart/model/types.ts

@@ -2,7 +2,7 @@ import type { Component } from 'vue';
 
 export interface Chart {
   id: string;
-  title: string;
-  description: string;
+  titleKeyI18n: string;
+  descriptionKeyI18n: string;
   chart: Component;
 }

src/entities/chart/ui/ChartItem.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import type { Chart } from '../model';
 
 defineProps<{
   chart: Chart;
 }>();
+
+const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.chart_container">
-    <h4 class="heading-4">{{ chart.title }}</h4>
+    <h4 class="heading-4">{{ t(`boards.chart.${chart.titleKeyI18n}`) }}</h4>
     <p class="text-sm">
-      {{ chart.description }}
+      {{ t(`boards.chart.${chart.descriptionKeyI18n}`) }}
     </p>
     <div :class="$style.chart">
       <component :is="chart.chart" />

src/entities/template/config/index.ts

@@ -1,7 +1,7 @@
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 import type { Template } from '../model';
 
-export const templates = reactive<Template[]>([
+export const _templates = shallowReactive<Template[]>([
   {
     id: '0',
     title: 'Base Kanban',
@@ -17,7 +17,7 @@ export const templates = reactive<Template[]>([
     img: 'https://storage.weeek.net/templates/tm/development-and-product/roadmap.png',
     tag: 'New',
     description: `Create a project based on our "Roadmap" template`,
-    date: 'June 12, 2024',
+    date: 'June 18, 2024',
     user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
   },
   {
@@ -26,7 +26,7 @@ export const templates = reactive<Template[]>([
     img: 'https://storage.weeek.net/templates/tm/development-and-product/web-development.png',
     tag: 'New',
     description: `Create a basic project with "Web Development" template`,
-    date: 'June 12, 2024',
+    date: 'July 16, 2024',
     user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
   }
 ]);

src/entities/template/ui/TemplateItem.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { UiBadge } from '@/shared/ui';
 import type { Template } from '../model';
 
 defineProps<{
   template: Template;
 }>();
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -20,7 +23,7 @@ defineProps<{
       </div>
       <div :class="$style.bottom">
         <span class="text-xs">{{ template.date }}</span>
-        <img v-tooltip.bottom-end="'creator'" :src="template.user" />
+        <img v-tooltip.bottom-end="t('templates.user')" :src="template.user" />
       </div>
     </div>
   </div>
@@ -60,6 +63,7 @@ defineProps<{
   }
   .main_content {
     padding: 15px;
+    width: 100%;
 
     .text {
       display: flex;
@@ -77,6 +81,7 @@ defineProps<{
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
 
     & img {
       width: 20px;
@@ -93,10 +98,10 @@ defineProps<{
     &:hover {
       border-color: var(--zinc-400);
     }
-    .img_wrapper{
+    .img_wrapper {
       border-color: var(--zinc-600);
     }
-    .main_content{
+    .main_content {
       & span {
         color: var(--zinc-200);
       }

src/features/boards/add-board/ui/CreationBoard.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { UiSheet } from '@/shared/ui';
 import type { SheetElement } from '@/shared/ui';
 import FormCreation from './FormCreation.vue';
 
 const sheet = ref<SheetElement | null>(null);
 
+const { t } = useI18n();
+
 const open = () => {
   if (sheet.value) {
     sheet.value.open();
@@ -15,13 +18,13 @@ const open = () => {
 
 <template>
   <div :class="$style.creation" @click="open">
-    <span style="font-weight: 500">+ Create new board</span>
+    <span style="font-weight: 500">+ {{ t('boards.create') }}</span>
   </div>
   <UiSheet ref="sheet">
     <template #header>
-      <p class="text-lg" style="font-weight: 500">Create board</p>
+      <p class="text-lg" style="font-weight: 500">{{ t('sheet.title') }}</p>
       <span :class="[$style.desc, 'text-sm']">
-        The new board will allow you to create tasks for solving them.
+        {{ t('sheet.description') }}
       </span>
     </template>
     <template #default>

src/features/boards/add-board/ui/FormCreation.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { UiButton, UiInput } from '@/shared/ui';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
+import { UiButton, UiInput } from '@/shared/ui';
 import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
-import { useField, useForm } from 'vee-validate';
-import { ref } from 'vue';
 
 const validationSchema = toTypedSchema(validationRules);
+const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -23,16 +25,16 @@ const create = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="name">Board name</label>
-          <UiInput id="name" v-model="name" :placeholder="'e.g. Nice board'" />
+          <label class="text-sm" for="name">{{ t('sheet.form.name.label') }}</label>
+          <UiInput id="name" v-model="name" :placeholder="t('sheet.form.name.placeholder')" />
           <span v-if="errors.name" class="text-xs">{{ errors.name }}</span>
         </div>
         <div :class="$style.field">
-          <label class="text-sm" for="description">Board description</label>
+          <label class="text-sm" for="description">{{ t('sheet.form.description.label') }}</label>
           <UiInput
             id="description"
             v-model="description"
-            :placeholder="'e.g. development board for our company'"
+            :placeholder="t('sheet.form.description.placeholder')"
           />
         </div>
       </div>

src/features/boards/filter/ui/FilterBoards.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useDark } from '@vueuse/core';
 import { UiButton, UiInput } from '@/shared/ui';
 import { ArrowUpDown, Search, History } from 'lucide-vue-next';
@@ -10,6 +11,8 @@ const isDark = useDark();
 const iconColor = computed(() => {
   return isDark.value ? 'var(--zinc-300)' : 'rgb(82 82 91 / 0.9)';
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -20,15 +23,23 @@ const iconColor = computed(() => {
         id="filter"
         ref="filterRef"
         v-model.trim="filter"
-        :placeholder="'Filter boards...'"
+        :placeholder="t('boards.filter.input')"
         :class="$style.filter"
       />
     </div>
-    <UiButton v-tooltip.bottom="'Sort boards by popularity'" :variant="'dashed'" style="padding: 0 12px">
+    <UiButton
+      v-tooltip.bottom="t('boards.filter.tooltips.first_sort')"
+      :variant="'dashed'"
+      style="padding: 0 12px"
+    >
       <ArrowUpDown :size="17" :color="iconColor" />
-      <span style="margin-left: 6px">By popularity</span>
+      <span style="margin-left: 6px">{{ t('boards.filter.popularity') }}</span>
     </UiButton>
-    <UiButton v-tooltip.bottom="'Show recent boards'" :variant="'dashed'" style="padding: 0 12px">
+    <UiButton
+      v-tooltip.bottom="t('boards.filter.tooltips.second_sort')"
+      :variant="'dashed'"
+      style="padding: 0 12px"
+    >
       <History :size="17" :color="iconColor" />
     </UiButton>
   </div>
@@ -69,6 +80,9 @@ const iconColor = computed(() => {
     .filter_container {
       .filter {
         background-color: rgba(var(--zinc-rgb-600), 0.4);
+        &::placeholder {
+          color: var(--zinc-200);
+        }
       }
     }
   }

src/features/filter/ui/SearchFilter.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useDark } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
 import { UiInput, UiBadge } from '@/shared/ui';
 import { Search } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
 import useFilter from '../lib/composables/useFilter';
-import { useDark } from '@vueuse/core';
 
 const props = defineProps<{
   isExpanded: boolean;
@@ -26,6 +27,7 @@ const iconColor = computed(() => {
 });
 
 const { onToggleArea } = useFilter(inputRef, props, emit);
+const { t } = useI18n();
 </script>
 
 <template>
@@ -40,7 +42,7 @@ const { onToggleArea } = useFilter(inputRef, props, emit);
       id="input"
       ref="inputRef"
       v-model.trim="search"
-      :placeholder="'Search'"
+      :placeholder="t('sidebar.input')"
       :class="$style.input_filter"
     />
     <UiBadge v-show="isExpanded" variant="secondary" :class="$style.badge">
@@ -104,6 +106,9 @@ const { onToggleArea } = useFilter(inputRef, props, emit);
   .search_container {
     .input_filter {
       background-color: transparent;
+      &::placeholder {
+        color: var(--zinc-200);
+      }
     }
     .badge {
       & span {

src/features/plan/ui/PlanCard.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useDark } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
 import { UiProgressBar } from '@/shared/ui';
 import { WandSparkles, DollarSign } from 'lucide-vue-next';
 
 const props = defineProps<{
   isExpanded: boolean;
 }>();
 
+const { t } = useI18n();
+
 const isDark = useDark();
 
 const planPosition = computed(() => {
@@ -26,7 +29,7 @@ const iconColor = computed(() => {
       <WandSparkles :class="$style.icon" :color="iconColor" />
       <div :class="$style.plan_about">
         <div :class="$style.text">
-          <span class="text-xs">Upgrade your plan</span>
+          <span class="text-xs">{{ t('sidebar.plan') }}</span>
           <span class="text-xs">6/10</span>
         </div>
         <UiProgressBar :progress="6" />