[core] Refactor ESLint config to disallow root level imports

.eslintrc.js

@@ -3,38 +3,85 @@ const path = require('path');
 
 // TODO move this helper to @mui/monorepo/.eslintrc
 // It needs to know about the parent "no-restricted-imports" to not override them.
-const buildPackageRestrictedImports = (packageName, root) => ({
-  files: [`packages/${root}/src/**/*{.ts,.tsx,.js}`],
-  excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx', '**.test.tx', '**.test.tsx'],
-  rules: {
-    'no-restricted-imports': [
-      'error',
-      {
-        paths: [
-          {
-            name: packageName,
-            message: 'Use relative import instead',
-          },
-          {
-            name: '@mui/material',
-            message: 'Use @mui/utils or a more specific import instead',
-          },
-        ],
-        patterns: [
-          // TODO move rule into main repo to allow deep @mui/monorepo imports
-          {
-            group: ['@mui/*/*/*'],
-            message: 'Use less deep import instead',
-          },
-          {
-            group: [`${packageName}/*`, `${packageName}/**`],
-            message: 'Use relative import instead',
-          },
-        ],
-      },
-    ],
+const buildPackageRestrictedImports = (packageName, root, allowRootImports = true) => [
+  {
+    files: [`packages/${root}/src/**/*{.ts,.tsx,.js}`],
+    excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx', '**.test.tx', '**.test.tsx'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: packageName,
+              message: 'Use relative import instead',
+            },
+            {
+              name: '@mui/material',
+              message: 'Use @mui/utils or a more specific import instead',
+            },
+          ],
+          patterns: [
+            // TODO move rule into main repo to allow deep @mui/monorepo imports
+            {
+              group: ['@mui/*/*/*'],
+              message: 'Use less deep import instead',
+            },
+            {
+              group: [`${packageName}/*`, `${packageName}/**`],
+              message: 'Use relative import instead',
+            },
+          ],
+        },
+      ],
+    },
   },
-});
+  ...(allowRootImports
+    ? []
+    : [
+        {
+          files: [
+            `packages/${root}/src/**/*.test{.ts,.tsx,.js}`,
+            `packages/${root}/src/**/*.spec{.ts,.tsx,.js}`,
+            'docs/data/**/*{.ts,.tsx,.js}',
+          ],
+          excludedFiles: ['*.d.ts'],
+          rules: {
+            'no-restricted-imports': [
+              'error',
+              {
+                paths: [
+                  {
+                    name: '@mui/x-charts',
+                    message: 'Use deeper import instead',
+                  },
+                  {
+                    name: '@mui/x-codemod',
+                    message: 'Use deeper import instead',
+                  },
+                  {
+                    name: '@mui/x-date-pickers',
+                    message: 'Use deeper import instead',
+                  },
+                  {
+                    name: '@mui/x-date-pickers-pro',
+                    message: 'Use deeper import instead',
+                  },
+                  {
+                    name: '@mui/x-tree-view',
+                    message: 'Use deeper import instead',
+                  },
+                  {
+                    name: '@mui/x-tree-view-pro',
+                    message: 'Use deeper import instead',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ]),
+];
 
 module.exports = {
   ...baseline,
@@ -159,15 +206,16 @@ module.exports = {
         ],
       },
     },
-    buildPackageRestrictedImports('@mui/x-charts', 'x-charts'),
-    buildPackageRestrictedImports('@mui/x-data-grid', 'x-data-grid'),
-    buildPackageRestrictedImports('@mui/x-data-grid-pro', 'x-data-grid-pro'),
-    buildPackageRestrictedImports('@mui/x-data-grid-premium', 'x-data-grid-premium'),
-    buildPackageRestrictedImports('@mui/x-data-grid-generator', 'x-data-grid-generator'),
-    buildPackageRestrictedImports('@mui/x-pickers', 'x-pickers'),
-    buildPackageRestrictedImports('@mui/x-pickers-pro', 'x-pickers-pro'),
-    buildPackageRestrictedImports('@mui/x-tree-view', 'x-tree-view'),
-    buildPackageRestrictedImports('@mui/x-tree-view-pro', 'x-tree-view-pro'),
-    buildPackageRestrictedImports('@mui/x-license', 'x-license'),
+    ...buildPackageRestrictedImports('@mui/x-charts', 'x-charts', false),
+    ...buildPackageRestrictedImports('@mui/x-codemod', 'x-codemod', false),
+    ...buildPackageRestrictedImports('@mui/x-data-grid', 'x-data-grid'),
+    ...buildPackageRestrictedImports('@mui/x-data-grid-pro', 'x-data-grid-pro'),
+    ...buildPackageRestrictedImports('@mui/x-data-grid-premium', 'x-data-grid-premium'),
+    ...buildPackageRestrictedImports('@mui/x-data-grid-generator', 'x-data-grid-generator'),
+    ...buildPackageRestrictedImports('@mui/x-date-pickers', 'x-date-pickers', false),
+    ...buildPackageRestrictedImports('@mui/x-date-pickers-pro', 'x-date-pickers-pro', false),
+    ...buildPackageRestrictedImports('@mui/x-tree-view', 'x-tree-view', false),
+    ...buildPackageRestrictedImports('@mui/x-tree-view-pro', 'x-tree-view-pro', false),
+    ...buildPackageRestrictedImports('@mui/x-license', 'x-license'),
   ],
 };

docs/data/charts/areas-demo/TinyAreaChart.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChartContainer, AreaPlot } from '@mui/x-charts';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { AreaPlot } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const xLabels = [

docs/data/charts/areas-demo/TinyAreaChart.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChartContainer, AreaPlot } from '@mui/x-charts';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { AreaPlot } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const xLabels = [

docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { AxisConfig } from '@mui/x-charts';
+import { AxisConfig } from '@mui/x-charts/models';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];

docs/data/charts/bar-demo/TinyBarChart.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChartContainer, BarPlot } from '@mui/x-charts';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { BarPlot } from '@mui/x-charts/BarChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const xLabels = [

