refactor(core): improve ESLint and TypeScript config

Update the ESLint configuration to include the ES2022 environment and add support for *.tsx files. Integrate React plugin and adjust parser options to handle JSX and include a project reference to tsconfig.json. Relax TypeScript rules for explicit function return types and any usage. Additionally, refactor the BeSelect component to use a more specific props interface and clean up the usage of Radix UI components.
unit-mesh · Nov 8, 2024 · d52630a · d52630a
1 parent 03f6955
commit d52630a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/web/core/.eslintrc.cjs b/web/core/.eslintrc.cjs
@@ -5,7 +5,8 @@ module.exports = defineConfig({
   root: true,
   env: {
     node: true,
-    browser: true
+    browser: true,
+    es2022: true
   },
   extends: [
     'eslint:recommended',
@@ -18,23 +19,35 @@ module.exports = defineConfig({
   ignorePatterns: ['dist', 'dist-types'],
   overrides: [
     {
+      files: ['*.ts', '*.tsx'],  // Added *.tsx
       extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:react-hooks/recommended',
+        'plugin:react/recommended'  // Added React plugin
       ],
-      plugins: ['@typescript-eslint', 'import', 'react-refresh'],
+      plugins: ['@typescript-eslint', 'import', 'react-refresh', 'react'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
         ecmaVersion: 'latest',
         sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true
+        },
+        project: './tsconfig.json'  // Add reference to your tsconfig
+      },
+      settings: {
+        react: {
+          version: 'detect'
+        }
       },
-      files: ['*.ts'],
       rules: {
         'react-refresh/only-export-components': [
           'warn',
           { allowConstantExport: true },
         ],
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-explicit-any': 'off'
       },
     },
     {

diff --git a/web/core/lib/editor/components/ui-select.tsx b/web/core/lib/editor/components/ui-select.tsx
@@ -6,24 +6,31 @@ import {
 	ChevronUpIcon,
 } from '@radix-ui/react-icons';
 
-export const BeSelect: React.FC<any> = React.forwardRef(
-	({ children, ...props }, forwardedRef) => {
+interface BeSelectProps {
+	children: React.ReactNode;
+	[key: string]: any;
+}
+
+export const BeSelect = React.forwardRef<HTMLButtonElement, BeSelectProps>(
+	(props, forwardedRef) => {
+		const { children, ...rest } = props;
+
 		return (
-			<SelectPrimitive.Root {...props}>
-				<SelectPrimitive.Trigger className={'SelectTrigger'} ref={forwardedRef as any}>
-					<SelectPrimitive.Value/>
-					<SelectPrimitive.Icon className={"SelectIcon"}>
-						<ChevronDownIcon/>
+			<SelectPrimitive.Root {...rest}>
+				<SelectPrimitive.Trigger className="SelectTrigger" ref={forwardedRef}>
+					<SelectPrimitive.Value />
+					<SelectPrimitive.Icon className="SelectIcon">
+						<ChevronDownIcon />
 					</SelectPrimitive.Icon>
 				</SelectPrimitive.Trigger>
 				<SelectPrimitive.Portal>
 					<SelectPrimitive.Content>
 						<SelectPrimitive.ScrollUpButton className="SelectScrollButton">
-							<ChevronUpIcon/>
+							<ChevronUpIcon />
 						</SelectPrimitive.ScrollUpButton>
 						<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
 						<SelectPrimitive.ScrollDownButton className="SelectScrollButton">
-							<ChevronDownIcon/>
+							<ChevronDownIcon />
 						</SelectPrimitive.ScrollDownButton>
 					</SelectPrimitive.Content>
 				</SelectPrimitive.Portal>