merge pull request #46 from mnenie/dev

fix: i18n globalInjection and fsd structure

src/entities/board/ui/BoardPreviewCard.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import type { User} from '@/entities/user/model';
 import { UserAvatar } from '@/entities/user';
 import type { BoardPreview } from '../model';
@@ -9,8 +8,6 @@ defineProps<{
  board: BoardPreview;
 }>();
 
-const { t } = useI18n();
-
 const userPosition = computed(() => {
  return (board: BoardPreview, user: User) => {
  return (board.users.length - 1 - +user._id!) * 12;
@@ -24,7 +21,7 @@ const userPosition = computed(() => {
  <span class="text-xs">{{ board.description }}</span>
  </div>
  <div :class="$style.bottom_part">
- <span class="text-xs"> {{ t('boards.card.date_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

src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts

@@ -15,12 +15,6 @@ describe('tests for BoardPreviewCard.vue', () => {
  plugins: [i18n],
 
  mocks: {
- t: (key: string) => {
- const translations: Record<string, string> = {
- 'boards.card.date_updated': 'Date Updated (test)'
- };
- return translations[key];
- },
  $router: mockRouter
  }
  },
@@ -40,7 +34,7 @@ describe('tests for BoardPreviewCard.vue', () => {
 
  it('should correctly works with i18n', () => {
  const date = wrapper.find('.bottom_part');
- expect(date.text()).toContain('Date Updated (test)');
+ expect(date.text()).toContain('Updated: May 2024');
  });
 
  it('should redirect to "/board/1" ', async () => {

src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap

@@ -1,22 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for BoardPreviewCard > should render correctly 1`] = `
-"<div class="active_board">
- <div class="text">
- <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
- </div>
- <div class="bottom_part"><span class="text-xs">Date Updated (test): May 2024</span>
- <div class="users"></div>
- </div>
-</div>"
-`;
-
 exports[`tests for BoardPreviewCard.vue > should render correctly 1`] = `
 "<div class="active_board">
  <div class="text">
  <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
  </div>
- <div class="bottom_part"><span class="text-xs">Date Updated (test): May 2024</span>
+ <div class="bottom_part"><span class="text-xs">Updated: May 2024</span>
  <div class="users"></div>
  </div>
 </div>"

src/entities/chart/ui/ChartItem.vue

@@ -1,19 +1,16 @@
 <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">{{ t(`boards.chart.${chart.titleKeyI18n}`) }}</h4>
+ <h4 class="heading-4">{{ $t(`boards.chart.${chart.titleKeyI18n}`) }}</h4>
  <p class="text-sm">
- {{ t(`boards.chart.${chart.descriptionKeyI18n}`) }}
+ {{ $t(`boards.chart.${chart.descriptionKeyI18n}`) }}
  </p>
  <div :class="$style.chart">
  <component :is="chart.chart" />

src/entities/chart/ui/__tests__/__snapshots__/ChartItem.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`tests for ChartItem.vue > should render correctly 1`] = `
 "<div class="chart_container">
- <h4 class="heading-4"></h4>
- <p class="text-sm"></p>
+ <h4 class="heading-4">boards.chart.test-title</h4>
+ <p class="text-sm">boards.chart.test-description</p>
  <div class="chart">
  <anonymous-stub></anonymous-stub>
  </div>

src/entities/template/index.ts

@@ -1,2 +1,2 @@
 export * from './ui';
-export * from './config';
+export * from './model';

src/entities/template/model/index.ts

@@ -1 +1,2 @@
 export * from './types';
+export * from './templates';

src/entities/template/config/index.ts → src/entities/template/model/templates.ts

@@ -1,7 +1,6 @@
-import { shallowReactive } from 'vue';
 import type { Template } from '../model';
 
-export const _templates = shallowReactive<Template[]>([
+export const templatesInfo: Template[] = [
  {
  id: '0',
  title: 'Base Kanban',
@@ -29,4 +28,4 @@ export const _templates = shallowReactive<Template[]>([
  date: 'July 16, 2024',
  user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
  }
-]);
+];

src/entities/template/ui/TemplateItem.vue

@@ -1,13 +1,10 @@
 <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>
@@ -23,7 +20,7 @@ const { t } = useI18n();
  </div>
  <div :class="$style.bottom">
  <span class="text-xs">{{ template.date }}</span>
- <img v-tooltip.bottom-end="t('templates.user')" :src="template.user" />
+ <img v-tooltip.bottom-end="$t('templates.user')" :src="template.user" />
  </div>
  </div>
  </div>

src/entities/template/ui/__tests__/TemplateItem.spec.ts

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 import i18n from '@/shared/lib/i18n';
 import TemplateItem from '../TemplateItem.vue';
-import { _templates } from '../../config';
+import { templatesInfo } from '../../model';
 
 describe('tests for TemplateItem.vue ', () => {
  const wrapper = shallowMount(TemplateItem, {
@@ -19,7 +19,7 @@ describe('tests for TemplateItem.vue ', () => {
  }
  },
  props: {
- template: _templates[0]
+ template: templatesInfo[0]
  }
  });
 

src/features/auth/lib/composables/useTextChanging.ts

@@ -1,12 +1,12 @@
 import { onActivated, ref } from 'vue';
-import type { Ref } from 'vue';
 import type { Review } from '../types';
 
-export default function useTextChanging(reviews: Ref<Review[]>) {
+export default function useTextChanging(reviews: Review[]) {
+ // so, maybe Ill do with live data
  const currentIndex = ref(0);
 
  const changeReviewText = () => {
- currentIndex.value = Math.floor(Math.random() * reviews.value.length);
+ currentIndex.value = Math.floor(Math.random() * reviews.length);
  };
  onActivated(() => {
  changeReviewText();

src/features/auth/model/index.ts

@@ -0,0 +1,2 @@
+export * from './reviews';
+export * from './validation';

src/features/auth/config/reviews.ts → src/features/auth/model/reviews.ts

@@ -1,7 +1,7 @@
-import { ref } from 'vue';
+import { markRaw } from 'vue';
 import type { Review } from '../lib/types';
 
-export const reviews = ref<Review[]>([
+export const reviews = markRaw<Review[]>([
  {
  id: '0',
  author: '@alexpeshkov',

src/features/auth/ui/BgPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useDark } from '@vueuse/core';
-import { reviews } from '../config/reviews';
+import { reviews } from '../model';
 import useTextChanging from '../lib/composables/useTextChanging';
 
 const { currentIndex } = useTextChanging(reviews);

src/features/auth/ui/SignInForm.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { toast } from 'vue-sonner';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton, UiInput } from '@/shared/ui';
 import { Loader2 } from 'lucide-vue-next';
-import { validationRules } from '../config/validation';
+import { validationRules } from '../model';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
  validationSchema
@@ -28,12 +26,12 @@ const onLogin = handleSubmit((values) => {
  <div :class="$style.form_container">
  <div :class="$style.form_fields">
  <div v-auto-animate :class="$style.field">
- <label class="text-sm" for="email">{{ t('authentication.form.email') }}</label>
+ <label class="text-sm" for="email">{{ $t('authentication.form.email') }}</label>
  <UiInput id="email" v-model="email" :placeholder="'user@example.com'" :type="'email'" />
  <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
  </div>
  <div v-auto-animate :class="$style.field">
- <label class="text-sm" for="password">{{ t('authentication.form.password') }}</label>
+ <label class="text-sm" for="password">{{ $t('authentication.form.password') }}</label>
  <UiInput
  id="password"
  v-model="password"
@@ -46,12 +44,12 @@ const onLogin = handleSubmit((values) => {
  <div :class="$style.choose_block">
  <UiButton type="submit">
  <!-- <Loader2 :class="$style.loader" /> -->
- {{ t('authentication.login.btn') }}
+ {{ $t('authentication.login.btn') }}
  </UiButton>
  <p :class="[$style.login, 'text-sm']">
- {{ t('authentication.login.proposal') }}
+ {{ $t('authentication.login.proposal') }}
  <span :class="$style.login_route" @click="$router.push({ name: RouteNames.registration })">
- {{ t('authentication.login.route') }}
+ {{ $t('authentication.login.route') }}
  </span>
  </p>
  </div>

src/features/auth/ui/SignUpForm.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { toast } from 'vue-sonner';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton, UiInput } from '@/shared/ui';
 import { Loader2 } from 'lucide-vue-next';
-import { validationRules } from '../config/validation';
+import { validationRules } from '../model';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
  validationSchema
@@ -28,12 +26,12 @@ const onRegistration = handleSubmit((values) => {
  <div :class="$style.form_container">
  <div :class="$style.form_fields">
  <div v-auto-animate :class="$style.field">
- <label class="text-sm" for="email">{{ t('authentication.form.email') }}</label>
+ <label class="text-sm" for="email">{{ $t('authentication.form.email') }}</label>
  <UiInput id="email" v-model="email" :placeholder="'user@example.com'" :type="'email'" />
  <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
  </div>
  <div v-auto-animate :class="$style.field">
- <label class="text-sm" for="password">{{ t('authentication.form.password') }}</label>
+ <label class="text-sm" for="password">{{ $t('authentication.form.password') }}</label>
  <UiInput
  id="password"
  v-model="password"
@@ -46,12 +44,12 @@ const onRegistration = handleSubmit((values) => {
  <div :class="$style.choose_block">
  <UiButton type="submit">
  <!-- <Loader2 :class="$style.loader" /> -->
- {{ t('authentication.registration.btn') }}
+ {{ $t('authentication.registration.btn') }}
  </UiButton>
  <p :class="[$style.reg, 'text-sm']">
- {{ t('authentication.registration.proposal') }}
+ {{ $t('authentication.registration.proposal') }}
  <span :class="$style.reg_route" @click="$router.push({ name: RouteNames.login })">
- {{ t('authentication.registration.route') }}
+ {{ $t('authentication.registration.route') }}
  </span>
  </p>
  </div>

src/features/boards/add-board/model/index.ts

@@ -0,0 +1 @@
+export * from './validation';

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

@@ -1,14 +1,11 @@
 <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();
@@ -18,13 +15,13 @@ const open = () => {
 
 <template>
  <div :class="$style.creation" @click="open">
- <span style="font-weight: 500">+ {{ t('boards.create') }}</span>
+ <span style="font-weight: 500">+ {{ $t('boards.create') }}</span>
  </div>
  <UiSheet ref="sheet">
  <template #header>
- <p class="text-lg" style="font-weight: 500">{{ t('sheet.title') }}</p>
+ <p class="text-lg" style="font-weight: 500">{{ $t('sheet.title') }}</p>
  <span :class="[$style.desc, 'text-sm']">
- {{ t('sheet.description') }}
+ {{ $t('sheet.description') }}
  </span>
  </template>
  <template #default>

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

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 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 { validationRules } from '../model';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
  validationSchema
@@ -25,16 +23,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">{{ t('sheet.form.name.label') }}</label>
- <UiInput id="name" v-model="name" :placeholder="t('sheet.form.name.placeholder')" />
+ <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">{{ t('sheet.form.description.label') }}</label>
+ <label class="text-sm" for="description">{{ $t('sheet.form.description.label') }}</label>
  <UiInput
  id="description"
  v-model="description"
- :placeholder="t('sheet.form.description.placeholder')"
+ :placeholder="$t('sheet.form.description.placeholder')"
  />
  </div>
  </div>