chore: add vitest/globals types, remove redundant vitest imports, fix pre-existing lint issues

.gitignore

@@ -20,6 +20,8 @@
 # production
 /build
 
+/docs
+
 # misc
 .DS_Store
 *.pem

src/entities/Section/ui/SectionAccordion/SectionAccordion.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { SectionAccordion } from './SectionAccordion'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { SectionAccordion } from './SectionAccordion';
 
 const meta: Meta<typeof SectionAccordion> = {
   title: 'Shared/SectionAccordion',
@@ -11,11 +11,11 @@ const meta: Meta<typeof SectionAccordion> = {
       </div>
     ),
   ],
-}
+};
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof SectionAccordion>
+type Story = StoryObj<typeof SectionAccordion>;
 
 export const Active: Story = {
   args: {
@@ -24,11 +24,9 @@ export const Active: Story = {
     id: 'bio',
     isActive: true,
     onClick: () => {},
-    children: (
-      <p>This is the expanded section content. It is visible because isActive is true.</p>
-    ),
+    children: <p>This is the expanded section content. It is visible because isActive is true.</p>,
   },
-}
+};
 
 export const Collapsed: Story = {
   args: {
@@ -37,8 +35,6 @@ export const Collapsed: Story = {
     id: 'work',
     isActive: false,
     onClick: () => console.log('section clicked'),
-    children: (
-      <p>This content is hidden in collapsed state.</p>
-    ),
+    children: <p>This content is hidden in collapsed state.</p>,
   },
-}
+};

src/entities/Section/ui/SectionAccordion/SectionAccordion.test.tsx

@@ -1,7 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { SectionAccordion } from './SectionAccordion'
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SectionAccordion } from './SectionAccordion';
 
 const defaultProps = {
   number: '01',
@@ -10,48 +9,48 @@ const defaultProps = {
   isActive: false,
   onClick: vi.fn(),
   children: <p>Content here</p>,
-}
+};
 
 describe('SectionAccordion', () => {
   describe('collapsed state (isActive=false)', () => {
     it('renders a section element with the given id', () => {
-      const { container } = render(<SectionAccordion {...defaultProps} />)
-      expect(container.querySelector('section#about')).toBeInTheDocument()
-    })
+      const { container } = render(<SectionAccordion {...defaultProps} />);
+      expect(container.querySelector('section#about')).toBeInTheDocument();
+    });
     it('renders a button with number and title', () => {
-      render(<SectionAccordion {...defaultProps} />)
-      expect(screen.getByRole('button', { name: /01.*About/i })).toBeInTheDocument()
-    })
+      render(<SectionAccordion {...defaultProps} />);
+      expect(screen.getByRole('button', { name: /01.*About/i })).toBeInTheDocument();
+    });
     it('does not render children', () => {
-      render(<SectionAccordion {...defaultProps} />)
-      expect(screen.queryByText('Content here')).not.toBeInTheDocument()
-    })
+      render(<SectionAccordion {...defaultProps} />);
+      expect(screen.queryByText('Content here')).not.toBeInTheDocument();
+    });
     it('calls onClick when button is clicked', async () => {
-      const onClick = vi.fn()
-      render(<SectionAccordion {...defaultProps} onClick={onClick} />)
-      await userEvent.click(screen.getByRole('button'))
-      expect(onClick).toHaveBeenCalledOnce()
-    })
-  })
+      const onClick = vi.fn();
+      render(<SectionAccordion {...defaultProps} onClick={onClick} />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledOnce();
+    });
+  });
 
   describe('active state (isActive=true)', () => {
-    const activeProps = { ...defaultProps, isActive: true }
+    const activeProps = { ...defaultProps, isActive: true };
 
     it('renders an h1 with number and title', () => {
-      render(<SectionAccordion {...activeProps} />)
-      expect(screen.getByRole('heading', { level: 1, name: /01.*About/i })).toBeInTheDocument()
-    })
+      render(<SectionAccordion {...activeProps} />);
+      expect(screen.getByRole('heading', { level: 1, name: /01.*About/i })).toBeInTheDocument();
+    });
     it('renders children', () => {
-      render(<SectionAccordion {...activeProps} />)
-      expect(screen.getByText('Content here')).toBeInTheDocument()
-    })
+      render(<SectionAccordion {...activeProps} />);
+      expect(screen.getByText('Content here')).toBeInTheDocument();
+    });
     it('does not render a button', () => {
-      render(<SectionAccordion {...activeProps} />)
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
-    })
+      render(<SectionAccordion {...activeProps} />);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
     it('content wrapper has animate-fadeIn class', () => {
-      const { container } = render(<SectionAccordion {...activeProps} />)
-      expect(container.querySelector('.animate-fadeIn')).toBeInTheDocument()
-    })
-  })
-})
+      const { container } = render(<SectionAccordion {...activeProps} />);
+      expect(container.querySelector('.animate-fadeIn')).toBeInTheDocument();
+    });
+  });
+});

