Format code and fix ESLint errors

.eslintrc.cjs

@@ -1,26 +1,23 @@
 module.exports = {
   extends: [
-    'mantine',
     'plugin:@next/next/recommended',
-    'plugin:jest/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:prettier/recommended',
     'plugin:@tanstack/eslint-plugin-query/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  plugins: ['testing-library', 'jest'],
-  overrides: [
-    {
-      files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
-      extends: ['plugin:testing-library/react'],
-    },
   ],
+  plugins: ['@typescript-eslint', 'react-hooks'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
     project: './tsconfig.json',
   },
   rules: {
     'react/react-in-jsx-scope': 'off',
     'no-console': ['error', { allow: ['warn', 'error'] }],
-    'jsx-a11y/no-noninteractive-element-interactions': 'off',
     '@next/next/no-img-element': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
   },
 }

.prettierrc.cjs

@@ -1,12 +1,12 @@
-const baseConfig = require('eslint-config-mantine/.prettierrc.js');
-
 /** @type {import('prettier').Options} */
 module.exports = {
-  ...baseConfig,
   semi: false,
   singleQuote: true,
   trailingComma: 'all',
   arrowParens: 'avoid',
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
   plugins: ['prettier-plugin-tailwindcss'],
   tailwindConfig: './tailwind.config.cjs',
 }

.storybook/preview.tsx

@@ -10,7 +10,8 @@ const channel = addons.getChannel()
 
 function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
   const { setColorScheme } = useMantineColorScheme()
-  const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light')
+  const handleColorScheme = (value: boolean) =>
+    setColorScheme(value ? 'dark' : 'light')
 
   useEffect(() => {
     channel.on(DARK_MODE_EVENT_NAME, handleColorScheme)

.vscode/settings.json

@@ -7,5 +7,28 @@
     "node_modules/@mantine/core/styles.css"
   ],
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  }
 }

app/admin/add-barometer/add-manufacturer.tsx

@@ -60,8 +60,11 @@ export function AddManufacturer({ onAddManufacturer }: AddManufacturerProps) {
           ? null
           : 'First name should be longer than 2 and shorter than 100 symbols',
       city: val =>
-        isLength(val ?? '', { max: 100 }) ? null : 'City should be shorter that 100 symbols',
-      icon: val => (isLength(val ?? '', { min: 1 }) ? null : 'Icon should be selected'),
+        isLength(val ?? '', { max: 100 })
+          ? null
+          : 'City should be shorter that 100 symbols',
+      icon: val =>
+        isLength(val ?? '', { min: 1 }) ? null : 'Icon should be selected',
     },
   })
   const queryClient = useQueryClient()