docs/data/charts/bar-demo/TinyBarChart.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChartContainer, BarPlot } from '@mui/x-charts';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { BarPlot } from '@mui/x-charts/BarChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const xLabels = [

docs/data/charts/bars/BarsDataset.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { axisClasses } from '@mui/x-charts';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
 
 const chartSetting = {
   yAxis: [

docs/data/charts/bars/BarsDataset.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { axisClasses } from '@mui/x-charts';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
 
 const chartSetting = {
   yAxis: [

docs/data/charts/components/BasicScaleDemo.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { ResponsiveChartContainer, LinePlot, useDrawingArea } from '@mui/x-charts';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { useDrawingArea } from '@mui/x-charts/hooks';
 
 const StyledPath = styled('path')(({ theme }) => ({
   fill: 'none',

docs/data/charts/components/BasicScaleDemo.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { ResponsiveChartContainer, LinePlot, useDrawingArea } from '@mui/x-charts';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { useDrawingArea } from '@mui/x-charts/hooks';
 
 const StyledPath = styled('path')(({ theme }) => ({
   fill: 'none',

docs/data/charts/components/OriginDemo.js

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 
-import {
-  ResponsiveChartContainer,
-  LinePlot,
-  useDrawingArea,
-  useYScale,
-  useXScale,
-} from '@mui/x-charts';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks';
 
 const x = Array.from({ length: 21 }, (_, index) => -1 + 0.2 * index);
 const linear = x.map((v) => -1 + v);

docs/data/charts/components/OriginDemo.tsx

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { ScaleLinear } from 'd3-scale';
-import {
-  ResponsiveChartContainer,
-  LinePlot,
-  useDrawingArea,
-  useYScale,
-  useXScale,
-} from '@mui/x-charts';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks';
 
 const x = Array.from({ length: 21 }, (_, index) => -1 + 0.2 * index);
 const linear = x.map((v) => -1 + v);

docs/data/charts/components/ScaleDemo.js

@@ -1,13 +1,10 @@
 import * as React from 'react';
 
 import { styled } from '@mui/material/styles';
-import {
-  ResponsiveChartContainer,
-  LinePlot,
-  ChartsYAxis,
-  useDrawingArea,
-  useYScale,
-} from '@mui/x-charts';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { useDrawingArea, useYScale } from '@mui/x-charts/hooks';
 
 const StyledPath = styled('path')(({ theme }) => ({
   fill: 'none',

docs/data/charts/components/ScaleDemo.tsx

@@ -1,13 +1,10 @@
 import * as React from 'react';
 import { ScaleLinear } from 'd3-scale';
 import { styled } from '@mui/material/styles';
-import {
-  ResponsiveChartContainer,
-  LinePlot,
-  ChartsYAxis,
-  useDrawingArea,
-  useYScale,
-} from '@mui/x-charts';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { useDrawingArea, useYScale } from '@mui/x-charts/hooks';
 
 const StyledPath = styled('path')(({ theme }) => ({
   fill: 'none',

docs/data/charts/line-demo/LineChartWithReferenceLines.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ChartContainer } from '@mui/x-charts/ChartContainer';
-import { ChartsReferenceLine } from '@mui/x-charts';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
 import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';

docs/data/charts/line-demo/LineChartWithReferenceLines.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ChartContainer } from '@mui/x-charts/ChartContainer';
-import { ChartsReferenceLine } from '@mui/x-charts';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
 import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';

docs/data/charts/line-demo/TinyLineChart.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartContainer } from '@mui/x-charts';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
 import {
   LinePlot,
   MarkPlot,

docs/data/charts/line-demo/TinyLineChart.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartContainer } from '@mui/x-charts';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
 import {
   LinePlot,
   MarkPlot,

docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DefaultizedPieValueType } from '@mui/x-charts';
+import { DefaultizedPieValueType } from '@mui/x-charts/models';
 import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
 
 const data = [

docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
-import { axisClasses } from '@mui/x-charts';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
 
 const data1 = [
   { x: 100, y: 200, id: 1 },

docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
-import { axisClasses } from '@mui/x-charts';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
 
 const data1 = [
   { x: 100, y: 200, id: 1 },

docs/data/charts/scatter/ColorScale.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
-import { ScatterValueType } from '@mui/x-charts';
+import { ScatterValueType } from '@mui/x-charts/models';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';

docs/data/charts/styling/ColorTemplate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
-import { ScatterValueType } from '@mui/x-charts';
+import { ScatterValueType } from '@mui/x-charts/models';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';

docs/data/charts/styling/MuiColorTemplate.tsx

@@ -10,7 +10,7 @@ import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { Chance } from 'chance';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
-import { ScatterValueType } from '@mui/x-charts';
+import { ScatterValueType } from '@mui/x-charts/models';
 import {
   blueberryTwilightPalette,
   mangoFusionPalette,

docs/data/charts/tooltip/AxisFormatter.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { axisClasses } from '@mui/x-charts';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
 
 const dataset = [
   { name: 'Austria', code: 'AT', gdp: 471 },

docs/data/charts/tooltip/AxisFormatter.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
-import { axisClasses } from '@mui/x-charts';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
 
 const dataset = [
   { name: 'Austria', code: 'AT', gdp: 471 },

docs/data/charts/tooltip/ElementHighlights.tsx

@@ -7,7 +7,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
-import { HighlightScope } from '@mui/x-charts';
+import { HighlightScope } from '@mui/x-charts/context';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { LineChart } from '@mui/x-charts/LineChart';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';