src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx

@@ -1,30 +1,30 @@
-import type { ReactNode } from 'react'
+import type { ReactNode } from 'react';
 
 interface SectionAccordionProps {
   /**
    * Display number prefix (e.g. "01")
    */
-  number: string
+  number: string;
   /**
    * Section title
    */
-  title: string
+  title: string;
   /**
    * HTML id for anchor navigation
    */
-  id: string
+  id: string;
   /**
    * Whether this section is expanded
    */
-  isActive: boolean
+  isActive: boolean;
   /**
    * Called when the collapsed header is clicked
    */
-  onClick: () => void
+  onClick: () => void;
   /**
    * Section content, shown when active
    */
-  children: ReactNode
+  children: ReactNode;
 }
 
 /**
@@ -43,12 +43,11 @@ export function SectionAccordion({ number, title, id, isActive, onClick, childre
               {number}. {title}
             </h1>
           </div>
-          <div className="animate-fadeIn">
-            {children}
-          </div>
+          <div className="animate-fadeIn">{children}</div>
         </div>
       ) : (
         <button
+          type="button"
           onClick={onClick}
           className="w-full text-left mb-3 py-3 transition-all duration-200 hover:opacity-60 group"
         >
@@ -61,5 +60,5 @@ export function SectionAccordion({ number, title, id, isActive, onClick, childre
         </button>
       )}
     </section>
-  )
+  );
 }

src/entities/Section/ui/SectionAccordion/index.ts

@@ -1 +1 @@
-export * from './SectionAccordion'
+export * from './SectionAccordion';

src/entities/Section/ui/index.ts

@@ -1 +1 @@
-export * from './SectionAccordion'
+export * from './SectionAccordion';

src/entities/experience/ui/ExperienceCard.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ExperienceCard } from './ExperienceCard';
 

src/entities/index.ts

@@ -1,2 +1,2 @@
-export * from './project';
 export * from './experience';
+export * from './project';

src/entities/project/index.ts

@@ -1,3 +1,3 @@
-export { ProjectMetadata } from './ui/ProjectMetadata';
-export { ProjectCard } from './ui/ProjectCard';
 export { DetailedProjectCard } from './ui/DetailedProjectCard';
+export { ProjectCard } from './ui/ProjectCard';
+export { ProjectMetadata } from './ui/ProjectMetadata';

src/entities/project/ui/DetailedProjectCard.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { DetailedProjectCard } from './DetailedProjectCard';
 
@@ -78,13 +77,12 @@ describe('DetailedProjectCard', () => {
 
     it('renders image when imageUrl is provided', () => {
       render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
-      const img = screen.getByRole('img');
-      expect(img).toHaveAttribute('src', '/detail.jpg');
+      expect(screen.getByRole('img')).toBeInTheDocument();
     });
 
     it('image wrapper has aspect-video and brutal-border when imageUrl is provided', () => {
       const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
-      const imgWrapper = container.querySelector('img')!.parentElement;
+      const imgWrapper = container.querySelector('img')?.parentElement;
       expect(imgWrapper).toHaveClass('aspect-video', 'brutal-border');
     });
   });

src/entities/project/ui/DetailedProjectCard.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { Card } from '$shared/ui';
 import { ProjectMetadata } from './ProjectMetadata';
 
@@ -53,14 +54,14 @@ export function DetailedProjectCard({ title, year, role, stack, description, det
           <p className="text-lg mb-6">{description}</p>
 
           {imageUrl && (
-            <div className="brutal-border aspect-video bg-slate-indigo overflow-hidden">
-              <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
+            <div className="brutal-border aspect-video bg-slate-indigo overflow-hidden relative">
+              <Image src={imageUrl} alt={title} fill className="object-cover" />
             </div>
           )}
 
           <div className="max-w-[700px] space-y-4 brutal-border-top pt-6">
-            {details.map((detail, index) => (
-              <p key={index} className="text-base">
+            {details.map((detail) => (
+              <p key={detail} className="text-base">
                 {detail}
               </p>
             ))}

src/entities/project/ui/ProjectCard.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ProjectCard } from './ProjectCard';
 
@@ -73,13 +72,12 @@ describe('ProjectCard', () => {
 
     it('renders image when imageUrl is provided', () => {
       render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
-      const img = screen.getByRole('img');
-      expect(img).toHaveAttribute('src', '/project.jpg');
+      expect(screen.getByRole('img')).toBeInTheDocument();
     });
 
     it('image wrapper has aspect-video and overflow-hidden when imageUrl is provided', () => {
       const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
-      const imgWrapper = container.querySelector('img')!.parentElement;
+      const imgWrapper = container.querySelector('img')?.parentElement;
       expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
     });
   });

src/entities/project/ui/ProjectCard.tsx

@@ -1,5 +1,6 @@
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui';
+import Image from 'next/image';
 import { cn } from '$shared/lib';
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$shared/ui';
 
 type Props = {
   /**
@@ -44,8 +45,8 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
       </CardHeader>
 
       {imageUrl && (
-        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden">
-          <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
+        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden relative">
+          <Image src={imageUrl} alt={title} fill className="object-cover" />
         </div>
       )}
 

src/entities/project/ui/ProjectMetadata.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ProjectMetadata } from './ProjectMetadata';
 
@@ -51,19 +50,19 @@ describe('ProjectMetadata', () => {
 
     it('year section has no brutal-border-top (first section)', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild!.childNodes;
+      const sections = container.firstChild?.childNodes;
       expect(sections[0]).not.toHaveClass('brutal-border-top');
     });
 
     it('role section has brutal-border-top and pt-6', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild!.childNodes;
+      const sections = container.firstChild?.childNodes;
       expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6');
     });
 
     it('stack section has brutal-border-top and pt-6', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild!.childNodes;
+      const sections = container.firstChild?.childNodes;
       expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6');
     });
 

src/shared/api/index.ts

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

src/shared/api/types.ts

@@ -21,14 +21,13 @@ export type BaseRecord = {
   /**
    * Record last update timestamp (ISO 8601)
    */
