autofix semi rule

e2e/home.spec.ts

@@ -1,8 +1,8 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
 
 test('has title', async ({ page }) => {
-    await page.goto('/');
+    await page.goto('/')
 
     // Expect a title "to contain" a substring.
-    await expect(page).toHaveTitle(/WiSE/);
-});
+    await expect(page).toHaveTitle(/WiSE/)
+})

package.json

@@ -55,4 +55,4 @@
         "vite": "5.2.6",
         "vitest": "1.5.0"
     }
-}
+}

playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test'
 
 /**
  * Read environment variables from file.
@@ -74,4 +74,4 @@ export default defineConfig({
     //   url: 'http://127.0.0.1:3000',
     //   reuseExistingServer: !process.env.CI,
     // },
-});
+})

src/@types/i18next.d.ts

@@ -1,4 +1,4 @@
-import { resources, defaultNS } from './i18n';
+import { resources, defaultNS } from './i18n'
 
 declare module 'i18next' {
     interface CustomTypeOptions {

src/components/Footer/Footer.tsx

@@ -1,12 +1,12 @@
-import { FC } from 'react';
+import { FC } from 'react'
 import BottomNavigation from '@mui/material/BottomNavigation'
 import Paper from '@mui/material/Paper'
-import InstagramIcon from '@mui/icons-material/Instagram';
-import LinkedInIcon from '@mui/icons-material/LinkedIn';
-import FacebookIcon from '@mui/icons-material/Facebook';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import EventIcon from '@mui/icons-material/Event';
-import FooterIcon from './FooterIcon';
+import InstagramIcon from '@mui/icons-material/Instagram'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import EventIcon from '@mui/icons-material/Event'
+import FooterIcon from './FooterIcon'
 
 
 const Footer: FC = () => {

src/components/Footer/FooterIcon.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC } from 'react'
 import BottomNavigationAction from '@mui/material/BottomNavigationAction'
 
 interface FooterIconProps {

src/components/Header/DesktopHeader.tsx

@@ -1,12 +1,12 @@
-import { FC } from 'react';
+import { FC } from 'react'
 
 import Stack from '@mui/material/Stack'
 import Toolbar from '@mui/material/Toolbar'
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import SideDrawer from '../SideDrawer/SideDrawer';
+import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+import SideDrawer from '../SideDrawer/SideDrawer'
 import StyledNavLink from '@/components/StyledNavLink/StyledNavLink'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
@@ -23,7 +23,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
 
 
 const DesktopHeader: FC = () => {
-    const { t } = useTranslation();
+    const { t } = useTranslation()
 
     return <StyledToolbar aria-label="desktop-toolbar">
         <Stack direction='row' spacing={2} sx={{ alignItems: 'center' }}>

src/components/Header/Header.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import AppBar from '@mui/material/AppBar'
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import MobileHeader from './MobileHeader';
-import DesktopHeader from './DesktopHeader';
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import MobileHeader from './MobileHeader'
+import DesktopHeader from './DesktopHeader'
 
 
 

src/components/ImageCard/ImageCard.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC } from 'react'
 import Card from '@mui/material/Card'
 
 interface ImageCardProps {

src/components/LocaleToggle/LocaleToggle.tsx

@@ -1,28 +1,28 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 import Locale from '@/i18n/locales'
 
 const LocaleToggle: FC = () => {
-    const [locale, setLocale] = useState(Locale.EN);
-    const { i18n } = useTranslation();
+    const [locale, setLocale] = useState(Locale.EN)
+    const { i18n } = useTranslation()
 
     const changeLanguage = useCallback(async (nextLocale: Locale) => {
         await i18n.changeLanguage(nextLocale).then(() => {
-            setLocale(nextLocale);
-            localStorage.setItem('locale', nextLocale);
-        });
-    }, [i18n]);
+            setLocale(nextLocale)
+            localStorage.setItem('locale', nextLocale)
+        })
+    }, [i18n])
 
     useEffect(() => {
-        const savedLocale = localStorage.getItem('locale');
+        const savedLocale = localStorage.getItem('locale')
         if (savedLocale) {
             changeLanguage(savedLocale as Locale).catch((e: Error) => {
                 console.error(e)
             })
         }
-    }, [changeLanguage]);
+    }, [changeLanguage])
 
     const handleChange = (_: React.MouseEvent<HTMLElement>, nextLocale: Locale) => {
         changeLanguage(nextLocale).catch((e: Error) => {
@@ -38,7 +38,7 @@ const LocaleToggle: FC = () => {
             <ToggleButton value={Locale.EN}>English</ToggleButton>
             <ToggleButton value={Locale.JA}>日本語</ToggleButton>
         </ToggleButtonGroup>
-    );
+    )
 }
 
 export default LocaleToggle

src/components/LocaleToggle/__test__/LocaleToggle.test.tsx

@@ -1,27 +1,27 @@
 import { describe, expect, it } from 'vitest'
 import { render } from '@/tests/customRender'
-import LocaleToggle from '../LocaleToggle';
+import LocaleToggle from '../LocaleToggle'
 import userEvent from '@testing-library/user-event'
 import { screen } from '@testing-library/react'
 
 describe('LocaleToggle', () => {
     it('renders correctly', async () => {
         render(<LocaleToggle />)
 
-        const english = await screen.findByText('English');
-        const japanese = await screen.findByText('日本語');
-        expect(english).toBeInTheDocument();
-        expect(japanese).toBeInTheDocument();
-    });
+        const english = await screen.findByText('English')
+        const japanese = await screen.findByText('日本語')
+        expect(english).toBeInTheDocument()
+        expect(japanese).toBeInTheDocument()
+    })
 })
 
 it('changes locale when toggling', async () => {
-    render(<LocaleToggle />);
-    const japaneseButton = screen.getByText('日本語');
+    render(<LocaleToggle />)
+    const japaneseButton = screen.getByText('日本語')
 
     const user = userEvent.setup()
     await user.click(japaneseButton)
-    expect(localStorage.getItem('locale')).toBe('ja');
+    expect(localStorage.getItem('locale')).toBe('ja')
 
-    localStorage.removeItem('locale');
-});
+    localStorage.removeItem('locale')
+})

src/components/SideDrawer/SideDrawer.tsx

@@ -17,11 +17,11 @@ const SideDrawer: FC = () => {
                     ((event as React.KeyboardEvent).key === 'Tab' ||
                         (event as React.KeyboardEvent).key === 'Shift')
                 ) {
-                    return;
+                    return
                 }
 
                 setOpen(open)
-            };
+            }
 
     return <>
         <IconButton

src/components/StyledNavLink/StyledNavLink.tsx

@@ -1,5 +1,5 @@
-import { styled } from '@mui/material/styles';
-import { NavLink } from 'react-router-dom';
+import { styled } from '@mui/material/styles'
+import { NavLink } from 'react-router-dom'
 
 const StyledNavLink = styled(NavLink)(() => ({
     color: 'white',

src/components/TextBlock/Body1.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react'
-import Typography from '@mui/material/Typography';
+import Typography from '@mui/material/Typography'
 
 interface Body1Props {
     children: ReactNode

src/i18n/config.ts

@@ -20,4 +20,4 @@ i18next.use(initReactI18next).init({
     // if you see an error like: "Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type xyz"
     // set returnNull to false (and also in the i18next.d.ts options)
     // returnNull: false,
-});
+})

src/main.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import CssBaseline from '@mui/material/CssBaseline';
-import Router from './routes/Router';
-import GlobalStyles from '@mui/material/GlobalStyles';
-import CustomThemeProvider from './theme/CustomThemeProvider';
-import './i18n/config';
+import CssBaseline from '@mui/material/CssBaseline'
+import Router from './routes/Router'
+import GlobalStyles from '@mui/material/GlobalStyles'
+import CustomThemeProvider from './theme/CustomThemeProvider'
+import './i18n/config'
 import './index.css'
 
 import '@fontsource/noto-sans-jp/300.css'

src/routes/BaseLayout.tsx

@@ -10,7 +10,7 @@ const Loader = () => (
     <div>
         <div>Loading...</div>
     </div>
-);
+)
 
 const BaseLayout: FC = () => {
     return <Suspense fallback={<Loader />}>

src/routes/CodeOfConduct/CodeOfConduct.tsx

@@ -2,10 +2,10 @@ import { FC } from 'react'
 import Container from '@mui/material/Container'
 import Stack from '@mui/material/Stack'
 import { Typography } from '@mui/material'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 
 const CodeOfConduct: FC = () => {
-    const { t } = useTranslation();
+    const { t } = useTranslation()
 
     return <Container style={{ padding: 32 }}>
         <Stack spacing={2}>

src/routes/Home/Home.tsx

@@ -1,12 +1,12 @@
-import { FC } from 'react';
+import { FC } from 'react'
 import Stack from '@mui/material/Stack'
 import Container from '@mui/material/Container'
-import Typography from '@mui/material/Typography';
+import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 
 const Home: FC = () => {
-    const { t } = useTranslation();
+    const { t } = useTranslation()
 
     return <Container style={{ padding: 32 }}>
         <Stack spacing={2}>

src/routes/ThemePreview/ColorSwatch.tsx

@@ -1,5 +1,5 @@
 import Paper from '@mui/material/Paper'
-import { Theme, styled } from '@mui/material/styles';
+import { Theme, styled } from '@mui/material/styles'
 
 interface SwatchProps {
     color: string
@@ -23,6 +23,6 @@ const ColorSwatch = styled(Paper)<SwatchProps>(({ theme, color }) => ({
     padding: theme.spacing(4),
     textAlign: 'center',
     color: theme.palette.text.secondary,
-}));
+}))
 
 export default ColorSwatch

src/routes/ThemePreview/ThemePreview.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react';
-import Button from '@mui/material/Button';
+import { FC } from 'react'
+import Button from '@mui/material/Button'
 import Container from '@mui/material/Container'
-import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Grid'
+import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import Divider from '@mui/material/Divider'
-import ColorSwatch from './ColorSwatch';
+import ColorSwatch from './ColorSwatch'
 import StarIcon from '@mui/icons-material/Star'
 
 

src/tests/customRender.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import { render, RenderOptions } from '@testing-library/react'
-import CssBaseline from '@mui/material/CssBaseline';
-import CustomThemeProvider from '@/theme/CustomThemeProvider';
-import { MemoryRouter } from 'react-router-dom';
-import '@/i18n/config';
+import CssBaseline from '@mui/material/CssBaseline'
+import CustomThemeProvider from '@/theme/CustomThemeProvider'
+import { MemoryRouter } from 'react-router-dom'
+import '@/i18n/config'
 
 // eslint-disable-next-line react-refresh/only-export-components
 const AllTheProviders = ({ children }: { children: React.ReactNode }) => {

src/theme/customColorConfig.ts

@@ -2,7 +2,7 @@
 Custom Colors in Typescript requires module augmentation
 Read more: https://mui.com/material-ui/customization/palette/#typescript
 */
-import '@mui/material';
+import '@mui/material'
 
 
 declare module '@mui/material/styles' {

src/theme/theme.ts

@@ -1,6 +1,6 @@
 import createTheme from '@mui/material/styles/createTheme'
-import typography from './typography/default';
-import { teal, lightBlue, deepPurple, purple, grey } from '@mui/material/colors';
+import typography from './typography/default'
+import { teal, lightBlue, deepPurple, purple, grey } from '@mui/material/colors'
 
 const theme = createTheme({
     palette: {
@@ -38,6 +38,6 @@ const theme = createTheme({
 
     },
     typography
-});
+})
 
 export default theme

src/theme/typography/default.ts

@@ -1,4 +1,4 @@
-import { TypographyOptions } from '@mui/material/styles/createTypography';
+import { TypographyOptions } from '@mui/material/styles/createTypography'
 
 const typography: TypographyOptions = {
     fontFamily: ['Noto Sans JP', 'serif'].join(','),