[charts] Add codemod for removing ResponsiveChartContainer (#15323)

Signed-off-by: Jose C Quintas Jr <[email protected]>
Co-authored-by: Jose C Quintas Jr <[email protected]>

docs/data/migration/migration-charts-v7/migration-charts-v7.md

@@ -89,6 +89,30 @@ To pass props to the legend, use the `slotProps.legend`.
 + <PieChart slotProps={{ legend: { ... } }} />
 ```
 
+## Removing ResponsiveChartContainer ✅
+
+The `ResponsiveChartContainer` got removed.
+You can now use `ChartContainer` as a responsive container which works now exactly the same way.
+
+```diff
+- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+- import { ResponsiveChartContainerPro } from '@mui/x-charts-pro/ResponsiveChartContainerPro';
++ import { ChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++ import { ChartContainerPro } from '@mui/x-charts-pro/ResponsiveChartContainerPro';
+
+- <ResponsiveChartContainer>
++ <ChartContainer>
+   <BarPlot />
+- </ResponsiveChartContainer>
++ </ChartContainer>
+```
+
+## New DOM structure for ChartContainer
+
+The `<ChartContainer />` now wrap the `svg` component into a `div`.
+
+This change should not impact your codebase except for some CSS selector edge cases.
+
 ## Remove Pie Chart axes
 
 The `<PieChart />` got by error the code to render axes.

packages/x-codemod/README.md

@@ -62,7 +62,7 @@ npx @mui/x-codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quo
 
 A combination of all important transformers for migrating v7 to v8.
 ⚠️ This codemod should be run only once.
-It runs codemods for both Data Grid and Date and Time Pickers packages.
+It runs codemods for all MUI X packages (Data Grid, Date and Time Pickers, Tree View, and Charts).
 To run codemods for a specific package, refer to the respective section.
 
 ```bash
@@ -134,16 +134,46 @@ npx @mui/x-codemod@latest v8.0.0/charts/preset-safe <path|folder>
 The list includes these transformers
 
 - [`rename-legend-to-slots-legend`](#rename-legend-to-slots-legend)
+- [`rename-responsive-chart-container`](#rename-responsive-chart-container)
 
 #### `rename-legend-to-slots-legend`
 
-Place the `legend` props propagation by the `slotProps.legend`.
+Renames legend props to the corresponding slotProps.
 
 ```diff
-- <PieChart legend={{ hidden: true }} />
-+ <PieChart slotProps={{ legend: { hidden: true } }} />
+  <LineChart
+-   legend={{ hiden: true}}
++   slotProps={{ legend: { hiden: true} }}
+  />
 ```
 
+#### `rename-responsive-chart-container`
+
+Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartContainer` and `ChartContainerPro` which have the same behavior in v8.
+
+```diff
+- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+
+- <ResponsiveChartContainer>
++ <ChartContainer>
+   <BarPlot />
+- </ResponsiveChartContainer>
++ </ChartContainer>
+```
+
+:::warning
+If you imported both `ResponsiveChartContainer` and `ChartContainer` in the same file, you might end up with duplicated import.
+Verify the git diff to remove the duplicate.
+
+```diff
+ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+```
+
+:::
+
 ## v7.0.0
 
 ### 🚀 `preset-safe` for v7.0.0

packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx

@@ -1,9 +1,14 @@
 // @ts-nocheck
 import * as React from 'react';
 import { PieChart } from '@mui/x-charts/PieChart';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
 
 // prettier-ignore
 <div>
   <PieChart legend={{ hidden: true }} />
   <PieChart legend={{ hidden: true }} slotProps={{ tooltip: { trigger: 'axis' } }} />
+  <ResponsiveChartContainer>
+    <BarPlot />
+  </ResponsiveChartContainer>
 </div>;

packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import * as React from 'react';
 import { PieChart } from '@mui/x-charts/PieChart';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
 
 // prettier-ignore
 <div>
@@ -13,4 +15,7 @@ import { PieChart } from '@mui/x-charts/PieChart';
       tooltip: { trigger: 'axis' },
       legend: { hidden: true }
     }} />
+  <ChartContainer>
+    <BarPlot />
+  </ChartContainer>
 </div>;

packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts

@@ -1,9 +1,11 @@
 import transformLegendToSlots from '../rename-legend-to-slots-legend';
+import transformRemoveResponsiveContainer from '../rename-responsive-chart-container';
 
 import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
 
 export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
   file.source = transformLegendToSlots(file, api, options);
+  file.source = transformRemoveResponsiveContainer(file, api, options);
 
   return file.source;
 }

packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/actual-nested-imports.spec.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable no-restricted-imports */
+import * as React from 'react';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { ResponsiveChartContainerPro } from '@mui/x-charts-pro/ResponsiveChartContainerPro';
+import { BarPlot } from '@mui/x-charts-pro';
+
+<div>
+  <ResponsiveChartContainer series={[]}>
+    <BarPlot />
+  </ResponsiveChartContainer>
+  <ResponsiveChartContainerPro series={[]}>
+    <BarPlot />
+  </ResponsiveChartContainerPro>
+</div>;

packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/actual-root-imports.spec.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-imports */
+import * as React from 'react';
+import { ResponsiveChartContainer } from '@mui/x-charts';
+import { BarPlot, ResponsiveChartContainerPro } from '@mui/x-charts-pro';
+
+<div>
+  <ResponsiveChartContainer series={[]}>
+    <BarPlot />
+  </ResponsiveChartContainer>
+  <ResponsiveChartContainerPro series={[]}>
+    <BarPlot />
+  </ResponsiveChartContainerPro>
+</div>;

packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/expected-nested-imports.spec.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable no-restricted-imports */
+import * as React from 'react';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
+import { BarPlot } from '@mui/x-charts-pro';
+
+<div>
+  <ChartContainer series={[]}>
+    <BarPlot />
+  </ChartContainer>
+  <ChartContainerPro series={[]}>
+    <BarPlot />
+  </ChartContainerPro>
+</div>;

packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/expected-root-imports.spec.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-imports */
+import * as React from 'react';
+import { ChartContainer } from '@mui/x-charts';
+import { BarPlot, ChartContainerPro } from '@mui/x-charts-pro';
+
+<div>
+  <ChartContainer series={[]}>
+    <BarPlot />
+  </ChartContainer>
+  <ChartContainerPro series={[]}>
+    <BarPlot />
+  </ChartContainerPro>
+</div>;

packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/index.ts

@@ -0,0 +1,37 @@
+import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
+import { renameImports } from '../../../util/renameImports';
+
+export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+    wrapColumn: 40,
+  };
+
+  renameImports({
+    j,
+    root,
+    packageNames: ['@mui/x-charts', '@mui/x-charts-pro'],
+    imports: [
+      {
+        oldEndpoint: 'ResponsiveChartContainer',
+        newEndpoint: 'ChartContainer',
+        importsMapping: {
+          ResponsiveChartContainer: 'ChartContainer',
+        },
+      },
+      {
+        oldEndpoint: 'ResponsiveChartContainerPro',
+        newEndpoint: 'ChartContainerPro',
+        importsMapping: {
+          ResponsiveChartContainerPro: 'ChartContainerPro',
+        },
+      },
+    ],
+  });
+
+  return root.toSource(printOptions);
+}

packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/rename-responsive-chart-container.test.ts

@@ -0,0 +1,44 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from '.';
+import readFile from '../../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+const TEST_FILES = ['nested-imports', 'root-imports'];
+
+describe('v8.0.0/charts', () => {
+  describe('rename-responsive-chart-container.test', () => {
+    TEST_FILES.forEach((testFile) => {
+      const actualPath = `./actual-${testFile}.spec.tsx`;
+      const expectedPath = `./expected-${testFile}.spec.tsx`;
+
+      describe(`${testFile.replace(/-/g, ' ')}`, () => {
+        it('transforms imports as needed', () => {
+          const actual = transform(
+            { source: read(actualPath) },
+            { jscodeshift: jscodeshift.withParser('tsx') },
+            {},
+          );
+
+          const expected = read(expectedPath);
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', () => {
+          const actual = transform(
+            { source: read(expectedPath) },
+            { jscodeshift: jscodeshift.withParser('tsx') },
+            {},
+          );
+
+          const expected = read(expectedPath);
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+    });
+  });
+});