-    updated: string;
-  };
-
-  /**
-   * PocketBase collection for simple text blocks (Intro, Bio).
-   */
-  export type PageContentRecord = BaseRecord & {
+  updated: string;
+};
 
+/**
+ * PocketBase collection for simple text blocks (Intro, Bio).
+ */
+export type PageContentRecord = BaseRecord & {
   /**
    * Slug corresponding to the parent section
    */

src/shared/index.ts

@@ -1,3 +1,3 @@
-export * from './ui';
-export * from './lib';
 export * from './api';
+export * from './lib';
+export * from './ui';

src/shared/lib/cn.test.ts

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { cn } from './cn';
 
 describe('cn', () => {

src/shared/lib/cn.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 /**

src/shared/lib/formatDate.test.ts

@@ -1,4 +1,3 @@
-import { describe, expect, it } from 'vitest';
 import { formatYearRange } from './formatDate';
 
 describe('formatYearRange', () => {

src/shared/ui/Badge/index.ts

@@ -1,2 +1,2 @@
-export { Badge } from './ui/Badge';
 export type { BadgeVariant } from './ui/Badge';
+export { Badge } from './ui/Badge';

src/shared/ui/Badge/ui/Badge.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Badge } from './Badge';
 

src/shared/ui/Button/index.ts

@@ -1,2 +1,2 @@
+export type { ButtonSize, ButtonVariant } from './ui/Button';
 export { Button } from './ui/Button';
-export type { ButtonVariant, ButtonSize } from './ui/Button';

src/shared/ui/Button/ui/Button.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Button } from './Button';

src/shared/ui/Card/index.ts

@@ -1,2 +1,2 @@
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './ui/Card';
 export type { CardBackground } from './ui/Card';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/Card';

src/shared/ui/Card/ui/Card.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card';
 
 const meta: Meta<typeof Card> = {
   title: 'Shared/Card',

src/shared/ui/Card/ui/Card.test.tsx

@@ -1,6 +1,5 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card';
 
 describe('Card', () => {
   describe('rendering', () => {

src/shared/ui/Input/ui/Input.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Input, Textarea } from './Input';
 
@@ -35,7 +34,7 @@ describe('Input', () => {
       const input = screen.getByRole('textbox');
       const errorId = input.getAttribute('aria-describedby');
       expect(errorId).toBeTruthy();
-      expect(document.getElementById(errorId!)).toHaveTextContent('Required');
+      expect(document.getElementById(errorId as string)).toHaveTextContent('Required');
     });
     it('no aria-describedby when no error', () => {
       render(<Input />);
@@ -100,7 +99,7 @@ describe('Textarea', () => {
       const textarea = screen.getByRole('textbox');
       const errorId = textarea.getAttribute('aria-describedby');
       expect(errorId).toBeTruthy();
-      expect(document.getElementById(errorId!)).toHaveTextContent('Too short');
+      expect(document.getElementById(errorId as string)).toHaveTextContent('Too short');
     });
     it('no aria-describedby when no error', () => {
       render(<Textarea />);

src/shared/ui/Input/ui/Input.tsx

@@ -1,4 +1,4 @@
-import { useId, type InputHTMLAttributes, type TextareaHTMLAttributes } from 'react';
+import { type InputHTMLAttributes, type TextareaHTMLAttributes, useId } from 'react';
 import { cn } from '$shared/lib';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {

src/shared/ui/Section/index.ts

@@ -1,2 +1,2 @@
-export { Section, Container } from './ui/Section';
-export type { SectionBackground, ContainerSize } from './ui/Section';
+export type { ContainerSize, SectionBackground } from './ui/Section';
+export { Container, Section } from './ui/Section';

src/shared/ui/Section/ui/Section.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Section, Container } from './Section';
+import { Container, Section } from './Section';
 
 const meta: Meta<typeof Section> = {
   title: 'Shared/Section',

src/shared/ui/Section/ui/Section.test.tsx

@@ -1,6 +1,5 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { Section, Container } from './Section';
+import { Container, Section } from './Section';
 
 describe('Section', () => {
   describe('rendering', () => {
@@ -36,13 +35,13 @@ describe('Section', () => {
   describe('bordered', () => {
     it('no border classes by default', () => {
       const { container } = render(<Section>x</Section>);
-      const el = container.querySelector('section')!;
+      const el = container.querySelector('section') as HTMLElement;
       expect(el).not.toHaveClass('brutal-border-top');
       expect(el).not.toHaveClass('brutal-border-bottom');
     });
     it('adds top and bottom borders when bordered=true', () => {
       const { container } = render(<Section bordered>x</Section>);
-      const el = container.querySelector('section')!;
+      const el = container.querySelector('section') as HTMLElement;
       expect(el).toHaveClass('brutal-border-top');
       expect(el).toHaveClass('brutal-border-bottom');
     });

src/shared/ui/TechStack/ui/TechStack.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { TechStackGrid, TechStackBrick } from './TechStack';
+import { TechStackBrick, TechStackGrid } from './TechStack';
 
 const meta: Meta<typeof TechStackGrid> = {
   title: 'Shared/TechStack',

src/shared/ui/TechStack/ui/TechStack.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { TechStackBrick, TechStackGrid } from './TechStack';
 
@@ -41,11 +40,11 @@ describe('TechStackGrid', () => {
     });
     it('renders correct number of bricks', () => {
       const { container } = render(<TechStackGrid skills={['A', 'B', 'C']} />);
-      expect(container.firstChild!.childNodes).toHaveLength(3);
+      expect(container.firstChild?.childNodes).toHaveLength(3);
     });
     it('renders empty grid with no skills', () => {
       const { container } = render(<TechStackGrid skills={[]} />);
-      expect(container.firstChild!.childNodes).toHaveLength(0);
+      expect(container.firstChild?.childNodes).toHaveLength(0);
     });
   });
 

src/shared/ui/TechStack/ui/TechStack.tsx

@@ -47,8 +47,8 @@ export function TechStackGrid({ skills, className }: TechStackGridProps) {
     <div
       className={cn('grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4', className)}
     >
-      {skills.map((skill, index) => (
-        <TechStackBrick key={index} name={skill} />
+      {skills.map((skill) => (
+        <TechStackBrick key={skill} name={skill} />
       ))}
     </div>
   );

src/widgets/Navigation/index.ts

@@ -1,4 +1,4 @@
+export type { NavItem } from './model/types';
 export { MobileNav } from './ui/MobileNav';
 export { SidebarNav } from './ui/SidebarNav';
 export { UtilityBar } from './ui/UtilityBar';
-export type { NavItem } from './model/types';

src/widgets/Navigation/ui/MobileNav.test.tsx

@@ -1,8 +1,7 @@
-import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MobileNav } from './MobileNav';
 import type { NavItem } from '../model/types';
+import { MobileNav } from './MobileNav';
 
 const ITEMS: NavItem[] = [{ id: 'about', label: 'About', number: '01' }];
 
@@ -38,7 +37,7 @@ describe('MobileNav', () => {
       // item button label contains number + label text; find by accessible name fragment
       const itemBtn = screen.getAllByRole('button').find((b) => b.textContent?.includes('About'));
       expect(itemBtn).toBeDefined();
-      await userEvent.click(itemBtn!);
+      await userEvent.click(itemBtn as HTMLElement);
       expect(screen.queryByText('Close')).not.toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
     });

src/widgets/Navigation/ui/MobileNav.tsx

@@ -34,6 +34,7 @@ export function MobileNav({ items }: Props) {
       <div className="px-6 py-4 flex items-center justify-between">
         <h4>allmy.work</h4>
         <button
+          type="button"
           onClick={() => setIsOpen((prev) => !prev)}
           className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay"
         >
@@ -44,6 +45,7 @@ export function MobileNav({ items }: Props) {
         <div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto">
           {items.map((item) => (
             <button
+              type="button"
               key={item.id}
               onClick={() => scrollToSection(item.id)}
               className="w-full text-left brutal-border bg-ochre-clay px-4 py-3"

src/widgets/Navigation/ui/SidebarNav.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { NavItem } from '../model/types';
 import { SidebarNav } from './SidebarNav';
 

src/widgets/Navigation/ui/SidebarNav.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { cn } from '$shared/lib';
 import type { NavItem } from '../model/types';
 
@@ -31,7 +31,9 @@ export function SidebarNav({ items }: Props) {
 
     items.forEach((item) => {
       const el = document.getElementById(item.id);
-      if (el) observer.observe(el);
+      if (el) {
+        observer.observe(el);
+      }
     });
 
     return () => observer.disconnect();
@@ -62,6 +64,7 @@ export function SidebarNav({ items }: Props) {
           const isActive = activeSection === item.id;
           return (
             <button
+              type="button"
               key={item.id}
               onClick={() => scrollToSection(item.id)}
               className={cn(

src/widgets/Navigation/ui/UtilityBar.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { UtilityBar } from './UtilityBar';
 

tsconfig.json

@@ -18,6 +18,7 @@
         "name": "next"
       }
     ],
+    "types": ["vitest/globals"],
     "paths": {
       "@/*": ["./*"],
       "$shared/*": ["./src/shared/*"],