Update eslint (#46)

* lint(*): update code according to latest eslint setup and config * lint(ui): update code according to latest next/react eslint setup and config * lint(*): fix all linting issue * lint(knip): fix all knipping issue * fix(script): revert changes did to generate-schema * fix(web/script): asset generation
GervinFung · Sep 24, 2024 · fee921a · fee921a
1 parent c20e5b8
commit fee921a
Show file tree

Hide file tree

Showing 53 changed files with 2,459 additions and 2,535 deletions.
diff --git a/apps/web/Makefile b/apps/web/Makefile
@@ -104,7 +104,7 @@ format-write:
 
 ## lint
 lint:
-	pnpm eslint --ignore-path .gitignore --ext .mjs,.tsx,.ts --color && pnpm knip
+	pnpm eslint . --color && pnpm knip
 
 ## typecheck
 typecheck:

diff --git a/apps/web/eslint.config.mjs b/apps/web/eslint.config.mjs
@@ -0,0 +1,42 @@
+import process from 'process';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { includeIgnoreFile } from '@eslint/compat';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import eslint from '@eslint/js';
+import { node, next } from '@poolofdeath20/eslint-config';
+import tseslint from 'typescript-eslint';
+
+const allowedFor = ['InternalLink', 'Image', 'Link'];
+
+export default tseslint.config(
+	includeIgnoreFile(`${process.cwd()}/.gitignore`),
+	eslint.configs.recommended,
+	...tseslint.configs.recommendedTypeChecked,
+	...tseslint.configs.strict,
+	...tseslint.configs.stylistic,
+	node,
+	{
+		...next,
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		rules: {
+			...next.rules,
+			'react/forbid-component-props': [
+				'error',
+				{
+					forbid: [
+						{
+							propName: 'style',
+							allowedFor,
+							message: `Props "style" is forbidden for all components except ${allowedFor
+								.map((component) => {
+									return `"${component}"`;
+								})
+								.join(', ')}`,
+						},
+					],
+				},
+			],
+		},
+	}
+);
diff --git a/apps/web/knip.ts b/apps/web/knip.ts
@@ -9,17 +9,20 @@ const config: KnipConfig = {
 		'script/**/*.ts',
 	],
 	ignore: ['next-sitemap.config.js', 'next/**.mjs', 'test/**/**.ts'],
-	ignoreBinaries: ['make'],
 	ignoreDependencies: [
-		'vite-node',
-		'next-sitemap',
-		'eslint',
-		'@periotable/data',
 		'@ducanh2912/next-pwa',
+		'@periotable/data',
 		'@types/jest-image-snapshot',
+		'eslint',
 		'jest-image-snapshot',
+		'next-sitemap',
 		'puppeteer',
+		'vite-node',
+		'@eslint/compat',
+		'@eslint/js',
+		'typescript-eslint',
 	],
+	ignoreBinaries: ['make'],
 };
 
 export default config;