@@ -74,7 +77,10 @@ export function AddManufacturer({ onAddManufacturer }: AddManufacturerProps) {
       form.reset()
       onAddManufacturer(id)
       close()
-      showInfo(`${variables.name} has been recorded as a manufacturer #${id ?? 0}`, 'Success')
+      showInfo(
+        `${variables.name} has been recorded as a manufacturer #${id ?? 0}`,
+        'Success',
+      )
     },
     onError: error => {
       showError(error.message || 'Error adding manufacturer')
@@ -129,10 +135,19 @@ export function AddManufacturer({ onAddManufacturer }: AddManufacturerProps) {
             Add Manufacturer
           </Title>
           <TextInput label="First name" {...form.getInputProps('firstName')} />
-          <TextInput id="manufacturer-name" required label="Name" {...form.getInputProps('name')} />
+          <TextInput
+            id="manufacturer-name"
+            required
+            label="Name"
+            {...form.getInputProps('name')}
+          />
           <MultiSelect
             label="Countries"
-            placeholder={form.values.countries.length === 0 ? 'Select countries' : undefined}
+            placeholder={
+              form.values.countries.length === 0
+                ? 'Select countries'
+                : undefined
+            }
             data={countries.data?.map(({ id, name }) => ({
               value: String(id),
               label: name,
@@ -162,7 +177,10 @@ export function AddManufacturer({ onAddManufacturer }: AddManufacturerProps) {
                 Add Manufacturer
               </Button>
             </div>
-            <IconUpload onFileChange={handleIconChange} errorMsg={form.errors.icon} />
+            <IconUpload
+              onFileChange={handleIconChange}
+              errorMsg={form.errors.icon}
+            />
           </div>
         </Box>
       </Modal>

app/admin/add-barometer/dimensions.tsx

@@ -1,4 +1,11 @@
-import { Fieldset, TextInput, Group, ActionIcon, Tooltip, Stack } from '@mantine/core'
+import {
+  Fieldset,
+  TextInput,
+  Group,
+  ActionIcon,
+  Tooltip,
+  Stack,
+} from '@mantine/core'
 import { IconTrash, IconSquareRoundedPlus } from '@tabler/icons-react'
 import { UseFormReturnType } from '@mantine/form'
 import { type BarometerFormProps } from '@/app/types'
@@ -21,13 +28,22 @@ export function Dimensions({ form }: DimensionsProps) {
     <Fieldset m={0} mt="0.2rem" p="sm" pt="0.3rem" legend="Dimensions">
       <Stack gap="xs" align="flex-start">
         {form.values.dimensions?.map((_, i) => (
-          <Group w="100%" wrap="nowrap" gap="xs" key={form.key(`dimensions.${i}`)}>
+          <Group
+            w="100%"
+            wrap="nowrap"
+            gap="xs"
+            key={form.key(`dimensions.${i}`)}
+          >
             <Tooltip color="dark.3" withArrow label="Delete parameter">
               <ActionIcon variant="default" onClick={() => removeDimension(i)}>
                 <IconTrash color="grey" size={20} />
               </ActionIcon>
             </Tooltip>
-            <TextInput flex={1} placeholder="Unit" {...form.getInputProps(`dimensions.${i}.dim`)} />
+            <TextInput
+              flex={1}
+              placeholder="Unit"
+              {...form.getInputProps(`dimensions.${i}.dim`)}
+            />
             <TextInput
               flex={1}
               placeholder="Value"

app/admin/add-barometer/file-upload.tsx

@@ -44,11 +44,15 @@ export function FileUpload({
         })),
       )
       await Promise.all(
-        urlsDto.urls.map((urlObj, index) => uploadFileToCloud(urlObj.signed, files[index])),
+        urlsDto.urls.map((urlObj, index) =>
+          uploadFileToCloud(urlObj.signed, files[index]),
+        ),
       )
       setFileNames([...fileNames, ...urlsDto.urls.map(urlObj => urlObj.public)])
     } catch (error) {
-      showError(error instanceof Error ? error.message : 'Error uploading files')
+      showError(
+        error instanceof Error ? error.message : 'Error uploading files',
+      )
     } finally {
       setIsUploading(false)
     }

app/admin/add-barometer/page.tsx

@@ -1,6 +1,14 @@
 'use client'
 
-import { Box, Title, Button, TextInput, Select, Textarea, Container } from '@mantine/core'
+import {
+  Box,
+  Title,
+  Button,
+  TextInput,
+  Select,
+  Textarea,
+  Container,
+} from '@mantine/core'
 import dayjs from 'dayjs'
 import { useForm } from '@mantine/form'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
@@ -33,8 +41,10 @@ export default function AddCard() {
       images: [],
     },
     validate: {
-      collectionId: val => (isLength(val, { max: 100 }) ? null : 'Too long catalogue ID (<100)'),
-      name: val => (isLength(val, { max: 200 }) ? null : 'Too long name (<200)'),
+      collectionId: val =>
+        isLength(val, { max: 100 }) ? null : 'Too long catalogue ID (<100)',
+      name: val =>
+        isLength(val, { max: 200 }) ? null : 'Too long name (<200)',
       images: val => (val.length > 0 ? null : 'At least one image is required'),
     },
   })
@@ -101,9 +111,21 @@ export default function AddCard() {
         <Title mb="lg" order={3} tt="capitalize">
           Add new barometer
         </Title>
-        <Box component="form" onSubmit={form.onSubmit(values => mutate(values))}>
-          <TextInput label="Catalogue No." required {...form.getInputProps('collectionId')} />
-          <TextInput label="Title" required id="barometer-name" {...form.getInputProps('name')} />
+        <Box
+          component="form"
+          onSubmit={form.onSubmit(values => mutate(values))}
+        >
+          <TextInput
+            label="Catalogue No."
+            required
+            {...form.getInputProps('collectionId')}
+          />
+          <TextInput
+            label="Title"
+            required
+            id="barometer-name"
+            {...form.getInputProps('name')}
+          />
           <TextInput
             label="Year"
             required
@@ -116,7 +138,11 @@ export default function AddCard() {
             }}
             error={form.errors.date}
           />
-          <TextInput required label="Date description" {...form.getInputProps('dateDescription')} />
+          <TextInput
+            required
+            label="Date description"
+            {...form.getInputProps('dateDescription')}
+          />
           <Select
             data={categories.data.map(({ name, id }) => ({
               label: name,
@@ -134,7 +160,9 @@ export default function AddCard() {
             }))}
             label="Manufacturer"
             allowDeselect={false}
-            leftSection={<AddManufacturer onAddManufacturer={onAddManufacturer} />}
+            leftSection={
+              <AddManufacturer onAddManufacturer={onAddManufacturer} />
+            }
             {...form.getInputProps('manufacturerId')}
             styles={{
               input: {

app/admin/reports/page.tsx

@@ -3,7 +3,11 @@
 import { useQuery } from '@tanstack/react-query'
 import { useSearchParams } from 'next/navigation'
 import Link from 'next/link'
-import { useReactTable, createColumnHelper, getCoreRowModel } from '@tanstack/react-table'
+import {
+  useReactTable,
+  createColumnHelper,
+  getCoreRowModel,
+} from '@tanstack/react-table'
 import { Anchor, Box, Center, Container, Title } from '@mantine/core'
 import dayjs from 'dayjs'
 import { fetchReportList } from '@/utils/fetch'
@@ -25,7 +29,8 @@ export default function ReportList() {
         size: String(itemsOnPage),
       }),
   })
-  const { accessor } = createColumnHelper<InaccuracyReportListDTO['reports'][number]>()
+  const { accessor } =
+    createColumnHelper<InaccuracyReportListDTO['reports'][number]>()
   const columns = [
     accessor('barometer.name', {
       header: 'Barometer',