Enforce top-level type imports across charts, data-grid and pickers

Switch consistent-type-imports to separate-type-imports and add import/consistent-type-specifier-style (prefer-top-level). Autofix converts existing inline type imports to block style.

Author: Janpot

eslint.config.mjs

@@ -252,20 +252,24 @@ export default defineConfig(
     files: [`packages/x-charts{,-*}/**/*${EXTENSION_TS}`],
     rules: {
       'import/no-cycle': 'error',
-      '@typescript-eslint/consistent-type-imports': [
-        'error',
-        {
-          fixStyle: 'inline-type-imports',
-        },
-      ],
       // Charts have no semantics, so we often need to query by container
       'testing-library/no-container': 'off',
     },
   },
   {
-    files: [`packages/x-data-grid{,-*}/**/*${EXTENSION_TS}`],
+    files: [
+      `packages/x-charts{,-*}/**/*${EXTENSION_TS}`,
+      `packages/x-data-grid{,-*}/**/*${EXTENSION_TS}`,
+      `packages/x-date-pickers{,-*}/**/*${EXTENSION_TS}`,
+    ],
     rules: {
-      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          fixStyle: 'separate-type-imports',
+        },
+      ],
+      'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
     },
   },
   {

packages/x-charts-premium/src/BarChartPremium/BarChartPremium.plugins.ts

@@ -1,8 +1,6 @@
-import { type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
-import {
-  BAR_CHART_PRO_PLUGINS,
-  type BarChartProPluginSignatures,
-} from '@mui/x-charts-pro/BarChartPro';
+import type { ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { BAR_CHART_PRO_PLUGINS } from '@mui/x-charts-pro/BarChartPro';
+import type { BarChartProPluginSignatures } from '@mui/x-charts-pro/BarChartPro';
 
 export type BarChartPremiumPluginSignatures = BarChartProPluginSignatures;
 

packages/x-charts-premium/src/BarChartPremium/BarChartPremium.tsx

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import {
-  type BarChartProProps,
-  type BarChartProSlotProps,
-  type BarChartProSlots,
+import type {
+  BarChartProProps,
+  BarChartProSlotProps,
+  BarChartProSlots,
 } from '@mui/x-charts-pro/BarChartPro';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsToolbarPro } from '@mui/x-charts-pro/ChartsToolbarPro';
@@ -14,7 +14,8 @@ import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
 import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
-import { FocusedBar, type BarSeries } from '@mui/x-charts/BarChart';
+import { FocusedBar } from '@mui/x-charts/BarChart';
+import type { BarSeries } from '@mui/x-charts/BarChart';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
@@ -25,14 +26,11 @@ import { useChartsContainerProProps } from '@mui/x-charts-pro/internals';
 import type { BarChartPremiumPluginSignatures } from './BarChartPremium.plugins';
 import { useBarChartPremiumProps } from './useBarChartPremiumProps';
 import { BAR_CHART_PREMIUM_PLUGINS } from './BarChartPremium.plugins';
-import { BarPlotPremium, type BarPlotPremiumProps } from './BarPlotPremium';
+import { BarPlotPremium } from './BarPlotPremium';
+import type { BarPlotPremiumProps } from './BarPlotPremium';
 import { ChartsWebGLLayer } from '../ChartsWebGLLayer';
 import { ChartsDataProviderPremium } from '../ChartsDataProviderPremium';
-import {
-  type BarItemIdentifier,
-  type RangeBarItemIdentifier,
-  type RangeBarSeriesType,
-} from '../models';
+import type { BarItemIdentifier, RangeBarItemIdentifier, RangeBarSeriesType } from '../models';
 import { RangeBarPlot } from './RangeBar/RangeBarPlot';
 import { FocusedRangeBar } from './RangeBar/FocusedRangeBar';
 

packages/x-charts-premium/src/BarChartPremium/BarPlotPremium.tsx

@@ -1,12 +1,8 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import {
-  BarPlot,
-  type BarPlotProps,
-  type BarPlotSlotProps,
-  type BarPlotSlots,
-} from '@mui/x-charts/BarChart';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import type { BarPlotProps, BarPlotSlotProps, BarPlotSlots } from '@mui/x-charts/BarChart';
 import type { RendererType } from '@mui/x-charts/ScatterChart';
 import { BarWebGLPlot } from './webgl/BarWebGLPlot';
 

packages/x-charts-premium/src/BarChartPremium/RangeBar/AnimatedRangeBarElement.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { type BarProps } from '@mui/x-charts/BarChart';
+import type { BarProps } from '@mui/x-charts/BarChart';
 import { useAnimateRangeBar } from '../../hooks/animation/useAnimateRangeBar';
 
 export interface AnimatedRangeBarElementProps extends BarProps {

packages/x-charts-premium/src/BarChartPremium/RangeBar/RangeBarPlot.tsx

@@ -3,21 +3,20 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { useSkipAnimation } from '@mui/x-charts/internals';
-import {
-  BarElement,
-  type BarElementSlotProps,
-  type BarElementSlots,
-  barClasses,
-  type BarLabelSlots,
-  type BarLabelSlotProps,
+import { BarElement, barClasses } from '@mui/x-charts/BarChart';
+import type {
+  BarElementSlotProps,
+  BarElementSlots,
+  BarLabelSlots,
+  BarLabelSlotProps,
 } from '@mui/x-charts/BarChart';
 import { useDrawingArea, useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { useIsZoomInteracting } from '@mui/x-charts-pro/hooks';
 import { useUtilityClasses } from './useUtilityClasses';
 import { useRangeBarPlotData } from './useRangeBarPlotData';
 import { AnimatedRangeBarElement } from './AnimatedRangeBarElement';
 import { RangeBarWebGLPlot } from './RangeBarWebGLPlot';
-import { type RangeBarItemIdentifier } from '../../models';
+import type { RangeBarItemIdentifier } from '../../models';
 
 export type RangeBarPlotRenderer = 'svg-single' | 'webgl';
 

packages/x-charts-premium/src/BarChartPremium/RangeBar/RangeBarWebGLPlot.tsx

@@ -5,7 +5,7 @@ import { useWebGLLayer } from '../../ChartsWebGLLayer/ChartsWebGLContext';
 import { BarWebGLProgram } from '../webgl/BarWebGLProgram';
 import { useWebGLBarLikePlotData } from '../webgl/useWebGLBarLikePlotData';
 import { useRangeBarPlotData } from './useRangeBarPlotData';
-import { type ProcessedRangeBarSeriesData } from './types';
+import type { ProcessedRangeBarSeriesData } from './types';
 
 export interface RangeBarWebGLPlotProps {
   borderRadius?: number;

packages/x-charts-premium/src/BarChartPremium/RangeBar/createGetRangeBarDimensions.ts

@@ -1,10 +1,10 @@
-import {
-  getBandSize,
-  type ChartSeriesDefaultized,
-  type ChartsXAxisProps,
-  type ChartsYAxisProps,
-  type ComputedAxis,
-  type ScaleName,
+import { getBandSize } from '@mui/x-charts/internals';
+import type {
+  ChartSeriesDefaultized,
+  ChartsXAxisProps,
+  ChartsYAxisProps,
+  ComputedAxis,
+  ScaleName,
 } from '@mui/x-charts/internals';
 
 export function createGetRangeBarDimensions(params: {

packages/x-charts-premium/src/BarChartPremium/RangeBar/seriesConfig/descriptionGetter.ts

@@ -1,4 +1,5 @@
-import { getLabel, type DescriptionGetter } from '@mui/x-charts/internals';
+import { getLabel } from '@mui/x-charts/internals';
+import type { DescriptionGetter } from '@mui/x-charts/internals';
 
 const descriptionGetter: DescriptionGetter<'rangeBar'> = (params) => {
   const { identifier, series, xAxis, yAxis, localeText } = params;

packages/x-charts-premium/src/BarChartPremium/RangeBar/seriesConfig/extrema.ts

@@ -1,5 +1,6 @@
-import { type CartesianExtremumGetter, findMinMax } from '@mui/x-charts/internals';
-import { type RangeBarValueType } from '../../../models';
+import { findMinMax } from '@mui/x-charts/internals';
+import type { CartesianExtremumGetter } from '@mui/x-charts/internals';
+import type { RangeBarValueType } from '../../../models';
 
 const createResult = (data: any, direction: 'x' | 'y') => {
   if (direction === 'x') {