Refactored code

src/resources/js/app.ts

@@ -8,7 +8,7 @@ import { createInertiaApp } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 // @ts-expect-error Declaration of ZiggyVue
 import { ZiggyVue } from 'ziggy-js/dist/vue.m';
-import { HasRolePlugin } from '@/plugins/user/authorize';
+import { HasRolePlugin } from '@/shared/plugins/user/authorize';
 import PrimeVue from 'primevue/config';
 import Tailwind from 'primevue/passthrough/tailwind';
 import ToastService from 'primevue/toastservice';

src/resources/js/entities/anime/model/index.ts

@@ -1 +1,5 @@
-export { type AnimePagination, type AnimePerDomain } from './types';
+export {
+    type AnimePagination,
+    type AddedAnimePerDomain,
+    type AddedAnimePerMonth,
+} from './types';

src/resources/js/entities/anime/model/types.ts

@@ -2,6 +2,8 @@ import { Laravel, Models } from '@/types';
 
 type AnimePagination = Laravel.Pagination<Models.Anime>;
 
-type AnimePerDomain = Record<string, number>;
+type AddedAnimePerDomain = Record<string, number>;
 
-export { type AnimePagination, type AnimePerDomain };
+type AddedAnimePerMonth = number[];
+
+export { type AnimePagination, type AddedAnimePerDomain, type AddedAnimePerMonth };

src/resources/js/features/dashboard/charts/count-anime-per-domain/CountAnimePerDomain.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { Chart } from '@/shared/ui/chart';
-import { computed, inject } from 'vue';
-import { type AnimePerDomain } from '@/entities/anime';
+import { computed } from 'vue';
+import { type AddedAnimePerDomain } from '@/entities/anime';
 
