[chore] ESLint: (re)enable import rules

slax57 · slax57 · commit e87b44d74b4d · 2025-04-18T18:01:37.000+02:00
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -2,6 +2,7 @@ import js from '@eslint/js';
 import { defineConfig, globalIgnores } from 'eslint/config';
 import tseslint from 'typescript-eslint';
 import cypress from 'eslint-plugin-cypress';
+import importPlugin from 'eslint-plugin-import';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import react from 'eslint-plugin-react';
@@ -28,6 +29,22 @@ export default defineConfig([
         ...conf,
         files: ['**/*.ts', '**/*.tsx'],
     })),
+    {
+        name: 'eslint-plugin-import',
+        plugins: { import: importPlugin },
+        rules: {
+            ...importPlugin.configs.recommended.rules,
+            ...importPlugin.configs.typescript.rules,
+        },
+        settings: {
+            'import/resolver': {
+                // You will also need to install and configure the TypeScript resolver
+                // See also https://github.com/import-js/eslint-import-resolver-typescript#configuration
+                typescript: true,
+                node: true,
+            },
+        },
+    },
     {
         ...jsxA11y.flatConfigs.recommended,
         ignores: ['**/*.spec.*', '**/*.stories.*'],
@@ -116,6 +133,9 @@ export default defineConfig([
             'no-prototype-builtins': 'off',
             'prefer-spread': 'off',
             'jsx-a11y/no-autofocus': 'off',
+            'import/no-anonymous-default-export': 'off',
+            'import/no-named-as-default': 'off',
+            'import/no-extraneous-dependencies': 'error',
         },
         settings: {
             react: {
@@ -133,6 +153,23 @@ export default defineConfig([
         },
         rules: {
             'react-hooks/rules-of-hooks': 'off',
+            'import/no-unresolved': 'off',
+            'import/no-extraneous-dependencies': 'off',
+        },
+    },
+    {
+        name: 'stories-rules',
+        files: ['**/*.stories.*'],
+        rules: {
+            'import/no-unresolved': 'off',
+            'import/no-extraneous-dependencies': 'off',
+        },
+    },
+    {
+        name: 'examples-rules',
+        files: ['**/examples/**'],
+        rules: {
+            'import/no-extraneous-dependencies': 'off',
         },
     },
     {
diff --git a/examples/crm/src/dashboard/DashboardActivityLog.tsx b/examples/crm/src/dashboard/DashboardActivityLog.tsx
@@ -1,7 +1,6 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { Box, Card, Typography } from '@mui/material';
+import { Box, Card, Typography, Stack } from '@mui/material';
 import { ActivityLog } from '../activity/ActivityLog';
-import { Stack } from '@mui/material';
 
 export function DashboardActivityLog() {
     return (
diff --git a/examples/demo/src/dashboard/CardWithIcon.tsx b/examples/demo/src/dashboard/CardWithIcon.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { FC, createElement } from 'react';
+import { FC, createElement, ReactNode } from 'react';
 import { Card, Box, Typography, Divider } from '@mui/material';
 import { Link, To } from 'react-router-dom';
-import { ReactNode } from 'react';
 
 interface Props {
     icon: FC<any>;
diff --git a/examples/demo/src/products/GridList.tsx b/examples/demo/src/products/GridList.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
-import { useTheme, useMediaQuery } from '@mui/material';
-import { Box, ImageList, ImageListItem, ImageListItemBar } from '@mui/material';
+import {
+    useTheme,
+    useMediaQuery,
+    Box,
+    ImageList,
+    ImageListItem,
+    ImageListItemBar,
+} from '@mui/material';
 import { useCreatePath, NumberField, useListContext } from 'react-admin';
 import { Link } from 'react-router-dom';
 
diff --git a/package.json b/package.json
@@ -53,7 +53,9 @@
         "dotenv": "^16.4.7",
         "eslint": "^9.23.0",
         "eslint-config-prettier": "^10.1.1",
+        "eslint-import-resolver-typescript": "^4.3.2",
         "eslint-plugin-cypress": "^4.2.0",
+        "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prettier": "^5.2.5",
         "eslint-plugin-react": "^7.37.4",
diff --git a/packages/ra-core/src/controller/list/useListParams.spec.tsx b/packages/ra-core/src/controller/list/useListParams.spec.tsx
@@ -1,16 +1,14 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, screen } from '@testing-library/react';
-import { stringify } from 'query-string';
-import { fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { stringify, parse } from 'query-string';
 import { CoreAdminContext } from '../../core';
 
 import { testDataProvider } from '../../dataProvider';
 import { useStore } from '../../store/useStore';
 import { useListParams, getQuery, getNumberOrDefault } from './useListParams';
 import { SORT_DESC, SORT_ASC } from './queryReducer';
 import { TestMemoryRouter } from '../../routing';
-import { parse } from 'query-string';
 
 describe('useListParams', () => {
     describe('getQuery', () => {
diff --git a/packages/ra-core/src/controller/useFilterState.spec.tsx b/packages/ra-core/src/controller/useFilterState.spec.tsx
@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { act, renderHook } from '@testing-library/react';
+import { waitFor, act, renderHook } from '@testing-library/react';
 
 import useFilterState from './useFilterState';
 
diff --git a/packages/ra-core/src/store/useStore.spec.tsx b/packages/ra-core/src/store/useStore.spec.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react';
+import {
+    render,
+    screen,
+    fireEvent,
+    waitFor,
+    renderHook,
+} from '@testing-library/react';
 
 import { useStore } from './useStore';
 import { StoreContextProvider } from './StoreContextProvider';
diff --git a/packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx b/packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import { useState } from 'react';
 import {
     Avatar,
@@ -12,7 +11,7 @@ import {
     ListItemText,
     Typography,
 } from '@mui/material';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
 import { defaultTheme as RaDefaultTheme, RaThemeOptions } from 'react-admin';
 import FolderIcon from '@mui/icons-material/Folder';
 import { Application } from './types';
diff --git a/packages/ra-ui-materialui/package.json b/packages/ra-ui-materialui/package.json
@@ -37,6 +37,7 @@
         "@types/react-is": "^18.3.0",
         "@types/react-transition-group": "^4.4.10",
         "cross-env": "^5.2.0",
+        "csstype": "^3.1.3",
         "expect": "^27.4.6",
         "file-api": "~0.10.4",
         "ignore-styles": "~5.0.1",
@@ -57,6 +58,7 @@
         "@mui/material": "^5.16.12 || ^6.0.0",
         "@mui/system": "^5.15.20 || ^6.0.0",
         "@mui/utils": "^5.15.20 || ^6.0.0",
+        "csstype": "^3.1.3",
         "ra-core": "^5.0.0",
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0",
diff --git a/packages/ra-ui-materialui/src/field/ArrayField.spec.tsx b/packages/ra-ui-materialui/src/field/ArrayField.spec.tsx
@@ -10,8 +10,7 @@ import { ThemeProvider, createTheme } from '@mui/material';
 import { ArrayField } from './ArrayField';
 import { NumberField } from './NumberField';
 import { TextField } from './TextField';
-import { Datagrid } from '../list';
-import { SimpleList } from '../list';
+import { Datagrid, SimpleList } from '../list';
 import { ListContext } from './ArrayField.stories';
 
 describe('<ArrayField />', () => {
diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx
@@ -22,9 +22,9 @@ import {
     FilterButton,
     Pagination,
     SingleFieldList,
+    FilterForm,
 } from '../list';
 import { Notification } from '../layout/Notification';
-import { FilterForm } from '../list';
 import { TextInput } from '../input';
 import { Edit } from '../detail';
 import { SimpleForm } from '../form';
diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx
@@ -5,7 +5,6 @@ import React, {
     ReactElement,
     ReactNode,
 } from 'react';
-import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { useDropzone, DropzoneOptions } from 'react-dropzone';
 import FormHelperText from '@mui/material/FormHelperText';
@@ -21,7 +20,7 @@ import { Labeled } from '../Labeled';
 import { FileInputPreview } from './FileInputPreview';
 import { sanitizeInputRestProps } from './sanitizeInputRestProps';
 import { InputHelperText } from './InputHelperText';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import { SvgIconProps } from '@mui/material';
 
diff --git a/packages/ra-ui-materialui/src/input/InputErrors.stories.tsx b/packages/ra-ui-materialui/src/input/InputErrors.stories.tsx
@@ -4,8 +4,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { TextInput } from './TextInput';
 import { AdminContext } from '../AdminContext';
-import { Create } from '../detail';
-import { Edit } from '../detail';
+import { Create, Edit } from '../detail';
 import { SimpleForm, TabbedForm, Toolbar } from '../form';
 import { SaveButton } from '../button';
 import { Datagrid, List } from '../list';
diff --git a/packages/ra-ui-materialui/src/input/TextInput.stories.tsx b/packages/ra-ui-materialui/src/input/TextInput.stories.tsx
@@ -4,8 +4,7 @@ import { useFormState, useFormContext } from 'react-hook-form';
 
 import { TextInput } from './TextInput';
 import { AdminContext } from '../AdminContext';
-import { Create } from '../detail';
-import { Edit } from '../detail';
+import { Create, Edit } from '../detail';
 import { SimpleForm, Toolbar } from '../form';
 import { SaveButton } from '../button';
 import { FormInspector } from './common';
diff --git a/packages/ra-ui-materialui/src/layout/AppBar.tsx b/packages/ra-ui-materialui/src/layout/AppBar.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { FC } from 'react';
+import { FC, Children, memo } from 'react';
 import { styled } from '@mui/material/styles';
-import { Children, memo } from 'react';
 import {
     AppBar as MuiAppBar,
     AppBarProps as MuiAppBarProps,
diff --git a/packages/ra-ui-materialui/src/layout/LoadingIndicator.tsx b/packages/ra-ui-materialui/src/layout/LoadingIndicator.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import clsx from 'clsx';
-import { useTheme } from '@mui/material/styles';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useLoading } from 'ra-core';
 
diff --git a/packages/ra-ui-materialui/src/layout/Title.tsx b/packages/ra-ui-materialui/src/layout/Title.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { ReactElement } from 'react';
+import { useEffect, useState, ReactElement } from 'react';
 import { createPortal } from 'react-dom';
 import { RaRecord, TitleComponent, warning } from 'ra-core';
 
diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { isValidElement, ReactElement, ReactNode, useCallback } from 'react';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, lighten } from '@mui/material/styles';
 import clsx from 'clsx';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import { lighten } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import { useTranslate, sanitizeListRestProps, useListContext } from 'ra-core';
diff --git a/packages/ra-ui-materialui/src/list/ListToolbar.tsx b/packages/ra-ui-materialui/src/list/ListToolbar.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { FC, memo } from 'react';
+import { FC, memo, ReactElement } from 'react';
 import { styled } from '@mui/material/styles';
-import { ReactElement } from 'react';
 import { ToolbarProps } from '@mui/material';
 import { Exporter } from 'ra-core';
 
diff --git a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx
@@ -25,11 +25,10 @@ import {
     SelectAllButton as RaSelectAllButton,
 } from '../../button';
 import { Datagrid, DatagridProps } from './Datagrid';
-import { ShowGuesser, SimpleShowLayout } from '../../detail';
+import { ShowGuesser, SimpleShowLayout, EditGuesser } from '../../detail';
 import { AdminUI } from '../../AdminUI';
 import { AdminContext } from '../../AdminContext';
 import { List } from '../List';
-import { EditGuesser } from '../../detail';
 import { DatagridRowProps } from './DatagridRow';
 import DatagridBody, { DatagridBodyProps } from './DatagridBody';
 import { BulkActionsToolbar } from '../BulkActionsToolbar';
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterList.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterList.stories.tsx
@@ -8,7 +8,6 @@ import {
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { Box, Typography, Card, CardContent } from '@mui/material';
 import MailIcon from '@mui/icons-material/MailOutline';
-import CategoryIcon from '@mui/icons-material/LocalOffer';
 import BiotechIcon from '@mui/icons-material/Biotech';
 import NewspaperIcon from '@mui/icons-material/Newspaper';
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
@@ -56,7 +55,7 @@ export const Basic = () => {
                             value={{ has_newsletter: false }}
                         />
                     </FilterList>
-                    <FilterList label="Category" icon={<CategoryIcon />}>
+                    <FilterList label="Category" icon={<LocalOfferIcon />}>
                         <FilterListItem
                             label="Tests"
                             value={{ category: 'tests' }}
@@ -113,7 +112,7 @@ export const Icon = () => {
                             value={{ has_newsletter: false }}
                         />
                     </FilterList>
-                    <FilterList label="Category" icon={<CategoryIcon />}>
+                    <FilterList label="Category" icon={<LocalOfferIcon />}>
                         <FilterListItem
                             label="Tests"
                             value={{ category: 'tests' }}
@@ -177,7 +176,7 @@ export const Cumulative = () => {
                 }}
             >
                 <CardContent>
-                    <FilterList label="Categories" icon={<CategoryIcon />}>
+                    <FilterList label="Categories" icon={<LocalOfferIcon />}>
                         <FilterListItem
                             label="Tests"
                             value={{ category: 'tests' }}
@@ -298,7 +297,7 @@ const dataProvider = fakeRestDataProvider({
 const BookListAside = () => (
     <Card sx={{ order: -1, mr: 2, mt: 6, width: 200, height: 'fit-content' }}>
         <CardContent>
-            <FilterList label="Century" icon={<CategoryIcon />}>
+            <FilterList label="Century" icon={<LocalOfferIcon />}>
                 <FilterListItem
                     label="21st"
                     value={{ year_gte: 2000, year_lte: undefined }}
diff --git a/packages/ra-ui-materialui/src/theme/useTheme.spec.tsx b/packages/ra-ui-materialui/src/theme/useTheme.spec.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { CoreAdminContext, useStore, memoryStore } from 'ra-core';
 import expect from 'expect';
-import { render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react';
+import { render, screen, renderHook } from '@testing-library/react';
 import { useTheme } from './useTheme';
 import { AdminContext } from '../AdminContext';
 import { ThemeTestWrapper } from '../layout/ThemeTestWrapper';
diff --git a/yarn.lock b/yarn.lock
