simplify eslint configs + add CI job

.github/workflows/ci.yml

@@ -37,6 +37,30 @@ jobs:
       - name: Perform typechecks
         run: pnpm typecheck
 
+  eslint:
+    name: TypeScript
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 7.x.x
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install pnpm dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Perform typechecks
+        run: pnpm lint
+
   rustfmt:
     name: rustfmt
     runs-on: ubuntu-latest

apps/landing/.eslintrc.js

@@ -1,8 +1,7 @@
 module.exports = {
-	...require('@sd/config/eslint-react.js'),
+	extends: [require.resolve('@sd/config/eslint/web.js')],
 	parserOptions: {
 		tsconfigRootDir: __dirname,
 		project: './tsconfig.json'
-	},
-	ignorePatterns: ['**/*.js', '**/*.json', 'node_modules', 'public', 'dist', 'vite.config.ts']
+	}
 };

apps/landing/package.json

@@ -7,7 +7,7 @@
 		"build": "vite build",
 		"server": "ts-node ./server",
 		"server:prod": "cross-env NODE_ENV=production ts-node ./server",
-		"lint": "eslint src/**/*.{ts,tsx} && tsc --noEmit",
+		"lint": "eslint src",
 		"typecheck": "tsc -b"
 	},
 	"dependencies": {

apps/mobile/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-	...require('@sd/config/eslint-react-native.js'),
+	extends: [require.resolve('@sd/config/eslint/reactNative.js')],
 	parserOptions: {
 		tsconfigRootDir: __dirname,
 		project: './tsconfig.json'

apps/mobile/package.json

@@ -10,7 +10,7 @@
 		"ios": "expo run:ios",
 		"xcode": "open ios/spacedrive.xcworkspace",
 		"android-studio": "open -a '/Applications/Android Studio.app' ./android",
-		"lint": "eslint src/**/*.{ts,tsx} && tsc --noEmit",
+		"lint": "eslint src",
 		"postinstall": "node scripts/postinstall.js",
 		"typecheck": "tsc -b"
 	},

package.json

@@ -21,7 +21,8 @@
 		"client": "pnpm --filter @sd/client -- ",
 		"prisma": "cd core && cargo prisma",
 		"codegen": "cargo test -p sd-core api::tests::test_and_export_rspc_bindings -- --exact",
-		"typecheck": "turbo run typecheck"
+		"typecheck": "turbo run typecheck",
+		"lint": "turbo run lint"
 	},
 	"pnpm": {
 		"overrides": {

packages/client/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-	...require('@sd/config/eslint-react.js'),
+	extends: [require.resolve('@sd/config/eslint/web.js')],
 	parserOptions: {
 		tsconfigRootDir: __dirname,
 		project: './tsconfig.json'

packages/client/package.json

@@ -8,7 +8,7 @@
 	],
 	"scripts": {
 		"test": "jest",
-		"lint": "eslint src/**/*.{ts,tsx} && tsc --noEmit",
+		"lint": "eslint src",
 		"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
 		"typecheck": "tsc -b",
 		"build": "tsc"

packages/client/src/index.ts

@@ -1,4 +1,5 @@
 declare global {
+	// eslint-disable-next-line
 	var isDev: boolean;
 }
 

packages/config/eslint-react-native.js

@@ -1,59 +0,0 @@
-module.exports = {
-	env: {
-		'react-native/react-native': true
-	},
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		ecmaFeatures: {
-			jsx: true
-		},
-		ecmaVersion: 12,
-		sourceType: 'module'
-	},
-	extends: [
-		'eslint:recommended',
-		'plugin:react/recommended',
-		'plugin:react-hooks/recommended',
-		'plugin:@typescript-eslint/recommended'
-	],
-	plugins: ['react', 'react-native'],
-	rules: {
-		'react/display-name': 'off',
-		'react/prop-types': 'off',
-		'react/no-unescaped-entities': 'off',
-		'react/react-in-jsx-scope': 'off',
-		'react-hooks/rules-of-hooks': 'error',
-		'react-hooks/exhaustive-deps': 'warn',
-		'@typescript-eslint/no-unused-vars': 'off',
-		'@typescript-eslint/ban-ts-comment': 'off',
-		'@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-var-requires': 'off',
-		'@typescript-eslint/no-non-null-assertion': 'off',
-		'@typescript-eslint/explicit-module-boundary-types': 'off',
-		'no-control-regex': 'off',
-		'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'],
-		'no-restricted-imports': [
-			'error',
-			{
-				paths: [
-					{
-						name: 'react-native',
-						importNames: ['SafeAreaView'],
-						message: 'Import SafeAreaView from react-native-safe-area-context instead'
-					},
-					{
-						name: 'react-native',
-						importNames: ['Button'],
-						message: 'Import Button from ~/components instead.'
-					}
-				]
-			}
-		]
-	},
-	ignorePatterns: ['**/*.js', '**/*.json', 'node_modules', 'android', 'ios', '.expo'],
-	settings: {
-		react: {
-			version: 'detect'
-		}
-	}
-};

packages/config/eslint/base.js

@@ -1,8 +1,4 @@
 module.exports = {
-	env: {
-		browser: true,
-		node: true
-	},
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
 		ecmaFeatures: {
@@ -16,7 +12,8 @@ module.exports = {
 		'plugin:react/recommended',
 		'plugin:react-hooks/recommended',
 		'plugin:@typescript-eslint/recommended',
-		'prettier'
+		'prettier',
+		'turbo'
 	],
 	plugins: ['react'],
 	rules: {
@@ -24,7 +21,7 @@ module.exports = {
 		'react/prop-types': 'off',
 		'react/no-unescaped-entities': 'off',
 		'react/react-in-jsx-scope': 'off',
-		'react-hooks/rules-of-hooks': 'error',
+		'react-hooks/rules-of-hooks': 'warn',
 		'react-hooks/exhaustive-deps': 'warn',
 		'@typescript-eslint/no-unused-vars': 'off',
 		'@typescript-eslint/ban-ts-comment': 'off',
@@ -32,10 +29,12 @@ module.exports = {
 		'@typescript-eslint/no-var-requires': 'off',
 		'@typescript-eslint/no-non-null-assertion': 'off',
 		'@typescript-eslint/explicit-module-boundary-types': 'off',
+		'@typescript-eslint/no-empty-interface': 'off',
+		'@typescript-eslint/no-empty-function': 'off',
 		'no-control-regex': 'off',
 		'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs']
 	},
-	ignorePatterns: ['**/*.js', '**/*.json', 'node_modules'],
+	ignorePatterns: ['dist', '**/*.js', '**/*.json', 'node_modules'],
 	settings: {
 		react: {
 			version: 'detect'

packages/config/eslint/reactNative.js

@@ -0,0 +1,27 @@
+module.exports = {
+	extends: [require.resolve('./base.js')],
+	env: {
+		'react-native/react-native': true
+	},
+	plugins: ['react-native'],
+	ignorePatterns: ['android', 'ios', '.expo'],
+	rules: {
+		'no-restricted-imports': [
+			'error',
+			{
+				paths: [
+					{
+						name: 'react-native',
+						importNames: ['SafeAreaView'],
+						message: 'Import SafeAreaView from react-native-safe-area-context instead'
+					}
+					// {
+					// 	name: 'react-native',
+					// 	importNames: ['Button'],
+					// 	message: 'Import Button from ~/components instead.'
+					// }
+				]
+			}
+		]
+	}
+};

packages/config/eslint/web.js

@@ -0,0 +1,8 @@
+module.exports = {
+	extends: [require.resolve('./base.js')],
+	ignorePatterns: ['public', 'vite.config.ts'],
+	env: {
+		browser: true,
+		node: true
+	}
+};

packages/config/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+	vite: require('./vite')
+};

packages/config/package.json

@@ -3,16 +3,18 @@
 	"version": "0.0.0",
 	"license": "GPL-3.0-only",
 	"exports": {
-		"./vite": "./vite/index.js"
+		"./*": "./*",
+		"./vite": "./vite.js"
 	},
 	"files": [
 		"eslint-react.js"
 	],
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^5.39.0",
-		"@typescript-eslint/parser": "^5.39.0",
+		"@typescript-eslint/eslint-plugin": "^5.48.2",
+		"@typescript-eslint/parser": "^5.48.2",
 		"eslint": "^8.24.0",
 		"eslint-config-prettier": "^8.5.0",
+		"eslint-config-turbo": "^0.0.7",
 		"eslint-plugin-react": "^7.31.8",
 		"eslint-plugin-react-hooks": "^4.6.0"
 	}

packages/interface/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-	...require('@sd/config/eslint-react.js'),
+	extends: [require.resolve('@sd/config/eslint/web.js')],
 	parserOptions: {
 		tsconfigRootDir: __dirname,
 		project: './tsconfig.json'

packages/interface/package.json

@@ -13,7 +13,7 @@
 	},
 	"scripts": {
 		"icons": "./scripts/generateSvgImports.mjs",
-		"lint": "eslint src/**/*.{ts,tsx} && tsc --noEmit",
+		"lint": "eslint src",
 		"typecheck": "tsc -b",
 		"build": "tsc"
 	},
@@ -65,6 +65,7 @@
 	},
 	"devDependencies": {
 		"@sd/config": "workspace:*",
+		"eslint-config-sd": "workspace:*",
 		"@types/babel-core": "^6.25.7",
 		"@types/byte-size": "^8.1.0",
 		"@types/loadable__component": "^5.13.4",

packages/interface/src/components/dialog/AddLocationDialog.tsx

@@ -4,7 +4,7 @@ import { Input, useZodForm, z } from '@sd/ui/src/forms';
 
 const schema = z.object({ path: z.string() });
 
-interface Props extends UseDialogProps {}
+type Props = UseDialogProps;
 
 export default function AddLocationDialog(props: Props) {
 	const dialog = useDialog(props);

packages/interface/src/components/dialog/BackupRestoreDialog.tsx

@@ -14,7 +14,7 @@ const schema = z.object({
 	filePath: z.string()
 });
 
-export interface BackupRestorationDialogProps extends UseDialogProps {}
+export type BackupRestorationDialogProps = UseDialogProps;
 
 export const BackupRestoreDialog = (props: BackupRestorationDialogProps) => {
 	const platform = usePlatform();

packages/interface/src/components/dialog/CreateLibraryDialog.tsx

@@ -20,7 +20,7 @@ const schema = z.object({
 	hashing_algorithm: z.string()
 });
 
-interface Props extends UseDialogProps {}
+type Props = UseDialogProps;
 
 export default function CreateLibraryDialog(props: Props) {
 	const dialog = useDialog(props);

packages/interface/src/components/dialog/KeyViewerDialog.tsx

@@ -7,7 +7,7 @@ import { useZodForm, z } from '@sd/ui/src/forms';
 import { getHashingAlgorithmString } from '~/screens/settings/library/KeysSetting';
 import { SelectOptionKeyList } from '../key/KeyList';
 
-interface KeyViewerDialogProps extends UseDialogProps {}
+type KeyViewerDialogProps = UseDialogProps;
 
 export const KeyUpdater = (props: {
 	uuid: string;

packages/interface/src/components/dialog/MasterPasswordChangeDialog.tsx

@@ -9,7 +9,7 @@ import { showAlertDialog } from '~/util/dialog';
 import { generatePassword } from '../key/KeyMounter';
 import { PasswordMeter } from '../key/PasswordMeter';
 
-export interface MasterPasswordChangeDialogProps extends UseDialogProps {}
+export type MasterPasswordChangeDialogProps = UseDialogProps;
 
 const schema = z.object({
 	masterPassword: z.string(),

packages/interface/src/components/explorer/Explorer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ExplorerData, rspc, useCurrentLibrary } from '@sd/client';
 import { useExplorerStore } from '~/hooks/useExplorerStore';
 import { Inspector } from '../explorer/Inspector';
@@ -32,50 +32,50 @@ export default function Explorer(props: Props) {
 		}
 	});
 
-	return (
-		<>
-			<div className="relative">
-				<ExplorerContextMenu>
-					<div className="relative flex flex-col w-full">
-						<TopBar showSeparator={separateTopBar} />
+	const onScroll = useCallback((y: number) => {
+		setScrollSegments((old) => {
+			return {
+				...old,
+				mainList: y
+			};
+		});
+	}, []);
+
+	return (
+		<div className="relative">
+			<ExplorerContextMenu>
+				<div className="relative flex flex-col w-full">
+					<TopBar showSeparator={separateTopBar} />
+
+					<div className="relative flex flex-row w-full max-h-full app-background">
+						{props.data && (
+							<VirtualizedList
+								data={props.data.items}
+								context={props.data.context}
+								onScroll={onScroll}
+							/>
+						)}
+						{expStore.showInspector && (
+							<div className="flex min-w-[260px] max-w-[260px]">
+								<Inspector
+									onScroll={(e) => {
+										const y = (e.target as HTMLElement).scrollTop;
 
-						<div className="relative flex flex-row w-full max-h-full app-background">
-							{props.data && (
-								<VirtualizedList
-									data={props.data.items || []}
-									context={props.data.context}
-									onScroll={(y) => {
 										setScrollSegments((old) => {
 											return {
 												...old,
-												mainList: y
+												inspector: y
 											};
 										});
 									}}
+									key={props.data?.items[expStore.selectedRowIndex]?.id}
+									data={props.data?.items[expStore.selectedRowIndex]}
 								/>
-							)}
-							{expStore.showInspector && (
-								<div className="flex min-w-[260px] max-w-[260px]">
-									<Inspector
-										onScroll={(e) => {
-											const y = (e.target as HTMLElement).scrollTop;
-
-											setScrollSegments((old) => {
-												return {
-													...old,
-													inspector: y
-												};
-											});
-										}}
-										key={props.data?.items[expStore.selectedRowIndex]?.id}
-										data={props.data?.items[expStore.selectedRowIndex]}
-									/>
-								</div>
-							)}
-						</div>
+							</div>
+						)}
 					</div>
-				</ExplorerContextMenu>
-			</div>
-		</>
+				</div>
+			</ExplorerContextMenu>
+		</div>
 	);
 }

packages/interface/src/components/explorer/VirtualizedList.tsx

@@ -1,5 +1,5 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useKey, useOnWindowResize } from 'rooks';
 import { ExplorerContext, ExplorerItem } from '@sd/client';
@@ -17,7 +17,7 @@ interface Props {
 	onScroll?: (posY: number) => void;
 }
 
-export const VirtualizedList: React.FC<Props> = ({ data, context, onScroll }) => {
+export const VirtualizedList = memo(({ data, context, onScroll }: Props) => {
 	const scrollRef = useRef<HTMLDivElement>(null);
 	const innerRef = useRef<HTMLDivElement>(null);
 
@@ -56,7 +56,7 @@ export const VirtualizedList: React.FC<Props> = ({ data, context, onScroll }) =>
 		el.addEventListener('scroll', onElementScroll);
 
 		return () => el.removeEventListener('scroll', onElementScroll);
-	}, [scrollRef, onScroll]);
+	}, [onScroll]);
 
 	const rowVirtualizer = useVirtualizer({
 		count: amountOfRows,
@@ -169,7 +169,7 @@ export const VirtualizedList: React.FC<Props> = ({ data, context, onScroll }) =>
 			</div>
 		</div>
 	);
-};
+});
 
 interface WrappedItemProps {
 	item: ExplorerItem;
@@ -179,7 +179,7 @@ interface WrappedItemProps {
 }
 
 // Wrap either list item or grid item with click logic as it is the same for both
-const WrappedItem: React.FC<WrappedItemProps> = ({ item, index, isSelected, kind }) => {
+const WrappedItem = memo(({ item, index, isSelected, kind }: WrappedItemProps) => {
 	const [_, setSearchParams] = useSearchParams();
 
 	const onDoubleClick = useCallback(() => {
@@ -191,6 +191,7 @@ const WrappedItem: React.FC<WrappedItemProps> = ({ item, index, isSelected, kind
 	}, [isSelected, index]);
 
 	const ItemComponent = kind === 'list' ? FileRow : FileItem;
+
 	return (
 		<ItemComponent
 			data={item}
@@ -200,18 +201,4 @@ const WrappedItem: React.FC<WrappedItemProps> = ({ item, index, isSelected, kind
 			selected={isSelected}
 		/>
 	);
-
-	// // Memorize the item so that it doesn't get re-rendered when the selection changes
-	// return useMemo(() => {
-	// 	const ItemComponent = kind === 'list' ? FileRow : FileItem;
-	// 	return (
-	// 		<ItemComponent
-	// 			data={item}
-	// 			index={index}
-	// 			onClick={onClick}
-	// 			onDoubleClick={onDoubleClick}
-	// 			selected={isSelected}
-	// 		/>
-	// 	);
-	// }, [item, index, isSelected]);
-};
+});

packages/interface/src/screens/settings/node/LibrariesSettings.tsx

@@ -22,7 +22,7 @@ function LibraryListItem(props: { library: LibraryConfigWrapped; current: boolea
 				<p className="mt-0.5 text-xs text-ink-dull">{props.library.uuid}</p>
 			</div>
 			<div className="flex flex-row items-center space-x-2">
-				<Button className="!p-1.5" onClick={() => {}} variant="gray">
+				<Button className="!p-1.5" variant="gray">
 					<Tooltip label="TODO">
 						<Database className="w-4 h-4" />
 					</Tooltip>

packages/interface/tsconfig.json

@@ -9,6 +9,7 @@
 		"types": ["vite-plugin-svgr/client", "vite/client"]
 	},
 	"include": ["src"],
+	"exclude": ["dist"],
 	"references": [
 		{
 			"path": "../ui"

packages/ui/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+	extends: [require.resolve('@sd/config/eslint/web.js')],
+	parserOptions: {
+		tsconfigRootDir: __dirname,
+		project: './tsconfig.json'
+	}
+};

packages/ui/package.json

@@ -16,6 +16,7 @@
 	"scripts": {
 		"storybook": "start-storybook -p 6006",
 		"storybook:build": "build-storybook",
+		"lint": "eslint src",
 		"typecheck": "tsc -b",
 		"build": "tsc"
 	},

packages/ui/src/Dialog.tsx

@@ -75,7 +75,7 @@ function Remover({ id }: { id: number }) {
 		() => () => {
 			dialogManager.remove(id);
 		},
-		[]
+		[id]
 	);
 
 	return null;

packages/ui/src/Dropdown.tsx

@@ -39,7 +39,7 @@ type DropdownItemProps =
 			VariantProps<typeof itemStyles>;
 
 export const Item = ({ to, className, icon: Icon, children, ...props }: DropdownItemProps) => {
-	let content = (
+	const content = (
 		<>
 			{Icon && <Icon weight="bold" className={itemIconStyles(props)} />}
 			<span className="text-left">{children}</span>

packages/ui/src/utils.tsx

@@ -17,7 +17,7 @@ type TailwindFactory = {
 	<T>(c: T): ClassnameFactory<T>;
 };
 
-export const tw = new Proxy((() => {}) as unknown as TailwindFactory, {
+export const tw = new Proxy({} as unknown as TailwindFactory, {
 	get: (_, property: string) => twFactory(property),
 	apply: (_, __, [el]: [React.ReactElement]) => twFactory(el)
 });