Migrate to ESLint 9 flat config (#239)

* eslint 9

* fix lint errors

* update package-lock.json

.eslintrc.json

@@ -1,27 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "semi": [
-      "error",
-      "never"
-    ],
-    "space-before-function-paren": "off",
-    "comma-dangle": [
-      "error",
-      "always-multiline"
-    ],
-    "quotes": [
-      "warn",
-      "double"
-    ],
-    "no-tabs": "error",
-    "indent": [
-      "warn",
-      4
-    ],
-    "no-var": "error",
-    "eol-last": ["error", "always"],
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error"
-  }
-}

eslint.config.js

@@ -0,0 +1,42 @@
+import { dirname } from "path"
+import { fileURLToPath } from "url"
+import { FlatCompat } from "@eslint/eslintrc"
+import { defineConfig, globalIgnores } from "eslint/config"
+import globals from "globals"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+})
+
+export default defineConfig([
+    globalIgnores([
+        ".next/**",
+        "out/**",
+        "build/**",
+        "modules/**",
+        "public/static/**",
+        "next-env.d.ts",
+    ]),
+    ...compat.extends("next/core-web-vitals"),
+    {
+        languageOptions: {
+            globals: globals.browser,
+        },
+    },
+    {
+        rules: {
+            semi: ["error", "never"],
+            indent: ["warn", 4],
+            quotes: ["warn", "double"],
+            "eol-last": ["error", "always"],
+            "comma-dangle": ["error", "always-multiline"],
+            "no-tabs": "error",
+            "no-var": "error",
+            "space-before-function-paren": "off",
+            "react/jsx-uses-react": "error",
+            "react/jsx-uses-vars": "error",
+        },
+    },
+])

package.json

@@ -45,9 +45,10 @@
         "@types/node": "^18.13.0",
         "@types/react": "^18.0.18",
         "@types/sharp": "^0.29.2",
-        "eslint": "^8.42.0",
+        "eslint": "^9.0.0",
         "eslint-config-next": "^15.0.0",
         "feed": "^4.1.0",
+        "globals": "^16.0.0",
         "typescript": "^4.9.0"
     }
 }

scripts/feed.js

@@ -1,15 +1,15 @@
-const { Feed } = require('feed')
-const axios = require('axios')
-const fs = require('fs').promises
+const { Feed } = require("feed")
+const axios = require("axios")
+const fs = require("fs").promises
 
 const api = axios.create({
-    baseURL: 'https://api.tmshv.com/hudozka',
+    baseURL: "https://api.tmshv.com/hudozka",
 })
 
 async function getArticles(limit) {
-    const query = ['post', 'event', 'album']
+    const query = ["post", "event", "album"]
         .map(t => `tag=${t}`)
-        .join('&')
+        .join("&")
     const url = `/api/pages/tags?${query}&sortBy=-date&skip=0&pageSize=${limit}`
     const res = await api.get(url)
 
@@ -19,15 +19,15 @@ async function getArticles(limit) {
 (async () => {
     const articles = await getArticles(30)
 
-    const url = 'https://art.shlisselburg.org'
+    const url = "https://art.shlisselburg.org"
     const feed = new Feed({
-        title: 'Шлиссельбургская ДХШ',
+        title: "Шлиссельбургская ДХШ",
         id: url,
         link: url,
         feedLinks: {
-            atom: 'https://art.shlisselburg.org/feed.xml',
+            atom: "https://art.shlisselburg.org/feed.xml",
         },
-    });
+    })
 
     articles.forEach(article => {
         feed.addItem({
@@ -41,6 +41,6 @@ async function getArticles(limit) {
 
     const content = feed.atom1()    
 
-    await fs.writeFile('dist/feed.xml', content, { encoding: 'utf-8' })
+    await fs.writeFile("dist/feed.xml", content, { encoding: "utf-8" })
 })()
- 
+ 

scripts/sitemap.js

@@ -1,28 +1,28 @@
-const sitemap = require('sitemap')
-const axios = require('axios')
-const fs = require('fs').promises
-const homeUrl = 'https://art.shlisselburg.org'
+const sitemap = require("sitemap")
+const axios = require("axios")
+const fs = require("fs").promises
+const homeUrl = "https://art.shlisselburg.org"
 const sitemapCacheTime = 600000
 
 const api = axios.create({
-    baseURL: 'https://api.tmshv.com/hudozka',
+    baseURL: "https://api.tmshv.com/hudozka",
 })
 
-async function getMenuUrls(frequency = 'daily') {
+async function getMenuUrls(frequency = "daily") {
     const menu = [
-        '/',
-        '/collective',
+        "/",
+        "/collective",
     ]
     return menu
         // .filter(i => 'url' in i)
         .map(url => ({
             url,
-            changefreq: frequency
+            changefreq: frequency,
         }))
 }
 
-async function getPageUrls(frequency = 'daily') {
-    const res = await api.get('/api/pages/urls')
+async function getPageUrls(frequency = "daily") {
+    const res = await api.get("/api/pages/urls")
 
     return res.data.items.map(url => ({
         changefreq: frequency,
@@ -40,9 +40,9 @@ async function getPageUrls(frequency = 'daily') {
     let map = sitemap.createSitemap({
         hostname: homeUrl,
         cacheTime: sitemapCacheTime,
-        urls
+        urls,
     })
     const content = map.toString()
 
-    await fs.writeFile('dist/sitemap.xml', content, { encoding: 'utf-8' })
-})()
+    await fs.writeFile("dist/sitemap.xml", content, { encoding: "utf-8" })
+})()

src/remote/factory.ts

@@ -77,7 +77,7 @@ export async function createPageToken(component: StrapiComponent): Promise<Token
     case "hudozka.card-grid": {
         const items = await Promise.all(component.items
             .filter(Boolean)
-            .map(createCardGrid)
+            .map(createCardGrid),
         )
         return {
             token: "grid",
@@ -208,7 +208,7 @@ export async function createCardGrid(card: StrapiPageCard): Promise<PageCardDto>
 
 export async function createHomeCards(data: StrapiHome): Promise<PageCardDto[]> {
     const items = await Promise.all(data.cards
-        .map(createCardGrid)
+        .map(createCardGrid),
     )
     return items
         .filter(x => !!x.url)

src/ui/Box/index.tsx

@@ -29,7 +29,7 @@ export const Box: React.FC<BoxProps> = ({
     ...props
 }) => {
     const newProps = {
-        className: cx(s.box, className, { vertical, align, center, wrap }),
+        className: cx(className, s.box, { vertical, align, center, wrap }),
         style: {
             ...style,
             gap,

src/ui/Overlay/Transition.tsx

@@ -17,7 +17,7 @@ export const Transition: React.FC<TransitionProps> = props => {
     }, [opacity])
     const transition = useMemo(
         () => `all ${props.duration}ms`,
-        [props.duration]
+        [props.duration],
     )
 
     useEffect(() => {