diff --git a/apps/web/next-sitemap.config.js b/apps/web/next-sitemap.config.js
@@ -1,17 +1,13 @@
-const config = () => {
-	const url = process.env.NEXT_PUBLIC_ORIGIN;
+// eslint-disable-next-line no-undef
+const url = process.env.NEXT_PUBLIC_ORIGIN;
 
-	/** @type {import('next-sitemap').IConfig} */
-	const config = {
-		siteUrl: url,
-		generateRobotsTxt: true, // (optional)
-		exclude: ['/server-sitemap.xml'],
-		robotsTxtOptions: {
-			additionalSitemaps: [`${url}/server-sitemap.xml`],
-		},
-	};
-
-	return config;
+/** @type {import('next-sitemap').IConfig} */
+// eslint-disable-next-line no-undef, import/no-commonjs
+module.exports = {
+	siteUrl: url,
+	generateRobotsTxt: true, // (optional)
+	exclude: ['/server-sitemap.xml'],
+	robotsTxtOptions: {
+		additionalSitemaps: [`${url}/server-sitemap.xml`],
+	},
 };
-
-module.exports = config();
diff --git a/apps/web/next/web.mjs b/apps/web/next/web.mjs
@@ -1,3 +1,5 @@
+import process from 'process';
+
 import withPWAInit from '@ducanh2912/next-pwa';
 
 const withPWA = withPWAInit({

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -28,18 +28,14 @@
 	},
 	"devDependencies": {
 		"@ducanh2912/next-pwa": "^10.2.8",
-		"@poolofdeath20/eslint-config": "^0.3.4",
-		"@poolofdeath20/tsconfig": "^0.1.0",
+		"@poolofdeath20/eslint-config": "^0.4.0",
+		"@poolofdeath20/tsconfig": "^0.1.1",
 		"@types/jest-image-snapshot": "^6.4.0",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
-		"@typescript-eslint/eslint-plugin": "^7.16.1",
-		"@typescript-eslint/parser": "^7.16.1",
 		"axios": "^1.7.2",
 		"ci-info": "^4.0.0",
-		"eslint": "^8.57.0",
-		"eslint-plugin-jsx-a11y": "^6.9.0",
-		"eslint-plugin-react": "^7.35.0",
+		"eslint": "^9.9.1",
 		"gen-env-type-def": "^0.0.4",
 		"jest-image-snapshot": "^6.4.0",
 		"knip": "^5.26.0",

diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
@@ -1,19 +1,20 @@
-import React from 'react';
-
 import type { AppProps } from 'next/app';
 
 import {
 	StyledEngineProvider,
 	CssVarsProvider,
 	extendTheme,
 } from '@mui/joy/styles';
+import Script from 'next/script';
+import React from 'react';
 
 import '@fontsource-variable/jetbrains-mono/wght-italic.css';
+// eslint-disable-next-line import/no-unassigned-import
 import '@fontsource-variable/jetbrains-mono';
 
+import BackToTop from '../src/web/components/button/back-to-top';
 import ErrorBoundary from '../src/web/components/error/boundary';
 import Layout from '../src/web/components/layout';
-import BackToTop from '../src/web/components/button/back-to-top';
 
 const App = (props: AppProps) => {
 	const font = 'JetBrains Mono Variable';
@@ -27,15 +28,15 @@ const App = (props: AppProps) => {
 
 	return (
 		<StyledEngineProvider injectFirst>
-			<CssVarsProvider theme={theme} defaultMode="dark">
+			<CssVarsProvider defaultMode="dark" theme={theme}>
 				<ErrorBoundary>
 					<Layout>
 						<BackToTop />
 						<props.Component {...props.pageProps} />
-						<script
-							type="module"
+						<Script
 							src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"
-						></script>
+							type="module"
+						/>
 					</Layout>
 				</ErrorBoundary>
 			</CssVarsProvider>

diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
@@ -1,17 +1,11 @@
-import React from 'react';
-
-import Document, {
-	type DocumentContext,
-	Head,
-	Main,
-	NextScript,
-	Html,
-} from 'next/document';
+import type { DocumentContext } from 'next/document';
 
-import { getInitColorSchemeScript } from '@mui/joy/styles';
+import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
+import Document, { Head, Main, NextScript, Html } from 'next/document';
+import React from 'react';
 
 export default class Doc extends Document {
-	static getInitialProps = async (context: DocumentContext) => {
+	static override getInitialProps = async (context: DocumentContext) => {
 		const { renderPage: originalRenderPage } = context;
 
 		// Run the React rendering logic synchronously
@@ -32,11 +26,11 @@ export default class Doc extends Document {
 		return await Document.getInitialProps(context);
 	};
 
-	render = () => {
+	override render() {
 		return (
-			<Html lang="en" data-color-scheme="light">
+			<Html data-color-scheme="light" lang="en">
 				<Head>
-					<link rel="manifest" href="/manifest.json" />
+					<link href="/manifest.json" rel="manifest" />
 				</Head>
 				<body
 					style={{
@@ -45,11 +39,11 @@ export default class Doc extends Document {
 						overflowX: 'hidden',
 					}}
 				>
-					{getInitColorSchemeScript({ defaultMode: 'dark' })}
+					<InitColorSchemeScript defaultMode="dark" />
 					<Main />
 					<NextScript />
 				</body>
 			</Html>
 		);
-	};
+	}
 }
diff --git a/apps/web/pages/classifications/[classification].tsx b/apps/web/pages/classifications/[classification].tsx
@@ -1,10 +1,9 @@
-import type { GetStaticPaths, GetStaticProps } from 'next';
-
+import type { Classification } from '../../src/common/classfication';
 import type { Argument } from '@poolofdeath20/util';
+import type { GetStaticPaths, GetStaticProps } from 'next';
 
-import Index from '../';
+import Index from '..';
 import classifications, {
-	type Classification,
 	transformCategory,
 } from '../../src/common/classfication';
 import { parseQueryParam } from '../../src/common/string';

diff --git a/apps/web/pages/compounds/index.tsx b/apps/web/pages/compounds/index.tsx
@@ -1,39 +1,36 @@
-import React from 'react';
+import type { Compounds } from '../../src/web/components/compounds';
 
 import Box from '@mui/joy/Box';
-
-import { Optional } from '@poolofdeath20/util';
-
 import data from '@periotable/data';
+import { Optional } from '@poolofdeath20/util';
+import React from 'react';
 
+import ListOfCompounds from '../../src/web/components/compounds';
 import Seo from '../../src/web/components/seo';
-import ListOfCompounds, {
-	type Compounds,
-} from '../../src/web/components/compounds';
 
 const Compounds = () => {
 	const compounds = data.flatMap((value) => {
 		return value.compounds;
 	}) as Compounds;
 
 	return (
-		<Box display="flex" justifyContent="center" alignItems="center" pb={8}>
+		<Box alignItems="center" display="flex" justifyContent="center" pb={8}>
 			<Seo
-				url="/compounds"
-				title={Optional.some('Compounds')}
 				description={`All ${compounds.length} compounds available with their molecular formula and names. Some compounds have articles on Wikipedia`}
 				keywords={[
 					'compounds',
 					'molecular formula',
 					'names',
 					'articles',
 				]}
+				title={Optional.some('Compounds')}
+				url="/compounds"
 			/>
 			<Box width="90%">
 				<ListOfCompounds
-					useNativeRouter={false}
 					compounds={compounds}
 					path="/compounds"
+					useNativeRouter={false}
 				/>
 			</Box>
 		</Box>

diff --git a/apps/web/pages/elements/[name]/[section].tsx b/apps/web/pages/elements/[name]/[section].tsx
@@ -1,16 +1,13 @@
 import type { GetStaticPaths, GetStaticProps } from 'next';
 
-import { Defined } from '@poolofdeath20/util';
-
 import data from '@periotable/data';
-
-import Element, {
-	listOfPropertiesTitle,
-	titleToId,
-	getStaticPaths as getStaticPathsIndex,
-} from './';
+import { Defined } from '@poolofdeath20/util';
 
 import { parseQueryParam } from '../../../src/common/string';
+import { titleToId } from '../../../src/web/components/elements/properties';
+import { listOfPropertiesTitle } from '../../../src/web/components/elements/properties-list';
+
+import Element, { getStaticPaths as getStaticPathsIndex } from '.';
 
 const getStaticPaths = (() => {
 	const result = getStaticPathsIndex();
@@ -32,12 +29,12 @@ const getStaticPaths = (() => {
 	};
 }) satisfies GetStaticPaths;
 
-const getStaticProps = (async (context) => {
-	const name = parseQueryParam(context.params?.name);
+const getStaticProps = ((context) => {
+	const name = parseQueryParam(context.params?.['name']);
 
-	const section = parseQueryParam(context.params?.section);
+	const section = parseQueryParam(context.params?.['section']);
 
-	return {
+	return Promise.resolve({
 		props: Defined.parse(
 			data.find((element) => {
 				return element.name_en.toLowerCase() === name;
@@ -53,7 +50,7 @@ const getStaticProps = (async (context) => {
 				};
 			})
 			.orThrow(`Element not found: ${name}`),
-	};
+	});
 }) satisfies GetStaticProps;
 
 const ElementWithSection = Element;