-const animePerDomain = inject<AnimePerDomain>('animePerDomain') as object;
+type Props = {
+    domainStatistic: AddedAnimePerDomain;
+};
+
+const { domainStatistic } = defineProps<Props>();
 
 const data = computed(() => ({
-    labels: Object.keys(animePerDomain),
+    labels: Object.keys(domainStatistic),
     datasets: [
         {
             label: 'Anime per domain',
-            data: Object.values(animePerDomain),
+            data: Object.values(domainStatistic),
             backgroundColor: [
                 'rgba(255, 159, 64, 0.2)',
                 'rgba(75, 192, 192, 0.2)',

src/resources/js/features/dashboard/charts/parsed-monthly-anime/ParsedMonthlyAnime.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { Chart } from '@/shared/ui/chart';
-import { inject } from 'vue';
+import { type AddedAnimePerMonth } from '@/entities/anime';
 
-const animePerMonth = inject('animePerMonth');
+type Props = {
+    monthlyStatistic: AddedAnimePerMonth;
+};
+
+const { monthlyStatistic } = defineProps<Props>();
 
 const months: string[] = [
     'January',
@@ -26,7 +30,7 @@ const data = {
     datasets: [
         {
             label: 'Parsed anime per month',
-            data: animePerMonth,
+            data: monthlyStatistic,
             fill: false,
             borderColor: documentStyle.getPropertyValue('--red-500'),
             tension: 0.4,

src/resources/js/features/navigation/search-button/SearchButton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Button } from '@/shared/ui/button';
+</script>
+
+<template>
+    <Button
+        variant="secondary"
+        class="outline-none border-none bg-transparent focus:outline-none focus:ring-0 focus:border-none"
+    >
+        <i class="pi pi-search text-zinc-600 dark:text-white" />
+    </Button>
+</template>
+
+<style scoped></style>

src/resources/js/features/navigation/search-button/index.ts

@@ -0,0 +1 @@
+export { default as SearchButton } from './SearchButton.vue';

src/resources/js/features/navigation/search-modal/SearchModal.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { Modal } from '@/shared/ui/modal';
+import { TextInput } from '@/shared/ui/input/text';
+import SearchModal from './SearchModal.vue';
+
+describe('SearchModal test (SearchModal.vue)', () => {
+    it('Shows modal when visible is true', () => {
+        const wrapper = mount(SearchModal, {
+            props: { visible: true },
+        });
+
+        expect(wrapper.findComponent(Modal).props('visible')).toBeTruthy();
+    });
+
+    it('Modal emits closed event when it is closed', async () => {
+        const wrapper = mount(SearchModal, {
+            props: { visible: true },
+        });
+
+        await wrapper.findComponent(Modal).vm.$emit('close');
+        expect(wrapper.emitted()).toHaveProperty('closed');
+    });
+
+    it('Modal binds input value to ref', async () => {
+        const wrapper = mount(SearchModal, {
+            props: { visible: true },
+        });
+
+        const input = wrapper.findComponent(TextInput);
+        await input.setValue('test query');
+        expect(wrapper.vm.query).toBe('test query');
+    });
+});

src/resources/js/features/navigation/search-modal/SearchModal.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Modal } from '@/shared/ui/modal';
+import { TextInput } from '@/shared/ui/input/text';
+import { ref } from 'vue';
+
+type Props = {
+    visible: boolean;
+};
+
+defineProps<Props>();
+defineEmits<{ closed: [] }>();
+
+const query = ref<string>('');
+</script>
+
+<template>
+    <Modal
+        :visible="visible"
+        :close-button="false"
+        close-on-escape
+        close-on-outside-click
+        @close="$emit('closed')"
+    >
+        <template #header>
+            <TextInput
+                ref="searchInput"
+                v-model="query"
+                name="search"
+                autofocus
+                class="w-full text-xs ring-1 bg-transparent ring-gray-200 dark:ring-zinc-600 focus:ring-red-300 px-5 text-gray-600 dark:text-white py-3 rounded-full w-full outline-none focus:ring-1"
+                placeholder="Search"
+            />
+        </template>
+    </Modal>
+</template>
+
+<style scoped></style>

src/resources/js/features/navigation/search-modal/index.ts

@@ -0,0 +1 @@
+export { default as SearchModal } from './SearchModal.vue';

src/resources/js/features/telegram/login-widget/TelegramLoginWidget.test.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, it, vitest } from 'vitest';
 import TelegramLoginWidget from './TelegramLoginWidget.vue';
-import { RequestAccess, WidgetSize } from './types';
+import { RequestAccess, WidgetSize } from './model/types';
 
 describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {
     it('Renders correctly', async () => {

src/resources/js/features/telegram/login-widget/TelegramLoginWidget.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
-import { RequestAccess, WidgetSize } from '@/features/telegram/login-widget/types';
-import { TelegramUser } from '@/entities/telegram-user';
+import { RequestAccess, WidgetSize } from '@/features/telegram/login-widget/model/types';
+import { type TelegramUser } from '@/entities/telegram-user';
 
 type Props = {
     bot: string;

src/resources/js/pages/Dashboard/Index.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
 import { AuthenticatedLayout } from '@/widgets/layouts';
 import { Head } from '@inertiajs/vue3';
-import { AnimePerDomain } from '@/entities/anime';
+import { type AddedAnimePerDomain, type AddedAnimePerMonth } from '@/entities/anime';
 import { Charts, StatisticCards } from '@/widgets/dashboard';
 import { AnimeCarousel } from '@/features/dashboard/anime-carousel';
-import { provide } from 'vue';
 import { Models } from '@/types';
 
 type Props = {
     animeCount: number;
     usersCount: number;
-    animePerMonth: number[];
-    animePerDomain: AnimePerDomain;
+    animePerMonth: AddedAnimePerMonth;
+    animePerDomain: AddedAnimePerDomain;
     latestAnime: Models.Anime[];
 };
 
-const props = defineProps<Props>();
-
-provide('animePerMonth', props.animePerMonth);
-provide('animePerDomain', props.animePerDomain);
+defineProps<Props>();
 </script>
 
 <template>

src/resources/js/shared/ui/modal/Modal.test.ts

@@ -35,7 +35,12 @@ describe('BaseModal test (Modal.vue)', () => {
             props: { visible: true, closeOnEscape: true },
         });
 
-        await wrapper.find('.modal-wrapper').trigger('keyup.esc');
+        const modal = wrapper.find('.modal-wrapper');
+        expect(modal.isVisible()).toBeTruthy();
+
+        const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+        window.dispatchEvent(escapeEvent);
+
         expect(wrapper.emitted()).toHaveProperty('close');
     });
 
@@ -48,4 +53,27 @@ describe('BaseModal test (Modal.vue)', () => {
         expect(wrapper.emitted()).toHaveProperty('click:outside');
         expect(wrapper.emitted()).toHaveProperty('close');
     });
+
+    it('Modal will render content in slots', async () => {
+        const wrapper = mount(BaseModal, {
+            props: { visible: true },
+            slots: {
+                header: '<div>Test Header</div>',
+                body: '<div>Test Body</div>',
+                footer: '<div>Test Footer</div>',
+            },
+        });
+
+        expect(wrapper.find('header').html()).toContain('<div>Test Header</div>');
+        expect(wrapper.find('main').html()).toContain('<div>Test Body</div>');
+        expect(wrapper.find('footer').html()).toContain('<div>Test Footer</div>');
+    });
+
+    it('Modal will not render close closeButton prop is false', () => {
+        const wrapper = mount(BaseModal, {
+            props: { visible: true, closeButton: false },
+        });
+
+        expect(wrapper.find('button[aria-label="close"]').exists()).toBeFalsy();
+    });
 });