Enable liner rule to force consistent type imports (#6353)

* Enable liner rule to force consistent type imports

* fix config

* fix duplicated react imports that broke eslint

* apply fix on order

* apply on project

Author: lkostrowski

eslint.config.mjs

@@ -31,8 +31,16 @@ export default tseslint.config(
     ".github/**/*.js",
     ".featureFlags/",
   ]),
-  eslint.configs.recommended, // Note: we can migrate to rules using TypeScript types
+  eslint.configs.recommended,
   tseslint.configs.recommended,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
   react.configs.flat.recommended,
   react.configs.flat["jsx-runtime"],
   reactHooks.configs.flat["recommended-latest"],
@@ -54,7 +62,6 @@ export default tseslint.config(
       "@typescript-eslint/explicit-function-return-type": "off",
       "@typescript-eslint/no-floating-promises": "off",
       "@typescript-eslint/no-misused-promises": "off",
-      "@typescript-eslint/consistent-type-imports": "off",
       "@typescript-eslint/no-confusing-void-expression": "off",
       "react/prop-types": "off",
       "react-hooks/exhaustive-deps": "warn",
@@ -289,6 +296,23 @@ export default tseslint.config(
         },
       ],
     },
+  }, // Type-checked rules (only for TypeScript files, not .graphql virtual files)
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        {
+          prefer: "type-imports",
+          fixStyle: "inline-type-imports",
+          disallowTypeAnnotations: true,
+        },
+      ],
+    },
+  }, // Disable type-checked linting for non-TypeScript files (no type information available)
+  {
+    files: ["**/*.js", "**/*.mjs", "**/*.cjs"],
+    ...tseslint.configs.disableTypeChecked,
   }, // Graphql plugin
   {
     /**

src/attributes/components/AssignReferenceTypesDialog/AssignReferenceTypesDialog.tsx

@@ -1,5 +1,5 @@
 import AssignContainerDialog, {
-  AssignContainerDialogProps,
+  type AssignContainerDialogProps,
 } from "@dashboard/components/AssignContainerDialog";
 import { AttributeEntityTypeEnum } from "@dashboard/graphql";
 import { useIntl } from "react-intl";

src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx

@@ -1,5 +1,5 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { type ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { FormattedMessage, useIntl } from "react-intl";
 
 interface AttributeBulkDeleteDialogProps {

src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx

@@ -1,5 +1,5 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { type ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { FormattedMessage, useIntl } from "react-intl";
 
 interface AttributeDeleteDialogProps {

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -4,10 +4,10 @@ import FormSpacer from "@dashboard/components/FormSpacer";
 import { Select } from "@dashboard/components/Select";
 import {
   AttributeEntityTypeEnum,
-  AttributeErrorFragment,
+  type AttributeErrorFragment,
   AttributeInputTypeEnum,
 } from "@dashboard/graphql";
-import { FormChange, UseFormResult } from "@dashboard/hooks/useForm";
+import { type FormChange, type UseFormResult } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getAttributeErrorMessage from "@dashboard/utils/errors/attribute";
@@ -17,7 +17,7 @@ import { defineMessages, useIntl } from "react-intl";
 import slugify from "slugify";
 
 import { getAttributeSlugErrorMessage } from "../../errors";
-import { AttributePageFormData } from "../AttributePage";
+import { type AttributePageFormData } from "../AttributePage";
 import { inputTypeMessages, messages } from "./messages";
 
 const entityTypeMessages = defineMessages({

src/attributes/components/AttributeDetails/NumericUnits.tsx

@@ -1,15 +1,21 @@
-import { AttributePageFormData } from "@dashboard/attributes/components/AttributePage";
+import { type AttributePageFormData } from "@dashboard/attributes/components/AttributePage";
 import { Select } from "@dashboard/components/Select";
-import { MeasurementUnitsEnum } from "@dashboard/graphql";
-import { UseFormResult } from "@dashboard/hooks/useForm";
+import { type MeasurementUnitsEnum } from "@dashboard/graphql";
+import { type UseFormResult } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Box, Checkbox, Option, Text } from "@saleor/macaw-ui-next";
+import { Box, Checkbox, type Option, Text } from "@saleor/macaw-ui-next";
 import { useEffect, useMemo, useState } from "react";
 import { useIntl } from "react-intl";
 
 import * as M from "./messages";
-import { getUnitChoices, UnitSystem, unitSystemChoices, UnitType, unitTypeChoices } from "./utils";
+import {
+  getUnitChoices,
+  type UnitSystem,
+  unitSystemChoices,
+  type UnitType,
+  unitTypeChoices,
+} from "./utils";
 
 const useStyles = makeStyles(
   theme => ({

src/attributes/components/AttributeDetails/utils.ts

@@ -1,7 +1,7 @@
 import { MeasurementUnitsEnum } from "@dashboard/graphql";
-import { Option } from "@saleor/macaw-ui-next";
+import { type Option } from "@saleor/macaw-ui-next";
 import * as React from "react";
-import { IntlShape, MessageDescriptor } from "react-intl";
+import { type IntlShape, type MessageDescriptor } from "react-intl";
 
 import * as M from "./messages";
 

src/attributes/components/AttributeListDatagrid/AttributeListDatagrid.tsx

@@ -1,4 +1,4 @@
-import { AttributeListUrlSortField, attributeUrl } from "@dashboard/attributes/urls";
+import { type AttributeListUrlSortField, attributeUrl } from "@dashboard/attributes/urls";
 import { ColumnPicker } from "@dashboard/components/Datagrid/ColumnPicker/ColumnPicker";
 import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns";
 import Datagrid from "@dashboard/components/Datagrid/Datagrid";
@@ -7,11 +7,11 @@ import {
   useDatagridChangeState,
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { DatagridPagination } from "@dashboard/components/TablePagination";
-import { AttributeFragment } from "@dashboard/graphql";
+import { type AttributeFragment } from "@dashboard/graphql";
 import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import { ListProps, SortPage } from "@dashboard/types";
-import { Item } from "@glideapps/glide-data-grid";
+import { type ListProps, type SortPage } from "@dashboard/types";
+import { type Item } from "@glideapps/glide-data-grid";
 import { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { useLocation } from "react-router";

src/attributes/components/AttributeListDatagrid/datagrid.ts

@@ -1,13 +1,13 @@
-import { AttributeListUrlSortField } from "@dashboard/attributes/urls";
+import { type AttributeListUrlSortField } from "@dashboard/attributes/urls";
 import { PLACEHOLDER } from "@dashboard/components/Datagrid/const";
 import { readonlyTextCell } from "@dashboard/components/Datagrid/customCells/cells";
-import { AvailableColumn } from "@dashboard/components/Datagrid/types";
-import { AttributeFragment } from "@dashboard/graphql";
+import { type AvailableColumn } from "@dashboard/components/Datagrid/types";
+import { type AttributeFragment } from "@dashboard/graphql";
 import { translateBoolean } from "@dashboard/intl";
-import { Sort } from "@dashboard/types";
+import { type Sort } from "@dashboard/types";
 import { getColumnSortDirectionIcon } from "@dashboard/utils/columns/getColumnSortDirectionIcon";
-import { GridCell, Item } from "@glideapps/glide-data-grid";
-import { IntlShape } from "react-intl";
+import { type GridCell, type Item } from "@glideapps/glide-data-grid";
+import { type IntlShape } from "react-intl";
 
 import { columnsMessages } from "./messages";
 

src/attributes/components/AttributeListPage/AttributeListPage.tsx

@@ -1,20 +1,20 @@
-import { attributeAddUrl, AttributeListUrlSortField } from "@dashboard/attributes/urls";
+import { attributeAddUrl, type AttributeListUrlSortField } from "@dashboard/attributes/urls";
 import { ListFilters } from "@dashboard/components/AppLayout/ListFilters";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { BulkDeleteButton } from "@dashboard/components/BulkDeleteButton";
 import { DashboardCard } from "@dashboard/components/Card";
 import { FilterPresetsSelect } from "@dashboard/components/FilterPresetsSelect";
 import { configurationMenuUrl } from "@dashboard/configuration/urls";
-import { AttributeFragment } from "@dashboard/graphql";
+import { type AttributeFragment } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";
 import { Box, Button } from "@saleor/macaw-ui-next";
 import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { FilterPagePropsWithPresets, PageListProps, SortPage } from "../../../types";
+import { type FilterPagePropsWithPresets, type PageListProps, type SortPage } from "../../../types";
 import { AttributeListDatagrid } from "../AttributeListDatagrid";
-import { AttributeFilterKeys, AttributeListFilterOpts } from "./filters";
+import { type AttributeFilterKeys, type AttributeListFilterOpts } from "./filters";
 
 interface AttributeListPageProps
   extends PageListProps,